html{ 
  width: 100%;
  height: 100%;
  max-width: 100%;
  display: block;
  font-size: 100%;
     font-size: 16px;
  -webkit-text-size-adjust: 100%;
  aspect-ratio: 16 / 9;
}
body{
  overflow-x:hidden;
   font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
   width: 100%;
   height: 100%;
   max-width: 100%;
    box-sizing: border-box;
 margin: 0;
 padding: 0;
 display: block;
  -webkit-font-smoothing: antialiased; 
            scroll-behavior: smooth;  
        font-weight: 400;
     letter-spacing: normal;
     line-height: 1.5;
          color: #111111;
     background: #ffffff;
     aspect-ratio: 16 / 9;
}

header{
  background: #f8f8f8;
    padding: 2VW;
        border: solid 1px #00000003;
            box-shadow: 1px 1px 5px 0px #00000017;
            border-bottom: solid 1px #d3d3d3;
}
.lo{
       box-shadow: 1px 1px 30px #00000021;
       padding: 2vw;
       border-radius: 1vw;
 background: #ffffff;
}
.ppnel{
  font-size: 1rem;
}
.login{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
     background: #3b8fd926;
}
.login p{
  margin: 0;
  margin-bottom: 3px;
}
.login form{
  display: flex;
  justify-content: center;
 
  flex-direction: column;
  gap: 6px; 
}
.login h1{
  text-align: center;
  font-size: 2.6rem;
  margin: 1px ;
  padding: 0;
}
.login input{
  font-size: 1rem;
min-width: 300px;
padding: 1px;
height: 40px;
margin: 0;
padding: 0;
border: solid 1px #00000036;
background-color: #fff;
border-radius: 3px;
}
.login input[name="submit"]{
margin-top: 1vw;
 }
input::placeholder {
    color: #fff; /* cinza */
}
nav ul{
    
  display: flex;
}
nav li{
display: flex;
gap: 2vw;
margin:1vw;
font-size: 1.2rem;
font-weight: 800;
}

h1,h2,h3,h4,h5,h6{
    line-height: 1.2;
    font-weight: 900;
}
p{
   color: #111;
}
.conn{
    display: flex;
  
  
    gap: 1vw;
 padding: 6vw;
 }
 img{
    flex-shrink: 0;
    object-fit: cover;
    object-position: center;
    max-width: 100%;
     border-radius: 2px;
 }
 .cobes {
   background-color: #f8f8f8;;
   max-width: 76%;
   padding: 1vw;
   border: solid 1px #00000003;
   border-radius: 3px;
    box-shadow: 1px 1px 5px 0px #00000017;
    border: solid 1px #d3d3d3;
 }
.cobes h1{
    font-size: 3rem;
}
 .con1{
    
     background-color: #3b8fd9;
    padding: 1vw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2vw;
    margin: 1vw 0;
 }
 .con2{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2vh;
  border: solid 1px #00000003;
 width: 360px;
     background-color: #f8f8f8;
      border-radius: 3px;
    padding: 1vw;
        box-shadow: 1px 1px 5px 0px #00000017;
        border: solid 1px #d3d3d3;
 }
 aside{ 
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2vh;
  flex-wrap: wrap;
 }
 .form_post{
  display: flex;
 }
 .menulateral{
  padding: 3px;
      width: 15vw;
      box-shadow: 1px -12px 1px #0000000e;
          border-right: solid 1px #0000001f;
             background-color: #000000cc;
             min-height: 100vh;
 }
 .menulateral ul{
max-width: 100%;
 margin: 0;
      padding: 0;
 }
   .fomtcont select{
  width: 20%;
  padding: 0.5vw;
  border-radius: 3px;
border: solid 1px #00000026;
 }
.cke_chrome {
    display: block;
    border: 1px solid #d1d1d1;
    padding: 0;
    width: 80% !important;
    border-radius: 3px;
}
.cke_notification_warning {
  display: none !important;
}
  .fomtcont input{
  width: 80%;
  padding: 0.5vw;
  border-radius: 3px;
border: solid 1px #00000026;
 }
 .fomtcont{
  width: 100%;
    box-shadow: 1px 1px 20px #0000000a;
    padding: 3vw;
    border-radius: 3px;
    background: #eceff7c2;
 }
 .fomtcont form{
 max-width: 100%;
 }
 .menulateral li{
   border-radius: 6px;
  padding: 1vw;
  margin: 0.1vw 0;
  list-style-type: none;
      box-shadow: inset 6px 15px 6px #0000000c;
     border: solid 1px #0000001f;
       background-color: #8889a3;
    
       font-weight: 800;
      
}
 .menulateral li a{
   color: #fff;
 }
 .con2 img{
    width: 300px;
    height: 200px;
 }
 .con1 img{
    width: 300px;
    height: 300px;
 }
 .con1 h2{
    font-size: 2rem;
 }
  .con1 p{
    font-size: 1.6rem;
 }
 .post{
      padding: 3vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

 }

 .ppst img{
  max-width: 100%;
  height: auto;
  object-fit: cover;
 }
 .ppst{
  
  width: 50%;
  padding: 3vw;
 }
 .ppst img{
  width: 100%;
  height: 560px;

 }
 .ppst ul{
  line-height: 0;
  list-style-type: none;
 }
  .ppst li{
  line-height: 0;
  list-style-type: none;
 }
 .ppst h1{
  font-size: 3rem;
 }
  .ppst h2{
font-size: 1.6rem;
line-height: 2;
 }
 a{
  color: #111;
 }
   .ppst h3{
font-size: 1.6rem;
line-height: 2;
 }
   .ppst h4{
font-size: 1.6rem;
line-height: 2;
 }
   .ppst h5{
font-size: 1.6rem;
line-height: 2;
 }
 
   .ppst h6{
font-size: 1.6rem;
line-height: 2;
 }
   .ppst p{
font-size: 1.1rem;
line-height: 2;
font-weight: 300;
 }
 .rel_post{
  width: 300px;
  height: 330px;
 }
 .rre{
      background-color: #e9e9e94f;
    border-top: solid 1px #0000000d;
  padding: 3vw;
 }
 .rel_post img{
      width: 100%;
    height: 220px;
 }
 .conp h2 {
    height: 139px;
    font-size: 1.5rem;
}
  .conp p{
     font-size: 1.2rem;
     height: 250px;
 }
