/* ============================================================
   VIAJAR — Contatti
   ============================================================ */

.contatti-header {
  background: var(--cream);
  padding-block: var(--sp-16);
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.contatti-header__title {
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  font-weight: 700;
  margin-bottom: var(--sp-3);
}

.contatti-header__sub {
  font-size: var(--fs-md);
  color: var(--text-muted);
  font-weight: 300;
}

/* ── 2-column layout ── */
.contatti-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-12);
  padding-block: var(--sp-12);
}

@media (min-width: 768px) {
  .contatti-grid { grid-template-columns: 1.3fr 1fr; }
}

/* ── Contact info ── */
.info-card {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  margin-bottom: var(--sp-4);
}

.info-card__title {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
}

/* ── Map placeholder ── */
.map-placeholder {
  width: 100%;
  height: 200px;
  background: var(--cream-dark);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: var(--sp-4);
  border: 1px dashed var(--border);
}

/* ── Social buttons ── */
.social-direct-btns {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-5);
}

.social-direct-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.social-direct-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.social-direct-btn--whatsapp {
  background: #25D366;
  color: var(--white);
}

.social-direct-btn--instagram {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color: var(--white);
}

/* ── FAQ ── */
.contatti-faq {
  background: var(--cream);
  padding-block: var(--sp-12);
  border-top: 1px solid var(--border);
}

.contatti-faq__title {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: 700;
  text-align: center;
  margin-bottom: var(--sp-8);
}

.faq-list {
  max-width: 720px;
  margin-inline: auto;
}