.amenidades {
  background: var(--green-900);
  color: var(--cream-50);
  position: relative;
  overflow: hidden;
}

.amenidades::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 60% at 90% 10%, rgba(87, 93, 65, 0.35), transparent 70%);
  pointer-events: none;
}

.amenidades .section-head .eyebrow {
  color: var(--green-300);
}

.amenidades .section-head h2 {
  color: var(--cream-50);
}

.amenidades .section-head .lede {
  color: var(--cream-200);
}

.amenidades .amenity-card {
  background: rgba(250, 247, 240, 0.06);
  border-color: rgba(250, 247, 240, 0.14);
}

.amenidades .amenity-card:hover {
  border-color: var(--green-400);
  background: rgba(250, 247, 240, 0.1);
}

.amenidades .amenity-card__icon {
  background: rgba(146, 150, 132, 0.25);
  color: var(--green-300);
}

.amenidades .amenity-card h3 {
  color: var(--cream-50);
}

.amenidades .amenity-card p {
  color: var(--cream-200);
}

.amenidades__grid {
  grid-template-columns: repeat(4, 1fr);
  position: relative;
}

@media (max-width: 980px) {
  .amenidades__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .amenidades__grid {
    grid-template-columns: 1fr;
  }
}

/*
  Igual que en el carrusel de cabañas del teaser de Inicio: en mobile, solo
  para el teaser (.amenidades--teaser, no en la página completa de
  Amenidades), se reemplaza el apilado vertical por un carrusel horizontal
  con scroll-snap para acortar el scroll de Inicio.
*/
@media (max-width: 560px) {
  .amenidades--teaser .swipe-hint {
    display: flex;
    color: var(--green-300);
  }

  .amenidades--teaser .amenidades__grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--container-pad));
    padding-inline: var(--container-pad);
    padding-bottom: var(--sp-2);
  }

  .amenidades--teaser .amenidades__grid::-webkit-scrollbar {
    display: none;
  }

  .amenidades--teaser .amenidades__grid > .amenity-card {
    flex: 0 0 58%;
    scroll-snap-align: start;
  }
}