@charset "UTF-8";
/*import propiedades generales, reseteos, hover, actives etc*/
* { /*reseteo margen padding y box sizing*/
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

.selector-for-some-widget { /*clase para evitar errores bootstrap*/
  box-sizing: content-box;
}

body { /*imagen de fondo*/
  background-image: url(../assets/image/fondo-alpillera.jpg);
}

a:link, a:visited, a:active { /*quite las propiedades por defecto de los enlaces*/
  text-decoration: none;
}

a:focus { /*bordes al enfocar*/
  border-color: 2px black solid;
}

@media (hover: hover) {
  .boton:hover { /*puse un media hover para evitar errores en dispositivos*/
    transform: scale(150%);
    transition: 0.5s;
    box-shadow: 15px 15px 15px 0px rgba(0, 0, 0, 0.75);
  }
}
.boton a:active { /*active para todos los enlaces*/
  text-decoration: underline;
  font-weight: bold;
  color: rgb(0, 0, 0);
}

* p {
  margin: 0;
}

/*import del indice*/
/*variables*/ /*mixins*/
/*variables*/
.indice { /*centrado*/
  text-align: center;
}

.boton-index { /*propiedades botones indice*/
  padding: 0.5%;
  border-radius: 10px;
  border: rgb(110, 108, 108) 2px solid;
  background-color: #925858;
}
.boton-index a {
  color: white;
  font-size: 170%;
}

.lista-indice { /*quite estilo listas al indice*/
  padding: 1%;
  list-style-type: none;
}

#grilla-cont-recetas {
  margin: 1% 0;
  background-color: rgb(252, 224, 191);
  border-radius: 15px;
  display: grid;
  grid-template-areas: "tipos-cafe bebidas-cafe" "lista-cafe lista-bebidas";
  justify-items: center;
  align-items: center;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  border: rgb(110, 108, 108) 2px solid;
}

@media (max-width: 400px) {
  #grilla-cont-recetas {
    height: 60vh;
  }
}
#tipos-cafe {
  grid-area: tipos-cafe;
  text-decoration: underline;
}

#lista-cafes {
  grid-area: lista-cafe;
  line-height: 30px;
}

#bebidas-cafe {
  grid-area: bebidas-cafe;
  text-decoration: underline;
}

#lista-bebidas {
  grid-area: lista-bebidas;
  line-height: 30px;
}

#agradecimiento { /* contenedor agradecimiento index*/
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  font-size: 250%;
  text-align: center;
  background-color: rgb(255, 255, 255);
  color: rgb(116, 49, 49);
  font-weight: bold;
  border-radius: 15px;
  width: 80vw;
}

@media (max-width: 600px) {
  #agradecimiento {
    font-size: 120%;
  }
}
.coraz-cafe { /*tamaño corazones img index*/
  height: 20%;
  width: 20%;
  z-index: 5;
}

/*import barra de navegacion*/
/*variables*/ /*mixins*/
/*variables*/
/*propiedades barra de navegacion*/
header {
  position: sticky;
  width: 100%;
  top: 0;
  z-index: 9;
  background-color: #925858;
}

.barra-nav {
  height: fit-content;
}
.barra-nav ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: center;
  margin: 0;
  padding: 2% 0;
  gap: 10px;
}
.barra-nav ul li {
  display: inline-block;
  list-style: none;
}

#barra-nav2 {
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-flow: row nowrap;
  padding: 2%;
  margin: 0;
}

.iconos-nav { /*icono nav bar*/
  height: 9vh;
  width: 5vw;
}

.boton-nav { /*propiedades botones nav*/
  font-size: 170%;
  padding: 0.2%;
  border: 2px rgb(255, 255, 255) dotted;
  border-radius: 5px;
  background-color: #925858;
}
.boton-nav a {
  color: rgb(255, 255, 255);
  font-weight: bold;
}

/*import centrados main, parrafos, titulos y subtitulos*/
/*variables*/ /*mixins*/
/*variables*/
#centrado-main { /*centrado de la pagina en general*/
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.parrafo { /*propiedades generales para todos los parrafos*/
  width: clamp(300px, 80%, 1000px);
  margin: 2%;
  font-size: 130%;
  padding: 1% 5%;
  color: black;
  background-color: rgb(255, 255, 255);
  line-height: 40px;
  border-radius: 15px;
}

