/* ============================================================
   ia.css — Landing "Implementamos IA"  (/ia.html)
   Extiende css/style.css. Paleta del sitio:
   naranja #F78014 · gris hero #CBD1D2 · texto #21272B
   footer #161616 · azul botón #3366CC · Poppins
   Breakpoints alineados con style.css (900px / 600px).
   ============================================================ */

/* ---------- Hero (dentro de .headerLeft / .headerRigt) ---------- */

/* El lockup vive en el hero gris, a la derecha del título.
   .headerLeft / .headerRigt conservan el 49% que define style.css. */
.martesBoxHeader .boxHeader{
  min-height: 0;          /* style.css fija 500px: sobra sin el CTA */
  padding-top: 46px;
  padding-bottom: 46px;
}
.martesBoxHeader .headerLeft h1{ margin-bottom: 0; }  /* era el hueco del CTA */

.iaHeroLockup{
  width: 100%;
  max-width: 700px;
  height: auto;
}

/* ---------- Contenedor común ---------- */

.iaLimit{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}

.iaOverline{
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #F78014;
  margin: 0 0 10px;
}

.iaTitle{
  font-size: 32px;
  line-height: 40px;
  font-weight: 300;
  margin: 0 0 14px;
  color: #21272B;
}

.iaOrange{ color: #F78014; font-weight: 500; }

.iaLead{
  font-size: 15px;
  line-height: 25px;
  margin: 0 0 18px;
  color: #4A5257;
}

/* ---------- Formulario ---------- */

.iaFormSection{
  width: 100%;
  padding: 54px 20px;
  box-sizing: border-box;
  background-color: #F7F8F9;
  border-top: 1px solid #E5E7EB;
  color: #21272B;
}

.iaFormWrap{ display: block; }

.iaFormIntro{
  max-width: 740px;
  margin: 0 auto 34px;
  text-align: center;
}
.iaFormIntro .iaLead{ margin: 0; }

/* ---------- Formulario (Zoho Web-to-Lead, maquetado propio) ---------- */

#crmWebToEntityForm.iaForm{ display: block; }

.iaForm{
  max-width: 620px;
  margin: 0 auto;
  background-color: #fff;
  padding: 30px 28px;
  box-sizing: border-box;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
}

.iaGrid{ display: flex; flex-wrap: wrap; gap: 0 16px; }
.iaGrid .iaField{ flex: 1 1 calc(50% - 8px); min-width: 0; }

.iaField{ margin-bottom: 18px; }
.iaField label,
.iaFieldset legend{
  display: block;
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  color: #21272B;
  margin-bottom: 7px;
}
.iaReq{ color: #F78014; }

.iaField input[type="text"],
.iaField input[type="email"],
.iaField input[type="tel"],
.iaField textarea{
  width: 100%;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  line-height: 24px;
  color: #21272B;
  padding: 11px 14px;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #CBD1D2;
  border-radius: 8px;
  box-shadow: none;
  -webkit-appearance: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.iaField textarea{ resize: vertical; min-height: 100px; }
.iaField input:hover, .iaField textarea:hover{ cursor: text; }
.iaField input:focus, .iaField textarea:focus{
  outline: none;
  border-color: #F78014;
  box-shadow: 0 0 0 3px rgba(247,128,20,.16);
}
.iaField input:invalid:not(:placeholder-shown),
.iaField textarea:invalid:not(:placeholder-shown){ border-color: #D7473F; }

.iaFieldset{
  border: none;
  margin: 0 0 18px;
  padding: 18px 0 0;
  border-top: 1px solid #E5E7EB;
}
.iaFieldset legend{ padding: 0; margin-bottom: 12px; }
.iaRadios{ display: flex; flex-wrap: wrap; gap: 10px; }
.iaRadio{
  flex: 1 1 150px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: #21272B;
  padding: 11px 14px;
  box-sizing: border-box;
  border: 1px solid #CBD1D2;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .2s ease;
}
.iaRadio:hover{ border-color: #F78014; }
.iaRadio input[type="radio"]{ accent-color: #F78014; margin: 0; }

.iaCaptcha{ margin-bottom: 20px; }
.iaCaptchaRow{ display: flex; align-items: center; gap: 14px; margin-bottom: 9px; }
.iaCaptchaRow img{
  height: 42px;
  width: auto;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  background-color: #fff;
}
.iaReload{
  font-size: 13px;
  color: #F78014;
  text-decoration: none;
  border-bottom: 1px solid rgba(247,128,20,.4);
}
.iaReload:hover{ border-bottom-color: #F78014; }
.iaCaptchaErr{ font-size: 13px; line-height: 18px; color: #D7473F; visibility: hidden; }

.iaConsent{ margin-bottom: 22px; }
.iaCheck{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 20px;
  color: #4A5257;
  cursor: pointer;
}
.iaCheck input[type="checkbox"]{ margin: 3px 0 0; accent-color: #F78014; flex: 0 0 auto; }
.iaCheck a{ color: #F78014; text-decoration: underline; }

.iaSubmit{
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  background-color: #3366CC;
  border: none;
  border-radius: 8px;
  padding: 13px 40px;
  cursor: pointer;
  transition: background-color .2s ease;
}
.iaSubmit:hover{ background-color: #2A55AC; }
.iaSubmit[disabled]{ background-color: #9AA6BC; cursor: not-allowed; }

/* Clases que inyecta Zoho: que no rompan la maqueta */
.zcwf_row, .zcwf_col_lab, .zcwf_col_fld, .zcwf_col_help{
  width: auto; float: none; padding: 0; margin: 0;
}

/* ---------- Footer: redes sociales + aviso ---------- */

.iaFoot{
  width: 100%;
  background-color: #161616;
  padding: 22px 20px;
  box-sizing: border-box;
  text-align: center;
}
.iaFootInner{
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
.iaSocial{
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin: 0 5px;
  font-size: 18px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  border: 1px solid #3A3A3A;
  border-radius: 50%;
  transition: background-color .2s ease, border-color .2s ease;
}
.iaSocial:hover{ background-color: #F78014; border-color: #F78014; color: #fff; }
.iaSocial:focus-visible{ outline: 2px solid #F78014; outline-offset: 3px; }

.lineFoot .iaAviso{
  float: right;
  font-size: 14px;
  margin: 0;
}
.lineFoot .iaAviso a{ color: #fff; text-decoration: underline; }

/* ---------- Página de gracias ---------- */

/* Redes en la barra blanca del header, a la derecha del logo */
.iaHeaderSocial{
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  line-height: 0;
}
/* Mismo chip que .iaSocial de ia.html (40px, glifo blanco, hover naranja),
   pero relleno oscuro: sobre la barra blanca un glifo blanco no se vería. */
.iaHeaderSocial a{
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin: 0 3px;
  font-size: 18px;
  color: #fff;
  background-color: #161616;
  text-align: center;
  text-decoration: none;
  border: 1px solid #161616;
  border-radius: 50%;
  transition: background-color .2s ease, border-color .2s ease;
}
.iaHeaderSocial a:hover{
  background-color: #F78014;
  border-color: #F78014;
  color: #fff;
}
.iaHeaderSocial a:focus-visible{ outline: 2px solid #F78014; outline-offset: 2px; }

/* Banda gris con el mensaje */
.iaGraciasWrap{ min-height: calc(100vh - 80px); display: flex; }
.iaGraciasBox{
  text-align: center;
  min-height: 0;
  padding-top: 60px;
  padding-bottom: 60px;
  align-self: center;
  width: 100%;
}
.iaGracias{ max-width: 720px; margin: 0 auto; }

.iaGraciasIcon{
  font-size: 46px;
  color: #F78014;
  margin-bottom: 18px;
  display: block;
}
.iaGraciasBox h1{
  font-size: 42px;
  line-height: 50px;
  font-weight: 300;
  color: #21272B;
  margin: 0 0 18px;
}
.iaGraciasTxt{
  font-size: 17px;
  line-height: 28px;
  color: #4A5257;
  margin: 0 auto;
  max-width: 560px;
}
.iaGraciasEvento{
  font-size: 17px;
  line-height: 28px;
  font-weight: 500;
  color: #F78014;
  margin: 22px auto 0;
}

@media screen and (max-width: 600px){
  .lineFoot .firma,
  .lineFoot .iaAviso{ float: none; display: block; text-align: center; font-size: 12px; }
  .iaGrid .iaField{ flex: 1 1 100%; }
  .iaRadio{ flex: 1 1 100%; }
  .iaSubmit{ width: 100%; text-align: center; }
  .iaForm{ padding: 26px 22px; }
  .iaHeaderSocial a{ width: 34px; height: 34px; line-height: 34px; font-size: 15px; margin: 0 2px; }
  .iaGraciasBox h1{ font-size: 28px; line-height: 36px; }
  .iaGraciasTxt, .iaGraciasEvento{ font-size: 15px; line-height: 25px; }
  .iaGraciasIcon{ font-size: 38px; }
}

/* ---------- Accesibilidad ---------- */

@media (prefers-reduced-motion: reduce){
  .iaSocial, .iaHeaderSocial a, .iaSubmit, .iaRadio,
  .iaField input, .iaField textarea{ transition: none; }
}