.layoutGrid {
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
    "destaque"
    "divisor"
    "servicos"
    "uso"
    "newdivisor"
    "blog"
    ;
}

.container {
    width: 100vw;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 2rem;
}

.container-menor {
    width: 100vw;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
}

@media (min-width: 1140px) {
    .container {
        padding: 0;
    }

    .container-menor {
        padding: 0;
    }
}

/**** Banner ****/

.bg {
    background-color: var(--cor-contraste);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.05) 1.5px,
        transparent 1px
      ),
      linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.05) 1.5px,
        transparent 1px
      );
    background-size: 160px 160px;
    mix-blend-mode: overlay;
    z-index: -2;
}

.bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.03) 0.5px,
        transparent 1px
      ),
      linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.03) 0.5px,
        transparent 1px
      );
    background-size: 32px 32px;
    z-index: -3;
}

.gradiente-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 220px;
    background: linear-gradient(to top, rgba(25, 3, 60, 0.8), transparent);
    z-index: -1;
}
  
.banner {
    padding-top: var(--size-xl);
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    position: relative;
}

@media (min-width: 1024px) {
    .banner {
        padding-top: var(--size-3xl);
        padding-bottom: var(--size-4xl);
        grid-template-columns: 3fr 2fr;
        gap: 4rem;
    }
}

