@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&family=Roboto:wght@100;300;500;900&display=swap");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css");
/* ---------- RESET --------- */
* {
  font-family: 'Quicksand', sans-serif;
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

body {
  background-color: #DAC4F7 !important; }

/* ---------- BOOTSTRAP HEADER --------- */
.navbar-collapse {
  justify-content: space-between;
  width: 100%; }

.navbar-brand {
  padding: 5px;
  width: 3.5vw;
  height: 59px; }

.navbar-brand img {
  height: 100%; }

.nav-link {
  color: #DAC4F7 !important; }

.nav-link:hover {
  color: #82c214 !important; }

.nav-link i {
  font-size: 3rem; }

.nav-link img {
  margin: 0 10px; }

.navbar-toggler {
  border-color: #DAC4F7 !important; }

.navbar-toggler-icon {
  height: auto !important;
  font-size: 3rem;
  background-image: none !important;
  color: #DAC4F7 !important; }

/* ---------- BOOTSTRAP CAROUSEL --------- */
.carousel {
  overflow: hidden;
  height: 100vh; }

.carousel img {
  min-width: 1300px;
  min-height: 100vh; }

.title-container {
  background-color: transparent;
  z-index: 1;
  top: 40vh;
  width: 100%;
  height: 10rem;
  position: absolute; }

.carousel h1 {
  text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.6);
  color: #82c214;
  text-align: center;
  background-color: transparent;
  font-size: 10rem; }

header {
  z-index: 2;
  width: 100%;
  position: fixed; }
  header nav {
    height: 90px;
    background-color: #392F5A; }
    header nav div {
      background-color: #392F5A; }

main {
  background-color: #DAC4F7; }
  main img {
    width: 100%; }
  main .seccion-texto {
    padding: 5vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 20vw;
    row-gap: 4vh;
    column-gap: 4vh; }
    main .seccion-texto picture {
      overflow: hidden; }
    main .seccion-texto div {
      font-size: 1.5vw; }
      main .seccion-texto div h2 {
        font-size: 3.5vw; }

.conocenos-main {
  padding-top: 90px; }
  .conocenos-main h1 {
    margin-top: 3vw;
    text-align: center;
    font-size: 3.5vw;
    color: #392F5A;
    text-decoration: underline; }
  .conocenos-main section {
    padding: 4vw;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 4vw;
    row-gap: 4vw;
    grid-auto-rows: 40vw; }
    .conocenos-main section > div {
      border: 1px solid #392F5A;
      -webkit-box-shadow: 10px 10px 5px 0px #392F5A;
      -moz-box-shadow: 10px 10px 5px 0px #392F5A;
      box-shadow: 10px 10px 5px 0px #392F5A; }
      .conocenos-main section > div picture {
        display: block;
        overflow: hidden;
        width: 100%;
        height: 18vw; }
        .conocenos-main section > div picture img {
          height: 100%; }
      .conocenos-main section > div h2 {
        font-size: 3.5vw;
        color: #392F5A;
        text-decoration: underline;
        margin: 0;
        height: 4.5vw;
        text-align: center; }
      .conocenos-main section > div p {
        font-size: 1.5vw;
        padding: 0 1vw;
        margin: 0;
        height: 12vw; }
      .conocenos-main section > div div {
        position: relative;
        bottom: 0;
        padding-right: 1vw;
        text-align: right; }
        .conocenos-main section > div div a {
          display: inline-block;
          height: 5vw;
          font-size: 4vw;
          color: #392F5A;
          text-decoration: none; }
        .conocenos-main section > div div a:hover {
          color: #82c214; }

.contactanos-main {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 90px);
  min-height: 70vw;
  padding-top: 90px;
  background-color: #DAC4F7; }
  .contactanos-main form {
    padding: 3vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3vw;
    row-gap: 1vw;
    background-color: #392F5A;
    height: 50vw;
    width: 60VW; }
    .contactanos-main form h1 {
      font-size: 3.5vw;
      color: #DAC4F7;
      text-decoration: underline;
      display: block;
      text-align: center;
      grid-column: 1/3;
      margin-bottom: 2vw; }
    .contactanos-main form label {
      font-size: 1.5VW;
      height: 3vw;
      text-align: right;
      color: #DAC4F7; }
    .contactanos-main form button:hover {
      background-color: #82c214; }
    .contactanos-main form .button-style, .contactanos-main form button, .contactanos-main form input, .contactanos-main form textarea {
      font-size: 1.5VW;
      border: none;
      outline: none;
      padding: 0.1vw;
      background-color: #DAC4F7;
      color: #392F5A; }
    .contactanos-main form button {
      margin: 0 22.5VW;
      margin-top: 2vw;
      grid-column: 1/3; }
    .contactanos-main form input {
      height: 3vw; }
    .contactanos-main form textarea {
      height: 15vw; }

.productos-main {
  height: calc(100vh - 90px);
  min-height: 96.5vw;
  padding-top: 90px; }
  .productos-main h1 {
    margin-bottom: 0;
    margin-top: 3vw;
    text-align: center;
    font-size: 3.5vw;
    color: #392F5A;
    text-decoration: underline; }
  .productos-main section {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: calc(85vw/5);
    grid-template-areas: "a b b c c"
 "d d f f g"
 "d d f f g"
 "h e f f i";
    row-gap: 1vw;
    column-gap: 1vw;
    padding: 5vw; }
    .productos-main section a {
      background-color: #392F5A;
      overflow: hidden; }
    .productos-main section a:hover {
      -webkit-box-shadow: 5px 5px 2.5px 0px #392F5A;
      -moz-box-shadow: 5px 5px 2.5px 0px #392F5A;
      box-shadow: 5px 5px 2.5px 0px #392F5A; }
    .productos-main section .productoa {
      grid-area: a; }
    .productos-main section .productob {
      grid-area: b; }
    .productos-main section .productoc {
      grid-area: c; }
    .productos-main section .productod {
      grid-area: d; }
    .productos-main section .productoe {
      grid-area: e; }
    .productos-main section .productof {
      grid-area: f; }
    .productos-main section .productog {
      grid-area: g; }
    .productos-main section .productoh {
      grid-area: h; }
    .productos-main section .productoi {
      grid-area: i; }

.unetenos-main {
  padding-top: 90px;
  background-color: #DAC4F7; }
  .unetenos-main h1 {
    margin-bottom: 0;
    margin-top: 3vw;
    text-align: center;
    font-size: 3.5vw;
    color: #392F5A;
    text-decoration: underline; }
  .unetenos-main section .unetenos-discord {
    padding: 5vw;
    height: 30vw;
    display: grid;
    column-gap: 5vw;
    grid-template-columns: 1fr 2fr; }
    .unetenos-main section .unetenos-discord h2 {
      font-size: 3.5VW;
      padding: 3vw 0;
      margin-bottom: 0;
      text-align: center; }
    .unetenos-main section .unetenos-discord picture {
      overflow: hidden; }
  .unetenos-main section > h2 {
    margin: 0 10vw;
    text-align: center;
    font-size: 3.5VW; }
  .unetenos-main section .unetenos-tarjetas {
    padding: 5vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 5vw;
    column-gap: 5vw;
    grid-auto-rows: 22vw; }
    .unetenos-main section .unetenos-tarjetas a {
      overflow: hidden; }
    .unetenos-main section .unetenos-tarjetas a:hover {
      -webkit-box-shadow: 5px 5px 2.5px 0px #392F5A;
      -moz-box-shadow: 5px 5px 2.5px 0px #392F5A;
      box-shadow: 5px 5px 2.5px 0px #392F5A; }

footer {
  height: 90px;
  background-color: #392F5A; }
  footer div {
    padding-top: 10px;
    text-align: center;
    display: block; }
  footer .footer-links a {
    text-decoration: none; }
    footer .footer-links a i {
      margin: auto 5px;
      color: #DAC4F7; }
    footer .footer-links a i:hover {
      color: #82c214; }
  footer .footer-legal a {
    text-decoration: none;
    color: #DAC4F7;
    font-size: 16px;
    display: inline-block;
    margin-bottom: -1vw; }
  footer .footer-legal a:hover {
    color: #82c214; }
  footer .footer-legal i {
    color: gray;
    margin: -0.5vw;
    font-size: 16px; }

@media screen and (max-width: 767.98px) {
  /* ---MAIN--- */
  main .seccion-texto {
    grid-template-columns: 1fr;
    grid-template-rows: 20vw 40vw 20vw 40vw 20vw 40vw; }
    main .seccion-texto div {
      font-size: 2.1vw; }
      main .seccion-texto div h2 {
        font-size: 5vw; }
  main .seccion-texto :nth-child(2) {
    grid-area: 1; }
  main .seccion-texto :nth-child(6) {
    grid-area: 5; }
  /* ---CONOCENOS--- */
  .conocenos-main h1 {
    font-size: 5vw; }
  .conocenos-main section {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 56vw; }
    .conocenos-main section > div picture {
      height: 26vw; }
    .conocenos-main section > div h2 {
      font-size: 5vw;
      height: 6.3vw; }
    .conocenos-main section > div p {
      font-size: 2.1vw;
      height: 16vw; }
    .conocenos-main section > div a {
      height: 7vw;
      font-size: 5.6vw; }
  /* ---PRODUCTOS--- */
  .productos-main {
    min-height: 126vw; }
    .productos-main h1 {
      font-size: 5vw; }
    .productos-main section {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-auto-rows: calc((85vw)/4);
      grid-template-areas: "g b b a"
 "g d f f"
 "e i f f"
 "h h c c"; }
  /* ---CONTACTANOS--- */
  .contactanos-main form {
    height: 66vw;
    width: 80VW; }
    .contactanos-main form h1 {
      font-size: 5vw; }
    .contactanos-main form label {
      font-size: 2.1VW; }
    .contactanos-main form button {
      margin: 0 30VW;
      font-size: 2.1VW; }
    .contactanos-main form input, .contactanos-main form textarea, .contactanos-main form button {
      font-size: 2.1VW; }
    .contactanos-main form input, .contactanos-main form textarea, .contactanos-main form label {
      height: 4vw; }
    .contactanos-main form textarea {
      height: 20vw; }
  /* ---UNETENOS--- */
  .unetenos-main h1 {
    font-size: 5vw; }
  .unetenos-main section .unetenos-discord h2 {
    padding: 2.5vw 0;
    font-size: 4vw; }
  .unetenos-main section h2 {
    font-size: 4vw; } }

@media screen and (max-width: 575.98px) {
  /* ---MAIN--- */
  .title-container h1 {
    font-size: 5rem; }
  main .seccion-texto {
    grid-template-rows: auto;
    grid-auto-rows: 40vw;
    padding: 2vh; }
    main .seccion-texto div {
      font-size: 3.5vw; }
      main .seccion-texto div h2 {
        font-size: 7vw; }
  /* ---CONOCENOS--- */
  .conocenos-main h2 {
    font-size: 7.8vw; }
  .conocenos-main section {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 88vw; }
    .conocenos-main section > div picture {
      height: 40vw; }
    .conocenos-main section > div h3 {
      font-size: 7.8vw;
      height: 10vw; }
    .conocenos-main section > div p {
      font-size: 3.3vw;
      height: 25vw; }
    .conocenos-main section > div div a {
      height: 11vw;
      font-size: 8.8vw; }
  /* ---PRODUCTOS--- */
  .productos-main {
    min-height: 315vw; }
    .productos-main h1 {
      margin: auto 2vw;
      margin-top: 2vw;
      font-size: 7.5vw; }
    .productos-main section {
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: calc((85vw)/2);
      grid-template-areas: "b b"
 "a f"
 "d e"
 "c c"
 "g h"
 "g i"; }
  /* ---CONTACTANOS--- */
  .contactanos-main form {
    padding: 3vw 1vw;
    column-gap: 1vw;
    grid-template-columns: 2fr 1fr;
    height: 103vw;
    width: 90VW; }
    .contactanos-main form h1 {
      font-size: 7.5vw; }
    .contactanos-main form label {
      font-size: 3.1VW; }
    .contactanos-main form button {
      margin: 0 33VW;
      font-size: 3.3VW; }
    .contactanos-main form input, .contactanos-main form textarea, .contactanos-main form button {
      font-size: 3.3VW; }
    .contactanos-main form input, .contactanos-main form textarea, .contactanos-main form label {
      height: 6.2vw; }
    .contactanos-main form textarea {
      height: 31.5vw; } }