/* diferenciar fondo entre ambas paginas */
#bodyConservadores {
   background-image: url(/public/img/miscelaneas/PATRONROJOGRANDE\ 1.png);
}

#bodyAyudantes {
   background-image: url(/public/img/miscelaneas/PATRONROSAGRANDE\ 1.png);

}


body {
   display: flex;
   flex-direction: column;
   align-items: center;
}

h1 {
   font-family: 'Orelega One';
   color: var(--colorAzulUltraMarina);
   font-weight: lighter;
   margin-bottom: 3rem;
}

p {
   text-indent: 1rem;
}

body>img {
   width: 40vw;
   margin: -0.2rem;
}

.primeraImagen {
   padding-top: 20vh;
}

.rotate-180 {
   transform: rotate(180deg);
   padding-top: 20vh;
   /* en relidad es botoom pero esta girado */
}

header {
   position: fixed;
   left: 5%;
   top: 2%;
}

header nav {
   display: flex;
   align-items: center;
   width: 100%;
}

header nav a {
   margin-right: 1.5rem;
   font-family: 'Poppins';
   color: var(--colorAzulUltraMarina);
   font-size: large;
}

header nav a:hover {
   color: var(--colorNaranjita);
}

header nav a img {
   width: 7vw;
}

main {
   background-color: var(--colorBlanco);
   margin: 0 30vw;
   padding: 1rem;
   border-radius: 16px;
   width: 70vw;
}

.navegacionSub {
   display: flex;
   align-items: center;
   flex-direction: column;
}

.navegacionSub nav {
   display: flex;
   flex-direction: row;
}

.navegacionSub nav a {
   margin: 0 3rem;
   font-family: 'Orelega One';
   color: var(--colorAzulUltraMarina);
   font-size: x-large;
   padding: 0.5rem;
}

.navegacionSub nav a:hover {
   color: var(--colorNaranjita);
}

h2 {
   text-align: center;
   font-family: 'Orelega One';
   color: var(--colorAzulUltraMarina);
   margin-top: 4rem;
}

footer h3 {
   font-size: x-large;
}

h3 {
   margin: 2rem 0;
   font-family: 'Fraunces';
   color: var(--colorAzulIndigoClaro);
}

p,
li {
   font-family: 'Poppins';
}

p {
   margin-left: 1rem;
}

#precios+section li {
   margin-bottom: 1.5rem;
}

.navegacionSub img {
   margin-top: -1rem;
   width: 50%;
}

footer h3 {
   text-align: center;
   margin-top: 4rem;
   margin-bottom: 0;
}

footer figure {
   margin-top: -1.2rem;
   text-align: center;
}

footer figure img {
   width: 40vw;
}



footer article section {
   min-width: 30vw;
   background: white;
   border-radius: 16px;
   box-shadow: 8px 8px 3px hsla(210, 14%, 53%, 0.656);
}

footer h4 {
   color: var(--colorNaranjita);
   text-align: center;
   font-family: 'Orelega One';
   font-size: x-large;
   font-weight: 200;
}

footer li {
   font-family: 'Poppins';
   margin-bottom: 1rem;
}

footer .enlacePrecio {
   text-align: center;
   margin: 2rem;
}

footer a {
   background: var(--colorHuevo);
   padding: 1rem 2rem;
   border-radius: 8px;
   font-family: 'Orelega One';
   color: var(--colorAzulUltraMarina);
   font-size: x-large;
   box-shadow: 5px 5px 3px hsla(210, 14%, 53%, 0.627);
}

footer a:hover {
   background: #fbb861;
}

footer p {
   font-family: 'Fraunces';
   color: var(--colorGris);
   text-align: center;
}

footer section {
   padding-bottom: 1rem;
}

@media(min-width:768px) {
   footer article {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      margin: 3rem 3rem;
   }

   #bodyConservadores {
      background:
         url('/public/img/miscelaneas/patronrojo_ABAJO.png') repeat;
   }

   #bodyAyudantes {
      background:
         url('/public/img/miscelaneas/patronrosa_ABAJO.png') repeat;
   }

   h3 {
      margin: 2rem 1rem;
   }

   h2 {
      margin-bottom: 3rem;
   }

   h1 {
      margin-top: 3rem;
   }

   footer section:last-of-type div {
      margin-top: 3.5rem;
   }

   footer section ul {
      padding-right: 1rem;
   }

   li {
      margin-bottom: 1rem;
   }
}

@media(max-width:768px) {
   body {
      background-size: 300vw;
      background-position: -20vw -20vw;
   }

   footer article {
      gap: 4vw;
      margin: 5vw;
   }

   #bodyConservadores h1 {
      width: 13ch;
      font-family: 'Orelega One';
   }

   #bodyAyudantes h1 {
      width: 9ch;
   }

   h2 {
      font-weight: 500;
      margin-bottom: 2rem;
   }

   h3 {
      margin: 2rem 0;
      margin-top: 3rem;
   }

   main {
      width: 92vw;
   }

   footer figure {
      margin-top: 1rem;
   }

   footer figure img {
      margin-top: -1rem;
      width: 70vw;
      margin-bottom: 2rem;
   }

   .primeraImagen {
      margin-top: 8rem;
      padding-top: 0;
      width: 50%;
   }

   .navegacionSub h1 {
      color: var(--colorAzulUltraMarina);
      text-align: center;
      margin-bottom: 4rem;
   }

   .navegacionSub nav {
      display: flex;
      gap: 0;
      margin-bottom: 0.4rem;
   }

   .navegacionSub img {
      width: 80vw;
      margin-bottom: 0.5rem;
   }

   .navegacionSub nav a {
      margin: 0 1rem;
      padding: 0;
   }

   header {
      text-align: center;
      position: static;
      display: flex;
      justify-content: center;
   }

   header nav {
      display: flex;
      justify-content: center;
      gap: 0rem;
      padding-top: 1.5rem;
      font-family: 'Poppins';
      margin: auto 0;
   }

   footer article section {
      padding-top: 1rem;
      padding-inline: 1rem;
   }

   footer article section p {
      margin-left: 0rem !important;
      text-indent: 0;
   }

   footer article section:first-of-type {
      margin-bottom: 3rem;
   }


   footer article section:last-of-type {
      margin-bottom: 3rem;
   }

   header nav a {
      font-size: 0.9rem;
      margin: auto 0.3rem;
   }

   header nav a:first-child {
      display: none;
   }

   .rotate-180 {
      margin-bottom: 14rem;
      padding-top: 0;
      width: 50%;
   }

   li {
      margin-bottom: 1rem;
   }
}