@charset "utf-8";
/* CSS Document */
   
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
/*
	font-family: "Mulish", sans-serif;
	font-family: "Montserrat", sans-serif;
 
 */ 
  
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
		font-family: "Inter", sans-serif; 
    }
    body {
        background:#222;
        overflow-x: hidden;
		font-family: "Inter", sans-serif;
		transition: all ease 1s;  
    } 
    :root{ 
		--N:#1A1A1A;
	  --G:#D1D1D1; 
	  --A:#009E9A; 
	  --LA:#2ED6C3;
      --LP:#7a5cff;
      --LB:#35b6ff;
      --muted:rgba(255,255,255,.72);
		  --bg:#0b0f14;

      /* Sidebar negro + textos blancos */
      --panel:#000000;
      --text:#ffffff;
      --muted: rgba(255,255,255,.72);
      --line:#ffffff;

      --accent:#4aa3ff;

      /* botón */
      --btnBlue:#081a33;
      --btnBlue2:#0a2550;

      --shadow: 0 20px 60px rgba(0,0,0,.55);

      --ease: cubic-bezier(.16, 1, .3, 1);
      --dur: 980ms;
      --xDelay: 220ms;
    } 
		 
/* UX/UI FONTS LABELS Desktop FULL HD #########################################################*/
 
	.labelTitle{  
		font-weight: 700;  
		font-size: 55px; 
	}
	.labelSubtitle{ 
		font-size: 27px; 
		font-weight: 700;    
	}
	.labelText{  
		line-height: 1.5;
		font-size: 19px; 
  		font-weight: 300; 	 
	} 
  
/*##########################################################
	   0.0 custom cursor
##########################################################*/ 
    .cursor-dot {
      top: 0px;
      left: 0px;
      position: fixed;
      width: 20px;
      height: 20px;
      background-color: transparent;
      border-radius: 50%;
      pointer-events: none;
      transform: translate(-50%, -50%);
      z-index: 9999999; 
		mix-blend-mode: difference;
      border: 5px solid #fff;
    }
    .cursor-ring {
      top: -20px;
      left: -20px;
      position: fixed;
      width: 25px;
      height: 25px;
      border: 5px solid rgba(255,255,255,0.0);
      border-radius: 50%;
      pointer-events: none;
      transform: translate(-50%, -50%);
      z-index: 99999999;
    }
    .cursor-dot.is-hover {
      top: 0px;
      left: 0px;
      position: fixed;
      width: 0px;
      height: 0px;
      background-color: transparent;
		border: 5px solid dodgerblue;
      border-radius: 50%;
      pointer-events: none;
      transform: translate(-50%, -50%);
      z-index: 99999999999; 
    }
    .cursor-ring.is-hover {
		transition: 0.5s ease all;
      top: -45px;
      left: -45px;
      position: fixed;
      width: 100px;
      height: 100px;
      border: 1px solid rgba(14,0,23,0.80);
      border-radius: 50%;
      pointer-events: none;
      transform: translate(-50%, -50%);
      z-index: 999999999;
		background: radial-gradient(circle at center,rgba(30,144,255,0.1),rgba(0,0,34,0.20), rgba(14,0,23,0.80));
    backdrop-filter: blur(0.5px);
    -webkit-backdrop-filter: blur(0.5px); 
    }
a:hover,
button:hover,
input:hover,
textarea:hover,
select:hover,
label:hover,
h1:hover,
h2:hover,
h3:hover,
h4:hover,
h5:hover,
h6:hover,
p:hover,
div:hover,
label:hover,
*[role="button"]:hover{
	cursor: none !important;
}


/* =========================
   animaton next
   ========================= */
#next{
  position: fixed;
  inset: 0;
  background:var(--A);     /* puedes dejarlo, pero el blend se notará poco */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 9999999999;
  justify-content: space-around;
  display: flex;
  align-items: center;
 
}
.nextBox{
  transition: 1s ease all;
  background-color:var(--N);
  z-index: 999;
  width: 0%;
  height: 100vh;
  position: absolute;
  top:0;
  left: 0;
  margin: 0;
}
.nextBox.active{
  animation: next 1s forwards;
}
#next.activeNext {
  opacity: 1;
}	
#next img{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50% ,-50%);
  width: 133px;
  height: 133px;
  z-index: 10000000000;   /* arriba de nextBox */ 
  filter: invert(1) contrast(1.1); /*  alternativa confiable */
} 
@keyframes next{
  0%{ width: 0%; } 
  80%{ width: 10%; } 
  100%{ width: 100%; } 
}

	
/* =========================
   intro hello World
   ========================= */
  @keyframes helloWorld{
	  0%{
		  opacity: 1;
		  
	  }
	  80%{ z-index: 99999999;
		  opacity: 1; 
	  }
	  81%{ 
	  }
	  99%{ z-index: 99999999;
	  }
	  100%{z-index: -999;
		  opacity: 0;
	  }
  }

  @keyframes introBg{
	  0%{
		  background-color: #fff;
		  
	  }
	  10%{
		  background-color: #fff;
	  }
	  30%{ 
		  background-color: #000;
	  } 
	  80%{ z-index: 99999999;
		  opacity: 1; 
	  }
	  100%{
		  background-color: #000; z-index: 99999999; opacity: 0;
	  }
  }
  /* ===== STAGE ===== */
  .intro{ 
	  z-index: 99999999;
    position:fixed;
    inset:0;
    display:grid;
    place-items:center; 
	  animation: helloWorld 6s forwards;
	  pointer-events: none;
  }
  .intro::after{
    content:"";
    position:absolute;
    inset:-30%;
    pointer-events:none;
    z-index:5;
  } 
.play{
	background-color: white;
	transition: 1s ease all;
	  animation: introBg 6s forwards;
}

  .dust{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    opacity:.35;
    background:
      radial-gradient(circle at 12% 30%, rgba(255,255,255,.35) 0 1px, transparent 2px),
      radial-gradient(circle at 22% 62%, rgba(255,255,255,.20) 0 1px, transparent 2px),
      radial-gradient(circle at 44% 18%, rgba(255,255,255,.28) 0 1px, transparent 2px),
      radial-gradient(circle at 68% 35%, rgba(255,255,255,.18) 0 1px, transparent 2px),
      radial-gradient(circle at 78% 70%, rgba(255,255,255,.26) 0 1px, transparent 2px),
      radial-gradient(circle at 90% 42%, rgba(255,255,255,.20) 0 1px, transparent 2px);
    background-size: 520px 520px;
    animation: dustMove 5s linear infinite;
    filter: blur(.2px);
  }
  @keyframes dustMove{
    from{ background-position: 0 0,  0 0,  0 0,  0 0,  0 0,  0 0; }
    to  { background-position: -160px 120px, -220px -90px, 150px 80px, -140px -60px, 240px 140px, -260px 70px; }
  } 
  .rays{
    position:absolute;
    inset:-55%;
    left:50%;
    top:52%;
    transform:translate(-50%,-50%) scale(.92);
    z-index:2;
    pointer-events:none;
    opacity:0;

    /* Rayos: conic gradient repetido */
    background:
      repeating-conic-gradient(
        from 0deg,
        rgba(255,255,255,0) 0deg 10deg,
        rgba(207,233,255,.22) 10deg 12deg,
        rgba(255,255,255,0) 12deg 20deg
      );

    /* “volumen” */
    filter: blur(10px);
    mix-blend-mode: screen;

    /* recorte radial para que nazca del centro y se pierda */
    -webkit-mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 24%, rgba(0,0,0,.35) 48%, rgba(0,0,0,0) 72%);
            mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 24%, rgba(0,0,0,.35) 48%, rgba(0,0,0,0) 72%);
  } 
  .bloom{
    position:absolute;
    left:50%;
    top:52%;
    width:8px;
    height:8px;
    transform:translate(-50%,-50%) scale(.9);
    border-radius:999px;
    z-index:3;
    pointer-events:none;
    opacity:0;
    background:rgba(255,255,255,1);
    mix-blend-mode: screen;
    filter: blur(0px);
    box-shadow:
      0 0 0 0 rgba(255,255,255,0),
      0 0 0 0 rgba(207,233,255,0);
  } 
  .logoWrap{
    position:relative;
    z-index:4;
    display:grid;
    place-items:center;
    transform:translateZ(0);
  }  
  .play img{
	mix-blend-mode: difference;
	  margin: auto;
	  height:  233px;
	  width: 233px;
	  
    animation: textOn 1.2s cubic-bezier(.2,.95,.15,1) forwards;
  }
  @keyframes textOn{
    0%   { opacity:0; filter:blur(10px); transform:scale(.985); }
    22%  { opacity:1; filter:blur(1px);  transform:scale(1.01); }
    100% { opacity:1; filter:blur(0px);  transform:scale(1); }
  }
  .play .bloom{
    animation: bloomPop 3.2s cubic-bezier(.2,.95,.15,1) forwards;
  }
  @keyframes bloomPop{
    0%{
      opacity:0;
      transform:translate(-50%,-50%) scale(.88);
      filter: blur(0px);
      box-shadow:
        0 0 0 0 rgba(255,255,255,0),
        0 0 0 0 rgba(207,233,255,0);
    }
    18%{
      opacity:1;
      transform:translate(-50%,-50%) scale(1.08);
      filter: blur(.6px);
      box-shadow:
        0 0 40px 14px rgba(255,255,255,.55),
        0 0 120px 28px rgba(207,233,255,.18);
    }
    42%{
      opacity:.75;
      transform:translate(-50%,-50%) scale(1.12);
      filter: blur(1.4px);
      box-shadow:
        0 0 70px 26px rgba(255,255,255,.28),
        0 0 200px 58px rgba(207,233,255,.10);
    }
    100%{
      opacity:0;
      transform:translate(-50%,-50%) scale(1.16);
      filter: blur(6px);
      box-shadow:
        0 0 140px 60px rgba(255,255,255,0),
        0 0 260px 120px rgba(207,233,255,0);
    }
  }
  .play .rays{
    animation: raysBurst 2.2s cubic-bezier(.2,.95,.15,1) forwards;
  }
  @keyframes raysBurst{
    0%   { opacity:0;   transform:translate(-50%,-50%) scale(.90) rotate(-4deg); }
    18%  { opacity:.85; transform:translate(-50%,-50%) scale(1.06) rotate(2deg); }
    40%  { opacity:.62; transform:translate(-50%,-50%) scale(1.02) rotate(6deg); }
    100% { opacity:.22; transform:translate(-50%,-50%) scale(1.00) rotate(8deg); }
  }
 



