@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; 
		cursor: none;
    }
    body {
        background:var(--G);
        overflow-x: hidden;
		font-family: "Inter", sans-serif;
		transition: all ease 1s;  
    } 
    :root{ 
		--N:#1A1A1A;
	  --G:#D1D1D1; 
	  --DG:#666; 
	  --A:#009E9A; 
	  --LA:#2ED6C3;
      --LP:#7a5cff;
      --LB:#35b6ff;
    --bg:#ffffff;
    --text:#1A1A1A;
    --muted:#667085;
    --line:#EAECF0;
    --brand:#16C1C1; /* turquesa estilo OPSCREEN */
    --shadow: 0 18px 45px rgba(16, 24, 40, .08);
    --radius: 18px;
    --max: 1100px;
    --soft:#F9FAFB;
    } 
		 
/* 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
   ========================= */
.intro{
	width: 100%;
	height: 100vh;
	background-color: var(--N);
  justify-content: space-around;
  display: flex;
  align-items: center;
	position: fixed;
	top: 0;
	left: 0;
  z-index: 10000000000;
	animation: 3s forwards helloWorld;
	pointer-events: none;
}
.intro img{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50% ,-50%);
  width: 133px;
  height: 133px;   
} 
  @keyframes helloWorld{
	  0%{
		  opacity: 1;
	  } 
	   70%{
		  opacity: 1;
	  } 
	  
	   99%{
		  z-index: -22;;
	  } 
	   100%{
		  opacity: 0;
	  } 
  }

 


/* =========================
   header
   ========================= */
header {  
	backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
	 	position: fixed; /* o absolute si lo necesitas */
  background-color: var(--G);
  top: 0;
  left: 0;
  width: 100%;
	z-index: 2;
	transition: 1s ease all; 
	display: flex;
}
.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 );
  }



 
  .lcdwalls-section{
    width:100%;
    padding:80px 0; 
  }

  .lcdwalls-wrap{
    width:min(1100px, 92vw);
    margin:0 auto;
    padding:28px;
    border:1px solid #EAECF0;
    border-radius:18px;
    box-shadow:0 18px 45px rgba(16,24,40,.08);
    background:#fff;
    box-sizing:border-box;
  }

  .lcdwalls-topbar{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
  }

  .lcdwalls-brand{
    font-weight:800;
    letter-spacing:.4px;
    font-size:15px;
    color:#101828;
  }

  .lcdwalls-dot{
    width:10px;
    height:10px;
    background:#16C1C1;
    border-radius:2px;
    display:inline-block;
    transform:translateY(1px);
  }

  .lcdwalls-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:28px;
    align-items:center;
  }

  .lcdwalls-kicker{
    margin:0 0 10px;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.18em;
    color:#16C1C1;
    font-weight:800;
  }

  .lcdwalls-title{
    margin:0 0 18px;
    font-size:clamp(30px, 3.4vw, 50px);
    line-height:1.02;
    color:#101828;
    font-weight:800;
  }

  .lcdwalls-text{
    margin:0 0 14px;
    font-size:15px;
    line-height:1.7;
    color:#667085;
  }

  .lcdwalls-text strong{
    color:#101828;
  }

  .lcdwalls-points{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px 18px;
    margin-top:24px;
  }

  .lcdwalls-point{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:12px 0;
    border-top:1px solid #EAECF0;
  }

  .lcdwalls-point p{
    margin:0;
    font-size:13px;
    line-height:1.4;
    color:#344054;
    font-weight:700;
  }

  .lcdwalls-icon{
    width:12px;
    height:12px;
    border-radius:999px;
    background:transparent;
	  border: 3px solid #16C1C1;
    margin-top:4px;
    flex:0 0 12px;
  }

  .lcdwalls-cta{
    margin-top:28px;
  }

  .lcdwalls-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:180px;
    padding:14px 20px;
    border-radius:14px;
    background:var(--A);
    color:#fff;
    text-decoration:none;
    font-size:14px;
    font-weight:700;
    transition:.35s ease all;
  }

  .lcdwalls-btn:hover{
    background:#16C1C1;
    color:#101828;
  }

  .lcdwalls-right{
    width:100%;
  }

  .lcdwalls-visual{
    position:relative;
    width:100%;
    min-height:480px;
    border-radius:18px;
    overflow:hidden;
    background:#F9FAFB;
    border:1px solid #EAECF0;
  }

  .lcdwalls-visual img{
    width:100%;
    height:100%;
    min-height:480px;
    object-fit:cover;
    display:block;
  }

  .lcdwalls-overlay{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:24px;
    background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.68) 100%);
  }

  .lcdwalls-badge{
    display:inline-block;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.14);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    color:#fff;
    font-size:11px;
    font-weight:800;
    letter-spacing:.18em;
    margin-bottom:10px;
  }

  .lcdwalls-overlay p{
    margin:0;
    max-width:420px;
    font-size:14px;
    line-height:1.5;
    color:#fff;
    font-weight:500;
  }

  @media (max-width: 900px){
    .lcdwalls-grid{
      grid-template-columns:1fr;
    }

    .lcdwalls-visual,
    .lcdwalls-visual img{
      min-height:340px;
    }

    .lcdwalls-points{
      grid-template-columns:1fr;
    }
  }

  @media (max-width: 420px){
    .lcdwalls-wrap{
      padding:18px;
    }

    .lcdwalls-title{
      font-size:30px;
    }

    .lcdwalls-text{
      font-size:14px;
    }

    .lcdwalls-overlay{
      padding:18px;
    }
  }

/* ================= FOOTER ================= */
.footer{  
	margin-top: 33px;
  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,0); }
    .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: #fff;
      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: #fff;
    }
    .submenu-head .left{
      display:flex;
      align-items:center;
      gap:10px;
      font-weight:900; 
    }

    .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:8px 14px;
      background: transparent;
      border:0;
      color: #fff;
      cursor:pointer;
      text-align:left;
      font-weight:600;
      transition: background .2s ease;
		font-size: 17px;
	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; 
    }
	 

  .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;
  }
	
	
#logo{ 
	width: 100px;
	height: 50px;
	margin: 0;
	margin: auto auto auto 2%;
}  
/* -------------------- NAVBAR Desktop Version -------------------- */ 
.nav-left{ 
		display: none;
} 

    /* ===== MENU TOGGLE  ===== */
    .menu-toggle{ 
      display:grid; 
		margin: auto 2% auto auto ;
    }	
	 
	
	
	
}



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