@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;900&family=Rubik:wght@300;900&display=swap');
/*Need to create media queries para nav de secciones y banner*/


/*///La Putamaree////*/


html {
  box-sizing: border-box;
  min-height: 100vh;
  min-width: 100vw;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
  margin: 0;
  color: white;
  font-size: 20pt;
  display:flex;
  align-content: space-between;


}
h1 {
  font-family: Montserrat;
}

.aviso{
  width: 100vw;
  height: 100vh;
  display: flex;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
  pointer-events: none;
  border: none;
  background-color: rgba( 1, 1 ,1, 0);
}

.background {
  width: 100vw;
  height: 100vh;
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
  pointer-events: none;
  border: none;
}
#content {
  padding: 1em;
}

#content* {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
a {
  color: white;
}
a:visited {
  color: white;
}
a:hover {
  color: white;
}

body{

  
  display: flex;
  /* position: fixed; */

  min-height: 100vh;
  min-width: 100vw;


  left: 0;
  top: 0;
  /* overflow: hidden; */



}

label{
  display: flex;
  width: auto;
  height: auto;

}
/*
.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: -1;
    border: none;
    pointer-events: none;
}
*/



.Banner{

  height: 8vh;
  width: 100%;
  min-height: 90px;

  position:fixed;

  top: 0;
  left: 0;

  background-color: rgba( 1, 1 ,1, 0.7);

  z-index: 1000;

  mix-blend-mode: normal;

  display: flex;

  align-content: center;

  align-items: center;

  justify-content: space-between;

  
}

.navBan{
  margin-left: 2vw;
  position: relative;
  display: flex;
  align-self: center;
  font-family: "Rubik";
  font-weight: 300;
  font-size: 1.5vw;
  min-width: 280px;
  min-height: 80px;

}

.liBan{
  padding: 1vw;
  margin-right: 1vw;
  font-weight: 300;
  font-family: "Rubik";
  position: relative;
  display: flex;
  align-self: center;
  letter-spacing:  0.1rem;
  font-size: 25px;
  cursor: pointer;
  user-select: none;

}

.libantext {
  font-family: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-decoration: none;
  color: inherit;
  font-weight: 300;
  font-size: max(1.5vw, 16px);
}

#lemacontent1{
  cursor: pointer;
  
}
.slash{
  padding: 0vw;
  position: relative;
  display: flex;
  align-self: center;
  letter-spacing:  0.1rem;
  font-weight: 600;
  font-size: 50px;
  pointer-events: none;
  text-decoration: none;
  user-select: none;

}


.caseLogo{

  max-width: 180px;
  max-height: auto;

  width: auto;
  height: auto;

  min-height: auto;
  min-width: 150px;
  margin-right: 3.5vw;
  /*margin-top: 3.5vw;*/

  display: flex;


  align-content: center;
  vertical-align: center;

  align-self: flex-end;
/*
  max-width: 86vw;
  width: 80vw;
  margin-right: 0px;
  margin-top: 5vh;
  opacity:20%;
*/

}

#canvas-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
}

.GUI{ 
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  display: flex;
  flex-direction: row;
  align-items:center;
  justify-content: flex-start;
  pointer-events: none;
}

/* Make individual GUI components interactive */
.GUI>* {
  pointer-events: auto;
}


/* .caseLogo:hover {
  transform: scale(1.02);
  opacity: 100%;
} */


.logo{
  height:  80%;
  width: 80%;
  display: flex;
  float: right;
  margin:0%;
  padding-top: 0px;
  padding-bottom: 10px;
  margin-top: 0px;
  /* float: center; */  
  mix-blend-mode: normal;
  align-self: flex-end;
  position: relative;
  pointer-events: auto;
  cursor: pointer;
  z-index:  1; 
}

/*navegador*/



.front{
  position: fixed;
  flex-direction: row;
  margin-top: 12vh;
  display:flex;
  justify-content: space-between;
  align-content: space-around;
  z-index: 0;
  width: 100vw;
  height: 82vh;  
}

