/* ==========================================================================
   Contact (contact.html)
   Two ways to reach a person: email and WhatsApp. Additions only: main.css is
   not changed, and the page reuses its hero, header and footer.
   ========================================================================== */

.contact-hero { padding: clamp(112px, 15vh, 150px) 0 clamp(72px, 8vw, 120px); }
.contact-hero .eyebrow { margin-bottom: 18px; }
.contact-hero__title { font-size: clamp(2.4rem, .9rem + 3.6vw, 4.4rem); }
.contact-hero__lede { margin-top: 18px; max-width: 34rem; }

.contact-cards {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
  width: 100%; max-width: 860px; margin-top: 44px; text-align: left;
}
.contact-card {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 26px 26px 24px; border-radius: 24px;
  background: var(--white); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm);
}
.contact-card__ico {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px;
  background: var(--blue-50); color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue-100);
}
.contact-card__ico svg { width: 20px; height: 20px; }
.contact-card__ico--wa { background: #E9F9EF; color: #1FAF55; box-shadow: inset 0 0 0 1px rgba(31, 175, 85, .22); }
.contact-card__k {
  margin: 22px 0 0;
  font-family: var(--f-mono); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
}
.contact-card__v {
  margin: 6px 0 0;
  font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.2;
  color: var(--ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums;
}
.contact-card__d { margin: 10px 0 0; font-size: .93rem; line-height: 1.6; color: var(--ink-2); }
.contact-card__go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 22px;
  font-weight: 560; color: var(--blue);
}
.contact-card__go svg { width: 16px; height: 16px; transition: transform .35s var(--ease-out); }
.contact-card__go:hover svg { transform: translateX(3px); }

.contact-more { margin: 30px 0 0; font-size: .92rem; color: var(--ink-3); }
.contact-more a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.contact-more a:hover { color: var(--ink); }

@media (max-width: 680px) {
  .contact-cards { grid-template-columns: 1fr; margin-top: 34px; }
  .contact-card { padding: 22px 20px 20px; }
}