.elementor-44 .elementor-element.elementor-element-ce111e2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-44 .elementor-element.elementor-element-f2e6d12{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-94fb9dc */<!-- === IAN Academy · Contact (BIGGER + DARKER + AI Chat Button) === -->
<section class="contact-ian contact-ian--xl" aria-labelledby="contactTitle">
  <div class="c-wrap">

    <!-- LEFT -->
    <div class="c-info">
      <h2 id="contactTitle" class="c-title">Ponte en contacto</h2>
      <p class="c-lead">
        Escríbenos, llámanos o completa el formulario. Te ayudaremos a encontrar la mejor ruta de aprendizaje en IA aplicada.
      </p>

      <ul class="c-list">
        <li>
          <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path d="M4 6l8 6 8-6" stroke="currentColor" stroke-width="1.8" fill="none"/><rect x="4" y="4" width="16" height="16" rx="3" fill="none" stroke="currentColor" stroke-width="1.8"/></svg>
          <a href="mailto:Support@agents-ian.com">Support@agents-ian.com</a>
        </li>
        <li>
          <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path d="M4 5c0-1.1.9-2 2-2h2l2 5-2 1a13.6 13.6 0 0 0 6 6l1-2 5 2v2a2 2 0 0 1-2 2C9.7 19 4 13.3 4 5Z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
          <a href="tel:+34612270018">+34 612 27 00 18</a>
        </li>
        <li>
          <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path d="M12 22s7-6.4 7-12a7 7 0 1 0-14 0c0 5.6 7 12 7 12Z" fill="none" stroke="currentColor" stroke-width="1.8"/><circle cx="12" cy="10" r="2.8" fill="none" stroke="currentColor" stroke-width="1.8"/></svg>
          Madrid (HQ) · C. del Príncipe de Vergara 156
        </li>
      </ul>

      <div class="c-linkrow">
        <a class="c-link" href="https://wa.me/34612270018" target="_blank" rel="noreferrer">WhatsApp soporte</a>
        <a class="c-link" href="mailto:Support@agents-ian.com?subject=Soporte%20IA%20%7C%20IAN%20Academy">Soporte al alumno</a>

        <!-- NEW: AI chat button -->
        <button type="button" class="c-link bot" onclick="openIANChat()">
          <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
            <path d="M6 9a6 6 0 1 1 12 0v2a6 6 0 1 1-12 0V9Z" fill="none" stroke="currentColor" stroke-width="1.8" />
            <circle cx="9.5" cy="11" r="1.1" fill="currentColor"/>
            <circle cx="14.5" cy="11" r="1.1" fill="currentColor"/>
            <path d="M9 15c1.6 1.2 4.4 1.2 6 0" stroke="currentColor" stroke-width="1.8" fill="none" stroke-linecap="round"/>
          </svg>
          Hablar con IAN (IA)
        </button>
      </div>

      <div class="c-cols">
        <article>
          <h4>Soporte al alumno</h4>
          <p>Atención rápida sobre accesos, facturación y tutorías.</p>
        </article>
        <article>
          <h4>Feedback y sugerencias</h4>
          <p>Tu opinión ayuda a mejorar los cursos y plantillas.</p>
        </article>
        <article>
          <h4>Prensa y medios</h4>
          <p>Solicitudes de entrevistas o notas de prensa.</p>
        </article>
      </div>
    </div>

    <!-- RIGHT: your glass form (el markup قبلی شما) -->
    <div class="c-card" role="form" aria-labelledby="formTitle">
      <h3 id="formTitle" class="f-title">Escríbenos ahora</h3>
      <p class="f-sub">Te respondemos normalmente en menos de 24h (L–V).</p>

      <form id="ianContactForm" class="c-form">
        <div class="f-row">
          <label class="f-field">
            <span class="f-label">Nombre</span>
            <input type="text" name="first" autocomplete="given-name" required>
          </label>
          <label class="f-field">
            <span class="f-label">Apellidos</span>
            <input type="text" name="last" autocomplete="family-name">
          </label>
        </div>

        <div class="f-row">
          <label class="f-field icon-left">
            <span class="f-label">Email</span>
            <input type="email" name="email" autocomplete="email" required>
            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6l8 6 8-6" stroke="currentColor" stroke-width="1.6" fill="none"/><rect x="4" y="4" width="16" height="16" rx="3" fill="none" stroke="currentColor" stroke-width="1.6"/></svg>
          </label>
          <label class="f-field phone">
            <span class="f-label">Teléfono</span>
            <div class="phone-wrap">
              <select name="code" aria-label="Prefijo">
                <option value="+34" selected>+34</option>
                <option value="+52">+52</option>
                <option value="+57">+57</option>
                <option value="+1">+1</option>
              </select>
              <input type="tel" name="phone" inputmode="tel" placeholder="Número">
            </div>
          </label>
        </div>

        <label class="f-field">
          <span class="f-label">¿Cómo podemos ayudarte?</span>
          <textarea name="message" rows="6" maxlength="1200" required></textarea>
          <span class="f-help">Comparte el curso de interés, objetivos o dudas.</span>
        </label>

        <button class="f-btn" type="submit">Enviar</button>
        <p class="f-legal">Al enviar aceptas nuestra <a href="/privacy-policy">Política de privacidad</a>.</p>
      </form>

      <div id="f-toast" class="f-toast" role="status" aria-live="polite">Abriendo tu app de correo…</div>
    </div>

  </div>
</section>

<script>
/* Open the site chatbot if present (Crisp / Intercom / Tawk / Tidio / Chatwoot / Botpress / Freshchat / Drift) */
function openIANChat(){
  try{
    if (window.$crisp) { $crisp.push(["do","chat:open"]); return; }
    if (typeof Intercom === "function") { Intercom("show"); return; }
    if (window.Tawk_API && Tawk_API.maximize) { Tawk_API.maximize(); return; }
    if (window.tidioChatApi) { tidioChatApi.open(); return; }
    if (window.ChatwootSDK && ChatwootSDK.toggle) { ChatwootSDK.toggle("open"); return; }
    if (window.BotpressWebChat && BotpressWebChat.open) { BotpressWebChat.open(); return; }
    if (window.fcWidget && fcWidget.open) { fcWidget.open(); return; }           // Freshchat
    if (window.drift && drift.api && drift.api.sidebar) { drift.api.sidebar.open(); return; }
    // fallback: trigger a custom event – your chat widget can listen to it
    window.dispatchEvent(new CustomEvent("open-ian-chat"));
  }catch(e){}
}

/* Mailto submit (igual que قبل) */
document.getElementById('ianContactForm').addEventListener('submit', function (e) {
  e.preventDefault();
  const data = Object.fromEntries(new FormData(this).entries());
  const subject = encodeURIComponent('Contacto web · IAN Academy');
  const body =
`Nombre: ${data.first||''} ${data.last||''}
Email: ${data.email||''}
Teléfono: ${(data.code||'')+' '+(data.phone||'')}
---
Mensaje:
${data.message||''}

Origen: curso.agents-ian.com`;

  const href = `mailto:Support@agents-ian.com?subject=${subject}&body=${encodeURIComponent(body)}`;
  const toast = document.getElementById('f-toast');
  toast.classList.add('show');
  setTimeout(()=>{ window.location.href = href; }, 300);
  setTimeout(()=>{ toast.textContent = 'Si tu app de correo no se abre, escríbenos por WhatsApp.'; }, 4000);
});
</script>

<style>
/* ==== BIGGER + DARKER theme tweaks ==== */
:root{
  --ink:#0b1220;               /* تیره‌تر */
  --muted:#2b3a52;             /* متن ثانویه تیره‌تر */
}

/* پایه */
.contact-ian--xl .c-title{
  font:800 clamp(34px,5vw,52px)/1.08 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  letter-spacing:-.02em;
}
.contact-ian--xl .c-lead{
  margin:8px 0 18px;
  color:var(--muted);
  font:600 clamp(16px,2.4vw,18px)/1.75 system-ui;
}

/* لیست تماس بزرگ‌تر */
.contact-ian--xl .c-list{
  gap:12px;
}
.contact-ian--xl .c-list li{
  font-weight:700;
  color:#0e1d34;
}
.contact-ian--xl .c-list a{
  font-size: clamp(14px,2vw,16px);
}

/* کارت فرم و فیلدها بزرگ‌تر */
.contact-ian--xl .c-card{ padding:26px; }
.contact-ian--xl .f-title{ font:800 clamp(20px,2.6vw,24px)/1.2 system-ui; color:#0b1f3f; }
.contact-ian--xl .f-sub{ font:600 clamp(13px,2vw,14px)/1.6 system-ui; color:#334155; }

.contact-ian--xl .c-form{ gap:14px; }
.contact-ian--xl .f-row{ gap:14px; }
.contact-ian--xl .f-label{ font:800 13px/1.1 system-ui; color:#24415e; }

.contact-ian--xl .f-field input,
.contact-ian--xl .f-field textarea,
.contact-ian--xl .phone select{
  padding:16px 16px;
  border-radius:16px;
  border-width:1.2px;
  font:700 clamp(14px,2.2vw,16px)/1.2 system-ui;
  color:#0d213f;
}

.contact-ian--xl .f-field textarea{ min-height:140px; }
.contact-ian--xl .icon-left svg{ top:42px; right:14px; }

.contact-ian--xl .f-btn{
  padding:14px 20px;
  border-radius:16px;
  font:900 clamp(14px,2vw,15px)/1 system-ui;
}

/* ردیف لینک‌ها + دکمه چت */
.c-linkrow{
  display:flex; flex-wrap:wrap; gap:12px; margin:12px 0 24px;
}
.c-link{
  padding:10px 14px; border-radius:12px; text-decoration:none;
  font:800 clamp(13px,2vw,14px)/1 system-ui; letter-spacing:.2px;
  color:#064e3b; background:linear-gradient(180deg,#e8fff7,#dafef1);
  border:1px solid #bff2df;
}
.c-link:hover{ filter:brightness(.98); }

/* AI chat emphasis */
.c-link.bot{
  display:inline-flex; align-items:center; gap:8px; color:#0b1028;
  background:linear-gradient(135deg,#dbe5ff,#d6fff7);
  border:1px solid #bfd4ff;
  position:relative; overflow:hidden;
}
.c-link.bot::after{
  content:""; position:absolute; inset:0; background:radial-gradient(40% 60% at 10% 10%,rgba(23,199,179,.22),transparent 60%),
                                     radial-gradient(40% 60% at 90% 10%,rgba(106,163,255,.25),transparent 60%);
  pointer-events:none;
}
.c-link.bot svg{ color:#1e2a6d; }

/* ستون‌های زیرِ اطلاعات */
.c-cols{ gap:18px; }
.c-cols h4{ font:900 15px/1.15 system-ui; color:#102a43; }
.c-cols p{ font:600 13.5px/1.5 system-ui; color:#40566e; }

/* Toast */
.f-toast{ font:700 12.5px/1.2 system-ui; }

/* ریسپانسیو */
@media (max-width:980px){
  .contact-ian--xl .c-card{ order:-1; }
}
</style>/* End custom CSS */