.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  position: relative;
  padding-block: var(--sp-8);
}

.section--tight {
  padding-block: var(--sp-7);
}

/*
  Para la sección que va justo debajo de un .page-banner: el banner ya separa
  visualmente con su propio fondo, así que no necesita otro bloque grande de
  padding encima — si no, el contenido (cards, fotos) queda debajo del
  scroll inicial y no se ve "de primera intención" al cargar la página.
*/
.section--after-banner {
  padding-top: var(--sp-4);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
  max-width: 62ch;
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
  align-items: center;
}

.grid {
  display: grid;
  gap: var(--sp-5);
}

/*
  Pista de "desliza" para los carruseles horizontales de mobile (ver
  alojamiento.css / amenidades.css): oculta por defecto, cada sección la
  muestra solo dentro de su propio breakpoint de carrusel y define su color.
*/
.swipe-hint {
  display: none;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-3);
}

.swipe-hint svg {
  width: 14px;
  height: 14px;
}

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

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

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

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

@media (max-width: 620px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}