body{
    text-align: center;
}
/* .zoom {
    display: inline-block;
    height: 100%;
    vertical-align: middle; 
    height:100vh;  
    width:100%;  
    display:grid;  
    place-items:center;  
    position:fixed;  
    top:0;  
    left:0;
}

.logo_intro{
    margin-left: auto;
    margin-right: auto;
    width: 20%;
    vertical-align: middle;
} */

section {
  width: 100%;
  height: 1000px;
}

.node-label{
  color:white;
  font-size: 15px;
  text-transform: uppercase;
}

.floatingTitle{
  position: absolute;
  top:  2%;
  /* max-width: 30%; */
  max-height: 20%;
  overflow: scroll;
  width: 90%;
  min-height: 25%;
  left: 50%;
  transform: translate(-50%, 0);
  font-family: 'Briller', Gotham, sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 45px;
  color: white;
}

.floatingInfo{
  position: absolute;
  top:  20%;
  left: 5%;
  /* max-width: 30%; */
  width: 40%;
  max-height: 70%;
  overflow: scroll;
  color: white;
  padding: 15px;
  text-align: justify;
  font-size: 15px;
  background-color: rgba(0, 0, 0, 0.5);
}

textarea{
  color: white;
}
 
.floatingInfo.der .subtitle, .floatingInfo.der .info{
  text-align: justify;
}
.floatingInfo.izq .subtitle, .floatingInfo.izq .info{
  text-align: justify;
}
.info, .infoButtons{
  padding-top: 10px;
}
.floatingInfo.der .infoButtons{
  display: flex;
  justify-content: flex-end;
  float: right;
}

/* .floatingMenu.der,.floatingInfo.der{
  left: 60%;
}
.floatingMenu.izq{
  left:30%
} */

.floatingMenu.top{
  top:2%;
  transition: top 2s ease;
}

.checkbtn{
  position: absolute;
  top:  2%;
  right: 2%;
  font-size: 30px;
  color: #fff;
  float: right;
  line-height: 80px;
  margin-right: 20px;
  cursor: pointer;
  display: none;
}
.checkbtn i{
  font-size: 50px;
}

#check{
  display: none;
}

.floatingInfo.der{
  left: 52%;
}

.floatingMenu {
  position: absolute;
  top: 12%;
  height: 50px;
  white-space: nowrap;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  text-transform: uppercase;
  transition: top 2s ease;
}

.lateralFloatingMenu {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0; /* Eliminado el gap vertical */
  z-index: 100;
  align-items: flex-start; /* Alineación a la izquierda */
}

.lateralFloatingMenu .bn {
  display: block;
  margin: 0;
  text-align: left; /* Texto a la izquierda */
  font-size: 12px; /* Fuente más chica */
  padding: 5px 10px; /* Padding reducido */
  width: 100%;
}

/* Regla específica para permitir que bnfocus funcione dentro del menú lateral */
.lateralFloatingMenu .bn.bnfocus {
  font-size: 36px;
}

