/* ==========================================================================
   Contacto — página 999
   --------------------------------------------------------------------------
   Tres tarjetas (icono rojo de 85px con radio 12), el formulario y, aparte,
   el mapa a todo el ancho del contenedor.
   ========================================================================== */
.cid-contacto {
  display: flex;
  flex-direction: column;
  gap: 67px;
  padding: 8% 4% 4%;
  background: var(--blanco);
}

.cid-tarjetas {
  display: flex;
  justify-content: space-between;
}

.cid-tarjeta {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: 33%;
  max-width: 33%;
}

.cid-tarjeta-icono {
  flex: none;
  display: inline-flex;
  margin-top: -9px;
  padding: 20px;
  border-radius: 12px;
  background: var(--rojo);
  color: var(--blanco);
  transition: transform .3s;
}

/* «shrink» de Elementor */
.cid-tarjeta-icono:hover { transform: scale(.9); }

.cid-tarjeta-icono svg { width: 45px; height: 45px; }

.cid-tarjeta-texto { flex: 1 1 auto; padding-right: 9px; }

.cid-tarjeta h4 {
  margin-bottom: 10px;
  color: var(--azul);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: capitalize;
}

.cid-tarjeta p {
  color: var(--gris);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
}

/* El mapa vive en su propio contenedor, de 1320px como mucho, con 8 % del
   ancho debajo antes de la banda «Hablemos de tu proyecto». */
.cid-contacto-mapa { padding-bottom: 8%; }

.cid-contacto-mapa iframe {
  max-width: var(--ancho);
  height: 300px;
  margin: 0 auto;
}