body {
    margin: 0px;
    padding: 0px;
    border: 0px;
    justify-content: center;
    padding-left: 0%;
    background-color: #dfdddd;
    overflow-x: hidden;

    
}

.wrapper{
    position: relative;
    display: flex;
    padding: 0px;
    margin: 0px;
    border: 0px;
    transform: scale(0.9) translate(-150px);
}
.tit {    
    font-family: "Coiny", system-ui;
    font-weight: 400;
    font-style: normal;
    display: flex;
    flex-direction: column;
    width: 70%;
    z-index: 19;
    justify-content: left;
    font-size: 150%;
    margin: 0%;
    text-align: left;
    z-index: 4;
    margin-top: 3%;
    margin-left: 5%;
    right: 0%;
    color: goldenrod;
    -webkit-text-stroke: 1px black;
    text-shadow: 
    #ea4435a8 -3px 3px 2px,
     #25d365bc 3px -3px 2px,
      #ea443565 -3px 3px 8px,
       #25d3655a 3px -3px 8px;
    
    
}

.greenl, .redl {
    z-index: 4;
    display: flex;
    justify-content: center;
    align-items: center;
    img{
        width: 35%;
        opacity: 0.6;
    }
}
.greenl:hover{
background-color: #25d365;
img{
        width: 50%;
        opacity: 1;
        
    }
}
.redl:hover{
    background-color: #ea4435;
    img{
        width: 45%;
        opacity: 1;
        
    }
}

.open{
  display: flex;
  position: absolute;
  top: 50%;
  z-index: 9;
  transform: translate(100px, 500px);
  img{
  width: 80%;
  height: auto;
  
}
  
}

.mainp {
  
    position: absolute;
    top:-30px;
    z-index: -1;
    opacity: 0;
  animation: apear 5.5s ease forwards;
  padding-bottom: 0px;
  translate: (top);
}
@keyframes apear {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.frame {
    
    position: absolute;
    z-index: 1;
    
    transform: translate(-10px, 125px) scale(0.8) rotate(4.8deg);
}

.greenl {
    position: absolute;
    width: 136px;
    height: 124px;
    transform: translate(90px, 228px);   
    border-radius: 44%;
    background-color: #25d365a4;
    transition: all 0.4s ease;
    
    
}
.redl {
    position: absolute;
    width: 136px;
    height: 124px;
    transform: translate(280px, 245px);
    border-radius: 44%;
    background-color: #ea4435c5;
    transition: all 0.2s ease;
    img{
        width: 30%;
    }
}

.frame, .mainp, .greenl, .redl{
    top: -290px;
    left: 700px;
}


.hand {
   
    position: absolute;
    top: 290px;
    left: 200px;
    width: 20%;
    z-index: 3;
    margin-bottom: 0px;
    padding-bottom: 0px;
    border-bottom: 0px;
    animation: subir 2.6s ease forwards;
}
@keyframes subir {
  0% {
    opacity: 0;
    transform: translateY(180px) scale(0.3);
  }
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }
}
.misServ{
    display: none;
    top: 90%;
    position: absolute;
    justify-content: center;
    width: 140%;
    left: 40%;
    font-size: 150%;
}


.servici {
    
    position: absolute;
    left: 480px;
    top: 400px;
    z-index: 4;
    width: 10%;
    font-size: 130%;
    line-height: 170%;
    color: grey;
    -webkit-text-stroke: 1px black;
    background-color: transparent;
    border: none;
    font-weight: bold;
    font-family: "Coiny", system-ui;
    font-weight: 400;
    font-style: normal;
    animation: glow 1.5s infinite alternate;  
}

.servici:hover{
 cursor: pointer;
 color: #25d365a4;
text-shadow: 0 0 5px #25d365,
  0 0 10px #25d365,
  0 0 20px #25d365e2,
  0 0 40px #25d365d0;
 animation: none;

}
.aparecer{
    animation: apear2 3.5s ease forwards;
}
  

@keyframes apear2 {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes glow {
  /* estado normal */
  0%, 100% {
    color: gray;
    text-shadow: none;
  }

  /* se vuelve rojo (SIN glow) */
  5% {
    color: #ea4435;
    text-shadow: none;
  }

  /* mantiene rojo sin glow */
  8% {
    color: #ea4435;
    text-shadow: none;
  }

  /* ahora aparece el glow */
  12%, 18% {
    color: #ea4435;
    text-shadow: 
      0 0 20px #ea4435,
      0 0 30px #ea4435cd;
  }

  /* vuelve */
  22% {
    color: gray;
    text-shadow: none;
  }

  /* segundo ciclo */
  30% {
    color: #ea4435;
    text-shadow: none;
  }

  34%, 55% {
    color: #ea4435;
    text-shadow: 
      0 0 20px #ea4435,
      0 0 30px #ea4435e8;
  }

  /* pausa */
  60% {
    color: gray;
    text-shadow: none;
  }
}



.servicios{
     
    display: none;
    flex-direction: column;
    h1, h2 {
        font-family: "Coiny", system-ui;
        font-weight: lighter;
        font-style: normal;
        color: goldenrod;
        -webkit-text-stroke: 2.5px black;
        font-size: 160%;
    }
    p{
        font-family: "Bitcount", system-ui;
        font-weight: 400;
        font-style: normal;
    }
    font-size: 120%;
    padding: 5%;
    width: 90%;
    display: flex;
    
}

.serv1{
    display: none;
    justify-self: right;
    top: 1500px;
    left: 5%;
    right: 30%;
    position: absolute;
   font-size: 120%;
   border-bottom: 10%;
   h3{
    color: rgb(75, 56, 10);
    font-style: normal;
    font-variant: normal;
    -webkit-text-stroke: none;

   }
    
   

}

.coli{
     position: absolute;
    display: none;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 50px;
    width: 100%;
    margin: 0%;
    padding: 0%;
    border: 0%;
    top: 1200px;
    justify-self: left;
    justify-content: left;
    img{
        height: 160px;
        
        justify-self: left;
        justify-content: left;
    }

}
.misServ{
    display: none;
  justify-content: center;
  top: 950px;
  left: 30%;
  width: 300%;
  
  
  
  

}
.btnSpa {
    background-color: gray;
    font-weight: bolder;
    font-family: "Coiny", system-ui;
    font-weight: 400;
    border-radius: 5px;
}
.ocultar1 {
    display: none;
}
.mostrar1 {
  display: flex;
}



/* BOTO L*/

.lang-switch {
  position: fixed;
  top: 60px;
  right: 60px;
  z-index: 9999;
}

/* ocultar checkbox */
#langToggle {
  display: none;
}

