@font-face {
    font-family: 'Borna-medium';
    src: url(./fonts/Borna/borna-medium-webfont.woff2) format('woff2'), /* Modern Browsers */
        url(./fonts/Borna/borna-medium-webfont.woff) format('woff'); /* Older Browsers */
    /* Optionally, you can specify font-weight and font-style */
    font-weight: 500;
    font-style: medium;
  }  
  
  @font-face {
  font-family: 'Borna-regular';
  src: url(./fonts/Borna/borna-regular-webfont.woff2) format('woff2'), /* Modern Browsers */
        url(./fonts/Borna/borna-regular-webfont.woff) format('woff'); /* Older Browsers */
  /* Optionally, you can specify font-weight and font-style */
  font-weight: 500;
  font-style: medium;
  }
  
  @font-face {
  font-family: 'Sentient-italic';
  src: url(./fonts/Sentient/Sentient-Italic.woff2) format('woff2'), /* Modern Browsers */
        url(./fonts/Sentient/Sentient-Italic.woff) format('woff'); /* Older Browsers */
  /* Optionally, you can specify font-weight and font-style */
  font-weight: 400;
  font-style: italic;
  }
  
  @font-face {
    font-family: 'Sentient';
    src: url(./fonts/Sentient/Sentient-Regular.woff2) format('woff2'), /* Modern Browsers */
            url(./fonts/Sentient/Sentient-Regular.woff) format('woff'); /* Older Browsers */
    /* Optionally, you can specify font-weight and font-style */
    font-weight: 400;
    font-style: regular;
    }

    @font-face {
        font-family: 'Sentient-LightItalic';
        src: url(/fonts/Sentient/Sentient-LightItalic.woff2) format('woff2'), /* Modern Browsers */
                url(/fonts/Sentient/Sentient-LightItalic.woff) format('woff'); /* Older Browsers */
        /* Optionally, you can specify font-weight and font-style */
        font-weight: regular;
        font-style: regular;
        }
  


/* NAVBAR */

.navbar{
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    justify-content: space-between;
    width: 100vw;
    background-color: #F9F9F9;
    padding-top: 0px;
    padding-bottom: 0px;
    position: fixed;
    top: 0;
    z-index: 1000;
    
}

.barraMenu{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100vw;
    align-items: center;
}

.itemsNav{
    font-family: 'Borna-medium', sans-serif;
    display: flex;
    flex-direction: row;
    gap: 40px;
    font-size: 12px;
  }

.nav-link:hover{
    color: #172BE0;
}

.nav-link{
    font-family: 'Borna-medium', sans-serif;
}

/* FOOTER */

.footer{
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    justify-content: space-between;
    width: 100vw;
    background-color: #F9F9F9;
    padding-top: 5px;
    padding-bottom: 5px;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1000;

}

.barraFooter{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100vw;
    align-items: center;
}

.itemsFooter, .DesktopLink, .emailMe {
    font-family: 'Borna-medium', sans-serif;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    font-size: 11px;
    text-decoration: none;
    color: #1E1E1E;
}

.emailMe:hover{
    color: #FE5B00;
}

.DesktopLink:hover{
    color: #FE5B00;
}

.todoContenido{
    /* background-color: #ffffff; */
    display: flex;
    flex-direction: column;
    overflow: auto;
  
    align-items: center;
    margin-bottom: 40px;

    
}

.WIP{
  scale: 0.8;
}

.explanation{
  font-family: 'Borna-medium', sans-serif;
  font-size: small;
  width: 35vw;
  text-align: center;
  color: #172BE0;
  line-height: 120%;
  margin-bottom: 70px;
  
}

