.hero {
  width: 100%;
  min-height: 50vh;
  position: relative;
  background-image: url('../assets/images/quemsomos/Capa (quem somos).webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2.8rem;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.hero h1 {
  position: relative;
  z-index: 2;
}

& .secao-inicio {
  display: flex;
  flex-flow: column;
  gap: 15rem;

  & .container-inicio {
    display: flex;
    gap: 3rem;

    & .texto-inicio {
      width: 50%;
      display: flex;
      flex-flow: column;
      gap: 2rem;
      font-size: 1.8rem;

      & .p-inicios {
        display: flex;
        flex-flow: column;
        gap: 3rem;

        & .sitacao {
          background: linear-gradient(to right, #e6e6e686, #f4f5f7);
          padding: 2rem;
          border-left: 3px solid var(--laranja-hashimoto);
        }
      }

      & .titulo-inicio {
        display: flex;
        flex-flow: column;
        gap: 1rem;

        & h2 {
          font-size: 3.8rem;
          font-weight: 800;
          color: var(--azul-Fonte);
        }

        & p {
          font-size: 1.5rem;
          border-bottom: 2px solid var(--laranja-hashimoto);
        }
      }
    }

    & .imagem-inicio {
      width: 50%;
      background-image: url('../assets/images/quemsomos/Início\ da\ Hashimoto\ \(quem\ somos\).webp');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 1.4rem;
    }
    & .imagem-final {
      width: 50%;
      background-image: url('../assets/images/quemsomos/Atualmente (quem somos).webp');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 1.4rem;
    }
  }
}

& .secao-valores {
  background: linear-gradient(to right, #0b2c44, #061622);

  & .container-valores {
    padding: 8rem 0;
    & .container-vimiva {
      display: flex;
      flex-flow: column;
      gap: 8rem;

      & .texto-valores {
        display: flex;
        text-align: center;
        justify-content: center;
        flex-flow: column;
        gap: 0.2rem;
        color: #fff;

        & p {
          color: #ffffffb7;
        }

        & h2 {
          font-size: 3.7rem;
        }
      }
      & .itens-valores {
        display: flex;
        gap: 3rem;

        &.cards-anim-init .item-vimiva {
          opacity: 0;
          transform: translateX(-3.2rem);
          filter: blur(0.2rem);
        }

        &.cards-anim-init.animar-cards .item-vimiva {
          animation: surgir-card-vimiva 0.92s cubic-bezier(0.22, 1, 0.36, 1)
            forwards;
          animation-delay: var(--card-delay, 0s);
        }

        & .item-vimiva {
          background-color: #fff;
          display: flex;
          flex-flow: column;
          gap: 2rem;
          padding: 4rem;
          border-radius: 1.4rem;
          will-change: transform, opacity, filter;
          position: relative;
          box-shadow: inset 0 3px 8px 5px rgba(0, 0, 0, 0.099);

          & .icon-vimiva {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 7rem;
            height: 7rem;
            background-color: var(--laranja-hashimoto);
            border-radius: 25%;
            position: absolute;
            top: 0.5rem;
            left: 48%;
            transform: translate(-50%, -50%);
            box-shadow: inset 0 3px 8px 5px rgba(0, 0, 0, 0.099);
          }

          & .texto-vivima {
            display: flex;
            flex-flow: column;
            gap: 0.5rem;
            padding-top: 3rem;
          }

          & h3 {
            color: var(--azul-Fonte);
          }

          & p {
            font-size: 1.7rem;
          }
        }
      }
    }
  }
}

@keyframes surgir-card-vimiva {
  0% {
    opacity: 0;
    transform: translateX(-2.2rem);
    filter: blur(0.2rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

@media (max-width: 1080px) {
  .hero {
    min-height: 78vh;
    font-size: 2.4rem;
  }

  & .secao-inicio {
    gap: 9rem;

    & .container-inicio {
      gap: 2.4rem;

      & .texto-inicio {
        font-size: 1.7rem;

        & .titulo-inicio {
          & h2 {
            font-size: 3.2rem;
          }
        }
      }
    }
  }

  & .secao-valores {
    & .container-valores {
      padding: 8rem 0;

      & .container-vimiva {
        & .texto-valores {
          & h2 {
            font-size: 3.2rem;
          }
        }

        & .itens-valores {
          gap: 1.8rem;

          & .item-vimiva {
            padding: 3rem;
          }
        }
      }
    }
  }
}

@media (max-width: 900px) {
  .hero {
    min-height: 62vh;
    font-size: 2.1rem;
  }

  & .secao-inicio {
    gap: 6rem;

    & .container-inicio {
      flex-direction: column;

      & .imagem-inicio,
      & .imagem-final {
        order: 1;
      }

      & .texto-inicio {
        order: 2;
      }

      & .texto-inicio {
        width: 100%;
        gap: 2.8rem;

        & .titulo-inicio {
          & h2 {
            font-size: 2.8rem;
            line-height: 1.2;
          }
        }
      }

      & .imagem-inicio,
      & .imagem-final {
        width: 100%;
        min-height: 34rem;
      }
    }
  }

  & .secao-valores {
    & .container-valores {
      padding: 7rem 0;

      & .container-vimiva {
        gap: 6rem;

        & .texto-valores {
          & h2 {
            font-size: 2.8rem;
            line-height: 1.2;
          }
        }

        & .itens-valores {
          gap: 5rem;
          flex-direction: column;

          & .item-vimiva {
            padding: 2.4rem;
            gap: 1.4rem;
          }
        }
      }
    }
  }
}

@media (max-width: 640px) {
  .hero {
    min-height: 52vh;
    font-size: 1.8rem;
    text-align: center;
    padding: 2rem;
  }

  & .secao-inicio {
    gap: 4.5rem;

    & .container-inicio {
      & .texto-inicio {
        font-size: 1.6rem;

        & .p-inicios {
          gap: 2rem;

          & .sitacao {
            padding: 1.4rem;
          }
        }

        & .titulo-inicio {
          & h2 {
            font-size: 2.4rem;
          }
        }
      }

      & .imagem-inicio,
      & .imagem-final {
        min-height: 26rem;
      }
    }
  }

  & .secao-valores {
    & .container-valores {
      padding: 5.5rem 0;

      & .container-vimiva {
        gap: 6rem;
        & .texto-valores {
          & h2 {
            font-size: 2.2rem;
          }
        }

        & .itens-valores {
          gap: 4rem;
          & .item-vimiva {
            padding: 2rem;
          }
        }
      }
    }
  }
}