/* =========================
   DESTINOS INTERNOS
   Punto Inicial
========================= */

/* === DESTINOS (páginas internas) === */
.heroDest{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 24px;
  align-items: stretch;
  margin-top: 18px;
}

.heroDest__img{
  border-radius: 18px;
  min-height: 320px;
  box-shadow: 0 18px 45px rgba(0,0,0,.08);
}

.heroDest__box{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 18px 18px;
  box-shadow: 0 18px 45px rgba(0,0,0,.06);
}

.dest__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.dest__grid .card{
  background:#fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 18px 18px;
  box-shadow: 0 18px 45px rgba(0,0,0,.06);
}

@media (max-width: 920px){
  .heroDest{ grid-template-columns: 1fr; }
  .dest__grid{ grid-template-columns: 1fr; }
  .heroDest__img{ min-height: 240px; }
}

.heroDest__img{
  border-radius: 18px;
  min-height: 320px;
  box-shadow: 0 18px 45px rgba(0,0,0,.08);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* =========================
   PÁGINAS DESTINO: container más ancho
   (afecta header + contenido + footer)
   PÉGALO AL FINAL DE destinos.css
========================= */
.page-destino .container{
  width: min(1100px, calc(100% - 40px));
  margin-inline: auto;
}

/* Responsive: vuelve al ancho normal en móvil */
@media (max-width: 900px){
  .page-destino .container{
    width: min(1100px, calc(100% - 40px));
  }
}