/*
Theme Name:  Newsroom
Theme URI:   https://brunogentile.com.br
Author:      Bruno S. Gentile
Author URI:  https://brunogentile.com.br
Description: Site pessoal de Bruno S. Gentile — jornalista. Blog, portfólio e projetos editoriais. Design editorial minimalista inspirado no Apple Newsroom, com suporte a modo escuro e Liquid Glass.
Version:     1.0.0
Requires at least: 6.0
Tested up to:      6.7
Requires PHP:      8.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: newsroom
Tags:        blog, portfolio, dark-mode, custom-colors, custom-logo, featured-images, post-thumbnails
*/

/* ═══════════════════════════════════════════════════
   DESIGN TOKENS — Fase 2 aprovada
═══════════════════════════════════════════════════ */
:root {
  /* Neutros Apple */
  --white:     #FFFFFF;
  --gray-50:   #F5F5F7;
  --gray-200:  #D2D2D7;
  --gray-500:  #6E6E73;
  --gray-900:  #1D1D1F;

  /* Espresso — cor de destaque (editável via Customizer) */
  --accent:        #6B3F22;
  --accent-light:  #F5EDE4;
  --accent-dark:   #4A2A13;

  /* Tipografia */
  --font-display: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Merriweather', Georgia, serif;
  --font-ui:      -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;

  /* Escala de tipo */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 18px;
  --text-lg:   21px;
  --text-xl:   28px;
  --text-2xl:  40px;
  --text-3xl:  56px;

  /* Espaçamento (grid de 8px) */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  16px;
  --sp-4:  24px;
  --sp-6:  48px;
  --sp-10: 80px;
  --sp-15: 120px;

  /* Bordas */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-pill: 9999px;

  /* Liquid Glass — mais pronunciado */
  --glass-bg:      rgba(255, 255, 255, 0.28);
  --glass-border:  rgba(255, 255, 255, 0.88);
  --glass-shadow:  0 4px 28px rgba(0,0,0,0.10),
                   inset 0 1px 0 rgba(255,255,255,0.98),
                   inset 0 -1px 0 rgba(255,255,255,0.12);
  --glass-blur:    blur(32px) saturate(220%);

  /* Layout */
  --max-width:     1200px;
  --content-width:  720px;
  --header-h:        64px;
}

/* ═══════════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--gray-900);
  background: var(--white);
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: var(--header-h);
}

img, video { max-width: 100%; height: auto; display: block; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:hover { opacity: 0.75; }

/* ═══════════════════════════════════════════════════
   HEADER & NAVBAR — LIQUID GLASS
═══════════════════════════════════════════════════ */
#site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-4);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.nav-inner {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

/* ── Logo / nome ── */
.nav-logo {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--gray-900);
  text-decoration: none;
  letter-spacing: -0.3px;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}
.nav-logo img { height: 28px; width: auto; }
.nav-logo:hover { opacity: 0.75; }

/* ── Menu de navegação ── */
.nav-right {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  list-style: none;
}

.nav-menu a {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--gray-900);
  text-decoration: none;
  transition: opacity 0.15s;
}
.nav-menu a:hover { opacity: 0.6; }
.nav-menu .current-menu-item a {
  font-weight: 700;
  color: var(--accent);
}

/* ── Botão CTA ── */
.nav-cta {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-900);
  text-decoration: none;
  white-space: nowrap;
  background: rgba(255,255,255,0.40);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.90);
  border-radius: var(--r-md);
  padding: 8px 18px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.90);
  opacity: 1;
}

/* ── Hamburguer (mobile) ── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 4px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--gray-900);
  border-radius: 99px;
  transition: transform 0.25s, opacity 0.25s;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Painel mobile — Liquid Glass ── */
.nav-mobile-panel {
  display: none;
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  z-index: 999;
  transform: translateY(-8px);
  opacity: 0;
  transition: transform 0.22s ease, opacity 0.22s ease;
  pointer-events: none;
}
.nav-mobile-panel.is-open {
  display: block;
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.nav-mobile-panel .nav-menu {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.nav-mobile-panel .nav-menu li { width: 100%; }
.nav-mobile-panel .nav-menu a {
  font-size: 17px;
  display: block;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--gray-50);
}
.nav-mobile-panel .nav-cta {
  display: block;
  text-align: center;
  margin-top: var(--sp-3);
}

/* ═══════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════ */
#site-footer {
  background: var(--gray-900);
  padding: var(--sp-10) var(--sp-4) var(--sp-6);
  margin-top: var(--sp-10);
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.footer-name {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--gray-50);
  letter-spacing: -0.5px;
  margin-bottom: var(--sp-2);
}

.footer-tagline {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--gray-500);
  margin-bottom: var(--sp-6);
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-10);
}

.footer-social a {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--gray-200);
  text-decoration: none;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--r-md);
  padding: 9px 18px;
  transition: background 0.15s;
}
.footer-social a:hover { background: rgba(255,255,255,0.13); opacity: 1; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,0.07);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: #48484A;
}

.footer-bottom a { color: #48484A; text-decoration: none; }
.footer-bottom a:hover { color: var(--gray-500); }

/* ═══════════════════════════════════════════════════
   UTILITÁRIOS
═══════════════════════════════════════════════════ */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--sp-4);
}

.content-container {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--sp-4);
}

.section       { padding: var(--sp-10) 0; }
.section--lg   { padding: var(--sp-15) 0; }

/* Tags editoriais */
.tag {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  background: var(--gray-50);
  color: var(--gray-900);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  text-decoration: none;
}
.tag--accent {
  background: var(--accent-light);
  color: var(--accent);
  border-color: transparent;
}

/* Botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--r-md);
  padding: 12px 24px;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s, transform 0.15s;
  border: none;
}
.btn:hover { opacity: 0.85; transform: translateY(-1px); }
.btn--primary  { background: var(--gray-900); color: var(--white); }
.btn--accent   { background: var(--accent);   color: var(--white); }
.btn--outline  { background: transparent; color: var(--gray-900); border: 1.5px solid var(--gray-200); }

/* ═══════════════════════════════════════════════════
   RESPONSIVO
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .nav-right   { display: none; }
  .nav-toggle  { display: flex; }

  .footer-name    { font-size: 24px; }
  .footer-bottom  { flex-direction: column; align-items: flex-start; }

  :root {
    --text-3xl: 36px;
    --text-2xl: 28px;
    --text-xl:  22px;
    --sp-15:    64px;
    --sp-10:    48px;
  }
}

@media (max-width: 480px) {
  :root { --sp-4: 16px; }
  .footer-social { gap: var(--sp-2); }
}

/* ═══════════════════════════════════════════════════
   HOME PAGE — GRID EDITORIAL (Fase 4)
═══════════════════════════════════════════════════ */

/* ── Seção genérica da home ── */
.home-section       { padding: var(--sp-10) 0; }
.home-section + .home-section { border-top: 1px solid var(--gray-200); }
.home-empty         { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--gray-500); }

.home-section-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--sp-4);
  letter-spacing: -0.4px;
}

.home-section-cta {
  text-align: center;
  margin-top: var(--sp-4);
}

/* ── Post card — base ── */
.post-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}
.post-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.09);
  transform: translateY(-2px);
}

.post-card__image-wrap { display: block; text-decoration: none; }
.post-card__img        { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card__img-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-200) 100%);
}
.post-card__img-placeholder--dark {
  background: linear-gradient(135deg, #2C2C2E 0%, #3A3A3C 100%);
}

.post-card__body { padding: var(--sp-3); }

.post-card__cat {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--accent);
  margin-bottom: var(--sp-2);
}
.post-card__cat--light { color: rgba(245,245,247,0.85); }

.post-card__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.25;
  margin-bottom: var(--sp-2);
}
.post-card__title a { color: inherit; text-decoration: none; }
.post-card__title a:hover { color: var(--accent); }
.post-card__title--sm    { font-size: 15px; }
.post-card__title--overlay { font-size: 22px; color: var(--white); margin-bottom: 6px; }
.post-card__title--overlay-sm { font-size: 16px; }

.post-card__excerpt {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--gray-500);
  line-height: 1.7;
  margin-bottom: var(--sp-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card__date {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--gray-500);
  display: flex;
  align-items: center;
  gap: 4px;
}
.post-card__date--light { color: rgba(245,245,247,0.65); font-size: 12px; }
.post-card__clock { font-size: 11px; }

/* ── Card hero — horizontal ── */
.post-card--hero {
  display: grid;
  grid-template-columns: 3fr 2fr;
  min-height: 260px;
  margin-bottom: var(--sp-3);
}
.post-card--hero .post-card__image-wrap { overflow: hidden; }
.post-card--hero .post-card__img,
.post-card--hero .post-card__img-placeholder { height: 100%; }
.post-card--hero .post-card__body {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.post-card--hero .post-card__title { font-size: 22px; }

/* ── Grids ── */
.posts-grid {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.posts-grid--2 { grid-template-columns: repeat(2, 1fr); }
.posts-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* ── Card médio ── */
.post-card--medium .post-card__image-wrap { aspect-ratio: 16/9; overflow: hidden; }
.post-card--medium .post-card__img,
.post-card--medium .post-card__img-placeholder { height: 100%; }

/* ── Card pequeno ── */
.post-card--small .post-card__image-wrap { aspect-ratio: 4/3; overflow: hidden; }
.post-card--small .post-card__img,
.post-card--small .post-card__img-placeholder { height: 100%; }
.post-card--small .post-card__body { padding: var(--sp-2) var(--sp-3) var(--sp-3); }

/* ── Cards com imagem overlay ── */
.post-card--overlay { border: none; position: relative; }
.post-card--overlay .post-card__image-wrap {
  display: block;
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  text-decoration: none;
}
.post-card--overlay-lg .post-card__image-wrap { aspect-ratio: 16/9; }
.post-card--overlay-sm .post-card__image-wrap { aspect-ratio: 4/3; }
.post-card--overlay-lg { margin-bottom: var(--sp-3); }

.post-card__overlay-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  background: linear-gradient(to top,
    rgba(0,0,0,0.82) 0%,
    rgba(0,0,0,0.40) 60%,
    transparent 100%);
}

/* ── Seção Projetos ── */
.projects-header {
  text-align: center;
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--gray-200);
}
.projects-header__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.5px;
  margin-bottom: 6px;
}
.projects-header__desc {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--gray-500);
  max-width: 440px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ── Sobre teaser ── */
.home-about { background: var(--gray-50); }
.about-teaser {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}
.about-teaser__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--sp-3);
}
.about-teaser__text {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--gray-500);
  line-height: 1.8;
  margin-bottom: var(--sp-3);
}
.about-teaser__link {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent);
}

/* ── Responsive home ── */
@media (max-width: 900px) {
  .posts-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .post-card--hero        { grid-template-columns: 1fr; }
  .post-card--hero .post-card__image-wrap { aspect-ratio: 16/9; }
  .posts-grid--2          { grid-template-columns: 1fr; }
  .posts-grid--3          { grid-template-columns: 1fr; }
}

/* ── Indicador de link externo nos cards de projeto ── */
.post-card__ext {
  font-size: 0.75em;
  opacity: 0.75;
  display: inline-block;
  vertical-align: super;
  margin-left: 2px;
}

/* ── Smooth scroll para âncoras (ex: /#sobre) ── */
html { scroll-behavior: smooth; }

/* ═══════════════════════════════════════════════════
   REFINAMENTOS — Rodapé, Glass, Cards, Seções, Animações
═══════════════════════════════════════════════════ */

/* ── Glass mais translúcido ── */
:root {
  --glass-bg:     rgba(255,255,255,0.18);
  --glass-border: rgba(255,255,255,0.82);
  --glass-shadow: 0 4px 28px rgba(0,0,0,0.08),
                  inset 0 1px 0 rgba(255,255,255,0.96),
                  inset 0 -1px 0 rgba(255,255,255,0.10);
  --glass-blur:   blur(36px) saturate(240%);
}

/* ── Cards com sombra flutuante ── */
.post-card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.055), 0 1px 2px rgba(0,0,0,0.035);
  border: 1px solid rgba(0,0,0,0.07);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.post-card:hover {
  box-shadow: 0 12px 36px rgba(0,0,0,0.11), 0 2px 6px rgba(0,0,0,0.05);
  transform: translateY(-3px);
}

/* ── Seções sem divisórias — fluxo contínuo ── */
.home-section { padding: var(--sp-10) 0; }
.home-section + .home-section { border-top: none; }
.home-posts   { background: var(--white); }
.home-projects {
  background: linear-gradient(180deg, var(--gray-50) 0%, var(--white) 100%);
  padding-top: var(--sp-15);
  padding-bottom: var(--sp-15);
}
.home-about { background: var(--white); padding-top: var(--sp-15); }

