/* ── Cierre con la ciudad ─────────────────────────────────────── */

.cierre-ciudad {
  position: relative;
  padding: 96px 0;
  text-align: center;
  color: #fff;
  overflow: hidden;
  background: var(--navy);
}
@media (max-width: 700px) { .cierre-ciudad { padding: 64px 0; } }

.cierre-fondo { position: absolute; inset: 0; }
.cierre-fondo picture, .cierre-fondo img { width: 100%; height: 100%; object-fit: cover; }

/* La foto es de atardecer y ya es oscura abajo; el velo solo asegura
   el contraste del texto sin apagar los naranjas del cielo. */
.cierre-fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(6, 43, 89, .82) 0%, rgba(6, 43, 89, .92) 70%),
    linear-gradient(to top, rgba(6, 43, 89, .55), transparent 55%);
}

.cierre-ciudad .wrap { position: relative; z-index: 1; }
.cierre-ciudad h2 {
  font-size: clamp(28px, 4.6vw, 46px);
  max-width: 18ch;
  margin: 0 auto 20px;
}
.cierre-ciudad p {
  color: rgba(255, 255, 255, .8);
  max-width: 46ch;
  margin: 0 auto 28px;
  font-size: 17px;
}

/* ── Franja ilustrada de secciones ────────────────────────────── */

.franja-ilustrada {
  position: relative;
  height: 260px;
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: 38px;
  background: var(--navy);
}
.franja-ilustrada picture, .franja-ilustrada img { width: 100%; height: 100%; object-fit: cover; }
.franja-ilustrada::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(6, 43, 89, .88), rgba(6, 43, 89, .35) 70%);
}
.franja-ilustrada .texto {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 42px;
  z-index: 1;
  max-width: 30ch;
  color: #fff;
}
.franja-ilustrada .texto h3 { font-size: clamp(20px, 3vw, 27px); margin-bottom: 10px; }
.franja-ilustrada .texto p { font-size: 15px; color: rgba(255, 255, 255, .82); }

@media (max-width: 700px) {
  .franja-ilustrada { height: 220px; }
  .franja-ilustrada .texto { padding: 0 24px; max-width: none; }
  .franja-ilustrada::after { background: linear-gradient(to right, rgba(6, 43, 89, .92), rgba(6, 43, 89, .68)); }
}