/* =========================
   header
   ========================= */
header {  
	backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
	 	position: fixed; /* o absolute si lo necesitas */
  top: 0;
  left: 0;
  width: 100%;
	z-index: 2;
	transition: 1s ease all; 
	display: flex;
	background-color: var(--G);
}
.headerWrapp{  
	width: 100%;  
	display: flex;
  max-width: 2000px;
	margin: 0 auto;
	
}
header.scrolled{ 
	background-color: rgba(255,255,255,0.7);
	backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); 
}
#logo{ 
	width: 100px;
	height: 50px;
	margin: 0;
	margin: auto auto auto 10%;
}  
  .lang-dropdown{
    position:relative;
    display:none;
  }
/* -------------------- NAVBAR Desktop Version -------------------- */ 
.nav-left{ 
		display: flex; 
	margin: auto 10% auto auto;
	justify-content: space-around;
	gap:21px;
} 
.nav-left a,h4{   
	text-decoration: none;
	margin: auto;
	font-weight: 200;
}
.nav-item{
    position: relative;
    padding: 8px 0;
    cursor: pointer;
    font-size: 13px;
	color: #000;
	font-weight: 200;
}
.itemIconNavimg{
		height: 33px;
	    width: 33px;
		margin: auto 5px;
	}	
.itemIconNav p{ 
	    width: 121px; 
		margin: auto 5px;
	color: var(--N);
	transition: 1s ease all;
	}	
.itemIconNav {
	text-decoration: none;
	display: flex; 
	margin: 13px;
	border-radius: 0px;
	padding: 8px;
	transition: 1s ease all;
	color: var(--N);
	} 
.itemIconNav:hover {
		background-color: #aaa;
	 
	}
.itemIconNav p:hover{ 
	  color: var(--A);
	}
/* Línea  animada */
.nav-item::after{
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 00%;
    height: 0px;
    background: #aaa; 
    transition: 0.3s;
}
.nav-item:hover::after{
    width: 100%;
}
.nav-item:hover{ 
	  color: #aaa;
}
.flag{
	width: 21px;
	height: 21px;
	margin: auto 3px;
	position: relative;
}
.nav-item span{
	color: white;
	margin: auto 3px;
	position: relative;
}
 
/* -------------------- MEGA MENU -------------------- */
.mega-menu{
    position: absolute;
    top: 120%;
    right: -50%;
    width: auto;
	background: #fff;
	backdrop-filter: blur(21px);
    -webkit-backdrop-filter: blur(21px);
	z-index: 99;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    opacity: 0;
    border-radius:  10px 10px;
    box-shadow: 0px 10px 30px rgba(0,0,0,0.15);

    /*Oculto por defecto */ 
	
    visibility: hidden;
    transform: translateY(25px); /* aparece desde abajo */
    transition:  all ease 1s;
}
.bite-menu{
    position: absolute;
    top: 120%;
    right: -50%;
    width: auto;
	background: #fff;
	backdrop-filter: blur(21px);
    -webkit-backdrop-filter: blur(21px);
	z-index: 99;
    display: flex;
	flex-direction: column;
    opacity: 0;
    border-radius:  10px 10px;
    box-shadow: 0px 10px 30px rgba(0,0,0,0.15);

    /*Oculto por defecto */ 
	
    visibility: hidden;
    transform: translateY(25px); /* aparece desde abajo */
    transition:  all ease 1s;
}
/* Mostrar menús con animación suave */
.nav-item:hover .mega-menu{ 
    visibility: visible;
    transform: translateY(0px);
	backdrop-filter: blur(21px);
    -webkit-backdrop-filter: blur(21px);opacity: 1;
}
.nav-item:hover .bite-menu{ 
    visibility: visible;
    transform: translateY(0px);
	backdrop-filter: blur(21px);
    -webkit-backdrop-filter: blur(21px);opacity: 1;
}
/* Columnas del mega menu */
.menu-col {
	margin: 5px auto;
} 
.menu-col > a{ 
	color: #fff; 
} 
  /* ===== Botón contacto===== */
 .ctaMarqueeFDK{
    display:inline-flex;
    align-items:center;
    justify-content:center; 
     text-decoration:none;
    overflow:hidden;
    position:relative;
	  transition: 1s ease all;
	 background-color: var(--LA );
    color:#fff; 
	font-weight: 200;
	 padding: 5px 13px;
	 margin: auto 0;
	 border-radius: 13px;
  }
.ctaMarqueeFDK h3{
	font-size: 13px;
	font-weight: 200;
}
.ctaMarqueeFDK:hover{ 
	 background-color: var(--G);
    color: var(--A );
  }



    /* =========================
       HERO
    ========================= */
	  .hero{
		  height:100vh;
		  width:100%; 
	position:relative; 
	z-index: 1;
	background-size:  100% 100%;
  background-position: left top;
  background-repeat:no-repeat;
  /*background-attachment:fixed; /* EFECTO PARALLAX */ 
	display: flex;
	justify-content: space-around;
	align-content: center;
	background-image: url("../bg.jpg");
	  }   
.sphereDemo{
	position: absolute;
	top:0;
	left: 0;
	z-index: 99;
	width: 100%;
	height: 100;
	display: none;
}

	.heroBox{
		display: flex;
		flex-direction: column; 
		width: 80%;
		position: relative;
		margin: 0 10%;
	}
	.heroItem{
		margin: auto auto auto 0;
		display: flex;
		flex-direction: column; 
		width: 50%;
	}	
	.heroBoxTitle{ 
		width: 90%;
		position: relative;   
		font-weight: 700; 
		color: white;  
	}
	.heroBoxTitle span{
	
	background: linear-gradient(45grad,var(--A),var(--LA));
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent; 
	}
	.heroItem p{ 
		width: 90%;
		color: white;  
	font-family: "Mulish", sans-serif;
		font-weight: 200; 
	margin: 13px auto auto 0;
	}
.heroBox img{ 
	display: none;
}
	.heroItem a{ z-index: 99;
	position: relative;
	margin: 13px auto auto 0;
  display:inline-block;
  padding:14px 36px;
  background:linear-gradient(45rad,var(--LA),var(--LA) );
  color:var(--N);
  text-decoration:none;
  font-weight:400;
  border-radius:5px;
		transition: 1s ease all;
	}
	.heroItem a:hover{  
  background:linear-gradient(45rad,var(--G),var(--G) );
  color:var(--N); 
		transform: scale(1.05);
	}

/**********************************************************************************************
	0.x level
**********************************************************************************************/	  
	.level{ 
	background: #fff;  
		  width:100%; 
	position:relative; 
	z-index: 1; 
	display: flex;
	justify-content: space-around;
	align-content: center; 
		padding: 5% 0 0 0;
}
   	.levelGrid{
		display: flex;
		flex-direction: column; 
		width: 80%;
		position: relative;
		margin: 0 10%;
	}
	.levelBox{
	display: grid;
    grid-template-columns: repeat(3, 1fr);
	gap:13px;
	}
	.levelBoxItem{
	margin:0%;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column; 
	justify-content: space-around;
	align-content: center;
	padding: 13px;  
	border-radius: 21px;  
    /* ✨ BLUR REAL SIN BORRAR CONTENIDO */ 
}
	.levelBoxItem img{
	width: 89px;
	height:89px;  
	margin:  auto; 

}
	.levelText{
		margin: 0 auto auto auto;
	   height:150px; 	
		display:flex;
			flex-direction:column;
	}
	.levelBoxItemTitle{ 
	color: var(--N); 
	justify-content: center;
	text-align: center;
		font-weight: 600;
} 
	.levelBoxItemp{ 
	margin: 0 auto auto  auto ;
	color: var(--N); 
	justify-content: center;
	text-align: center;
} 
	 
    /* =========================
       LCD DEMO (scoped)
    ========================= */
    .lcdDemo{
		background-color:white;
      width:100%;
      margin:00vh 0 0 0;
      padding:0;
      overflow-x:clip; 
      position:relative; 
    }
    .lcdDemo .scrollStage{
      width:100%;
      height:200vh;  /* mantiene tu “timeline” */ 
      position:relative;
    }
    .lcdDemo #wrap3d{
      position:sticky; /*  sticky cuando inicia LCD */
      top:0; left:0;
      width:100%;
      height:100vh;
      max-width:2000px;
      margin:0 auto;
    }
    .lcdDemo .depTitle{
      position:absolute;
      inset:0;
      width:100%;
      min-height:100vh;
      overflow:hidden;
      display:grid;
      place-items:center;
      z-index:4;
      pointer-events:none;
    }
    #depH2{
      padding-top:5%;
      display:flex;
      flex-direction:column;
      justify-content:space-around;
      align-content:center;
      align-items:center;
      gap:14px;
      pointer-events:auto; /* link clicable */
    }
    #depH2 h5{
      margin:0;
      font-size:33px;
      font-weight:700;
      letter-spacing:.4px;
      background:linear-gradient(45deg,var(--LA),var(--A));
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
		text-align: center;
    }
    #depH2 img{
      width:min(360px,60vw);
      height:auto;
      border-radius:21px;
      display:block;
    }
    #depH2 a{
      margin-top:8px;
      display:inline-block;
      padding:14px 36px;
      background:linear-gradient(var(--A),var(--LA));
      color:#222;
      text-decoration:none;
      font-weight:700;
      border-radius:5px;
      box-shadow:0 10px 40px rgba(0,0,0,.35);
		transition: 1s ease all;
    }
	#depH2 a:hover{  
  background:linear-gradient(45rad,var(--G),var(--G) );
  color:var(--N); 
		transform: scale(1.05);
	}

    .lcdDemo .hud{
      display:none; /* ponlo en block si quieres debug */
      position:fixed;
      right:16px;
      bottom:16px;
      background:rgba(0,0,0,.55);
      padding:8px 10px;
      border-radius:8px;
      color:#b7ffef;
      z-index:10;
      user-select:none;
      opacity:0;
      transition:opacity .25s ease;
      pointer-events:none;
    }
    body.lcdDemo-on .lcdDemo .hud{ opacity:1; }
