body {
  background:
    linear-gradient(rgba(246, 242, 232, .72), rgba(246, 242, 232, .82)),
    url('assets/fondo-maderas-v2.jpg') center / cover fixed;
}

.wood-hero {
  min-height: 560px;
  background:
    linear-gradient(90deg, rgba(17, 25, 17, .84), rgba(17, 25, 17, .34)),
    url('assets/fondo-maderas-v2.jpg') center / cover;
}

.wood-copy h1 {
  margin: 10px 0 22px;
  animation: title-arrival .8s ease both;
}

.wood-copy > p:last-child {
  max-width: 670px;
  font-size: 1.08rem;
}

.wood-section {
  padding: 74px 6vw;
}

.species-section {
  padding-top: 22px;
  padding-bottom: 88px;
}

.section-heading {
  max-width: 780px;
  margin-bottom: 30px;
}

.section-heading h2 {
  margin: 8px 0 13px;
  transition: color .25s ease, transform .25s ease;
}

.section-heading:hover h2 {
  color: var(--green);
  transform: translateX(8px);
}

.section-heading > p:last-child {
  margin: 0;
}

.presentation-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.presentation-card {
  height: 390px;
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  background: #183126;
  box-shadow: 0 12px 28px rgba(17, 44, 32, .2);
  transition: transform .32s ease, box-shadow .32s ease;
}

.presentation-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 36px rgba(17, 44, 32, .28);
}

.presentation-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s ease;
}

.presentation-card:hover img {
  transform: scale(1.055);
}

.presentation-card figcaption {
  position: absolute;
  inset: auto 0 0;
  min-height: 142px;
  padding: 46px 20px 20px;
  color: #fff;
  background: linear-gradient(transparent, rgba(10, 28, 20, .96) 44%);
}

.presentation-card strong,
.presentation-card span {
  display: block;
}

.presentation-card strong {
  margin-bottom: 7px;
  font: 700 1.25rem/1.15 Georgia, serif;
}

.presentation-card span {
  font-size: .9rem;
  line-height: 1.4;
}

.species-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.species-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(199, 151, 70, .42);
  border-bottom: 4px solid var(--gold);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(24, 49, 38, .14);
  transition: transform .32s ease, box-shadow .32s ease, border-color .32s ease;
}

.species-card:hover,
.species-card:focus-visible {
  transform: translateY(-9px);
  border-color: var(--gold);
  box-shadow: 0 22px 40px rgba(24, 49, 38, .25);
}

.species-card-image {
  height: 260px;
  overflow: hidden;
  background: #183126;
}

.species-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s ease;
}

.species-card:hover .species-card-image img {
  transform: scale(1.05);
  transform-origin: left top;
}

.species-card-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 25px;
}

.species-card h3 {
  margin: 0 0 6px;
  font-size: 1.75rem;
}

.species-card em {
  color: var(--green);
}

.species-card p {
  margin: 16px 0 22px;
}

.card-link {
  margin-top: auto;
  color: var(--green);
  font-weight: 800;
}

.card-link::after {
  content: '  →';
  color: var(--gold);
}

@keyframes title-arrival {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1024px) {
  .presentation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .species-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body {
    background-attachment: scroll;
  }

  .wood-section {
    padding: 58px 24px;
  }

  .species-section {
    padding-top: 8px;
  }

  .presentation-grid,
  .species-grid {
    grid-template-columns: 1fr;
  }

  .presentation-card {
    height: 370px;
  }

  .species-card-image {
    height: 245px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wood-copy h1,
  .presentation-card,
  .presentation-card img,
  .species-card,
  .species-card-image img,
  .section-heading h2 {
    animation: none;
    transition: none;
  }
}