/* ============================================================
   WPForms — dos temas visuales, cada uno bajo su propia clase
   contenedora para no pisarse entre sí:

   .mg-wpforms       → estilo v8 (Postúlate ya no usa WPForms, pero
                        Newsletter y cualquier formulario nuevo del
                        sistema v8 sí): esquinas rectas, fondo
                        marino-deep, azul --azul.
   .mg-wpforms-lead   → estilo ORIGINAL de /contacto (no tocar su
                        diseño): esquinas redondeadas, fondo #060c20,
                        botón píldora #7db4e8. Ver más abajo en este
                        mismo archivo.

   La clase va directo en el widget Shortcode de Elementor (Avanzado →
   CSS Classes), no en un <div> manual — ver conversación para el detalle.
   ============================================================ */

.mg-wpforms .wpforms-container {
  max-width: 100%;
  font-family: var(--texto, Inter, sans-serif);
}

/* Grid de 2 columnas, igual que .campos original */
.mg-wpforms .wpforms-container .wpforms-form {
  display: block;
}
.mg-wpforms .wpforms-container .wpforms-field-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
}

/* Cada campo ocupa su columna; los de ancho completo se marcan
   agregando la clase CSS "mg-full" al campo en Avanzado → CSS Classes
   dentro del editor de WPForms (select de cargo, file upload, botón). */
