.version.index {
  color: #0000E6;
  background-color: #529768;
}



body {
  position: relative;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   2. TIPOGRAFÍA
   -------------------------------------------------------------------------- */
@font-face {
  font-family: '__Century Gothic_5';
  src: url('../fonts/century_gothic.eot');
  src: local('   '), url('../fonts/century_gothic.woff') format('woff'), url('../fonts/century_gothic.svg') format('svg');
  font-weight: 400;
  font-style: normal;
}

/* --------------------------------------------------------------------------
   3. LAYOUT PRINCIPAL
   -------------------------------------------------------------------------- */
/*

*/

.html
{
	background-color: #FFFFFF;
}

#page
{
	z-index: 1;
	width: 100%;
  max-width: 960px;
  margin: 0 auto;
	min-height: 599.9853909464741px;
	background-image: none;
	border-style: none;
	border-color: #000000;
	background-color: transparent;
	padding-bottom: 0px;
	margin-left: auto;
	margin-right: auto;
}

#page .verticalspacer {
  clear: both;
}

#page_position_content {
  margin-top: -18px;
  width: 0.01px;
}

/* --------------------------------------------------------------------------
   4. HEADER / NAVEGACIÓN
   -------------------------------------------------------------------------- */
#inicio {
  left: -122px;
  position: relative;
}

/* Barra superior fija */
#u685 {
  z-index: 360;
  height: 80px;
  border-color: #F15A5B;
  background-color: #FFFFFF;
  position: fixed;
  top: 0;
}

#u685-bw {
  z-index: 360;
}

/* Área del logo */
#u686 {
  z-index: 361;
  width: 287px;
  background-color: transparent;
  position: fixed;
  top: 21px;
  left: 50%;
  margin-left: -570px;
}

/* Contenedor del menú */
#menuu688 {
  z-index: 365;
  width: 555px;
  border-style: none;
  border-color: transparent;
  background-color: transparent;
  position: fixed;
  top: 33px;
  left: 50%;
  margin-left: -125px;
}

/* Items del menú - estructura común */
#u696 {
  width: 83px;
  min-height: 26px;
  background-color: transparent;
  position: relative;
  margin-right: -10000px;
  left: 19px;
}
#u696-1 {
  width: 125px;
  min-height: 26px;
  background-color: transparent;
  position: relative;
  margin-right: -10000px;
  left: 580px;
}

#u699 {
  width: 82px;
  border-style: solid;
  border-color: #FFFFFF;
  background-color: transparent;
  padding-bottom: 12px;
  position: relative;
  border-width: 0 1px 0 0;
}

#u699.MuseMenuActive {
  width: 82px;
  min-height: 0;
  margin: 0;
}

#u702-4 {
  width: 54px;
  min-height: 14px;
  border-style: none;
  border-color: transparent;
  background-color: transparent;
  color: #313131;
  text-align: center;
  letter-spacing: 3px;
  font-size: 12px;
  line-height: 14px;
  font-family: lato, sans-serif;
  font-weight: 400;
  position: relative;
  margin-right: -10000px;
  top: 6px;
  left: 0px;
}

#u699:hover #u702-4,
#u699.MuseMenuActive #u702-4 {
  padding-top: 0;
  padding-bottom: 0;
  min-height: 14px;
  width: 54px;
  margin: 0 -10000px 0 0;
}

#u699:hover #u702-4 p,
#u699:hover #u702-4 h1,
#u699.MuseMenuActive #u702-4 p,
#u699.MuseMenuActive #u702-4 h1 {
  color: #F15A5B;
  visibility: inherit;
  font-family: lato, sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* Menú item 2 */
#u710 {
  width: 125px;
  min-height: 26px;
  background-color: transparent;
  position: relative;
  margin-right: -10000px;
  left: 85px;
}

#u713 {
  width: 124px;
  border-style: solid;
  border-color: #FFFFFF;
  background-color: transparent;
  padding-bottom: 12px;
  position: relative;
  border-width: 0 1px 0 0;
}