/* ── Rodapé centralizado ── */
#site-footer { position: relative; overflow: hidden; }
.footer-inner { text-align: center; }
.footer-name  { text-align: center; }
.footer-tagline { text-align: center; }
.footer-social  { justify-content: center; }
.footer-bottom  {
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

/* ── Animações de scroll ── */
[data-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s cubic-bezier(0.4,0,0.2,1),
              transform 0.55s cubic-bezier(0.4,0,0.2,1);
}
[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-delay="100"] { transition-delay: 0.10s; }
[data-delay="150"] { transition-delay: 0.15s; }
[data-delay="200"] { transition-delay: 0.20s; }
[data-delay="250"] { transition-delay: 0.25s; }
[data-delay="300"] { transition-delay: 0.30s; }
[data-delay="350"] { transition-delay: 0.35s; }
[data-delay="400"] { transition-delay: 0.40s; }

/* ═══════════════════════════════════════════════════
   FOOTER — Modo claro com glass
═══════════════════════════════════════════════════ */
#site-footer {
  background: rgba(245,245,247,0.82);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border-top: 1px solid rgba(255,255,255,0.88);
  box-shadow: 0 -4px 28px rgba(0,0,0,0.06),
              inset 0 1px 0 rgba(255,255,255,0.96);
  margin-top: var(--sp-10);
  padding: var(--sp-10) var(--sp-4) var(--sp-6);
  color: var(--gray-900);
}

.footer-name    { color: var(--gray-900); }
.footer-tagline { color: var(--gray-500); font-style: normal; }

.footer-social a {
  color: var(--gray-900);
  background: rgba(255,255,255,0.50);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05),
              inset 0 1px 0 rgba(255,255,255,0.90);
}
.footer-social a:hover {
  background: rgba(255,255,255,0.75);
  opacity: 1;
}

.footer-bottom { color: var(--gray-500); }
.footer-bottom a { color: var(--gray-500); }
.footer-bottom a:hover { color: var(--gray-900); }

/* ═══════════════════════════════════════════════════
   CARDS — Altura uniforme nas grids
═══════════════════════════════════════════════════ */
.posts-grid { align-items: stretch; }

.post-card {
  display: flex;
  flex-direction: column;
}
.post-card--medium .post-card__body,
.post-card--small  .post-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* Empurra a data para baixo, alinhando entre cards */
.post-card--medium .post-card__date,
.post-card--small  .post-card__date {
  margin-top: auto;
  padding-top: var(--sp-2);
}

/* ═══════════════════════════════════════════════════
   SOBRE — Card editorial à esquerda
═══════════════════════════════════════════════════ */
.home-about {
  background: var(--white);
  padding: var(--sp-15) 0;
}

.about-card {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--sp-10);
  align-items: center;
  background: var(--gray-50);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 20px;
  padding: var(--sp-10);
  box-shadow: 0 2px 10px rgba(0,0,0,0.055),
              0 1px 3px rgba(0,0,0,0.03);
  overflow: hidden;
  position: relative;
}

/* Linha de acento esquerda */
.about-card::before {
  content: '';
  position: absolute;
  left: 0; top: var(--sp-10); bottom: var(--sp-10);
  width: 3px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}

.about-card__eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent);
  margin-bottom: var(--sp-3);
}

.about-card__headline {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin-bottom: var(--sp-3);
}

.about-card__text {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--gray-500);
  line-height: 1.85;
  margin-bottom: var(--sp-4);
}

.about-card__link {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.about-card__link:hover { opacity: 0.75; }

/* Área visual — placeholder para foto */
.about-card__visual {
  height: 300px;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--gray-200) 0%, var(--white) 100%);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
/* Padrão de hatching sutil */
.about-card__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -52deg,
    transparent 0px,
    transparent 14px,
    rgba(0,0,0,0.018) 14px,
    rgba(0,0,0,0.018) 15px
  );
}
/* Label "Foto" no centro */
.about-card__visual::before {
  content: 'Sua foto aqui';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  color: var(--gray-500);
  letter-spacing: 0.5px;
  z-index: 1;
}

@media (max-width: 900px) {
  .about-card { grid-template-columns: 1fr; }
  .about-card__visual { height: 200px; }
  .about-card::before { top: var(--sp-6); bottom: var(--sp-6); }
}

/* ═══════════════════════════════════════════════════
   CARDS — Correção de altura uniforme
   Garante que a imagem não encolha e a data fique sempre na base
═══════════════════════════════════════════════════ */
.posts-grid          { align-items: stretch; }
.posts-grid > *      { display: flex; flex-direction: column; } /* wp: article direto */

.post-card           { flex: 1; } /* ocupa toda a altura do item do grid */
.post-card__image-wrap { flex-shrink: 0; } /* imagem nunca encolhe */

.post-card--medium .post-card__body,
.post-card--small  .post-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.post-card--medium .post-card__date,
.post-card--small  .post-card__date {
  margin-top: auto;
  padding-top: var(--sp-2);
}

/* ═══════════════════════════════════════════════════
   SOBRE — Bloco de texto, sem foto, sem link
═══════════════════════════════════════════════════ */
.about-card {
  grid-template-columns: 1fr;  /* coluna única — mais espaço para texto */
  max-width: 780px;
}
.about-card__visual  { display: none; }
.about-card__headline { font-size: 34px; }
.about-card__text    { max-width: 600px; font-size: 18px; }
.about-card__link    { display: none; } /* sem link */

/* ═══════════════════════════════════════════════════
   LINE-CLAMP — Títulos no máximo 2 linhas
═══════════════════════════════════════════════════ */
.post-card--medium .post-card__title,
.post-card--small  .post-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════
   BACKGROUND — Off-white para ativar grain com overlay
   #F5F4F0 = branco quente, leve tom de papel
═══════════════════════════════════════════════════ */
:root { --page-bg: #F5F4F0; }
body  { background: var(--page-bg); }

/* ═══════════════════════════════════════════════════
   ANIMAÇÃO DE SCROLL — Blur Fade
═══════════════════════════════════════════════════ */
[data-animate] {
  opacity: 0;
  filter: blur(7px);
  transform: translateY(10px);
  transition:
    opacity   0.60s ease,
    filter    0.60s ease,
    transform 0.60s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-animate].is-visible {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════
   NAV — Estado ativo em Liquid Glass
   WordPress adiciona .current-menu-item automaticamente
═══════════════════════════════════════════════════ */

/* Todos os links ganham padding/border transparente por padrão
   para que o estado ativo não cause layout shift */
.nav-menu a {
  padding: 5px 12px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.nav-menu a:hover {
  background: rgba(255,255,255,0.20);
  text-decoration: none;
}

/* Estado ativo: Liquid Glass aparece ao redor do item */
.nav-menu li.current-menu-item > a,
.nav-menu li.current-menu-ancestor > a,
.nav-menu li.current-page-ancestor > a,
.nav-menu li.current-category-ancestor > a {
  background: rgba(255,255,255,0.32) !important;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-color: rgba(255,255,255,0.78) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08),
              inset 0 1px 0 rgba(255,255,255,0.90);
  font-weight: 600 !important;
  color: var(--gray-900) !important;
  text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════
   BLOG — Header, filtros, sticky, grid adaptativo
═══════════════════════════════════════════════════ */

/* Header da página */
.blog-header {
  padding: var(--sp-6) 0 var(--sp-4);
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.blog-header__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.5px;
}
.blog-header__count {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--gray-500);
}

/* Categoria (em category.php) */
.blog-header__cat {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent);
  background: var(--accent-light);
  border-radius: var(--r-pill);
  padding: 3px 12px;
  margin-left: var(--sp-2);
  vertical-align: middle;
}

/* Filtros de categoria (pills) */
.blog-cats {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}
.blog-cat-pill {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-900);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-pill);
  padding: 6px 18px;
  text-decoration: none;
  transition: all 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.blog-cat-pill:hover { background: var(--gray-50); text-decoration: none; opacity: 1; }
.blog-cat-pill.is-active {
  background: var(--gray-900);
  color: var(--white);
  border-color: var(--gray-900);
}

/* Seção de posts fixados */
.blog-sticky { margin-bottom: var(--sp-6); }
.blog-sticky-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--gray-500);
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Card fixado — horizontal, levemente diferenciado */
.post-card--sticky {
  display: grid;
  grid-template-columns: 5fr 7fr;
  min-height: 180px;
  margin-bottom: var(--sp-3);
  border: 1.5px solid var(--gray-200);
}
.post-card--sticky .post-card__image-wrap { overflow: hidden; }
.post-card--sticky .post-card__img,
.post-card--sticky .post-card__img-placeholder { height: 100%; }

.post-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--gray-500);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-pill);
  padding: 2px 8px;
  margin-bottom: var(--sp-2);
}

.post-card--sticky .post-card__body {
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.post-card--sticky .post-card__title { font-size: 20px; margin-bottom: var(--sp-2); }

/* Hero do blog (post mais recente) */
.blog-hero-wrap { margin-bottom: var(--sp-3); }

/* Grid adaptativo — sem media queries, muda sozinho */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-3);
  align-items: stretch;
  margin-top: var(--sp-3);
}
.blog-grid .post-card { height: 100%; }

/* Paginação */
.blog-pagination {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--gray-200);
}
.blog-pagination .nav-links { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.blog-pagination a,
.blog-pagination span.page-numbers {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-900);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-md);
  padding: 8px 16px;
  text-decoration: none;
  transition: all 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.blog-pagination a:hover { background: var(--gray-50); text-decoration: none; opacity: 1; }
.blog-pagination span.current {
  background: var(--gray-900);
  color: var(--white);
  border-color: var(--gray-900);
}

/* nth-child horizontal card removido — layout restaurado */

/* ═══════════════════════════════════════════════════
   NAV — Hover com animação glass + ativo mais sutil
   Hierarquia: CTA (mais forte) > Ativo > Hover (mais sutil)
═══════════════════════════════════════════════════ */

/* Hover — glass levíssimo, só indica que é clicável */
.nav-menu a:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.32);
  box-shadow: 0 1px 6px rgba(0,0,0,0.04),
              inset 0 1px 0 rgba(255,255,255,0.55);
  transition: background 0.22s ease,
              border-color 0.22s ease,
              box-shadow 0.22s ease;
}

/* Ativo — mais definido que o hover, mas bem abaixo do CTA */
.nav-menu li.current-menu-item > a,
.nav-menu li.current-menu-ancestor > a,
.nav-menu li.current-page-ancestor > a,
.nav-menu li.current-category-ancestor > a {
  background: rgba(255,255,255,0.18) !important;
  border-color: rgba(255,255,255,0.48) !important;
  box-shadow: 0 1px 8px rgba(0,0,0,0.05),
              inset 0 1px 0 rgba(255,255,255,0.68) !important;
  /* SEM backdrop-filter — o que diferencia do CTA */
  font-weight: 600 !important;
  color: var(--gray-900) !important;
}

/*
  Comparativo de opacidades para referência:
  CTA button  → bg 0.40 · border 0.72 · blur 16px · shadow forte
  Ativo       → bg 0.18 · border 0.48 · sem blur  · shadow suave
  Hover       → bg 0.14 · border 0.32 · sem blur  · shadow mínimo
*/

/* ═══════════════════════════════════════════════════
   BLOG GRID — Layout alternativo (versão B)
   Padrão: 4 squares em 2×2 → 1 horizontal → 4 squares → ...
═══════════════════════════════════════════════════ */
.blog-grid-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.blog-grid-4 .post-card { height: 100%; }

/* Card horizontal entre grupos */
.post-card--blog-h {
  display: flex;
  flex-direction: row;
  min-height: 160px;
  margin-bottom: var(--sp-3);
}
.post-card--blog-h .post-card__image-wrap {
  flex: 0 0 40%;
  overflow: hidden;
}
.post-card--blog-h .post-card__img,
.post-card--blog-h .post-card__img-placeholder {
  height: 100%;
}
.post-card--blog-h .post-card__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--sp-4);
}
.post-card--blog-h .post-card__title--sm { font-size: 18px; -webkit-line-clamp: 2; }

/* Mobile: horizontal vira coluna */
@media (max-width: 560px) {
  .post-card--blog-h { flex-direction: column; min-height: unset; }
  .post-card--blog-h .post-card__image-wrap { flex: unset; aspect-ratio: 16/9; }
}

/* ═══════════════════════════════════════════════════
   NAV ATIVO — ainda mais sutil
═══════════════════════════════════════════════════ */
.nav-menu li.current-menu-item > a,
.nav-menu li.current-menu-ancestor > a,
.nav-menu li.current-page-ancestor > a,
.nav-menu li.current-category-ancestor > a {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.34) !important;
  box-shadow: 0 1px 5px rgba(0,0,0,0.03),
              inset 0 1px 0 rgba(255,255,255,0.55) !important;
  font-weight: 600 !important;
  color: var(--gray-900) !important;
}
.nav-menu a:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 1px 4px rgba(0,0,0,0.03),
              inset 0 1px 0 rgba(255,255,255,0.40);
}

/* ═══════════════════════════════════════════════════
   POST INDIVIDUAL — single.php
═══════════════════════════════════════════════════ */

