/* =========================
  ORIGEN E ITINERARIO (COMPLETO)
========================= */

.origen-itinerario {
  padding: clamp(40px, 6vw, 80px) clamp(18px, 6vw, 90px);
  background-color: var(--bg);
}

.titulo-origen {
  font-size: xx-large;
}

/* Layout 2 columnas */
.origen-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(22px, 5vw, 60px);
  align-items: start;
}

/* Texto general */
.origen-texto p,
.origen-lado p,
.origen-texto-tercero {
  font-size: clamp(0.98rem, 0.3vw + 0.95rem, 1.08rem);
  line-height: 1.75;
  margin: 0 0 22px 0;
  text-align: justify;
  color: var(--text);
}

/* Reset figure */
.origen-itinerario figure {
  margin: 0;
}

/* Imágenes: anti-rotura */
.origen-itinerario img {
  display: block;     /* evita espacios raros debajo de img */
  width: 100%;
  max-width: 100%;
  height: auto;       /* fallback */
  border-radius: 8px;
}

/* Imagen horizontal (arriba derecha) */
.imagen-horizontal img {
  width: 100%;
  height: clamp(200px, 18vw, 340px);
  object-fit: cover;
  object-position: center;
  margin-bottom: 10px;
}

/* Epígrafes editables (más claros) */
.imagen-horizontal figcaption,
.imagenes-verticales figcaption {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.92); /* ✅ más claro */
  font-style: italic;
  margin-top: 10px;
  outline: none;
}

/* Grid de imágenes verticales */
.imagenes-verticales {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2vw, 24px);
  margin-top: 18px;
}

.imagenes-verticales img {
  width: 100%;
  height: clamp(260px, 24vw, 460px);
  object-fit: cover;
  object-position: center;
}

/* =========================
  RESPONSIVE
========================= */

/* Tablets */
@media (max-width: 992px) {
  .origen-grid {
    grid-template-columns: 1fr;
  }

  /* en tablet puede seguir en 2 si hay ancho */
  .imagenes-verticales {
    grid-template-columns: 1fr 1fr;
  }

  .imagen-horizontal img {
    height: clamp(210px, 30vw, 360px);
  }
}

/* Mobile */
@media (max-width: 600px) {
  .origen-itinerario {
    padding: 36px 18px;
  }

  /* verticales una debajo de la otra */
  .imagenes-verticales {
    grid-template-columns: 1fr;
  }

  .imagen-horizontal img {
    height: 220px;
  }

  .imagenes-verticales img {
    height: 320px;
  }

  /* texto más cómodo en cel */
  .origen-texto p,
  .origen-lado p,
  .origen-texto-tercero {
    text-align: left;
  }
}

/* Pantallas grandes: centra el bloque */
@media (min-width: 1400px) {
  .origen-grid {
    max-width: 1280px;
    margin: 0 auto;
  }
}