#u713.MuseMenuActive {
  width: 124px;
  min-height: 0;
  margin: 0;
}

#u714-4 {
  width: 96px;
  min-height: 14px;
  border-style: none;
  border-color: transparent;
  background-color: transparent;
  color: #313131;
  text-align: center;
  letter-spacing: 3px;
  font-size: 12px;
  line-height: 14px;
  font-family: lato, sans-serif;
  font-weight: 400;
  position: relative;
  margin-right: -10000px;
  top: 6px;
  left: 14px;
}

#u713:hover #u714-4,
#u713.MuseMenuActive #u714-4 {
  padding-top: 0;
  padding-bottom: 0;
  min-height: 14px;
  width: 96px;
  margin: 0 -10000px 0 0;
}

#u713:hover #u714-4 p,
#u713:hover #u714-4 h1,
#u713.MuseMenuActive #u714-4 p,
#u713.MuseMenuActive #u714-4 h1 {
  color: #F15A5B;
  visibility: inherit;
  font-family: lato, sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* Menú item 3 */
#u717 {
  width: 116px;
  min-height: 26px;
  background-color: transparent;
  position: relative;
  margin-right: -10000px;
  left: 212px;
}

#u718 {
  width: 115px;
  border-style: solid;
  border-color: #FFFFFF;
  background-color: transparent;
  padding-bottom: 12px;
  position: relative;
  border-width: 0 1px 0 0;
}

#u718.MuseMenuActive {
  width: 115px;
  min-height: 0;
  margin: 0;
}

#u719-4 {
  width: 87px;
  min-height: 14px;
  border-style: none;
  border-color: transparent;
  background-color: transparent;
  color: #313131;
  text-align: center;
  letter-spacing: 3px;
  font-size: 12px;
  line-height: 14px;
  font-family: lato, sans-serif;
  font-weight: 400;
  position: relative;
  margin-right: -10000px;
  top: 6px;
  left: 14px;
}

#u718:hover #u719-4,
#u718.MuseMenuActive #u719-4 {
  padding-top: 0;
  padding-bottom: 0;
  min-height: 14px;
  width: 87px;
  margin: 0 -10000px 0 0;
}

#u718:hover #u719-4 p,
#u718:hover #u719-4 h1,
#u718.MuseMenuActive #u719-4 p,
#u718.MuseMenuActive #u719-4 h1 {
  color: #F15A5B;
  visibility: inherit;
  font-family: lato, sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* Menú item 4 */
#u703 {
  width: 107px;
  min-height: 26px;
  background-color: transparent;
  position: relative;
  margin-right: -10000px;
  left: 330px;
}

#u706 {
  width: 106px;
  border-style: solid;
  border-color: #FFFFFF;
  background-color: transparent;
  padding-bottom: 12px;
  position: relative;
  border-width: 0 1px 0 0;
}

#u706.MuseMenuActive {
  width: 106px;
  min-height: 0;
  margin: 0;
}

#u709-4 {
  width: 78px;
  min-height: 14px;
  border-style: none;
  border-color: transparent;
  background-color: transparent;
  color: #313131;
  text-align: center;
  letter-spacing: 3px;
  font-size: 12px;
  line-height: 14px;
  font-family: lato, sans-serif;
  font-weight: 400;
  position: relative;
  margin-right: -10000px;
  top: 6px;
  left: 14px;
}

#u706:hover #u709-4,
#u706.MuseMenuActive #u709-4 {
  padding-top: 0;
  padding-bottom: 0;
  min-height: 14px;
  width: 78px;
  margin: 0 -10000px 0 0;
}

#u706:hover #u709-4 p,
#u706:hover #u709-4 h1,
#u706.MuseMenuActive #u709-4 p,
#u706.MuseMenuActive #u709-4 h1 {
  color: #F15A5B;
  visibility: inherit;
  font-family: lato, sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* Menú item 5 (último) */
#u689 {
  width: 116px;
  min-height: 26px;
  background-color: transparent;
  position: relative;
  margin-right: -10000px;
  left: 425px;
}