.lcdDemo{
  background:#fff;
  width:100%;
  margin:0;
  padding:0;
  position:relative;
  overflow-x:clip; /* ok */
}
.lcdDemo .scrollStage{
  position:relative;
  height:200vh;
  width:100%;
}
.lcdDemo #wrap3d{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:100vh;
  max-width:2000px;
  margin:0 auto;
  overflow:visible; /* ✅ evita “corte” del display */
}
.lcdDemo #wrap3d.isFixed{
  position:fixed;
  top:0; left:0;
  right:0;
  margin:0 auto;
  z-index:5;
}
.lcdDemo #wrap3d.isAfter{
  position:absolute;
  top:auto;
  bottom:0; /* se “ancla” al final del stage */
}
.lcdDemo #wrap3d canvas{
  width:100% !important;
  height:100% !important;
  display:block;
}
	   

/**********************************************************************************************
	0.x os
**********************************************************************************************/	  
	.os{ 
	background: #fff;  
		  width:100%; 
	position:relative; 
	z-index: 1; 
	display: flex;
		flex-direction:column;
	justify-content: space-around;
	align-content: center; 
}
   	.osGrid{
		display: flex;
		flex-direction: column; 
		width: 80%;
		position: relative;
		margin: 0 10%;
		background-color:var(--A);
		padding: 2% 5%;
	}
	.osGrid h2{ 
	color:var(--N);  
		margin:8px auto auto 8px;
		font-weight: 600;
}  
	.osBox{
	display: grid;
    grid-template-columns: repeat(6, 1fr);
	gap:13px;
	}
	.osBoxItem{
	margin:0%;
	width: auto;
	height: auto;
	display: flex;
	flex-direction: column; 
	justify-content: space-around;
	align-content: center;
	padding: 13px;  
	border-radius: 21px;  
    /* ✨ BLUR REAL SIN BORRAR CONTENIDO */ 
}
	.osBoxItem img{
	width: 89px;
	height:89px; 
	margin:  auto; 
		padding:21px;

} 
	.osBoxItem p{ 
	color: white; 
	justify-content: center;
	text-align: center;
		margin-top:8px;
		font-weight: 600;
}  
	.osGrid2{
		display: flex;
		flex-direction: column; 
		width: 80%;
		position: relative;
		margin: 0 10%;
		background-color:white;
	}
	.osContent{
	display:flex;
	}
	.osText{
	width:100%;
	height:250px;
	padding: 0 2%;
	display:flex;
	flex-direction: column;
	justify-content:space-around; 
}
	.osText h3{	
      margin:auto auto 0 0;
      font-size:33px;
      font-weight:700;
	color:var(--N);
}
	.osText p{	
      margin:21px auto 0 0;
      font-size:17px;
      font-weight:200;
}
	.osText a{	
      margin:21px auto auto 0;  
      display:inline-block;
      padding:14px 36px;
      background:linear-gradient(45grad,var(--A),var(--LA));
      color:#fff;
      text-decoration:none;
      font-weight:700;
      border-radius:5px;
      box-shadow:0 10px 40px rgba(0,0,0,.35);transition: 1s ease all;
    }
	.osText a:hover{  
  background:linear-gradient(45rad,var(--G),var(--G) );
  color:var(--N); 
		transform: scale(1.05);
	}
	.osContent img{
	width:50%;
	height:400px;
	}
	.osSlogan{
		background:linear-gradient(#000,var(--N));
	width:100%;
	height:150px;
	padding: 0 2%;
	display:flex;
	flex-direction: column;
	justify-content:space-around; 
	}
	.osSlogan p{	
      margin:auto auto auto 0;
      font-size:33px;
		width: 70%;
      font-weight:700;
	color:white;
}


/**********************************************************************************************
	0.x factory
**********************************************************************************************/	 
	.factory{ 
	background: var(--N); 
		height: auto;
		  width:100%; 
	position:relative; 
	z-index: 1; 
	display: flex;
	justify-content: space-around;
	align-content: center; 
		padding: 0% 0 0 0;
}
	.factoryGrid{ 
		height: 100%;
		display: flex;
		flex-direction: column;
		width: 80%;
		position: relative;
		margin: 0 10%; 
	}
	.factoryBox{
		margin: 0;
		height: 60vh; 
		display: flex; 
	}
	.factoryBox img{
	width: 40%;
	height:80%; 
	margin:  auto ; 
		padding:0px 0px;

} 
	.factoryItem{
		margin: auto auto auto 0;
		display: flex;
		flex-direction: column; 
		width: 50%;
	}	
	.factoryBoxTitle{ 
		width: 90%;
		position: relative;   
		font-weight: 700; 
		color: white;  
		font-size: 33px;
	}
	.factoryBoxTitle span{
	
	background: linear-gradient(45grad,var(--A),var(--LA));
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent; 
	}
	.factoryItem p{ 
		width: 90%;
		color: white;  
	font-family: "Mulish", sans-serif;
		font-weight: 200; 
	margin: 13px auto auto 0;
	}
	.factoryItem a{ 
	position: relative;
      margin:21px auto auto 0;  
      display:inline-block;
      padding:14px 36px;
      background:linear-gradient(45grad,var(--A),var(--LA));
      color:#fff;
      text-decoration:none;
      font-weight:700;
      border-radius:5px;
      box-shadow:0 10px 40px rgba(0,0,0,.35);transition: 1s ease all;
    }
	.factoryItem a:hover{  
  background:linear-gradient(45rad,var(--G),var(--G) );
  color:var(--N); 
		transform: scale(1.05);
	}
	.factoryApp{
		height: auto;
	display: grid;
    grid-template-columns: repeat(3, 1fr);
	gap:0px 13px;
		margin: 0;
	}
	.factoryBoxItem{
	margin:0%;
	width: auto;
	height: auto;
	display: flex;
	flex-direction: column; 
	justify-content: space-around;
	align-content: center;
	padding:  13px;  
	border-radius: 21px;  
    /* ✨ BLUR REAL SIN BORRAR CONTENIDO */ 
}
	.factoryBoxItem img{
	width: 89px;
	height:89px; 
	margin:  auto auto 0 auto; 
		padding: 2px;

}  
	.factoryText{
		margin: 0 auto auto auto;
	   height:150px; 	
		display:flex;
			flex-direction:column;
	}
	.factoryBoxItemTitle{ 
	color: #fff; 
	justify-content: center;
	text-align: center;
		font-weight: 600;
	margin:  0 auto 0 auto; 
} 
	.factoryBoxItemp{ 
	margin: 0 auto auto  auto ;
	color: #fff; 
	justify-content: center;
	text-align: center;
} 

/**********************************************************************************************
	0.x support
**********************************************************************************************/	 
	.support{ 
	background: #fff; 
		height: auto;
		  width:100%; 
	position:relative; 
	z-index: 1; 
	display: flex;
	justify-content: space-around;
	align-content: center; 
		padding: 0% 0 0 0;
}
	.supportGrid{ 
		height: 100%;
		display: flex;
		flex-direction: column;
		width: 80%;
		position: relative;
		margin: 0 10%; 
	}
	.supportBox{
		margin: 0;
		height: 60vh; 
		display: flex; 
	}
	.supportBox img{
	width: 40%;
	height:80%; 
	margin:  auto ; 
		padding:0px 0px;

} 
	.supportItem{
		margin: auto auto auto 0;
		display: flex;
		flex-direction: column; 
		width: 50%;
	}	
	.supportBoxTitle{ 
		width: 90%;
		position: relative;   
		font-weight: 700; 
		color: var(--N);  
		font-size: 33px;
	}
	.supportBoxTitle span{
	
	background: linear-gradient(45grad,var(--A),var(--LA));
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent; 
	}
	.supportItem p{ 
		width: 90%;
		color: var(--N);  
	font-family: "Mulish", sans-serif;
		font-weight: 200; 
	margin: 13px auto auto 0;
	}
	.supportItem a{ 
	position: relative;
      margin:21px auto auto 0;  
      display:inline-block;
      padding:14px 36px;
      background:linear-gradient(45grad,var(--A),var(--LA));
      color:#fff;
      text-decoration:none;
      font-weight:700;
      border-radius:5px;
      box-shadow:0 10px 40px rgba(0,0,0,.35);transition: 1s ease all;
    }
	.supportItem a:hover{  
  background:linear-gradient(45rad,var(--G),var(--G) );
  color:var(--N); 
		transform: scale(1.05);
	}
	.supportApp{
		height: auto;
	display: grid;
    grid-template-columns: repeat(3, 1fr);
	gap:0px 13px;
		margin: 0;
	}
	.App{
		height: auto; 
		margin: 0; 
		display: flex;
		flex-direction: column; 
		position: relative; 
	}
    .App img{
      width:300px;
      height:auto;
      border-radius:21px;
      display:block;
		margin: 21px auto 13px 0;
    }
	.supportBoxItem{
	margin:0%;
	width: auto;
	height: auto;
	display: flex;
	flex-direction: column; 
	justify-content: space-around;
	align-content: center;
	padding:  13px;  
	border-radius: 21px;  
    /* ✨ BLUR REAL SIN BORRAR CONTENIDO */ 
}
	.supportBoxItem img{
	width: 89px;
	height:89px; 
	margin:  auto auto 0 auto; 
		padding: 2px;

}  
	.supportText{
		margin: 0 auto auto auto;
	   height:150px; 	
		display:flex;
			flex-direction:column;
	}
	.supportBoxItemTitle{ 
	color: var(--N); 
	justify-content: center;
	text-align: center;
		font-weight: 600;
	margin:  0 auto 0 auto; 
} 
	.supportBoxItemp{ 
	margin: 0 auto auto  auto ;
	color: var(--N); 
	justify-content: center;
	text-align: center;
} 


/** guia ******************************************/
.guia{ 
	background: var(--N); 
		height: auto;
		  width:100%; 
	position:relative; 
	z-index: 1; 
	display: flex;
	justify-content: space-around;
	align-content: center; 
		padding: 0% 0 0 0;
}
    .OpsWrapFdw{max-width:1100px;margin:0 auto;}
    .OpsHeadFdw{
      display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;justify-content:space-between;
      margin-bottom:16px;
    }
    .OpsTitleFdw{ 
		color:var(--A);
		font-size: 33px;
		margin-top: 21px;
    }
    .OpsSubtitleFdw{ 
		color:white;
		font-size: 17px;
		margin-top: 21px;
    }
    .OpsControlsFdw{display:flex;gap:10px;align-items:center;margin-left:auto}
    .OpsBtnFdw{
		width: 55px;
		height: 55px;
      border:1px solid var(--line);
      background:linear-gradient(45rad,#fff,#fff );
      color:var(--N);
      padding:10px;
      border-radius:55px;
      cursor:pointer;
      transition:all 1s ease;
      user-select:none;
		box-shadow: 0 0 21px 3px #aaa;
		font-weight: 700;
    }
    .OpsBtnFdw:hover{  
  background:linear-gradient(45rad,var(--G),var(--G) );
  color:var(--N); 
		transform: scale(1.05);
	}

    .OpsBtnFdw:active{transform:scale(.98)}
    .OpsBtnFdw:disabled{opacity:.45;cursor:not-allowed}
    .OpsCarouselFdw{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:#fff;
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .OpsViewportFdw{
      overflow:hidden;
      touch-action: pan-y;
      cursor: grab;
    }
    .OpsViewportFdw.isDraggingFdw{cursor:grabbing}
    .OpsTrackFdw{
      display:flex;
      width:100%;
      transform: translate3d(0,0,0);
      will-change: transform;
      transition: transform .35s ease;  
    }
    .OpsCardFdw{ 
      min-width:100%;
      padding:0px;
      display:grid;
      grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
      gap:18px;
      align-items:stretch; 
    }
    .OpsPaneFdw{
		width: 90%;
		height: 90%;
		margin: auto;
      background:var(--pane); 
      border-radius:18px;
      padding:18px;
      min-width:0;
    }
    .OpsKickerFdw{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
    .OpsPillFdw{
      display:inline-flex;align-items:center;gap:8px;
      padding:8px 12px;border-radius:999px;border:1px solid var(--line);
      background:rgba(0,0,0,.02);
      font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.2px;
      color:var(--N);
      white-space:normal;max-width:100%;
    }
    .OpsDotFdw{
      width:9px;height:9px;border-radius:999px;
      background:white;
      box-shadow:0 0 0 6px  var(--A);
      flex:0 0 auto;
    }
    .OpsH3Fdw{
      margin:6px 0 8px;
      font-size:27px;
      line-height:1.15;
      letter-spacing:-.2px;
		color:#666;
    }
    .OpsPFdw{margin:0;color:var(--N);;line-height:1.65;font-size:14.5px}
    .OpsVisualFdw{
		width: 90%;
		height: 90%;
		margin: auto;
		object-fit: cover;
		position: relative;
		top: 0;
		left: 0;
		z-index: 2;
      border-radius:18px; 
      overflow:hidden;
      background: 
        linear-gradient(180deg, rgba(255,255,255,.95), rgba(0,0,0,1));
		background-size: 100% 100%;
      min-height:240px; 
		 
    }
    .OpsVisualFdwImg{
		width: 100%;
		height: 100%;
		object-fit: cover;
		position: relative;
		top: 0;
		left: 0;
		z-index: 0;
		background-size: 100% 100%;
	} 
.OpsCardFdw:nth-child(1) .OpsVisualFdwImg{
		background-image: url("../size.jpg");
}
.OpsCardFdw:nth-child(2) .OpsVisualFdwImg{
		background-image: url("../hdmi.jpg");
}
.OpsCardFdw:nth-child(3) .OpsVisualFdwImg{
		background-image: url("../image.jpg")
}
.OpsCardFdw:nth-child(4) .OpsVisualFdwImg{
		background-image: url("../taller.jpg");
}
.OpsCardFdw:nth-child(5) .OpsVisualFdwImg{
		background-image: url("../bg1.jpg");
}
    .OpsBadgeFdw{
      position:absolute;
	  	top: 0%;
		left: 0%;
		width: 100%; 
      background:rgba(255,255,255,.78);
      padding:12px 14px; 
    }
    .tFdw{font-weight:950;letter-spacing:-.2px}
    .sFdw{margin-top:6px;color:#666;;font-size:13px;line-height:1.45}
    .OpsChipsFdw{
      position:absolute; inset:auto 14px 14px 14px;
      display:flex;flex-wrap:wrap;gap:10px;
    }
    .OpsChipFdw{
      border:1px solid var(--line);
      background:rgba(255,255,255,.72);
      padding:10px 12px;border-radius:14px;
      font-size:13px;line-height:1.25;
      max-width:100%;
    }
    .OpsChipFdw strong{display:block;font-size:12px;opacity:.85;margin-bottom:4px;text-transform:uppercase;letter-spacing:.2px;}
    .OpsChipFdw span{color:#666}
    .OpsNavFdw{
      display:flex;gap:8px;justify-content:center;align-items:center;
      padding:14px 16px;border-top:1px solid var(--line);
      background:rgba(0,0,0,.02);
    }
    .OpsDotBtnFdw{
      width:10px;height:10px;border-radius:999px;
      border:1px solid rgba(0,0,0,.22);
      background:rgba(0,0,0,.10);
      cursor:pointer;
      transition: transform .12s ease, background .2s ease;
    }
    .OpsDotBtnFdw[aria-current="true"]{
      background:linear-gradient(180deg,var(--accent),var(--accent2));
      border-color:rgba(0,0,0,.10);
      transform:scale(1.15);
    }



/* ================= FAQ acordieon ================= */
.faq{ 
	background:white; 
		height: auto;
		  width:100%; 
	position:relative; 
	z-index: 1; 
	display: flex;
	justify-content: space-around;
	align-content: center; 
		padding: 0% 0 0 0;
}
 .sectionFdx{ padding: clamp(44px, 6vw, 86px) 16px; }
    .wrapFdx{ max-width: 920px; margin: 0 auto; }
    .headerFdx{ margin-bottom: 14px; }
    .kickerFdx{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding: 8px 12px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(0,0,0,.02);
      font-weight: 900;
      font-size: 12px;
      letter-spacing: .25px;
      text-transform: uppercase;
      color: rgba(0,0,0,.78);
    }
    .kickerFdx .dotFdx{
      width:10px;height:10px;border-radius:999px;
      background: linear-gradient(180deg, var(--accent), var(--accent2));
      box-shadow: 0 0 0 6px rgba(31,111,255,.10);
      flex: 0 0 auto;
    }
    .h2Fdx{
      margin: 10px 0 8px;
      font-size: clamp(26px, 3.2vw, 42px);
      line-height: 1.1;
      letter-spacing: -.3px;
    }
    .subFdx{
      margin:0;
      color: var(--muted);
      line-height: 1.65;
      font-size: 15.5px;
      max-width: 70ch;
    }
    .cardFdx{
      margin-top: 18px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
      background: #fff;
    }
    /* ===== ITEM ===== */
    .faq-itemFdx{
      border-top: 1px solid var(--line);
      background:#fff;
    }
    .faq-itemFdx:first-child{ border-top: 0; }
    .faq-qFdx{
      width:100%;
      appearance:none;
      border:0;
      background:transparent;
      cursor:pointer;
      padding: 16px 16px;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      text-align:left;
      user-select:none;
      -webkit-tap-highlight-color: transparent;
      transition: background .2s ease;
    }
    .faq-qFdx:hover{ background: rgba(0,0,0,.02); }
    .faq-qFdx:focus-visible{
      outline: 3px solid rgba(31,111,255,.25);
      outline-offset: -3px;
    }
    .q-leftFdx{
      display:flex;
      gap:12px;
      align-items:flex-start;
      min-width:0;
    }
    .badgeFdx{
      width:34px;height:34px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(31,111,255,.10), rgba(124,58,237,.08));
      display:grid;
      place-items:center;
      flex: 0 0 auto;
      font-weight: 950;
      color: rgba(0,0,0,.78);
      font-size: 12px;
    }
    .qtextFdx{
      min-width:0;
      font-weight: 900;
      font-size: 15px;
      line-height: 1.35;
      overflow-wrap:anywhere;
      margin-top: 2px;
    }
    .chevFdx{
      margin-top: 8px;
      width: 10px;
      height: 10px;
      border-right: 2px solid rgba(0,0,0,.72);
      border-bottom: 2px solid rgba(0,0,0,.72);
      transform: rotate(45deg);
      transition: transform var(--dur) var(--ease);
      flex: 0 0 auto;
    }
    .faq-itemFdx.is-openFdx .chevFdx{
      transform: rotate(-135deg);
      margin-top: 12px;
    }
    /* ===== RESPUESTA ===== */
    .faq-aFdx{
      height: 0px;
      overflow: hidden;
      background: var(--soft);
      border-top: 1px solid rgba(0,0,0,.08);
      transition: height var(--dur) var(--ease);
      will-change: height;
 
    }
    .faq-a-innerFdx{
      padding: 14px 16px 16px 62px;
      color: var(--N);
      line-height: 1.7;
      font-size: 14.5px;

      opacity: 0;
      transform: translateY(-6px);
      transition: opacity 260ms var(--ease), transform 420ms var(--ease);
    }
    .faq-itemFdx.is-openFdx .faq-a-innerFdx{
      opacity: 1;
      transform: translateY(0);
      transition-delay: 70ms;
    }
    @media (max-width: 480px){
      .faq-qFdx{ padding: 14px 14px; }
      .badgeFdx{ width:32px; height:32px; }
      .faq-a-innerFdx{ padding-left: 56px; }
    }
 


	
/* ================= slider prodcuts ================= */
.heroSliderSDX{
	background-color: #ddd;
  position:relative;
  height:100vh;
  display:grid;
  padding:24px 10%;
}

.heroTitle{ 
		width: 90%;
		position: relative;   
		font-weight: 700; 
		color: #666;  
		font-size: 33px;
	margin: 21px 0;
	}
.heroTitle span{
	
	background: linear-gradient(45grad,var(--A),var(--LA));
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent; 
	}
.frameSDX{
	margin: auto;
  width:min(1080px, 96vw);
  height:min(640px, 80vh);
  border-radius:34px;
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 28px 70px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.65);
  overflow:hidden;
  position:relative;
} 
.topbarSDX{
  position:absolute;
  top:18px; left:18px; right:18px;
  height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px 12px 18px;
  border-radius:999px;
  background:rgba(255,255,255,.74);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
  z-index:1;
} 
.productWrapSDX{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.productPillSDX{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  background:var(--G);
  color:var(--N);
  font-weight:400;
  letter-spacing:.01em;
  white-space:nowrap;
}
.productNameSDX{
  font-weight:600; 
  color:var(--N);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:min(520px, 52vw);
}
.subProductSDX{ 
  opacity:.7;
  margin-top:-2px;
}
.ctaSDX{
  border:0;
  padding:16px 26px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--LA),var(--A));
  color:var(--N);
  font-weight:650;
  cursor:pointer;
  white-space:nowrap;
} 
.slidesSDX{
  position:absolute;
  inset:0; 
	z-index: 0; 
} 
.slideSDX{ 
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:18px;
  padding:15% 10%;
  opacity:0;
  pointer-events:none;
  transform:translateX(14px);
  transition:opacity .35s ease, transform .55s cubic-bezier(.77,0,.18,1);
} 
.slideSDX.is-activeSDX{
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
  z-index:2;
	 
} 
.previewSDX{
  position:relative;
  border-radius:28px;
  overflow:hidden;
  background:var(--LA);
  box-shadow:0 18px 45px rgba(0,0,0,.18);
} 
.previewSDX .imgSDX{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.04);
} 
.slideSDX.is-enteringSDX .previewSDX .imgSDX{
  clip-path: inset(0 100% 0 0);
  animation: wipeInSDX 1.15s cubic-bezier(.77,0,.18,1) forwards;
}
@keyframes wipeInSDX{
  to{ clip-path: inset(0 0 0 0); }
}
.infoCardSDX{
	
  align-self:end;
  border-radius:28px;
  padding:28px 26px;
  background:linear-gradient(180deg, var(--N), var(--N));
  color:#fff;
  min-height:230px;
}
.infoCardSDX h3{ 
  margin-bottom:12px;
  font-weight:500;
}
.infoCardSDX p{ 
  line-height:1.5;
  opacity:.75;
  max-width:42ch;
} 
.dotsSDX{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  display:flex;
  gap:12px;
  z-index:0;
} 
.dotSDX{
  width:44px;
  height:8px;
  border-radius:999px;
  background:rgba(0,0,0,.18);
  overflow:hidden;
  cursor:pointer;
} 
.dotSDX > i{
  display:block;
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--A),var(--LA));
  border-radius:999px;
} 
.navSDX{
  position:absolute;
  left:18px;
  right:18px;
  top:50%;
  transform:translateY(-32px);
  display:flex;
  justify-content:space-between;
  z-index:1;
  pointer-events:none;
} 
.navBtnSDX{
  width:54px;
  height:54px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background:var(--LA);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
  display:grid;
  place-items:center;
  cursor:pointer;
  pointer-events:auto;
  transition:transform .18s ease, background .18s ease;
} 
.navBtnSDX:active{ transform:scale(.97); }
.navBtnSDX svg{ width:18px; height:18px; }