.escritorio {
  margin-top: 100px;
  position: relative;
  width: 60vw; /* Ajusta al tamaño de tu composición */
  height: 580px; /*Ajusta según lo necesites */
  /* background-color: #F9F9F9; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.fondo{
  position: absolute;
  width: 70vw;
  opacity: 30%;
}

.objeto {
  position: absolute;
  transition: transform 0.2s ease-in-out;
}

.objeto:hover {
  transform: rotate(-5deg);
  cursor: pointer;
}

/* Posiciona cada objeto manualmente */
.obj1 { top: 26px; left: 50px; width: 162px; }
.obj2 { top: 40px; left: 220px; width: 240px; }
.obj3 { top: 100px; left: 220px; width: 235px; }
.obj4 { top: 0px; left: 460px; width: 180px; }
.obj5 { top: 170px; left: 470px; width: 120px; }
.obj6 { top: 180px; left: 605px; width: 150px; }
.obj7 { top: 0px; left: 655px; width: 180px; }
.obj8 { top: 270px; left: 10px; width: 210px; }
.obj9 { top: 270px; left: 220px; width: 210px; }
.obj10 { top: 400px; left: 220px; width: 320px; }
.obj11 { top: 273px; left: 440px; width: 48px; }
.obj12 { top: 285px; left: 490px; width: 55px; }
.obj13 { top: 330px; left: 555px; width: 145px; }
.obj14 { top: 300px; left: 700px; width: 180px; }


.textodiv{
 justify-content: center;
 display: flex;
 flex-direction: column;
 align-items: center;
}

.titulo{
  font-family: 'Borna-medium', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 22px;
  color: #172BE0;
  text-align: center;
  width: 30vw;
  line-height: 100%;
}

.text1{
  font-family: 'Sentient', serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 13px;
  color: #363636;
  text-align: center;
  width: 34vw;
  margin-bottom: 10px;
  line-height: 120%;
  opacity: 70%;
 

}

.text2{
  font-family: 'Sentient', serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 10px;
  color: #363636;
  text-align: center;
  width: 2vw;
  line-height: 120%;

}

.popup {
  display: none;  /* Oculto al inicio */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: rgba(23, 43, 224, 0.3); */
  justify-content: center;
  align-items: center;
  opacity: 0; /* Comienza invisible */
  transform: scale(0.95); /* Ligeramente reducido */
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.popup-content {
  background: #F9F9F9;
  padding: 20px;
  padding-right: 50px;
  border-radius: 10px;
  text-align: center;
  position: relative;
  width: 350px;
  opacity: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.popup-content-carrusel {
  background: #F9F9F9;
  padding: 10px;
  padding-right: 10px;
  border-radius: 10px;
  padding-top: 20px;
  text-align: center;
  position: relative;
  width: 500px;
  opacity: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}


/* Animación cuando el popup se muestra */
.popup.show {
  display: flex;
  opacity: 1;
}

/* Animación cuando el popup se oculta */
.popup.hide {
  opacity: 0;
}

.textoPopUp{
  margin-bottom: 0px;
  font-family: 'Borna-medium', sans-serif;
  font-size: 13px;
  color: #363636;
  text-align: left;

}

.linkPop{
  text-decoration: none;
  cursor: pointer;
  color: #FE5B00;

}

/* Botón de cerrar */
.close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
  color: #8085FD;
}

.textoPopUpCarrusel{
  width: 80%;
  margin-bottom: 0px;
  font-family: 'Borna-medium', sans-serif;
  font-size: 13px;
  color: #363636;
  text-align: left;
}

/* Estilos del carrusel */
.carousel {
  position: relative;
  overflow: hidden;
  margin: 20px auto;
  border-radius: 5px;
  margin-bottom: 0px;
  margin-top: 10px;
}

.carousel-container {
  /* display: flex; */
  transition: transform 0.5s ease-in-out;
  align-items: center ;
  justify-content: center;
  
  
}

.carousel-item { 
  width: 100%; /* Se ajusta al tamaño del contenedor */
  /* max-width: 500px;  /* Limita el ancho máximo */
  /* width: 400px;  */
  /*height: 400px;  Mantiene una altura fija */
  object-fit: contain; /* Mantiene la proporción original sin recortar */
  display: none; /* Oculta todas las imágenes menos la activa */
  border-radius: 5px; 
}

.carousel-item.active {
  display: block; /* Solo la imagen activa es visible */
  margin: 0 auto; /* Centra la imagen */
}
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0); /* Fondo transparente por defecto */
  color: white;
  border: none;
  width: 30px; /* Tamaño del botón circular */
  height: 30px;
  padding: 0;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%; /* Hace el botón circular */
  transition: background 0.3s ease, color 0.3s ease; /* Suaviza la transición */
}