#u690 {
  width: 116px;
  border-style: none;
  border-color: transparent;
  background-color: transparent;
  padding-bottom: 12px;
  position: relative;
}

#u690.MuseMenuActive {
  width: 116px;
  min-height: 0;
  margin: 0;
}
/* Forzar B2B siempre resaltado */
#u691-4,
#u691-4 p,
#u691-4 h1 {
  color: #F15A5B !important;
}

#u691-4 {
  width: 89px;
  min-height: 14px;
  border-style: none;
  border-color: transparent;
  background-color: transparent;
  color: #313131;
  text-align: center;
  letter-spacing: 3px;
  font-size: 12px;
  line-height: 14px;
  font-family: lato, sans-serif;
  font-weight: 400;
  position: relative;
  margin-right: -10000px;
  top: 6px;
  left: 0px;
}

#u690:hover #u691-4,
#u690.MuseMenuActive #u691-4 {
  padding-top: 0;
  padding-bottom: 0;
  min-height: 14px;
  width: 89px;
  margin: 0 -10000px 0 0;
  color: #F15A5B;
}


#u690:hover #u691-4 p,
#u690:hover #u691-4 h1,
#u690.MuseMenuActive #u691-4 p,
#u690.MuseMenuActive #u691-4 h1 {
  color: #F15A5B;
  visibility: inherit;
  font-family: lato, sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* Estado activo del menú - color en todos los items */
#u699.MuseMenuActive #u702-4 p,
#u699.MuseMenuActive #u702-4 h1,
#u713.MuseMenuActive #u714-4 p,
#u713.MuseMenuActive #u714-4 h1,
#u718.MuseMenuActive #u719-4 p,
#u718.MuseMenuActive #u719-4 h1,
#u706.MuseMenuActive #u709-4 p,
#u706.MuseMenuActive #u709-4 h1,
#u690.MuseMenuActive #u691-4 p,
#u690.MuseMenuActive #u691-4 h1 {
  color: #F15A5B;
  visibility: inherit;
}

.MenuItem {
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   5. HERO / BANNER PRINCIPAL
   -------------------------------------------------------------------------- */
#u75 {
  z-index: 139;
  height: 700px;
  background: transparent url("../images/background-digital-factory-mexico-dise%c3%b1o-y-desarrollo-web-social-media-management.jpg") no-repeat center top;
  background-size: cover;
}

#u75-bw {
  z-index: 139;
  margin-top: 80px;
  height: 1200px;
}






/* --------------------------------------------------------------------------
   7. BANNER CTA (rojo) - "¿Qué hacemos?"
   -------------------------------------------------------------------------- */
#pu291 {
  width: 0.01px;
  margin-left: -100px;
  margin-top: 0px;
}

#u291 {
  z-index: 140;
  min-height: 303px;
  background-color: #F74858;
  padding-bottom: 97px;
}

#u291_align_to_page,
#u1267_align_to_page {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
  position: relative;
  left: -100px;
}

#u2801 {
  z-index: 273;
  width: 532px;
  height: 52px;
  background-color: #484848;
  position: relative;
  margin-right: -10000px;
  margin-top: 251px;
  left: 315px;
}

#u291-bw {
  z-index: 140;
  min-height: 303px;
}










/* --------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */
#pu3864 {
  width: 0.01px;
  margin-left: -100px;
}

#u3864 {
  z-index: 296;
  min-height: 279px;
  padding-bottom: 21px;
}
#u3864 {
  background: url("../images/background-digital-factory-mexico-dise%c3%b1o-y-desarrollo-web-social-media-management.jpg") no-repeat center bottom;
  background-size: auto;        
  background-attachment: fixed; 
}


#u3864_align_to_page {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
  left: -100px;
}

#u3866-26 {
  z-index: 301;
  width: 214px;
  min-height: 175px;
  margin-right: -10000px;
  margin-top: 40px;
  left: 146px;
}

#pu3868-5 {
  width: 0.01px;
  margin-right: -10000px;
  margin-top: 32px;
  margin-left: 473px;
}

