.contact-hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-16) var(--space-4);
  background: var(--color-background-inverse);
  color: var(--color-text-inverse);
}

.contact-hero::before {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 72% 18%, rgba(41, 151, 255, 0.18), transparent 32rem),
    radial-gradient(circle at 28% 80%, rgba(0, 113, 227, 0.1), transparent 28rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 30%);
  content: "";
  pointer-events: none;
}

.contact-hero__inner {
  position: relative;
  max-width: 46rem;
}

.contact-hero .section-heading {
  color: var(--color-text-inverse);
}

.contact-hero .section-lead {
  color: var(--color-text-tertiary);
}

.contact-connect {
  padding: var(--space-12) var(--space-4) var(--space-16);
}

.contact-connect__grid {
  display: grid;
  gap: var(--space-4);
}

.contact-channel {
  position: relative;
  overflow: hidden;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-out-quart);
}

.contact-channel__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.contact-channel:hover {
  border-color: color-mix(in srgb, var(--color-action) 32%, var(--color-border));
  box-shadow: var(--shadow-lift);
  transform: translateY(-0.25rem);
}

.contact-channel__icon {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
  border-radius: var(--radius-circle);
  color: #fff;
  flex-shrink: 0;
}

.contact-channel__icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.contact-channel__icon--whatsapp {
  background: #25D366;
}

.contact-channel__icon--instagram {
  background: linear-gradient(135deg, #833AB4, #F77737, #FCAF45);
}

.contact-channel__icon--maps {
  background: #4285F4;
}

.contact-channel__body {
  min-width: 0;
}

.contact-channel__body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-utility);
  line-height: var(--line-title);
  font-weight: 600;
}

.contact-channel__body p {
  margin: var(--space-1) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-control);
}

.contact-form-section .split {
  gap: var(--space-10);
}

.contact-form-card {
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  padding: var(--space-6);
  box-shadow: var(--shadow-soft);
}

.contact-form-card h2 {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-utility);
  line-height: var(--line-title);
}

.contact-form-card .form-grid {
  display: grid;
  gap: var(--space-4);
}

.contact-form-card .field label {
  font-size: var(--text-control);
  font-weight: 700;
}

.contact-form-card .field input,
.contact-form-card .field textarea {
  min-height: var(--touch-target);
  width: 100%;
  border: 0.0625rem solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  padding: 0 var(--space-3);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

.contact-form-card .field input:focus,
.contact-form-card .field textarea:focus {
  outline: none;
  border-color: var(--color-action);
  box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--color-action) 20%, transparent);
}

.contact-form-card .field textarea {
  min-height: 7rem;
  padding-block: var(--space-3);
  resize: vertical;
}

.contact-form-card .button {
  width: 100%;
  justify-content: center;
}

.contact-info {
  display: grid;
  gap: var(--space-5);
}

.contact-info-card {
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  padding: var(--space-6);
  box-shadow: var(--shadow-soft);
}

.contact-info-card h2 {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-utility);
  line-height: var(--line-title);
}

.contact-info-card__location {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-control);
}

.contact-info-detail {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 0.0625rem solid var(--color-border);
}

.contact-info-detail__row {
  display: grid;
  gap: var(--space-1);
}

.contact-info-detail__row strong {
  font-size: var(--text-control);
  font-weight: 600;
}

.contact-info-detail__row span {
  color: var(--color-text-secondary);
  font-size: var(--text-control);
}

.contact-map {
  overflow: hidden;
  max-width: 100%;
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-background-secondary);
  box-shadow: var(--shadow-soft);
}

.contact-map iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 18rem;
  border: 0;
  filter: saturate(0.9) contrast(1.04);
}

@keyframes contact-rise {
  from {
    opacity: 0;
    transform: translateY(1.25rem) scale(0.99);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (min-width: 640px) {
  .contact-connect__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 834px) {
  .contact-form-section .split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .contact-channel,
  .contact-form-card,
  .contact-info-card,
  .contact-map {
    animation: contact-rise 640ms var(--ease-out-quart) both;
    animation-delay: var(--reveal-delay, 0ms);
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-channel,
  .contact-form-card,
  .contact-info-card,
  .contact-map {
    animation: none;
  }
}