.lema{
  position: fixed;
  z-index: 1;
  display: flex;
  align-self: flex-end;
  float:left;
  vertical-align: bottom;
  align-content: flex-end;
  justify-content: flex-end;


  text-align: end;
  text-align-last: end; 

  height: auto;
  width: 60vw;
  height: auto;
  max-height: 70vh;
  margin-top: 12vh;
  margin-bottom: 25vh;
  
  margin-left: 5vw;
  margin-right: 30vw;
  overflow: hidden;
  border-width: 0px;
  border-color: rgba( 00, 100, 100, .0);
  margin-top: 5px;

  color: white;
  font-family: montserrat;
  font-weight: 600;
  font-size: 3rem;
  letter-spacing:  0.25rem;


  /*activar desactivar botones-no olvidar cambir color de base*/
  width: 90%;
  height: 30%;

  overflow: visible;
  mix-blend-mode: normal;

  transition: 1s width;

  display:flex;

  user-select: none;

  pointer-events: none;
}

.lema>*{
  pointer-events: auto;
}


.contactcontent,
.aboutContent {
  color: white;
  font-family: Montserrat;
  font-weight: 800;
  font-size: inherit;
  letter-spacing: inherit;
  margin: 0;
  text-align: inherit;
  
}

.aboutContent{
  font-weight: 600;
  font-size: 2.5rem;
  pointer-events: none;
}

/* Interactive rotating word for motto */
.aboutContent .rotating-word {
  font-weight: 600 !important;
  color: #bb905d !important;
  position: relative;
  display: inline-flex !important;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
  padding: 0 0.2em;
  border-radius: 4px;
  width: 12ch !important;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.aboutContent>*{
  pointer-events: auto;
}

.aboutContent .rotating-word.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;

}

.aboutContent .rotating-word.hidden {
  opacity: 0 !important;
  transform: translateY(-10px) !important;
}

.aboutContent .rotating-word:hover {
  background-color: rgba(187, 144, 93, 0.1) !important;
  transform: translateY(-2px) !important;
}

@media (prefers-reduced-motion: reduce) {
  .aboutContent .rotating-word {
    transition: none !important;
  }
  .aboutContent .rotating-word.hidden {
    transform: none !important;
  }
}


/* Contact content link styling with interactions */
.contactcontent a,
.contactcontent a:link,
.contactcontent a:visited,
.contactcontent a:active {
  color: white !important;
  font-family: Montserrat;
  font-weight: 800;
  font-size: inherit;
  letter-spacing: inherit;
  text-decoration: none !important;
  cursor: pointer;
  transition: 0.3s color ease-in-out, 0.3s transform ease-in-out;
  display: flex;
  overflow: visible;
}

.contactcontent a:hover {
  color: #000000 !important;
  transform: scale(1.05);
  text-decoration: underline !important;
}

/* .contactcontent a:visited:hover {
  color: #00d4ff;
} */

.mottoContent.aboutContent {
  color: #333333 !important;
}

.NavegadorAbs{

  position: absolute;
  height: 80vh;
  width: auto;
  display:flex;
  min-width: 250px;
  line-height: 1.;
  margin-bottom: 4vh;
  margin-top: 0vh;
  overflow: unset;
  background-color: rgba(0,0,0,0.0);
  z-index: 1;
  align-self: flex-end;
  align-content: flex-start;
  justify-content: flex-end;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
  

}

.NavegadorAbs>*{
  pointer-events: auto;
}

.NavSecciones{

  background-color: rgba(0,0,0,0);

  list-style-type: none;

  list-style-position: inside;

  align-self: flex-end;
  pointer-events: none;

}

.NavSecciones>*{
  /* pointer-events: auto; */
}





