/* TITULO PRINCIPAL */
.section-title {
  text-align: center;
  font-size: 34px;
  font-weight: 900;
  color: #1b5e20;
  margin-bottom: 50px;
  line-height: 1.3;
}

.section-title span {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: #207d06;
  margin-top: 10px;
}

/* ============================= */
/* CONTENEDOR GENERAL */
/* ============================= */
.promo-wrapper {
  background: #ffffff;
  padding: 60px 20px;
}

/* ============================= */
/* TARJETAS */
/* ============================= */
.promo-card {
  background: #e8f5e9;
  border-radius: 20px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.04);
}

/* ============================= */
/* FLEX BASE */
/* ============================= */
.promo-grid {
  display: flex !important;
  align-items: center;
  gap: 40px;
}

/* ============================= */
/* 🔥 CONTROL DE ORDEN REAL */
/* ============================= */

/* Bloques normales (imagen izquierda) */
.promo-grid .circle-img {
  order: 1;
}

.promo-grid .promo-text {
  order: 2;
}

/* Bloques con .reverse (imagen derecha) */
.promo-grid.reverse .circle-img {
  order: 2;
}

.promo-grid.reverse .promo-text {
  order: 1;
}

/* ============================= */
/* IMAGEN CIRCULAR */
/* ============================= */
.circle-img {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  overflow: hidden;
  border: 6px solid #2e7d32;
  flex-shrink: 0;
}

.circle-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================= */
/* TEXTO */
/* ============================= */
.promo-text {
  flex: 1;
}

.promo-text h2,
.promo-text h3 {
  font-size: 22px;
  font-weight: 600;
  color: #2e7d32;
  margin-bottom: 12px;
}

.promo-text p {
  line-height: 1.6;
  color: #444;
  margin-bottom: 12px;
}

.promo-text ul {
  padding-left: 20px;
  margin-bottom: 12px;
}

.promo-text ul li {
  margin-bottom: 6px;
}

/* ============================= */
/* UBICACIÓN */
/* ============================= */
.location-card {
  text-align: center;
}

/* ============================= */
/* RESPONSIVE */
/* ============================= */
@media (max-width: 992px) {

  .promo-grid {
    flex-direction: column !important;
    text-align: center;
  }

  .circle-img {
    width: 200px;
    height: 200px;
    margin-bottom: 20px;
  }

  /* En móvil siempre imagen arriba */
  .promo-grid .circle-img,
  .promo-grid.reverse .circle-img {
    order: 1;
  }

  .promo-grid .promo-text,
  .promo-grid.reverse .promo-text {
    order: 2;
  }
}