/* ============================================================
   OPEN MORNING — Gravity Forms #4 — Estilos personalizados
   Pegar en: Apariencia → Personalizar → CSS adicional
   Acotado a #gform_wrapper_4. Sin box-shadow. Color: azul.
   Color de marca: cambia #1d6fb8 y #14507f si hace falta.
   ============================================================ */

/* --- Contenedor tipo tarjeta (más aire, sin sombra) --- */
#gform_wrapper_4 {
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 48px 44px !important;
  background: #ffffff !important;
  border: 1px solid #e3e9 ef !important;
  border-radius: 18px !important;
  font-family: "Helvetica Neue", Arial, sans-serif !important;
}

/* --- Rejilla de campos: más separación --- */
#gform_wrapper_4 .gform_fields {
  grid-row-gap: 32px !important;
  grid-column-gap: 22px !important;
}

/* --- Etiquetas principales / leyendas de sección --- */
#gform_wrapper_4 .gfield_label,
#gform_wrapper_4 legend.gfield_label {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  color: #1a2b3a !important;
  margin-bottom: 12px !important;
  padding-bottom: 9px !important;
  border-bottom: 2px solid #eef2f6 !important;
  display: block !important;
  width: 100% !important;
}

/* --- Asterisco de obligatorio, discreto --- */
#gform_wrapper_4 .gfield_required {
  color: #1d6fb8 !important;       /* color de marca */
  font-weight: 600 !important;
  margin-left: 4px !important;
}
#gform_wrapper_4 .gfield_required_text {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  opacity: 0.75 !important;
}

/* --- Sub-etiquetas (First/Last, Month/Day/Year, Enter Email...) --- */
#gform_wrapper_4 .gform-field-label--type-sub {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  color: #7a8794 !important;
  margin-bottom: 7px !important;
}

/* --- Inputs y selects (más altura/padding) --- */
#gform_wrapper_4 input[type="text"],
#gform_wrapper_4 input[type="email"],
#gform_wrapper_4 input[type="number"],
#gform_wrapper_4 select {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 15px 16px !important;
  font-size: 15px !important;
  color: #1f2d3a !important;
  background: #f7f9fb !important;
  border: 1.5px solid #d6dde4 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  transition: border-color 0.18s ease, background 0.18s ease !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* --- Placeholder --- */
#gform_wrapper_4 input::placeholder {
  color: #aab4bf !important;
  opacity: 1 !important;
}

/* --- Hover --- */
#gform_wrapper_4 input:hover,
#gform_wrapper_4 select:hover {
  border-color: #b6c1cd !important;
  background: #ffffff !important;
}

/* --- Focus con outline azul (sin box-shadow) --- */
#gform_wrapper_4 input:focus,
#gform_wrapper_4 select:focus {
  border-color: #1d6fb8 !important;          /* color de marca */
  background: #ffffff !important;
  box-shadow: none !important;
  outline: 2px solid #1d6fb8 !important;
  outline-offset: 2px !important;
}

/* --- Fix: centrar verticalmente el texto de los desplegables --- */
#gform_wrapper_4 select {
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.3 !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  vertical-align: middle !important;
}

/* --- Campos de fecha: que respiren --- */
#gform_wrapper_4 .ginput_container_date .gform-grid-col {
  padding-right: 10px !important;
}

/* --- Botón de envío (azul, sin sombra) --- */
#gform_wrapper_4 .gform_footer {
  margin-top: 38px !important;
  padding: 0 !important;
}
#gform_wrapper_4 input[type="submit"],
#gform_wrapper_4 .gform_button {
  display: inline-block !important;
  width: 100% !important;
  padding: 17px 28px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #1d6fb8 0%, #14507f 100%) !important;  /* marca */
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: transform 0.15s ease, filter 0.2s ease !important;
}
#gform_wrapper_4 input[type="submit"]:hover,
#gform_wrapper_4 .gform_button:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.07) !important;
  box-shadow: none !important;
}
#gform_wrapper_4 input[type="submit"]:active,
#gform_wrapper_4 .gform_button:active {
  transform: translateY(0) !important;
}

/* --- Mensajes de validación --- */
#gform_wrapper_4 .gfield_description.validation_message,
#gform_wrapper_4 .validation_message {
  font-size: 12.5px !important;
  color: #c0392b !important;
  margin-top: 6px !important;
}
#gform_wrapper_4 .gfield_error input,
#gform_wrapper_4 .gfield_error select {
  border-color: #c0392b !important;
  background: #fff6f5 !important;
}

/* --- Oculta el icono que inyecta una extensión de navegador (SandVPN) --- */
#gform_wrapper_4 .sandvpn-logo {
  display: none !important;
}

/* --- Responsive: apila las dos columnas en móvil --- */
@media (max-width: 600px) {
  #gform_wrapper_4 {
    padding: 30px 22px !important;
    border-radius: 14px !important;
  }
  #gform_wrapper_4 .gform_fields {
    grid-row-gap: 24px !important;
  }
  #gform_wrapper_4 .gform-grid-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    margin-bottom: 12px !important;
  }
}