@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Akshar:wght@300&family=Koulen&display=swap");
* {
  margin: 0;
  padding: 0; }

main {
  height: auto;
  width: 100vw;
  max-width: 100%;
  background-image: url(../images/background.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden; }

h1 {
  font-family: "Koulen", cursive;
  font-size: 4em;
  color: #BD6F95;
  letter-spacing: 0.2rem;
  padding-top: 1.5rem;
  text-align: center;
  text-shadow: 1px 2px 2px black, 0 0 25px white; }

/*clases*/
.titulos, .titulo-contacto {
  font-family: "Koulen", cursive;
  font-size: 4em;
  color: #BD6F95;
  letter-spacing: 0.2rem;
  padding-top: 1.5rem;
  text-align: center;
  text-shadow: 1px 2px 2px black, 0 0 25px white; }

.titulo-contacto {
  text-shadow: 1em; }

.textos {
  font-family: "Akshar", sans-serif;
  font-size: 2.5em;
  letter-spacing: 0.2rem;
  color: #BD6F95;
  text-shadow: 1px 2px 2px black;
  text-align: center;
  padding: 1em; }

/*footer*/
footer {
  background-color: #E494BA;
  height: auto;
  width: 100vw;
  max-width: 100%;
  overflow: hidden; }
  footer section {
    display: flex;
    flex-flow: column wrap; }
    footer section h2.footerTitulo {
      padding-top: 0.4em;
      padding-left: 0;
      font-family: "Koulen", cursive;
      font-size: 1.5rem;
      text-align: center;
      letter-spacing: 2px;
      color: #BD6F95;
      text-shadow: 1px 2px 2px black, 0 0 25px white; }
    footer section ul {
      padding-left: 0; }
    footer section li {
      list-style: none; }
      footer section li a.iconos {
        align-content: center; }

.footerTitle {
  font-family: "Koulen", cursive;
  font-size: 1.5rem;
  text-align: center;
  letter-spacing: 2px;
  padding-left: 1.5rem;
  color: #BD6F95;
  text-shadow: 1px 2px 2px black, 0 0 25px white; }

.iconos {
  display: flex;
  flex-flow: row wrap;
  justify-content: center; }

ul li {
  list-style: none; }

ul {
  padding-left: 0; }

nav.menu {
  background-color: #F9CCE0;
  box-shadow: 5px 0 10px rgba(0, 0, 0, 0.6);
  position: sticky;
  overflow: hidden; }
  nav.menu ul.menu_items {
    font-family: "Akshar", sans-serif;
    font-size: 1.5rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1.5rem;
    text-align: 0; }
  nav.menu a:hover {
    color: #ADA5A5; }

/*index*/
.carrousel {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: space-evenly; }

/*Página de Contacto*/
form {
  width: 80vw;
  margin: 0 auto;
  background-color: white;
  opacity: 0.5;
  filter: alpha(opacity=50);
  color: black;
  font-family: "Akshar", sans-serif;
  letter-spacing: 1px;
  font-size: 2rem;
  text-align: center; }

/*Página de Productos*/
.fila-img {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly; }

table {
  letter-spacing: 1px;
  font-size: 1.5rem;
  text-align: center;
  font-family: "Akshar", sans-serif;
  color: #040101; }

/*Página de Servicios*/
figure {
  width: 30%; }
  figure:hover {
    border: 1px solid lightcoral;
    transition: transform .2s;
    transform: scale(1); }
    figure:hover img {
      width: 100%;
      height: auto; }

.figure-text {
  letter-spacing: 1px;
  font-size: 1.5rem;
  text-align: center;
  text-shadow: 2px 2px 5px purple;
  padding: 0.7em;
  font-family: "Akshar", sans-serif;
  color: #040101; }

.galeria {
  margin: 10px 20px;
  box-shadow: 0 4px 8px 0 lightpink, 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  width: 350px; }

a {
  text-decoration: none; }

.rights {
  font-family: serif;
  text-align: center;
  color: black; }

/*index*/
div.contenedor {
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, auto);
  grid-template-areas: "main main main"
 "galeria galeria galeria"
 "section section section"
 "pie pie pie"; }

#main {
  grid-area: main; }

#galeriaFotos {
  grid-area: galeria; }

#section {
  grid-area: section; }

#footer {
  grid-area: pie; }

div.carrousel {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: space-evenly; }

/*pagina de servicios*/
.galeria-flex {
  max-width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-template-areas: "encabezado encabezado encabezado"
 "figUno figDos figTres"
 "footer footer footer"; }

#encabezado-servicios {
  grid-area: encabezado; }

#figureUno {
  grid-area: figUno; }

#figureDos {
  grid-area: figDos; }

#figureTres {
  grid-area: figTres; }

/*media queries*/
@media screen and (max-width: 300px) {
  .carrousel {
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-start;
    align-items: center; }
  #footer {
    display: block;
    align-items: center; }
  .somosMeraki {
    display: flex;
    flex-flow: column wrap;
    justify-content: center; }
  .galeria-flex {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(5, auto);
    grid-template-areas: "encabezado"
 "figUno"
 "figDos"
 "figTres"
 "footer"; }
  .galeria {
    margin: 0;
    width: 100%; }
  .titulos, .titulo-contacto {
    font-size: 1em;
    text-shadow: purple;
    letter-spacing: 0; }
  .textos {
    color: black;
    font-size: 0.8em;
    text-shadow: 0 0 25px white;
    letter-spacing: 0; }
  form {
    width: 100%; } }

@media screen and (max-width: 768px) {
  #footer {
    display: block;
    align-items: center; }
  .carrousel {
    display: flex;
    flex-flow: column wrap;
    align-items: center; }
  .somosMeraki {
    display: flex;
    flex-flow: column wrap;
    justify-content: center; }
  .galeria-flex {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(5, auto);
    grid-template-areas: "encabezado"
 "figUno"
 "figDos"
 "figTres"
 "footer"; }
  .galeria {
    margin: 0;
    width: 100%; }
  .titulos, .titulo-contacto {
    font-size: 1.5em;
    text-shadow: purple;
    letter-spacing: 0; }
  .textos {
    color: black;
    font-size: 1em;
    text-shadow: 0 0 25px white;
    letter-spacing: 0; }
  figure {
    width: 30%; }
  form {
    width: 80%;
    font-size: 1.5rem; } }