/* LCD Wall**/
.lcdWalls{ 
	width: 100%;
	height: 100vh;
	position:relative; 
	z-index: 0;
	background-size:  100% 100%;
  background-position: left top;
  background-repeat:no-repeat;
  background-attachment:fixed; /* EFECTO PARALLAX */ 
	display: flex;
	justify-content: space-around;
	align-content: center;
	background-image: url("../bg4.jpg");
}	
.lcdWallsWrap{
	width: 80%;
  margin:auto  auto;
  padding:0px 10% 0px 10%;
  max-width:2000px;
  max-height:1500px;
	display: flex; 
	justify-content: space-around;
	align-content: center;
}
.lcdWallsVideo img{
	width: 100%;
	height: 300px; 
}
.lcdWallsVideo video{ 
		width: 100%;
		height: 300px;
		object-fit: cover;
		position: relative;
		top: 0;
		left: 0;
		z-index: 0;
}
.lcdWallsContent{
	width: 50%;
	display: flex;
	flex-direction: column;
} 
.lcdWallsContenth4{
	color: #fff;width: 90%; 
	backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
		padding: 8px;
		margin:auto auto 0 0; 
} 
.lcdWallsContenth4 span{
	
	background: linear-gradient(45grad,var(--LA),var(--A));
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent; 
	}
	.lcdWallsContent p{
		width: 90%;
		color: white; 
		margin:0 auto auto 0; 
		font-weight: 200;
	background-color: rgba(0,0,0,0.50);
	backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
		padding: 8px;
	}
	.lcdWallsBtns{ 
		display: flex;
	} 

	.btn1 {	
      margin:21px auto auto 0;  
      display:inline-block;
      padding:14px 36px;
      background:linear-gradient(45grad,var(--A),var(--LA));
      color:#fff;
      text-decoration:none;
      font-weight:700;
      border-radius:5px;
      box-shadow:0 10px 40px rgba(0,0,0,.35);transition: 1s ease all;
    }
	.btn1 :hover{  
  background:linear-gradient(45rad,var(--G),var(--G) );
  color:var(--N); 
		transform: scale(1.05);
	}