@media screen and (max-width: 800px) {
    .floatingInfo,.floatingInfo.der{
        width: 90%;
        top: 50%;
        max-height: 45%;
        left: 50%;
        transform: translate(-50%, 0);
    }
    .floatingTitle{
        font-size: 16px;
        top: 4%;
        left: 42%;
    }
    #title{
      width: 90%;
      min-height: 25%;
      left: 50%;
      transform: translate(-50%, 0);
    }
    .checkbtn{
        display: block;
    }
    .floatingMenu,.floatingMenu.izq{
        position: fixed;
        white-space: unset;
        height: fit-content;
        top: -100%;
        left: 50%;
        text-align: center;
        transition: all .5s;
        transform: translate(-50%, 0);
        font-size: 20px;
    }
    #check:checked ~ .floatingMenu{
        top: 10%;
    }
    .floatingMenu button{
      padding: 5px 5px;
    }
}

  
 /* Style the navigation container */

  button {
    appearance: none;
    position: relative;
    padding: 1em 2em;
    border: 0;
    background-color: rgba(0,0,0,0);
    font-family: 'Briller', Gotham, sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #ffff;
    z-index: 2;
  }
  
  button::after {
    --m-i: linear-gradient(#000, #000);
    --m-o: content-box, padding-box;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: var(--border-width);
    background-image: conic-gradient(
      #ff0080,
      #ff0080,
      #ff0080,
      #ff0080,
      #ff0080,
      #ff0080,
      #ff0080
    );
    -webkit-mask-image: var(--m-i), var(--m-i);
    mask-image: var(--m-i), var(--m-i);
    -webkit-mask-origin: var(--m-o);
    mask-origin: var(--m-o);
    mask-clip: var(--m-o);
    mask-composite: exclude;
    -webkit-mask-composite: destination-out;
    filter: hue-rotate(0);
    animation: rotate-hue634 linear 100ms infinite;
    animation-play-state: paused;
    border-radius: 20px;
    border-color: #000;
  }
  
  button:hover::after {
    animation-play-state: running;
    border-radius: 10px;
  }
  
  @keyframes rotate-hue634 {
    to {
      filter: hue-rotate(1turn);
    }
  }
  
  button,
  button::after {
    box-sizing: border-box;
    border-radius: 20px;
  }
  
  button:active {
    --border-width: 5px;
  }
  
  .bn {
    display: inline;
    padding: 0.9em 1.6em;
    border: none;
    outline: none;
    color: #FFF;
    font-family: inherit;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 32px;
    vertical-align: middle;
    transition: font-size 2s ease;
  }
  
  .bn::after {
    content: "";
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgb(46, 46, 46);
    left: 0;
    top: 0;
    border-radius: 10px;
  }
  
  .bn::before {
    content: "";
    background: linear-gradient(
        45deg,
        #07d888, #e40851, #2f00ff, #00ff37,
          #ec0808, #2600ff, #0bd157, #2f00ff
    );
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 600%;
    z-index: -1;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    filter: blur(8px);
    animation: glowing345 20s linear infinite;
    transition: opacity .1s ease-in-out;
    border-radius: 20px;
    opacity: 0;
  }
  
  @keyframes glowing345 {
    0% {
      background-position: 0 0;
    }
  
    50% {
      background-position: 400% 0;
    }
  
    100% {
      background-position: 0 0;
    }
  }
  
  .bn:hover::before {
    opacity: 1;
  }
  
  .bn:active:after, button:focus {
    background: transparent;
  }

 .bnfocus{
    text-shadow: 
    -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
    padding: 0;
    background-color: transparent;
    font-size: 36px;
  } 


  .bnfocus#nosotres{
    color: var(--ColorPalette-Turquesa);
  }

  .bnfocus#obras{
    color: var(--ColorPalette-Cian);
  }

  .bnfocus#audiovisuales{
    color: var(--ColorPalette-Violeta);
  }

  .bnfocus#editorial{
    color: var(--ColorPalette-Fuccia);
  }

  .bnfocus#proyectos{
    color: var(--ColorPalette-Amarillo);
  }

  .bnfocus#laboratorios{
    color: var(--ColorPalette-Turquesa);
  }

  .bnfocus#amigues{
    color: var(--ColorPalette-Fuccia);
  }

  .bnfocus#contacto{
    color: var(--ColorPalette-Amarillo);
  }
  
  .bnfocus:active {
    color: #000;
    font-weight: bold;
  }

  .subtitle{
    font-size: 26px;
  }

  .labelComentario{
    text-align: left;
  }
  
  .ico {
    display: inline-block;
    width: 32px; height: 32px;
    background-repeat: no-repeat;
  }
  .ig{
    background-image: url('/icons/instagram.png');
  }
  .fb{
    background-image: url('/icons/facebook.png');
  }
  .spotify{
    background-image: url('/icons/spotify.png');
  }
  .web{
    background-image: url('/icons/web.png');
  }
  .wpp{
    background-image: url('/icons/whatsapp.png');
  }
  .youtube{
    background-image: url('/icons/youtube.png');
  }

/* .floatingInfo:after {
  animation: grain 8s steps(10) infinite;
  background-image: url("/images/noise.png");
  content: "";
  height: 300%;
  left: -50%;
  opacity: 0.3;
  position: fixed;
  top: -100%;
  width: 300%;
}  */

@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }
}