/* ==========================================================================
   Dicas Casa e Jardim — Folha de estilos principal
   Responsivo: mobile-first com breakpoints em 480 / 640 / 860 / 1100px
   Acessibilidade: WCAG 2.1 AA — touch targets 44px, foco visível, contraste
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIÁVEIS CSS
   -------------------------------------------------------------------------- */
:root {
  --dcj-green:        #2E7D32;
  --dcj-green-2:      #66BB6A;
  --dcj-green-dark:   #1B5E20;
  --dcj-bg:           #ffffff;
  --dcj-surface:      #f5f7f5;
  --dcj-surface-2:    #eef6ef;
  --dcj-text:         #222222;
  --dcj-muted:        #667085;
  --dcj-border:       rgba(46, 125, 50, 0.14);
  --dcj-shadow:       0 18px 50px rgba(15, 23, 42, 0.10);
  --dcj-shadow-soft:  0 10px 30px rgba(15, 23, 42, 0.08);
  --dcj-radius:       24px;
  --dcj-radius-sm:    14px;
  --dcj-heading:      'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --dcj-body:         'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Espaçamentos fluidos */
  --dcj-section-py:   clamp(48px, 8vw, 80px);
  --dcj-container-px: clamp(14px, 3vw, 40px);
}

[data-theme='dark'] {
  --dcj-bg:          #101510;
  --dcj-surface:     #151d16;
  --dcj-surface-2:   #1c2a1e;
  --dcj-text:        #f4f7f4;
  --dcj-muted:       #b7c4b8;
  --dcj-border:      rgba(102, 187, 106, 0.18);
  --dcj-shadow:      0 18px 50px rgba(0, 0, 0, 0.34);
  --dcj-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.24);
}

/* --------------------------------------------------------------------------
   2. RESET E BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--dcj-text);
  background: var(--dcj-bg);
  font-family: var(--dcj-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; transition: color .2s ease, opacity .2s ease; }
a:hover { color: var(--dcj-green); }

/* Foco visível — WCAG 2.1 AA */
:focus-visible {
  outline: 3px solid var(--dcj-green-2);
  outline-offset: 3px;
  border-radius: 4px;
}

img { max-width: 100%; height: auto; display: block; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

/* Tabelas responsivas */
.premium-content table,
.entry-content table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Skip link acessível — aparece ao receber foco */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 10000;
  padding: 12px 20px;
  background: var(--dcj-green);
  color: #fff;
  font-weight: 800;
  border-radius: 0 0 12px 12px;
  text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid var(--dcj-green-2);
  outline-offset: 2px;
}

/* Screen-reader only */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. LAYOUT — CONTAINERS
   -------------------------------------------------------------------------- */
.container {
  width: min(1180px, calc(100% - var(--dcj-container-px) * 2));
  margin-inline: auto;
  display: block;
  clear: both;
}

.narrow-container {
  width: min(880px, calc(100% - var(--dcj-container-px) * 2));
  margin-inline: auto;
  display: block;
  clear: both;
}

.main-column { width: 100%; min-width: 0; flex: 1; }

/* Layout principal com sidebar */
.content-sidebar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: 34px;
  align-items: start;
  width: 100%;
  clear: both;
}

.archive-page .container,
.single-wrapper .container,
.search-page .container {
  width: min(1180px, calc(100% - var(--dcj-container-px) * 2)) !important;
  max-width: 1180px !important;
}

.section-padding { padding: var(--dcj-section-py) 0; }

/* --------------------------------------------------------------------------
   4. TIPOGRAFIA E UTILITÁRIOS
   -------------------------------------------------------------------------- */
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--dcj-green);
  font-weight: 800;
  letter-spacing: .08em;
  font-size: .78rem;
  text-transform: uppercase;
}
.section-kicker::before {
  content: '';
  width: 26px;
  height: 2px;
  background: linear-gradient(90deg, var(--dcj-green), var(--dcj-green-2));
  border-radius: 999px;
  flex-shrink: 0;
}