.li{ 

  /*background-color: white; ya revisado*/
  background-color: rgba( 25, 25 ,25, .0);
  box-shadow:  0px 0px 0px rgba( 50, 50, 50, 0.0);
  border-radius: 8px ;
  border-width: 0px;
  border-color: rgba( 00, 100, 100, .0);
  margin-top: 5px;
  color: rgba( 100, 100, 100, 1);
  font-family: Montserrat;
  font-weight: 300;
  font-size: 3rem;
  letter-spacing:  0.25rem;
  /*activar desactivar botones-no olvidar cambir color de base*/
  width: 100%;
  height: 50%;
  overflow: hidden;
  mix-blend-mode: normal;
  /*transition: 1s width;*/
  display:flex;
}

/* .li:hover{
  background-color: rgb(234, 20, 20);
  mix-blend-mode: difference;
  width: 100%;
  height: 100%;
} */
 
.linkdenavegacion{

  
  color:white;
  font-family: Montserrat;
  font-weight: 600;
  text-decoration: none;
  mix-blend-mode: normal;
  cursor: pointer;
  user-select: none;
  pointer-events: auto;
  
}

/* Show expand arrow on hover when hovering the whole UL item */
.NavSecciones li:hover .expand-arrow {
  opacity: 1 !important;
  color: white !important;
}

/* Back triangle hover effect - target through parent link */
.linkdenavegacion:hover .back-triangle {
  opacity: 1 !important;
  transform: rotate(180deg) scale(1.2) !important;
}

/* More specific selector for back triangle hover */
.NavSecciones .linkdenavegacion:hover .back-triangle {
  opacity: 1 !important;
  transform: rotate(180deg) scale(1.2) !important;
}

/* Even more specific - target the li hover */
.NavSecciones li:hover .back-triangle {
  opacity: 1 !important;
  transform: rotate(180deg) scale(1.2) !important;
}

/* Removed old back-triangle CSS - unified with SVG version below */

/* Sliding Menu Container */
.sliding-menu-container {
  overflow: hidden;
  position: relative;
}

/* Main Sliding Wrapper */
.menu-slider {
  display: flex;
  width: 200%;
  transform: translateX(0);
  transition: 0.4s transform ease-in-out;
}

.menu-slider.expanded {
  transform: translateX(-50%);
}

/* Main Menu UL */
.main-menu-ul {
  width: 50%;
  min-width: 250px;
}

/* Removed old emoji version - unified with SVG version below */

/* Sub Menu UL */
.sub-menu-ul {
  width: 50%;
  min-width: 250px;
  opacity: 0;
  transform: translateX(50px);
  transition: 0.4s transform ease-in-out 0.1s, 0.5s opacity ease-in-out 0.2s;
}

.sub-menu-ul.expanded {
  opacity: 1;
  transform: translateX(0);
}

/* Back Button */
.back-button {
  cursor: pointer;
}

/* Back arrow hover effect */
.back-arrow:hover {
  opacity: 1 !important;
  color: white !important;
  transform: scale(1.1) !important;
}

/*//////////////////Explain////////////////////*/

.explain{
  position: fixed;
  z-index: 1;
  display: flex;
  align-self: center;
  float:left;
  vertical-align: space-around;
  align-content: center;
  justify-content: flex-end;
  flex-direction: row;

  height: auto;
  width: 60vw;
  height: auto;
  max-height: 70vh;

  
  margin-top: 12vh;
  
  margin-left: 40vw;
  margin-right: 0.5vw;


  overflow: hidden;

  pointer-events: none;


}

.explain>*{
    pointer-events: auto;
}

/* Dynamic positioning for explain container */
.explain.visible {
  visibility: visible;
}

.explain.hidden {
  visibility: hidden;
}

/*
.explain{
  position: fixed;

  height: auto;

  width: 60vw;

  display:flex;

  min-width: 250px;

  line-height: 2.;

  margin-bottom: 4vh;

  margin-top: 10vh;

  overflow: none;

  background-color: rgba(0,0,0,0);

  z-index: 1;
  align-self:flex-start;
  align-content: flex-end;
  flex-direction: row;

}*/

