/* Estilos para secciones visibles */
:root {
  --height: 100dvh;
  --width: 100dvw;
  --height-header: 40dvh;

  --bg-accent: rgb(2, 141, 187);
  --bg-accent2: hsl(195, 80%, 70%);
  --bg-nav-item: hsl(216, 40%, 45%);

  --text-color: black;
  --bg-body: white;
  --bg-header: rgba(0, 0, 0, 0.1);

  --logo-width: 50%;
  --max-width: 100dvw;
  --width-card-recomendado: 20dvw;
  font-size: 10px;
  color: var(--text-color);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scrollbar-width: thin;
  overflow: auto;
}
html {
  scroll-behavior: smooth;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  box-sizing: border-box;
  display: grid;
  grid-template: auto / repeat(12, calc(100% / 12));
  font-family: Arial, sans-serif;
  background-color: var(--bg-body);
  overflow: auto;
  max-height: 100dvh;
  & a {
    color: white;
    text-decoration: none;
  }
}

header.header {
  height: var(--height-header);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  & figure.logo {
    backdrop-filter: blur(2.5px);
    width: 100%;
    background-image: linear-gradient(to right, transparent, rgba(50, 50, 60, 0.5) 50%, transparent);
    margin-inline: auto;
    padding-block:1rem;

    & h3,
    & h2 {
      text-transform: uppercase;
      text-shadow: 0 1px 5px rgba(0, 0, 0, 0.75);
      font-weight: 700;
      padding-block: .5rem
    }
    & h2 {
      color: #fff;
      font-size: 2rem;
    }
    & h3 {
      font-size: 1.5rem;
      font-style: italic;
      color: #fafafa;
    }

    & img.img-logo {
      max-width: var(--logo-width);
      max-height: 10rem;
    }
  }

  & figure.background {
    & img {
      border: 1px solid black;
      width: var(--max-width);
      position: absolute;
      object-fit: fill;
      top: 0;
      left: 0;
      height: 100%;
      z-index: -10;
    }
  }
}
nav.navigation {
  display: flex;
  gap: 1rem;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 50;
  left: 0;
  padding: 0.5rem;
  overflow-x: auto;
  backdrop-filter: blur(10px);
  scrollbar-width: none;
  background-color: rgba(255, 255, 255, 0.215);

  & a {
    padding: 0.75rem 1.5rem;
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
    text-wrap: nowrap;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--bg-accent), transparent 25%);
    backdrop-filter: blur(10px);
    opacity: 0.5;
    min-width: min-content;
    border: 1px solid transparent;
    border-color: color-mix(in srgb, var(--bg-accent), black 10%);

    &.active {
      opacity: 1;
      font-weight: bold;
      background-color: var(--bg-accent);
      outline: 1px solid color-mix(in srgb, var(--bg-accent), white 10%);
      outline-offset: 1px;
    }
  }
}

