/**
 * CSS de la página Contact (H7) — port del <style> inline de
 * ../barter---version-final/contact.html (líneas 41-230), mismo criterio
 * que case-styles.css (H5): sistema autocontenido de una sola página, en
 * su propio archivo, registrado en inc/enqueue.php pero encolado solo con
 * is_page('contact').
 *
 * Se omite `.modern-contact-header`/`.info-circle`: CSS muerto en la
 * fuente, ningún elemento del markup real (page-contact.php) las usa.
 *
 * Se suma `.modern-contact-form .form-feedback`: la fuente nunca tuvo un
 * estado de error (no había servidor detrás) — H7 sí, y necesita su
 * propio tratamiento visual dentro de esta tarjeta blanca (los tonos
 * genéricos de `.form-feedback` en styles.css asumen fondo claro
 * igual, pero el margen/tipografía deben encajar en esta columna).
 */

.modern-contact-card {
  display: flex;
  background-color: var(--navy);
  border-radius: 48px;
  padding: 48px;
  gap: 48px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
  margin-bottom: 120px;
}

@media (max-width: 900px) {
  .modern-contact-card {
    flex-direction: column;
    padding: 24px;
    border-radius: 32px;
    gap: 32px;
  }
}

.modern-contact-info {
  color: var(--white);
  padding: 0;
  width: 40%;
  position: relative;
  display: flex;
  flex-direction: column;
}

@media (max-width: 900px) {
  .modern-contact-info {
    width: 100%;
    padding: 0;
  }
}

.modern-contact-info h2 {
  font-size: 28px;
  margin-bottom: 16px;
  color: var(--white);
  position: relative;
  z-index: 2;
}

.modern-contact-info p.info-desc {
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.9;
  margin-bottom: 48px;
  position: relative;
  z-index: 2;
}

.info-block {
  margin-bottom: 32px;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.info-block svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.info-block div h4 {
  font-size: 14px;
  margin: 0 0 4px 0;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.info-block div p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--white);
}

.modern-contact-form {
  padding: 60px 48px;
  width: 60%;
  background: var(--white);
  border-radius: 32px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

@media (max-width: 900px) {
  .modern-contact-form {
    width: 100%;
    padding: 32px 24px;
  }
}

.modern-contact-form label {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
}

.modern-stroke-input,
.modern-contact-form textarea,
.modern-contact-form select {
  width: 100%;
  border: none !important;
  border-bottom: 1px solid #e0e0e0 !important;
  border-radius: 0 !important;
  padding: 8px 0 16px 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 16px !important;
  color: var(--navy) !important;
  font-weight: 500;
  margin-bottom: 24px !important;
  appearance: none;
}

.modern-contact-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2319195F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
}

.modern-stroke-input:focus,
.modern-contact-form textarea:focus,
.modern-contact-form select:focus {
  border-bottom-color: var(--turquoise) !important;
  outline: none;
}

.modern-contact-form .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 0px;
}

@media (max-width: 600px) {
  .modern-contact-form .form-grid {
    grid-template-columns: 1fr;
    gap: 0px;
  }
}

.modern-contact-form .btn-primary {
  border-radius: 999px !important;
  font-size: 14px;
  padding: 16px 32px;
  text-transform: uppercase;
  font-weight: 600;
  width: 100%;
  margin-top: 16px;
}

.modern-contact-form .form-feedback {
  margin-top: 0;
  margin-bottom: 24px;
}