.expandTgl{
  color: white;
  font-family: Montserrat;
  font-weight: 900;
  font-size: 5rem;
  letter-spacing: 0.0rem;
  background-color: rgba(1, 1, 1, 0.7);
  line-height: 0.8em;
  border-radius: 30px 0px 0px 30px;
  align-self: center;
  mix-blend-mode: normal;
  transition: 0.35s background-color;
}

/* Dynamic positioning for expandTgl - React controlled */
.expandTgl.dynamic {
  position: fixed;
  transition: 0.4s right ease-in-out, 0.3s top ease-in-out;
  z-index: 1001;
}

.expandTgl.dynamic.closed {
  right: 0vw;
}

.expandTgl.dynamic.open {
  right: 45vw;
}

.expandTgl:hover{
  background-color: rgba( 1, 1 ,1, 0.7);

}

.expandTgl .switch-label {
  box-shadow: none;
  background: none;
}

.switch-ghost {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  box-sizing:content-box;
}

.switch-input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  box-sizing:content-box;
}



.expIcon{
  padding: 0px; 
  margin: 2px;
  mix-blend-mode: screen;
  background-blend-mode: overlay;
  user-select: none;
  transition: 0.4s transform ease-in-out;
  color: white;
}

/* Dynamic rotation for expIcon - React controlled */
.expIcon.open {
  transform: rotate(-45deg);
}

.expIcon.closed {
  transform: rotate(0deg);
}
/*
.expIcon:hover{
  color:black;
}
*/
.itemInfo{
  width: 45vw;
  max-height: 70vh;
  min-height: auto;
  color: white;
  font-family: Montserrat;
  font-weight: 300;
  font-size: 1.5rem;
  letter-spacing: 0.1rem;
  overflow: hidden;
  padding: 20px;
  text-align: justify;
  background-color: rgba(1, 1, 1, 0.7);
  border-radius: 30px 0px 0px 30px;
  align-self: center;
  justify-content: flex-end;
}

/* Dynamic positioning for itemInfo - React controlled */
.itemInfo.dynamic {
  position: fixed;
  padding: 20px;
  width: 45vw;
  transition: 0.4s right ease-in-out, 0.3s height ease-in-out, 0.3s top ease-in-out;
  z-index: 1000;
  overflow: hidden;
}

.itemInfo.dynamic.closed {
  right: -45vw;
}

.itemInfo.dynamic.open {
  right: 0vw;
}

.switch-ghost:checked ~ .expIcon {

  transition: 0.4s transform right ease-in-out;
  transform:rotate(-45deg);
  
}

/*
.expIcon:hover{


  transform: scale(1.1);
}

.expIcon:target{
  transform:rotate(-45deg);
}
*/



.switch-ghost:checked ~ .itemInfo{
  width: 45vw;
  max-height: 70vh;
  color: white;
  font-family: Montserrat;
  font-weight: 300;
  font-size: 1.5rem;
  letter-spacing:  0.1rem;

  overflow: hidden;

  padding: 0px;

  padding:20px;
  

  text-align: justify;

  position: relative;

  background-color: rgba( 1, 1 ,1, 0.7);

  border-radius: 30px 0px 0px 30px ;
  align-self: flex-end;
  justify-content: flex-end;

  transition: 0.4s width ease-in-out;
  
} 


.details{
  overflow: hidden;
  text-align: justify;
}

/* Dynamic opacity for details - React controlled */
.details.dynamic {
  transition: 0.4s opacity ease-in-out;
}

.details.dynamic.visible {
  opacity: 1;
}

.details.dynamic.hidden {
  opacity: 0;
}

/* Content transition for smooth content changes */
.details.dynamic.content-changing {
  opacity: 0.3;
  transition: 0.2s opacity ease-in-out;
}
/*
.switch-input:checked ~.expIcon {
  transition: 0.4s transform ease-in-out;
  transform:rotate(-45deg);
}
*/

