#brxe-yggjjg.tr-contact-map {
  width: 45%;
  min-height: 640px;
  margin-bottom: -4px;
}

#brxe-yggjjg.tr-contact-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  border: 0;
}

/* Estilos de tabla normales (para desktop) */
.table-responsive-cards table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.table-responsive-cards th,
.table-responsive-cards td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  white-space: normal;
}

/* Estilo para la fila de encabezado si quieres darle un fondo */
.table-responsive-cards .table-header-row {
  background-color: #f2f2f2;
}

@media (max-width: 767px) {
  #brxe-yggjjg.tr-contact-map {
    width: 100%;
    min-height: 420px;
  }

  .bricks-related-posts .repeater-item [data-field-id="wxumdp"] {
    margin-right: 0 !important;
    width: fit-content;
  }
}

/* --- MEDIA QUERY PARA PANTALLAS PEQUEÑAS --- */
/* Aplica estos estilos cuando la pantalla tenga 600px o menos */
@media (max-width: 600px) {

  .table-responsive-cards table,
  .table-responsive-cards tbody,
  .table-responsive-cards tr,
  .table-responsive-cards td {
    display: block; /* Convierte todos estos elementos a bloques */
    width: 100%; /* Asegura que ocupen el ancho completo */
  }

  /* Oculta la fila de encabezado original en móvil */
  .table-responsive-cards .table-header-row {
      display: none;
  }

  /* Añade un margen entre las filas (ahora bloques) */
  .table-responsive-cards tr {
    margin-bottom: 15px;
    border: 1px solid #ddd; /* Opcional: añade un borde para simular una tarjeta */
    padding: 10px; /* Opcional: añade padding dentro de la "tarjeta" de la fila */
    box-sizing: border-box; /* Incluye padding y borde en el ancho */
  }

  /* Estilo para cada celda (ahora un ítem dentro del bloque de la fila) */
  .table-responsive-cards td {
    border: none; /* Elimina los bordes de celda individuales */
    border-bottom: 1px solid #eee; /* Opcional: borde entre ítems */
    position: relative; /* Necesario para posicionar el pseudo-elemento */
    padding-left: 50%; /* Deja espacio a la izquierda para la etiqueta */
    text-align: right; /* Alinea el valor a la derecha */
    white-space: normal;
  }

  /* Última celda de cada fila, sin borde inferior */
  .table-responsive-cards tr td:last-child {
    border-bottom: none;
  }

  /* Usa el atributo data-label para mostrar la etiqueta antes del contenido de la celda */
  .table-responsive-cards td::before {
    content: attr(data-label); /* Obtiene el texto del atributo data-label */
    position: absolute; /* Posiciona la etiqueta */
    left: 10px; /* Distancia desde la izquierda */
    width: calc(50% - 20px); /* Anchura para la etiqueta (50% - padding) */
    padding-right: 10px; /* Padding a la derecha de la etiqueta */
    font-weight: bold; /* Hace la etiqueta negrita */
    text-align: left; /* Alinea la etiqueta a la izquierda */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}