/* ── Cabeçalho do post ── */
.post-header {
  padding: var(--sp-10) 0 var(--sp-6);
}

.post-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.post-meta__cat {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent);
  text-decoration: none;
}
.post-meta__cat:hover { opacity: 0.75; }
.post-meta__sep {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--gray-200);
}
.post-meta__date,
.post-meta__read {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--gray-500);
}

/* ── Título ── */
.post-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 46px);
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.1;
  letter-spacing: -1px;
  margin-bottom: var(--sp-4);
}

/* ── Linha fina + Lead — só renderizados quando há excerpt ── */
.post-lead-rule {
  height: 1px;
  background: var(--gray-200);
  margin-bottom: var(--sp-4);
}
.post-lead {
  font-family: var(--font-body);
  font-size: 21px;
  line-height: 1.65;
  color: var(--gray-900);
  margin-bottom: var(--sp-4);
}

/* ── Share ── */
.post-share {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--gray-200);
  margin-top: var(--sp-3);
}
.post-share__label {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--gray-500);
}
.post-share__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--gray-200);
  background: var(--white);
  color: var(--gray-900);
  text-decoration: none;
  font-size: 13px;
  transition: background 0.15s, border-color 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.post-share__link:hover { background: var(--gray-50); border-color: var(--gray-500); }

/* ── Hero image ── */
.post-hero { margin-bottom: var(--sp-10); }
.post-hero__img {
  width: 100%;
  border-radius: var(--r-xl);
  display: block;
}
.post-hero__caption {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--gray-500);
  margin-top: var(--sp-2);
  line-height: 1.5;
}

/* ── Corpo do artigo ── */
.post-content {
  padding-bottom: var(--sp-10);
}

/* Localização no início do texto */
.post-location {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--gray-900);
}

/* Tipografia do corpo */
.post-content p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.85;
  color: var(--gray-900);
  margin-bottom: var(--sp-4);
}
.post-content p:first-of-type { margin-top: 0; }

.post-content h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.3px;
  margin: var(--sp-10) 0 var(--sp-3);
  line-height: 1.2;
}
.post-content h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--gray-900);
  margin: var(--sp-6) 0 var(--sp-2);
}

/* Links dentro do artigo */
.post-content a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Imagens e figuras dentro do artigo — com animação de scroll */
.post-content img,
.post-content figure,
.post-content video {
  width: 100%;
  border-radius: var(--r-lg);
  margin: var(--sp-6) 0;
  display: block;
  /* Estado inicial para animação */
  opacity: 0;
  filter: blur(8px);
  transform: translateY(14px) scale(0.99);
  transition: opacity 0.75s ease,
              filter  0.75s ease,
              transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}
.post-content img.is-visible,
.post-content figure.is-visible,
.post-content video.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}

.post-content figcaption {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--gray-500);
  margin-top: calc(var(--sp-2) * -1);
  margin-bottom: var(--sp-4);
  line-height: 1.5;
}

/* Blockquote (citação / pull quote) */
.post-content blockquote {
  border-left: 3px solid var(--accent);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
  margin: var(--sp-6) 0;
}
.post-content blockquote p {
  font-family: var(--font-body);
  font-size: 20px;
  font-style: italic;
  color: var(--gray-900);
  line-height: 1.6;
  margin: 0;
}
.post-content blockquote cite {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--gray-500);
  font-style: normal;
  display: block;
  margin-top: var(--sp-2);
}

/* Listas */
.post-content ul,
.post-content ol {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.85;
  color: var(--gray-900);
  margin: 0 0 var(--sp-4) var(--sp-4);
}
.post-content li { margin-bottom: var(--sp-2); }

/* Hero do post: animação de entrada */
.post-hero {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(10px);
  transition: opacity 0.75s ease, filter 0.75s ease, transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.post-hero.is-visible {
  opacity: 1; filter: blur(0); transform: translateY(0);
}

/* ── Tags ── */
.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--gray-200);
}

/* ── Navegação anterior/próximo ── */
.post-nav { padding: var(--sp-6) 0 var(--sp-10); }
.post-nav__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.post-nav__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-lg);
  text-decoration: none;
  transition: box-shadow 0.2s, transform 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.post-nav__item:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  transform: translateY(-2px);
  text-decoration: none;
}
.post-nav__item--next { text-align: right; }
.post-nav__dir {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gray-500);
}
.post-nav__title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-nav__back {
  text-align: center;
}
.post-nav__back-link {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .post-nav__inner { grid-template-columns: 1fr; }
  .post-nav__item--next { text-align: left; }
}

/* ── Barra de progresso de leitura ── */
.reading-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 9999;
  pointer-events: none;
}
.reading-progress__bar {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 0 99px 99px 0;
  transition: width 0.1s linear;
}

/* ═══════════════════════════════════════════════════
   SINGLE — Revisão de estilos (v2)
═══════════════════════════════════════════════════ */

/* Meta: categoria na linha 1, data+leitura na linha 2 */
.post-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: var(--sp-4);
}
.post-meta__cat {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent);
  text-decoration: none;
}
.post-meta__cat:hover { opacity: 0.75; }
.post-meta__row2 {
  display: flex;
  align-items: center;
  gap: 6px;
}
.post-meta__date,
.post-meta__read { font-family: var(--font-ui); font-size: 12px; color: var(--gray-500); }
.post-meta__sep  { font-family: var(--font-ui); font-size: 11px; color: var(--gray-200); }

/* Lead — bloco simples, sem linhas separadoras, menor que o corpo */
.post-lead {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--gray-500);
  margin-top: var(--sp-2);
  margin-bottom: var(--sp-4);
}

/* Share top — compacto, só ícones */
.post-share--top {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--gray-200);
  margin-top: var(--sp-3);
  border-bottom: none;
  padding-bottom: 0;
}

/* Share section (parte de baixo) */
.post-share-section {
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--gray-200);
  margin-top: var(--sp-6);
}
.post-section-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--sp-3);
  letter-spacing: -0.2px;
}
.post-share {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.post-share__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--gray-200);
  background: var(--white);
  color: var(--gray-900);
  text-decoration: none;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.post-share__link:hover { background: var(--gray-50); border-color: var(--gray-500); transform: translateY(-1px); }
.post-share__link[data-ok] { background: var(--gray-50); color: var(--accent); }

/* Leia mais — lista de cards Liquid Glass */
.post-related {
  padding: var(--sp-6) 0 var(--sp-10);
  border-top: 1px solid var(--gray-200);
  margin-top: 0;
}

.related-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.related-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.78);
  box-shadow: 0 2px 16px rgba(0,0,0,0.05),
              inset 0 1px 0 rgba(255,255,255,0.92);
  border-radius: var(--r-lg);
  text-decoration: none;
  transition: box-shadow 0.2s, transform 0.2s;
}
.related-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.09),
              inset 0 1px 0 rgba(255,255,255,0.95);
  transform: translateY(-2px);
  text-decoration: none;
}
.related-card__thumb {
  width: 72px; height: 72px;
  border-radius: var(--r-md);
  overflow: hidden;
  flex-shrink: 0;
}
.related-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.related-card__img-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--gray-200), var(--gray-50));
}
.related-card__body { flex: 1; }
.related-card__cat {
  display: block;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--accent);
  margin-bottom: 4px;
}
.related-card__title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.3;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.related-card__date {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--gray-500);
}

/* ═══════════════════════════════════════════════════
   SINGLE — Ajustes finais (v3)
═══════════════════════════════════════════════════ */

/* Imagens: animação mais lenta e perceptível */
.post-content img,
.post-content figure,
.post-content video {
  transition: opacity  1.4s ease,
              filter   1.4s ease,
              transform 1.4s cubic-bezier(0.4, 0, 0.2, 1);
  /* blur inicial maior para o efeito ser mais visível */
  filter: blur(12px);
  transform: translateY(18px) scale(0.985);
}
.post-content img.is-visible,
.post-content figure.is-visible,
.post-content video.is-visible {
  filter: blur(0);
  transform: translateY(0) scale(1);
}

/* Hero: mesma duração lenta */
.post-hero {
  transition: opacity 1.4s ease,
              filter  1.4s ease,
              transform 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Compartilhe: sem borda acima, só abaixo (dividindo do Leia mais) */
.post-share-section {
  border-top: none !important;
  padding-top: var(--sp-4);
}
.post-related {
  border-top: 1px solid var(--gray-200);
  padding-top: var(--sp-6);
}

/* Leia mais: Liquid Glass mais pronunciado */
.related-card {
  background: rgba(255,255,255,0.28);
  backdrop-filter: blur(28px) saturate(210%);
  -webkit-backdrop-filter: blur(28px) saturate(210%);
  border: 1px solid rgba(255,255,255,0.86);
  box-shadow: 0 4px 22px rgba(0,0,0,0.08),
              inset 0 1.5px 0 rgba(255,255,255,0.96),
              inset 0 -1px 0 rgba(255,255,255,0.12);
}
.related-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.11),
              inset 0 1.5px 0 rgba(255,255,255,0.98),
              inset 0 -1px 0 rgba(255,255,255,0.14);
  transform: translateY(-3px);
}

/* Animação de imagens: 1.4s → 1.0s */
.post-content img,
.post-content figure,
.post-content video {
  transition: opacity  1.0s ease,
              filter   1.0s ease,
              transform 1.0s cubic-bezier(0.4, 0, 0.2, 1);
}
.post-hero {
  transition: opacity 1.0s ease,
              filter  1.0s ease,
              transform 1.0s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Share do topo: sem borda separadora */
.post-share--top {
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: var(--sp-3);
}

/* ═══════════════════════════════════════════════════
   PÁGINA 404
═══════════════════════════════════════════════════ */
.error-404-main {
  min-height: calc(100vh - var(--header-h) - 280px);
  display: flex;
  align-items: center;
}

.error-404-container {
  width: 100%;
  padding-top: var(--sp-15);
  padding-bottom: var(--sp-15);
}

.error-404-inner {
  max-width: 560px;
}

.error-404-code {
  display: block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent);
  margin-bottom: var(--sp-3);
}

.error-404-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.15;
  letter-spacing: -0.8px;
  margin-bottom: var(--sp-4);
}

.error-404-body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.8;
  color: var(--gray-500);
  margin-bottom: var(--sp-6);
  max-width: 420px;
}

.error-404-actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════
   PÁGINA 404 — v2 (centralizado, sem footer)
═══════════════════════════════════════════════════ */
.error-404-main {
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-10) var(--sp-4);
}

.error-404-inner {
  text-align: center;
  max-width: 520px;
  width: 100%;
}

/* "Erro" — label pequeno acima do número */
.error-404-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--accent);
  margin-bottom: var(--sp-2);
}

/* "404" — número grande como elemento gráfico */
.error-404-number {
  font-family: var(--font-display);
  font-size: clamp(80px, 16vw, 128px);
  font-weight: 700;
  color: var(--gray-200);
  line-height: 1;
  letter-spacing: -4px;
  margin-bottom: var(--sp-6);
  user-select: none;
}

.error-404-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin-bottom: var(--sp-3);
}

.error-404-body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.8;
  color: var(--gray-500);
  margin-bottom: var(--sp-6);
}