/* ================= FOOTER ================= */
.footer{  
	margin-top: 0px;
  background:#fff;
	height: 100vh;	
  max-height:2000px;
	display: grid;
}
.footer-wrap{ 
  margin:10vh auto  0 auto;
  padding:60px 10% 60px 10%;
  max-width:2000px;
  max-height:1500px;
	display: flex;
	flex-direction: column;
}
.footer-grid{
	margin: auto auto 0  auto;
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap:40px;
}
@media (max-width:1000px){
.footer{   
	height: auto;
}
  .footer-grid{
    grid-template-columns:1fr 1fr;
    gap:30px;
  }
}
@media (max-width:600px){
  .footer-grid{
    grid-template-columns:1fr;
  }
}
/* ===== Brand Column ===== */
.footer-brand img{
	width: 138px;
	height: 20px;
  margin:0 0 14px; 
}
.footer-brand p{
  margin:0 0 20px;
  color:var(--N);
  line-height:1.6;
  font-size:14.5px;
}
.footer-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;  
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.3px;
}
.footer-dot{
  width:9px;
  height:9px;
  border-radius:999px; 
  box-shadow:0 0 0 6px #1a1a1a;
}
/* ===== Links Columns ===== */
.footer-col h4{
  margin:0 0 16px;
  font-size:18px;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--N);
	font-weight: 700;
}
.footer-col ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}
.footer-col a{
  text-decoration:none;
  color:var(--N);
  font-size:14px;
  transition:color .2s ease;
}
.footer-col a:hover{
  color:var(--LA);
}
/* ===== Bottom ===== */
.footer-bottom{
	position: relative;
	margin: auto auto 0  auto;
  padding-top:25px;
  border-top:1px solid var(--DG);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
	width: 100%;
}
.footer-copy{
  font-size:13px;
  color:var(--N);
}
.footer-social{
  display:flex;
  gap:14px;
}
.footer-social a{
  width:38px;
  height:38px;
  border-radius:12px; 
  display:grid;
  place-items:center;
  background:var(--N);
  transition:all .2s ease;
}
.footer-social a:hover{
  background:linear-gradient(180deg,var(--LA),var(--A));
  border-color:transparent;
}
.footer-social svg{
  width:18px;
  height:18px;
  stroke:var(--LA);
  transition:.2s;
}
.footer-social a:hover svg{
  stroke:#fff;
}

    /* ================= FLOAT BUTTON ================= */
.display-float{
  position:fixed;
  bottom:00px;
  left:0px;
  z-index:99;
	text-decoration: none; 
	  transition: 1s ease all;  
	width: auto;
	height :100px;
	display: flex; 
	transform: translateX(-2299px);
}
.display-float.active{
	transform: translateX(0px);
}
.a{
	text-decoration: none;
	margin: auto;
	color: #333;
	background-color: white;
	border-radius: 21px;padding: 8px 21px;
}
.phone-float{
  position:relative;
	text-decoration: none; 
	  transition: 1s ease all; 
	border-radius: 55px;
 border: 5px solid #fff;
	background-color: #000;
	animation: infinite phoneA 5s;
	width: 50px;
	height :50px;
	display: flex;
	margin: auto;
}
.phone-float img{
	margin:auto;
	width: 30px;
	height :30px;
	  transition: 0.5s ease all;
	animation: infinite imgPhoneA 5s;
}

