/* Page 3 layout adapted from index_3/style_3 */
body {
  margin: 0;
  padding: 0;
  font-family: 'Bai Jamjuree', sans-serif;
  position: relative;
  width: 100vw;
  height: 100vh;
  min-width: 320px;
  min-height: 600px;
  background: #0B3D91;
  overflow-x: hidden;
  overflow-y: auto;
}

.background {
  position: absolute;
  width: 100vw;
  height: 100vh;
}

.meteoro-top {
  position: absolute;
  width: 100vw;
  height: 70vh;
  left: 0;
  top: 0;
  background: url('../FondoEspacio.png');
  background-size: cover;
  z-index: 1;
}

.meteoro-bottom {
  position: absolute;
  width: 100vw;
  height: 18vh;
  left: 0;
  bottom: 0;
  background: url('../FondoEspacio.png');
  background-size: cover;
  z-index: 2;
}

.rectangle {
  position: absolute;
  width: 1440px;
  height: 6px;
  left: 0px;
  top: 140px; /* placed below the title */
  background: #FC3D21;
  transform: matrix(1, 0, 0, -1, 0, 0);
  z-index: 6;
}

.titulo {
  position: absolute;
  width: 583px;
  height: 76px;
  left: calc(50% - 583px/2 - 373.5px);
  top: 52px;
  font-weight: 700;
  font-size: 50px;
  line-height: 62px;
  color: #FFFFFF;
  z-index: 4;
}

.team {
  position: absolute;
  width: 522px;
  height: 96px;
  left: 55px;
  top: 158px;
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
  color: #FFFFFF;
  z-index: 4;
}

.descripcion {
  position: absolute;
  width: 1367px;
  height: 139px;
  left: 55px;
  top: 220px;
  font-weight: 700;
  font-size: 30px;
  line-height: 38px;
  color: #FFFFFF;
  z-index: 4;
}

.ellipse {
  position: absolute;
  width: 173px;
  height: 173px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  z-index: 5;
}
.ellipse.mica { left: 630px; top: 343px; background-image: url('../IMG.mica.png'); }
.ellipse.tomas { left: 229px; top: 350px; background-image: url('../IMG.Tomas.png'); }
.ellipse.joaquin { left: 229px; top: 606px; background-image: url('../IMG.Joaquin.png'); }
.ellipse.ignacio { left: 1037px; top: 605px; background-image: url('../IMG.Ignacio.png'); }
.ellipse.simon { left: 1037px; top: 343px; background-image: url('../IMG.Simon.png'); }
.ellipse.malena { left: 633px; top: 606px; background-image: url('../IMG.Malena.png'); }

.nombre {
  position: absolute;
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
  color: #FFFFFF;
  z-index: 6;
  text-align: center;
  left: 0;
  right: 0;
  width: 100%;
}
/* Botón igual al de la página 2 */
.BotonVisualizarSimulacion {
  position: fixed;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  width: 229px;
  height: 40px;
  background: #FC3D21;
  box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
  border-radius: 25px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Arsenal SC', sans-serif;
  font-weight: 700;
  font-size: 25px;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  z-index: 100;
  transition: filter 0.2s;
  padding: 0 16px;
  min-width: 160px;
  max-width: 90vw;
}
.BotonVisualizarSimulacion:hover {
  filter: brightness(0.95);
}
.nombre.mica { width: 336px; height: 58px; left: 578px; top: 512px; }
.nombre.simon { width: 381px; height: 55px; left: 949px; top: 512px; }
.nombre.malena { width: 381px; height: 55px; left: 563px; top: 782px; }
.nombre.ignacio { width: 487px; height: 51px; left: 924px; top: 782px; }
.nombre.joaquin { width: 487px; height: 51px; left: 68px; top: 782px; }
.nombre.tomas { width: 487px; height: 51px; left: 103px; top: 512px; }

.logo-unsl {
  position: absolute;
  width: 88px;
  height: 88px;
  left: 68px;
  bottom: 40px;
  background: url('../UNSL.png') no-repeat center;
  background-size: contain;
  z-index: 12;
}

.logo-fica {
  position: absolute;
  width: 220px;
  height: 88px;
  left: 170px;
  bottom: 40px;
  background: url('../FICA_logo.png') no-repeat center;
  background-size: contain;
  z-index: 12;
}

.unsl-text {
  position: absolute;
  width: 144px;
  height: 84px;
  left: 159px;
  top: 1050px;
  font-weight: 700;
  font-size: 20px;
  line-height: 25px;
  color: #FFFFFF;
  z-index: 8;
}

.footer {
  position: absolute;
  width: 544px;
  height: 20px;
  left: 862px;
  bottom: 20px;
  font-weight: 700;
  font-size: 18px;
  line-height: 20px;
  text-transform: uppercase;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  text-align: center;
  z-index: 9;
}

/* Back button used on page 3 */
.back-button {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  background: #FC3D21;
  color: #ffffff;
  border: none;
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

.back-button:hover{ filter: brightness(0.95); }