.error-404-actions {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* 404 — número em Espresso */
.error-404-number { color: var(--accent); }

/* ═══════════════════════════════════════════════════
   RESPONSIVIDADE — MOBILE (até 768px)
   Fase 5.1
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Espaçamento geral ── */
  .container { padding-left: 16px; padding-right: 16px; }
  .home-section { padding: 36px 0; }

  /* ── Tipografia de seção ── */
  .home-section-title { font-size: 20px; }
  .projects-header    { text-align: center; }
  .home-section-cta   { text-align: center; }

  /* ── Hero da home e do blog: grid → coluna ── */
  .post-card--hero {
    grid-template-columns: 1fr !important;
    flex-direction: column;
  }
  .post-card--hero .post-card__image-wrap {
    aspect-ratio: 16/9;
    height: auto;
  }
  .post-card--hero .post-card__body {
    padding: 20px;
    gap: var(--sp-2);
  }
  .post-card--hero .post-card__title { font-size: 19px; }

  /* ── Card fixado (sticky): horizontal → vertical ── */
  .post-card--sticky {
    grid-template-columns: 1fr;
  }
  .post-card--sticky .post-card__image-wrap {
    aspect-ratio: 16/9;
    height: auto;
  }
  .post-card--sticky .post-card__body { padding: var(--sp-3); }

  /* ── Blog grid alternativo 2×2 → coluna única ── */
  .blog-grid-4 { grid-template-columns: 1fr; }

  /* ── Card horizontal inter-grupo → vertical ── */
  .post-card--blog-h {
    flex-direction: column !important;
    min-height: unset;
  }
  .post-card--blog-h .post-card__image-wrap {
    flex: unset;
    aspect-ratio: 16/9;
  }

  /* ── Filtros de categoria: pill menor ── */
  .blog-cats { gap: 6px; }
  .blog-cat-pill { padding: 5px 14px; font-size: 12px; }

  /* ── Seção Sobre ── */
  .about-card { padding: 30px 22px; }
  .about-card__headline { font-size: 24px; }
  .about-card__text     { font-size: 16px; max-width: 100%; }

  /* ── Post individual: corpo ── */
  .post-content p,
  .post-content ul,
  .post-content ol  { font-size: 17px; }
  .post-lead        { font-size: 14px; }
  .post-content h2  { font-size: 21px; margin: 32px 0 12px; }
  .post-content blockquote { margin: 20px 0; }
  .post-content blockquote p { font-size: 18px; }

  /* ── Post: share wraps ── */
  .post-share { flex-wrap: wrap; gap: 8px; }

  /* ── Leia mais: thumb menor ── */
  .related-card__thumb { width: 60px; height: 60px; }

  /* ── Post nav: grade → coluna ── */
  .post-nav__inner         { grid-template-columns: 1fr; }
  .post-nav__item--next    { text-align: left; }

  /* ── 404: botões empilhados ── */
  .error-404-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .error-404-actions a,
  .error-404-actions .btn {
    text-align: center;
    justify-content: center;
    width: 100%;
  }
  .error-404-body { font-size: 16px; }

  /* ── Footer: ajuste de espaçamento ── */
  .footer-social { flex-wrap: wrap; gap: 8px; }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVIDADE — TABLET (769px – 1024px)
   Fase 5.2
═══════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {

  /* ── Grid de 3 → 2 colunas ── */
  .posts-grid--3   { grid-template-columns: repeat(2, 1fr); }
  .blog-grid       { grid-template-columns: repeat(2, 1fr); }
  .blog-grid-4     { grid-template-columns: repeat(2, 1fr); }

  /* ── Hero com proporções ajustadas ── */
  .post-card--hero { grid-template-columns: 1fr 1fr; }

  /* ── Seção Sobre ── */
  .about-card      { padding: 36px 36px; }

  /* ── Post nav: mantém grade de 2 ── */
  .post-nav__inner { grid-template-columns: 1fr 1fr; }

  /* ── Espaçamentos levemente reduzidos ── */
  :root {
    --sp-15: 72px;
    --sp-10: 52px;
  }
}

/* ═══════════════════════════════════════════════════
   LIQUID GLASS — Intensidade aumentada
═══════════════════════════════════════════════════ */
#site-header {
  background: rgba(255,255,255,0.24) !important;
  backdrop-filter: blur(40px) saturate(260%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(260%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.90) !important;
  box-shadow: 0 4px 32px rgba(0,0,0,0.09),
              inset 0 1.5px 0 rgba(255,255,255,0.98) !important;
}

/* ═══════════════════════════════════════════════════
   NAV MOBILE — Label da página atual
   Aparece entre o logo e o hamburguer em mobile.
   Oculto no desktop. Nunca aparece na Home.
═══════════════════════════════════════════════════ */
.nav-mobile-label {
  display: none; /* oculto no desktop */
}

@media (max-width: 768px) {
  .nav-mobile-label {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-900);
    /* Liquid Glass sutil — igual ao nav ativo do desktop */
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.48);
    box-shadow: 0 1px 8px rgba(0,0,0,0.05),
                inset 0 1px 0 rgba(255,255,255,0.68);
    border-radius: 8px;
    padding: 5px 12px;
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ═══════════════════════════════════════════════════
   CORREÇÕES v3 — Bugs visuais e melhorias
═══════════════════════════════════════════════════ */

/* ── Logo: tamanho máximo quando imagem carregada ── */
.nav-logo img,
.custom-logo { max-height: 36px !important; width: auto !important; }

/* ── Barra bege abaixo da nav: remove borda inferior visível ── */
#site-header {
  border-bottom: 1px solid rgba(0,0,0,0.04) !important;
}

/* ── Admin bar: evita gap entre barra WP e a nav sticky ── */
.admin-bar #site-header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar #site-header { top: 46px; }
}

/* ── Post individual: meta ALINHADO À ESQUERDA ── */
.post-header,
.post-meta,
.post-meta__row2,
.post-title,
.post-lead  { text-align: left !important; }

/* ── About card: bloco único, sem grid, largura total ── */
.about-card {
  display: block !important;
  grid-template-columns: unset !important;
  gap: 0 !important;
  max-width: 100% !important;    /* ocupa a largura toda do container */
  padding: var(--sp-8) var(--sp-8) var(--sp-8) calc(var(--sp-8) + 16px);
}
/* Linha de acento: respeita o novo padding */
.about-card::before {
  top: var(--sp-8);
  bottom: var(--sp-8);
}
.about-card__eyebrow  { margin-bottom: var(--sp-2); }
.about-card__headline { margin-bottom: var(--sp-3); }
.about-card__text     { margin-bottom: 0; max-width: 680px; }
.about-card__btn      { margin-top: var(--sp-4); display: inline-block; }
.about-card__visual   { display: none; }
.about-card__link     { display: none; } /* link inline substituído pelo btn */

/* ── Rodapé: texto extra ── */
.footer-extra {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--gray-500);
  line-height: 1.65;
  margin-bottom: var(--sp-3);
}

/* ═══════════════════════════════════════════════════
   CORREÇÕES v4
═══════════════════════════════════════════════════ */

/* ── About card: proporcional à largura, sem gap ── */
.about-card {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: unset !important;
  gap: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
  padding: 40px 48px 40px 52px;
}
.about-card::before { top: 32px; bottom: 32px; }
.about-card__eyebrow  { margin-bottom: 10px; }
.about-card__headline { margin-bottom: 14px; }
.about-card__text     { margin-bottom: 0; font-size: 17px; }
.about-card__btn      { margin-top: 20px; display: inline-flex; }

/* ── Nav: Liquid Glass correto nos links + hover ── */
/* Garante que opacity não interfira com o glass */
.nav-menu a {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background 0.22s, border-color 0.22s, box-shadow 0.22s;
  opacity: 1 !important;       /* cancela o opacity:0.6 original */
}
.nav-menu a:hover {
  opacity: 1 !important;
  background: rgba(255,255,255,0.18) !important;
  border-color: rgba(255,255,255,0.42) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07),
              inset 0 1px 0 rgba(255,255,255,0.80) !important;
}
/* Item ativo: Liquid Glass visível mas abaixo do CTA */
.nav-menu li.current-menu-item > a,
.nav-menu li.current-menu-ancestor > a,
.nav-menu li.current-page-ancestor > a,
.nav-menu li.current-category-ancestor > a {
  opacity: 1 !important;
  background: rgba(255,255,255,0.22) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  border-color: rgba(255,255,255,0.58) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07),
              inset 0 1px 0 rgba(255,255,255,0.88) !important;
  font-weight: 600 !important;
  color: var(--gray-900) !important;
}
/* CTA mantém estilo mais proeminente */
.nav-cta { opacity: 1 !important; }
.nav-cta:hover { opacity: 1 !important; }

/* ── Projetos: ícone externo CSS (sem emoji) ── */
.post-card__ext {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  vertical-align: middle;
  position: relative;
  opacity: 0.7;
}
.post-card__ext::before,
.post-card__ext::after {
  content: '';
  position: absolute;
  background: currentColor;
}
/* Seta: corpo diagonal */
.post-card__ext::before {
  width: 8px; height: 1.5px;
  top: 4px; right: 0;
  transform: rotate(-45deg);
  transform-origin: right center;
}
/* Seta: ponta (L rotacionado) */
.post-card__ext::after {
  width: 5px; height: 1.5px;
  top: 1px; right: 0;
  box-shadow: 1.5px 0 0 currentColor;
}

/* ── Footer: espaçamento menor ── */
.footer-inner {
  padding: 40px var(--sp-4) 24px;
  gap: var(--sp-3);
}
.footer-name   { margin-bottom: 4px; }
.footer-tagline { margin-bottom: 16px; }
.footer-social  { margin-bottom: 16px; }
.footer-extra   {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--gray-500);
  margin-bottom: 16px;
  line-height: 1.6;
}
.footer-bottom { margin-top: 12px; }

/* ── Projetos: tipo/categoria no padrão do site ── */
.post-card__cat--light {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(245,245,247,0.85);
  margin-bottom: 6px;
  display: block;
}

/* ═══════════════════════════════════════════════════
   CORREÇÕES v5
═══════════════════════════════════════════════════ */

/* ── Post: meta e título ALINHADOS À ESQUERDA ── */
/* Cancela qualquer text-align:center herdado */
.post-header *,
.post-meta,
.post-meta__cat,
.post-meta__row2,
.post-meta__date,
.post-meta__read,
.post-title,
.post-lead,
.post-share--top { text-align: left !important; }

/* ── About card: texto alinhado à esquerda ── */
.about-card,
.about-card__eyebrow,
.about-card__headline,
.about-card__text,
.about-card .about-card__text p,
.about-card .btn { text-align: left !important; align-self: flex-start; }

/* ── Títulos de seção maiores ── */
.home-section-title         { font-size: 36px !important; letter-spacing: -0.6px; }
.projects-header__title     { font-size: 38px !important; letter-spacing: -0.8px; }
.about-card__headline       { font-size: 34px !important; letter-spacing: -0.5px; }

/* ── Faixa bege entre seções: remove espaço solto ── */
.home-about {
  padding-bottom: 0 !important;
  background: var(--white) !important;
}
.home-about .container { padding-bottom: 0; }
/* Garante que o footer encosta direto */
#site-footer { margin-top: 0; }

/* ── Botão "Ver projeto" em Liquid Glass nos cards ── */
.post-card__proj-btn {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.90);
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: 6px;
  padding: 5px 13px;
  letter-spacing: 0.1px;
  transition: background 0.2s, border-color 0.2s;
}
.post-card--overlay-lg:hover .post-card__proj-btn,
.post-card--overlay-sm:hover .post-card__proj-btn {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.55);
}

/* ── Esconde o ícone CSS antigo ── */
.post-card__ext { display: none !important; }

/* ═══════════════════════════════════════════════════
   CORREÇÕES v6
═══════════════════════════════════════════════════ */

/* ── Post meta: ROOT CAUSE fix
   flex-direction:column + align-items:center = itens centralizados horizontalmente.
   align-items:flex-start deixa tudo à esquerda. ── */
.post-meta {
  align-items: flex-start !important;
}
.post-meta__cat,
.post-meta__row2 { text-align: left !important; }

/* ── Sobre mim → Footer: espaço fluido de volta ── */
.home-about {
  padding-bottom: var(--sp-8) !important;  /* 32px — respira, mas não separa demais */
}

/* ── Projetos: padding menor, sem bloco enorme acima ── */
.home-projects {
  padding-top: var(--sp-8)   !important;   /* era sp-15 = 120px, agora 32px */
  padding-bottom: var(--sp-10) !important;
}
/* Título Projetos: mesmo tamanho de Últimas publicações */
.projects-header { text-align: left; border-bottom: none; }
.projects-header__title { font-size: 36px !important; letter-spacing: -0.6px; }

/* ═══════════════════════════════════════════════════
   CORREÇÕES v7
═══════════════════════════════════════════════════ */

/* ── Nav mobile: label + hamburguer agrupados à direita ── */
.nav-mobile-end {
  display: none;               /* hidden on desktop */
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .nav-mobile-end  { display: flex; }
  /* nav-toggle agora fica dentro de nav-mobile-end */
  .nav-toggle      { position: static; margin: 0; }
  /* oculta o toggle standalone se ainda houver fora do end */
  .nav-inner > .nav-toggle { display: none; }
}

/* ── Nav sticky: z-index alto, sem conteúdo acima ── */
#site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
}
.admin-bar #site-header { top: 32px !important; }
@media screen and (max-width: 782px) {
  .admin-bar #site-header { top: 46px !important; }
}

/* ── Separador • mais visível ── */
.post-meta__sep {
  color: var(--gray-500) !important;
  font-size: 10px !important;
  line-height: 1;
}

/* ── About: espaçamento equilibrado em relação a projetos e footer ── */
.home-about {
  padding-top: var(--sp-6) !important;   /* 24px acima do card */
  padding-bottom: var(--sp-6) !important; /* 24px abaixo do card */
}

/* ── Footer: menor ── */
#site-footer {
  padding: var(--sp-5) var(--sp-4) var(--sp-4) !important;
}
.footer-name    { font-size: 20px !important; margin-bottom: 2px; }
.footer-tagline { font-size: 13px !important; margin-bottom: 14px; }
.footer-social  { margin-bottom: 14px !important; }
.footer-bottom  { margin-top: 10px !important; font-size: 12px !important; }

/* ═══════════════════════════════════════════════════
   CORREÇÕES v8
═══════════════════════════════════════════════════ */

/* ── Nav sticky: sem !important conflitante ── */
#site-header {
  position: sticky;
  top: 0;
  z-index: 9999;
}
.admin-bar #site-header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar #site-header { top: 46px; }
}