@media (max-width: 600px) {
  .parrafo {
    font-size: 110%;
    line-height: 50px;
  }
}
.titulo { /*titulos*/
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  padding: 1%;
  text-decoration: underline;
  color: #fff;
  background-color: #99A253;
  margin-bottom: 10px;
}

.grano-trio { /*icono titulos*/
  height: 7vh;
  width: 7vh;
  animation: doblado 1s infinite;
}

@keyframes doblado {
  0% {
    transform: skew(40deg, 0deg);
  }
  50% {
    transform: skew(-20deg, 0deg);
  }
  100% {
    transform: skew(40deg, 0deg);
  }
}
.subtitulo {
  text-align: center;
  font-size: 150%;
  font-weight: bold;
  color: #726f6f;
  margin-bottom: 10px;
  text-decoration: underline;
  text-decoration-color: #925858;
  text-decoration-thickness: 2px;
}

.subtitulo-suelto { /*puse unos estilos a los enlaces y aclaraciones que estan por fuerra de parrafos*/
  font-size: 150%;
  color: white;
  font-weight: bold;
  font-style: oblique;
  display: inline-block;
  margin-top: 1%;
  margin-bottom: 1%;
  background-color: #99A253;
  border-radius: 15px;
}

@media (max-width: 600px) {
  .subtitulo-suelto {
    font-size: 120%;
  }
}
#cont-flechas {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-evenly;
  height: fit-content;
  width: 90vw;
}
#cont-flechas .flecha {
  height: 15vh;
  width: auto;
  border-radius: 50%;
}

/*import imagenes y sus propiedades*/
/*mixins*/
/*variables*/
/*ScSS*/
.imagen, .cont-img-doble, .imagen-grde { /*propiedades grales cont imagen en todas las pags*/
  height: 80vh;
  width: 95vw;
  box-shadow: 15px 15px 15px 0px rgba(0, 0, 0, 0.75);
  border: #fff 15px solid;
  border-radius: 15px;
  background-color: #fff;
}

/*propiedades grales cont imagen gran tamaño todas las pags*/
.imagen-grde {
  height: 115vh;
}

.cont-img-doble {
  position: relative;
}

/*contenedor reajustado de forma vertical*/
@media (max-width: 600px) {
  .cont-img-doble {
    height: 160vh;
    width: 95vw;
  }
}
.cont-img-doble .img-doble1, .cont-img-doble .img-doble2 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
}

/*medias para reubicar las imagenes*/
@media (max-width: 600px) {
  .cont-img-doble .img-doble1, .cont-img-doble .img-doble2 {
    height: 50%;
    width: 100%;
  }
}
.cont-img-doble .img-doble2 {
  right: 0;
  left: auto;
}

/*puse top auto para que ignore el valor que di anteriormente*/
@media (max-width: 600px) {
  .cont-img-doble .img-doble2 {
    bottom: 0;
    top: auto;
    height: 50%;
    width: 100%;
  }
}
/*import footer*/
/*variables*/ /*mixins*/
/*variables*/
/*propiedades footer*/
#marco-cafe { /*fondo detras del footer*/
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150vh;
  z-index: -9;
  margin: 0;
  padding: 0;
}

footer {
  position: relative;
  background-color: rgba(95, 68, 17, 0.631372549);
  color: #fff;
  padding: 1% 1%;
}
footer ul {
  list-style: none;
}
footer ul li {
  margin-bottom: 1%;
  color: #fff;
  font-size: 110%;
  text-decoration: none;
}
footer ul li h4 {
  font-size: 130%;
  font-weight: bold;
  margin-bottom: 2%;
}
footer ul li h4 p {
  font-size: 110%;
  line-height: 1.5;
  margin-bottom: 2%;
}

@media (max-width: 600px) {
  footer h4 {
    font-size: 100%;
  }
  footer h4 p {
    font-size: 80%;
  }
  footer h4 p ul li {
    font-size: 80%;
  }
}
.copy-right {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #925858;
  padding: 1% 0;
}
.copy-right p {
  font-size: 80%;
  text-align: center;
  margin: 0;
}

.granos-cafe { /*icono footer copyright*/
  height: 7vh;
  width: 7vh;
  animation: rotacion 1.5s infinite ease-in-out;
}

@keyframes rotacion {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}

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