.secciones{
  position: relative;
  height: auto;
  width: 80vw;
  margin-top: 0;
  
  margin-left: 18vw;
  /*background: rgb(40,255,166);
  background: linear-gradient(135deg, rgba(40,255,166,1) 0%, rgba(121,9,49,1) 32%, rgba(121,20,9,1) 44%, rgba(0,212,255,1) 100%);
  background-size: 400% 400%;
  animation: gradient 5s ease infinite;*/
  overflow: hidden;
}


.seccion{

  position: relative;
  height: 100vh;
  width:80vw;
  /*margin-bottom: 0%;
  margin-right: 3%;*/
  /*margin-top: 30%;*/
}

.seccion::before{
  content:"";
  display: block;
  width: 100vw;
  height: 0vh;

}

.titulodeseccion{

  margin-top: 0%;
  padding-top: 20%;
  padding-left: 1vw;
  font-style: normal;
  font-size: 300%;
  font-weight: bold;
  align-self: center;
  color: white;
  font-family: Montserrat;
  mix-blend-mode: normal;
  position: relative;
  background-color: rgba( 0, 0 ,0, .2);

}

/*secciones*/


.footer{
  height: 4vh;
  width: 100%;
  margin-top: 96vh;

  z-index: 1;
  align-self: flex-start;

  min-height: 30px;

  position:fixed;

  background-color: rgba( 1, 1 ,1, 0.7);

  mix-blend-mode: normal;

  display: flex;

  align-content: center;

  justify-content: space-between;

}

.moto{
  
  padding: 0vw;
  margin:0.0rem;
  margin-left: 2vw;
  font-weight: 300;
  min-height: ;

  position: relative;
  display: flex;
  align-self: center;
  font-weight: 300;
  font-size: 25px;
  pointer-events: none;
  text-decoration: none;
 
}

.textMoto{
  font-family: "Rubik";
  padding: 0vw;
  margin:0.1em;
  align-self: center;
  letter-spacing:  0.2rem;
  font-weight: 400;
  font-size: 18px;

}

.coded, .luv{
  font-family: "Rubik";
  padding:0vw;
  margin:0em;
  display:flex;
  position: relative;
  display: flex;
  align-self: center;
  letter-spacing:  0.1rem;
  font-weight: 600;
  font-size: 20px;
}

/* Force heart emoji to be white on all browsers */
.luv {
  color: white !important;
  filter: grayscale(100%) brightness(0) invert(1) !important;
  -webkit-filter: grayscale(100%) brightness(0) invert(1) !important;
}

/* Unified contextual menu SVG arrows */
.expand-arrow, .back-triangle {
  width: 24px;
  height: 24px;
  display: inline-block;
  transition: 0.3s transform ease-in-out, 0.3s opacity ease-in-out;
  margin-left: 0.2em;
  transform: rotate(0deg); /* Base rotation */
  vertical-align: middle; /* Center with text */
}

.expand-arrow {
  opacity: 0; /* Start invisible, show on hover */
}

.expand-arrow.expanded {
  transform: rotate(90deg); /* Rotate when expanded */
}

.back-triangle {
  opacity: 0.6; /* Back triangle is more visible by default */
  transform: rotate(180deg); /* Always rotated for "back" direction */
  margin-left: 0;
  margin-right: 0.5em;
}


.lanBan{
  margin-right: 0vw;
  margin:0.15rem;
  padding-right: 2vw;
  position: relative;
  display: flex;
  align-self: center;
  font-family: "Rubik";
  justify-content: space-around;
  letter-spacing:  0.3rem;
  font-weight: 300;
}

.lang{

  padding: 0vw;
  margin:0em;
  font-weight: 300;

  position: relative;
  display: flex;
  align-self: flex-end;
  font-weight: 300;
  font-size: 15px;
 
}

.lan{
  padding: 0vw;
  margin:0.25em;
  cursor: pointer;

}