.mg-wpforms .wpforms-container .wpforms-field {
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mg-wpforms .wpforms-container .wpforms-field.mg-full {
  grid-column: 1 / -1;
}

/* Labels: mismo tratamiento mono/uppercase que .campo label */
.mg-wpforms .wpforms-container .wpforms-field-label {
  font-family: var(--dato, 'IBM Plex Mono', monospace) !important;
  font-size: 10px !important;
  letter-spacing: .13em !important;
  text-transform: uppercase;
  color: rgba(255,255,255,.5) !important;
  font-weight: 400 !important;
  margin: 0 !important;
}
.mg-wpforms .wpforms-container .wpforms-field-required {
  color: var(--azul, #7db4e8) !important;
}

/* Inputs, selects, textarea */
.mg-wpforms .wpforms-container input[type=text],
.mg-wpforms .wpforms-container input[type=email],
.mg-wpforms .wpforms-container input[type=tel],
.mg-wpforms .wpforms-container input[type=url],
.mg-wpforms .wpforms-container input[type=number],
.mg-wpforms .wpforms-container select,
.mg-wpforms .wpforms-container textarea {
  width: 100%;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 0 !important;
  color: #fff !important;
  font-family: var(--display, Montserrat, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  padding: 13px 14px !important;
  transition: border-color .25s, background .25s;
  box-shadow: none !important;
}
.mg-wpforms .wpforms-container input::placeholder,
.mg-wpforms .wpforms-container textarea::placeholder {
  color: rgba(255,255,255,.3) !important;
}
.mg-wpforms .wpforms-container input:focus,
.mg-wpforms .wpforms-container select:focus,
.mg-wpforms .wpforms-container textarea:focus {
  outline: none !important;
  border-color: var(--azul, #7db4e8) !important;
  background: rgba(255,255,255,.08) !important;
}
.mg-wpforms .wpforms-container select {
  appearance: none;
  cursor: pointer;
}
.mg-wpforms .wpforms-container select option {
  background: var(--marino-deep, #0A1838);
  color: #fff;
}

/* Adjuntar archivo (CV): mismo look "dropzone" punteado */
.mg-wpforms .wpforms-container .wpforms-field-file-upload .wpforms-uploader,
.mg-wpforms .wpforms-container .wpforms-file-upload-container {
  border: 1px dashed rgba(255,255,255,.26) !important;
  background: repeating-linear-gradient(135deg, transparent, transparent 9px,
    rgba(255,255,255,.025) 9px, rgba(255,255,255,.025) 18px) !important;
  padding: 26px !important;
  text-align: center;
  border-radius: 0 !important;
  transition: border-color .25s;
}
.mg-wpforms .wpforms-container .wpforms-field-file-upload .wpforms-uploader:hover,
.mg-wpforms .wpforms-container .wpforms-file-upload-container:hover {
  border-color: var(--azul, #7db4e8) !important;
}
.mg-wpforms .wpforms-container .wpforms-file-upload-builder-button,
.mg-wpforms .wpforms-container .wpforms-uploader .dz-button {
  font-family: var(--dato, 'IBM Plex Mono', monospace) !important;
  font-size: 11.5px !important;
  color: var(--azul, #7db4e8) !important;
  background: none !important;
  border: none !important;
}

/* Texto de aviso / descripción de campo */
.mg-wpforms .wpforms-container .wpforms-field-description {
  font-size: 11px !important;
  font-weight: 300;
  color: rgba(255,255,255,.42) !important;
  line-height: 1.5;
}

/* Botón enviar: igual que .btn.btn--solid */
.mg-wpforms .wpforms-container .wpforms-submit-container {
  grid-column: 1 / -1;
  margin-top: 6px !important;
}
.mg-wpforms .wpforms-container button[type=submit].wpforms-submit {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  font-family: var(--display, Montserrat, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
  padding: 15px 26px !important;
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  background: var(--azul, #7db4e8) !important;
  color: var(--blanco, #fff) !important;
  cursor: pointer;
  transition: background .25s, color .25s;
}
.mg-wpforms .wpforms-container button[type=submit].wpforms-submit:hover {
  background: var(--blanco, #fff) !important;
  color: var(--marino, #112862) !important;
}

/* Errores de validación: legibles sobre fondo oscuro */
.mg-wpforms .wpforms-container .wpforms-error,
.mg-wpforms .wpforms-container label.wpforms-error {
  color: #ff9d9d !important;
  font-size: 11.5px !important;
  font-family: var(--texto, Inter, sans-serif) !important;
  margin-top: 4px !important;
}
.mg-wpforms .wpforms-container .wpforms-field.wpforms-has-error input,
.mg-wpforms .wpforms-container .wpforms-field.wpforms-has-error select {
  border-color: #ff9d9d !important;
}

/* Mensaje de confirmación tras enviar (reemplaza al .aviso estático) */
.mg-wpforms .wpforms-container .wpforms-confirmation-container,
.wpforms-confirmation-container-full {
  grid-column: 1 / -1;
  font-family: var(--dato, 'IBM Plex Mono', monospace) !important;
  font-size: 11.5px !important;
  letter-spacing: .06em;
  color: rgba(255,255,255,.7) !important;
  border-left: 2px solid var(--azul, #7db4e8);
  padding: 6px 0 6px 12px !important;
  line-height: 1.6;
  background: none !important;
}

/* Ocultar el "powered by" y el honeypot antispam nativo, que ya no
   necesitas visualmente (no afecta la protección antispam en sí) */
.mg-wpforms .wpforms-container .wpforms-field-hp { display: none !important; }

@media (max-width: 720px) {
  .mg-wpforms .wpforms-container .wpforms-form {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   .mg-wpforms-lead — estilo ORIGINAL de /contacto, sin cambios
   respecto al <form class="lead"> que reemplaza. Valores tomados
   literalmente del HTML publicado (no de las variables v8).
   ============================================================ */

.mg-wpforms-lead .wpforms-container {
  max-width: 100%;
}
.mg-wpforms-lead .wpforms-container .wpforms-form {
  display: block;
}
.mg-wpforms-lead .wpforms-container .wpforms-field-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.mg-wpforms-lead .wpforms-field {
  padding: 0 !important;
  margin: 0 !important;
}
.mg-wpforms-lead .wpforms-field.mg-full {
  grid-column: 1 / -1;
}
.mg-wpforms-lead .wpforms-field-label {
  font-size: .78rem !important;
  color: #c3d1e8 !important;
  font-weight: 500 !important;
  display: block;
  margin-bottom: 6px !important;
  font-family: Inter, sans-serif !important;
}
.mg-wpforms-lead .wpforms-field-required {
  color: #7db4e8 !important;
}
.mg-wpforms-lead input[type=text],
.mg-wpforms-lead input[type=email],
.mg-wpforms-lead input[type=tel],
.mg-wpforms-lead select,
.mg-wpforms-lead textarea {
  width: 100% !important;
  background: #060c20 !important;
  border: 1px solid rgba(125,180,232,.18) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  color: #fff !important;
  font-family: Inter, sans-serif !important;
  font-size: .92rem !important;
  box-shadow: none !important;
}
.mg-wpforms-lead select option {
  background: #060c20;
  color: #fff;
}
.mg-wpforms-lead input::placeholder,
.mg-wpforms-lead textarea::placeholder {
  color: #aebfd9 !important;
  opacity: .55 !important;
}
.mg-wpforms-lead .wpforms-field-description {
  font-size: .74rem !important;
  color: #aebfd9 !important;
  font-family: Inter, sans-serif !important;
  margin-top: 6px !important;
}
.mg-wpforms-lead .wpforms-submit-container {
  grid-column: 1 / -1;
}
.mg-wpforms-lead button[type=submit].wpforms-submit {
  background: #7db4e8 !important;
  color: #081435 !important;
  border: none !important;
  cursor: pointer;
  padding: 14px 26px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-family: Inter, sans-serif !important;
  font-size: .92rem !important;
  width: 100%;
  justify-content: center;
}
.mg-wpforms-lead button[type=submit].wpforms-submit:hover {
  background: #6ba3d9 !important;
  color: #081435 !important;
}
.mg-wpforms-lead .wpforms-error,
.mg-wpforms-lead label.wpforms-error {
  color: #ff9d9d !important;
  font-size: .78rem !important;
  font-family: Inter, sans-serif !important;
}
.mg-wpforms-lead .wpforms-confirmation-container {
  grid-column: 1 / -1;
  border: 1px solid rgba(95,208,224,.4) !important;
  background: rgba(95,208,224,.1) !important;
  color: #5fd0e0 !important;
  padding: 14px 16px !important;
  border-radius: 10px !important;
  font-size: .9rem !important;
  font-family: Inter, sans-serif !important;
}
@media (max-width: 720px) {
  .mg-wpforms-lead .wpforms-container .wpforms-field-container {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   .mg-suscribe-bg — fondo de la sección de suscripción (Noticias):
   imagen + degradado oscuro combinados en un solo background,
   igual que .suscribe__media + .suscribe__scrim del diseño original,
   pero sin depender de los controles de fondo nativos de Elementor.
   Aplicar como CSS Class de la SECCIÓN en Elementor (Avanzado → CSS
   Classes), no de un widget.
   ============================================================ */
.mg-suscribe-bg {
  background:
    linear-gradient(90deg, rgba(10,24,56,.97) 0%, rgba(10,24,56,.9) 55%, rgba(10,24,56,.8) 100%),
    url('https://mantosgroup.zteeo.cl/wp-content/uploads/2026/08/manto-pila.jpg') center center / cover no-repeat;
}

/* ============================================================
   #wpforms-685 — ajustes puntuales SOLO del formulario de
   Newsletter (/noticias): campo + botón en la misma fila, botón
   con esquina redondeada tipo píldora, igual al diseño original
   de .suscribe__fila. Se identifica por ID de formulario, no por
   clase, para no afectar otros formularios que usen .mg-wpforms.
   ============================================================ */
#wpforms-685 .wpforms-form {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0;
}
#wpforms-685 .wpforms-field-container {
  display: block !important;
  flex: 1 1 300px;
  min-width: 0;
}
#wpforms-685 .wpforms-field {
  display: block !important;
}
#wpforms-685 .wpforms-submit-container {
  flex: none;
  margin-left: 12px;
  margin-top: 20px !important;
}
#wpforms-685 .wpforms-field-description {
  font-size: 13.5px !important;
  color: rgba(255,255,255,.62) !important;
}
#wpforms-685 .wpforms-field-description a {
  color: var(--azul, #7db4e8) !important;
  text-decoration: none;
}
#wpforms-685 .wpforms-field-description a:hover {
  text-decoration: underline;
}
#wpforms-685 button[type=submit].wpforms-submit {
  border-radius: 999px !important;
  white-space: nowrap;
}

/* Ancho: columna angosta alineada al margen izquierdo del sitio,
   NO centrada — así se ve el diseño original (texto/form ocupan
   solo la mitad izquierda, dejando ver el fondo a la derecha). */
.mg-wpforms {
  max-width: 620px;
  padding-left: clamp(20px, 4vw, 56px);
  box-sizing: border-box;
  margin: 0;
}
@media (max-width: 620px) {
  #wpforms-685 .wpforms-form {
    flex-direction: column;
  }
  #wpforms-685 .wpforms-submit-container {
    margin-left: 0;
    margin-top: 10px !important;
    width: 100%;
  }
  #wpforms-685 button[type=submit].wpforms-submit {
    width: 100%;
    justify-content: center;
  }
}