/*
  Rediseño visual "Avivamiento — Fuego y Gloria" aplicado al formulario de contacto (contactus.php)
  Este archivo se incluye desde el propio contactus.php (no desde cada página) porque es un
  include compartido por múltiples páginas del sitio: así el estilo queda consistente
  sin depender de que cada página lo enganche por separado.
  No modifica estructura HTML ni el JS de validación (assets_nw/js/contactus.js).
*/

:root {
  --av-fire-1: #ff6a3d;
  --av-fire-2: #ffb648;
  --av-royal-2: #6d3bb0;
  --av-glow: rgba(255, 140, 66, 0.45);
  --av-radius: 18px;
}

/* Línea decorativa del título de sección con el degradado de marca */
#contact .section-title h2::after {
  background: linear-gradient(90deg, var(--av-fire-1), var(--av-fire-2));
}

/* Tarjetas de dirección / correo / teléfono */
#contact .info-box {
  border-radius: var(--av-radius);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#contact .info-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(255, 106, 61, 0.25);
}

#contact .info-box i {
  background: linear-gradient(135deg, var(--av-royal-2), var(--av-fire-1));
  color: #fff;
}

/* Formulario: esquinas redondas y foco con brillo de marca */
#contact .proper-email-form {
  border-radius: var(--av-radius);
}

#contact .proper-email-form input,
#contact .proper-email-form textarea {
  border-radius: 10px;
}

#contact .proper-email-form input:focus,
#contact .proper-email-form textarea:focus {
  border-color: var(--av-fire-1);
  box-shadow: 0 0 0 3px var(--av-glow);
}

/* Botón de envío: pastilla con degradado fuego-ámbar */
#contact #SubmitButton {
  background: linear-gradient(90deg, var(--av-fire-1), var(--av-fire-2));
  color: #1a1005;
  font-weight: 600;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#contact #SubmitButton:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px var(--av-glow);
}

#contact #SubmitButton.disabled {
  background: grey;
  color: #fff;
  transform: none;
  box-shadow: none;
}

/* Mensajes de validación/envío: los inyecta contactus.js como <table> con estilo inline, solo se redondean las esquinas */
#contact .error-message table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--av-radius);
  overflow: hidden;
}