/* Productos como piezas de exhibidor: base, escala y composición editorial. */
.products {
  background:var(--olive);
}
.products .cards article {
  min-height:0;
  border-color:#e1e4cf;
  background:var(--cream);
  color:var(--ink);
  cursor:pointer;
  transition:border-color 280ms ease, box-shadow 280ms ease, transform 280ms ease;
}
.products .cards article:hover {
  border-color:var(--paper);
  box-shadow:0 20px 42px rgba(0, 0, 0, .28);
}
.products .cards article:focus-visible {
  outline:2px solid var(--paper);
  outline-offset:4px;
}
.products .cards .art {
  --pedestal-width:clamp(110px, 10vw, 190px);
  height:auto;
  min-height:0;
  background:var(--cream);
  overflow:hidden;
}
.products .cards .copy,
.products .cards .copy.cream {
  background:transparent;
  color:var(--ink);
}
.products .cards .copy a {
  display:inline-flex;
  width:fit-content;
  align-self:flex-start;
  margin-top:4px;
  padding-bottom:2px;
  line-height:1.15;
}
.products .cards .art::before,
.products .cards .art::after {
  content:"";
  position:absolute;
  left:50%;
  width:var(--pedestal-width);
  border:0;
  border-radius:50%;
  pointer-events:none;
  transform:translateX(-50%);
  z-index:0;
}
.products .cards .art::before {
  height:clamp(14px, 1.15vw, 21px);
  bottom:clamp(31px, 2.45vw, 45px);
  background:radial-gradient(ellipse at center, #ffffec 0%, #f8f5d4 58%, #ded7a1 100%);
  box-shadow:0 2px 4px #9b956340;
  z-index:1;
}
.products .cards .art::after {
  height:clamp(30px, 2.4vw, 45px);
  bottom:clamp(7px, .55vw, 11px);
  border:0;
  border-radius:0 0 50% 50% / 0 0 22% 22%;
  background:linear-gradient(90deg, #ddd59f 0%, #f3efc9 14%, #eae4b8 50%, #f6f2ce 83%, #d6cd93 100%);
  box-shadow:0 8px 12px #44421826;
}
.products .cards .art img {
  position:absolute;
  left:50%;
  bottom:var(--product-floor, clamp(45px, 3.55vw, 66px));
  width:auto;
  height:auto;
  max-height:78%;
  max-width:76%;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 5px 6px #34343428);
  transform:translateX(-50%);
  z-index:2;
}

@media (min-width:1101px) {
  .products { padding-block:clamp(72px, 6vw, 112px); }
  .products .products-intro { margin-bottom:clamp(26px, 2vw, 42px); }
  .products .cards {
    grid-template-columns:repeat(6, minmax(0, 1fr));
    grid-template-rows:clamp(190px, 15vw, 300px) clamp(190px, 15vw, 300px) clamp(360px, 22vw, 440px);
    gap:clamp(10px, .8vw, 18px);
  }
  .products .cards article:nth-child(1) {
    grid-area:1 / 1 / 3 / 4;
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .products .cards article:nth-child(2) { grid-area:1 / 4 / 2 / 7; }
  .products .cards article:nth-child(3) { grid-area:2 / 4 / 3 / 7; }
  .products .cards article:nth-child(4) { grid-area:3 / 1 / 4 / 3; }
  .products .cards article:nth-child(5) { grid-area:3 / 3 / 4 / 5; }
  .products .cards article:nth-child(6) { grid-area:3 / 5 / 4 / 7; }

  .products .cards article:nth-child(1) .copy {
    grid-column:1;
    grid-row:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:clamp(24px, 2.3vw, 46px);
  }
  .products .cards article:nth-child(1) .art {
    grid-column:2;
    grid-row:1;
    border-left:0;
  }
  .products .cards article:nth-child(1) .art {
    --pedestal-width:min(92%, 390px);
  }
  .products .cards article:nth-child(1) .art img {
    max-height:90%;
    max-width:98%;
    transform:translate(-50%, clamp(20px, 2vw, 45px));
  }

  .products .cards article:nth-child(2),
  .products .cards article:nth-child(3) {
    display:grid;
    grid-template-columns:minmax(0, 1.45fr) minmax(150px, .55fr);
  }
  .products .cards article:nth-child(2) .copy,
  .products .cards article:nth-child(3) .copy {
    grid-column:1;
    grid-row:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:clamp(17px, 1.55vw, 30px);
  }
  .products .cards article:nth-child(2) .art,
  .products .cards article:nth-child(3) .art {
    grid-column:2;
    grid-row:1;
    border-left:0;
  }
  .products .cards article:nth-child(2) .art img,
  .products .cards article:nth-child(3) .art img { max-height:72%; max-width:88%; }
  .products .cards article:nth-child(2) .art img {
    transform:translate(-50%, clamp(34px, 3.6vw, 76px));
  }
  .products .cards article:nth-child(3) .art img {
    transform:translate(-50%, clamp(13px, 1.5vw, 31px));
  }

  .products .cards article:nth-child(n+4) {
    display:grid;
    grid-template-rows:minmax(170px, 1fr) auto;
  }
  .products .cards article:nth-child(n+4) .art { min-height:170px; }
  .products .cards article:nth-child(n+4) .copy {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:clamp(16px, 1.25vw, 24px);
  }
  .products .cards article:nth-child(n+4) .copy small,
  .products .cards article:nth-child(n+4) .copy p { display:block; }
  .products .cards article:nth-child(n+4) .copy h3 { margin:clamp(5px, .45vw, 10px) 0; }
  .products .cards article:nth-child(n+4) .copy a { margin-left:0; white-space:normal; }
  .products .cards article:nth-child(n+4) .art img {
    height:130px;
    max-height:80%;
    max-width:72%;
  }
  .products .cards article:nth-child(4) .art img { transform:translate(-50%, clamp(16px, 1.7vw, 35px)); }
  .products .cards article:nth-child(5) .art img,
  .products .cards article:nth-child(6) .art img { transform:translate(-50%, clamp(5px, .55vw, 12px)); }
  .products .cards .copy h3 { margin:clamp(5px, .45vw, 10px) 0; }
}

@media (min-width:701px) and (max-width:1100px) {
  .products .cards { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .products .cards article { min-height:360px; background:var(--cream); }
  .products .cards .art { height:220px; }
  .products .cards .copy { background:transparent; color:var(--ink); }
}

@media (max-width:700px) {
  .products .cards article { background:var(--cream); }
  .products .cards .copy { background:transparent; color:var(--ink); }
  .products .cards .art { min-height:220px; }
  .products .cards .art img { max-height:185px; }
}

@media (prefers-reduced-motion:reduce) {
  .products .cards article { transition:none; }
}