/* ── Nav mobile: label + hamburguer colados à direita ── */
.nav-mobile-end {
  display: none;
  align-items: center;
  gap: 8px;
}
@media (max-width: 768px) {
  .nav-mobile-end { display: flex; }
  /* Esconde o nav-toggle standalone (está agora dentro de nav-mobile-end) */
  .nav-inner > .nav-toggle { display: none !important; }
}

/* ── Nav mobile panel: cresce com o conteúdo ── */
.nav-mobile-panel {
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  height: auto !important;
}
.nav-mobile-panel .nav-menu a {
  padding: var(--sp-4) 0;          /* mais espaço para cada item */
  font-size: 16px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.nav-mobile-panel .nav-cta {
  padding: 12px 18px;
  margin-top: var(--sp-4);
  border-radius: 10px;
  font-size: 15px;
}

/* ── Post: share e leia mais com margem horizontal ──
   Problema: padding shorthand overrides content-container lateral.
   Solução: usar apenas padding-top/bottom.
── */
.post-share-section {
  padding-top: var(--sp-4) !important;
  padding-bottom: var(--sp-5) !important;
  padding-left: 0;
  padding-right: 0;
}
.post-related {
  padding-top: var(--sp-5) !important;
  padding-bottom: var(--sp-8) !important;
  padding-left: 0;
  padding-right: 0;
}

/* ── Projetos header: centralizado ── */
.projects-header {
  text-align: center !important;
  border-bottom: none !important;
}
.projects-header__title { text-align: center !important; }
.projects-header__desc  { text-align: center !important; }

/* ── Sobre mim: espaçamento equilibrado entre projetos e footer ── */
.home-about {
  padding-top:    var(--sp-10) !important;
  padding-bottom: var(--sp-10) !important;
}

/* ── About card mobile: texto não extravasa ── */
@media (max-width: 768px) {
  .about-card {
    padding: 24px 20px 24px 26px !important;
    overflow: hidden;
  }
  .about-card__text,
  .about-card__headline {
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100% !important;
  }
  .about-card__headline { font-size: 24px !important; }
  .about-card__text     { font-size: 15px !important; }
}

/* ═══════════════════════════════════════════════════
   CORREÇÕES v9
═══════════════════════════════════════════════════ */

/* ── Painel mobile: corrige posição quando admin bar presente ── */
.admin-bar .nav-mobile-panel {
  top: calc(var(--header-h) + 32px) !important;
}
@media screen and (max-width: 782px) {
  .admin-bar .nav-mobile-panel {
    top: calc(var(--header-h) + 46px) !important;
  }
}

/* ── Projetos: transição suave entre seções ── */
.home-projects {
  background: linear-gradient(
    180deg,
    transparent 0%,        /* começa transparente = mesma cor da seção acima */
    rgba(245,244,240,0.55) 30%,
    rgba(245,244,240,0.55) 70%,
    transparent 100%
  ) !important;
  position: relative;
}
/* Remove borda/linha entre seções */
.home-section + .home-projects,
.home-posts + .home-projects   { border-top: none !important; }

/* ── Texto longo: nunca extravasa ── */
.post-content,
.post-content p,
.post-content h1, .post-content h2,
.post-content h3, .post-content h4,
.post-body,
.about-card__text,
.post-card__excerpt  {
  overflow-wrap: break-word !important;
  word-break:    break-word !important;
  max-width: 100%;
}

/* ── Single post: espaçamento final antes do footer mínimo ── */
.post-share-section {
  padding-bottom: var(--sp-10) !important;
}

/* ═══════════════════════════════════════════════════
   CORREÇÕES FINAIS v10 — Clean-up definitivo
═══════════════════════════════════════════════════ */

/* ── Sticky header: sem conflito com qualquer regra anterior ── */
#site-header {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
}
/* Admin bar desloca apenas quando presente (WordPress padrão) */
.admin-bar #site-header { top: 32px !important; }
.admin-bar .nav-mobile-panel { top: calc(var(--header-h) + 32px) !important; }
@media screen and (max-width: 782px) {
  .admin-bar #site-header      { top: 46px !important; }
  .admin-bar .nav-mobile-panel { top: calc(var(--header-h) + 46px) !important; }
}

/* ── Single post: remove TODAS as linhas divisórias entre seções ── */
.post-share-section,
.post-related,
.post-section-title,
.post-share          { border: none !important; border-top: none !important; }

/* ── Single post: espaçamento correto no final ── */
.post-related {
  padding-top:    var(--sp-5) !important;
  padding-bottom: var(--sp-16) !important;   /* respira antes do fim da página */
}
.post-share-section {
  padding-top:    var(--sp-5) !important;
  padding-bottom: var(--sp-4) !important;
}

/* ── Tag page header ── */
.blog-header__tag-label {
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--accent);
  display: block;
  margin-bottom: 4px;
}

/* ── Home: "Ver todas as publicações" button ── */
.home-section-cta {
  text-align: center;
  padding: var(--sp-6) 0 var(--sp-2);
}
.home-section-cta .btn {
  font-size: 14px;
  padding: 10px 24px;
}

/* ═══════════════════════════════════════════════════
   TRANSIÇÃO FLUIDA: Publicações → Projetos
   Técnica mask-image: o fundo da seção
   dissolve-se nos limites superior e inferior,
   sem linha dura.
═══════════════════════════════════════════════════ */
.home-projects {
  background: none !important;  /* remove todos os bg anteriores */
  position: relative;
}
.home-projects::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(238, 238, 244, 0.52);

  /* Fade in pelo topo, sustenta no centro, fade out pelo fundo */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent       0px,
    rgba(0,0,0,0.6)  60px,
    rgba(0,0,0,1)    140px,
    rgba(0,0,0,1)    calc(100% - 100px),
    transparent       100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent       0px,
    rgba(0,0,0,0.6)  60px,
    rgba(0,0,0,1)    140px,
    rgba(0,0,0,1)    calc(100% - 100px),
    transparent       100%
  );
}

/* ═══════════════════════════════════════════════════
   CORREÇÕES v11 — Leitura, Glass, Blog
═══════════════════════════════════════════════════ */

/* ── Nav: mais translúcida (Liquid Glass verdadeiro) ── */
:root {
  --glass-bg:   rgba(255, 255, 255, 0.16);
  --glass-blur: blur(28px) saturate(180%);
}
#site-header {
  background: rgba(245, 244, 240, 0.38) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.55) !important;
  box-shadow: 0 1px 24px rgba(0,0,0,0.06),
              inset 0 1px 0 rgba(255,255,255,0.80) !important;
}

/* ── Post: container de leitura com borda (padrão Apple Newsroom) ── */
.post-body {
  padding: var(--sp-6) 0 0 !important;
}
.post-body .content-container {
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 18px;
  padding: 40px 52px 48px !important;
  margin-bottom: var(--sp-6);
}
/* Tipografia dentro do container ── */
.post-content p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.82;
  color: var(--gray-800);
  margin-bottom: 1.5em;
}
.post-content p:last-child { margin-bottom: 0; }
.post-content h2 { font-size: 26px; font-weight: 700; margin: 2em 0 0.6em; letter-spacing: -.4px; }
.post-content h3 { font-size: 21px; font-weight: 700; margin: 1.8em 0 0.5em; }
.post-content ul, .post-content ol {
  margin-left: 1.5em;
  margin-bottom: 1.5em;
}
.post-content li { margin-bottom: .5em; line-height: 1.75; font-size: 17px; color: var(--gray-800); }
.post-content blockquote {
  border-left: 3px solid var(--accent);
  margin: 2em 0;
  padding: 8px 0 8px 20px;
  color: var(--gray-600);
  font-style: italic;
  font-size: 18px;
}
.post-content img {
  border-radius: 12px;
  width: 100%;
  margin: 1.5em 0;
}
.post-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ── Mobile: container sem border-radius lateral ── */
@media (max-width: 768px) {
  .post-body .content-container {
    border-radius: 14px;
    padding: 28px 24px 36px !important;
  }
  .post-content p { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════
   CORREÇÕES v12 — Texto single + strip nav
═══════════════════════════════════════════════════ */

/* ── Strip acima da nav: remove qualquer margin do html/body ── */
html, html.admin-bar {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body { margin-top: 0 !important; }

/* ── Post: corpo do artigo centralizado e contido ──
   Usa #article-body (ID = máxima especificidade) para
   garantir que sobrescreve qualquer estilo do Gutenberg.
── */
#article-body {
  max-width: 720px !important;
  width: 100% !important;
  margin-left:  auto !important;
  margin-right: auto !important;
  padding: 40px 48px 52px !important;
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 18px;
  box-sizing: border-box;
}

/* Gutenberg blocks não podem extravazar o container */
#article-body > *,
#article-body .wp-block-group,
#article-body .wp-block-columns,
#article-body .alignwide,
#article-body .alignfull {
  max-width: 100% !important;
  margin-left:  0 !important;
  margin-right: 0 !important;
}

/* Mobile: margens menores */
@media (max-width: 768px) {
  #article-body {
    padding: 28px 22px 40px !important;
    border-radius: 14px;
  }
}

/* ═══════════════════════════════════════════════════
   CORREÇÕES v13 — Artigo transparente + Liquid Glass
═══════════════════════════════════════════════════ */

/* ── Artigo: card TRANSPARENTE — só mantém max-width ── */
#article-body {
  background:    transparent !important;
  border:        none !important;
  box-shadow:    none !important;
  border-radius: 0 !important;
  padding-left:  0 !important;
  padding-right: 0 !important;
}

/* ── Compartilhe: espaçamento menor ── */
.post-share-section {
  padding-top:    12px !important;
  padding-bottom: 8px  !important;
}
.post-section-title { margin-bottom: 10px !important; }

/* ── Leia mais: respira antes do footer ── */
.post-related { padding-bottom: 64px !important; }

/* ════════════════════════════════════════════════════
   LIQUID GLASS — todos os botões do tema
   Categorias:
   A) Botões em fundo claro (página off-white)
   B) Botões circulares de share
   C) Botões sobre cards escuros (projetos)
   D) Paginação
════════════════════════════════════════════════════ */