.textos-banner {
    color: var(--cor-branco-marca);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.textos-banner div {
    display: grid;
    gap: 1.6rem;
    margin-bottom: 4rem;
}

.textos-banner .btn {
    width: fit-content;
}

@keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(100px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes slideInUp {
    from {
      opacity: 0;
      transform: translateY(100px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

.imagem-banner picture{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    animation: slideInUp 1s ease-out forwards;
    animation-delay: 0.3s;
}

@media (min-width: 1024px) {
    .imagem-banner picture{
        animation: slideInRight 1s ease-out forwards;
        animation-delay: 0.3s;
    }
}

.ilustracao-banner {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    height: auto;
    z-index: -1;
}

@media (min-width: 768px) {
    .ilustracao-banner {
        max-width: 560px;
    }

}

@media (min-width: 1024px) {
    .ilustracao-banner {
        width: fit-content;
    }

    .imagem-banner {
        position: absolute;
        bottom: 0; 
        right: -8rem; 
    }

}

/**** Frase destaque ****/

.destaque {
    grid-area: destaque;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3.2rem;
    grid-area: destaque;
    padding-top: var(--size-2xl);
    padding-bottom: var(--size-xl);
}

@media (min-width: 768px) {
    .destaque {
        grid-template-columns: 2fr 3fr;
        gap: 2rem;
        align-items: center;
    }

    .destaque p {
        padding-left: 2.4rem;
    }
}

@media (min-width: 1024px) {
    .destaque {
        padding-bottom: var(--size-2xl);
    }
}

.destaque .titulo-destaque {
    display: grid;
    gap: 2rem;
    position: relative;
}

.destaque .titulo-destaque::before {
    content: "";
    display: block;
    width: 7.8rem;
    height: 0.4rem;
    background-color: var(--cor-primaria);
}

.destaque .titulo-destaque span {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.destaque .titulo-destaque .lucide {
    display: inherit;
    min-width: 4rem;
    min-height: 4rem;
    color: var(--cor-secundaria);
}

.destaque .titulo-destaque h2 {
    font-weight: 400;
    line-height: 150%;
}

@media (min-width: 768px) {
    .destaque p {
        margin-top: 2rem;
        margin-left: 2.4rem;
    }
}

/**** Serviços ****/

.servicos {
    grid-area: servicos;
    display: grid;
    padding-top: var(--size-2xl);
    padding-bottom: var(--size-2xl);
}

@media (min-width: 1024px) {
    .servicos {
        padding-top: var(--size-3xl);
        padding-bottom: var(--size-3xl);
    }
}

.titulo-servicos {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: 1.2rem;
    padding-bottom: 4rem;
}

.titulo-servicos h2 {
    color: var(--cor-primaria);
}

.servicos nav {
    margin: 0 auto;
}

.alternador-servicos {
    display: inline-flex;
    border-bottom: 1px solid var(--cor-branco-marca);
    margin-bottom: 5.6rem;
    gap: 1.6rem;
}

.alternador-servicos li {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 1.6rem;
    font-size: var(--text-md);
    color: var(--cor-cinza);
    font-weight: 500;
    padding: 2rem 3.2rem;
    cursor: pointer;
}

.alternador-servicos .active {
    color: var(--cor-preto);
    border-bottom: 2px solid var(--cor-preto);
}

.alternador-servicos li .lucide {
    width: 4rem;
    height: 4rem;
}

@media (min-width: 768px) {
    .alternador-servicos li {
        flex-wrap: nowrap;
    }
}

.conteudo {
    display: grid;
    justify-items: center;
}

#conteudo2 {
    display: none;
}

.grupo-servicos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    margin-bottom: 4rem;
}

@media (min-width: 768px) {
    .grupo-servicos {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

.grupo-servicos .card .textos-card h3 {
    margin-bottom: 1.2rem;
}

.grupo-servicos .icon-circular .lucide {
    color: var(--cor-secundaria);
}

.grupo-servicos .card .textos-card p {
    color: var(--cor-cinza);
}

/**** Aplicação dos serviços ****/

.bg-uso {
    grid-area: uso;
    background-color: var(--cor-primaria-5off);
    padding-top: var(--size-2xl);
    padding-bottom: var(--size-2xl);
}

@media (min-width: 1024px) {
    .bg-uso {
        padding-top: var(--size-3xl);
        padding-bottom: var(--size-3xl);
    }
}

.caso-uso {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
}

@media (min-width: 1024px) {
    .caso-uso {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
}

.textos-uso {
    position: relative;
}

.textos-uso::before {
    content: "";
    display: block;
    width: 7.8rem;
    height: 0.4rem;
    margin-bottom: 2rem;
    background-color: var(--cor-secundaria);
}

.textos-uso h2{
    margin-bottom: 1.6rem;
    color: var(--cor-primaria);
}

.textos-uso h2 span {
    position: relative;
    z-index: 1;
}

.textos-uso h2 span::after{
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    display: block;
    width: 100%;
    height: 14px;
    background-color: var(--cor-primaria-20off);
    z-index: -1;
}

#anima-texto {
    transition: opacity 0.5s ease;
}

.lista-usos {
    height: fit-content;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
}

.lista-usos li {
    font-size: var(--text-sm);
    color: var(--cor-primaria);
    font-weight: 500;
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    padding: 1.6rem 2rem;
    border: 1px solid var(--cor-primaria);
    border-radius: var(--radius-sm);
    white-space: nowrap; /* Impede quebra de texto dentro do item */
    flex-grow: 1;
    flex-basis: auto; /* Ajusta melhor o tamanho ao conteúdo */
    min-width: max-content; /* Garante que o item não quebre */
}

@media (min-width: 1024px) {
    .lista-usos {
        justify-content: center;
    }

    .lista-usos li {
        flex: none;
    }
}

.lista-usos li .lucide {
    width: 2.8rem;
    height: 2.8rem;
    color: var(--cor-secundaria);
}

/**** Resumo blog ****/

.resumo-blog {
    grid-area: blog;
    display: flex;
    flex-direction: column;
    padding-top: 3.2rem;
    padding-bottom: var(--size-2xl);
}

@media (min-width: 1024px) {
    .resumo-blog {
        padding-top: var(--size-lg);
        padding-bottom: var(--size-3xl);
    }
}

.resumo-blog header {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 1.2rem;
}

.resumo-blog header h2 {
    color: var(--cor-primaria);
}

.grid-resumo-blog {
    display: grid;
    margin: 4rem 0;
    gap: 4rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px){
    .grid-resumo-blog {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px){
    .grid-resumo-blog {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }
}

.post-link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.post-link:hover {
    transform: translateY(-5px);
}

.post-link:hover img {
    filter: brightness(0.95);
    transform: scale(1.02);
}

.post img{
    display: block;
    width: 100%;
    min-height: 18rem;
    max-height: 28rem;
    object-fit: cover;
    margin-bottom: 2rem;
    border-radius: var(--radius-md);
    background-color: #f2f2f2;
    transition: filter 0.3s ease, transform 0.3s ease;
}

@media (min-width: 768px) {
    .post img{
        max-height: 22rem;
    }
}

.post-img-wrapper {
    position: relative;
    display: block;
}

.ver-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(90, 14, 191, 0.70);
    color: var(--cor-branco-marca);
    padding: 0.8rem 1.2rem;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.post-link:hover .ver-overlay {
    opacity: 1;
}

.textos-post {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.textos-post h3 {
    font-family: "vinila", sans-serif;
}

.textos-post p {
    color: var(--cor-cinza);
}