.prev { left: 10px; }
.next { right: 10px; }

.carousel-btn:hover {
  background-color: #172BE0; /* Azul al hacer hover */
  color: white; /* Asegura que las flechas sigan blancas */
}

/* Ajusta las posiciones para cada objeto */

/* .objeto:hover {
  transform: rotate(-5deg);
} */

@keyframes tilt {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(3deg); }
    100% { transform: rotate(-3deg); }
}
.objeto:hover {
    animation: tilt 0.5s ease-in-out infinite alternate;
}



@media (min-width: 10px) and (max-width: 375px){
     /* NAV */
     .itemsNav {
      display: none;
      flex-direction: column;
      position: absolute;
      top: 40px;
      right: 0;
      background-color: #F9F9F9; /* Optional: background color */
      width: 100%;
      text-align: center;
      gap: 20px;
      padding: 10px 0;
  }
  
  .menu-toggle {
      display: block;
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
  }
  
  .barraMenu {
      width: 100%;
      justify-content: space-between;
  }
  
  .emailMe{
  display: none;
  }
  
  .navbar{
  padding-left: 0px;
  padding-right: 10px;
  }
  
  .itemsNav{
  font-size: 12px;
  }
  
  .EstrellaGraciaLogo{
  scale: 1;
  padding-left: 20px;
  }
  
  .footer{
  padding-left: 20px;
  padding-right: 20px;
  }
  
  .DesktopLink{
  font-size: 12px;
  }

  /* TEXTO DE ARRIBA */
  
  .todoContenido{
    margin-top: 40px;

  }

  .textodiv{
    order: 1;
    padding-top: 40px;
    width: 100%;
    padding: 30px;
  }

  .titulo{
    width: 60vw;
    line-height: 100%;
    margin-bottom: 10px;
  }

  .text1{
    width: 60vw;
    font-size: 11px;
  }

  .escritorio{
    order: 2;
  }

  /*  ilustraciones y muerte */

  .escritorio {
    position: relative;
    margin-top: 0px;
    width: 95vw; /* Ajusta al tamaño de tu composición */
    height: 1500px; /*Ajusta según lo necesites */
    /* background-color: #F9F9F9; */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .fondo{
    position: absolute;
    width: 110vw;
    opacity: 30%;
    margin-top: 50px;
  }
  
  .objeto {
    position: absolute;
    transition: none;
  }

  
  /* Posiciona cada objeto manualmente */
  .obj1 { top: 10px; left: 30px; width: 145px; }
  .obj6 { top: 3px; left: 200px; width: 130px; } 

  .obj2 { top: 220px; left: 110px; width: 220px; transform: rotate(270deg);}
  .obj12 { top: 135px; left: 260px; width: 50px; }

  .obj4 { top: 220px; left: 35px; width: 140px; }
  .obj11 { top: 350px; left: 50px; width: 48px; }
  .obj9 { top: 350px; left: 120px; width: 190px; }

  .obj10 { top: 460px; left: 30px; width: 280px; }

  .obj13 { top: 610px; left: 40px; width: 130px; }
  .obj14 { top: 610px; left: 175px; width: 150px; }

  .obj8 { top: 830px; left: 20px; width: 180px; }
  .obj5 { top: 840px; left: 215px; width: 110px; }

  .obj3 { top: 990px; left: 185px; width: 205px; transform: rotate(90deg);}
  .obj7 { top: 1080px; left: 50px; width: 150px; }
  
  /* pop up y carrusel */

.popup {
  display: none;  /* Oculto al inicio */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(255, 255, 255, 0.3);
  justify-content: center;
  align-items: center;
  opacity: 0; /* Comienza invisible */
  transform: scale(0.95); /* Ligeramente reducido */
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.popup-content {
  background: #F9F9F9;
  padding: 20px;
  padding-right: 50px;
  border-radius: 10px;
  text-align: center;
  position: relative;
  width: 300px;
  opacity: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* ← aquí la sombra */
}

.popup-content-carrusel {
  background: #F9F9F9;
  padding: 10px;
  padding-right: 10px;
  border-radius: 10px;
  padding-top: 20px;
  text-align: center;
  position: relative;
  width: 300px;
  opacity: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* ← también aquí si quieres */

}


/* Animación cuando el popup se muestra */
.popup.show {
  display: flex;
  opacity: 1;
}

/* Animación cuando el popup se oculta */
.popup.hide {
  opacity: 0;
}

.textoPopUp{
  margin-bottom: 0px;
  font-family: 'Borna-medium', sans-serif;
  font-size: 11.5px;
  color: #363636;
  text-align: left;

}

.linkPop{
  text-decoration: none;
  cursor: pointer;
  color: #FE5B00;

}

/* Botón de cerrar */
.close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
  color: #8085FD;
}

.textoPopUpCarrusel{
  width: 80%;
  margin-bottom: 0px;
  font-family: 'Borna-medium', sans-serif;
  font-size: 13px;
  color: #363636;
  text-align: left;
}

/* Estilos del carrusel */
.carousel {
  position: relative;
  overflow: hidden;
  margin: 20px auto;
  border-radius: 5px;
  margin-bottom: 0px;
  margin-top: 10px;
}

.carousel-container {
  /* display: flex; */
  transition: transform 0.5s ease-in-out;
  align-items: center ;
  justify-content: center;
  
  
}

.carousel-item { 
  width: 100%; /* Se ajusta al tamaño del contenedor */
  /* max-width: 500px;  /* Limita el ancho máximo */
  /* width: 400px;  */
  /*height: 400px;  Mantiene una altura fija */
  object-fit: contain; /* Mantiene la proporción original sin recortar */
  display: none; /* Oculta todas las imágenes menos la activa */
  border-radius: 5px; 
}

.carousel-item.active {
  display: block; /* Solo la imagen activa es visible */
  margin: 0 auto; /* Centra la imagen */
}
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0); /* Fondo transparente por defecto */
  color: white;
  border: none;
  width: 30px; /* Tamaño del botón circular */
  height: 30px;
  padding: 0;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%; /* Hace el botón circular */
  /* transition: background 0.3s ease, color 0.3s ease; Suaviza la transición */
}

