/* =====================================================
   CONTACTO — page-contacto.php
   Hero de banda → panel con el formulario de Contact Form 7
   → fichas de datos → cierre.

   El panel y el formulario ya vienen resueltos por los
   bloques 22 y 27 de components.css: acá va sólo lo propio
   de esta página.
   ===================================================== */

/* La banda es azul, como en Propósito, y del mismo azul que el "Dona" de las
   internas: se lo comería. Vuelve al coral. */
.fpuc-siteheader--band .fpuc-btn--donate {
  background: var(--fpuc-action-donate);
  border-color: var(--fpuc-action-donate);
}

/* El panel del formulario no ocupa el ancho del contenedor: en el diseño es una
   tarjeta centrada, más estrecha que el resto de las secciones. */
.fpuc-form-panel--contacto {
  max-width: 860px;
  margin-inline: auto;
}

/* --- Fichas de datos ---------------------------------------------- */

.fpuc-contacto-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--fpuc-space-5);
  width: 100%;
  max-width: 860px;
  margin: var(--fpuc-space-6) auto 0;
  padding: 0;
  list-style: none;
}

.fpuc-contacto-dato {
  display: grid;
  gap: var(--fpuc-space-2);
  padding: var(--fpuc-space-5) var(--fpuc-space-4);
  border-radius: var(--fpuc-radius-md);
  background: var(--fpuc-surface);
  text-align: center;
}

.fpuc-contacto-dato__label {
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-label);
  font-weight: var(--fpuc-weight-semibold);
  letter-spacing: var(--fpuc-tracking-wide);
  text-transform: uppercase;
  color: var(--fpuc-text-subtle);
}

.fpuc-contacto-dato__valor {
  font-family: var(--fpuc-font-body);
  font-size: var(--fpuc-text-body);
  color: var(--fpuc-text);
  /* El correo largo no debe desbordar la ficha en móvil. */
  overflow-wrap: anywhere;
}

a.fpuc-contacto-dato__valor { text-decoration: none; }
a.fpuc-contacto-dato__valor:hover,
a.fpuc-contacto-dato__valor:focus-visible {
  color: var(--fpuc-blue);
  text-decoration: underline;
}