/* [casos] — sección "Casos de éxito reales": badge superior, título centrado
   con el span en verde itálica, descripción y grid de tarjetas de proyectos
   reales (foto con badges de zona y precio, chips m²/tiempo/"Todo incluido",
   líneas problema/solución/resultado y botones WhatsApp + "Ver {zona}").
   2 columnas → 1 en móvil. */

.mr-casos {
  --mrcs-verde:     var(--mr-color1, #007c68);  /* span del título (como [proceso]/[opiniones]) */
  --mrcs-verde-btn: var(--mr-verde, #007c68);   /* botón WhatsApp y badge de precio (como [cabecera]) */
  --mrcs-oscuro:    var(--contrast, #242727);
  --mrcs-texto:     var(--mr-texto, #565f5f);
  --mrcs-rojo:      var(--mr-error, #c9392d);
  --mrcs-borde:     var(--mr-borde, #e6ebe9);
  --mrcs-gris:      var(--mr-gris, #f7f2ed);

  max-width: 1180px;
  margin: 3rem auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
  text-align: center;
}

.mr-casos__badge {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.3rem 0.9rem;
  background: var(--mrcs-gris);
  border: 1px solid var(--mrcs-borde);
  border-radius: 999px;
  color: var(--mrcs-texto);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.mr-casos__titulo {
  margin: 0 0 0.85rem;
  color: var(--mrcs-oscuro);
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
}

.mr-casos__titulo span {
  color: var(--mrcs-verde);
  font-style: italic;
}

.mr-casos__descripcion {
  max-width: 640px;
  margin: 0 auto 2.5rem;
  color: var(--mrcs-texto);
  font-size: 1.02rem;
  line-height: 1.6;
}

/* --- Grid de tarjetas --- */

.mr-casos__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem;
  text-align: left;
}

.mr-casos__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--mrcs-borde);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(18, 28, 45, 0.04);
}

/* --- Foto con badges de zona y precio --- */

.mr-casos__foto {
  position: relative;
}

.mr-casos__foto img {
  display: block;
  width: 100%;
  height: clamp(190px, 24vw, 250px);
  object-fit: cover;
}

.mr-casos__zona,
.mr-casos__precio {
  position: absolute;
  top: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
}

.mr-casos__zona {
  left: 0.9rem;
  background: rgba(255, 255, 255, 0.93);
  color: var(--mrcs-oscuro);
}

.mr-casos__zona svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.mr-casos__precio {
  right: 0.9rem;
  background: var(--mrcs-verde-btn);
  color: #ffffff;
  font-weight: 700;
}

/* --- Cuerpo de la tarjeta --- */

.mr-casos__cuerpo {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 1.4rem 1.5rem 1.5rem;
}

.mr-casos__subtitulo {
  margin: 0 0 0.85rem;
  color: var(--mrcs-oscuro);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.25;
}

/* Chips de datos: m², días, todo incluido */

.mr-casos__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin: 0 0 1.1rem;
  padding: 0 0 1.1rem;
  border-bottom: 1px solid var(--mrcs-borde);
  list-style: none;
}

.mr-casos__datos li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--mrcs-texto);
  font-size: 0.88rem;
}

.mr-casos__datos svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* Líneas problema / solución / resultado */

.mr-casos__detalle {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 0.8rem;
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
}

.mr-casos__linea {
  display: flex;
  gap: 0.6rem;
}

.mr-casos__linea svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.mr-casos__linea p {
  margin: 0;
  color: var(--mrcs-texto);
  font-size: 0.93rem;
  line-height: 1.55;
}

.mr-casos__linea strong {
  color: var(--mrcs-oscuro);
}

.mr-casos__linea--problema svg  { color: var(--mrcs-rojo); }
.mr-casos__linea--solucion svg  { color: var(--mrcs-oscuro); }
.mr-casos__linea--resultado svg { color: var(--mrcs-verde-btn); }

/* --- Botones (GeneratePress pisa enlaces: forzar colores en todos los estados) --- */

.mr-casos__botones {
  display: flex;
  gap: 0.75rem;
}

.mr-casos__btn,
.mr-casos__btn:visited,
.mr-casos__btn:hover,
.mr-casos__btn:focus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.mr-casos__btn {
  padding: 0.75rem 1.1rem;
}

.mr-casos__btn svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.mr-casos__btn--whatsapp,
.mr-casos__btn--whatsapp:visited,
.mr-casos__btn--whatsapp:hover,
.mr-casos__btn--whatsapp:focus {
  flex-grow: 1;
  background: var(--mrcs-verde-btn);
  color: #ffffff;
}

.mr-casos__btn--whatsapp:hover {
  background: var(--mr-verde-deep, #006a59);
}

.mr-casos__btn--ver,
.mr-casos__btn--ver:visited,
.mr-casos__btn--ver:hover,
.mr-casos__btn--ver:focus {
  background: #ffffff;
  border: 1px solid var(--mrcs-borde);
  color: var(--mrcs-oscuro);
  white-space: nowrap;
}

.mr-casos__btn--ver:hover {
  background: var(--mrcs-gris);
}

/* --- Móvil: una columna --- */

@media (max-width: 760px) {
  .mr-casos__grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

@media (max-width: 560px) {
  .mr-casos__cuerpo {
    padding: 1.2rem 1.15rem 1.25rem;
  }

  .mr-casos__botones {
    flex-direction: column;
  }
}