.slash2{

  padding:0vw;
  margin:0em;
  display:flex;
  position: relative;
  display: flex;
  align-self: center;
  letter-spacing:  0.5rem;
  font-weight: 600;
  font-size: 1vw;
}

.EdLogo{
  padding:0vw;
  margin:0em;
  display:flex;
  /* position: absolute; */
  display: flex;
  align-self: center;
  letter-spacing:  0.0rem;
  font-weight: 600;
  height: 25px;
  width: auto;
  cursor: pointer;
  pointer-events: all;
}

.social{
  padding: 0vw;
  margin:0.15rem;
  margin-left: 20px;
  font-weight: 300;
  min-height: ;
  letter-spacing:  0.5rem;
  position: relative;
  display: flex;
  align-self: center;
  justify-content: space-between;
  font-weight: 300;
  font-size: 25px;

}
.fb{
  padding-right:5px;
  margin:0em;
  display:flex;
  position: relative;
  display: flex;
  align-self: center;
  letter-spacing:  0.5rem;

  font-weight: 600;
  height: 25px;
  width: auto;
}

.ig{
  padding-left:5px;
  margin:0em;
  display:flex;
  position: relative;
  display: flex;
  align-self: center;
  letter-spacing:  0.5rem;
  font-weight: 600;
  height: 25px;
  width: 27px;
}


.sound{
  padding-left:5px;
  padding-right:1.5vw;
  display:flex;
  position: relative;
  display: flex;
  align-self: center;
  letter-spacing:  0.5rem;
  font-weight: 600;
  height: 25px;
  width: auto;
  cursor: pointer;
  transform: scaleX(-1);
}


.video{

  position: fixed;

  height: 100vh;

  width: 100vw;

  display:flex;

  min-width: 250px;

  line-height: 1.;

  margin-bottom: 4vh;

  margin-top: 0vh;

  overflow: none;

  background-color: rgba(0,0,0,0);

  z-index: 0;
  align-self:center;
  align-content: space-around;
  justify-content: space-around;





}

.controlsContainer{

  position: fixed;

  height: 100vh;

  width: 100vw;

  display:flex;

  min-width: 250px;

  line-height: 1.;

  margin-bottom: 4vh;

  margin-top: 0vh;

  overflow: none;

  background-color: rgba(0,0,0,0);

  z-index: 0;
  align-self:center;
  align-content: space-around;
  justify-content: space-around;

}
  .aviso{
  width: 100vw;
  height:0vh;
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
  pointer-events: none;
  border: none;
  background-color: rgba(1,1,1,0.5);
  }

    .turn{
  mix-blend-mode: color-dodge;
  display: none;
  
  }

@media screen and (orientation:portrait){

  .aviso{
  width: 100vw;
  height: 100vh;
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
  pointer-events: none;
  border: none;
  background-color: rgba(1,1,1,0.5);
  }
  .background {
  z-index: 1;
  }

  .aviso{
    display: flex;

    flex-direction: column;
    align-content: space-around;
    align-items: center;
    justify-content: center;
    mix-blend-mode: multiply;
  }


  .turn{
  mix-blend-mode: color-dodge;

  display: inherit;
  
  }

}


/*//////////////////////////////////////////////////////////////*/

@media screen and (max-height:800px){

  .NavSecciones{

    background-color: rgba(0,0,0,0);

    list-style-type: none;

    list-style-position: inside;

    align-self: flex-end;

    max-height: 70vh;

    overflow: hidden;
    direction:ltr;

   /* display:inline-flex;*/
    flex-direction: column-reverse;
    /*scrollbar-width: none;*/
    align-items: flex-start;
    justify-content: left;
    

  }
}



