@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-wrap: break-word;
  font-family: "Nunito Sans", serif;
}

@media (pointer: coarse) {
  * {
    cursor: default !important;
  }
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  --CN1: #151515;
  --CN2: #454545;
  --C1: #ef4129;
  --C1l: color-mix(in srgb, var(--C1), black 60%);
  --C2: #023a51;
  --C2l: hsl(from var(--C2) h s 40%);
  --hNav: 4em;
  --maxW: 75em;
  overflow: auto;
  font-size: clamp(1rem, 1.75vw, 1.1rem);
  position: relative;
  > div {
    width: 100%;
    height: 100%;
    overflow: auto;
    scrollbar-width: none;
    transition: filter 0.4s ease;
    &::-webkit-scrollbar {
      display: none;
    }
  }
}

nav {
  display: grid;
  grid-template: var(--hNav) 1fr / 1fr;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  pointer-events: none;
  user-select: none;
  > div {
    pointer-events: all;
    &:first-child {
      background-color: white;
      position: relative;
      > div {
        &:first-child {
          display: grid;
          width: min(100%, 75em);
          height: 100%;
          grid-template: 1fr / max-content 1fr;
          gap: 1em;
          padding: 0 1.25em;
          margin-inline: auto;
          position: relative;
          z-index: 1;
          color: var(--C2);
          > img {
            align-self: center;
            height: 60%;
            font-weight: 700;
          }
          > ol {
            display: none;
            flex-flow: row nowrap;
            justify-content: flex-start;
            list-style: none;
            > li {
              display: grid;
              place-content: center;
              text-align: center;
              font-size: 1em;
              font-weight: 700;
              cursor: pointer;
              transition: 0.25s ease;
              padding: 0 0.5em;
              &:hover {
                color: white;
                background-color: var(--C2);
              }
            }
          }
          > #NavAct {
            display: none;
            &:checked + label {
              > span {
                width: 0%;
              }
              &::before,
              &::after {
                width: 90%;
              }
            }
          }
          > label {
            display: block;
            position: relative;
            width: calc(var(--hNav) - 1em);
            height: 100%;
            cursor: pointer;
            justify-self: flex-end;
            &::before,
            &::after,
            > span {
              content: "";
              display: block;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              width: 100%;
              height: 5%;
              background-color: var(--CN1);
              transition: 0.2s ease;
              border-radius: 10em;
            }
            &::before {
              transform: translate(-50%, -50%) rotate(50deg);
            }
            &::after {
              transform: translate(-50%, -50%) rotate(-50deg);
            }
            &::before,
            &::after {
              width: 0%;
            }
            &:hover {
              > span {
                width: 75%;
                transform: translate(-50%, -50%) rotate(90deg);
              }
            }
          }
        }
        &:last-child {
          width: 100%;
          top: 0%;
          left: 0;
          transform: translateY(-100%);
          position: absolute;
          background-color: var(--C2);
          transition: 0.5s ease-in-out;
          border-top: 0.2em solid var(--C1);
          z-index: -1;
          > ol {
            display: flex;
            flex-flow: row nowrap;
            justify-content: stretch;
            list-style: none;
            width: min(100%, 75em);
            margin-inline: auto;
            border-radius: 0 0 1em 1em;
            > li {
              position: relative;
              flex-grow: 1;
              height: 5em;
              cursor: pointer;
              transition: 0.25s ease;
              background-repeat: no-repeat;
              background-position: center;
              background-size: 200% 200%, 200% 200%, 150% auto;
              background-image: linear-gradient(
                  to right bottom,
                  var(--C2l),
                  var(--C2) 50%,
                  transparent 50%
                ),
                linear-gradient(
                  to left top,
                  var(--C2l),
                  var(--C2) 50%,
                  transparent 50%
                ),
                var(--img);
              &::before {
                content: attr(sect);
                position: absolute;
                height: 100%;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
                display: grid;
                place-content: center;
                text-align: center;
                font-weight: 600;
                font-size: 1.25em;
                color: white;
                text-shadow: 2px 2px 0px var(--C2), -2px -2px 0px var(--C2),
                  -2px 2px 0px var(--C2), 2px -2px 0px var(--C2);
                letter-spacing: 0.025em;
              }
              &:hover {
                background-position: 100% 100%, 0% 0%, 50% 50%;
                background-size: 200% 200%, 200% 200%, 100% auto;
              }
            }
          }
        }
        &:last-child:hover,
        &:first-child:has(> ol > li:nth-child(2):hover) + div {
          top: 100%;
          transform: unset;
        }
      }
    }
    &:last-child {
      overflow: auto;
      pointer-events: none;
      color: white;
      background-color: var(--C2);
      background-clip: content-box;
      padding: 2em;
      clip-path: inset(50%);
      transition: 0.5s ease;
      backdrop-filter: saturate(0) blur(2px);
      -webkit-backdrop-filter: saturate(0) blur(2px);
      ol {
        display: block;
        list-style: none;
        > li {
          display: block;
          font-size: 1em;
          line-height: 1em;
          font-weight: 600;
          padding: 1em;
          border-bottom: 0.1em solid var(--C1);
          cursor: pointer;
        }
      }
      > ol {
        > ol {
          overflow: hidden;
          max-height: 0em;
          padding: 0 1em;
          border-bottom: 0.1em solid var(--C1);
          transition: 0.4s ease-in-out;
          > li {
            border: solid var(--C1l);
            border-width: 0 0 0 0.25em;
          }
        }
        > li:nth-child(2):hover + ol,
        > ol:hover {
          max-height: calc(3em * 3 + 2.1em);
          padding: 1em;
        }
      }
    }
    &:first-child:has(#NavAct:checked) + &:last-child {
      clip-path: inset(0%);
      pointer-events: all;
    }
  }
}

