/* Café Los Piedra — lista de lotes (/lotes/) */

.lotes-cab { padding: 72px 0 32px; }
.lotes-cab h1 { font-size: clamp(40px, 6vw, 72px); letter-spacing: 0.04em; line-height: 0.95; }
.lotes-cab .lead { font-size: 18px; max-width: 36em; margin: var(--space-4) 0 0; }

.lotes-lista { padding-top: 24px; }
.lotes-barra { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.lotes-barra .filtros { margin: 0; }
.lotes-barra .meta { margin: 0; color: var(--ink-muted); }

.lotes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.lote[hidden] { display: none; }
.lote a { display: flex; flex-direction: column; height: 100%; text-decoration: none; background: var(--white); border: 1px solid var(--ink); }
.lote .franja { display: flex; align-items: center; gap: 12px; padding-right: var(--space-3); color: var(--white); }
.lote .franja img { width: 48px; height: 48px; flex: none; }
.lote .proceso { font: 700 13px/1.2 var(--font-label); letter-spacing: 0.16em; text-transform: uppercase; }
.lote .cuerpo { padding: var(--space-3) var(--space-4) var(--space-4); display: flex; flex-direction: column; flex: 1; }
.lote .cuerpo > .meta { margin: 0; color: var(--ink-muted); }
.lote h2 { font-size: 40px; letter-spacing: 0.04em; margin: 2px 0 var(--space-3); }
.lote dl { margin: 0 0 var(--space-4); border-top: 1px solid var(--ink); }
.lote dl div { padding: 7px 0; border-bottom: 1px solid var(--ink); }
.lote dt { font: 400 11px/1.4 var(--font-meta); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.lote dd { margin: 0; font-weight: 400; font-size: 15px; line-height: 1.45; }
.lote .ver { margin-top: auto; align-self: flex-start; font: 700 13px/1 var(--font-label); letter-spacing: 0.16em; text-transform: uppercase; border-bottom: 2px solid currentColor; padding-bottom: 4px; }
.lote a:hover .ver, .lote a:focus-visible .ver { color: var(--honey-red); }
.lote a:hover { outline: 2px solid var(--ink); outline-offset: -1px; }

.l-honey .franja { background: var(--honey-red); }
.l-black .franja { background: var(--ink); color: var(--kraft); }
.l-anaerobico .franja { background: var(--purple); color: var(--blush); }
.l-natural .franja { background: var(--moss); }
.l-otro .franja { background: var(--navy); }

.otros { margin: var(--space-5) 0 0; color: var(--ink-muted); }
.otros a { color: var(--ink); }
.otros a:hover { color: var(--honey-red); }

.pie { padding-top: 0; }

@media (max-width: 1100px) { .lotes { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .lotes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .lotes { grid-template-columns: 1fr; } .lotes-cab { padding-top: 48px; } }

/* Etiqueta de lote a la venta */
.lote .franja { position: relative; }
.lote .disponible {
  position: absolute; right: 0; top: 0; bottom: 0; display: flex; align-items: center;
  padding: 0 12px; background: var(--white); color: var(--ink);
  font: 400 11px/1 var(--font-meta); letter-spacing: 0.14em; text-transform: uppercase;
}
.pie-base a { color: inherit; }