.prev { left: 10px; }
.next { right: 10px; }

.carousel-btn:hover {
  background-color: #172BE0; 
  color: white; /* Asegura que las flechas sigan blancas */
}
  


 
 



}

@media (min-width: 376px) and (max-width: 576px){
  /* Estilos para dispositivos móviles pequeños */
   
     /* NAV */
     .itemsNav {
       display: none;
       flex-direction: column;
       position: absolute;
       top: 40px;
       right: 0;
       background-color: #F9F9F9; /* Optional: background color */
       width: 100%;
       text-align: center;
       gap: 20px;
       padding: 10px 0;
   }
 
   .menu-toggle {
       display: block;
       background: none;
       border: none;
       font-size: 24px;
       cursor: pointer;
   }
 
   .barraMenu {
       width: 100%;
       justify-content: space-between;
   }
 
 .emailMe{
   display: none;
 }
 
 .navbar{
   padding-left: 0px;
   padding-right: 5px;
 }
 
 .itemsNav{
   font-size: 12px;
 }
 
 .EstrellaGraciaLogo{
   scale: 1;
   padding-left: 20px;
 }
 
 .footer{
   padding-left: 20px;
   padding-right: 20px;
 }
 
 .DesktopLink{
   font-size: 12px;
 }
 

 /* TEXTO DE ARRIBA */
  
 .todoContenido{
  margin-top: 40px;

}

.textodiv{
  order: 1;
  padding-top: 40px;
  width: 100%;
  padding: 30px;
}

.titulo{
  width: 60vw;
  line-height: 100%;
  margin-bottom: 10px;
}

.text1{
  width: 60vw;
  font-size: 11px;
}

.escritorio{
  order: 2;
}

/*  ilustraciones y muerte */

.escritorio {
  position: relative;
  margin-top: 0px;
  width: 90vw; /* Ajusta al tamaño de tu composición */
  height: 1500px; /*Ajusta según lo necesites */
  /* background-color: #F9F9F9; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.fondo{
  position: absolute;
  width: 110vw;
  opacity: 30%;
  margin-top: 50px;
}

.objeto {
  position: absolute;
  transition: none;
}


/* Posiciona cada objeto manualmente */
.obj1 { top: 10px; left: 30px; width: 145px; }
.obj6 { top: 3px; left: 200px; width: 130px; } 

.obj2 { top: 220px; left: 110px; width: 220px; transform: rotate(270deg);}
.obj12 { top: 135px; left: 260px; width: 50px; }

.obj4 { top: 220px; left: 35px; width: 140px; }
.obj11 { top: 350px; left: 50px; width: 48px; }
.obj9 { top: 350px; left: 120px; width: 190px; }

.obj10 { top: 460px; left: 30px; width: 280px; }

.obj13 { top: 610px; left: 40px; width: 130px; }
.obj14 { top: 610px; left: 175px; width: 150px; }

.obj8 { top: 830px; left: 20px; width: 180px; }
.obj5 { top: 840px; left: 215px; width: 110px; }

.obj3 { top: 990px; left: 185px; width: 205px; transform: rotate(90deg);}
.obj7 { top: 1080px; left: 50px; width: 150px; }

/* pop up y carrusel */

.popup {
display: none;  /* Oculto al inicio */
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(255, 255, 255, 0.3);
justify-content: center;
align-items: center;
opacity: 0; /* Comienza invisible */
transform: scale(0.95); /* Ligeramente reducido */
transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.popup-content {
background: #F9F9F9;
padding: 20px;
padding-right: 50px;
border-radius: 10px;
text-align: center;
position: relative;
width: 300px;
opacity: 100%;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* ← aquí la sombra */
}

.popup-content-carrusel {
background: #F9F9F9;
padding: 10px;
padding-right: 10px;
border-radius: 10px;
padding-top: 20px;
text-align: center;
position: relative;
width: 300px;
opacity: 100%;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* ← también aquí si quieres */

}


/* Animación cuando el popup se muestra */
.popup.show {
display: flex;
opacity: 1;
}

/* Animación cuando el popup se oculta */
.popup.hide {
opacity: 0;
}

.textoPopUp{
margin-bottom: 0px;
font-family: 'Borna-medium', sans-serif;
font-size: 11.5px;
color: #363636;
text-align: left;

}

.linkPop{
text-decoration: none;
cursor: pointer;
color: #FE5B00;

}

/* Botón de cerrar */
.close {
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
cursor: pointer;
color: #8085FD;
}

.textoPopUpCarrusel{
width: 80%;
margin-bottom: 0px;
font-family: 'Borna-medium', sans-serif;
font-size: 13px;
color: #363636;
text-align: left;
}

/* Estilos del carrusel */
.carousel {
position: relative;
overflow: hidden;
margin: 20px auto;
border-radius: 5px;
margin-bottom: 0px;
margin-top: 10px;
}

.carousel-container {
/* display: flex; */
transition: transform 0.5s ease-in-out;
align-items: center ;
justify-content: center;


}

.carousel-item { 
width: 100%; /* Se ajusta al tamaño del contenedor */
/* max-width: 500px;  /* Limita el ancho máximo */
/* width: 400px;  */
/*height: 400px;  Mantiene una altura fija */
object-fit: contain; /* Mantiene la proporción original sin recortar */
display: none; /* Oculta todas las imágenes menos la activa */
border-radius: 5px; 
}

.carousel-item.active {
display: block; /* Solo la imagen activa es visible */
margin: 0 auto; /* Centra la imagen */
}
.carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0); /* Fondo transparente por defecto */
color: white;
border: none;
width: 30px; /* Tamaño del botón circular */
height: 30px;
padding: 0;
cursor: pointer;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%; /* Hace el botón circular */
/* transition: background 0.3s ease, color 0.3s ease; Suaviza la transición */
}

.prev { left: 10px; }
.next { right: 10px; }

.carousel-btn:hover {
background-color: #172BE0; 
color: white; /* Asegura que las flechas sigan blancas */
}
 
 
 
 
 }

