body { background: var(--bg-page) !important; color: var(--slate-900); font-size: 0.9375rem; line-height: 1.55; }

/* ── Blog hero ────────────────────────────────────────────────────── */
.blog-hero {
    padding: 4rem 1.5rem 2.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.blog-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(52, 132, 196, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(52, 132, 196, 0.06) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000 30%, transparent 75%);
    pointer-events: none;
}
.blog-hero-inner {
    position: relative;
    max-width: 44rem;
    margin: 0 auto;
}
.blog-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--blue);
    background: var(--blue-50);
    border: 1px solid var(--blue-100);
    border-radius: 9999px;
    padding: 0.3125rem 0.75rem;
    margin-bottom: 1.25rem;
}
.blog-eyebrow::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 9999px;
    background: var(--blue);
}
.blog-title {
    font-size: clamp(2rem, 4.8vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.12;
    color: var(--slate-900);
    margin-bottom: 1rem;
}
.blog-title .accent { color: var(--blue); }
.blog-subtitle {
    font-size: 1.0625rem;
    color: var(--slate-500);
    line-height: 1.6;
    max-width: 36rem;
    margin: 0 auto;
}

/* ── Search ───────────────────────────────────────────────────────── */
.search-bar { position: relative; max-width: 36rem; margin: 2rem auto 0; }

/* Inputs do widget Search moderno (.e-search-input) e fallback */
.search-input,
.elementor-widget-search input.e-search-input,
.elementor-widget-search input[type="search"],
.elementor-search-form input[type="search"] {
    width: 100%;
    height: 3.25rem;
    padding: 0 3.25rem 0 3rem;
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: 0.875rem;
    font-size: 0.9375rem;
    color: var(--slate-900);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
}
.search-input:focus,
.elementor-widget-search input.e-search-input:focus,
.elementor-widget-search input[type="search"]:focus,
.elementor-search-form input[type="search"]:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(52, 132, 196, 0.12);
}

/* Hint ⌘K visual no input de busca (apenas no hero) */
.blog-hero .elementor-widget-search,
.blog-hero .elementor-widget-search .e-search-form,
.blog-hero .elementor-widget-search .e-search-input-wrapper { position: relative; }
.blog-hero .elementor-widget-search .e-search-input-wrapper::after {
    content: '⌘ K';
    position: absolute;
    right: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--slate-500);
    background: var(--slate-100);
    border: 1px solid var(--slate-200);
    border-radius: 0.375rem;
    padding: 0.1875rem 0.4375rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    pointer-events: none;
}
/* Esconder o botão submit do search (a tela já tem o atalho de Enter) */
.blog-hero .elementor-widget-search .e-search-submit {
    display: none !important;
}

/* Ícone de busca (lupa) à esquerda do input do hero */
.blog-hero .elementor-widget-search input.e-search-input,
.blog-hero .elementor-widget-search input[type="search"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
    background-repeat: no-repeat;
    background-position: 1.125rem center;
    background-size: 1.125rem 1.125rem;
}

/* ── Categories chips ─────────────────────────────────────────────── */
.categories {
    padding: 1.25rem 1.5rem 0;
    max-width: 72rem;
    margin: 0 auto;
}
.chip-bar {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
    justify-content: center;
    flex-wrap: wrap;
}
.chip-bar::-webkit-scrollbar { display: none; }
.cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: 9999px;
    padding: 0.5rem 0.9375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--slate-600);
    white-space: nowrap;
    transition: all 0.15s ease;
    cursor: pointer;
    font-family: inherit;
}
.cat-chip:hover {
    border-color: var(--blue-200);
    color: var(--blue);
    background: var(--blue-50);
}
.cat-chip[aria-pressed="true"],
.cat-chip[aria-current="page"] {
    background: var(--slate-900);
    color: #fff;
    border-color: var(--slate-900);
}
.cat-chip .count {
    font-size: 0.6875rem;
    color: var(--slate-400);
    font-weight: 700;
}
.cat-chip[aria-pressed="true"] .count,
.cat-chip[aria-current="page"] .count { color: rgba(255, 255, 255, 0.6); }

/* ── Container ────────────────────────────────────────────────────── */
.container {
    max-width: 72rem;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
}

/* ── Section head ─────────────────────────────────────────────────── */
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    gap: 1rem;
}
.section-title {
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--slate-900);
}
.section-count {
    font-size: 0.75rem;
    color: var(--slate-500);
    font-weight: 500;
}

/* ── Layout (grid + sidebar) ──────────────────────────────────────── */
.layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}
@media (min-width: 1024px) {
    .layout { grid-template-columns: minmax(0, 1fr) 18rem; gap: 3rem; }
}

/* ── Post grid columns (override de Loop Grid) ──────── */
.post-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 640px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }

/* ── Sidebar ──────────────────────────────────────────────────────── */
.sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
.side-card {
    background: #fff;
    border: 1px solid var(--slate-200);
    border-radius: 1rem;
    padding: 1.375rem 1.375rem 1.5rem;
}
.side-title {
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--slate-400);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.125rem;
}
.side-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--slate-100);
}
.popular-list { display: flex; flex-direction: column; gap: 0.875rem; list-style: none; padding: 0; margin: 0; }
.popular-item {
    display: grid;
    grid-template-columns: 1.625rem 1fr;
    gap: 0.875rem;
    align-items: flex-start;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--slate-100);
}
.popular-item:last-child { border-bottom: 0; padding-bottom: 0; }
.popular-num {
    font-size: 1.125rem;
    font-weight: 900;
    color: var(--slate-200);
    letter-spacing: -0.04em;
    line-height: 1;
    font-feature-settings: 'tnum';
}
.popular-meta {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--slate-400);
    margin-bottom: 0.25rem;
}
.popular-link {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--slate-800);
    line-height: 1.4;
    transition: color 0.15s;
    text-decoration: none;
}
.popular-link:hover { color: var(--blue); }

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4375rem;
}
.tag-pill {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--slate-600);
    background: var(--slate-50);
    border: 1px solid var(--slate-200);
    border-radius: 0.5rem;
    padding: 0.3125rem 0.625rem;
    transition: all 0.15s;
    text-decoration: none;
}
.tag-pill:hover {
    color: var(--blue);
    background: var(--blue-50);
    border-color: var(--blue-200);
}
.tag-pill .hash {
    color: var(--slate-400);
    margin-right: 0.125rem;
}

/* ── Newsletter ───────────────────────────────────────────────────── */
.newsletter {
    margin-top: 4rem;
    background: var(--slate-900);
    color: #fff;
    border-radius: 1.25rem;
    padding: 3rem 1.75rem;
    position: relative;
    overflow: hidden;
}
.newsletter::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, #000 30%, transparent 80%);
}
.newsletter::after {
    content: '';
    position: absolute;
    top: -120px; right: -120px;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(52, 132, 196, 0.5), transparent 70%);
    pointer-events: none;
}
.newsletter-inner {
    position: relative;
    max-width: 36rem;
    margin: 0 auto;
    text-align: center;
}
.newsletter-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #93C5FD;
    border: 1px solid rgba(147, 197, 253, 0.3);
    border-radius: 9999px;
    padding: 0.3125rem 0.75rem;
    margin-bottom: 1rem;
}
.newsletter-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin-bottom: 0.75rem;
    color: #fff;
}
.newsletter-desc {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 1.75rem;
}
.newsletter-fineprint {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 0.875rem;
}