.elementor-553 .elementor-element.elementor-element-ac2b35d{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-553 .elementor-element.elementor-element-fc13d98{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-553 .elementor-element.elementor-element-8017df7{--display:flex;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-form .elementor-field-group > label, .elementor-widget-form .elementor-field-subgroup label{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group > label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-type-html{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-group .elementor-field{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group .elementor-field, .elementor-widget-form .elementor-field-subgroup label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form .e-form__buttons__wrapper__button-next{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-button[type="submit"]{background-color:var( --e-global-color-accent );}.elementor-widget-form .e-form__buttons__wrapper__button-previous{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-message{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .e-form__indicators__indicator, .elementor-widget-form .e-form__indicators__indicator__label{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form{--e-form-steps-indicator-inactive-primary-color:var( --e-global-color-text );--e-form-steps-indicator-active-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-completed-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-background-color:var( --e-global-color-text );--e-form-steps-indicator-progress-meter-color:var( --e-global-color-text );}.elementor-widget-form .e-form__indicators__indicator__progress__meter{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-553 .elementor-element.elementor-element-6c0b071 .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:10px;}.elementor-553 .elementor-element.elementor-element-6c0b071 .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-10px;}.elementor-553 .elementor-element.elementor-element-6c0b071 .elementor-field-group.recaptcha_v3-bottomleft, .elementor-553 .elementor-element.elementor-element-6c0b071 .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-553 .elementor-element.elementor-element-6c0b071 .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-553 .elementor-element.elementor-element-6c0b071 .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-553 .elementor-element.elementor-element-6c0b071 .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-553 .elementor-element.elementor-element-6c0b071 .elementor-field-type-html{padding-bottom:0px;}.elementor-553 .elementor-element.elementor-element-6c0b071 .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#ffffff;}.elementor-553 .elementor-element.elementor-element-6c0b071 .elementor-field-group .elementor-select-wrapper select{background-color:#ffffff;}.elementor-553 .elementor-element.elementor-element-6c0b071 .e-form__buttons__wrapper__button-next{color:#ffffff;}.elementor-553 .elementor-element.elementor-element-6c0b071 .elementor-button[type="submit"]{color:#ffffff;}.elementor-553 .elementor-element.elementor-element-6c0b071 .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-553 .elementor-element.elementor-element-6c0b071 .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-553 .elementor-element.elementor-element-6c0b071 .e-form__buttons__wrapper__button-next:hover{color:#ffffff;}.elementor-553 .elementor-element.elementor-element-6c0b071 .elementor-button[type="submit"]:hover{color:#ffffff;}.elementor-553 .elementor-element.elementor-element-6c0b071 .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-553 .elementor-element.elementor-element-6c0b071 .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-553 .elementor-element.elementor-element-6c0b071{--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-553 .elementor-element.elementor-element-fc13d98{--width:45%;}.elementor-553 .elementor-element.elementor-element-8017df7{--width:55%;}}@media(max-width:1024px){.elementor-widget-form .elementor-field-group > label{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-form .elementor-field-type-html{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-form .elementor-field-group .elementor-field, .elementor-widget-form .elementor-field-subgroup label{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-form .elementor-message{font-size:var( --e-global-typography-text-font-size );}}@media(max-width:767px){.elementor-widget-form .elementor-field-group > label{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-form .elementor-field-type-html{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-form .elementor-field-group .elementor-field, .elementor-widget-form .elementor-field-subgroup label{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-form .elementor-message{font-size:var( --e-global-typography-text-font-size );}}/* Start custom CSS for form, class: .elementor-element-6c0b071 */<!-- ============ INTANGY · BOOK A DEMO · 02 FORM (EN) ============
     El formulario se construye con el widget FORM de ELEMENTOR PRO (no en HTML),
     para que gestione envíos, notificaciones, honeypot y redirección.

     1) Widget Form en la columna derecha → pestaña Avanzado → Clases CSS: itg-form
     2) Este bloque (estilos + JS) va en un widget HTML justo debajo del Form,
        o en WP Code como snippet de esa página.

     ⚠ IMPORTANTE — los ID de campo y los VALORES de las opciones NO se traducen.
       Se mantienen idénticos a la versión ES para que el JS, los deep links ?plan=,
       el evento de GA4 y las plantillas de correo funcionen igual en los dos idiomas.
       Solo cambian las ETIQUETAS visibles.

     ── CAMPOS (ID exacto en cada campo, pestaña Avanzado del campo) ──────────────
       Full name              text      required        id: nombre       col 100%
       Email                  email     required        id: email        col 50%
       Phone / WhatsApp       tel       required        id: telefono     col 50%
       City                   text      required        id: ciudad       col 50%
       Child's age            select    required        id: edad         col 50%
           opciones: 4–6 years | 7–9 years | 10–12 years | 13–15 years | 16–18 years
       Plan of interest       select    optional        id: plan         col 100%
           opciones (valor|etiqueta):
             meta-diagnostico|Meta Diagnóstico 360
             digital|Digital Plan
             discovery|Discovery Plan (2027 waitlist)
             marvel|Marvel Plan (2027 waitlist)
             no-se|Not sure yet
       Message                textarea  optional        id: mensaje      col 100%   filas: 4
       Privacy notice         acceptance required       id: aviso
           La casilla usa el control nativo del navegador con accent-color azul:
           así siempre marca y siempre se ve, sin depender de CSS personalizado.
           texto: I have read and accept the <a href="/en/privacy-notice/">privacy notice</a>.
       Honeypot               activar en Form → Opciones adicionales

     ── BOTÓN ─────────────────────────────────────────────────────────────────────
       Texto: "Book my demo" · Alineación: justificado · Icono: ninguno
       IMPORTANTE: en el widget Form → pestaña Estilo → Botón, deja el color de fondo
       y el de texto VACÍOS (sin definir). Si Elementor fija un color ahí, lo aplica
       inline y tapa estos estilos.

     ── ACCIONES DESPUÉS DE ENVIAR ────────────────────────────────────────────────
       Email         → a: contacto@intangy.com
                       asunto: New demo request (EN) · [field id="plan"]
                       reply-to: [field id="email"]
                       cuerpo: todos los campos
       Email 2       → autorespuesta al prospecto, en inglés (opcional)
       Redirección   → https://intangy.com/en/thank-you/
       Mensajes      → Éxito: "Done. We'll be in touch within 24 hours."
                       Error:  "Something went wrong. Please try again."
                       Campo requerido: "This field is required."
       (Los mensajes se editan en Form → Additional Options → Custom Messages.)
================================================================= -->

<style>
/* ===== INTANGY · FORM (Elementor Pro Form con clase .itg-form) ===== */
.itg-form{
  --itg-black:#000000;
  --itg-blue:#0505F4;
  --itg-blue-500:#249BDF;
  --itg-blue-200:#38B6FF;
  --itg-navy:#000000;
  --itg-teal:#0505F4;
  --itg-teal-600:#249BDF;
  --itg-teal-200:#38B6FF;
  --itg-text:#4A5A6A;
  --itg-line:rgba(0,0,0,.12);
  --itg-font-title:'Anton','Arial Narrow',sans-serif;
  --itg-font-body:'Montserrat',system-ui,sans-serif;
  --itg-ease:cubic-bezier(.22,.9,.28,1);

  font-family:var(--itg-font-body);
  margin:96px 48px 72px 0;
  padding:34px 34px 30px;
  background:#fff;
  border:1px solid var(--itg-line);
  border-radius:20px;
  box-shadow:0 34px 70px -40px rgba(0,0,0,.35);
  position:relative;
  opacity:0; transform:translateY(16px);
  animation:itgFmUp .8s var(--itg-ease) .2s forwards;
}
@keyframes itgFmUp{to{opacity:1; transform:translateY(0)}}
/* Top accent line */
.itg-form::before{
  content:''; position:absolute; top:0; left:32px; right:32px; height:3px;
  background:linear-gradient(90deg,var(--itg-teal),var(--itg-teal-200));
  border-radius:0 0 3px 3px;
}

/* Labels */
.itg-form .elementor-field-group > label,
.itg-form .elementor-field-label{
  display:block;
  margin-bottom:6px;
  font-size:9px !important; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--itg-text) !important;
}
.itg-form .elementor-field-group{margin-bottom:16px; padding:0 6px}

/* Inputs, selects, textarea */
.itg-form .elementor-field-textual,
.itg-form select.elementor-field,
.itg-form textarea.elementor-field{
  width:100%;
  min-height:46px;
  padding:12px 14px !important;
  border:1px solid var(--itg-line) !important;
  border-radius:8px !important;
  background:#F2F5FA !important;
  font-family:var(--itg-font-body) !important;
  font-size:16px !important;                     /* evita el zoom de iOS al enfocar */
  color:var(--itg-navy) !important;
  box-shadow:none !important;
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
@media (min-width:1025px){
  .itg-form .elementor-field-textual,
  .itg-form select.elementor-field,
  .itg-form textarea.elementor-field{font-size:12px !important}
}
.itg-form .elementor-field-textual::placeholder{color:rgba(74,90,106,.6)}
.itg-form .elementor-field-textual:focus,
.itg-form select.elementor-field:focus,
.itg-form textarea.elementor-field:focus{
  outline:none;
  border-color:var(--itg-teal) !important;
  background:#fff !important;
  box-shadow:0 0 0 3px rgba(5,5,244,.12) !important;
}
.itg-form textarea.elementor-field{min-height:110px; resize:vertical}

/* Select with custom caret */
.itg-form .elementor-select-wrapper{position:relative}
.itg-form select.elementor-field{
  -webkit-appearance:none; appearance:none;
  padding-right:40px !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 14px center !important;
  background-size:14px !important;
}
.itg-form .elementor-select-wrapper .select-caret-down-wrapper{display:none}

/* Acceptance (privacy notice) */
/* Elementor coloca el input y el <label> como HERMANOS dentro de .elementor-field-option,
   por eso el contenedor es el que hace de fila, no el label. */
.itg-form .elementor-field-type-acceptance > .elementor-field-label{display:none !important}
.itg-form .elementor-field-type-acceptance .elementor-field-subgroup{margin-top:0}
.itg-form .elementor-field-type-acceptance .elementor-field-option{
  display:flex !important;
  align-items:flex-start;
  gap:10px;
}
.itg-form .elementor-field-type-acceptance .elementor-field-option label{
  margin:0 !important;
  font-size:10.5px !important; line-height:1.55; letter-spacing:0; text-transform:none;
  font-weight:500 !important;
  color:#111 !important;
  cursor:pointer;
}
.itg-form .elementor-field-type-acceptance a{
  color:#0505F4; font-weight:700; text-decoration:none;
  border-bottom:1px solid rgba(5,5,244,.45);
}
.itg-form .elementor-field-type-acceptance a:hover{border-color:#0505F4}

/* Checkbox: se mantiene el control NATIVO (siempre funciona) y se colorea con accent-color */
.itg-form .elementor-field-type-acceptance input[type="checkbox"]{
  -webkit-appearance:checkbox !important;
  appearance:auto !important;
  accent-color:#0505F4;
  width:18px !important; height:18px !important;
  min-width:18px; flex:none;
  margin:1px 0 0 !important; padding:0;
  opacity:1 !important;
  position:static !important;
  visibility:visible !important;
  cursor:pointer;
}
.itg-form .elementor-field-type-acceptance input[type="checkbox"]:focus-visible{
  outline:2px solid #38B6FF; outline-offset:2px;
}

/* Button: se atacan todas las capas que usa Elementor */
.itg-form .elementor-field-type-submit{margin-top:8px; padding:0 6px}
.itg-form .elementor-field-type-submit .elementor-button,
.itg-form button[type="submit"],
.itg-form .elementor-button[type="submit"]{
  display:flex !important;
  align-items:center; justify-content:center;
  width:100%;
  min-height:52px;
  padding:16px 24px !important;
  border:0 !important;
  border-radius:6px !important;
  background-color:#0505F4 !important;
  background-image:linear-gradient(135deg,#0505F4 0%,#249BDF 100%) !important;
  color:#fff !important;
  cursor:pointer;
  font-family:var(--itg-font-title) !important;
  font-size:13px !important; font-weight:400 !important;
  letter-spacing:.12em !important; text-transform:uppercase !important;
  line-height:1.2 !important;
  box-shadow:0 16px 32px -16px rgba(5,5,244,.9);
  transition:background-image .25s ease, transform .25s ease, box-shadow .25s ease;
}
/* El texto va dentro de spans: forzar color en todos */
.itg-form .elementor-button *,
.itg-form .elementor-button .elementor-button-text,
.itg-form .elementor-button .elementor-button-content-wrapper,
.itg-form button[type="submit"] span{color:#fff !important; fill:#fff !important}
.itg-form .elementor-button:hover,
.itg-form button[type="submit"]:hover{
  background-image:linear-gradient(135deg,#249BDF 0%,#38B6FF 100%) !important;
  transform:translateY(-2px);
  box-shadow:0 22px 40px -16px rgba(36,155,223,.9);
}
.itg-form .elementor-button:focus-visible{outline:2px solid #38B6FF; outline-offset:3px}
/* Estado "enviando" de Elementor */
.itg-form .elementor-button .elementor-button-icon{color:#fff !important}

/* Note under the button (la añade el JS) */
.itg-form__note{
  display:flex; justify-content:center; gap:18px; flex-wrap:wrap;
  margin:16px 6px 0;
  font-size:9px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--itg-text);
}
.itg-form__note span{display:inline-flex; align-items:center; gap:7px}
.itg-form__note span::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--itg-teal-200)}

/* Elementor messages */
.itg-form .elementor-message{
  margin-top:14px; padding:12px 14px; border-radius:8px;
  font-size:11px; line-height:1.5;
}
.itg-form .elementor-message-success{background:rgba(5,5,244,.1); color:var(--itg-teal-600)}
.itg-form .elementor-message-danger{background:rgba(220,60,60,.08); color:#B23A3A}
.itg-form .elementor-field-group.elementor-error .elementor-field{border-color:#D46A6A !important}
.itg-form .elementor-error .elementor-form-help-inline{font-size:10px; color:#B23A3A; margin-top:4px}

/* Preselected plan chip (la añade el JS) */
.itg-form__plan{
  display:inline-flex; align-items:center; gap:8px;
  margin:0 6px 16px;
  padding:6px 12px; border-radius:999px;
  background:var(--itg-navy); color:#fff;
  font-family:var(--itg-font-title);
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
}
.itg-form__plan i{width:6px; height:6px; border-radius:50%; background:var(--itg-teal-200)}

/* ---------- Tablet ---------- */
@media (max-width:1100px){
  .itg-form{margin:80px 32px 56px 0; padding:28px 26px 24px}
}

/* ---------- Mobile ---------- */
@media (max-width:1024px){
  .itg-form{margin:0 20px 64px; padding:26px 20px 22px}
  .itg-form::before{left:20px; right:20px}
}

@media (prefers-reduced-motion:reduce){
  .itg-form{opacity:1 !important; transform:none !important; animation:none !important}
}
</style>


<script>
(function(){
  var form = document.querySelector('.itg-form');
  if(!form || form.dataset.itgReady) return;
  form.dataset.itgReady = '1';

  /* Los VALORES son los mismos que en la versión ES; solo cambian las etiquetas */
  var names = {
    'meta-diagnostico':'Meta Diagnóstico 360',
    'digital':'Digital Plan',
    'discovery':'Discovery Plan · 2027 waitlist',
    'marvel':'Marvel Plan · 2027 waitlist'
  };

  /* 1. Preselects the plan coming from the URL (?plan=digital) */
  var params = new URLSearchParams(location.search);
  var plan = params.get('plan');
  var select = form.querySelector('#form-field-plan');
  if(plan && select){
    var opt = Array.prototype.find.call(select.options, function(o){ return o.value === plan; });
    if(opt){
      select.value = plan;
      /* Chip above the form */
      var chip = document.createElement('p');
      chip.className = 'itg-form__plan';
      chip.innerHTML = '<i></i>Interested in: ' + (names[plan] || plan);
      var first = form.querySelector('.elementor-form-fields-wrapper');
      if(first) first.parentNode.insertBefore(chip, first);
    }
  }

  /* 2. Trust note under the button */
  var submit = form.querySelector('.elementor-field-type-submit');
  if(submit){
    var note = document.createElement('p');
    note.className = 'itg-form__note';
    note.innerHTML = '<span>Response within 24 hours</span><span>Your data is protected</span>';
    submit.parentNode.insertBefore(note, submit.nextSibling);
  }

  /* 3. GA4 event on successful submit (Elementor fires submit_success) */
  if(window.jQuery){
    jQuery(document).on('submit_success', function(){
      if(typeof gtag === 'function'){
        gtag('event', 'demo_request', {plan: plan || (select ? select.value : 'sin-plan'), lang: 'en'});
      }
    });
  }
})();
</script>
<!-- ============ END DEMO · FORM ============ -->/* End custom CSS */