/* ── A) Botões padrão (fundo claro) ── */
.btn,
.btn--outline,
.nav-cta,
.about-card__btn,
.home-section-cta a,
.blog-header__back {
  background:           rgba(255,255,255,0.50) !important;
  backdrop-filter:      blur(14px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  border:               1px solid rgba(255,255,255,0.78) !important;
  box-shadow:           0 2px 10px rgba(0,0,0,0.07),
                        inset 0 1px 0 rgba(255,255,255,0.90) !important;
  color:                var(--gray-900) !important;
  border-radius:        10px !important;
  transition:           background .2s, border-color .2s, box-shadow .2s !important;
}
.btn:hover,
.btn--outline:hover,
.about-card__btn:hover,
.home-section-cta a:hover {
  background:    rgba(255,255,255,0.72) !important;
  border-color:  rgba(255,255,255,0.95) !important;
  box-shadow:    0 4px 16px rgba(0,0,0,0.09),
                 inset 0 1px 0 rgba(255,255,255,1) !important;
}

/* CTA da nav: mantém cor Espresso, só adiciona glass layer */
.nav-cta {
  background:    rgba(107,63,34,0.82) !important;
  border-color:  rgba(139,87,50,0.55) !important;
  color:         #fff !important;
  box-shadow:    0 2px 10px rgba(107,63,34,0.25),
                 inset 0 1px 0 rgba(255,255,255,0.22) !important;
}
.nav-cta:hover {
  background:    rgba(107,63,34,0.95) !important;
  box-shadow:    0 4px 16px rgba(107,63,34,0.35),
                 inset 0 1px 0 rgba(255,255,255,0.28) !important;
}

/* ── B) Botões circulares de share ── */
.post-share__link {
  background:           rgba(255,255,255,0.52) !important;
  backdrop-filter:      blur(12px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
  border:               1px solid rgba(255,255,255,0.80) !important;
  box-shadow:           0 2px 8px rgba(0,0,0,0.06),
                        inset 0 1px 0 rgba(255,255,255,0.90) !important;
  color:                var(--gray-800) !important;
  transition:           background .2s, box-shadow .2s !important;
}
.post-share__link:hover {
  background:   rgba(255,255,255,0.80) !important;
  box-shadow:   0 4px 14px rgba(0,0,0,0.09),
                inset 0 1px 0 rgba(255,255,255,1) !important;
}
/* Estado: copiado ✓ */
.post-share__link[data-ok] {
  background:   rgba(107,63,34,0.12) !important;
  border-color: rgba(107,63,34,0.35) !important;
}

/* ── C) Botões sobre cards escuros (projetos) ── */
.post-card__proj-btn {
  background:           rgba(255,255,255,0.12) !important;
  backdrop-filter:      blur(10px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(160%) !important;
  border:               1px solid rgba(255,255,255,0.32) !important;
  box-shadow:           0 1px 6px rgba(0,0,0,0.10),
                        inset 0 1px 0 rgba(255,255,255,0.18) !important;
  color:                rgba(255,255,255,0.88) !important;
}
.post-card:hover .post-card__proj-btn,
.post-card--overlay:hover .post-card__proj-btn {
  background:    rgba(255,255,255,0.22) !important;
  border-color:  rgba(255,255,255,0.55) !important;
}

/* ── D) Paginação ── */
.page-numbers,
.blog-pagination a,
.blog-pagination span,
.blog-pagination .page-numbers {
  background:           rgba(255,255,255,0.50) !important;
  backdrop-filter:      blur(12px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
  border:               1px solid rgba(255,255,255,0.75) !important;
  box-shadow:           0 2px 8px rgba(0,0,0,0.06),
                        inset 0 1px 0 rgba(255,255,255,0.88) !important;
  color:                var(--gray-900) !important;
  border-radius:        8px !important;
  transition:           background .2s !important;
}
.page-numbers:hover,
.blog-pagination a:hover {
  background:    rgba(255,255,255,0.78) !important;
}
.page-numbers.current,
.blog-pagination .current {
  background:    rgba(107,63,34,0.88) !important;
  border-color:  rgba(107,63,34,0.50) !important;
  color:         #fff !important;
  box-shadow:    0 2px 10px rgba(107,63,34,0.25),
                 inset 0 1px 0 rgba(255,255,255,0.22) !important;
}

/* ── Blog: pills de filtro de categoria ── */
.cat-filter,
.blog-filters .cat-filter {
  background:           rgba(255,255,255,0.45) !important;
  backdrop-filter:      blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border:               1px solid rgba(255,255,255,0.72) !important;
  box-shadow:           0 1px 6px rgba(0,0,0,0.05),
                        inset 0 1px 0 rgba(255,255,255,0.85) !important;
  border-radius:        20px !important;
  color:                var(--gray-700) !important;
}
.cat-filter.active,
.cat-filter:hover {
  background:    rgba(255,255,255,0.78) !important;
  color:         var(--gray-900) !important;
}

/* ── v14: spacing fine-tune no single.php ── */

/* "Compartilhe este texto": título mais colado aos botões */
.post-share-section .post-section-title {
  margin-bottom: 6px !important;
}

/* "Leia mais": mais espaço entre o título e os cards (~0.5cm = 19px) */
.post-related .post-section-title,
.post-related h2 {
  margin-bottom: 19px !important;
}

/* ── v15: reduz gap entre título "Compartilhe" e botões ── */
.post-share-section .post-section-title {
  margin-bottom: 2px !important;
}

/* ── v16: gap Compartilhe → botões (causa real: margin-top + padding-top no .post-share) ── */
.post-share-section .post-share {
  margin-top:  4px !important;
  padding-top: 0   !important;
  border-top:  none !important;
}

/* ── v17: gap texto → Compartilhe = 1.3cm (~49px) ── */
/* Remove padding inferior do artigo (card invisível, não precisa de espaço próprio) */
#article-body { padding-bottom: 0 !important; }

/* 1.3cm = 49px entre fim do texto e título "Compartilhe" */
.post-share-section { padding-top: 49px !important; }

/* Leia mais sobe junto (espaço entre Compartilhe e Leia mais menor) */
.post-related { padding-top: 20px !important; }

/* ── v18: paginação do blog ── */
.blog-pagination {
  border-top:    none !important;    /* remove separador */
  padding-top:   0    !important;
  margin-top:    32px !important;    /* sobe, cola mais nos cards */
  margin-bottom: 57px !important;    /* 1.5cm antes do footer */
}

/* ── v21: espaço Blog → filtros de categoria = 1cm ── */
.blog-header { margin-bottom: 38px !important; }

/* ── v22: Blog → filtros = 0.6cm (23px) ── */
.blog-header { margin-bottom: 23px !important; }

/* ── v23: Blog → filtros = 0.6cm (23px) — zera padding-bottom também ── */
.blog-header {
  padding-bottom: 0   !important;
  margin-bottom:  23px !important;
}

/* ── v25: Projetos — remove faixa, transição fluida ── */

/* Remove TODOS os fundos da seção (original + mask-image) */
.home-projects {
  background: none !important;
}
.home-projects::before {
  display: none !important;
}

/* Remove borda inferior do header de projetos */
.projects-header {
  border-bottom: none !important;
  padding-top:    38px !important;   /* 1cm entre o topo da seção e o título */
  padding-bottom: 0    !important;
  margin-bottom:  0    !important;
}

/* Título e descrição: 0.5cm entre eles */
.projects-header__title {
  margin-bottom: 19px !important;   /* 0.5cm */
}
.projects-header__desc {
  margin-bottom: 0 !important;
}

/* ── v26: remove fundo Projetos (nuclear) + branco suavizado ── */

/* Destrói o ::before com content:none — mais confiável que display:none */
.home-projects::before {
  content:          none        !important;
  display:          none        !important;
  background:       transparent !important;
  background-color: transparent !important;
}
.home-projects {
  background:       transparent !important;
  background-color: transparent !important;
  background-image: none        !important;
}

/* Branco suavizado em todo o site — menos branco puro */
:root { --white: #FAFAF8; }

/* Cards, sobre, hero etc. — herdam --white automaticamente */
/* Força também nos elementos que usam #fff direto */
.post-card,
.about-card,
.blog-hero-wrap .post-card--hero,
.post-card--medium,
.post-card--small,
.post-card--hero,
.footer-inner,
#site-footer {
  background-color: var(--white) !important;
}

/* Título → tagline: 0.5cm forçado com seletor mais específico */
.home-projects .projects-header__title {
  margin-bottom: 19px !important;
}
.home-projects .projects-header__desc {
  margin-top: 0 !important;
}

/* ── v27: fundo tint Espresso + grain + fix Projetos ── */

/* Tint clarinho do Espresso como fundo unificado */
:root {
  --page-bg:   #F2EBE4;   /* Espresso ~8% sobre branco — quente, editorial */
  --white:     #FAF6F3;   /* "branco" levemente quente para cards */
  --glass-bg:  rgba(242,235,228,0.45);  /* glass da nav no novo tom */
}
body { background: var(--page-bg) !important; }

/* Seções transparentes → herdam fundo do body */
.home-section,
.home-posts,
.home-projects,
.home-about {
  background:       transparent !important;
  background-color: transparent !important;
  background-image: none        !important;
}
.home-projects::before {
  content: none !important;
  display: none !important;
}

/* Título "Projetos" → tagline colados (quase subtítulo) */
.home-projects .projects-header__title {
  margin-bottom: 4px !important;
}
.home-projects .projects-header__desc {
  margin-top:    0   !important;
  font-size:     15px;
  color:         var(--gray-500);
}

/* ── v28: Projetos sobe + nav mais translúcida + hover Espresso ── */

/* Sobe o Projetos: reduz espaço entre o botão e o título */
.home-posts    { padding-bottom: 16px !important; }
.home-projects { padding-top:     8px !important; }
.home-projects .projects-header {
  padding-top: 8px !important;
}

/* Nav: mais translúcida — alpha menor, blur mantido */
#site-header {
  background:              rgba(242,235,228,0.22) !important;
  backdrop-filter:         blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  border-bottom:           1px solid rgba(255,255,255,0.40) !important;
  box-shadow:              0 1px 24px rgba(0,0,0,0.05),
                           inset 0 1px 0 rgba(255,255,255,0.65) !important;
}

/* Hover Espresso em todos os botões — mantém Liquid Glass */
.btn:hover,
.btn--outline:hover,
.about-card__btn:hover,
.home-section-cta a:hover,
.blog-header__back:hover,
.post-share__link:hover,
.page-numbers:hover,
.blog-pagination a:hover,
.cat-filter:hover,
.blog-cat-pill:hover {
  background:              rgba(107,63,34,0.88) !important;
  background-color:        rgba(107,63,34,0.88) !important;
  border-color:            rgba(107,63,34,0.45) !important;
  color:                   #fff                 !important;
  box-shadow:              0 4px 18px rgba(107,63,34,0.28),
                           inset 0 1px 0 rgba(255,255,255,0.22) !important;
  backdrop-filter:         blur(14px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
}

/* CTA ativo da paginação: hover vai para Espresso mais escuro */
.page-numbers.current:hover,
.blog-pagination .current:hover {
  background: rgba(85,48,22,0.95) !important;
}

/* ── v29: instrução de projetos centralizada + espaçamento ── */
.home-projects .home-empty {
  text-align:  center  !important;
  margin-top:  28px    !important;   /* espaço entre tagline e instrução */
  display:     block;
}

/* ── v30: cards hero menores (projeto e publicações) ── */

/* Hero de Projetos: reduz aspect ratio — antes 16/9, agora mais largo */
.post-card--overlay-lg .post-card__image-wrap {
  aspect-ratio: 3/1   !important;   /* panorâmico: ~340px de altura em desktop */
  max-height:   340px !important;
  overflow:     hidden;
}

/* Hero de Publicações: altura fixa, imagem cobre */
.post-card--hero {
  min-height: 220px !important;
  max-height: 260px !important;
}
.post-card--hero .post-card__image-wrap {
  overflow: hidden;
  max-height: 260px !important;
}
.post-card--hero .post-card__img,
.post-card--hero .post-card__img-placeholder {
  height:     100% !important;
  max-height: 260px !important;
  object-fit: cover;
}

/* ── v31: cards 4/1 + espaço tagline→card = 1.3cm ── */
.post-card--overlay-lg .post-card__image-wrap {
  aspect-ratio: 4/1   !important;
  max-height:   300px !important;
}
.post-card--hero {
  min-height: 180px !important;
  max-height: 220px !important;
}
.post-card--hero .post-card__image-wrap,
.post-card--hero .post-card__img,
.post-card--hero .post-card__img-placeholder {
  max-height: 220px !important;
}

/* 1.3cm entre tagline e card hero de projetos */
.home-projects .projects-header {
  margin-bottom: 49px !important;
}

/* ── v32: reverte hero publicações + projetos 5/2 ── */

/* REVERTE tudo do post-card--hero — restaura o grid original intacto */
.post-card--hero {
  min-height: 260px !important;
  max-height: none  !important;
}
.post-card--hero .post-card__image-wrap {
  max-height: none !important;
  overflow: hidden !important;
}
.post-card--hero .post-card__img,
.post-card--hero .post-card__img-placeholder {
  height:     100% !important;
  max-height: none !important;
  object-fit: cover !important;
}

/* Projetos hero: 5/2 — panorâmico mas com mais altura que 4/1 */
.post-card--overlay-lg .post-card__image-wrap {
  aspect-ratio: 5/2   !important;
  max-height:   440px !important;
}

/* ── v33: hero publicações no estilo overlay (igual projetos) ── */
.post-card--hero {
  position:   relative !important;
  display:    block    !important;
  min-height: unset    !important;
  max-height: none     !important;
}
.post-card--hero .post-card__image-wrap {
  display:      block  !important;
  aspect-ratio: 5/2    !important;
  width:        100%   !important;
  overflow:     hidden !important;
  border-radius: inherit;
}
.post-card--hero .post-card__img,
.post-card--hero .post-card__img-placeholder {
  width:      100%  !important;
  height:     100%  !important;
  max-height: none  !important;
  object-fit: cover !important;
}
/* Body sobreposto, ancorado no rodapé */
.post-card--hero .post-card__body {
  position:   absolute  !important;
  bottom:     0         !important;
  left:       0         !important;
  right:      0         !important;
  padding:    20px 26px !important;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.82) 0%,
    rgba(0,0,0,0.40) 60%,
    transparent 100%
  ) !important;
  display:        flex          !important;
  flex-direction: column        !important;
  justify-content: flex-end     !important;
  border-radius: 0 0 inherit inherit;
}
.post-card--hero .post-card__cat   { color: rgba(245,245,247,0.80) !important; }
.post-card--hero .post-card__title a { color: #fff !important; }
.post-card--hero .post-card__date  { color: rgba(245,245,247,0.60) !important; font-size: 12px; margin-top: 6px; }
.post-card--hero .post-card__excerpt { display: none !important; } /* esconde excerpt — layout clean */

/* ── v34: hero publicações — imagem 5/2, conteúdo abaixo (não sobreposto) ── */
.post-card--hero {
  position:   relative !important;
  display:    block    !important;
  min-height: unset    !important;
}
/* Imagem: 5/2, sem sobreposição */
.post-card--hero .post-card__image-wrap {
  display:       block  !important;
  aspect-ratio:  5/2    !important;
  width:         100%   !important;
  overflow:      hidden !important;
  border-radius: 14px 14px 0 0   !important;
}
.post-card--hero .post-card__img,
.post-card--hero .post-card__img-placeholder {
  width:      100%  !important;
  height:     100%  !important;
  object-fit: cover !important;
}
/* Conteúdo: abaixo da imagem, fundo do card */
.post-card--hero .post-card__body {
  position:   static        !important;  /* sai do absolute */
  background: none          !important;
  padding:    16px 20px 20px !important;
  display:    block         !important;
}
.post-card--hero .post-card__cat   { color: var(--accent)    !important; }
.post-card--hero .post-card__title a { color: var(--gray-900) !important; }
.post-card--hero .post-card__date  { color: var(--gray-500)  !important; font-size: 12px; margin-top: 6px; }
.post-card--hero .post-card__excerpt { display: none !important; }

/* ── v35: tagline → card hero projetos = 6px ── */
.home-projects .projects-header { margin-bottom: 6px !important; }

/* ── v35: tagline → card hero projetos = 6px ── */
.home-projects .projects-header { margin-bottom: 6px !important; }

/* ── v36: tagline → card hero projetos = 20px ── */
.home-projects .projects-header { margin-bottom: 20px !important; }

/* ── v40: grid adaptativo de projetos ── */

/* 1 card restante após hero: centrado em 50% da largura */
.proj-grid-1 {
  display:               grid;
  grid-template-columns: minmax(240px, 420px);
  justify-content:       center;
  gap:                   var(--sp-3);
}

/* 2 projetos totais (sem hero): cards um pouco maiores */
.home-projects .posts-grid--2 .post-card--overlay-sm .post-card__image-wrap {
  aspect-ratio: 5/3 !important;
}

/* ── v41: projetos 3 cards — 2 colunas mesmo no mobile ── */
.home-projects .posts-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* ═══════════════════════════════════════════════════
   DARK MODE — v43
   Auto: segue prefers-color-scheme do sistema
   Manual: data-theme="dark" / data-theme="light"
   Estratégia: media query aplica quando NÃO há
   preferência manual light; [data-theme="dark"]
   sempre aplica; [data-theme="light"] usa defaults.
═══════════════════════════════════════════════════ */

/* ── Tokens escuros (reutilizado em auto e manual) ── */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --page-bg:    #1A1714;
    --white:      #241F1B;
    --glass-bg:   rgba(26,23,20,0.55);
    --glass-blur: blur(28px) saturate(180%);
    --accent:          #C08B6A;
    --accent-light:    rgba(192,139,106,0.15);
    --gray-900:   #F5F0EB;
    --gray-800:   #E8E0D4;
    --gray-600:   #A89880;
    --gray-500:   #8A7567;
    --gray-200:   rgba(255,255,255,0.08);
    --gray-50:    rgba(255,255,255,0.04);
  }
}
html[data-theme="dark"] {
  --page-bg:    #1A1714;
  --white:      #241F1B;
  --glass-bg:   rgba(26,23,20,0.55);
  --glass-blur: blur(28px) saturate(180%);
  --accent:          #C08B6A;
  --accent-light:    rgba(192,139,106,0.15);
  --gray-900:   #F5F0EB;
  --gray-800:   #E8E0D4;
  --gray-600:   #A89880;
  --gray-500:   #8A7567;
  --gray-200:   rgba(255,255,255,0.08);
  --gray-50:    rgba(255,255,255,0.04);
}
html[data-theme="light"] {
  --page-bg:    #F2EBE4;
  --white:      #FAF6F3;
  --glass-bg:   rgba(242,235,228,0.22);
  --accent:          #6B3F22;
  --accent-light:    rgba(107,63,34,0.12);
  --gray-900:   #1D1D1F;
  --gray-800:   #3A3A3C;
  --gray-600:   #6E6E73;
  --gray-500:   #8E8E93;
  --gray-200:   #D1D1D6;
  --gray-50:    #F5F5F7;
}

/* ── Aplica os tokens onde o CSS usa valores fixos ── */
/* (variáveis já herdam automaticamente — aqui só overrides de valores não-variáveis) */

/* Seletor base reutilizável */
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --_dark: 1; } }
html[data-theme="dark"] { --_dark: 1; }