.section-heading { margin-bottom: 30px; }
.section-heading h2,
.page-header h1,
.single-header h1 {
  font-family: var(--dcj-heading);
  line-height: 1.12;
  letter-spacing: -0.04em;
  margin: 8px 0 0;
}
.section-heading h2 { font-size: clamp(1.75rem, 4vw, 3.1rem); }
.section-heading p { max-width: 690px; color: var(--dcj-muted); }

.centered { text-align: center; }
.centered p { margin-left: auto; margin-right: auto; }

.inline-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.text-link { color: var(--dcj-green); font-weight: 800; }

/* --------------------------------------------------------------------------
   5. BOTÕES E FORMULÁRIOS
   -------------------------------------------------------------------------- */
.search-form { position: relative; }
.live-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--dcj-bg);
  border: 1px solid var(--dcj-border);
  border-radius: 16px;
  box-shadow: var(--dcj-shadow);
  z-index: 1001;
  margin-top: 8px;
  display: none;
  overflow: hidden;
}
.live-search-results ul { list-style: none; padding: 0; margin: 0; }
.live-search-results li { border-bottom: 1px solid var(--dcj-border); }
.live-search-results li:last-child { border-bottom: 0; }
.live-search-results a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  font-size: 0.9rem;
  font-weight: 600;
}
.live-search-results a:hover { background: var(--dcj-surface-2); }
.live-search-results img { border-radius: 8px; object-fit: cover; }
.button,
.search-submit,
.newsletter-form button {
  border: 0;
  border-radius: 999px;
  padding: 13px 22px;
  background: linear-gradient(135deg, var(--dcj-green), var(--dcj-green-2));
  color: #fff;
  font-weight: 800;
  box-shadow: 0 12px 25px rgba(46,125,50,.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  white-space: nowrap;
}
.button:hover,
.search-submit:hover,
.newsletter-form button:hover { color: #fff; transform: translateY(-1px); }

.search-field,
.newsletter-form input,
.comment-form input,
.comment-form textarea {
  width: 100%;
  border: 1px solid var(--dcj-border);
  background: var(--dcj-bg);
  color: var(--dcj-text);
  border-radius: 999px;
  padding: 14px 18px;
  outline: 0;
  /* Evita zoom em iOS (font-size mínimo 16px) */
  font-size: max(16px, 1rem);
}
.comment-form textarea { border-radius: 18px; min-height: 160px; }
.search-field:focus,
.newsletter-form input:focus,
.comment-form input:focus,
.comment-form textarea:focus {
  border-color: var(--dcj-green-2);
  box-shadow: 0 0 0 4px rgba(102,187,106,.14);
}

.newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter-form input { flex: 1; min-width: 180px; }
.newsletter-form.compact { flex-direction: column; }

.search-form { display: flex; gap: 10px; align-items: center; }
.search-form label { flex: 1; }

/* --------------------------------------------------------------------------
   6. BARRA DE PROGRESSO DE LEITURA
   -------------------------------------------------------------------------- */
.reading-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  z-index: 1000;
  background: transparent;
}
.reading-progress span {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--dcj-green), var(--dcj-green-2));
  transition: width .1s linear;
}