@media (min-width: 577px) and (max-width: 767px){
  .menu-toggle {
      display: none;
    }

    /* Estilos para dispositivos móviles pequeños */

  /* NAV */
  .itemsNav {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 20px;
    right: 0;
    background-color: #F9F9F9; /* Optional: background color */
    width: 100%;
    text-align: center;
    gap: 20px;
    padding: 10px 0;
}

.menu-toggle {
    display: block;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

.barraMenu {
    width: 100%;
    justify-content: space-between;
}

.emailMe{
display: none;
}

.navbar{
padding-left: 0px;
padding-right: 5px;
}

.itemsNav{
font-size: 12px;
top: 40px;
}

.EstrellaGraciaLogo{
scale: 1;
padding-left: 20px;
}

.footer{
padding-left: 20px;
padding-right: 20px;
}

.DesktopLink{
font-size: 12px;
}

.emailMe{
display: none;
}

.navbar{
padding-left: 0px;
padding-right: 5px;
}

.itemsNav{
font-size: 12px;
}

  

}







/* NOS FALTA AJUSTAR A IPAD Y TABLET Y A DESKTOP GRANDE Y YA ESTAMOSSS */

@media (min-width: 768px) and (max-width: 850px) {
   /* Estilos para tabletas */

   .menu-toggle {
    display: none;
    }
  
    /* TEXTO DE ARRIBA */
    
   .todoContenido{
    margin-top: 40px;
  
  }
  
  .textodiv{
    order: 2;
    padding-top: 40px;
    width: 100%;
    padding: 30px;
  }
  
  .titulo{
    width: 50vw;
    line-height: 100%;
    margin-bottom: 10px;
  }
  
  .text1{
    width: 50vw;
    font-size: 11px;
  }
  
  .escritorio{
    order: 1;
  }
  
  .escritorio {
  position: relative;
  margin-top: 0px;
  width: 95vw;
  height: 950px;
  display: flex;
  justify-content: center;
  align-items: center;
  }

  .fondo{
    position: absolute;
    /* width: 110vw; */
    opacity: 30%;
    margin-top: 0px;
  }
  
  .objeto {
    position: absolute;
    transition: none;
  }
  
  
  .obj1 { top: 30px; left: 30px; width: 190px; }
  .obj2 { top: 100px; left: 250px; width: 240px; }
  .obj3 { top: 155px; left: 250px; width: 240px; }
  .obj4 { top: 60px; left: 540px; width: 170px; }
  .obj5 { top: 225px; left: 525px; width: 130px; }
  .obj8 { top: 380px; left: 20px; width: 210px; }
  .obj9 { top: 380px; left: 240px; width: 200px; }
  .obj10 { top: 520px; left: 250px; width: 310px; }
  .obj11 { top: 380px; left: 480px; width: 50px; }
  .obj12 { top: 390px; left: 540px; width: 60px; }
  .obj6 { top: 700px; left: 80px; width: 130px; transform: rotate(180deg); }
  .obj7 { top: 680px; left: 220px; width: 140px; }
  .obj13 { top: 685px; left: 380px; width: 150px; }
  .obj14 { top: 560px; left: 550px; width: 180px; }
  }


/* pop up y carrusel */

.popup {
  display: none;  /* Oculto al inicio */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(255, 255, 255, 0.3);
  justify-content: center;
  align-items: center;
  opacity: 0; /* Comienza invisible */
  transform: scale(0.95); /* Ligeramente reducido */
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  }
  
  .popup-content {
  background: #F9F9F9;
  padding: 20px;
  padding-right: 50px;
  border-radius: 10px;
  text-align: center;
  position: relative;
  width: 350px;
  opacity: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* ← aquí la sombra */
  }
  
  .popup-content-carrusel {
  background: #F9F9F9;
  padding: 10px;
  padding-right: 10px;
  border-radius: 10px;
  padding-top: 20px;
  text-align: center;
  position: relative;
  width: 350px;
  opacity: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* ← también aquí si quieres */
  
  }
  
  
  /* Animación cuando el popup se muestra */
  .popup.show {
  display: flex;
  opacity: 1;
  }
  
  /* Animación cuando el popup se oculta */
  .popup.hide {
  opacity: 0;
  }
  
  .textoPopUp{
  margin-bottom: 0px;
  font-family: 'Borna-medium', sans-serif;
  font-size: 13px;
  color: #363636;
  text-align: left;
  
  }
  
  .linkPop{
  text-decoration: none;
  cursor: pointer;
  color: #FE5B00;
  
  }
  
  /* Botón de cerrar */
  .close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
  color: #8085FD;
  }
  
  .textoPopUpCarrusel{
  width: 80%;
  margin-bottom: 0px;
  font-family: 'Borna-medium', sans-serif;
  font-size: 13px;
  color: #363636;
  text-align: left;
  }
  
  /* Estilos del carrusel */
  .carousel {
  position: relative;
  overflow: hidden;
  margin: 20px auto;
  border-radius: 5px;
  margin-bottom: 0px;
  margin-top: 10px;
  }
  
  .carousel-container {
  /* display: flex; */
  transition: transform 0.5s ease-in-out;
  align-items: center ;
  justify-content: center;
  
  
  }
  
  .carousel-item { 
  width: 100%; /* Se ajusta al tamaño del contenedor */
  /* max-width: 500px;  /* Limita el ancho máximo */
  /* width: 400px;  */
  /*height: 400px;  Mantiene una altura fija */
  object-fit: contain; /* Mantiene la proporción original sin recortar */
  display: none; /* Oculta todas las imágenes menos la activa */
  border-radius: 5px; 
  }
  
  .carousel-item.active {
  display: block; /* Solo la imagen activa es visible */
  margin: 0 auto; /* Centra la imagen */
  }
  .carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0); /* Fondo transparente por defecto */
  color: white;
  border: none;
  width: 30px; /* Tamaño del botón circular */
  height: 30px;
  padding: 0;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%; /* Hace el botón circular */
  /* transition: background 0.3s ease, color 0.3s ease; Suaviza la transición */
  }
  
  .prev { left: 10px; }
  .next { right: 10px; }
  
  .carousel-btn:hover {
  background-color: #172BE0; 
  color: white; /* Asegura que las flechas sigan blancas */
  }
   
  
  
  



