:root {
  --main-color: #19248b;
  --orange: #e76c21;
}

@font-face {
  font-family: "Larios";
  src: url(fonts/LariosDisplay-Regular.otf);
  font-style: normal;
}

@font-face {
  font-family: "Pona Bold Italic";
  src: url(fonts/Pona-Book-Italic.otf);
  font-style: italic;
}
@font-face {
  font-family: "DINNextLTPro-Condensed";
  src: url(fonts/DINNextLTPro-Condensed.ttf);
  font-style: italic;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: var(--main-color);
  width: 100vw;
  height: 100vh;
  background-image: url(img/Fondo-Web.png);
  background-size: cover;
  background-repeat: no-repeat;
  transition: 0.3s all ease-in-out;
  font-family: "Larios";
  font-size: 25px;
  line-height: 1;
  overflow: hidden;
}

img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

a {
  color: var(--main-color);
  text-decoration: none;
  display: block;
  margin-inline: auto;
  text-align: center;
  font-size: 18px;
  margin-bottom: 1rem;
  width: fit-content;
}

p {
  margin: 0;
}

.pona {
  font-family: "Pona Bold Italic";
  font-style: italic;
}

section {
  position: relative;
  display: flex;
  height: 100%;
}

.limon-absolute {
  position: absolute;
  top: -124px;
  left: -110px;
  width: 100%;
  max-width: 350px;
  z-index: -1;
}

.limon-absolute.limon {
  right: 0px;
  top: 45%;
  left: 80%;
  width: 100%;
  max-width: 210px;
}

.botella-container {
  width: 80%;
}

.botella-container img {
  height: 130%;
}

.info-container {
  width: 90%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  position: relative;
  left: -30px;
}

.bottom-space {
  margin-bottom: 20px;
}

.top-space {
  margin-top: 50px;
}

.info-container .content :is(.size, .energy, .ingredients) {
  margin-bottom: 1.5rem;
}

.info-container .content {
  width: 90%;
}

.pie {
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pie div:nth-child(1) {
  width: 40%;
  text-align: center;
}

.pie div:nth-child(2) {
  width: 50%;
  text-align: center;
}

.pie .uno {
  font-size: 20px;
  color: #d00b0b;
  font-family: "DINNextLTPro-Condensed";
  text-transform: uppercase;
}

.pie .dos {
  font-size: 10px;
  font-family: "DINNextLTPro-Condensed";
}

/* GRIDS */
/* .info-container .content .size {
    display: grid;
    width: 100%;
    grid-template-areas:
        "top top top"
        "middle middle middle"
        "bottom bottom bottom";
} */

/* .content .size .top {
    grid-area: top;
    display: grid;
    grid-template-areas: "p p p";
    grid-template-columns: repeat(3, 1fr);
    align-items: flex-end;
} */

.content .size .middle {
  grid-area: middle;
}

.content .size .bottom {
  display: flex;
  justify-content: space-between;
  width: 80%;
}

.info-container .content .energy {
  display: grid;
  width: 100%;
  grid-template-areas:
    "top top"
    "middle middle"
    "bottom bottom";
}

.content .energy .top {
  grid-area: top;
  display: grid;
  grid-template-areas: "p p .";
  grid-template-columns: repeat(3, 1fr);
  align-items: flex-end;
}

.content .energy .middle {
  grid-area: middle;
}

.content .energy .bottom {
  grid-template-columns: repeat(3, 1fr);
  grid-area: bottom;
  display: grid;
  grid-template-areas: "p p .";
}

/* GRIDS */
.ingredients .bottom p {
  width: 90%;
  margin-right: auto;
}

.logo {
  width: 300px;
  margin-inline: 18%;
  margin-bottom: 2rem;
}

hr {
  width: 90%;
  margin-left: inherit;
  border: 1px solid var(--main-color);
}

.logo-mobile {
  display: none;
}

@media (max-width: 1000px) {
  body {
    overflow: auto;
    overflow-x: hidden;
    overflow-y: scroll;
    background-size: cover;
    height: auto;
  }

  .limon-absolute {
    max-width: 290px;
    left: -190px;
  }

  .limon-absolute.limon {
    max-width: 200px;
    top: 400px;
    right: 0px;
  }

  section {
    flex-direction: column;
    padding-bottom: 4rem;
  }

  .botella-container {
    width: 40%;
    margin-inline: auto;
  }

  .logo-mobile {
    display: block;
    width: 250px;
    margin-top: 1rem;
    margin-inline: auto;
  }

  .info-container {
    left: auto;
    top: auto;
    width: 90%;
    margin-inline: auto;
  }

  .info-container .logo {
    display: none;
  }

  .content .energy .top,
  .content .energy .bottom {
    grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
  }
}

@media (max-width: 500px) {
  .info-container .content {
    width: 100%;
    margin-top: 70px;
  }
  .limon {
    left: 40% !important;
  }
  hr {
    width: 100%;
  }
  .pie {
    width: 100%;
    flex-direction: column;
  }
  .pie div:nth-child(1) {
    width: 70%;
    margin-bottom: 20px;
  }

  .pie div:nth-child(2) {
    width: 80%;
  }
  section {
    flex-direction: column;
    padding-bottom: 0rem;
  }
  .content .size .bottom {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 17px;
  }
}