/* --------------------------------------------------------------------------
   7. CABEÇALHO
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: color-mix(in srgb, var(--dcj-bg) 90%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--dcj-border);
  transition: box-shadow .2s ease, background .2s ease;
}
.site-header.is-scrolled { box-shadow: var(--dcj-shadow-soft); }

.topbar { background: var(--dcj-green-dark); color: #fff; font-size: .88rem; }
.topbar-inner {
  min-height: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.topbar a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.header-inner {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-branding { display: flex; flex-direction: column; flex-shrink: 0; }
.site-logo-text {
  font-family: var(--dcj-heading);
  font-weight: 800;
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  letter-spacing: -.04em;
}
.site-logo-text span { color: var(--dcj-green); }
.site-description { margin: 0; color: var(--dcj-muted); font-size: .8rem; }

/* Navegação principal */
.main-navigation { flex: 1; display: flex; justify-content: center; }
.main-navigation ul {
  list-style: none;
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  align-items: center;
}
.main-navigation li { position: relative; }
.main-navigation a {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border-radius: 999px;
  font-weight: 700;
  color: var(--dcj-text);
  min-height: 44px;
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a {
  background: var(--dcj-surface-2);
  color: var(--dcj-green);
}

/* Submenu */
.main-navigation .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 240px;
  flex-direction: column;
  align-items: stretch;
  background: var(--dcj-bg);
  border: 1px solid var(--dcj-border);
  border-radius: 18px;
  box-shadow: var(--dcj-shadow);
  padding: 10px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: .2s ease;
  z-index: 100;
}
.main-navigation li:hover > .sub-menu,
.main-navigation li:focus-within > .sub-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Ações do cabeçalho */
.header-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }

.search-toggle,
.theme-toggle,
.menu-toggle {
  border: 1px solid var(--dcj-border);
  background: var(--dcj-surface);
  color: var(--dcj-text);
  border-radius: 999px;
  min-width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Hamburguer — oculto em desktop */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 0 12px;
}
.menu-toggle span:not(.screen-reader-text) {
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 99px;
  transition: transform .2s ease, opacity .2s ease;
  display: block;
}

/* Busca expandida */
.header-search { padding: 0 0 18px; }

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.hero-section {
  padding: 34px 0 54px;
  background:
    radial-gradient(circle at top left, rgba(102,187,106,.18), transparent 36%),
    linear-gradient(180deg, var(--dcj-surface), var(--dcj-bg));
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .8fr);
  gap: 24px;
  align-items: start;
}

.hero-featured {
  position: relative;
  min-height: 560px;
  border-radius: var(--dcj-radius);
  overflow: hidden;
  box-shadow: var(--dcj-shadow);
  background: #132315;
}
.hero-media,
.hero-media img,
.hero-media .thumbnail-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.75));
}
.hero-content {
  position: absolute;
  inset: auto 0 0;
  padding: clamp(20px, 4vw, 44px);
  color: #fff;
}
.hero-content h1 {
  font-family: var(--dcj-heading);
  font-size: clamp(2rem, 5vw, 4.8rem);
  line-height: 1.02;
  letter-spacing: -.06em;
  margin: 12px 0;
}
.hero-content p { max-width: 680px; color: rgba(255,255,255,.86); }
.hero-content .post-meta { color: rgba(255,255,255,.85); }

.hero-side { display: grid; gap: 16px; align-content: start; }

.mini-card {
  display: grid;
  grid-template-columns: 138px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--dcj-border);
  border-radius: 22px;
  background: var(--dcj-bg);
  box-shadow: var(--dcj-shadow-soft);
}
.mini-thumb img,
.mini-thumb .thumbnail-fallback { width: 138px; height: 104px; object-fit: cover; border-radius: 16px; }
.mini-card h2 { font-family: var(--dcj-heading); font-size: 1rem; line-height: 1.25; margin: 8px 0 2px; }
.mini-card span { color: var(--dcj-muted); font-size: .85rem; }

/* --------------------------------------------------------------------------
   9. BADGES E META
   -------------------------------------------------------------------------- */
.post-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(102,187,106,.15);
  color: var(--dcj-green);
  font-size: .74rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.hero-content .post-badge {
  background: rgba(255,255,255,.18);
  color: #fff;
  backdrop-filter: blur(10px);
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  color: var(--dcj-muted);
  font-size: .86rem;
  font-weight: 600;
}
.post-meta span:not(:last-child)::after {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 50%;
  margin-left: 14px;
  vertical-align: middle;
  opacity: .45;
}

