/* Start custom CSS for oew-gravity-forms, class: .elementor-element-eb8cc13 *//* ============================================================
   ESTILO FORMULARIO "Contacta Júlia" (Gravity Forms ID 5)
   Calca EXACTAMENTE el diseño de la maqueta (form.html → .em-form)
   Pegar en: Apariencia → Personalizar → CSS adicional
   (REEMPLAZA por completo el bloque anterior)

   ⚠️ Si tu formulario NO es el ID 5, reemplazá en TODO el archivo
      "_5" por tu número (ej: _7). El wrapper de GF se llama
      #gform_wrapper_TUID.
   ============================================================ */

/* Paleta de la maqueta */
/* magenta #c825b0 · violeta #9b6aff · cyan #35cff0 · texto #1a1a1a */

/* ---- Tarjeta contenedora (equivale a .em-form) ---- */
#gform_wrapper_5 {
  background: #fafafa;
  border-radius: 28px;
  padding: 32px;
  box-shadow: none;
}
@media (min-width: 1100px) {
  #gform_wrapper_5 { padding: 40px; }
}

/* Ocultar título/descripción del form (los pone la maqueta a la izquierda) */
#gform_wrapper_5 .gform_title,
#gform_wrapper_5 .gform_description { display: none !important; }

/* ---- Rejilla de campos: apilados por defecto ---- */
#gform_wrapper_5 .gform_fields {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
}
#gform_wrapper_5 .gform_fields > .gfield {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  grid-column: auto !important;
  padding: 0 !important;
}

/* ---- 2 columnas SOLO en pantallas ≥768px (Nombre|Empresa, Teléfono|Email) ---- */
@media (min-width: 768px) {
  #gform_wrapper_5 .gform_fields > .gfield.gf_left_half,
  #gform_wrapper_5 .gform_fields > .gfield.gf_right_half {
    flex: 0 0 calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
    width: calc(50% - 10px) !important;
  }
}

/* ---- Etiquetas (equivale a .em-field label) ---- */
#gform_wrapper_5 .gfield_label {
  font-family: 'Poppins', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(0, 0, 0, .35) !important;
  letter-spacing: .55px !important;
  text-transform: uppercase !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}
/* Quitar el hueco extra que Gravity Forms mete entre label e input */
#gform_wrapper_5 .ginput_container {
  margin-top: 0 !important;
}
/* Ocultar el "(Obligatorio)" / asterisco */
#gform_wrapper_5 .gfield_required { display: none !important; }

/* ---- Inputs, select y textarea (equivale a .em-field input) ---- */
#gform_wrapper_5 input[type="text"],
#gform_wrapper_5 input[type="email"],
#gform_wrapper_5 input[type="tel"],
#gform_wrapper_5 input[type="number"],
#gform_wrapper_5 select,
#gform_wrapper_5 textarea {
  box-sizing: border-box !important;
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, .06) !important;
  border-radius: 16px !important;
  padding: 14px 20px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  color: #1a1a1a !important;
  width: 100% !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}

#gform_wrapper_5 input::placeholder,
#gform_wrapper_5 textarea::placeholder {
  color: rgba(26, 26, 26, .5) !important;
}

/* Foco: borde violeta + halo (equivale a .em-field :focus) */
#gform_wrapper_5 input:focus,
#gform_wrapper_5 select:focus,
#gform_wrapper_5 textarea:focus {
  border-color: #9b6aff !important;
  box-shadow: 0 0 0 3px rgba(155, 106, 255, .12) !important;
}

#gform_wrapper_5 textarea {
  min-height: 114px !important;
  resize: vertical !important;
}

/* Flecha gris del desplegable (igual que la maqueta) */
#gform_wrapper_5 select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 20px center !important;
  padding-right: 48px !important;
  cursor: pointer !important;
  /* Evita que el texto del desplegable se vea cortado */
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.4 !important;
  text-overflow: ellipsis !important;
}

/* ---- Checkbox de consentimiento (equivale a .em-checkbox-row) ---- */
#gform_wrapper_5 .gfield--type-consent > .gfield_label { display: none !important; }
#gform_wrapper_5 .gfield--type-consent label,
#gform_wrapper_5 .gfield_consent_label {
  text-transform: none !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: rgba(26, 26, 26, .6) !important;
  letter-spacing: normal !important;
  margin-left: 8px !important;
}
#gform_wrapper_5 input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  accent-color: #c825b0 !important;
  cursor: pointer !important;
}

/* ---- Botón enviar (equivale a .em-form-submit) ---- */
#gform_wrapper_5 .gform_footer {
  margin: 0 !important;
  padding: 0 !important;
}
#gform_wrapper_5 input[type="submit"],
#gform_wrapper_5 .gform_button {
  background: linear-gradient(135deg, #c825b0 0%, #9b6aff 50%, #35cff0 100%) !important;
  color: #fff !important;
  border: none !important;
  width: 100% !important;
  padding: 18px 32px !important;
  border-radius: 16px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 25px rgba(200, 37, 176, .3) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
#gform_wrapper_5 input[type="submit"]:hover,
#gform_wrapper_5 .gform_button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 35px rgba(200, 37, 176, .5) !important;
}/* End custom CSS */