.entrada {
  display: grid;
  grid-template-columns: 5fr 6fr;
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
  padding: var(--aire) var(--centrado);
}

.entrada-texto p {
  max-width: 50ch;
  margin-top: 24px;
}

.mosaico {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 1.1vw, 16px);
}

.mosaico img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.mosaico img:last-child {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}

.encuadre-bajo {
  object-position: center 78%;
}

.encuadre-izquierdo {
  object-position: 26% center;
}

.filosofia {
  background: var(--carbon);
  color: var(--crema);
}

.filosofia strong {
  font-size: clamp(52px, 6.4vw, 96px);
  line-height: 1;
}

.filosofia span {
  margin-top: 14px;
}

.lugares {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-template-rows: repeat(4, auto);
  gap: clamp(28px, 3vw, 44px) clamp(24px, 4.5vw, 72px);
  padding: clamp(48px, 6vw, 88px) var(--margen) clamp(56px, 7vw, 104px);
}

.lugares h3 {
  font: italic 300 clamp(24px, 2.1vw, 30px)/1.15 var(--serif);
  letter-spacing: -0.01em;
}

.lugares p {
  max-width: 40ch;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
}

.llamada {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  min-height: clamp(380px, 44vw, 640px);
  padding: var(--aire) var(--centrado) clamp(48px, 6vw, 88px);
  color: var(--blanco);
}

.llamada-foto,
.llamada::after {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.llamada-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.llamada::after {
  content: "";
  background: var(--dorado);
  opacity: 0.6;
}

.llamada h2 {
  max-width: 20ch;
  color: inherit;
}

.llamada .boton {
  flex: none;
}

.llamada .boton:hover {
  border-color: var(--crema);
  background: var(--crema);
  color: var(--carbon);
}

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

  .lugares {
    grid-template-rows: repeat(6, auto);
  }
}

@media (max-width: 700px) {
  .lugares {
    grid-auto-flow: row;
    grid-template-rows: none;
  }

  .llamada {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
  }
}