/* =============================================================================
   Utiliobox — páginas de sitio (Acerca de y Contacto)
   Todo hereda de assets/css/utiliobox.css. Aquí solo las dos piezas que no
   existían: las tarjetas de identificación y el formulario de contacto.
   ============================================================================= */

/* --- Tarjetas con el correo y los datos del operador --- */
.info-cards {
  display: grid; gap: var(--s-4); margin-bottom: var(--s-8);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.info-card {
  padding: var(--s-5); border: 1px solid var(--border);
  border-radius: var(--r-lg); background: var(--surface);
}
.info-card--dest { border-color: var(--accent-border); background: var(--accent-soft); }
.info-card__etq {
  font-family: var(--mono); font-size: var(--fs-2xs); font-weight: var(--fw-medium);
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: var(--s-3);
}

/* El correo se enseña como TEXTO, grande y seleccionable, no solo como enlace:
   quien no tiene programa de correo configurado necesita poder leerlo y
   copiarlo, que es justo lo que un `mailto:` a secas no permite. */
.info-card__mail {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  margin-bottom: var(--s-3);
}
.info-card__mail a {
  font-family: var(--mono); font-size: var(--fs-lg); font-weight: var(--fw-medium);
  color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px;
  user-select: all; word-break: break-all;
}
.info-card__mail a:hover { color: var(--accent); }
.info-card__dato { font-size: var(--fs-base); line-height: 1.75; color: var(--ink-soft); }
.info-card__dato strong { color: var(--ink); font-weight: var(--fw-semi); }
.info-card__nota { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.6; }

/* --- Formulario: ADEMÁS del correo, nunca en su lugar --- */
.ct-form {
  display: grid; gap: var(--s-4); max-width: 68ch;
  padding: var(--s-5); margin-top: var(--s-2);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface-alt);
}
.ct-form__fila {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.ct-form__pie { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.ct-form__nota { font-size: var(--fs-sm); color: var(--ink-soft); }
.ct-form__nota:empty { display: none; }
.ct-form .textarea { min-height: 130px; resize: vertical; }

/* Sin JavaScript el formulario no puede hacer nada: se esconde y queda el
   correo, que es lo que de verdad hace falta. */
.no-js .ct-form { display: none; }