/* VARIABLES */
/* LISTAS */
/* EXTENDS */
@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@1,200&display=swap");
.productos .container .productos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
  gap: 5%;
  place-items: center; }

.descripcion {
  text-align: center;
  font-weight: 900;
  font-size: 1.2em; }

/* MIXIN */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box; }

body {
  font-family: 'Raleway', sans-serif;
  background-color: #FFE3E1; }

.titulo {
  text-align: center;
  padding-top: 20px;
  margin-bottom: -10px;
  font-weight: 900; }

/*Whatsapp*/
.whatsapp {
  position: fixed;
  right: 50px;
  bottom: 50px;
  z-index: 1;
  transition: 0.5s; }
  .whatsapp img {
    width: 3em;
    height: 3em; }
  .whatsapp:hover {
    filter: drop-shadow(0 0 0.75rem #3a3939); }

.descripcion {
  margin: 30px; }

.marginTop {
  margin-top: 6%; }

header {
  position: sticky;
  top: 0; }
  header .bg-pink {
    background-color: rgba(255, 31, 136, 0.83); }
    header .bg-pink .logo {
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 1em;
      font-weight: 900; }
      header .bg-pink .logo a {
        display: flex;
        align-items: center;
        font-size: 1.3em; }
        header .bg-pink .logo a img {
          width: 3.5em;
          margin-right: 15px; }

.text-menu {
  color: white;
  text-decoration: none !important;
  font-weight: 900 !important;
  font-family: 'Raleway', sans-serif !important;
  text-align: center !important;
  font-size: 1.5em !important; }
  .text-menu:hover {
    color: black; }

.pagina-activa {
  text-decoration-style: double !important;
  text-decoration-line: underline !important;
  text-underline-position: under !important; }

/* INDEX */
.banner {
  background-image: url("../img/portada.jpg");
  width: 100%;
  height: 50vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: white; }
  .banner div {
    background-color: rgba(0, 0, 0, 0.267);
    width: 50%;
    text-align: center;
    border-radius: 1em;
    padding: 20px;
    font-size: 1.3em; }

.productos div {
  width: 95%;
  height: 25em;
  margin: auto;
  text-align: center;
  margin-top: 5%; }

.productos .container {
  width: 90%;
  margin: auto;
  margin-top: 5%; }
  .productos .container img {
    width: 12.7em;
    height: 13rem;
    object-fit: cover; }
  .productos .container .productos-grid div {
    background: white; }
  .productos .container .productos-grid .grid-items {
    width: 90%;
    box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.45);
    transition: 1s;
    cursor: pointer; }
    .productos .container .productos-grid .grid-items img {
      width: 100%; }
    .productos .container .productos-grid .grid-items .productos__precio {
      margin-top: 3%;
      height: 30%;
      font-weight: 800; }
      .productos .container .productos-grid .grid-items .productos__precio h3 {
        font-weight: 900; }
    .productos .container .productos-grid .grid-items:hover {
      width: 100% !important;
      box-shadow: 2px 2px 8px 0px rgba(255, 44, 133, 0.67); }

.servicios h2 {
  margin-top: 6%; }

.servicios div img {
  width: 100%;
  height: 5em; }

.servicios-flex {
  display: flex;
  justify-content: space-evenly; }

/* SABORES */
.sabores {
  display: flex;
  flex-direction: column; }
  .sabores-row {
    display: flex;
    align-items: center;
    background-color: white;
    margin: 2%;
    border: 2px solid #c3c6ce75; }
    .sabores-row .ancho-div {
      width: 30%;
      margin: 1% auto 3% auto; }
      .sabores-row .ancho-div .sabores__imagenes {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        border: 5px solid rgba(255, 31, 136, 0.349);
        margin-top: 5%;
        margin-bottom: 5%; }
      .sabores-row .ancho-div .sabores__titulo {
        margin-bottom: 10px; }
      .sabores-row .ancho-div .sabores__lista {
        list-style-type: circle;
        font-weight: 600; }

/* NOSOTROS */
.nosotros {
  width: 80%;
  display: flex;
  justify-content: center;
  height: 28em;
  margin: 30px; }
  .nosotros__info {
    width: 40%;
    height: auto;
    margin: 4% 0% 4% 9%;
    align-items: center;
    font-weight: 900; }
    .nosotros__info p {
      text-align: center; }
  .nosotros__imagen {
    width: 100%;
    height: 25em; }

/* CONTACTO */
.contacto {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  margin: auto; }
  .contacto div {
    text-align: center; }
  .contacto form {
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid #818080;
    padding: 20px;
    border-radius: 4px; }
  .contacto textarea {
    width: 100%;
    font-family: sans-serif;
    font-weight: 500;
    background: whitesmoke;
    font-size: 1em;
    padding: 5px;
    margin-bottom: 10px; }
  .contacto__imagen {
    width: 60%;
    margin: 15px; }
  .contacto__input {
    width: 100%;
    background: whitesmoke;
    border-radius: 4px;
    margin-bottom: 10px;
    padding: 5px;
    font-weight: 600;
    border: 1px solid #818080;
    font-size: 1em; }
  .contacto .boton input {
    box-shadow: inset 0px 1px 0px 0px white;
    background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
    background-color: #f9f9f9;
    border-radius: 6px;
    border: 1px solid #dcdcdc;
    display: inline-block;
    cursor: pointer;
    color: #666666;
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #ffffff; }
    .contacto .boton input:hover {
      background: linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
      background-color: #e9e9e9; }

/* TRABAJA */
.trabaja__banner {
  background-image: linear-gradient(rgba(0, 0, 0, 0.471), rgba(0, 0, 0, 0.409)), url(../img/trabajo.jpg);
  width: 100%;
  height: 50vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap; }
  .trabaja__banner .trabaja__titulo {
    width: 50%;
    height: 6em;
    text-align: center;
    border-radius: 1em;
    padding: 20px;
    padding-bottom: 7em;
    color: white;
    font-size: 1.4em;
    border: 10px double white; }

.trabaja__formulario {
  width: 80%;
  margin: auto; }
  .trabaja__formulario form {
    background: #ffffffe6;
    border: 1px solid #818080;
    margin-top: 5%;
    margin-bottom: 2%;
    padding-bottom: 2%;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; }
  .trabaja__formulario .trabaja__input {
    padding: 2%;
    margin: auto;
    font-weight: 900;
    font-size: 1.2em;
    width: 50%;
    display: flex;
    flex-direction: column; }
    .trabaja__formulario .trabaja__input input {
      margin-top: 5px;
      padding: 3px;
      border: 0;
      border-bottom: 2px solid #452b2b;
      background: #00000003;
      /* Ocultar input number*/ }
      .trabaja__formulario .trabaja__input input[type=number]::-webkit-inner-spin-button, .trabaja__formulario .trabaja__input input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0; }
      .trabaja__formulario .trabaja__input input:focus {
        outline: none; }
  .trabaja__formulario .trabaja__boton {
    cursor: pointer;
    padding: 1%;
    margin-top: 2%;
    background-color: #f9f9f9;
    border-radius: 6px;
    border: 1px solid #dcdcdc;
    font-size: 15px;
    font-weight: bold; }

footer {
  text-align: center;
  background-color: rgba(255, 31, 136, 0.83);
  position: relative;
  padding: 20px; }
  footer .flex-center {
    display: flex;
    justify-content: space-evenly; }
    footer .flex-center .iconos {
      width: 1em;
      height: 1em;
      margin-right: 5px; }
    footer .flex-center .map {
      width: 18em;
      height: 15em;
      margin-bottom: 20px; }

.footer__texto {
  font-size: 1.5em;
  color: white;
  font-weight: 900; }

/* INDEX */
@media screen and (min-width: 320px) and (max-width: 382px) {
  .logo img {
    width: 1em !important; }
  .banner div h1 {
    font-size: 1.1em; }
  .productos-grid {
    grid-template-columns: repeat(2, 50%) !important;
    grid-auto-rows: 100% !important;
    grid-gap: 10px;
    place-items: center !important; }
  .grid-items img {
    width: 100% !important;
    height: 10em !important;
    object-fit: cover; }
  .productos__precio h3 {
    font-size: 1.2em; }
  .grid-items {
    width: 100% !important;
    height: 24em !important;
    margin-bottom: 70px; }
  .servicios {
    margin-top: 400px !important; }
  .whatsapp {
    right: 5px; } }

@media screen and (min-width: 384px) and (max-width: 767px) {
  .grid-items img {
    width: 100% !important;
    height: 10em !important;
    object-fit: cover; }
  .grid-items {
    width: 100% !important;
    height: 20em !important; }
  .productos-grid {
    grid-template-columns: repeat(2, 50%) !important; }
  .servicios {
    margin-top: 300px !important; } }

@media screen and (min-width: 768px) and (max-width: 991px) {
  .grid-items img {
    width: 100% !important;
    height: 16em !important; }
  .grid-items {
    height: 27rem !important; }
  .productos-grid {
    grid-template-columns: repeat(2, 50%) !important;
    grid-auto-rows: 100px !important;
    grid-gap: 1px;
    place-items: center !important; }
  .servicios {
    margin-top: 550px !important; }
  .whatsapp {
    right: 5px; } }

/* SABORES */
@media screen and (min-width: 320px) and (max-width: 382px) {
  .sabores-row {
    flex-direction: column;
    align-items: center; }
    .sabores-row .ancho-div {
      width: 80%;
      margin: auto;
      text-align: center; }
    .sabores-row .sabores__titulo {
      font-weight: bold; }
    .sabores-row .sabores__lista {
      text-align: left; } }

@media screen and (min-width: 384px) and (max-width: 767px) {
  .sabores-row {
    flex-direction: column;
    align-items: center; }
    .sabores-row .ancho-div {
      width: 80%;
      margin: auto;
      text-align: center; }
    .sabores-row .sabores__titulo {
      font-weight: bold; }
    .sabores-row .sabores__lista {
      text-align: left;
      padding-left: 5em; }
    .sabores-row .sabores__lista--active {
      padding-left: 8em; } }

@media screen and (min-width: 768px) and (max-width: 991px) {
  .sabores-row {
    flex-direction: column;
    align-items: center; }
    .sabores-row .ancho-div {
      width: 80%;
      margin: auto;
      text-align: center; }
    .sabores-row .sabores__titulo {
      font-weight: bold; }
    .sabores-row .sabores__lista {
      list-style-type: none;
      text-align: left;
      padding-left: 10em; }
    .sabores-row .sabores__lista--active {
      padding-left: 10em; } }

/*NOSOTROS*/
@media screen and (min-width: 320px) and (max-width: 370px) {
  .nosotros {
    width: fit-content;
    height: initial;
    flex-direction: column; }
    .nosotros__info {
      display: flex;
      width: auto;
      flex-direction: column;
      margin: initial;
      font-weight: 900; }
    .nosotros__imagen {
      width: 16em;
      margin: auto;
      height: 15em; } }

@media screen and (min-width: 371px) and (max-width: 991px) {
  .nosotros {
    width: fit-content;
    height: initial;
    flex-direction: column; }
    .nosotros__info {
      display: flex;
      width: auto;
      flex-direction: column;
      margin: initial;
      font-weight: 900; }
    .nosotros__imagen {
      width: 20em;
      margin: auto;
      height: 20em; } }

/* CONTACTO */
@media screen and (min-width: 320px) and (max-width: 382px) {
  .logo img {
    width: 2.5em !important; }
  .logo a {
    font-size: 1.3em !important; }
  .contacto {
    flex-direction: column; }
    .contacto form {
      margin: 20px 0 20px 0 !important; }
    .contacto__imagen {
      width: 100%;
      margin: 0 auto 20px auto; }
  .whatsapp {
    right: 5px; } }

@media screen and (min-width: 383px) and (max-width: 767px) {
  .contacto {
    flex-direction: column; }
    .contacto form {
      margin: 20px 0 20px 0 !important; }
    .contacto__imagen {
      width: 100%;
      margin: 0 auto 20px auto; }
  .whatsapp {
    right: 5px; } }

@media screen and (min-width: 768px) and (max-width: 991px) {
  .contacto {
    flex-direction: column; }
    .contacto form {
      width: 70%;
      margin: 20px 0 20px 0 !important; }
  .map {
    width: 80%; } }

/* TRABAJA */
@media screen and (min-width: 320px) and (max-width: 482px) {
  .trabaja__titulo {
    width: auto !important;
    margin: 0 5% !important;
    padding-bottom: 5em !important; }
    .trabaja__titulo h1 {
      font-size: 1em;
      font-weight: bold; }
    .trabaja__titulo h2 {
      font-size: 1em;
      font-weight: bold; }
  .trabaja__subtitulo {
    width: 80%;
    margin: auto;
    padding-bottom: 1em; }
  .trabaja__formulario form {
    display: flex;
    flex-direction: column; }
  .trabaja__formulario .trabaja__input {
    width: 80%;
    text-align: center; }
  .trabaja__formulario .trabaja__boton {
    width: 6em;
    margin: 3% 0 3% 0; } }

@media screen and (min-width: 483px) and (max-width: 991px) {
  .trabaja__titulo {
    width: auto;
    margin: 0 5%;
    padding-top: 10%; }
  .trabaja__formulario form {
    display: flex;
    flex-direction: column; }
  .trabaja__formulario .trabaja__input {
    width: 80%;
    text-align: center; }
  .trabaja__formulario .trabaja__boton {
    width: 6em;
    margin: 3% 0 3% 0; } }