/* PATCH: Portadas completas en masonry (sin recorte) */
:root{
  --bg:#fff; --fg:#000;
  --gap:16px; --container:1200px;
  --row: 8px; /* base row for masonry */
}
*{box-sizing:border-box}
html,body{height:100%}
body{ margin:0; background:var(--bg); color:var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  line-height:1.45; letter-spacing:.01em; }
.container{max-width:var(--container); margin:0 auto; padding:0 20px}

.site-header,.site-footer{ display:flex; align-items:center; justify-content:space-between; padding:20px 0; border-bottom:1px solid #000; }
.site-footer{ border-top:1px solid #000; border-bottom:none; justify-content:center; gap:1rem; flex-wrap:wrap; }
.site-title{ margin:0; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.btn{ color:#fff; background:#000; text-decoration:none; border:1px solid #000; padding:.6rem .9rem; display:inline-block; line-height:1; -webkit-tap-highlight-color: transparent; }
.btn.ghost{ color:#000; background:#fff }
.btn:focus,.btn:hover{ outline:2px solid #000; outline-offset:2px }

main{ padding:24px 0 }
.hint{ margin:0 0 16px 0 }

/* Masonry container: cada tarjeta es un ítem que varía su altura */
.sections{
  display:grid;
  gap:24px;
  grid-template-columns: repeat(2, 1fr);
  align-items:start;
  grid-auto-rows: var(--row);
}
@media (min-width:900px){ .sections{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width:520px){ .site-header{ flex-direction:column; gap:.75rem } .site-nav{ display:grid; gap:.5rem; grid-template-columns:1fr } }

.section-card{ margin:0; display:block; }

/* Thumbnail sin recorte: la imagen se ve ENTERA */
.thumb{
  position:relative; display:block; width:100%;
  border:1px solid #000; background:#fff; overflow:hidden;
}
.thumb img{
  display:block; width:100%;
  height:auto;               /* <-- quita altura fija */
  object-fit:contain;        /* <-- imagen completa */
  background:#fff;
  filter: grayscale(1);
  transform: scale(1);
  transition: transform .18s linear, filter .18s linear;
}

/* Efectos */
.thumb .scrim{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.10); transition: opacity .18s linear; opacity:1; }
.thumb:hover img, .thumb:focus img, .thumb.active img{ transform: scale(1.03); filter: none }
.thumb:hover .scrim, .thumb:focus .scrim, .thumb.active .scrim{ opacity:.02 }
.thumb:focus{ outline:2px solid #000; outline-offset:2px }

.title{
  position:absolute; left:0; bottom:0; width:100%;
  margin:0; padding:.5rem .75rem; background:#000; color:#fff;
  font-size:1rem; text-transform:uppercase; letter-spacing:.04em; border-top:1px solid #000;
}