/* Nav: glass escuro */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) #site-header {
    background:              rgba(26,23,20,0.55) !important;
    border-bottom-color:     rgba(255,255,255,0.09) !important;
    box-shadow:              0 1px 24px rgba(0,0,0,0.40),
                             inset 0 1px 0 rgba(255,255,255,0.07) !important;
  }
}
html[data-theme="dark"] #site-header {
  background:              rgba(26,23,20,0.55) !important;
  border-bottom-color:     rgba(255,255,255,0.09) !important;
  box-shadow:              0 1px 24px rgba(0,0,0,0.40),
                           inset 0 1px 0 rgba(255,255,255,0.07) !important;
}

/* Placeholders de imagem mais escuros */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .post-card__img-placeholder {
    background: linear-gradient(135deg, #2C2520 0%, #1A1714 100%) !important;
  }
  html:not([data-theme="light"]) .post-card--hero .post-card__img-placeholder,
  html:not([data-theme="light"]) .post-card--small .post-card__img-placeholder,
  html:not([data-theme="light"]) .post-card--medium .post-card__img-placeholder {
    background: #2E2822 !important;
  }
}
html[data-theme="dark"] .post-card__img-placeholder {
  background: linear-gradient(135deg, #2C2520 0%, #1A1714 100%) !important;
}

/* About card: linha de acento já usa var(--accent) → ok. Fundo via var(--white) → ok. */

/* Footer */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) #site-footer {
    background:   #16130F !important;
    border-color: rgba(255,255,255,0.06) !important;
  }
}
html[data-theme="dark"] #site-footer {
  background:   #16130F !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* Painel mobile */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .nav-mobile-panel {
    background:   rgba(22,19,15,0.96) !important;
    border-color: rgba(255,255,255,0.06) !important;
  }
}
html[data-theme="dark"] .nav-mobile-panel {
  background:   rgba(22,19,15,0.96) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* Blog pills */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .blog-cat-pill:not(.is-active) {
    background:   rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.10) !important;
    color:        var(--gray-600)        !important;
  }
}
html[data-theme="dark"] .blog-cat-pill:not(.is-active) {
  background:   rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color:        var(--gray-600)        !important;
}

/* Post share buttons */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .post-share__link {
    background:   rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.12) !important;
    color:        var(--gray-600)        !important;
  }
}
html[data-theme="dark"] .post-share__link {
  background:   rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color:        var(--gray-600)        !important;
}

/* Rel cards (Leia mais) */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .post-related-card {
    background:   rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.08) !important;
  }
}
html[data-theme="dark"] .post-related-card {
  background:   rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* Paginação */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .page-numbers:not(.current) {
    background:   rgba(255,255,255,0.07) !important;
    border-color: rgba(255,255,255,0.10) !important;
  }
}
html[data-theme="dark"] .page-numbers:not(.current) {
  background:   rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* ── Botão toggle ── */
.nav-theme-toggle {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           34px;
  height:          34px;
  border-radius:   8px;
  border:          1px solid transparent;
  background:      transparent;
  color:           var(--gray-600);
  cursor:          pointer;
  transition:      background .2s, border-color .2s, color .2s;
  flex-shrink:     0;
}
.nav-theme-toggle:hover {
  background:    rgba(107,63,34,0.88);
  border-color:  rgba(107,63,34,0.45);
  color:         #fff;
}
/* Ícone ativo */
.nav-theme-toggle .icon-sun  { display: block; }
.nav-theme-toggle .icon-moon { display: none;  }

/* Transição suave entre temas */
body, #site-header, .post-card, .about-card,
#site-footer, .nav-mobile-panel {
  transition: background-color .35s ease, border-color .35s ease, color .2s ease !important;
}

/* ── v44: toggle mobile — row com CTA + botão ── */
.nav-mobile-cta-row {
  display:     flex;
  align-items: center;
  gap:         10px;
}
.nav-theme-toggle--mobile {
  flex-shrink: 0;
}

/* ── v45: header flutuante ── */
:root {
  --header-float-top:  12px;
  --header-float-side: 20px;
  --header-h:          52px;   /* altura ligeiramente menor para o floating */
}

/* Header: flutua inset da borda */
#site-header {
  top:              var(--header-float-top)  !important;
  left:             var(--header-float-side) !important;
  right:            var(--header-float-side) !important;
  height:           var(--header-h)          !important;
  border-radius:    14px                     !important;
  border:           1px solid var(--glass-border) !important;
  padding:          0 20px                   !important;
  box-shadow:       0 4px 28px rgba(0,0,0,0.12),
                    inset 0 1px 0 rgba(255,255,255,0.72) !important;
}

/* Body: padding compensando header + gap acima dele */
body {
  padding-top: calc(var(--header-h) + var(--header-float-top) + 14px) !important;
}

/* Admin bar */
.admin-bar #site-header { top: calc(32px + var(--header-float-top)) !important; }
@media (max-width: 782px) {
  .admin-bar #site-header { top: calc(46px + var(--header-float-top)) !important; }
}

/* Painel mobile: logo abaixo do header flutuante, mesmo alinhamento lateral */
.nav-mobile-panel {
  top:           calc(var(--header-h) + var(--header-float-top) + 6px) !important;
  left:          var(--header-float-side) !important;
  right:         var(--header-float-side) !important;
  border-radius: 14px                     !important;
  border:        1px solid var(--glass-border) !important;
  border-top:    1px solid var(--glass-border) !important;
}

/* Dark mode: sombra mais forte no floating */
html[data-theme="dark"] #site-header,
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) #site-header {
    box-shadow: 0 4px 28px rgba(0,0,0,0.45),
                inset 0 1px 0 rgba(255,255,255,0.07) !important;
  }
}

/* ── v46: header flutuante — corrige conflito com sticky ── */
#site-header {
  position:      fixed              !important;
  top:           12px               !important;
  left:          20px               !important;
  right:         20px               !important;
  width:         auto               !important;
  height:        52px               !important;
  border-radius: 14px               !important;
  border:        1px solid rgba(255,255,255,0.45) !important;
  padding:       0 20px             !important;
  background:    rgba(242,235,228,0.28) !important;
  backdrop-filter:         blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  box-shadow:    0 4px 28px rgba(0,0,0,0.10),
                 inset 0 1px 0 rgba(255,255,255,0.80) !important;
}

html[data-theme="dark"] #site-header {
  background:    rgba(26,23,20,0.60) !important;
  border-color:  rgba(255,255,255,0.10) !important;
  box-shadow:    0 4px 28px rgba(0,0,0,0.45),
                 inset 0 1px 0 rgba(255,255,255,0.07) !important;
}

body { padding-top: 78px !important; }

.admin-bar #site-header { top: 44px !important; }
@media (max-width: 782px) {
  .admin-bar #site-header { top: 58px !important; }
}

.nav-mobile-panel {
  position:      fixed  !important;
  top:           76px   !important;
  left:          20px   !important;
  right:         20px   !important;
  border-radius: 14px   !important;
  border:        1px solid rgba(255,255,255,0.35) !important;
}

html[data-theme="dark"] .nav-mobile-panel {
  border-color: rgba(255,255,255,0.08) !important;
}

/* ── v48: header alinhado com a largura do conteúdo ── */
#site-header {
  left:         0    !important;
  right:        0    !important;
  margin-left:  max(16px, calc((100vw - 1200px) / 2)) !important;
  margin-right: max(16px, calc((100vw - 1200px) / 2)) !important;
}

/* ── v49: header alinha com container (margem 0 no mobile) ── */
#site-header {
  margin-left:  max(0px, calc((100vw - 1200px) / 2)) !important;
  margin-right: max(0px, calc((100vw - 1200px) / 2)) !important;
}

/* ── v50: header margem = padding do container (24px desktop / 16px mobile) ── */
#site-header {
  margin-left:  max(24px, calc((100vw - 1200px) / 2)) !important;
  margin-right: max(24px, calc((100vw - 1200px) / 2)) !important;
}
@media (max-width: 480px) {
  #site-header {
    margin-left:  16px !important;
    margin-right: 16px !important;
  }
}

/* ── v51: toggle mobile oposto ao CTA + margem header desktop ── */

/* Toggle no lado oposto ao CTA no painel mobile */
.nav-mobile-cta-row {
  justify-content: space-between !important;
  width: 100%;
}

/* Header desktop: margem = --sp-4 (24px), igual ao container */
@media (min-width: 481px) {
  #site-header {
    margin-left:  max(24px, calc((100vw - 1200px) / 2)) !important;
    margin-right: max(24px, calc((100vw - 1200px) / 2)) !important;
  }
}
@media (max-width: 480px) {
  #site-header {
    margin-left:  16px !important;
    margin-right: 16px !important;
  }
}

/* ── v52: mobile — header volta ao estilo não-flutuante ── */
@media (max-width: 768px) {
  #site-header {
    position:      fixed   !important;
    top:           0       !important;
    left:          0       !important;
    right:         0       !important;
    margin-left:   0       !important;
    margin-right:  0       !important;
    border-radius: 0       !important;
    height:        var(--header-h, 58px) !important;
    box-shadow:    0 1px 24px rgba(0,0,0,0.06),
                   inset 0 1px 0 rgba(255,255,255,0.65) !important;
  }
  body { padding-top: 58px !important; }
}

