@charset "UTF-8";
/*reset*/
@import url("https://fonts.googleapis.com/css2?family=Delius&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Delius&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: white;
  margin-left: 0;
}

/*import partials*/
/*Variables*/
/*Mixin*/
/*Letra google font*/
/*html en todas las paginas*/
html {
  font-size: 62.5%;
  text-shadow: 1px 2px 7px rgb(0, 0, 0);
  font-family: "Delius", cursive;
}

/*body todas las paginas*/
body {
  background-image: url(../images/fondo.png);
}

/*elementos para todas las paginas*/
ul {
  font-size: 2.5rem;
  list-style-type: none;
}

li :hover {
  border-radius: 20px;
  background-color: #c88487;
}

a {
  font-size: 2.5rem;
  text-decoration: none;
}

p {
  font-size: 2rem;
  padding: 30px;
}

h1 {
  padding: 15px;
  text-align: center;
  font-size: 4rem;
  letter-spacing: 5px;
}

h2 {
  font-size: 3rem;
  letter-spacing: 3px;
  padding: 10px;
}

div {
  padding: 30px;
}

h3 {
  color: white;
  font-size: 3rem;
  letter-spacing: 3px;
  margin-top: 14%;
}

/*Header en todas las paginas*/
header {
  background-color: #4c2c5f;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
header ul {
  margin-right: 10px;
  height: 100%;
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav {
  width: 55%;
}

/*Pie de Pagina en todas las paginas*/
footer {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.6666666667), transparent, rgba(0, 0, 0, 0.6666666667));
  background-color: #de5e54;
  display: flex;
  align-items: center;
  height: 300px;
}
footer ul {
  font-size: 1rem;
  margin-right: 10px;
  height: 100%;
  list-style-type: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 5%;
  margin: 2%;
}

li {
  list-style-type: none;
}
li a {
  color: white;
}

.vacio {
  width: 100%;
  height: 100%;
}

/*pagina de inicio grid*/
.index-grid {
  display: grid;
  grid-template-areas: "titulos1 titulos1 titulos1" ". pelu ." "titlug titlug titlug" "banner banner banner" "titulo2 titulo2 titulo2" " trabajo trabajo trabajo";
  grid-template-columns: 0% 100% 0%;
  grid-template-rows: 100px 700px 100px 200px 400px 450px;
  justify-content: center;
}

.titulo2 {
  grid-area: titulos1;
}

.tit-lugar {
  grid-area: titlug;
  text-align: center;
}

.banner {
  grid-area: banner;
  height: 300px;
  background-size: cover;
  display: flex;
  text-align: center;
}

.titulos {
  grid-area: titulo2;
  display: flex;
  justify-content: space-around;
  background-image: url(../images/dibu.png);
  background-size: cover;
}

.cont-pelu {
  grid-area: pelu;
  display: flex;
  justify-content: center;
}

.trabajos {
  grid-area: trabajo;
  background-color: #c88487;
  display: flex;
  justify-content: space-around;
}

/*pagina nosotros grid*/
.nosotros-grid {
  display: grid;
  grid-template-areas: "titulo3 titulo3 titulo3" "imagenes imagenes imagenes" "titulo4 titulo4 titulo4" "historia historia historia";
  grid-template-columns: 0% 70% 30%;
  grid-template-rows: 100px 600px 100px 400px;
  justify-content: center;
}

.galeria {
  grid-area: titulo3;
}

.titulo-historia {
  grid-area: titulo4;
  text-align: center;
}

.imagenes {
  grid-area: imagenes;
  padding: 2%;
  display: flex;
  justify-content: space-between;
}

.historia {
  grid-area: historia;
  display: flex;
  justify-content: space-around;
}

/*pagina precios grid*/
.precios-grid {
  display: grid;
  grid-template-areas: "titulo titulo titulo" ". precios ." ". . .";
  grid-template-columns: 20% 70% 20%;
  grid-template-rows: 100px 600px 100px;
  justify-content: center;
}

.titulo1 {
  grid-area: titulo;
}

.precio {
  grid-area: precios;
}

/*pagina de consultas grid*/
.consultas-grid {
  display: grid;
  grid-template-areas: "titulos5 titulos5 titulos5" "titulos6 titulos6 titulos6" "area area area" "boton1 . boton2";
  grid-template-columns: 30% 30% 30%;
  grid-template-rows: 100px 70px 300px 60px;
  justify-content: center;
}

.consultas {
  grid-area: titulos5;
}

.titulo-consultas {
  grid-area: titulos6;
}

.t-area {
  grid-area: area;
  display: flex;
  justify-content: center;
}

.enviar {
  color: black;
  grid-area: boton1;
  border-radius: 20px;
  margin: 10px;
}

.reset {
  color: black;
  grid-area: boton2;
  border-radius: 20px;
  margin: 10px;
}