.li{

  /*background-color: white;*/
  background-color: rgba( 25, 25 ,25, .0);

  box-shadow:  0px 0px 0px rgba( 50, 50, 50, 0.0);


  border-radius: 8px ;

  border-width: 0px;
  border-color: rgba( 00, 100, 100, .0);
  margin-top: 5px;

  color: rgba( 100, 100, 100, 1);
  font-family: Montserrat;
  font-weight: 300;
  font-size: 2.8rem;
  letter-spacing:  0.15rem;

  /*activar desactivar botones-no olvidar cambir color de base*/
  /*
  width: 100%;
  height: 55%;
  */
  /*overflow: hidden;*/
  mix-blend-mode: normal;

  transition: 1s width;

  display:flex; 


}

.linkdenavegacion{

  color:white;
  font-family: Montserrat;
  font-weight: 600;
  text-decoration: none;
  mix-blend-mode: normal;
  cursor: pointer;
  user-select: none;
  
}

@media screen and (max-height:550px){

.navBan{
  height:40vh;
}
.Banner{
  max-height: 10vh;
  min-height: 10vh;
}

.caseLogo{
  min-width: 100px;
  cursor: pointer;
}
.logo{
  height: 24vh;
  cursor: pointer;
}
.lema{
 

  height: auto;
  width: 60vw;
  
  max-height: 70vh;
  max-width: 60vw;
  margin-top: 12vh;
  margin-bottom: 12vh;
  
  margin-left: 5vw;
  margin-right: 30vw;
  overflow: hidden;
  border-width: 0px;
  border-color: rgba( 00, 100, 100, .0);
  margin-top: 5px;

  color: white;
  font-family: montserrat;
  font-weight: 600;
  font-size: 2.5rem;
  letter-spacing:  0.25rem;


  /*activar desactivar botones-no olvidar cambir color de base*/
 
  min-height: 50%;

  overflow: none;
  mix-blend-mode: normal;

  transition: 1s width;

  display:flex;

  user-select: none;
  align-self: flex-end;
  
}

.li{
  font-size: 2.0rem;
  letter-spacing:  0.15rem;
}

/* COMPLETELY NEW CONTEXTUAL MENU - Fresh start */

/* Back to original nested li styling - it works but causes hydration warnings */

/* Keep backup class in case we need it */
.contextual-menu-fixed {
  position: absolute;
  bottom: 4vh;
  left: 0;
  width: auto;
  min-width: 250px;
  height: auto;
  z-index: 1000;
  background-color: rgba(0,0,0,0.0); /* Match original transparency */
}

.contextual-menu-fixed ul {
  list-style-type: none !important; /* Remove bullet points */
  list-style: none !important;      /* Remove bullet points completely */
  margin: 0;
  padding: 0;
  display: block;
  align-self: flex-end;
}

.contextual-menu-fixed li {
  /* Remove bullets and fix sizing */
  list-style: none !important;
  list-style-type: none !important;
  background-color: rgba(25, 25, 25, 0.0);
  box-shadow: 0px 0px 0px rgba(50, 50, 50, 0.0);
  border-radius: 8px;
  border-width: 0px;
  margin-top: 5px;
  color: rgba(100, 100, 100, 1);
  font-family: Montserrat;
  mix-blend-mode: normal;
  display: block;
  height: auto;
  width: auto;
  position: relative; /* Ensure no pseudo-elements */
}

.contextual-menu-fixed li::before {
  display: none !important; /* Remove any bullet pseudo-elements */
}

.contextual-menu-fixed a {
  /* Fix font and styling - use available Montserrat weight */
  color: white !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 300 !important; /* Use available weight from Google Fonts */
  text-decoration: none !important;
  mix-blend-mode: normal;
  cursor: pointer;
  user-select: none;
  font-size: 2.0rem !important;
  letter-spacing: 0.15rem !important;
  display: inline-block;
  
  /* Debug styling to see if it's working */
  border: 1px solid red !important; /* Temporary - will remove */
}

/* Nested sub-projects list - compact styling */
.sub-projects {
  list-style-type: none;
  list-style-position: inside;
  margin: 0;
  padding: 0;
  margin-left: 15px; /* Indent sub-items */
}

.sub-projects .li {
  font-size: 1.6rem; /* Slightly smaller than main items */
  margin-top: 2px; /* Tighter spacing */
  margin-bottom: 2px;
}

.details{
  font-size: 1.0rem;
  letter-spacing:  0.15rem;
}

.footer{
  margin-top: 92vh;
  align-self: flex-start;
  height: 30px;
}

}