#u3868-5 {
  z-index: 347;
  width: 300px;
  min-height: 41px;
}

#u3867-20 {
  z-index: 327;
  width: 300px;
  min-height: 128px;
  margin-top: 11px;
}

#u3865-4 {
  z-index: 297;
  width: 214px;
  margin-top: 49px;
}

#u3869-4 a,
#u3870-4 a {
  color: #FFFFFF;
  text-decoration: none;
}

#u3869-4 a:hover,
#u3870-4 a:hover {
  color: #F74959;
} 

#u3869-4 {
  z-index: 352;
  width: 101px;
  margin-right: -10000px;
  margin-top: 265px;
  left: 908px;
}

#u3864-bw {
  z-index: 296;
  min-height: 279px;
}

#u3870-4 {
  z-index: 356;
  width: 27px;
  margin-right: -10000px;
  margin-top: 267px;
  left: 1005px;
}





.redes {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
#u3864_align_to_page{
  position: relative; /* importante para posicionar dentro */
}

.redes-top{
  position: absolute;
  top: 30px;     /* qué tan arriba */
  right: 0px;   /* qué tan a la derecha */
  display: flex;
  gap: 10px;
  z-index: 10;
}

.redes-top img{
  display: block;
}

.aviso-privacidad label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.aviso-privacidad {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 55px; /* 👈 ajusta este valor */
  text-align: center;
  font-size: 12px;
  transform: translateY(10px);
}

.aviso-privacidad input {
  cursor: pointer;
}

.aviso-privacidad a {
  color: #000;
  text-decoration: underline;
  white-space: nowrap; /* 👈 CLAVE: evita que se rompa en vertical */
}




.contenedor-boton{
  text-align:center;
  margin-top:30px;
}

.btn-realidad{
    position: fixed;
  display:inline-block;
  padding:14px 32px;
  background-color:#000; /* cámbialo si quieres */
  color:#fff;
  font-size:18px;
  font-weight:600;
  text-decoration:none;
  border-radius:50px;
  transition:all 0.3s ease;
  top: 1900px;
}

/* Hover pro */
.btn-realidad:hover{
  background-color:#333;
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,0.2);
}






/* NUEVO CSS*/ 



#u1270-4{ font-size: 30px; line-height: 40px; }
#u1270-6{ font-size: 30px; line-height: 30px; }
#u1270-9 {
  z-index: 274;
  width: 920px;
  min-height: 202px;
  background-color: transparent;
  color: #FFFFFF;
  text-align: center;
  letter-spacing: 1px;
  font-family: lato, sans-serif;
  font-weight: 300;
  position: relative;
  margin-right: -10000px;
  margin-top: 93px;
  left: 120px;
}

#u1270-2 { font-size: 40px; line-height: 54px; }
#u1270-7 { font-size: 30px; line-height: 36px; }
#u1270-7{
  margin-top: 65px !important;
}
#u1270-5{
  font-size: 20px;
  height: 5px;
  line-height: 25px;
  margin: 0;
}

#u1270-9{
  min-height: auto;
  padding-bottom: 20px;
}


/* CONTENEDOR */
#servicios-nuevos{
  width: 920px;              /* 👈 igual que tu layout actual */
  margin-left: 80px;        /* 👈 alineado con tu diseño */
  margin-top: 80px;
  color: #333;
  font-family: lato, sans-serif;
}

/* TITULO */
.titulo-seccion{
  width: 800px;
  line-height: 23px;
  letter-spacing: 1px;
  font-size: 45px;
  text-align: left;          /* 👈 clave */
  margin-bottom: 20px;
  font-family: lato, sans-serif;
  font-weight: 300;
  text-align: center;
  margin-right: 300px;
}

/* INTRO */
.intro-servicios{
  width: 800px;
  text-align: center;
  margin-bottom: 30px;
  font-size: 18px;
  line-height: 12px;
  margin-right: 190px;
}

/* ITEM */
.servicio-item{
  width: 90%;
  margin-top: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid #ddd;
}