.bordes {
  border-left: solid 2px white;
  border-right: solid 2px white;
  padding: 5%;
  padding-top: 2%;
}

/*tabla en pagina precios*/
table {
  font-size: 2.5rem;
  padding: 10px;
}

/*body pagina comentarios*/
textarea {
  font-size: 1.5rem;
  padding: 20px;
  border-radius: 10px;
  width: 100%;
  background-color: antiquewhite;
  color: black;
}

/*body pagina turnos*/
.container1 button {
  background-color: #4c2c5f;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 20px;
  border-radius: 5px;
  transition: background-color 0.2s;
}

.container {
  font-size: 1.5rem;
  padding: 20px;
  border-radius: 10px;
  width: 100%;
  background-color: #a96667;
  max-width: 600px;
  margin: auto;
}

.container textarea, .container input {
  border: 2px solid #c88487;
  border-radius: 5px;
  font-size: 20px;
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
}

.container button {
  background-color: #c88487;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 20px;
  border-radius: 5px;
  transition: background-color 0.2s;
}

.container button:hover {
  background-color: #f5a3a4;
  transform: scale(1);
}

.label {
  color: white;
  font-size: 2rem;
  margin: 10px 0 5px;
}

/*Imagenes*/
.ana {
  width: 400px;
  margin: 5px;
}

.ana-bootstraps {
  width: 400px;
  margin: 5px;
}

.peluqueria {
  border: solid;
  width: 700px;
  height: 700px;
}

.imagenes {
  padding: 7%;
}

.mapa {
  font-size: 1.5rem;
  padding: 20px;
  border-radius: 10px;
  width: 100%;
  text-align: center;
}