/* contenedor */
.switch {
  position: relative;
  display: block;
  width: 90px;
  height: 40px;
  border-radius: 40px;
  background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    inset 0 0 10px rgba(0,0,0,0.6),
    0 4px 15px rgba(0,0,0,0.4);
  cursor: pointer;
  transition: 0.3s ease;
  overflow: hidden;
}

/* glow suave al hover */
.switch:hover {
  box-shadow:
    inset 0 0 10px rgba(0, 0, 0, 0.6),
    0 0 12px rgba(138, 255, 109, 0.4),
    0 4px 20px rgba(0, 0, 0, 0.6);
}

/* textos */
.text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  font-family: coiny;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.4);
  z-index: 2;
  transition: 0.3s ease;
}

.text.es {
  left: 12px;
}

.text.en {
  right: 12px;
}

/* botón deslizante */
.knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 40px;
  height: 32px;
  border-radius: 30px;
  background: linear-gradient(145deg, #25d365a4, #25d365a4);
  box-shadow:
    0 0 10px rgba(60, 212, 55, 0.6),
    0 0 20px rgba(94, 212, 55, 0.3),
    inset 0 0 5px rgba(255, 255, 255, 0.2);
  transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* estado activo */
#langToggle:checked + .switch .knob {
  transform: translateX(42px);
}

/* color activo */
#langToggle:not(:checked) + .switch .es {
  color: white;
  text-shadow: 0 0 8px rgba(255,255,255,0.6);
}

#langToggle:checked + .switch .en {
  color: white;
  text-shadow: 0 0 8px rgba(255,255,255,0.6);
}

.portfo{
  position: absolute;
  z-index: -3;
  transform: translate(750px, -200px) rotate(25deg);
  img{
  height: 500px;
  }
  }

  .porti {
    transform: translate(200px, 100px);    
    position: absolute;
    z-index: 4;
    width: 10%;
    font-size: 180%;
    line-height: 170%;
    color: grey;
    -webkit-text-stroke: 1px black;
    background-color: transparent;
    border: none;
    font-weight: bold;
    font-family: "Coiny", system-ui;
    font-weight: 400;
    font-style: normal;
    animation: glow 1.5s infinite alternate;  
}



@media (max-width: 700px) and (max-height: 900px) {

  .lang-switch {
  position: fixed;
  top: -350px;
  right: 5px;
  z-index: 9999;
}
    
    .wrapper {
        scale: 0.5;
        top: 115px;
        left: -225px;
        z-index: -1;
        
    }
     
    .servici {
        transform: translate(-65px, 58px);
    }
    .tit {
        transform: translate(15px);
        padding: 5%;
        min-width: 300px;
        margin: 5px;
        font-size: 110%;
        -webkit-text-stroke: 0.4px black;
        line-height: 160%;
        gap: 0px;
        z-index: 90;
    }
    
      .hand {
        transform: translate(2000px, 200px);
    animation: subir 2.6s ease forwards;
    }

    @keyframes subir {
    0% {
    opacity: 0;
    transform: scale(0.5) translate(-450px, 250px);
    }

    100% {
    opacity: 1;
    transform: scale(0.5) translate(-450px, 99px);
    }
        
  
    }
    .servici{
        top: 435px;
        left: 200px;
        font-size: 75%;
    }  

    .servicios{
        width: 120%;
        transform: scale(0.5);
        
        
    }
    .coli{

        transform: scale(0.9) translate(-150px, -20px);
        grid-template-columns: repeat(2, 1fr);
        font-size: 200%;
        text-align: center;
        img{
            transform: scale(1.25);
            
        }
        
    }
    .misServ{
        transform: scale(1.3);
        top: 1000px;
    }
    .serv1{
    top: 2000px;
    left: -110px;
    min-width: 80%;
    font-size: 150%;
    input{
      transform: scale(1.5) translateX(30px);
    }
    }
  
    .portfo{
      transform: translate(-110px, -60px) 
      scale(0.5) rotate(-45deg);
    }
    
    .open{
      width: 120%;
      left: -35%;
      top: 35%
    }

    .lang-switch {
  position: fixed;
  top: -285px;
  right: 60px;
  z-index: 9999;
}

 }



@media (min-width: 700px) and (max-width: 1200px)  {
 
  
    .wrapper {
        scale: 0.8;
        top: 70px;
        left: -205px;
        z-index: -1;
        
    }
    .portfo{
      transform: translate(400px, 20px) 
      scale(0.8) rotate(30deg);
    }
    .hand2{
      transform: scale(0.8) translate(-130px, -60px) ;
    }
    .coli{
      transform: scale(0.8) translate(-100px);

    }
    .serv1{
      transform: scale(0.85);
    }
    .open{
      
      left:5%;
      top:90%;
      
    }
  }