/* ============================================================================
   PUENTE v4 · PÁGINAS MENORES — contacto, gracias, 404, legales.
   Piezas pequeñas que antes tenían su propia hoja (o ninguna, como /gracias/,
   que se publicó SIN una sola regla de CSS).
   ========================================================================== */

/* ── Vuelta del pago ─────────────────────────────────────────────────────── */
.thanks__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-lg);
  padding: var(--space-4xl) var(--space-2xl);
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-hero);
}
.thanks__mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: var(--tint-green);
  color: var(--accent-green);
}
.thanks__mark svg { width: 28px; height: 28px; }
.thanks__mark[hidden] { display: none; }

/* Mientras se comprueba, la marca late muy despacio: dice «esto sigue
   trabajando» sin poner un texto que parpadee. */
@media (prefers-reduced-motion: no-preference) {
  .thanks__card:not([data-state]) .thanks__mark,
  .thanks__card[data-state="pending"] .thanks__mark {
    animation: thanks-pulse 1.6s var(--ease-in-out) infinite;
  }
  @keyframes thanks-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; }
  }
}
.thanks__card:not([data-state]) .thanks__mark,
.thanks__card[data-state="pending"] .thanks__mark {
  background: var(--tint-blue);
  color: var(--accent-blue);
}

.thanks__title { font-size: clamp(1.6rem, 3.2vw, 2.25rem); font-weight: 800; letter-spacing: -.025em; }
.thanks__card .t-lead { max-width: 46ch; }
.thanks__perks { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-sm); }
.thanks__perks li { font-size: var(--text-sm); color: var(--text-secondary); }
.thanks__perks[hidden] { display: none; }
.thanks__actions { display: flex; gap: var(--space-md); flex-wrap: wrap; justify-content: center; margin-top: var(--space-md); }
.thanks__receipt { color: var(--text-tertiary); }
.thanks__receipt[hidden] { display: none; }
.thanks__help { margin-top: var(--space-2xl); text-align: center; color: var(--text-tertiary); }
.thanks__help a { color: var(--accent-blue); text-decoration: underline; text-underline-offset: 3px; }

/* ── 404 ─────────────────────────────────────────────────────────────────── */
.notfound {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}
.notfound__link { display: flex; flex-direction: column; gap: 2px; padding: var(--space-lg); }
.notfound__link strong { font-size: var(--text-sm); }
.notfound__search { display: flex; gap: var(--space-md); margin-top: var(--space-2xl); }
.notfound__search .field__input { flex: 1 1 auto; }

/* ── Contacto ────────────────────────────────────────────────────────────
   UN solo apartado desde la 4.3: la dirección en grande, dos botones y un
   párrafo. Se fueron con las secciones que sobraban `.checklist`, `.topics`,
   `.topic` y `.topic__link`, igual que antes se habían ido las del formulario
   (`.contact__form`, `.contact__row`, `.topic-chip`). */
.mailcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  text-align: center;
  padding: var(--space-4xl) var(--space-2xl);
  margin-top: var(--space-3xl);
}
.mailcard__address {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text-primary);
  /* La dirección es larga y el móvil es estrecho: que parta por donde toca en
     vez de desbordar la tarjeta. */
  overflow-wrap: anywhere;
}
.mailcard__address:hover { color: var(--accent-blue); }
.mailcard__actions { display: flex; gap: var(--space-md); flex-wrap: wrap; justify-content: center; }
.copy-btn[hidden] { display: none; }
.copy-btn.is-done { color: var(--accent-green); }

.contact-note {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-3xl);
  color: var(--text-secondary);
}