@keyframes phoneA {
	0%{ 
		box-shadow: 0 0 21px 3px #aaa;
	} 
	60%{    
		box-shadow: 0 0 51px 1px #333;
	} 
	 
	
	100%{ 
		box-shadow: 0 0 21px 3px #aaa;
	}

	
}
@keyframes imgPhoneA {
	0%{ 
		transform: scale(1);
	} 
	60%{     
		transform: scale(1.5);
	} 
	 
	
	100%{ 
		transform: scale(1); 
	}

	
}
    /* ================= FLOAT BUTTON ================= */
    .whatsapp-float{ 
      position:fixed;
      bottom:25px;
      right:25px;
      z-index:99;
    }
    .whatsapp-btn{
      width:50px;height:50px;border-radius:50%;
      background:rgba(37,211,102,.15);
      backdrop-filter:blur(12px);
      border:1px solid rgba(255,255,255,.25);
      display:flex;justify-content:center;align-items:center;
      cursor:pointer;position:relative;
      transition:.35s ease;
    }
    .whatsapp-btn:hover{ transform:scale(1.1); }
    .whatsapp-btn img{ width:50px;height:50px; }
    .badge0{
      position:absolute;top:-6px;right:-6px;
      background:#ff3b3b;color:#fff;font-size:12px;font-weight:600;
      border-radius:50%;width:22px;height:22px;
      display:flex;justify-content:center;align-items:center;
    }

    /* ================= CHAT WINDOW ================= */
    .chat{
      position:fixed;
      bottom:110px;
      right:28px;
      width:340px;
      height:440px;
      backdrop-filter:blur(16px);
      border-radius:18px;
      box-shadow:0 20px 60px rgba(0,0,0,.35);
      display:flex;
      flex-direction:column;

      opacity:0;
      transform:translateY(20px);
      pointer-events:none;
      transition:.35s cubic-bezier(.4,.2,.2,1);
      z-index:1001; /* ✅ arriba del overlay */
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.18);
    }
    .chat.active{
      opacity:1;
      transform:translateY(0);
      pointer-events:auto;
    }
    /* HEADER */
    .chat-header{
      padding:16px;
      border-bottom:1px solid rgba(255,255,255,.18);
      font-weight:700;
      background:linear-gradient(180deg,#25D366,#0e7a3a);
      border-radius:18px 18px 0 0;
      color:#fff;
      user-select:none;
    }
    /* MESSAGES */
    .chat-body{
      flex:1;
      padding:14px;
      overflow-y:auto;
      display:flex;
      flex-direction:column;
      gap:10px;
      background: rgba(255,255,255,.08);
    }
    /* MESSAGE BUBBLES */
    .msg{
      max-width:75%;
      padding:10px 14px;
      border-radius:14px;
      font-size:14px;
      line-height:1.4;
      color:#222;
      background:#ffffff;
      border:1px solid rgba(0,0,0,.08);
    }
    .bot{ align-self:flex-start; background:#ffffff; }
    .user{
      align-self:flex-end;
      background:#eafff1;
      border-color: rgba(14,122,58,.20);
    }
    /* INPUT */
    .chat-input{
      display:flex;
      padding:10px;
      gap:8px;
      border-top:1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.10);
      border-radius: 0 0 18px 18px;
    }
    .chat-input input{
      flex:1;
      border:1px solid rgba(0,0,0,.12);
      color:#000;
      padding:10px 14px;
      border-radius:12px;
      outline:none;
      background:#fff;
    }
    .chat-input button{
      background:linear-gradient(180deg,#25D366,#0e7a3a);
      border:none;
      border-radius:12px;
      padding:0 16px;
      font-weight:800;
      cursor:pointer;
      color:white;
      white-space:nowrap;
    }
    /* SCROLL BAR */
    .chat-body::-webkit-scrollbar{ width:6px; }
    .chat-body::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.35); border-radius:6px; }
    /* ================= OVERLAY (solo cuando está abierto) ================= */
    .overlaywa{
      position:fixed;
      inset:0;
      background:transparent;
      opacity:0;
      pointer-events:none;
      transition: opacity .2s ease;
      z-index:1000; /* ✅ debajo del chat, arriba del resto */
    }
    .overlaywa.active{
      opacity:1;
      pointer-events:auto; /* ✅ ahora sí captura click fuera */
    }
    @media (max-width:420px){
      .chat{
        right:16px;
        left:16px;
        width:auto;
        bottom:100px;
      }
      .whatsapp-float{ right:16px; }
    }


/* ================= Aanimaton ================= */
.section { 
  position: relative;
  overflow: hidden;
	
}
/* TEXTO */
.title  {   
	opacity: 0;
	 transform:  translateY(1933px);
}
/* visible */
.title.show  { 
	animation: textA forwards 1.5s;
} 
.img {  
  transition: all ease 1s;    
	 transform:  translateY(-933px);
}
/* visible */
.img.show { 
	animation: imgA forwards 1s;
}
@keyframes imgA {
	0%{
	 transform:  translateY(-933px);
	}
	50%{
  transform:  translateY(-200px);
	} 
	
	100%{
  transform:  translateY(0px);
	}

	
}
@keyframes textA {
	0%{
	opacity: 1; 
	 transform:  translateY(1933px);
	} 
	60%{    
	} 
	
	80%{ 
	opacity: 0.2;    
	} 
	
	100%{
	opacity: 1;  
	 transform:  translateY(0px);
	}

	
} 

    /* ===== MENU TOGGLE ===== */
    .menu-toggle{
		background-color: var(--A);
      width:40px;
      height:40px; 
      border-radius: 14px;
      cursor:pointer;
      display:none;
      place-items:center; 
      transition: transform .15s ease, filter .2s ease, border-color .2s ease;
    
      z-index:9999; /* siempre encima del panel */
      -webkit-tap-highlight-color: transparent;
		position: relative;	
		margin: auto 2% auto auto ;;	
		border: 0px solid #000;
    }
    .menu-toggle:hover{ filter: brightness(1.06); border-color: rgba(255,255,255,.22); }
    .menu-toggle:active{ transform: scale(.96); }
.icon{ position:relative; width:22px; height:18px; outline: 0px solid red;
	border: 0px solid red;}

    .bar{
      position:absolute; left:0;
      height:2px; background: var(--line);
      border-radius:999px;
      transform-origin:left center;
      transition: transform .34s ease, opacity .22s ease, width .34s ease;
    }
    .bar.top{ top:0; width:22px; }
    .bar.mid{ top:8px; width:11px; }
    .bar.bot{ bottom:0; width:22px; }

    .xbar{
      position:absolute;
      top:50%; left:50%;
      width:22px; height:2px;
      background: var(--line);
      border-radius:999px;
      opacity:0;
      transform-origin:center;
      transition: opacity .22s ease, transform .34s ease;
    }
    .xbar.G{ transform: translate(-50%,-50%) rotate(45deg) scaleX(.6); height:2px;}
    .xbar.b{ transform: translate(-50%,-50%) rotate(-45deg) scaleX(.6);height:2px; }

    .menu-toggle.is-open .bar{
      width:22px;
      transform: scaleX(0);
      opacity:0;
    }
    .menu-toggle.is-open .bar.top{ transition-delay: 0s; }
    .menu-toggle.is-open .bar.mid{ transition-delay: .05s; }
    .menu-toggle.is-open .bar.bot{ transition-delay: .10s; }

    .menu-toggle.is-open .xbar{
      opacity:1;
      transform: translate(-50%,-50%) rotate(var(--rot)) scaleX(1);
      transition-delay: var(--xDelay);
    }
    .menu-toggle.is-open .xbar.G{ --rot:45deg; height:2px;}
    .menu-toggle.is-open .xbar.b{ --rot:-45deg; height:2px;}

    /* ===== OVERLAY ===== */
    .overlay{
      position:fixed;
      inset:0;
      background: rgba(0,0,0,.55);
      opacity:0;
      pointer-events:none;
      transition: opacity 320ms ease;
      z-index:0;
    }
    .overlay.show{ opacity:1; pointer-events:auto; }

    /* ===== PANEL FULLSCREEN (SIDEBAR) =====
        FIX REAL:
       - Ya NO dependemos de agregar/quitar una sola clase "open" que puede ser removida por
         un transitionend viejo.
       - Usamos 2 estados:
         1) .is-visible => controla opacity/pointer-events y el contenido
         2) .is-expanded => controla el tamaño fullscreen
    */
    .panel{
      position:fixed;
	background-color:var(--N);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px); 
      box-shadow: var(--shadow);
      z-index:1;
      overflow:hidden;

      opacity:0;
      pointer-events:none;

      transition:all 260ms ease;
      will-change: top,left,width,height,border-radius,opacity;
    }

    .panel.is-visible{
      opacity:1;
      pointer-events:auto;
    }

    /* contenido SOLO depende de is-visible (no de timers) */
    .panel-inner{
      height:100%;
      display:flex;
      flex-direction:column;
      padding: 8px 18px 18px;
      gap:14px;

      opacity:0;
      transform: translateY(18px);
      transition: opacity 420ms ease, transform 420ms ease;
      will-change: opacity, transform;
    }
    .panel.is-visible .panel-inner{
      opacity:1;
      transform: translateY(0);
      transition-delay: 200ms;
    }

    /* ===== MENU UI ===== */
    .menu-wrap{ max-width:560px; width:100%; }