/*Variables*/
/*Mixin*/
/*Letra google font*/
/*Escritorio*/
/*Fin Escritorio*/
/*Tablet*/
/*Portrait*/
@media (min-width: 576px) and (max-width: 991.98px) and (orientation: portrait) {
  header {
    width: 100%;
  }
  header nav {
    flex-direction: column;
    justify-content: end;
  }
  header nav ul li {
    margin-right: 10px;
  }
  .index-grid {
    display: grid;
    grid-template-areas: "titulos1 titulos1 titulos1" ". pelu ." "titlug titlug titlug" "banner banner banner" "titulo2 titulo2 titulo2" " trabajo trabajo trabajo";
    grid-template-columns: 0% 110% 0%;
    grid-template-rows: 100px 700px 100px 300px 400px 450px;
    justify-content: center;
  }
  footer {
    height: 330px;
    width: 105%;
  }
  .precios-grid {
    display: grid;
    grid-template-areas: "titulo" "precios" ".";
    grid-template-columns: 100%;
    grid-template-rows: 100px 1000px 100px;
    justify-content: center;
  }
  .nena {
    display: none;
  }
  .nene {
    display: none;
  }
}
/*landscape*/
@media (min-width: 991.98px) and (max-width: 1199.98px) and (orientation: landscape) {
  header {
    width: 105%;
  }
  header nav {
    justify-content: end;
  }
  header nav ul li {
    margin-right: 10px; /* Espacio entre elementos */
  }
  .index-grid {
    display: grid;
    grid-template-areas: "titulos1 titulos1 titulos1" ". pelu ." "titlug titlug titlug" "banner banner banner" "titulo2 titulo2 titulo2" " trabajo trabajo trabajo";
    grid-template-columns: 0% 110% 0%;
    grid-template-rows: 100px 700px 100px 300px 400px 450px;
    justify-content: center;
  }
  footer {
    height: 330px;
    width: 105%;
  }
  .precios-grid {
    display: grid;
    grid-template-areas: "titulo" "precios" ".";
    grid-template-columns: 100%;
    grid-template-rows: 100px 1000px 100px;
    justify-content: center;
  }
  .nena {
    display: none;
  }
  .nene {
    display: none;
  }
}
/*fin tablet*/
/*movil*/
/*Portrait*/
/*Default*/
/*landscape*/
@media (min-width: 375px) and (max-width: 480px) {
  /*Mobile pagina inicio grid*/
  .index-grid {
    display: grid;
    grid-template-areas: "titulos1" " pelu" "titlug" "banner" "titulo2" " trabajo";
    grid-template-columns: 690%;
    grid-template-rows: 100px 750px 150px 400px 250px 220px;
    justify-content: center;
  }
  .peluqueria {
    border: solid;
    width: 350px;
  }
  header {
    width: 400%;
    flex-direction: column;
  }
  footer {
    width: 106%;
  }
  nav {
    width: 400%;
  }
  a {
    font-size: 1.1rem;
  }
  ul {
    font-size: 1rem;
  }
  .ana {
    width: 400px;
  }
  .ana-bootstraps {
    margin: -20px;
  }
  .cont-pelu {
    justify-content: right;
    padding: 30px;
  }
  .trabajos {
    width: 106%;
  }
  div {
    padding: 10px;
  }
  h2 {
    height: 40px;
    font-size: 2rem;
    letter-spacing: 7px;
  }
  .imagenes {
    flex-direction: column;
    height: 150px;
  }
}
/*fin movil*/ /* Escritorio */
@media (min-width: 1199.98px) {
  /* Estilos específicos para pantallas grandes */
  body {
    background-color: #f4f4f4;
  }
  .contenedor {
    width: 60%;
    margin: auto;
  }
}
/* Tablet Portrait */
@media (min-width: 576px) and (max-width: 991.98px) and (orientation: portrait) {
  /* Ajustes para tablets en orientación vertical */
  .contenedor {
    width: 80%;
    padding: 20px;
  }
  h1 {
    font-size: 2.5rem;
  }
}
/* Tablet Landscape */
@media (min-width: 991.98px) and (max-width: 1199.98px) and (orientation: landscape) {
  /* Ajustes para tablets en orientación horizontal */
  nav {
    display: flex;
    justify-content: space-between;
  }
  .imagenes {
    flex-direction: row;
  }
}
/* Móvil Portrait */
@media (max-width: 575.98px) and (orientation: portrait) {
  /* Estilos para móviles en orientación vertical */
  body {
    background-color: #e0f7fa;
  }
  h1 {
    font-size: 2rem;
  }
  .contenedor {
    width: 100%;
    padding: 10px;
  }
}
/* Móvil Landscape */
@media (min-width: 576px) and (max-width: 991.98px) and (orientation: landscape) {
  /* Estilos para móviles en orientación horizontal */
  nav {
    flex-direction: row;
    align-items: center;
  }
  .contenedor {
    width: 90%;
    margin: auto;
  }
}
/*Mobile pagina inicio grid*/
@media (max-width: 480px) {
  html {
    width: 106% !important;
  }
  .index-grid {
    display: grid;
    grid-template-areas: "titulos1" "pelu" "titlug" "banner" "titulo2" "trabajo";
    grid-template-columns: 100%;
    grid-template-rows: 100px 750px 150px 400px 250px 220px;
    justify-content: center;
  }
  .peluqueria {
    border: solid;
    width: 106%;
  }
  header {
    width: 106%;
    flex-direction: column;
  }
  footer {
    width: 106%;
  }
  nav {
    width: 100%;
  }
  a {
    font-size: 1.1rem;
  }
  ul {
    font-size: 1rem;
  }
  .ana {
    width: 400px;
  }
  .ana-bootstraps {
    margin: -20px;
  }
  .cont-pelu {
    justify-content: flex-start;
    padding: 30px;
  }
  .trabajos {
    width: 106%;
  }
  .tit-lugar {
    width: 106%;
  }
  .titulo2 {
    width: 106%;
  }
  .titulos {
    width: 106%;
  }
  .banner {
    width: 106%;
  }
  div {
    padding: 10px;
  }
  h2 {
    height: 40px;
    font-size: 1.5rem;
    letter-spacing: 7px;
    text-align: center;
  }
  .imagenes {
    flex-direction: column;
    height: 150px;
    width: 106%;
  }
  /*Grid nosotros mobile*/
  .nosotros-grid {
    display: grid;
    grid-template-areas: "titulo3" "imagenes" "titulo4" "historia";
    grid-template-columns: 85%;
    grid-template-rows: 100px 1600px 100px 1000px;
    justify-content: center;
  }
  .titulo-historia {
    grid-area: titulo4;
    width: 106%;
  }
  .historia {
    width: 106%;
  }
  .nena {
    display: none;
  }
  .nene {
    display: none;
  }
  h3 {
    font-size: 1.5rem;
  }
  .linea {
    display: none;
  }
  p {
    font-size: 1.5rem;
  }
  h1 {
    font-size: 2rem;
  }
  /*pagina precios grid*/
  .precios-grid {
    display: grid;
    grid-template-areas: "titulo" "precios";
    grid-template-columns: 100%;
    grid-template-rows: 100px 500px;
  }
  /*tabla en pagina precios*/
  table {
    font-size: 1.7rem;
    padding: 2px;
  }
  .consultas-grid {
    display: grid;
    grid-template-areas: "titulos5 titulos5 titulos5" "titulos6 titulos6 titulos6" "area area area" "boton1 . boton2";
    grid-template-columns: 30% 30% 30%;
    grid-template-rows: 100px 70px 330px 60px;
    justify-content: center;
  }
  .div-input {
    width: 99%;
  }
  .consultas-grid {
    width: 106%;
  }
}

/*# sourceMappingURL=estilo.css.map */