.cones2 {
    display: flex;
    gap: 1vw;
    padding: 1.2vw 1.2vw;
    flex-wrap: wrap;
    background-color: #e9e9e94f;
    box-shadow: inset 1px 1px 20px 0px #00000012;
    border-radius: 3px;
      border: solid 1px #d3d3d3;
}

 .conp{
   border-radius: 3px;
   width: 250px;
  background: #fff;
  padding: 1vw;
   height:auto;
     box-shadow: 1px 1px 20px 0px #0303030a;
 border: solid 1px #d3d3d38c;

  }
 .conp img{
    width: 100%;
    height: 200px;
 }
 .cat { font-size: 3rem;}
.cat h2{
  font-size: 2rem;
}

.cat h3{
  font-size: 1.5rem;
}
.cat p{
  font-size: 1.1rem;
}
/* ===== Navbar ===== */
.navbar {
   border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #3b8fd9;
  color: white;
  padding: 15px 20px;
  position: relative;
  box-shadow: 1px 1px 5px 0px #00000017;
      border: solid 1px #ffffff;
  box-shadow: -8px 6px 1px 0px #000000d1;
}
.con1{
  box-shadow: 1px 1px 3px 01px #00000005;
   border-radius: 3px;
}
.logo img {
    height: auto;
    width: 200px;
}

/* ===== Links ===== */
.nav-links {
  list-style: none;
  display: flex;
  gap: 20px;
}

.nav-links li a {
  font-size: 1.2rem;
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s;
text-shadow: 1px 1px 1px #00000054;
}

.nav-links li a:hover {
  color: #e63946; /* Vermelho destaque */
}

/* ===== Menu mobile ===== */
.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 6px;
}

.menu-toggle span {
  width: 25px;
  height: 3px;
  background: white;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.rre h2{
  font-size: 2.6rem;
  text-align: center;
  line-height: 2;
}
.todosposts{
  display: flex;
justify-content: center;

}
.tdf{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1vw;
  background: #eceff7c2;
  color: #000;
}

thead{
  background-color: #000000;
  padding: 1vw;
}
tr{
  box-shadow: 1px 1px 10px #00000016;
  line-height: 3;
      background: #fff;
      border-radius: 10px;
}
td{
  padding: 0.3vw;
}
.tdf table{
  width: 80%;
}
@media screen and (max-width: 430px) {
  html,body{
    aspect-ratio: 9 / 16 ;
  }
  html{
    font-size: 15px;
  }

  h1,h2,h3,h4,h5,h6{
    line-height: 1.2;
    font-weight: 700;
  }
  .rre {
    padding: 3vw;
    
}
aside{
  overflow-x: auto;
}
  aside::-webkit-scrollbar {
  display: none;
}
   .cobes {
    background-color: #f8f8f8;
    max-width: 100%;
    padding: 1vw;
}

   .con1 h2 {
    font-size: 1.3rem;
    margin: 0;
    padding: 0;
}
    .con1 img {
        width: 160px;
        height: 400px;
    }

.con1 p {
    font-size: 1.1rem;
    margin: 0;
    padding: 0;
}
   .conn{
             padding: 2vh;
      flex-direction: column;
      align-items: center;
      justify-content: center;
   }
.cones2 {
   width: 100vw;
   min-width: 100%;
    max-width: 100%;
    display: flex;               /* necessário para itens em linha */
    flex-wrap: nowrap;           /* não quebrar linha */
    overflow-x: auto;            /* habilita rolagem horizontal */
      
    scroll-behavior: smooth;               
  
 
}
.cat {
    text-align: center;
    font-size: 1.8rem;
}
.cobes h1 {
   text-align: center;
     font-size: 2rem;
}
.conp {
            /* impede o item de encolher */
  min-width: 230px;               /* mantém o tamanho */

}
/* esconde a barra de rolagem (opcional) */
.cones2::-webkit-scrollbar {
  display: none;
}

   .con2 , .titulodes{
        padding: 1vh;
    display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
}

 .menu-toggle {
    display: flex;
  }

  .nav-links {
    position: absolute;
   top: 117px;
    left: 0;
    width: 100%;
    flex-direction: column;
    background: #111;
    gap: 15px;
    padding: 20px;
    text-align: center;
    display: none;
  }

  .nav-links.active {
    display: flex;
    animation: fadeIn 0.3s ease-in-out;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Animação do botão hambúrguer */
  .menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }
  .ppst{
    width: 100% ;
    padding: 0;
}
.ppst h1 {
    font-size: 2rem;
}
 }