.logo{ 
	width: 100px;
	height: 50px;
	margin: 0;
	margin: auto auto auto 0%;
}  
    .menu-title{
      font-size:22px;
      font-weight:900;
      margin:0 0 6px;
      letter-spacing:.2px;
      color: var(--text);
    }
    .menu-sub{
      margin:0 0 14px;
      color:var(--muted);
      font-size:13px;
      line-height:1.5;
    }
    .menu-card{
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 18px;
      overflow:hidden;
    }
    .menu-list, .submenu-list{
      list-style:none;
      padding:0;
      margin:0;
    }
    .menu-item{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:14px 14px;
      background: transparent;
      border:0;
      color: var(--text);
      cursor:pointer;
      text-align:left;
      font-weight:600;
		font-size: 21px;
      letter-spacing:.2px;
      transition: background .2s ease;
		text-decoration: none;	
    }
    .menu-item:hover{ background: rgba(255,255,255,.08); }
    .hint{
      font-size:12px;
      color: var(--muted);
      font-weight:700;
    }
    .chev{
      width:10px;height:10px;
      border-right:2px solid rgba(255,255,255,.92);
      border-bottom:2px solid rgba(255,255,255,.92);
      transform: rotate(-45deg);
      opacity:.9;
    }
    .view{
      transition: opacity 220ms ease, transform 320ms var(--ease);
      will-change: transform, opacity;
    }
    .view.hidden{
      opacity:0;
      transform: translateX(-12px);
      pointer-events:none;
      position:absolute;
      width:100%;
    }
    .view.products.hidden{ transform: translateX(12px); }
    .views{ position:relative; }

.itemIconNavMobile p{ 
	    width: 121px; 
		margin: auto 21px auto 13px;
	color: #fff;
	transition: 1s ease all;
      font-weight:600;
		font-size: 21px;
	}	
.itemIconNavMobile {
	text-decoration: none;
	display: flex; 
	margin: 13px 13px 13px 0;
	border-radius: 0px;
	padding: 8px;
	transition: 1s ease all;
	color: var(--N);
	} 
.itemIconNavvMobile:hover {
		background-color: #aaa;
	 
	}
.itemIconNavvMobile p:hover{ 
	  color: var(--A);
	}

    .submenu-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 12px 14px;
      border-bottom: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.04);
      color: var(--text);
    }
    .submenu-head .left{
      display:flex;
      align-items:center;
      gap:10px;
      font-weight:900;
      color: var(--text);
    }

    .back-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:34px;height:34px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      cursor:pointer;
      transition: transform .12s ease, background .2s ease;
      color: var(--text);
      -webkit-tap-highlight-color: transparent;
    }
    .back-btn:hover{ background: rgba(255,255,255,.10); }
    .back-btn:active{ transform: scale(.98); }

    .arrow{
      width:10px;height:10px;
      border-left:2px solid rgba(255,255,255,.92);
      border-bottom:2px solid rgba(255,255,255,.92);
      transform: rotate(45deg);
    }

.submenu-list li a{ 
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:14px 14px;
      background: transparent;
      border:0;
      color: var(--text);
      cursor:pointer;
      text-align:left;
      font-weight:600;
      transition: background .2s ease;
		font-size: 21px;
	text-decoration: none;
    }
    .submenu-list li a:hover{ background: rgba(255,255,255,.08); }


/* UX/UI ================================================================== */
/* Small Desktops and Horizontal Tablets ================================== */
@media (max-width: 1024px){
	
	.labelTitle{  
		font-weight: 700;  
		font-size: 21px; 
	}
	.labelSubtitle{ 
		font-size: 17px; 
		font-weight: 700;    
	}
	.labelText{  
		line-height: 1.5;
		font-size: 17px; 
  		font-weight: 300; 	 
	} 
   .cursor-dot {
		display: none;
    }
    .cursor-ring {
     display: none;
    }
    .cursor-dot.is-hover {
     display: none; 
    }
    .cursor-ring.is-hover { 
     display: none; 
    }
 
.headerWrapp{  
	width: 100%;  
	display: flex;
  max-width: 2000px;
	margin: 0 auto;
	
}
header.scrolled{ 
	background-color: rgba(255,255,255,0.7);
	backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); 
}
#logo{ 
	width: 100px;
	height: 50px;
	margin: 0;
	margin: auto auto auto 2%;
}  
	

  .lang-dropdown{
    position:relative;
    display:inline-block;
	  margin:   auto auto;
	  background-color: transparent;
  }
  .lang-btn{ 
	backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
	  background-color: #ccc;
	  padding: 3px 8px;
    height:40px; 
    border:1px solid var(--A);
    border-radius:999px; 
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    cursor:pointer;
    transition:.25s ease;
    box-shadow:0 4px 12px rgba(0,0,0,.05);
  } 
  .lang-btn-left{
    display:flex;
    align-items:center;
    gap:14px;
  }
  .lang-code{
    font-size:18px;
    font-weight:500;
    color:#1f1f1f;
    letter-spacing:.3px;
  }
  .lang-flag{
    width:24px;
    height:24px;
    object-fit:cover;
    border-radius:2px;
    display:block;
  }
  .lang-arrow{
    width:0;
    height:0;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-top:14px solid #2b2b2b;
    transition:transform .25s ease;
    flex-shrink:0;
  }
  .lang-dropdown.active .lang-arrow{
    transform:rotate(180deg);
  }
  .lang-menu{
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    width:200px;
    background:#ffffff;
    border:1px solid var(--A);
    border-radius:22px;
    padding:8px;
    list-style:none;
    box-shadow:0 12px 28px rgba(0,0,0,.12);
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:.25s ease;
    z-index:20;
  }
  .lang-dropdown.active .lang-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  .lang-option{
	  text-decoration: none;
    width:100%;
    border:none;
    background:transparent;
    display:flex;
    align-items:center;
    gap:14px;
    padding:12px 14px;
    border-radius:14px;
    cursor:pointer;
    text-align:left;
    transition:.2s ease;
    font-size:17px;
    color:#1f1f1f;
  }
  .lang-option:hover{
    background:#f4effd;
  }
  .lang-option span{
    font-weight:500;
  }
	
	
/* -------------------- NAVBAR Desktop Version -------------------- */ 
.nav-left{ 
		display: none;
} 

    /* ===== MENU TOGGLE  ===== */
    .menu-toggle{ 
      display:grid; 
    }	
	
    /* =========================
       HERO
    ========================= */
	  .hero{
		  height:100vh;
		  width:100%;  
	background-size:  180% 100%;
  background-position: right top; 
		  background: var(--G);
  /*background-attachment:fixed; /* EFECTO PARALLAX */ 
	display: flex;
		  flex-direction: column;
	justify-content: space-around;
	align-content: center; 
	  }   
	.sphereDemo{
		display: block;
	}
	.heroBox img{
	width: 250px;
	height: 150px;
	z-index: 99;
		margin: 3px 21px ; 
		display: block;
	}
	.heroBox{
		display: flex;
		flex-direction: column; 
		width: 96%;
		position: relative;
		margin: 0 2%;
	}
	.heroItem{
		margin: auto auto auto 0;
		display: flex;
		flex-direction: column; 
		width: 100%;
	}	 
	.hero h1{
		 color: var(--N); 
		padding: 3px 5px;
	z-index: 99;
	}
	.heroItem p{ 
		border-radius: 8px;
	z-index: 99;
		width: 90%;
		 color: var(--N);
	font-family: "Mulish", sans-serif;
		font-weight: 400; 
	margin: 0px auto auto 0;
		background-color: rgba(0,0,0,.1);
	backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
		padding: 3px 5px;
	}
	
	.heroItem a{ 
	position: relative;
	margin: 13px auto 0 21px  ;
  display:inline-block;
  padding:14px 36px;
  background:linear-gradient(45rad,var(--LA),var(--LA) );
  color:var(--N);
  text-decoration:none;
  font-weight:400;
  border-radius:5px;
		transition: 1s ease all;
	}
	 
/**********************************************************************************************
	0.x level
**********************************************************************************************/	  
 
	.levelBox{
	display: grid;
    grid-template-columns: repeat(1, 1fr);
	gap:13px;
	}
	

/**********************************************************************************************
	0.x os
**********************************************************************************************/	  
	.os{ 
	background: #fff;  
		  width:100%; 
	position:relative; 
	z-index: 1; 
	display: flex;
		flex-direction:column;
	justify-content: space-around;
	align-content: center; 
}
   	.osGrid{
		display: flex;
		flex-direction: column; 
		width: 96%;
		position: relative;
		margin: 0 2%;
		background-color:var(--A);
		padding: 2% 0%;
	}
	.osGrid h2{ 
	color:var(--N);  
		margin:8px auto auto 8px;
		font-weight: 600;
		text-align: center;
}  
	.osBox{
	display: grid;
    grid-template-columns: repeat(2, 1fr);
	gap:13px;
	} 
	.osGrid2{
		display: flex;
		flex-direction: column; 
		width: 96%;
		position: relative;
		margin: 0 2%;
		background-color:white;
	}
	.osContent{
	display:flex;
		flex-direction: column;
	}
	.osContent img{
	width:100%;
	height:300px;
	} 


