.contacto-row {
  display: flex;
  flex-direction: row;
  gap: var(--space-16);
  align-items: flex-start;
}

.contacto-info {
  width:60%;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.contacto-info h2 {
  font-size: var(--text-4xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--color-dark);
}

.contacto-detalles {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.contacto-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.contacto-item .material-symbols-outlined {
  font-size: 24px;
  color: var(--color-accent);
}

.contacto-item a {
  text-decoration: none;
  color: var(--color-dark);
  transition: color var(--transition-base);
}

.contacto-item a:hover {
  color: var(--color-accent);
}

.contacto-form {
  width:40%;
  flex: 1;
}

/* Contact Form 7 Styles */
.contacto-form .wpcf7-form {
  width: 100%;
}

/* All form field styles now loaded from form-fields.css component */
/* Includes: .contact-form-grid, .form-field, .form-field-row, inputs, textareas, */
/* checkboxes, validation messages, submit button, and animations */

/* Responsive */
@media (max-width: 1024px) {
  .contacto-row {
    flex-direction: column;
    gap: var(--space-12);
  }

  .contacto-info {
    width: 100%;
  }

  .contacto-form {
    width: 100%;
  }
}

/* Form responsive styles now in form-fields.css */