/* =========================================================
   1. RESET & BASES MODERNAS (MOBILE FIRST)
   ========================================================= */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-width: 0 !important;
  background-color: #1a0f07;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  color: #2c1d11;
  line-height: 4.6;
  position: relative;
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/* Links em geral */
a:link, a:visited { 
  color: #8c4a0e; 
  text-decoration: none; 
} 
a:active, a:hover { 
  text-decoration: underline; 
}

img { 
  border: none; 
  max-width: 100%; 
  height: auto; 
  display: block;
  border-radius: 9px;
  margin: 23px auto;
}

ul { 
  list-style: none; 
  padding: 0; 
  margin: 0; 
}

/* Otimização de leitura nos parágrafos */
p { 
  margin: 0 0 16px 0; 
  text-align: left; 
  line-height: 1.7; 
  font-size: 1rem;
  color: #332215;
}

.cleaner { 
  clear: both; 
  width: 100%; 
  height: 1px; 
}

/* =========================================================
   2. MENU NAVEGAÇÃO
   ========================================================= */
#templatemo_menu_panel {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 18px 8px;
  background: #2b1708 !important;
  border-bottom: 3px solid #63360c;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

#templatemo_menu_panel #templatemo_menu_section {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
}

#templatemo_menu_section ul {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

#templatemo_menu_section ul li { 
  display: block !important; 
  width: 100% !important;
  margin: 0 !important;
}

#templatemo_menu_section ul li a,
#templatemo_menu_section ul li a:link,
#templatemo_menu_section ul li a:visited {
  display: block !important;
  padding: 12px 16px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  text-align: center !important;
  text-decoration: none !important;
  color: #f3e5d8 !important;
  background: #42230b !important;
  border: 1px solid #734015 !important;
  border-radius: 8px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
  transition: all 0.2s ease-in-out !important;
}

#templatemo_menu_section ul li a:hover,
#templatemo_menu_section ul li a:active { 
  color: #ffffff !important; 
  background: #804415 !important;
  border-color: #b86e28 !important;
}

/* =========================================================
   3. CORPO DA PÁGINA
   ========================================================= */
#templatemo_content_container {
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  padding: 20px 12px 70px 12px;
  background: url(https://tpl.no.comunidades.net/estilos/styleA/25/images/templatemo_content_bg.gif) repeat;
}

#templatemo_content_container #templatemo_content {
  width: 100%;
  max-width: 850px;
  padding: 0;
  margin: 0 auto;
}

#templatemo_content_left {
  float: none !important;
  width: 100% !important;
  margin: 0 auto !important;
}

#templatemo_content_right { 
  display: none !important; 
}

#templatemo_content_left .templatemo_post_wrapper {
  clear: both;
  width: 100%;
  background: #fdfaf6 !important;
  border: 1px solid #d9c5b2 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
  margin-bottom: 20px;
  overflow: hidden;
}

#templatemo_content_left .templatemo_post {
  width: 100%;
  padding: 20px 16px !important;
  background: none !important;
}

/* =========================================================
   4. TIPOGRAFIA - TÍTULO PRINCIPAL REDUZIDO
   ========================================================= */
.templatemo_post .post_title {
  width: 100%;
  margin: 0 0 12px 0;
  padding: 0 0 10px 0;
  font-family: Georgia, serif;
  font-size: 1.5rem !important; /* Tamanho reduzido e proporcional */
  font-weight: 700;
  color: #241306;
  line-height: 1.3;
  border-bottom: 2px solid #e8d7c5;
}

/* Subtítulos */
.templatemo_post .post_body h2 {
  font-family: Georgia, serif;
  font-size: 1.35rem !important;
  margin: 22px 0 10px 0;
  color: #4a270d;
  font-weight: 700;
  line-height: 1.3;
}

.templatemo_post .post_body h3 {
  font-family: Georgia, serif;
  font-size: 1.2rem !important;
  margin: 18px 0 8px 0;
  color: #4a270d;
  font-weight: 700;
}

.templatemo_post .post_body h4 {
  font-size: 1.05rem !important;
  margin: 15px 0 6px 0;
  color: #4a270d;
  font-weight: 700;
}

.templatemo_post .post_body {
  width: 100%;
  height: auto !important;
}

/* =========================================================
   5. CONTADOR DISCRETO NO RODAPÉ
   ========================================================= */
#templatemo_content_right .coluna, 
.titulo {
  position: absolute !important;
  bottom: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  padding: 5px 14px !important;
  width: auto !important;
  background: rgba(0, 0, 0, 0.5) !important;
  border-radius: 20px !important;
  color: #d1beaa !important;
  font-size: 0.75rem !important;
  text-align: center !important;
  z-index: 99 !important;
  white-space: nowrap !important;
}

/* =========================================================
   6. OTIMIZAÇÃO PARA DESKTOP E TABLETS
   ========================================================= */
@media screen and (min-width: 601px) {
  #templatemo_menu_section ul {
    flex-direction: row !important;
    justify-content: center !important;
  }

  #templatemo_menu_section ul li { 
    width: auto !important;
  }

  #templatemo_menu_section ul li a,
  #templatemo_menu_section ul li a:link {
    padding: 10px 18px !important;
    font-size: 0.9rem !important;
  }

  #templatemo_content_left .templatemo_post {
    padding: 30px 25px !important;
  }

  .templatemo_post .post_title {
    font-size: 1.9rem !important; /* Ajuste moderado para desktop */
  }

  .templatemo_post .post_body h2 {
    font-size: 1.5rem !important;
  }

  p {
    font-size: 1.05rem;
  }
}