/* ── v53: CTA menor no header flutuante + toggle mobile corrigido ── */

/* CTA: menor para não encostar nas bordas do header flutuante */
@media (min-width: 769px) {
  .nav-cta {
    padding:   5px 13px !important;
    font-size: 13px     !important;
  }
}

/* Toggle mobile: lado OPOSTO ao CTA — space-between garante isso */
.nav-mobile-cta-row {
  display:         flex             !important;
  align-items:     center           !important;
  justify-content: space-between    !important;
  width:           100%             !important;
  gap:             0                !important;
}

/* ── v54: mobile menu fixes ── */

/* Painel mobile: não flutua — full width, colado ao header */
@media (max-width: 768px) {
  .nav-mobile-panel {
    position:      fixed  !important;
    top:           58px   !important;
    left:          0      !important;
    right:         0      !important;
    border-radius: 0      !important;
    border-left:   none   !important;
    border-right:  none   !important;
    border-top:    none   !important;
  }
}

/* Nav links no mobile: pill só em volta do texto, não full-width */
.nav-mobile-panel .nav-menu {
  align-items: flex-start !important;
}
.nav-mobile-panel .nav-menu li {
  width: auto !important;
}
.nav-mobile-panel .nav-menu a {
  display:       inline-block  !important;
  width:         auto          !important;
  border-radius: 8px           !important;
  padding:       6px 12px      !important;
  border-bottom: none          !important;
}

/* Toggle mobile: alinhado verticalmente com o CTA */
.nav-mobile-cta-row {
  display:         flex          !important;
  align-items:     center        !important;
  justify-content: space-between !important;
  width:           100%          !important;
  gap:             0             !important;
  padding-top:     4px           !important;
}
.nav-theme-toggle--mobile {
  align-self: center !important;
}

/* ── v55: header maior + toggle mobile centralizado + cards uniformes ── */

/* Header desktop: 60px */
@media (min-width: 769px) {
  #site-header { height: 60px !important; }
  body          { padding-top: 86px !important; }
}

/* JS responsivo: 86px desktop / 58px mobile */

/* Toggle mobile: centering explícito */
.nav-mobile-cta-row {
  display:         flex          !important;
  flex-direction:  row           !important;
  align-items:     center        !important;
  justify-content: space-between !important;
  width:           100%          !important;
  min-height:      44px          !important;
  padding-top:     0             !important;
}
.nav-mobile-cta-row .nav-cta {
  align-self: center !important;
  margin:     0      !important;
}
.nav-theme-toggle--mobile {
  display:         inline-flex !important;
  align-items:     center      !important;
  justify-content: center      !important;
  align-self:      center      !important;
  margin:          0           !important;
  flex-shrink:     0           !important;
}

/* Cards mobile: small usa 16/9 igual ao medium → altura uniforme */
@media (max-width: 768px) {
  .post-card--small .post-card__image-wrap {
    aspect-ratio: 16/9 !important;
  }
}

/* ── v56: footer linha branca + header 68px + single mobile margem ── */

/* Header desktop: 68px */
@media (min-width: 769px) {
  #site-header { height: 68px !important; }
  body          { padding-top: 94px !important; }
}

/* Footer: remove linha branca no dark mode */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) #site-footer {
    border-top:  1px solid rgba(255,255,255,0.06) !important;
    box-shadow:  0 -4px 28px rgba(0,0,0,0.35) !important;
  }
}
html[data-theme="dark"] #site-footer {
  border-top:  1px solid rgba(255,255,255,0.06) !important;
  box-shadow:  0 -4px 28px rgba(0,0,0,0.35) !important;
}

/* Single mobile: article-body com margem lateral (não vai de borda a borda) */
@media (max-width: 768px) {
  #article-body {
    margin-left:  16px !important;
    margin-right: 16px !important;
    padding:      24px 20px 36px !important;
    border-radius: 14px !important;
  }
  .post-share-section,
  .post-related {
    margin-left:  16px !important;
    margin-right: 16px !important;
  }
}

/* ── v57: elementos da header proporcionais ao novo tamanho (68px) ── */
@media (min-width: 769px) {
  /* Logo / nome do site */
  .nav-logo {
    font-size: 19px !important;
  }

  /* Itens do menu */
  .nav-menu a {
    font-size: 15px !important;
    padding:   6px 12px !important;
  }

  /* Botão CTA */
  .nav-cta {
    font-size: 14px   !important;
    padding:   7px 17px !important;
  }

  /* Toggle sol/lua */
  .nav-theme-toggle {
    width:  38px !important;
    height: 38px !important;
  }
  .nav-theme-toggle svg {
    width:  17px !important;
    height: 17px !important;
  }
}

/* ── Scroll suave para âncoras ── */
html { scroll-behavior: smooth; }

/* ── Footer social links: hover Espresso igual ao restante do tema ── */
.footer-social a:hover {
  background:              rgba(107,63,34,0.88) !important;
  border-color:            rgba(107,63,34,0.45) !important;
  color:                   #fff                 !important;
  box-shadow:              0 4px 18px rgba(107,63,34,0.28),
                           inset 0 1px 0 rgba(255,255,255,0.22) !important;
  backdrop-filter:         blur(14px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  opacity:                 1                    !important;
}

/* ── Nav links: Liquid Glass igual para todos os itens do menu ── */
@media (min-width: 769px) {
  .nav-menu a {
    background:              rgba(255,255,255,0.38)   !important;
    backdrop-filter:         blur(14px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
    border:                  1px solid rgba(255,255,255,0.58) !important;
    border-radius:           9px                       !important;
    box-shadow:              inset 0 1px 0 rgba(255,255,255,0.80) !important;
    padding:                 6px 13px                  !important;
    transition:              background .2s, border-color .2s, box-shadow .2s !important;
  }
  .nav-menu a:hover {
    background:              rgba(107,63,34,0.88)      !important;
    border-color:            rgba(107,63,34,0.45)      !important;
    color:                   #fff                      !important;
    box-shadow:              0 4px 18px rgba(107,63,34,0.28),
                             inset 0 1px 0 rgba(255,255,255,0.22) !important;
  }

  /* Dark mode */
  html[data-theme="dark"] .nav-menu a {
    background:   rgba(255,255,255,0.07)  !important;
    border-color: rgba(255,255,255,0.12)  !important;
    box-shadow:   inset 0 1px 0 rgba(255,255,255,0.08) !important;
    color:        var(--gray-600)         !important;
  }
}

/* ── v1.4: hover Espresso nos itens do menu — alta especificidade ── */
#site-header .nav-menu a:hover,
#site-header .nav-menu li a:hover {
  background:              rgba(107,63,34,0.88)      !important;
  background-color:        rgba(107,63,34,0.88)      !important;
  border-color:            rgba(107,63,34,0.45)      !important;
  color:                   #ffffff                   !important;
  box-shadow:              0 4px 18px rgba(107,63,34,0.28),
                           inset 0 1px 0 rgba(255,255,255,0.22) !important;
  backdrop-filter:         blur(14px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  opacity:                 1                         !important;
}

/* ══════════════════════════════════════════════════
   DROPDOWN DESKTOP — Liquid Glass
══════════════════════════════════════════════════ */

/* Pai com filhos: posicionamento relativo */
.nav-right .menu-item-has-children { position: relative; }

/* Chevron no link pai */
.nav-right .menu-item-has-children > a::after {
  content: '';
  display:        inline-block;
  width:          5px;
  height:         5px;
  border-right:   1.5px solid currentColor;
  border-bottom:  1.5px solid currentColor;
  transform:      rotate(45deg) translateY(-2px);
  margin-left:    5px;
  opacity:        0.55;
  vertical-align: middle;
  transition:     transform .2s;
}
.nav-right .menu-item-has-children:hover > a::after {
  transform: rotate(-135deg) translateY(-2px);
}

/* Submenu: escondido por padrão, aparece ao hover */
.nav-right .sub-menu {
  list-style:  none;
  margin:      0;
  padding:     6px;
  position:    absolute;
  top:         calc(100% + 10px);
  left:        50%;
  transform:   translateX(-50%) translateY(-6px);
  min-width:   190px;
  background:  rgba(242,235,228,0.88);
  backdrop-filter:         blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border:      1px solid rgba(255,255,255,0.58);
  border-radius: 14px;
  box-shadow:  0 8px 32px rgba(0,0,0,0.12),
               inset 0 1px 0 rgba(255,255,255,0.80);
  opacity:     0;
  visibility:  hidden;
  transition:  opacity .2s, visibility .2s, transform .2s;
  z-index:     1100;
}
.nav-right .menu-item-has-children:hover > .sub-menu {
  opacity:    1;
  visibility: visible;
  transform:  translateX(-50%) translateY(0);
}

/* Itens do submenu — sem herdar o glass do parent */
.nav-right .sub-menu li a {
  display:      block;
  padding:      7px 12px !important;
  font-size:    13px !important;
  border-radius: 8px !important;
  color:        var(--gray-900) !important;
  white-space:  nowrap;
  background:   transparent !important;
  border:       none !important;
  box-shadow:   none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.nav-right .sub-menu li a:hover {
  background:  rgba(107,63,34,0.88) !important;
  color:       #fff !important;
  border-color: transparent !important;
}

/* Dark mode dropdown */
html[data-theme="dark"] .nav-right .sub-menu {
  background:  rgba(26,23,20,0.92) !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow:  0 8px 32px rgba(0,0,0,0.45),
               inset 0 1px 0 rgba(255,255,255,0.07) !important;
}
html[data-theme="dark"] .nav-right .sub-menu li a {
  color: var(--gray-600) !important;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .nav-right .sub-menu {
    background:  rgba(26,23,20,0.92) !important;
    border-color: rgba(255,255,255,0.10) !important;
  }
  html:not([data-theme="light"]) .nav-right .sub-menu li a {
    color: var(--gray-600) !important;
  }
}

/* ══════════════════════════════════════════════════
   ACORDEÃO MOBILE
══════════════════════════════════════════════════ */

/* Link pai: flex para alinhar chevron */
.nav-mobile-panel .menu-item-has-children > a {
  display:         inline-flex !important;
  align-items:     center !important;
  gap:             6px !important;
}

/* Botão chevron */
.menu-toggle-btn {
  background:  none;
  border:      none;
  padding:     4px 6px;
  cursor:      pointer;
  color:       var(--gray-500);
  display:     inline-flex;
  align-items: center;
  transition:  transform .25s;
  flex-shrink: 0;
  margin-left: 4px;
}
.nav-mobile-panel .menu-item-has-children.is-open > .menu-toggle-btn {
  transform: rotate(180deg);
}

/* Itens do submenu mobile — indentados */
.nav-mobile-panel .sub-menu {
  list-style: none;
  margin:     0;
  padding:    0;
}
.nav-mobile-panel .sub-menu li {
  width: auto !important;
}
.nav-mobile-panel .sub-menu li a {
  padding-left: 24px !important;
  font-size:    15px !important;
  color:        var(--gray-600) !important;
  display:      inline-block !important;
  width:        auto !important;
  opacity:      0.85;
}
.nav-mobile-panel .sub-menu li a:hover {
  color:       #fff !important;
  background:  rgba(107,63,34,0.88) !important;
  opacity:     1;
}

/* ── Reverte ajustes mobile do single.php (v56) ── */
@media (max-width: 768px) {
  #article-body {
    margin-left:  0   !important;
    margin-right: 0   !important;
    padding:      28px 22px 40px !important;
    border-radius: 14px !important;
  }
  .post-share-section,
  .post-related {
    margin-left:  0 !important;
    margin-right: 0 !important;
  }
}

/* ── Gap abaixo da seção Projetos: reduz padding-bottom ── */
.home-projects { padding-bottom: 24px !important; }

/* ── Títulos dos cards overlay em dark mode: forçar branco ── */
html[data-theme="dark"] .post-card--overlay .post-card__title--overlay,
html[data-theme="dark"] .post-card--overlay .post-card__title--overlay a,
html[data-theme="dark"] .post-card--overlay .post-card__title--overlay-sm,
html[data-theme="dark"] .post-card--overlay .post-card__title--overlay-sm a,
html[data-theme="dark"] .post-card--overlay .post-card__cat--light,
html[data-theme="dark"] .post-card--overlay .post-card__proj-btn {
  color: #ffffff !important;
}

/* ── Espaçamento proporcional entre todas as seções da home ── */

/* Sistema de ritmo: 40px em todos os gaps */
@media (min-width: 769px) {
  body { padding-top: 120px !important; }  /* header 68 + gap 12 + respiro 40 */

  /* Todas as seções: padding uniforme 40px */
  .home-section,
  .home-posts,
  .home-about {
    padding-top:    40px !important;
    padding-bottom: 40px !important;
  }

  /* Projetos: mais apertado — o card já tem peso visual */
  .home-projects {
    padding-top:    20px !important;
    padding-bottom: 20px !important;
  }

  /* Footer: mesmo ritmo */
  #site-footer {
    margin-top: 40px !important;
  }
}