/** Shopify CDN: Minification failed

Line 144:0 Expected "}" to go with "{"

**/
.contact img {
  max-width: 100%;
}

.contact .form__message {
  align-items: flex-start;
}

.contact .icon-success {
  margin-top: 0.2rem;
}

.contact .field {
  margin-bottom: 1.5rem;
}

@media screen and (min-width: 750px) {
  .contact .field {
    margin-bottom: 2rem;
  }
}

.contact__button {
  margin-top: 3rem;
}

@media screen and (min-width: 750px) {
  .contact__button {
    margin-top: 4rem;
  }
}

@media screen and (min-width: 750px) {
  .contact__fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 2rem;
  }
}



/* ================================
   LUPAW · REFINO FORMULARIO CONTACTO
   ================================ */

.contact {
  max-width: 720px;
  margin: 0 auto;
}

.field__input,
.text-area {
  border-radius: 14px;
  
  padding: 14px 16px;
  font-size: 15px;
  color: #0a1753;
  background-color: #ffffff;
}

.field__input:focus,
.text-area:focus {
  outline: none;
  border-color: #0a1753;
  box-shadow: 0 0 0 2px rgba(10, 23, 83, 0.12);
}

.field__label {
  color: #0a1753;
  font-size: 13px;
}

.contact__button {
  margin-top: 24px;
  text-align: center;
}

/* ================================
   LUPAW · BOTÓN FORMULARIO (DNA CTA)
   ================================ */

.contact__button {
  margin-top: 28px;
  text-align: center;
}

.contact__button .button {
  position: relative;
  display: inline-block;

  background: #22c55e;
  color: #ffffff;

  font-family: system-ui, -apple-system, "Rubik", "Nunito Sans", Arial, sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .3px;

  padding: 10px 32px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;

  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-clip: padding-box;

  /* Sombra Lupaw */
  box-shadow:
    0 4px 0 #16a34a,
    0 8px 18px rgba(22,163,74,.30);

  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

/* 🔥 Eliminamos cualquier “borde fantasma” del tema */
.contact__button .button::before,
.contact__button .button::after {
  content: none !important;
  display: none !important;
}

.contact__button .button:hover {
  background: #1fb455;
}

.contact__button .button:active {
  transform: translateY(4px);
  box-shadow:
    0 2px 0 #16a34a,
    0 5px 14px rgba(22,163,74,.28);
}

.contact__button .button:focus,
.contact__button .button:focus-visible {
  outline: no