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

html{
    background-size: 100%;
    background-repeat: no-repeat;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #eab308;
    line-height: 150%;
}

a{
    text-decoration: none;
}

p{
    margin-top: 10px;
    margin-bottom: 20px;
    font-weight: bold;
}

h1{
    line-height: 120%;
    margin-top:10px;
    margin-bottom: 20px;
}


ul{
    list-style-type: none;
}

.pai{
    display: grid;
}

.categorias{
    display:flex;
    width: 100%;
    margin-top: 100px;
    gap:4%;
    justify-content: start;
    align-content: center;
    backdrop-filter: blur(90%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.685);
}

.img-card-artigo{
    margin-top: 10px;
    border:white solid;
    width:100%;
}

.menu-categorias{
    display:flex;
    margin:4px;
    padding: 5px;
}

.menu-link-categorias{
    margin:4px;
    padding: 5px;
}

.menu-link-categorias:hover{
    transform: scale(1.2);
}

}
.menu-link-categorias:hover{
    background-color: red;
}

.menu{
    display:flex;
    position:fixed;
    width: 100%;
    height: 70px;
    gap:4%;
    justify-content: center;
    align-content: center;
    backdrop-filter: blur(90%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.685);
}

.menu-link{
    transition: 0.2s;
    padding: 20px;
}

.menu-link:hover{
    background: rgb(255, 200, 116);
    transform:scale(1.2);
}



main{
    backdrop-filter: blur(90%);
    border: 3px solid rgba(255, 255, 255, 0.726);
    background: rgba(255, 255, 255, 0.493);
    padding:30px;
}

.form-email{

    /* Faz o formulário ocupar toda largura disponível */
    width:100%;


    /* Centraliza horizontalmente */
    margin:auto;

    /* Ativa o Flexbox */
    display:flex;

    /* Organiza os elementos em coluna */
    flex-direction:column;

    /* Espaçamento automático entre os elementos */
    gap:16px;

    /* Fundo branco */
    background:#ffffff;

    /* Espaçamento interno */
    padding:24px;

    /* Bordas arredondadas */
    border-radius:20px;

    /* Sombra suave */
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
}



/* =========================
   TEXTO PRINCIPAL
========================= */

.label{

    /* Tamanho da fonte */
    font-size:1.2rem;

    /* Peso da fonte */
    font-weight:700;

    /* Altura entre linhas */
    line-height:1.4;

    /* Cor do texto */
    color:#0f172a;
}



/* =========================
   CONTAINER DO INPUT + BOTÃO
========================= */

.form-group{

    /* Ativa Flexbox */
    display:flex;

    /* No mobile os elementos ficam empilhados */
    flex-direction:column;

    /* Espaço entre input e botão */
    gap:12px;
}



/* =========================
   INPUT DE EMAIL
========================= */

.input-email{

    /* Faz o input ocupar toda largura disponível */
    width:100%;

    /* Espaçamento interno */
    padding:16px;

    /* Borda suave */
    border:1px solid #dbe2ea;

    /* Bordas arredondadas */
    border-radius:14px;

    /* Tamanho do texto */
    font-size:1rem;

    /* Remove contorno padrão do navegador */
    outline:none;

    /* Suaviza animações */
    transition:0.2s;
}



/* =========================
   INPUT EM FOCO
========================= */

.input-email:focus{

    /* Muda a cor da borda */
    border-color:#facc15;

    /* Glow externo */
    box-shadow:0 0 0 4px rgba(250,204,21,0.2);
}



/* =========================
   BOTÃO
========================= */

.button-inscreva-se{

    /* Remove borda padrão */
    border:none;

    /* Cor de fundo */
    background:#facc15;

    /* Cor do texto */
    color:#0f172a;

    /* Espaçamento interno */
    padding:16px;

    /* Bordas arredondadas */
    border-radius:14px;

    /* Tamanho do texto */
    font-size:1rem;

    /* Peso da fonte */
    font-weight:700;

    /* Cursor de clique */
    cursor:pointer;

    /* Suaviza efeitos */
    transition:0.2s;
}



/* =========================
   EFEITO HOVER NO BOTÃO
========================= */

.button-inscreva-se:hover{

    /* Cor mais escura ao passar o mouse */
    background:#eab308;

    /* Move levemente para cima */
    transform:translateY(-2px);
}



/* =========================
   TEXTO AUXILIAR
========================= */

.form-info{

    /* Texto menor */
    font-size:0.9rem;

    /* Cor cinza */
    color:#64748b;

    /* Centraliza o texto */
    text-align:center;
}



/* =========================
   RESPONSIVIDADE
========================= */

@media(min-width:768px){
.form-email{
        max-width: 50%;
    }
    .form-group{

        /* No desktop input e botão ficam lado a lado */
        flex-direction:row;
    }
    .input-email{
        flex:1;
    }
     .cookie-container{
        max-width:500px;
        left:auto;
    }
    .cookie-buttons{
        flex-direction:row;
    }
    .cookie-btn{
        flex:1;
    }
    main{
        width:50%;
        align-self: center;
        justify-self: center;
    }
    .categorias{
        width:50%;
        align-self: center;
        justify-self: center;
    }
    html{
        background-size: 50%;
        background-position: 50%;
    }
        .titulo-blog{
        margin-top: 100px;
        align-self: center;
        justify-self: center;

    }
}

footer{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    color:white;
    text-align:end;
}

/*AVISO DE COOKIE*/
.cookie-container{
  position:fixed;
  bottom:20px;
  left:20px;
  right:20px;
  background:#0f172a;
  color:#fff;
  padding:24px;
  border-radius:20px;
  box-shadow:0 10px 30px rgba(0,0,0,0.2);
  z-index:9999;
  display:none;
  animation:showCookie .4s ease;
}

@keyframes showCookie{
  from{
    opacity:0;
    transform:translateY(20px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

.cookie-title{
  font-size:1.1rem;
  font-weight:bold;
  margin-bottom:12px;
}

.cookie-text{
  font-size:0.95rem;
  line-height:1.6;
  color:#cbd5e1;
  margin-bottom:20px;
}

.cookie-link{
  color:#facc15;
  text-decoration:none;
}

.cookie-buttons{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.cookie-btn{
  border:none;
  padding:14px;
  border-radius:12px;
  cursor:pointer;
  font-weight:bold;
  transition:.3s;
}

.accept-btn{
  background:#facc15;
  color:#0f172a;
}

.accept-btn:hover{
  background:#eab308;
}

.reject-btn{
  background:transparent;
  border:1px solid #334155;
  color:#fff;
}

.reject-btn:hover{
  background:#1e293b;
}


/*FIM DO AVISO DE COOKIE*/