/* --------------------------------------------------------------------------
   10. GRIDS DE CONTEÚDO
   -------------------------------------------------------------------------- */
.category-grid,
.discover-grid,
.guide-grid,
.post-grid { display: grid; gap: 22px; }

.category-grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 20px;
}

.category-card {
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px;
  border: 1px solid var(--dcj-border);
  border-radius: 22px;
  background: linear-gradient(180deg, var(--dcj-bg), var(--dcj-surface));
  box-shadow: var(--dcj-shadow-soft);
  word-break: break-word;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.category-card strong {
  font-family: var(--dcj-heading);
  font-size: 1.05rem;
  line-height: 1.3;
  margin: 10px 0;
  display: block;
  width: 100%;
}
.category-card small { color: var(--dcj-muted); }

.category-card:hover,
.post-card:hover,
.discover-card:hover,
.guide-card:hover { transform: translateY(-5px); box-shadow: var(--dcj-shadow); }

.category-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--dcj-surface-2);
  color: var(--dcj-green);
  font-weight: 900;
  font-size: 1.35rem;
  flex-shrink: 0;
}

/* Anúncio placeholder */
.ad-container {
  min-height: 112px;
  border: 1px dashed rgba(46,125,50,.38);
  border-radius: 22px;
  background: repeating-linear-gradient(
    45deg,
    var(--dcj-surface), var(--dcj-surface) 10px,
    var(--dcj-surface-2) 10px, var(--dcj-surface-2) 20px
  );
  display: grid;
  place-items: center;
  color: var(--dcj-muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
}

/* Grids específicos */
.post-grid           { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.three-columns       { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.discover-grid       { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.guide-grid          { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Cards */
.post-card,
.discover-card,
.guide-card,
.premium-widget,
.single-article,
.single-page,
.comments-area,
.empty-state {
  border: 1px solid var(--dcj-border);
  border-radius: var(--dcj-radius);
  background: var(--dcj-bg);
  box-shadow: var(--dcj-shadow-soft);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.post-card { overflow: hidden; }
.post-card-media img,
.post-card-media .thumbnail-fallback { width: 100%; aspect-ratio: 1.55 / 1; object-fit: cover; }
.post-card-content { padding: 20px; }
.post-card-title {
  font-family: var(--dcj-heading);
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  line-height: 1.22;
  margin: 10px 0;
  letter-spacing: -.03em;
}
.post-card p { color: var(--dcj-muted); margin-top: 0; }

/* Discover */
.discover-section { background: linear-gradient(180deg, var(--dcj-surface), var(--dcj-bg)); }
.discover-card { overflow: hidden; background: var(--dcj-bg); }
.discover-media img,
.discover-media .thumbnail-fallback { width: 100%; aspect-ratio: 1.1 / 1; object-fit: cover; }
.discover-content { padding: 18px; }
.discover-content h3,
.guide-card strong { font-family: var(--dcj-heading); line-height: 1.2; letter-spacing: -.03em; }

/* Guias */
.guide-card {
  padding: 28px;
  background: linear-gradient(135deg, var(--dcj-surface-2), var(--dcj-bg));
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.guide-card strong { font-size: 1.45rem; }
.guide-card span { color: var(--dcj-muted); }

/* --------------------------------------------------------------------------
   11. SIDEBAR
   -------------------------------------------------------------------------- */
.sidebar {
  position: sticky;
  top: 118px;
  display: grid;
  gap: 20px;
  align-content: start;
}
.premium-widget { padding: 22px; }
.widget-title { font-family: var(--dcj-heading); font-size: 1.12rem; margin: 0 0 16px; }

.sidebar-post-list { display: grid; gap: 14px; }
.sidebar-post {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 12px;
  align-items: center;
  font-weight: 800;
  line-height: 1.25;
}
.sidebar-post-thumb img,
.sidebar-post-thumb .thumbnail-fallback { width: 74px; height: 64px; object-fit: cover; border-radius: 14px; }
.sidebar-post small { display: block; color: var(--dcj-muted); font-weight: 600; margin-top: 4px; }

.ad-widget {
  min-height: 260px;
  display: grid;
  place-items: center;
  border-style: dashed;
  color: var(--dcj-muted);
  background: var(--dcj-surface);
}

.category-list,
.footer-main ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.category-list a,
.footer-main a { color: var(--dcj-muted); font-weight: 650; }

.newsletter-widget p { color: var(--dcj-muted); }

/* --------------------------------------------------------------------------
   12. BREADCRUMBS
   -------------------------------------------------------------------------- */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--dcj-muted);
  font-size: .9rem;
  margin: 0 0 22px;
}
.breadcrumbs a { color: var(--dcj-green); font-weight: 700; }

/* --------------------------------------------------------------------------
   13. ARTIGO ÚNICO
   -------------------------------------------------------------------------- */
.single-article,
.single-page { padding: clamp(22px, 4vw, 46px); box-shadow: none; }

.single-header h1,
.page-header h1 { font-size: clamp(2rem, 5vw, 4.4rem); }

.single-excerpt {
  color: var(--dcj-muted);
  font-size: clamp(1rem, 2vw, 1.18rem);
  max-width: 760px;
}

.single-featured-image { margin: 30px 0; }
.single-featured-image img { border-radius: var(--dcj-radius); width: 100%; }

.article-tools { display: grid; gap: 18px; margin: 22px 0; }

.share-box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 14px;
  background: var(--dcj-surface);
  border: 1px solid var(--dcj-border);
  border-radius: 18px;
}
.share-box span { font-weight: 900; }
.share-box a {
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--dcj-bg);
  border: 1px solid var(--dcj-border);
  color: var(--dcj-green);
  font-weight: 800;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.inline-ad { min-height: 92px; }

/* Conteúdo premium */
.premium-content { font-size: clamp(1rem, 1.5vw, 1.07rem); }
.premium-content h2,
.premium-content h3,
.premium-content h4 {
  font-family: var(--dcj-heading);
  letter-spacing: -.03em;
  line-height: 1.22;
  margin-top: 1.7em;
}
.premium-content h2 { font-size: clamp(1.55rem, 3vw, 2.45rem); }
.premium-content h3 { font-size: clamp(1.25rem, 2.4vw, 1.8rem); }
.premium-content p,
.premium-content ul,
.premium-content ol {
  color: color-mix(in srgb, var(--dcj-text) 86%, var(--dcj-muted));
}
.premium-content a { color: var(--dcj-green); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.premium-content blockquote {
  margin: 28px 0;
  padding: 22px 24px;
  border-left: 5px solid var(--dcj-green);
  background: var(--dcj-surface);
  border-radius: 0 18px 18px 0;
  font-family: var(--dcj-heading);
  font-size: clamp(1rem, 2vw, 1.18rem);
}
.premium-content table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 0 0 1px var(--dcj-border);
}
.premium-content th,
.premium-content td { padding: 14px; border-bottom: 1px solid var(--dcj-border); text-align: left; }
.premium-content th { background: var(--dcj-surface-2); }
.premium-content .wp-block-image img { border-radius: var(--dcj-radius-sm); }

/* CTA interna */
.internal-cta {
  margin: 36px 0;
  padding: 28px;
  border-radius: var(--dcj-radius);
  background: linear-gradient(135deg, rgba(46,125,50,.12), rgba(102,187,106,.12));
  border: 1px solid var(--dcj-border);
}
.internal-cta h2 { font-family: var(--dcj-heading); margin: 10px 0 18px; }

.tag-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.tag-list a {
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--dcj-surface);
  color: var(--dcj-green);
  font-weight: 800;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.comments-area { padding: clamp(18px, 3vw, 28px); margin-top: 30px; }
.comment-list { padding-left: 22px; }

/* --------------------------------------------------------------------------
   14. NEWSLETTER
   -------------------------------------------------------------------------- */
.newsletter-band {
  padding: clamp(40px, 6vw, 54px) 0;
  background: linear-gradient(135deg, var(--dcj-green-dark), var(--dcj-green));
  color: #fff;
}
.newsletter-inner {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 36px;
}
.newsletter-inner .section-kicker { color: #fff; }
.newsletter-inner .section-kicker::before { background: #fff; }
.newsletter-inner h2 {
  font-family: var(--dcj-heading);
  font-size: clamp(1.6rem, 4vw, 3rem);
  line-height: 1.12;
  margin: 10px 0;
}
.newsletter-inner p { color: rgba(255,255,255,.82); }
.newsletter-inner .newsletter-form input { background: rgba(255,255,255,.94); color: #222; }

/* --------------------------------------------------------------------------
   12. ELITE v2.0 FEATURES (TOC & STICKY AD)
   -------------------------------------------------------------------------- */
.post-toc {
  background: var(--dcj-surface);
  border: 1px solid var(--dcj-border);
  border-radius: var(--dcj-radius-sm);
  padding: 24px;
  margin: 32px 0;
}
.toc-title {
  font-family: var(--dcj-heading);
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 16px;
  color: var(--dcj-green);
  display: flex;
  align-items: center;
  gap: 10px;
}
.toc-title::before {
  content: '☰';
  font-size: 0.9rem;
}
.post-toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.post-toc li {
  margin-bottom: 8px;
  line-height: 1.4;
}
.post-toc a {
  text-decoration: none;
  color: var(--dcj-text);
  font-size: 0.95rem;
  font-weight: 600;
  transition: color 0.2s;
}
.post-toc a:hover {
  color: var(--dcj-green);
}
.toc-level-3 {
  padding-left: 20px;
  font-size: 0.9rem;
  opacity: 0.9;
}

.sticky-ad-mobile {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--dcj-bg);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
  z-index: 9999;
  display: none;
  text-align: center;
  padding: 10px 0;
  border-top: 2px solid var(--dcj-green);
}
.sticky-ad-close {
  position: absolute;
  top: -30px;
  right: 10px;
  background: var(--dcj-green);
  color: #fff;
  border: none;
  border-radius: 8px 8px 0 0;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
}
@media (max-width: 860px) {
  .sticky-ad-mobile { display: block; }
  body { padding-bottom: 60px; } /* Espaço para o ad não cobrir o conteúdo */
}

/* --------------------------------------------------------------------------
   13. RODAPÉ
   -------------------------------------------------------------------------- */
.site-footer { background: #0f1b11; color: #fff; }
.footer-main {
  display: grid;
  grid-template-columns: 1.3fr .7fr 1fr;
  gap: 44px;
  padding: clamp(40px, 6vw, 54px) 0;
}
.footer-logo { color: #fff; display: inline-block; margin-bottom: 12px; }
.footer-brand p,
.footer-main a,
.footer-bottom { color: rgba(255,255,255,.72); }
.footer-main h3,
.footer-widget-title { font-family: var(--dcj-heading); margin-top: 0; }

.social-links { display: flex; flex-wrap: wrap; gap: 10px; }
.social-links a {
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 18px 0; font-size: .9rem; }
.footer-bottom p { margin: 0; }

/* --------------------------------------------------------------------------
   16. UTILITÁRIOS VISUAIS
   -------------------------------------------------------------------------- */
.thumbnail-fallback {
  min-height: 120px;
  border-radius: inherit;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--dcj-green), var(--dcj-green-2));
  color: #fff;
  font-family: var(--dcj-heading);
  font-weight: 900;
  letter-spacing: -.03em;
}

.empty-state { padding: 48px; text-align: center; }
.empty-icon {
  display: inline-grid;
  place-items: center;
  min-width: 72px;
  height: 72px;
  padding: 0 12px;
  border-radius: 24px;
  background: var(--dcj-surface-2);
  color: var(--dcj-green);
  font-family: var(--dcj-heading);
  font-weight: 900;
}

.pagination,
.nav-links {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.page-numbers {
  padding: 10px 14px;
  border: 1px solid var(--dcj-border);
  border-radius: 999px;
  font-weight: 800;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.page-numbers.current { background: var(--dcj-green); color: #fff; }

/* Animação de entrada */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   17. RESPONSIVIDADE — TABLET LANDSCAPE (≤ 1100px)
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  /* Layout principal: coluna única */
  .content-sidebar-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .main-column,
  .sidebar { width: 100% !important; }

  /* Sidebar em grid 2 colunas no tablet landscape */
  .sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  /* Hero: coluna única com side em 2 colunas */
  .hero-grid { grid-template-columns: 1fr; }
  .hero-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Discover: 2 colunas */
  .discover-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Categorias: menor mínimo */
  .category-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* --------------------------------------------------------------------------
   18. RESPONSIVIDADE — TABLET PORTRAIT (≤ 860px)
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  /* Topbar oculta */
  .topbar { display: none; }

  /* Cabeçalho compacto */
  .header-inner { min-height: 70px; gap: 16px; }

  /* Menu hamburguer visível */
  .menu-toggle { display: inline-flex; }

  /* Menu mobile — overlay fixo */
  .main-navigation {
    position: fixed;
    inset: 70px 16px auto;
    max-height: calc(100dvh - 90px);
    overflow-y: auto;
    display: none;
    background: var(--dcj-bg);
    border: 1px solid var(--dcj-border);
    border-radius: 22px;
    box-shadow: var(--dcj-shadow);
    padding: 14px;
    justify-content: stretch;
    z-index: 998;
    -webkit-overflow-scrolling: touch;
  }
  .main-navigation.is-open { display: block; }
  .main-navigation ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .main-navigation a { padding: 14px 16px; border-radius: 14px; width: 100%; }
  .main-navigation .sub-menu {
    position: static;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    width: 100%;
    box-shadow: none;
    margin-left: 10px;
    border: none;
    background: var(--dcj-surface);
    border-radius: 14px;
    margin-top: 4px;
  }

  /* Hero */
  .hero-featured { min-height: 460px; }
  .hero-side { grid-template-columns: 1fr; }

  /* Grids: 2 colunas */
  .post-grid,
  .three-columns,
  .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Newsletter e rodapé: coluna única */
  .newsletter-inner,
  .footer-main { grid-template-columns: 1fr; }

  /* Sidebar: coluna única */
  .sidebar { grid-template-columns: 1fr; }

  /* Heading inline */
  .inline-heading { align-items: flex-start; flex-direction: column; }

  /* Rodapé */
  .footer-main { gap: 32px; }
}

/* --------------------------------------------------------------------------
   19. RESPONSIVIDADE — MOBILE GRANDE (≤ 640px)
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* Containers */
  .container,
  .narrow-container { width: min(100% - 28px, 1180px); }

  .section-padding { padding: 48px 0; }

  /* Hero */
  .hero-section { padding-top: 18px; }
  .hero-featured { min-height: 420px; }
  .hero-content { padding: 22px; }
  .hero-content h1 { font-size: clamp(1.8rem, 7vw, 2.6rem); }

  /* Mini cards: imagem menor */
  .mini-card { grid-template-columns: 112px 1fr; }
  .mini-thumb img,
  .mini-thumb .thumbnail-fallback { width: 112px; height: 92px; }

  /* Grids: coluna única */
  .post-grid,
  .three-columns,
  .guide-grid,
  .category-grid,
  .discover-grid { grid-template-columns: 1fr; }

  /* Formulários: coluna única */
  .newsletter-form,
  .search-form { flex-direction: column; align-items: stretch; }
  .newsletter-form input { min-width: unset; }

  /* Artigos */
  .single-article,
  .single-page,
  .comments-area,
  .empty-state { padding: 22px; border-radius: 20px; }

  .single-header h1,
  .page-header h1 { font-size: clamp(1.75rem, 7vw, 2.4rem); }

  /* Ações do cabeçalho */
  .header-actions { gap: 6px; }

  /* Paginação */
  .pagination,
  .nav-links { gap: 6px; }

  /* Sidebar */
  .sidebar { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   20. RESPONSIVIDADE — MOBILE PEQUENO (≤ 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  body { font-size: 15px; }

  .container,
  .narrow-container { width: calc(100% - 24px); }

  /* Hero ainda mais compacto */
  .hero-featured { min-height: 360px; }
  .hero-content h1 { font-size: clamp(1.6rem, 8vw, 2.2rem); letter-spacing: -.04em; }
  .hero-content p { font-size: .92rem; }

  /* Mini card: horizontal → vertical */
  .mini-card { grid-template-columns: 1fr; gap: 10px; }
  .mini-thumb img,
  .mini-thumb .thumbnail-fallback { width: 100%; height: 180px; border-radius: 14px; }

  /* Cabeçalho */
  .site-logo-text { font-size: 1.1rem; }
  .site-description { display: none; }

  /* Botões */
  .button,
  .search-submit,
  .newsletter-form button { padding: 12px 18px; font-size: .92rem; }

  /* Artigo */
  .single-article,
  .single-page { padding: 18px; border-radius: 16px; }
  .premium-content h2 { font-size: clamp(1.35rem, 6vw, 1.75rem); }
  .premium-content h3 { font-size: clamp(1.15rem, 5vw, 1.4rem); }
  .premium-content blockquote { padding: 16px 18px; }

  /* Guias */
  .guide-card { padding: 20px; }
  .guide-card strong { font-size: 1.2rem; }

  /* Rodapé */
  .social-links { gap: 8px; }
  .social-links a { font-size: .88rem; padding: 8px 10px; }

  /* Breadcrumbs */
  .breadcrumbs { font-size: .82rem; }

  /* Share box */
  .share-box { flex-direction: column; align-items: flex-start; }

  /* Paginação */
  .page-numbers { min-width: 40px; min-height: 40px; }
}

/* --------------------------------------------------------------------------
   21. LANDSCAPE MOBILE (altura reduzida)
   -------------------------------------------------------------------------- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-featured { min-height: 300px; }
  .hero-content h1 { font-size: 1.8rem; }
  .site-header { position: relative; }
  .main-navigation {
    inset: 60px 16px auto;
    max-height: calc(100dvh - 80px);
  }
}

/* --------------------------------------------------------------------------
   22. PREFERÊNCIAS DO SISTEMA
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .category-card:hover,
  .post-card:hover,
  .discover-card:hover,
  .guide-card:hover { transform: none; }
}

@media (prefers-contrast: more) {
  :root {
    --dcj-border: rgba(46, 125, 50, 0.4);
    --dcj-muted: #4a5568;
  }
  .post-badge { border: 1px solid currentColor; }
  .page-numbers { border-width: 2px; }
}

/* --------------------------------------------------------------------------
   23. IMPRESSÃO
   -------------------------------------------------------------------------- */
@media print {
  .site-header,
  .site-footer,
  .sidebar,
  .reading-progress,
  .ad-container,
  .ad-widget,
  .newsletter-band,
  .share-box,
  .internal-cta,
  .related-posts,
  .comments-area { display: none !important; }

  body { font-size: 12pt; color: #000; background: #fff; }
  .single-article,
  .single-page { padding: 0; border: none; box-shadow: none; }
  .premium-content a::after { content: ' (' attr(href) ')'; font-size: .85em; color: #555; }
  .single-featured-image img { max-height: 300px; object-fit: cover; }
}