* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

html,
body {
  font-size: 62.5%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  scroll-behavior: smooth;
  background: #4e7a97;
}

.collapse {
  transition: height 1 ease;
}
.acronym {
  font-variant: small-caps;
}

p {
 font-family: "Oswald-Regular";
  font-size: 2rem;
  line-height: 2.6rem;
  color: #bbb2b0;
}

.bold {
  font-family: "Oswald-Bold";
}



    .scroll-wrapper {
      height: 250vh; /* scroll largo */
    }

    .forest {
      position: fixed;
      top: -5%;
      left: -5%;
      width: 110%;
      height: 105vh;
      pointer-events: none;
      z-index: 2;
      overflow: visible;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 350px;
    }

    .piece {
      position: absolute;
      bottom: 60px;
      left: 50%;
      transform: translateX(-50%);
      width: 100vw;
      opacity: 0;
      transition: opacity 1.5s ease-in-out, transform 1s ease;
      will-change: transform;
    }
.piece.piece-b{
    bottom: 34%;
}
.piece.piece-c{
    bottom: 23%;
}
.piece.piece-d{
    bottom: auto;
    transition: transform 0.2s ease;
  transform-origin: center center;
  will-change: transform;
  transform: translate(-50%, 0);
 /* transition: animation 1s; */
  /* animation: squiggle 0.6s infinite; */
  /* z-index: 3; */
  pointer-events:auto ;
}


.piece.piece-d:hover{

       animation: squiggle 1s infinite;
}


    @keyframes squiggle {
      0%   { filter: url(#squiggly-0); }
      25%  { filter: url(#squiggly-1); }
      50%  { filter: url(#squiggly-2); }
      75%  { filter: url(#squiggly-3); }
      100% { filter: url(#squiggly-4); }
    }
.piece.piece-e{
    bottom: 0%;
    background-color: #02558b;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.piece.piece-e span{
  color: #d4bda6;
   font-family: "Oswald-Bold";
}
    .piece.visible {
      opacity: 1;
    }
.marquee-container {
  width: 100%;          /* Puedes poner un ancho fijo si prefieres */
  overflow: hidden;
  position: relative;
}

.marquee-content {
  display: flex;
  width: max-content;
  animation: scroll-left 30s linear infinite;
}

.marquee-content span {
  white-space: nowrap;
  padding-right: 4rem;   /* Espacio entre las dos copias */
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
    .container-bubbles {
      position: absolute;
      top: 0;
      left: 0;
      height: 250vh;
      width: 100vw;
      overflow: hidden;
      z-index: 1;
      pointer-events: none;
    }

    .bubble {
      position: absolute;
      background: rgba(255, 255, 255, 0.25);
      border-radius: 50%;
      animation: rise 15s infinite ease-in;
      transition: opacity 0.5s ease;
    }

    @keyframes rise {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(-150vh);
      }
    }
    .containerRow{
      display: flex;
      justify-content: center;
      align-items: center;
    }
.scroll-arrow{
   width: 8rem;
  position: fixed;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  animation: hop 2s infinite;
  user-select: none;
}
.burble{
  display: flex;
  flex-direction: column;
}
.listAreas{
  list-style: decimal;
 color: #f8f7df;
    font-family: "Oswald-Regular";
    font-size: 2rem;
}

.popoversStyle {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: transparent;
    background-image: url(/work/models/memorica/recursos/exposiciones/elGranAcuario/img/asterisco.svg);
    background-repeat: no-repeat;
    background-size: contain;
    align-items: start;
    cursor: pointer;
   
}
.popover-body{
  background-color: #658fab;
}
.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after{
    /* background-color: #658fab; */
       
    border-right-color:#658fab
}
@keyframes hop {
  0% {
    transform: translateX(-50%) translateY(0);
    opacity: 0.9;
  }
  30% {
    transform: translateX(-50%) translateY(-20px);
    opacity: 1;
  }
  50% {
    transform: translateX(-50%) translateY(0);
    opacity: 0.9;
  }
  70% {
    transform: translateX(-50%) translateY(-10px);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(0);
    opacity: 0.9;
  }
}

    @media only screen and (max-width: 768px) {
.piece.piece-d{

  width: 190vw;
}
    }