/* ===========================================
   MOBILE RESPONSIVE ADDITIONS
   (Preserving original structure)
   =========================================== */

/* Logo - Direct approach (no container) */
.logo-direct {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  height: auto;
  width: auto;
  max-height: 60px;
  max-width: 120px;
  object-fit: contain;
  z-index: 10;
}

/* Mobile Portrait - Medium logo */
@media screen and (max-width: 767px) and (orientation: portrait) {
  .Banner {
    height: auto !important;
    min-height: 60px;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
  }
  
  .logo-direct {
    right: 15px;
    max-height: 40px;
    max-width: 80px;
  }
}

/* Mobile Landscape - Compact for limited vertical space */
@media screen and (max-width: 767px) and (orientation: landscape) {
  .Banner {
    height: 45px !important;
    min-height: 45px;
    max-height: 45px;
  }
  
  .logo-direct {
    max-height: 30px;
    max-width: 60px;
  }
  
  /* Navigation scaling for landscape */
  .liBan {
    padding: 4px 8px !important;
    font-size: 14px !important;
    margin-right: 6px !important;
  }
  
  .libantext {
    font-size: 14px !important;
  }
  
  .slash {
    font-size: 18px !important;
    margin: 0 2px !important;
  }
}

/* Very narrow landscape screens - Ultra compact */
@media screen and (orientation: landscape) and (max-height: 375px) {
  .Banner {
    height: 35px !important;
    min-height: 35px;
    max-height: 35px;
  }
  
  .logo-direct {
    max-height: 22px;
    max-width: 44px;
  }
  
  .liBan {
    padding: 2px 6px !important;
    font-size: 12px !important;
    margin-right: 4px !important;
  }
  
  .libantext {
    font-size: 12px !important;
  }
  
  .slash {
    font-size: 16px !important;
    margin: 0 1px !important;
  }
}

/* Fix .lema positioning for landscape orientation */
@media screen and (orientation: landscape) {
  .lema {
    margin-top: 15vh; /* Avoid header overlap */
    margin-left: 10vw; /* Adjust for landscape width */
    margin-right: 5vw; /* Reduce right margin */
    width: 85vw; /* Use more width in landscape */
    max-width: 85vw;
  }
}

/* Mobile General - Show only sound icon */
@media screen and (max-width: 767px) {
  .footer {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: auto;
    height: auto;
    background-color: transparent;
    margin-top: 0;
    justify-content: flex-end;
    align-items: center;
    min-height: auto;
    z-index: 1000;
  }
  
  .moto {
    display: none; /* Hide the "coded with love by Ed" section on mobile */
  }
  
  .lanBan {
    margin: 0;
    padding: 0;
  }
  
  .sound {
    background-color: rgba(1, 1, 1, 0.8);
    border-radius: 50%;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    pointer-events: auto;
  }
  
  .sound img {
    width: 24px;
    height: 24px;
  }
}

/* Tablet scaling */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .logo-direct {
    max-height: 50px;
    max-width: 100px;
  }
  
  /* Show footer on tablet */
  .footer {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    height: 4vh;
    width: 100%;
    z-index: 1;
    min-height: 30px;
    background-color: rgba(1, 1, 1, 0.7);
    mix-blend-mode: normal;
    align-content: center;
    justify-content: space-between;
    margin-top: 0;
  }
}

/* Desktop - Show footer */
@media screen and (min-width: 1024px) {
  .footer {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    height: 4vh;
    width: 100%;
    z-index: 1;
    min-height: 30px;
    background-color: rgba(1, 1, 1, 0.7);
    mix-blend-mode: normal;
    align-content: center;
    justify-content: space-between;
    margin-top: 0;
  }
}