@media (min-width: 600px) {
  nav {
    > div {
      &:first-child > div:first-child {
        grid-template-columns: 1fr max-content;
        > ol {
          display: flex;
        }
        > label {
          display: none;
        }
      }
      &:last-child {
        display: none;
      }
    }
  }
}

ty-main {
  padding-top: var(--hNav);
  > ty-sect {
    margin-inline: auto;
    > header {
      width: 100%;
      height: calc(20em + 5vw);
      position: relative;
      user-select: none;
      > div {
        display: flex;
        flex-flow: column nowrap;
        gap: 0.5em;
        justify-content: center;
        align-items: flex-start;
        max-width: var(--maxW);
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        color: white;
        padding: 1em calc(1.5em + 2vw);
        width: 100%;
        height: 100%;
        pointer-events: none;
        text-shadow: black 0 0 4px;
        > h1 {
          font-weight: 1000;
          font-size: 3em;
          text-decoration: underline solid var(--C1) 0.1em;
          text-underline-offset: 0.1em;
        }
        > p {
          font-size: 1em;
          text-wrap: balance;
          max-width: 40em;
        }
        > a {
          pointer-events: all;
          cursor: pointer;
          font-weight: 700;
          font-size: 1.1em;
          padding: 0.6em 1em;
          color: white;
          border: none;
          text-shadow: black 0 0 2px;
          background-color: var(--C2l);
          background-image: radial-gradient(
            farthest-corner at 0% 0%,
            var(--C2),
            transparent
          );
          border-radius: 0.5em;
          margin-top: 1.5em;
          text-decoration: none;
        }
        > span {
          font-size: 1.1em;
          font-weight: 600;
        }
      }
      > video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        pointer-events: none;
      }
      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(to right, black, transparent 60%);
      }
    }
    > h3 {
      font-size: 1.5em;
      padding: 0.8em 0;
      color: white;
      text-shadow: black 0 0 2px;
      background-image: linear-gradient(to right, var(--C1), var(--C1l));
      text-align: center;
    }
    > section {
      max-width: var(--maxW);
      margin-inline: auto;
      user-select: none;
      margin-bottom: 4em;
      padding-inline: 2em;
      > h3 {
        text-align: center;
        font-size: 1.5em;
        text-transform: uppercase;
        font-weight: 800;
      }
      &:first-of-type {
        display: flex;
        flex-flow: column nowrap;
        row-gap: 2em;
        margin-top: 4em;
        padding-inline: 1em;
        > article {
          display: grid;
          grid-template: clamp(12em, calc(45em - 100vw), 21em) / max-content 1fr;
          grid-auto-flow: column;
          max-width: 45em;
          column-gap: 1em;
          cursor: pointer;
          &::before {
            content: "";
            display: block;
            width: clamp(8em, 25vw, 14em);
            height: 100%;
            background-image: var(--img);
            background-position: center;
            background-size: cover;
            border-radius: 0.5em;
          }
          > div {
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            align-items: flex-start;
            gap: 0.25em;
            padding: 1em 1.25em;
            color: white;
            background-image: linear-gradient(
              to right,
              var(--C1l),
              var(--C1) 50%,
              var(--C2) 50%
            );
            background-size: 200%;
            background-position-x: 100%;
            transition: background-position-x 0.25s ease;
            border-radius: 0.5em;
            > h4 {
              font-size: 1.25em;
            }
            > p {
              font-size: 0.9em;
              line-height: 1.1em;
            }
          }
          &:nth-of-type(2) {
            align-self: flex-end;
            grid-template-columns: 1fr max-content;
            > div {
              background-image: linear-gradient(
                to left,
                var(--C1l),
                var(--C1) 50%,
                var(--C2) 50%
              );
              background-position-x: 0%;
              text-align: right;
              align-items: flex-end;
            }
            &::before {
              grid-column: 2;
              background-position-x: right;
            }
            &:hover {
              > div {
                background-position-x: 40%;
              }
            }
          }
          &:hover {
            > div {
              background-position-x: 60%;
            }
          }
          &:last-of-type {
            margin-bottom: 2em;
          }
        }
        > span {
          text-transform: uppercase;
          font-size: 1.5em;
          font-weight: 800;
          text-align: center;
        }
      }
      &:nth-of-type(2) {
        display: flex;
        flex-flow: row wrap;
        gap: 2em 1em;
        justify-content: center;
        > article {
          flex: 0.5 0 15em;
          display: flex;
          flex-flow: column nowrap;
          justify-content: center;
          text-align: center;
          align-items: center;
          gap: 1em;
          color: white;
          padding: 1em;
          background-color: var(--C2l);
          border-radius: 1em;
          &:nth-child(even) {
            background-color: var(--C2);
          }
          > span {
            display: block;
            font-size: 1.25em;
            font-weight: 800;
            text-transform: uppercase;
          }
          > img {
            height: 4em;
            filter: contrast(0) brightness(2);
          }
        }
        @media (min-width: 650px) {
          grid-template-columns: repeat(3, 25%);
        }
      }
      &:nth-of-type(3) {
        display: flex;
        flex-flow: column nowrap;
        row-gap: 2em;
        > p {
          font-size: 1.1em;
          font-weight: 600;
        }
        > span {
          font-size: 1.5em;
          font-weight: 800;
          text-transform: uppercase;
          text-align: center;
        }
        > form {
          display: grid;
          grid-template-columns: max-content min(25em, 60%);
          justify-content: center;
          gap: 1em;
          text-align: end;
          > label {
            font-size: 1.1em;
            font-weight: 700;
          }
          > input,
          > textarea {
            background-color: transparent;
            outline: none;
            border: solid black 0;
            border-bottom-width: 0.1em;
            font-size: 1em;
            resize: vertical;
          }
          > button {
            width: max-content;
            font-size: 1.25em;
            justify-self: center;
            cursor: pointer;
            font-weight: 700;
            border: none;
            color: white;
            background-image: linear-gradient(
              to right bottom,
              var(--C1) 40%,
              var(--C1l)
            );
            padding: 0.5em 1em;
            line-height: 1em;
            border-radius: 0.5em;
            grid-column: span 2;
            margin-top: 0.25em;
          }
        }
      }
      &:nth-of-type(4) {
        > h3 {
          margin-bottom: 0.5em;
        }
        > p {
          text-align: center;
          font-weight: 500;
        }
        > div {
          overflow: hidden;
          position: relative;
          > div {
            width: max-content;
            display: grid;
            grid-template-columns: repeat(13, 10em);
            column-gap: 4em;
            align-items: center;
            animation: An1 20s linear infinite alternate;
            > img {
              width: 100%;
            }
          }
          &::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(
              to right,
              white,
              transparent 20% 80%,
              white
            );
          }
        }
      }
      &:last-child {
        margin-bottom: unset;
      }
    }
  }
  > ty-Residencial {
    > header {
      width: 100%;
      height: calc(10em + 5vw);
      user-select: none;
      background-position: center;
      background-size: cover;
      background-image: linear-gradient(
          to right,
          transparent,
          rgba(from black r g b / 60%) 40% 60%,
          transparent
        ),
        var(--img);
      > div {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        height: 100%;
        max-width: var(--maxW);
        margin-inline: auto;
        > h1 {
          color: white;
          padding: 0.25em 0.5em;
        }
      }
    }
    > section {
      display: grid;
      grid-template:
        "aside aside" max-content
        "sect sect" / 10em 1fr;
      width: min(var(--maxW), 100%);
      box-sizing: content-box;
      --leftpad: calc(50% - var(--maxW) / 2);
      padding-inline: var(--leftpad);
      background-image: linear-gradient(
        to right,
        var(--C2l),
        var(--C2) calc(var(--leftpad) + 0.1em),
        transparent calc(var(--leftpad) + 0.1em)
      );
      > aside {
        top: var(--hNav);
        left: 0;
        position: sticky;
        user-select: none;
        z-index: 1;
        color: white;
        background-color: var(--CN1);
        grid-area: aside;
        > div {
          padding: 0;
          margin-inline: unset;
          position: sticky;
          top: var(--hNav);
          left: 0;
          > span {
            display: block;
            text-align: center;
            font-weight: 800;
            font-size: 1.25em;
            padding: 1em 0;
            line-height: 1em;
            background-image: radial-gradient(
              ellipse farthest-side at 0% 0%,
              var(--C2l),
              transparent
            );
          }
          > ol {
            display: flex;
            flex-flow: row nowrap;
            overflow-x: auto;
            list-style: none;
            text-align: center;
            &::-webkit-scrollbar {
              height: 0.25em;
            }
            &::-webkit-scrollbar-button {
              width: 1em;
            }
            &::-webkit-scrollbar-button:single-button {
              width: 2em;
            }
            &::-webkit-scrollbar-thumb {
              background-color: var(--C2l);
              border-radius: 1em;
            }
            > li {
              flex-grow: 1;
              > input {
                display: none;
                &:checked + label {
                  color: var(--C1);
                }
              }
              > label {
                display: block;
                font-size: 1em;
                font-weight: 700;
                padding: 0.75em 1em;
                line-height: 1em;
                cursor: pointer;
                transition: 0.25s ease-in-out;
                &:hover {
                  background-color: var(--CN2);
                }
              }
            }
          }
        }
      }
      &:has(> aside > div > ol > li:first-of-type > input:checked)
        > div
        > section:first-child,
      &:has(> aside > div > ol > li:nth-of-type(2) > input:checked)
        > div
        > section:nth-child(2),
      &:has(> aside > div > ol > li:last-of-type > input:checked)
        > div
        > section:last-child {
        display: block;
      }
      > div {
        grid-area: sect;
        --topNav: calc(var(--hNav) + 1.4em + 1.4em * 2 + 1em + 0.75em * 2);
        overflow: hidden;
        > section {
          display: none;
          padding: 0 2em;
          > section {
            scroll-margin-top: var(--topNav);
            margin-bottom: 1em;
            &::before {
              content: attr(attr-title);
              display: block;
              width: max-content;
              font-size: 1.4em;
              line-height: 1em;
              --leftpad2: calc(2em / 1.4);
              font-weight: 800;
              color: white;
              background-image: linear-gradient(
                to right,
                var(--CN1),
                var(--C2l)
              );
              padding: 0.5em var(--leftpad2);
              margin-left: calc(var(--leftpad2) * -1);
            }
          }
          &:first-child {
            > div {
              display: flex;
              flex-flow: row wrap;
              justify-content: space-around;
              gap: 1em;
              padding-block: 1em;
              > article {
                flex: 1 0 12em;
                max-width: max(calc(25em - 15vw), 18em);
                cursor: pointer;
                transition: background-color 0.2s ease;
                &::before {
                  content: "";
                  display: block;
                  height: 10em;
                  background-image: var(--img);
                  background-size: contain;
                  background-repeat: no-repeat;
                  background-position: center;
                  border-bottom: 0.25em solid var(--C1);
                }
                > div {
                  display: flex;
                  flex-flow: column nowrap;
                  gap: 0.25em;
                  padding: 0.5em;
                  > h4 {
                    font-size: 1.1em;
                    font-weight: 800;
                  }
                  > span {
                    width: max-content;
                    padding: 0.25em 0.75em;
                    color: white;
                    transform: skewX(-15deg);
                    background-image: radial-gradient(
                      farthest-corner at 100% 100%,
                      var(--C2l),
                      var(--C2)
                    );
                    font-weight: 700;
                  }
                  > ul {
                    list-style: none;
                    > li {
                      &::before {
                        content: "-";
                        font-weight: 800;
                        margin-right: 0.25em;
                      }
                      font-weight: 500;
                    }
                  }
                }
                &:hover {
                  background-color: rgba(from black r g b / 20%);
                }
              }
            }
            > section {
              display: grid;
              grid-template-columns: 1fr;
              gap: 1em;
              > div {
                &:first-child {
                  a {
                    display: block;
                    color: black;
                    font-weight: 900;
                    text-decoration: none;
                    font-size: 1.25em;
                    &::before {
                      content: ">";
                      margin-right: 0.25em;
                      color: var(--C1);
                      font-size: 1.25em;
                      font-weight: 1000;
                      transition: 0.25s ease;
                    }
                    &:hover::before {
                      color: var(--C2l);
                      margin-right: 0.5em;
                    }
                  }
                  p {
                    display: block;
                    text-wrap: pretty;
                  }
                  > article {
                    display: block;
                    margin-top: 1em;
                  }
                }
                &:last-child {
                  align-self: center;
                  height: max-content;
                  > video {
                    width: 100%;
                  }
                }
              }
              &:last-child > div:first-child {
                margin-top: 1em;
              }
              @media (min-width: 670px) {
                grid-template-columns: 2fr 1fr;
                column-gap: 1em;
                &::before {
                  grid-column: span 2;
                }
              }
            }
          }
          &:nth-child(2) {
            > section {
              &:first-child {
                &::before {
                  margin-bottom: 1em;
                }
                padding-top: 1em;
                > p {
                  display: inline-block;
                  width: 100%;
                  text-wrap: pretty;
                  font-weight: 500;
                  > img {
                    float: right;
                    width: min(50%, 15em);
                  }
                }
              }
              &:nth-child(2) {
                text-align: center;
                > img {
                  width: min(90%, 30em);
                  margin-block: 1em;
                }
                > div {
                  display: flex;
                  flex-flow: row wrap;
                  gap: 1em;
                  > div {
                    flex: 1 1s 20em;
                    overflow: hidden;
                    > div {
                      width: 100%;
                      display: grid;
                      grid-template: 1fr / repeat(4, 100%);
                      animation: S1 10s 2s ease alternate infinite;
                      > article {
                        display: grid;
                        grid-auto-rows: max-content;
                        grid-template-columns: clamp(8em, 20vw, 12em) 1fr;
                        padding-inline: 1em;
                        gap: 1em;
                        > img {
                          width: 100%;
                          border: dashed var(--C1);
                          border-width: 0.15em 0 0 0.15em;
                        }
                        > span {
                          display: block;
                          font-size: 1.5em;
                          font-weight: 700;
                          flex-grow: 1;
                          align-self: center;
                        }
                        > p {
                          grid-column: span 2;
                        }
                      }
                    }
                  }
                  > video {
                    width: min(100%, 20em);
                    flex: 0.6 0;
                  }
                }
              }
            }
          }
          &:last-child {
            padding: 1em 2em;
            > section {
              &::before {
                margin-bottom: 0.5em;
              }
            }
            > div {
              &:first-of-type {
                text-align: center;
                pointer-events: none;
                margin-bottom: 1em;
                > img {
                  width: min(80%, 40em);
                  max-height: 20em;
                  object-fit: cover;
                  object-position: right center;
                }
                > p {
                  margin-block: 2em;
                  text-wrap: balance;
                  text-align: start;
                }
                > video {
                  width: min(25em, 80%);
                  max-height: 25em;
                  object-fit: cover;
                  object-position: 50% 40%;
                }
              }
              &:last-child {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-auto-rows: max-content;
                text-align: center;
                font-weight: 700;
                user-select: none;
                border-radius: 1em;
                border: 0.25em solid var(--C1);
                max-width: 50em;
                margin-inline: auto;
                > span {
                  color: white;
                  background-color: var(--C1);
                  padding-block: 0.5em;
                  text-transform: uppercase;
                }
                > ol {
                  display: grid;
                  grid-template-columns: subgrid;
                  grid-column: span 3;
                  list-style: none;
                  &:nth-child(odd) {
                    color: white;
                    background-color: var(--C2);
                    border-width: 0 0.25em;
                  }
                  > li {
                    padding-block: 0.5em;
                    &:nth-child(2) {
                      border: solid var(--C1);
                      border-width: 0 0.25em;
                    }
                  }
                }
              }
            }
          }
        }
      }
      @media (min-width: 600px) {
        grid-template-areas: "aside sect" "aside sect";
        > aside > div {
          > span {
            background-image: linear-gradient(
              to right,
              var(--C2) 25%,
              transparent
            );
          }
          > ol {
            flex-direction: column;
          }
        }
        > div {
          --topNav: var(--hNav);
        }
      }
    }
  }
}

