/* ═══════════════════════════════════════════════════════════════
   BEHABY — secciones ilustradas de la portada
   ═══════════════════════════════════════════════════════════════ */

/* ── Los dos componentes, con foto vertical al lado ───────────── */

.duo-con-foto {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 20px;
  margin-top: 38px;
  align-items: stretch;
}

.duo-foto {
  border-radius: var(--r);
  overflow: hidden;
  background: var(--navy);
  min-height: 340px;
}
.duo-foto picture, .duo-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.duo-tarjetas { display: grid; gap: 20px; }
.duo-tarjetas .tarjeta { margin: 0; }

@media (max-width: 860px) {
  .duo-con-foto { grid-template-columns: 1fr; }
  /* En móvil la foto vertical ocupa demasiado alto: se recorta a una
     banda y pasa debajo de las tarjetas, que es lo que importa leer. */
  .duo-foto { min-height: 0; height: 200px; order: 2; }
  .duo-tarjetas { order: 1; }
}

/* ── Bloque oscuro con foto de fondo ──────────────────────────── */

.bloque-oscuro.con-foto {
  position: relative;
  overflow: hidden;
  padding: 0;
}

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

/* La foto del parque es clara y muy contrastada: hace falta un velo
   fuerte para que el texto blanco se lea sin esfuerzo. */
.bloque-fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(6, 43, 89, .95) 0%, rgba(6, 43, 89, .88) 52%, rgba(6, 43, 89, .62) 100%);
}

.bloque-contenido { position: relative; z-index: 1; padding: 44px; }
@media (max-width: 700px) {
  .bloque-contenido { padding: 28px 22px; }
  .bloque-fondo::after {
    background: linear-gradient(to bottom, rgba(6, 43, 89, .94), rgba(6, 43, 89, .9));
  }
}