@media (min-width: 850px) and (max-width: 1200px) { 
  /* Estilos para tabletas */

  .menu-toggle {
  display: none;
  }

  /* TEXTO DE ARRIBA */
  
 .todoContenido{
  margin-top: 40px;

}

.textodiv{
  order: 2;
  padding-top: 40px;
  width: 100%;
  padding: 30px;
}

.titulo{
  width: 50vw;
  line-height: 100%;
  margin-bottom: 10px;
}

.text1{
  width: 50vw;
  font-size: 11px;
}

.escritorio{
  order: 1;
}

/*  ilustraciones y muerte */

.escritorio {
  position: relative;
  margin-top: 0px;
  width: 90vw; /* Ajusta al tamaño de tu composición */
  height: 1100px; /*Ajusta según lo necesites */
  /* background-color: #F9F9F9; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.fondo{
  position: absolute;
  /* width: 110vw; */
  opacity: 30%;
  margin-top: 0px;
}

.objeto {
  position: absolute;
  transition: none;
}


/* Posiciona cada objeto manualmente */
.obj1 { top: 35px; left: 40px; width: 250px; }
.obj2 { top: 120px; left: 300px; width: 300px;}
.obj3 { top: 180px; left: 300px; width: 305px;}
.obj4 { top: 70px; left: 620px; width: 210px; }
.obj5 { top: 260px; left: 605px; width: 160px; }
.obj8 { top: 420px; left: 30px; width: 270px; }
.obj9 { top: 420px; left: 300px; width: 250px; }
.obj10 { top: 570px; left: 305px; width: 380px; }
.obj11 { top:410px; left: 570px; width: 60px; }
.obj12 { top: 420px; left: 640px; width: 70px; }
.obj6 { top: 780px; left: 100px; width: 160px; transform: rotate(180deg);} 
.obj7 { top: 760px; left: 280px; width: 170px; }
.obj13 { top: 760px; left: 480px; width: 180px; }
.obj14 { top: 600px; left: 670px; width: 220px; }












/* pop up y carrusel */

.popup {
display: none;  /* Oculto al inicio */
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(255, 255, 255, 0.3);
justify-content: center;
align-items: center;
opacity: 0; /* Comienza invisible */
transform: scale(0.95); /* Ligeramente reducido */
transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.popup-content {
background: #F9F9F9;
padding: 20px;
padding-right: 50px;
border-radius: 10px;
text-align: center;
position: relative;
width: 300px;
opacity: 100%;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* ← aquí la sombra */
}

.popup-content-carrusel {
background: #F9F9F9;
padding: 10px;
padding-right: 10px;
border-radius: 10px;
padding-top: 20px;
text-align: center;
position: relative;
width: 300px;
opacity: 100%;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* ← también aquí si quieres */

}


/* Animación cuando el popup se muestra */
.popup.show {
display: flex;
opacity: 1;
}

/* Animación cuando el popup se oculta */
.popup.hide {
opacity: 0;
}

.textoPopUp{
margin-bottom: 0px;
font-family: 'Borna-medium', sans-serif;
font-size: 13px;
color: #363636;
text-align: left;

}

.linkPop{
text-decoration: none;
cursor: pointer;
color: #FE5B00;

}

/* Botón de cerrar */
.close {
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
cursor: pointer;
color: #8085FD;
}

.textoPopUpCarrusel{
width: 80%;
margin-bottom: 0px;
font-family: 'Borna-medium', sans-serif;
font-size: 13px;
color: #363636;
text-align: left;
}

/* Estilos del carrusel */
.carousel {
position: relative;
overflow: hidden;
margin: 20px auto;
border-radius: 5px;
margin-bottom: 0px;
margin-top: 10px;
}

.carousel-container {
/* display: flex; */
transition: transform 0.5s ease-in-out;
align-items: center ;
justify-content: center;


}

.carousel-item { 
width: 100%; /* Se ajusta al tamaño del contenedor */
/* max-width: 500px;  /* Limita el ancho máximo */
/* width: 400px;  */
/*height: 400px;  Mantiene una altura fija */
object-fit: contain; /* Mantiene la proporción original sin recortar */
display: none; /* Oculta todas las imágenes menos la activa */
border-radius: 5px; 
}

.carousel-item.active {
display: block; /* Solo la imagen activa es visible */
margin: 0 auto; /* Centra la imagen */
}
.carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0); /* Fondo transparente por defecto */
color: white;
border: none;
width: 30px; /* Tamaño del botón circular */
height: 30px;
padding: 0;
cursor: pointer;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%; /* Hace el botón circular */
/* transition: background 0.3s ease, color 0.3s ease; Suaviza la transición */
}

.prev { left: 10px; }
.next { right: 10px; }

.carousel-btn:hover {
background-color: #172BE0; 
color: white; /* Asegura que las flechas sigan blancas */
}
 





}

@media (min-width: 1201px) {



.menu-toggle {
  display: none;

  }
}

@media (min-width: 1500px) {

  .escritorio {
    
    margin-top: 150px;
    
  }

  .menu-toggle {
    display: none;
  
    }
  }