/**********************************************************************************************
	0.x factory
**********************************************************************************************/	 
	 
	.factoryGrid{  
		width: 96%; 
		margin: 0 2%; 
	}
	.factoryBox{
		margin: 0;
		height: auto; 
		display: flex; 
		flex-direction: column;
	}
	.factoryBox img{
	width: 80%;
	height:80%; 
	margin:  auto ; 
		padding:0px 0px;

} 
	.factoryItem{
		margin: auto auto auto auto;
		display: flex;
		flex-direction: column; 
		width: 100%;
	}	
	.factoryBoxTitle{ 
		width: 90%;
		position: relative;   
		font-weight: 700; 
		color: white;  
		font-size: 33px;
	margin: 13px auto auto auto;
		text-align: center;
	}
	.factoryBoxTitle span{
	
	background: linear-gradient(45grad,var(--A),var(--LA));
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent; 
	}
	.factoryItem p{ 
		width: 90%;
		color: white;  
	font-family: "Mulish", sans-serif;
		font-weight: 200; 
	margin: 13px auto auto auto;
		text-align: center;
	}
	.factoryItem a{ 
	position: relative;
      margin:21px auto 21px auto;  
      display:inline-block;
      padding:14px 36px;
      background:linear-gradient(45grad,var(--A),var(--LA));
      color:#fff;
      text-decoration:none;
      font-weight:700;
      border-radius:5px;
      box-shadow:0 10px 40px rgba(0,0,0,.35);transition: 1s ease all;
    }
	.factoryItem a:hover{  
  background:linear-gradient(45rad,var(--G),var(--G) );
  color:var(--N); 
		transform: scale(1.05);
	}
	.factoryApp{
		height: auto;
	display: grid;
    grid-template-columns: repeat(1, 1fr);
	gap:0px 13px;
		margin: 0;
	}
	.factoryBoxItem{
	margin:0%;
	width: auto;
	height: auto;
	display: flex;
	flex-direction: column; 
	justify-content: space-around;
	align-content: center;
	padding:  13px;  
	border-radius: 21px;  
    /* ✨ BLUR REAL SIN BORRAR CONTENIDO */ 
}
	.factoryBoxItem img{
	width: 89px;
	height:89px; 
	margin:  auto auto auto auto; 
		padding: 2px;

}  
	.factoryText{
		margin: 0 auto auto auto;
	   height:150px; 	
		display:flex;
			flex-direction:column;
	}
	.factoryBoxItemTitle{ 
	color: #fff; 
	justify-content: center;
	text-align: center;
		font-weight: 600;
	margin:  0 auto 0 auto; 
} 
	.factoryBoxItemp{ 
	margin: 0 auto auto  auto ;
	color: #fff; 
	justify-content: center;
	text-align: center;
} 

	.App{
		height: auto; 
		margin: 0; 
		display: flex;
		flex-direction: column; 
		position: relative; 
	}
    .App img{
      width:100%;
      height:auto;
      border-radius:21px;
      display:block;
		margin: 8px auto; 
    }

	
	
	
/** guia ******************************************/
.guia{ 
	background: var(--N); 
		height: auto;
		  width:100%; 
	position:relative; 
	z-index: 1; 
	display: flex;
	justify-content: space-around;
	align-content: center; 
		padding: 0% 0 0 0;
} 
    .OpsCardFdw{ 
      min-width:100%;
      padding:0px;
      display:grid;
    grid-template-columns: repeat(1, 1fr);
      gap:18px;
      align-items:stretch; 
    } 

/**********************************************************************************************
	0.x support
**********************************************************************************************/	  
	.supportGrid{ 
		height: 100%;
		display: flex;
		flex-direction: column;
		width: 96%;
		position: relative;
		margin: 0 2%; 
	}
	.supportBox{
		margin: 0;
		height: auto; 
		display: flex; 
		flex-direction: column;
	}
	.supportBox img{
	width: 100%;
	height:300px; 
	margin:  auto ; 
		padding:0px 0px;

} 
	.supportItem{ 
		width: 100%;
	}	  
	.supportApp{
		height: auto;
	display: grid;
    grid-template-columns: repeat(1, 1fr);
	gap:0px 13px;
		margin: 0;
	}  
	
	
	
	
/* ================= slider prodcuts ================= */
.heroSliderSDX{
	background-color: #ddd;
  position:relative;
  height:auto;
  display:grid;
  padding:24px 1%;
}

.heroTitle{ 
		width: 90%;
		position: relative;   
		font-weight: 700; 
		color: #666;  
		font-size: 21px;
	margin: 21px 0;
	}
.heroTitle span{
	
	background: linear-gradient(45grad,var(--A),var(--LA));
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent; 
	}
.frameSDX{
	margin: auto;
  width:100%;
  height:100vh;
  border-radius:34px;
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 28px 70px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.65);
  overflow:hidden;
  position:relative;
} 
.topbarSDX{
  position:absolute;
  top:18px; left:18px; right:18px;
  height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px 12px 18px;
  border-radius:999px;
  background:rgba(255,255,255,.74);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
  z-index:1;
} 
.productWrapSDX{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.productPillSDX{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  background:var(--G);
  color:var(--N);
  font-weight:400;
  letter-spacing:.01em;
  white-space:nowrap;
	font-size: 8px;
}
.productNameSDX{
  font-weight:600; 
  color:var(--N);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:min(520px, 52vw);
}
.subProductSDX{ 
  opacity:.7;
  margin-top:-2px;
}
.ctaSDX{
  border:0;
  padding:16px 26px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--LA),var(--A));
  color:var(--N);
  font-weight:650;
  cursor:pointer;
  white-space:nowrap;
} 
.slidesSDX{
  position:absolute;
  inset:0; 
	z-index: 0; 
} 
.slideSDX{ 
  position:absolute;
  inset:0;
  display:flex;
	flex-direction: column;
  /*grid-template-columns:1fr 1fr;*/
  gap:18px;
  padding:15% 10%;
  opacity:0;
  pointer-events:none;
  transform:translateX(14px);
  transition:opacity .35s ease, transform .55s cubic-bezier(.77,0,.18,1);
} 
.slideSDX.is-activeSDX{
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
  z-index:2;
	 
} 
.previewSDX{
	margin-top: 10vh;
	height: 70vh;
	width: 100%;
  position:relative;
  border-radius:28px;
  overflow:hidden;
  background:#ddd;
  box-shadow:0 18px 45px rgba(0,0,0,.18);
} 
.previewSDX .imgSDX{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.04);
} 
.slideSDX.is-enteringSDX .previewSDX .imgSDX{
  clip-path: inset(0 100% 0 0);
  animation: wipeInSDX 1.15s cubic-bezier(.77,0,.18,1) forwards;
} 
.infoCardSDX{
	height: 50vh;
	width: 100%;
  align-self:end;
  border-radius:28px;
  padding:28px 26px;
  background:linear-gradient(180deg, var(--N), var(--N));
  color:#fff;
  min-height:230px;
}
.infoCardSDX h3{ 
  margin-bottom:12px;
  font-weight:500;
}
.infoCardSDX p{ 
  line-height:1.5;
  opacity:.75;
  max-width:42ch;
} 
.dotsSDX{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  display:flex;
  gap:12px;
  z-index:0;
} 
.dotSDX{
  width:44px;
  height:8px;
  border-radius:999px;
  background:rgba(0,0,0,.18);
  overflow:hidden;
  cursor:pointer;
} 
.dotSDX > i{
  display:block;
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--A),var(--LA));
  border-radius:999px;
} 
.navSDX{
  position:absolute;
  left:0px;
  right:0px;
  top:50%;
  transform:translateX(-350px);
  display:flex;
  justify-content:space-between;
  z-index:1;
  pointer-events:none; 
  border:0px solid rgba(0,0,0,.08);  
} 
.navBtnSDX{ 
	background-color: var(--LA);
  width:39px;
  height:39px;
  border-radius:999px;
  border:0px solid rgba(0,0,0,.08); 
  backdrop-filter: blur(0px);
  box-shadow: 0 10px 22px rgba(0,0,0,.14);
  display:grid;
  place-items:center;
  cursor:pointer;
  pointer-events:auto;
  transition:transform .18s ease, background .18s ease;
  transform:translateX(350px);
} 
.navBtnSDX:active{ transform:scale(.97); }
.navBtnSDX svg{ width:18px; height:18px;  color: var(--N);}

/* LCD Wall**/
.lcdWalls{ 
	width: 100%;
	height: 100vh;
	position:relative; 
	z-index: 0;
	background-size:  200% 100%;
  background-position: left top;
  background-repeat:no-repeat;
  background-attachment:fixed; /* EFECTO PARALLAX */ 
	display: flex;
	justify-content: space-around;
	align-content: center;
	background-image: url("../bg4.jpg");
}	
.lcdWallsWrap{
	width: 96%;
  margin:auto  auto;
  padding:0px 2% ;
  max-width:2000px;
  max-height:1500px;
	display: flex; 
	flex-direction: column;
	justify-content: space-around;
	align-content: center;
}
.lcdWallsVideo img{
	width: 100%;
	height: 300px; 
}
.lcdWallsVideo video{ 
		width: 100%;
		height: 300px;
		object-fit: cover;
		position: relative;
		top: 0;
		left: 0;
		z-index: 0;
}
.lcdWallsContent{
	width: 100%;
	display: flex;
	flex-direction: column;
} 
.lcdWallsContenth4{
	color: #fff;width: 90%; 
	backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
		padding: 8px;
		margin:auto auto 0 0; 
} 
.lcdWallsContenth4 span{
	
	background: linear-gradient(45grad,var(--LA),var(--A));
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent; 
	}
	.lcdWallsContent p{
		width: 90%;
		color: white; 
		margin:0 auto auto 0; 
		font-weight: 200;
	background-color: rgba(0,0,0,0.50);
	backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
		padding: 8px;
	}
	.lcdWallsBtns{ 
		display: flex;
	} 

	.btn1 {	
      margin:21px auto 21px 0;  
      display:inline-block;
      padding:14px 36px;
      background:linear-gradient(45grad,var(--A),var(--LA));
      color:#fff;
      text-decoration:none;
      font-weight:700;
      border-radius:5px;
      box-shadow:0 10px 40px rgba(0,0,0,.35);transition: 1s ease all;
    }
	.btn1 :hover{  
  background:linear-gradient(45rad,var(--G),var(--G) );
  color:var(--N); 
		transform: scale(1.05);
	}
	
	
	
	
	
}



/* UX/UI ================================================================== */
/* Vertical Tablets and Smartphones ================================== */
@media (max-width: 768px){
	
}