article.container {
  --shadow-color: rgba(70, 83, 98, 0.3);
  --shadow-color1: rgba(105, 123, 143, 0.2);

  height: min-content;
  width: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 0.5rem 1rem;
  margin-inline: auto;
  background-color: rgba(255, 255, 255, 0.215);
  border-radius: 0 0 5px 5px;

  & section.recomendados {
    overflow: auto hidden;

    box-shadow: 10px 12px 10px -8px var(--shadow-color), -2px 1px 5px 2px var(--shadow-color1);
    scroll-snap-type: x mandatory;
    scrollbar-color: var(--bg-accent) transparent;
    scrollbar-gutter: stable;
    & header {
      grid-column: 1/-1;
      padding: 0.5rem 2rem;
      text-align: left;
      text-transform: uppercase;
      font-size: 1.5rem;
      border-radius: 2.5px 2.5px 0 0;
      & h2 {
        border-bottom: 1px solid var(--bg-accent);
        padding-block: 1rem;
      }
    }
    & .recomendados-container {
      display: flex;
      gap: 1rem;
      padding: 0.5rem 1rem 1rem;
      & .recomendado-card {
        scroll-snap-align: start;
        min-width: var(--width-card-recomendado);
        display: grid;
        grid-template: 20dvh 1fr/ 1fr;
        background-color: white;
        box-shadow: 4px 5px 10px -2px var(--shadow-color);
        & .imagen-recomendado {
          grid-column: 1/-1;
          height: 20dvh;
          background-position: center;
          background-size: cover;
        }
        & section.desc-item {
          display: flex;
          flex-direction: column;
          padding-inline: 1rem;

          & span.title {
            padding-top: 0.5rem;
            font-size: 1.5rem;
            font-weight: bold;
            text-transform: uppercase;
          }

          & p.detalle {
            padding-top: 0.5rem;
            flex-grow: 1;
            font-size: 1.25rem;
            font-weight: bold;
            font-style: oblique;
            text-transform: uppercase;
            color: lightslategray;
          }

          & span.precio {
            padding-block: 0.5rem;
            font-size: 2rem;
            color: hsl(216, 28%, 19%);
            font-weight: bold;
            text-align: right;
            border-top: 1px solid var(--bg-accent);
          }
        }
      }
    }
  }

  & section.wrapper {
    width: 100%;
    scroll-snap-align: start;
    /* overflow-y: scroll; */
    padding: 0rem 0 1rem;
    border-radius: 0 0 5px 5px;
    box-shadow: 10px 12px 10px -8px var(--shadow-color), -2px 1px 5px 2px var(--shadow-color1);
    background-color: white;

    & header {
      margin-top: 1rem;
      padding: 0.5rem 2rem;
      margin-inline: auto;
      text-align: left;
      text-transform: uppercase;
      font-size: 1.5rem;
      border-radius: 2.5px 2.5px 0 0;
      border-inline: 1px solid white;

      & h2 {
        border-bottom: 1px solid var(--bg-accent);
        padding-block: 1rem;
      }
    }

    & p.coment-web {
      padding: 0.5rem 2rem;
      font-size: 1.15rem;
      font-weight: 600;
      text-transform: uppercase;
      text-wrap: wrap;
      text-align: left;
      max-width: 90%;
      border-radius: 2.5px;
    }

    & div.card {
      margin-inline: auto;
      display: grid;
      align-content: start;
      overflow-y: auto;
      padding: 1rem;

      &:not(:first-of-type) {
        margin: 1rem 0 0;
      }
      & h2.subrubro {
        font-size: 1.75rem;
        font-weight: bold;
        text-transform: uppercase;
        border-bottom: 1px solid var(--bg-accent);
        padding: 0.5rem 0.5rem 0;
        color: rgba(77, 103, 141, 0.8);
      }

      & div.item {
        height: min-content;
        width: 100%;
        display: grid;
        grid-template: 1fr / 1fr auto;
        text-transform: uppercase;
        font-weight: bold;
        box-shadow: 10px 12px 10px -8px var(--shadow-color);
        border-image: linear-gradient(90deg, var(--bg-accent2), rgba(130, 186, 196, 0.3) 65%) 15 / 1px;
        padding: 0.25rem 1rem;
        margin-block: 1rem;

        & div.imagen-plato {
          place-self: center;
          grid-column: 2 / -1;
          grid-row: 2 / -2;
          background-position: center;
          background-size: cover;
          background-repeat: no-repeat;
          background-origin: content-box;
          width: 10rem;
          height: 10rem;
          border-radius: 5px;
        }
        & section.descs-item {
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
          & p.detalle {
            flex: 1 0 calc(100% - 10rem);
            font-size: 1rem;
            font-style: italic;

            padding-inline: 0.75rem;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 5;
            line-clamp: 5;
            text-overflow: ellipsis;
            overflow-y: hidden;
          }

          & span.title {
            color: color-mix(in srgb, var(--text-color), gray 50%);
            font-weight: bold;
            font-size: 1.25rem;
            padding: 1rem 0 0.5rem 0.5rem;
          }

          & span.precio {
            text-align: left;
            font-size: 2rem;
            padding-block: 0.5rem;
            color: var(--bg-accent);

            & .bg-precio {
              padding: 0.5rem 1rem;
              text-align: center;
              text-wrap: nowrap;
              border-radius: 5px;
              border: 1px solid;
              border-color: #bebebe;
              text-transform: uppercase;
            }
            &.tam {
              display: flex;
              gap: 1rem;
              justify-content: start;
              align-items: center;
              flex-wrap: wrap;
            }
          }
        }
      }
    }
  }
}

& section.footer-empresa {
  color: white;
  text-align: center;
  font-size: 1.5rem;
  text-transform: uppercase;
  font-weight: 700;
  padding: 2rem;
  background-color: color-mix(in srgb, var(--bg-accent), white 20%);
}

footer {
  background-color: var(--bg-accent);
  color: white;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  & a {
    width: 50%;
    margin-inline: auto;
    font-size: 1.5rem;
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border-bottom: 1px solid white;
  }

  & h1 {
    width: 100%;
    margin-block: 1rem;
  }

  & div.redes {
    padding: 1rem;
    & svg {
      width: 3.5rem;
      height: 3.5rem;
      &#ig-svg {
        fill: white;
      }
      &#web-svg {
        stroke: white;
      }
    }
  }
  & p {
    padding-top: 1rem;
    grid-column: 1/-1;
    text-align: center;
    font-size: 1.25rem;
    font-weight: bold;
    border: 0;
  }
}

@media screen and (max-width: 990px) {
  header.header,
  nav.navigation,
  article.container,
  section.footer-empresa,
  footer#restosoft {
    grid-column: 1 / -1;
  }
  :root {
    --width-card-recomendado: 80vw;
  }
}

@media screen and (min-width: 990px) {
  header.header,
  nav.navigation,
  article.container {
    grid-column: 4 / -4;
    background-color: white;
  }
  footer#restosoft,
  section.footer-empresa {
    grid-column: 4 / -4;
  }
  body {
    background-color: hsl(0, 0%, 93%);
  }

  article.container {
    padding: 2.5rem 5rem;
  }
}