@keyframes S1 {
  0%,
  15% {
    margin-left: 0%;
  }
  30%,
  45% {
    margin-left: -100%;
  }
  60%,
  75% {
    margin-left: -200%;
  }
  85%,
  100% {
    margin-left: -300%;
  }
}

@keyframes An1 {
  to {
    transform: translateX(-100%);
    margin-left: 100%;
  }
}

#WPButton {
  display: block;
  position: fixed;
  bottom: 2em;
  right: 2em;
  width: 5em;
  height: 5em;
  cursor: pointer;
  z-index: 10;
  > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(rgba(from black r g b / 80%) 0 0 5px);
  }
}

footer {
  border-top: 0.5em solid var(--CN2);
  > div {
    display: grid;
    grid-template: 1fr / 1fr max-content;
    gap: 1em;
    margin-inline: auto;
    max-width: var(--maxW);
    padding: 1em;
    > img {
      width: 8em;
    }
    > ol {
      display: flex;
      flex-flow: column nowrap;
      gap: 0.25em;
      list-style: none;
      font-size: 0.9em;
      > li {
        > span {
          display: inline-block;
          &:first-child {
            font-weight: 800;
            text-decoration: underline 0.1em solid var(--C1);
            user-select: none;
          }
          &:last-child {
            font-weight: 600;
          }
        }
        > a {
          display: block;
          width: 2.5em;
          height: 2.5em;
          > img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
          }
        }
      }
    }
  }
}