/* TITULO CLICK */
.servicio-titulo{
  font-size: 20px;
  color: #e60023;
  cursor: pointer;
  font-weight: 600;
  padding: 10px 0;
}

/* CONTENIDO */
/* CONTENIDO OCULTO (animable) */
.servicio-contenido{
  font-size: 16px;
  line-height: 26px;
  padding-bottom: 10px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.5s ease;
}

/* CUANDO SE ABRE */
.servicio-item.activo .servicio-contenido{
  max-height: 500px; /* suficiente para el contenido */
  opacity: 1;
}

.servicio-item.activo .servicio-contenido{
  transform: translateY(5px);
}


/* ACTIVO */
.servicio-item.activo .servicio-contenido{
  display: block;
}
#servicios-nuevos strong{
  font-weight: 700 !important;
}


/* Estado inicial (ocultos) */
.servicio-item{
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.6s ease;
}

/* Alternar dirección (izq / der) */
.servicio-item:nth-child(even){
  transform: translateX(50px);
}

/* Cuando aparece */
.servicio-item.visible{
  opacity: 1;
  transform: translateX(0);
}

/* Estado inicial */
.titulo-seccion,
.intro-servicios{
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease;
}

/* Cuando aparecen */
.titulo-seccion.visible,
.intro-servicios.visible{
  opacity: 1;
  transform: translateY(0);
}


#faqs{
  width: 850px;
  margin-left: 120px;
  margin-top: 80px;
  margin-bottom: 80px;
  font-family: lato, sans-serif;
}

/* TITULO */
.titulo-faqs{
  text-align: center;
  margin-bottom: 60px;
  font-size: 40px;
  margin-right: 190px;
}

/* ITEM */
.faq-item{
  border-bottom: 1px solid #ddd;
  padding: 15px 0;
}

/* PREGUNTA */
.faq-pregunta{
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  color: #000000;
}

/* RESPUESTA (animada) */
.faq-respuesta{
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.5s ease;
  font-size: 16px;
  line-height: 17px; /* 🔥 aquí está el fix */
  margin-top: 10px;
}
.faq-respuesta strong{
  font-weight: 700 !important;
}

/* ACTIVO */
.faq-item.activo .faq-respuesta{
  max-height: 300px;
  opacity: 1;
}

.aviso-footer {
  position: absolute;
  top: 84px; 
  right: 0;
  text-align: right;
  font-size: 14px;
}

.aviso-footer a {
  color: #FFFFFF;
  text-decoration: none;
}

.aviso-footer a:hover {
  text-decoration: underline;
}
#u86-4 a {
  color: #FFFFFF;
  text-decoration: none;
}


#u86-4 a:hover {
  color: #F74959;
} 
#u86-4
{
	z-index: 112;
	width: 101px;
	margin-right: -10000px;
	margin-top: 265px;
	left: 908px;
}

#open_preferences_center {
  display: none;
}

#cookie-btn {
  position: fixed;
  bottom: 100px;
  right: 10px;   
  left: auto;  
  background: #F74959;
  color: #fff;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  z-index: 9999;
}


#INDmenu-btn,
#INDbtnWrap {
  bottom: 10px !important;
  top: auto !important;
}

/* Menú item BLOG */
#u800 {
  width: 100px;
  min-height: 26px;
  background-color: transparent;
  position: relative;
  margin-right: -10000px;
  left: 490px; 
}

#u801 {
  width: 100px;
  border-style: solid;
  border-color: #FFFFFF;
  background-color: transparent;
  padding-bottom: 12px;
  position: relative;
  border-width: 0 1px 0 0;
}

#u802-4 {
  width: 70px;
  min-height: 14px;
  background-color: transparent;
  color: #313131;
  text-align: center;
  letter-spacing: 3px;
  font-size: 12px;
  line-height: 14px;
  font-family: lato, sans-serif;
  position: relative;
  margin-right: -10000px;
  top: 6px;
  left: 10px;
}

/* Hover */
#u801:hover #u802-4 h1 {
  color: #F15A5B;
}