/* ═══════════════════════════════════════════════════════════════════════
   SynthVision — CSS GLOBAL (Global Styles do tema)
   Aplica-se somente a páginas que contêm o wrapper .svwp.
   Tokens com prefixo --svx- (não colide com tema nem com plugins --sv-/--svb-).
   ═══════════════════════════════════════════════════════════════════════ */
/* Fontes Syne/DM Sans/DM Mono: carregadas via link rel=stylesheet no template
   part header (marcador sv-fonts) — NÃO usar @import aqui (só baixa depois do
   CSS todo → FOUC) nem blocos de estilo soltos por página (difíceis de manter). */

/* ═══ página inteira escura quando contém .svwp ═══ */
body:has(.svwp) {
  background: #0A0A0F !important;
  /* clip, NÃO hidden: overflow-x:hidden cria scroll container no mobile e
     QUEBRA o position:sticky do hero (Chrome/Safari Android → vão preto na
     rolagem); clip corta o overflow sem criar scroll container */
  overflow-x: clip;

  /* tokens duplicados no body: nav e hero ficam FORA do .svwp e precisam
     das variáveis resolvidas no próprio escopo */
  --svx-bg:         #0A0A0F;
  --svx-bg-alt:     #0F0F16;
  --svx-surface:    #13131A;
  --svx-panel:      #1A1A24;
  --svx-border:     rgba(255, 255, 255, 0.07);
  --svx-border-hi:  rgba(255, 255, 255, 0.14);
  --svx-text:       #F0F0F5;
  --svx-muted:      #5A5A6A;
  --svx-muted-hi:   #888896;
  --svx-accent:     #FF4D1C;
  --svx-accent-rgb: 255, 77, 28;
  --svx-max-w:      1240px;
  --svx-r:          20px;
  --svx-r-sm:       12px;
  --svx-font-display: 'Syne', sans-serif;
  --svx-font-body:    'DM Sans', sans-serif;
  --svx-font-mono:    'DM Mono', monospace;
}

/* ═══ TOKENS + BASE ═══ */
.svwp {
  --svx-bg:         #0A0A0F;
  --svx-bg-alt:     #0F0F16;
  --svx-surface:    #13131A;
  --svx-panel:      #1A1A24;
  --svx-border:     rgba(255, 255, 255, 0.07);
  --svx-border-hi:  rgba(255, 255, 255, 0.14);
  --svx-text:       #F0F0F5;
  --svx-muted:      #5A5A6A;
  --svx-muted-hi:   #888896;
  --svx-accent:     #FF4D1C;
  --svx-accent-rgb: 255, 77, 28;
  --svx-max-w:      1240px;
  --svx-r:          20px;
  --svx-r-sm:       12px;
  --svx-font-display: 'Syne', sans-serif;
  --svx-font-body:    'DM Sans', sans-serif;
  --svx-font-mono:    'DM Mono', monospace;

  background: var(--svx-bg);
  color: var(--svx-text);
  font-family: var(--svx-font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;

  /* full-bleed: escapa do content-size do tema (o post-content é alignwide/constrained) */
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  /* zera o block-gap do layout flow entre os grupos de seção */
  --wp--style--block-gap: 0px;
}
.svwp ::selection { background: rgba(var(--svx-accent-rgb), 0.35); }
.svwp :focus-visible { outline: 2px solid var(--svx-accent); outline-offset: 3px; border-radius: 4px; }

/* neutraliza defaults do WP dentro do wrapper (com especificidade alta,
   pois o Global Styles do usuário é impresso por último e ganharia empates) */
.svwp * { box-sizing: border-box; }
.svwp p, .svwp .wp-block-paragraph { margin: 0; }
.svwp h1, .svwp h2, .svwp h3, .svwp h4, .svwp .wp-block-heading { margin: 0; }
.svwp ul, .svwp .wp-block-list { margin: 0; padding: 0; list-style: none; }
.svwp a, .entry-content.wp-block-post-content a:not(.wp-block-button__link) { color: inherit; text-decoration: none !important; }  /* tema impõe underline com !important em .entry-content a — repetimos o seletor pra vencer por origem */

/* ═══ BASE TIPOGRÁFICA (:where → especificidade mínima, qualquer regra de
   componente vence; o objetivo é blindar contra o tema, que define
   h2/h4/h6 com tamanho DIRETO — clamp(28–32px) etc. — e esses valores
   "vazam" em qualquer heading sem regra própria) ═══ */
:where(.svwp) :where(h1, h2, h3, h4, h5, h6, .wp-block-heading) {
  font-family: var(--svx-font-display);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.05;
  /* tamanhos default — no site estático todo heading tinha regra de componente;
     aqui servem de rede de segurança para headings sem classe pai */
  font-size: revert;
}
:where(.svwp) :where(h1) { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
:where(.svwp) :where(h2) { font-size: clamp(1.7rem, 3vw, 2.6rem); }
:where(.svwp) :where(h3) { font-size: 1.2rem; }
:where(.svwp) :where(h4) { font-size: .95rem; }
:where(.svwp) :where(h5, h6) { font-size: .85rem; }
:where(.svwp) :where(p) { font-size: 1rem; }
:where(.svwp) :where(b, strong) { font-weight: 500; color: var(--svx-text); }

/* ═══ CORREÇÃO DE COR: regras diretas do tema (h1–h6/p) pintam de preto;
   herança não vence regra direta, então declaramos a cor explicitamente.
   :where() zera a especificidade interna → reset fica em (0,2,0): vence o tema
   (impresso antes) mas perde para as regras de componente deste arquivo. ═══ */
.svwp:is(.svwp) :where(p, .wp-block-paragraph, h1, h2, h3, h4, h5, h6, .wp-block-heading, .wp-block-list li, .wp-block-details, .wp-block-details summary) { color: var(--svx-text); }
/* nenhum grupo interno pode herdar limitação de largura */
.svwp .wp-block-group { max-width: none; margin-left: 0; margin-right: 0; }

/* ═══ BLINDAGEM DE ESPECIFICIDADE (o <p class="..."> do builder vira wrapper (0,2,0)) ═══
   Regras wrapper do layout (.page-hero p, .sec-head p, .card p) empatam com os
   componentes em (0,2,0) e vencem por ORDEM DE ORIGEM — é por isso que kicker,
   tags e card-num apareciam com fonte/tamanho/cor errados. Repetimos os
   componentes com .svwp:is(.svwp) = (0,3,0). Fica ANTES das regras de
   componente para não bloquear refinamentos legítimos mais abaixo no arquivo. */
.svwp:is(.svwp) :where(h1, h2, h3, h4, h5, h6, .wp-block-heading) {
  /* Global Styles do tema imprime :root :where(.wp-block-heading) com Poppins —
     vencia o :where(...) base. Exceção mono re-declarada logo abaixo. */
  font-family: var(--svx-font-display) !important;
  font-weight: 800;
}
.svwp:is(.svwp) .what-happens h3 { font-family: var(--svx-font-mono) !important; }  /* exceção: heading mono do contato */
.svwp:is(.svwp) .kicker {
  font-family: var(--svx-font-mono) !important; font-size: .68rem !important;
  letter-spacing: 2.5px; text-transform: uppercase; font-weight: 400;
  color: var(--svx-accent) !important;
}
.svwp:is(.svwp) .page-hero-tags p {
  font-family: var(--svx-font-mono) !important; font-size: .62rem !important;
  letter-spacing: 1.5px; text-transform: uppercase; font-weight: 400;
  color: var(--svx-muted-hi) !important;
  display: inline-block !important; width: auto !important; max-width: none;
  margin: 0; flex: 0 0 auto !important;
  padding: 5px 12px; border-radius: 100px; border: 1px solid var(--svx-border);
}
.svwp:is(.svwp) .service-tags p {
  font-family: var(--svx-font-mono) !important; font-size: .56rem !important;
  line-height: 1.4; letter-spacing: 1px; text-transform: uppercase; font-weight: 400;
  color: var(--svx-muted-hi) !important;
  display: inline-block !important; width: auto !important; max-width: none;
  margin: 0; flex: 0 0 auto !important;
  padding: 4px 9px; border-radius: 100px; border: 1px solid var(--svx-border);
}
.svwp:is(.svwp) .card-num {
  font-family: var(--svx-font-mono) !important; font-size: .6rem !important;
  letter-spacing: 1px; font-weight: 400;
  color: var(--svx-accent) !important; opacity: .5; margin-bottom: 14px;
}

/* ═══ MARGENS DO LAYOUT ENGINE (causa do "padding a mais"): o motor de layout
   do WP aplica margin-block-start nos filhos a partir do 2º (block-gap). O
   Gutenify emite essas margens como valores literais em classes de layout,
   então zeramos por estrutura: (0,2,0) vence as regras do engine (0,1,x) e
   perde para as margens explícitas dos componentes (que vêm depois no arquivo) ═══ */
.svwp > * + * { margin-top: 0 !important; margin-bottom: 0 !important; }
.svwp:is(.svwp) :where(.is-layout-flow) > * + * { margin-block-start: 0; margin-block-end: 0; }

/* ═══ LAYOUT ═══ */
.svwp .wrap { max-width: var(--svx-max-w); margin-left: auto; margin-right: auto; padding: 0 48px; }
.svwp .sec  { padding: 120px 0; }
.svwp .sec-alt { background: var(--svx-bg-alt); }
.svwp .sec-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 64px 64px;
}
.svwp .sec-head { max-width: 700px; margin-bottom: 64px; }
.svwp .sec-head h2 { font-family: var(--svx-font-display); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 18px; }
.svwp .sec-head p  { color: var(--svx-muted-hi); font-size: 1.05rem; font-weight: 300; line-height: 1.75; }

/* ═══ PRIMITIVES ═══ */
.svwp .kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--svx-font-mono);
  font-size: .68rem; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--svx-accent); margin-bottom: 18px;
}
.svwp .kicker::before { content: ''; width: 18px; height: 1px; background: var(--svx-accent); }
.svwp .kicker--mono { letter-spacing: 1.5px; text-transform: none; }

.svwp .inline-link { color: var(--svx-accent); }

/* botões (blocos core/buttons) */
.svwp .wp-block-buttons { gap: 12px; }
.svwp .wp-block-button .wp-block-button__link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; border-radius: 8px;
  font-family: var(--svx-font-body); font-weight: 500; font-size: .95rem;
  transition: all .25s cubic-bezier(.23, 1, .32, 1);
  cursor: pointer; border: none; white-space: nowrap;
  margin-top: 0;
}
.svwp .btn-primary .wp-block-button__link {
  background: var(--svx-accent); color: #fff;
  box-shadow: 0 8px 28px rgba(var(--svx-accent-rgb), .25);
}
.svwp .btn-primary .wp-block-button__link:hover {
  transform: translateY(-2px); box-shadow: 0 14px 36px rgba(var(--svx-accent-rgb), .38);
}
.svwp .btn-ghost .wp-block-button__link {
  border: 1px solid var(--svx-border-hi); color: var(--svx-text);
  background: rgba(255,255,255,.03); backdrop-filter: blur(8px);
}
.svwp .btn-ghost .wp-block-button__link:hover {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22);
}

/* ═══ SECTION — problem ═══ */
.svwp .problem-lead {
  font-family: var(--svx-font-display); font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.5rem); letter-spacing: -.03em;
  line-height: 1.5; max-width: 780px; margin-bottom: 56px;
}
.svwp .problem-foot {
  margin-top: 32px; display: flex; align-items: center; gap: 16px;
  font-size: .95rem; color: var(--svx-muted-hi); font-weight: 300;
}
.svwp .problem-foot strong { color: var(--svx-text); font-weight: 500; }

/* ═══ SECTION — pipeline (flow strip) ═══ */
.svwp .flow-strip {
  display: flex; align-items: stretch;
  background: var(--svx-surface); border: 1px solid var(--svx-border);
  border-radius: var(--svx-r); overflow: hidden;
}
.svwp .flow-step { flex: 1; padding: 28px 24px; border-right: 1px solid var(--svx-border); position: relative; }
.svwp .flow-step:last-child { border-right: none; }
.svwp .flow-step::after {
  content: '→'; position: absolute; right: -8px; top: 50%;
  transform: translateY(-50%); z-index: 2; color: var(--svx-accent); font-size: .9rem;
  background: var(--svx-surface); width: 16px; text-align: center; line-height: 16px;
  border-radius: 50%;
}
.svwp .flow-step:last-child::after { display: none; }
.svwp .flow-step h4 { font-family: var(--svx-font-display); font-weight: 800; letter-spacing: -.04em; font-size: .95rem; margin-bottom: 7px; line-height: 1.25; }
.svwp .flow-step p  { font-size: .79rem; color: var(--svx-muted-hi); font-weight: 300; line-height: 1.6; }
.svwp .flow-step q  { color: var(--svx-text); font-style: italic; }
.svwp .flow-step.hot { background: linear-gradient(180deg, rgba(var(--svx-accent-rgb), .08), rgba(var(--svx-accent-rgb), .01)); }
.svwp .flow-step.hot .flow-num { color: var(--svx-accent); }
.svwp .flow-num {
  font-family: var(--svx-font-mono); font-size: .56rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--svx-muted); margin-bottom: 10px;
}
.svwp .pipe-formats {
  margin-top: 32px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 22px 26px; border: 1px dashed var(--svx-border-hi); border-radius: var(--svx-r-sm);
  background: rgba(255,255,255,.012);
}
.svwp .pipe-formats-label {
  font-family: var(--svx-font-mono); font-size: .58rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--svx-muted); margin-right: 6px;
}
.svwp .fmt {
  font-family: var(--svx-font-mono); font-size: .68rem; letter-spacing: .5px;
  padding: 4px 10px; border-radius: 5px;
  background: var(--svx-panel); border: 1px solid var(--svx-border); color: var(--svx-muted-hi);
}

/* ═══ SECTION — statement band ═══ */
.svwp .statement-decor { position: relative; overflow: hidden; }
.svwp .statement-decor-bg {
  position: absolute; inset: 0;
  background-image: url('https://synthvision.com.br/wp-content/uploads/2026/09/scene-wireframe-transition.webp');
  background-size: cover; background-position: center;
  opacity: .22; filter: grayscale(.3) brightness(.9);
  pointer-events: none; z-index: 0;
}
.svwp .statement-decor-overlay {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(180deg, var(--svx-bg-alt) 0%, transparent 22%, transparent 78%, var(--svx-bg-alt) 100%),
    linear-gradient(90deg, var(--svx-bg-alt) 0%, transparent 30%, transparent 70%, var(--svx-bg-alt) 100%);
  pointer-events: none;
}
.svwp .statement-decor .wrap { position: relative; z-index: 1; }
.svwp .statement-band { max-width: 900px; margin: 0 auto; text-align: center; }
.svwp .statement-band .kicker { justify-content: center; }
.svwp .statement-band .big {
  font-family: var(--svx-font-display); font-weight: 800;
  font-size: clamp(1.45rem, 3.1vw, 2.45rem); letter-spacing: -.035em;
  line-height: 1.2; margin-bottom: 22px;
}
.svwp .statement-band p {
  color: var(--svx-muted-hi); font-weight: 300; font-size: 1.02rem;
  line-height: 1.78; max-width: 660px; margin: 0 auto;
}
.svwp .statement-band p + p { margin-top: 16px; }
.svwp .statement-band em { font-style: normal; color: var(--svx-accent); }

/* ═══ SVG icons — cards & beliefs (port from cluade iteration) ═══ */
.svwp .card-icon { width: 26px; height: 26px; color: var(--svx-accent); margin-bottom: 16px; }
.svwp .card-icon svg { width: 100%; height: 100%; display: block; }
.svwp .belief-icon { width: 24px; height: 24px; color: var(--svx-accent); opacity: .85; margin-bottom: 16px; }
.svwp .belief-icon svg { width: 100%; height: 100%; display: block; }

/* ═══ SECTION — simulation vs generated ═══ */
.svwp .vs-panel {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--svx-border); border-radius: var(--svx-r); overflow: hidden;
}
.svwp .vs-col { padding: 40px 36px; background: var(--svx-surface); }
.svwp .vs-col + .vs-col { border-left: 1px solid var(--svx-border); }
.svwp .vs-col--hi { background: linear-gradient(160deg, rgba(var(--svx-accent-rgb),.06) 0%, var(--svx-surface) 55%); }
.svwp .vs-col-head {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--svx-font-mono); font-size: .62rem;
  letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--svx-border);
}
.svwp .vs-col-head::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.svwp .vs-col--dim .vs-col-head { color: var(--svx-muted); }
.svwp .vs-col--hi  .vs-col-head { color: var(--svx-accent); }
.svwp .vs-list { display: flex; flex-direction: column; gap: 14px; padding-left: 0; }
.svwp .vs-list li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: .89rem; font-weight: 300; line-height: 1.65; color: var(--svx-muted-hi);
}
.svwp .vs-list li::before { content: '✕'; flex-shrink: 0; margin-top: 1px; font-size: .8rem; color: #6b6b7a; }
.svwp .vs-col--hi  .vs-list li::before { content: '✓'; color: var(--svx-accent); }
.svwp .vs-col--hi  .vs-list li { color: rgba(240,240,245,.82); }
.svwp .vs-note {
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--svx-border);
  font-size: .85rem; font-weight: 300; color: var(--svx-muted-hi); line-height: 1.7;
}
.svwp .vs-note strong { color: var(--svx-text); font-weight: 500; }

/* ═══ SECTION — custom ═══ */
.svwp .custom-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 72px; align-items: start; }
.svwp .custom-split h2 { font-family: var(--svx-font-display); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin-bottom: 22px; }
.svwp .custom-split p  { color: var(--svx-muted-hi); font-size: 1rem; font-weight: 300; line-height: 1.78; margin-bottom: 16px; }
.svwp .custom-split strong { color: var(--svx-text); font-weight: 500; }
.svwp .custom-quote {
  border-left: 2px solid var(--svx-accent); padding: 4px 0 4px 22px; margin: 28px 0;
  font-family: var(--svx-font-display); font-weight: 700; letter-spacing: -.03em;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem); line-height: 1.45; color: var(--svx-text);
}
.svwp .custom-honest {
  margin-top: 30px; padding: 22px 24px;
  background: var(--svx-panel); border: 1px solid var(--svx-border); border-radius: var(--svx-r-sm);
  font-size: .89rem; font-weight: 300; color: var(--svx-muted-hi); line-height: 1.72;
}
.svwp .custom-honest strong { color: var(--svx-text); font-weight: 500; }
.svwp .custom-list { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--svx-border); border-radius: var(--svx-r); overflow: hidden; }
.svwp .custom-item {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 22px 24px; background: var(--svx-surface);
  border-bottom: 1px solid var(--svx-border);
}
.svwp .custom-item:last-child { border-bottom: none; }
.svwp .custom-item .ci-ico {
  font-family: var(--svx-font-mono); font-size: .62rem; color: var(--svx-accent);
  flex-shrink: 0; margin-top: 3px; letter-spacing: 1px;
}
.svwp .custom-item strong { display: block; font-size: .93rem; font-weight: 500; margin-bottom: 4px; color: var(--svx-text); }
.svwp .custom-item .ci-body { font-size: .85rem; color: var(--svx-muted-hi); font-weight: 300; line-height: 1.65; }

/* ═══ SECTION — evidence ═══ */
.svwp .evidence-foot {
  margin-top: 40px; display: flex; align-items: center; gap: 16px;
  font-size: .95rem; color: var(--svx-muted-hi); font-weight: 300;
}

/* ═══ SECTION — faq ═══ */
.svwp .faq { display: flex; flex-direction: column; max-width: 840px; }
.svwp .wp-block-details.faq-item {
  border-bottom: 1px solid var(--svx-border);
  background: transparent; border-radius: 0; padding: 0;
}
.svwp .wp-block-details.faq-item summary {
  padding: 22px 0; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  font-family: var(--svx-font-display); font-weight: 700; font-size: 1rem;
  letter-spacing: -.02em; transition: color .2s; color: var(--svx-text);
}
.svwp .wp-block-details.faq-item summary::-webkit-details-marker { display: none; }
.svwp .wp-block-details.faq-item summary:hover { color: var(--svx-accent); }
.svwp .wp-block-details.faq-item summary::after {
  content: '+'; color: var(--svx-accent); font-size: 1.3rem;
  font-weight: 300; transition: transform .28s; flex-shrink: 0; line-height: 1;
}
.svwp .wp-block-details.faq-item[open] summary::after { transform: rotate(45deg); }
.svwp .faq-answer {
  color: var(--svx-muted-hi); font-size: .93rem; font-weight: 300;
  line-height: 1.78; padding-bottom: 24px; max-width: 720px;
}
.svwp .faq-answer p + p { margin-top: 12px; }
.svwp .faq-answer a { color: var(--svx-accent); }

/* ═══ CTA ═══ */
.svwp .cta-band {
  border-top: 1px solid var(--svx-border);
  background: linear-gradient(130deg, rgba(var(--svx-accent-rgb), .07) 0%, transparent 55%);
}
.svwp .cta-inner {
  display: flex; justify-content: space-between; align-items: center;
  gap: 40px; padding: 90px 48px; max-width: var(--svx-max-w); margin: 0 auto;
}
.svwp .cta-inner h3 { font-family: var(--svx-font-display); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; font-size: clamp(1.7rem, 3vw, 2.6rem); max-width: 600px; }
.svwp .cta-inner p  { color: var(--svx-muted-hi); font-size: 1rem; font-weight: 300; margin-top: 12px; }
.svwp .cta-actions { display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }

/* ═══ SECTION — hero (plugin synthvision/canvas-hero) ═══
   O plugin imprime estilos inline (text-align, max-width, object-fit…);
   onde preciso contrariar inline, uso !important — sempre escopado.
   Escopado em body:has(.svwp) e não .svwp porque o hero fica FORA do wrapper ═══ */
body:has(.svwp) .sv-canvas-hero-block { height: 360vh !important; position: relative !important; width: 100% !important; max-width: none !important; }
body:has(.svwp) .sv-canvas-hero-block .hero-sticky {
  height: 100svh !important; align-items: center !important; justify-content: flex-start !important;
  background: var(--svx-bg) !important;
}
/* o tema imprime Poppins + cor escura no body; hero vive fora do .svwp */
body:has(.svwp) .sv-canvas-hero-block .hero-sticky { color: var(--svx-text); font-family: var(--svx-font-body); }
/* o hero precisa de largura inteira: main/entry-content do tema são constrained (900px) */
body:has(.svwp) main:has(> .entry-content > .sv-canvas-hero-block) { padding: 0 !important; }
body:has(.svwp) main:has(> .entry-content > .sv-canvas-hero-block) > .entry-content { max-width: none !important; margin: 0 !important; padding: 0 !important; }
body:has(.svwp) main:has(> .entry-content > .sv-canvas-hero-block) > .entry-content > .sv-canvas-hero-block { width: 100vw !important; }
/* margens de blocos entre seções (tema adiciona margens altas) */
body:has(.svwp) .entry-content > * + * { margin-top: 0 !important; }
/* cover demo do tema escondido (o header NATIVO é visível — ver bloco HEADER NATIVO) */
body:has(.svwp) .wp-block-cover:has(~ main > .entry-content > .sv-canvas-hero-block) { display: none !important; }
body:has(.svwp) main:has(> .entry-content > .sv-canvas-hero-block) { padding-top: 0 !important; }
/* o plugin não tem vignette — recriamos o scrim lateral p/ legibilidade */
body:has(.svwp) .sv-canvas-hero-block .hero-sticky::after {
  content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,10,15,.93) 0%, rgba(10,10,15,.72) 30%, rgba(10,10,15,.18) 58%, transparent 78%),
    radial-gradient(ellipse at center, transparent 34%, rgba(10,10,15,.72) 100%),
    linear-gradient(180deg, rgba(10,10,15,.6) 0%, transparent 26%, transparent 58%, rgba(10,10,15,.92) 100%);
}
body:has(.svwp) .sv-canvas-hero-block #hero-canvas {
  /* cover (como na referência estática, §10.1): contain deixava faixas
     laterais com o --svx-bg, num preto diferente do preto do webp */
  object-fit: cover !important;
  filter: brightness(.78) contrast(1.04) !important;
  background: var(--svx-bg);
}
/* header sticky é overlay (não consome fluxo): o sticky do hero reserva o
   espaço dele via padding-top e centraliza o texto NA ÁREA LIVRE — em vez de
   centralizar na tela toda e o header cobrir o topo. `safe center` (e não
   center puro): se o conteúdo transbordar a área, alinha no TOPO em vez de
   estourar pra cima — nada é cortado nunca. Browsers sem suporte a `safe`
   ignoram a declaração e ficam com o center do plugin (comportamento antigo).
   O max() cobre o período com o sticky antigo (1.1.1), que não seta a
   variável — 96px ≈ altura real do header do tema. */
body:has(.svwp) .sv-canvas-hero-block .hero-sticky {
  align-items: safe center !important;
  box-sizing: border-box;
  padding-top: max(96px, var(--bsh-header-height, 0px));
}
body:has(.svwp) .sv-canvas-hero-block .hero-content {
  text-align: left !important;
  max-width: 800px !important;
  padding: 0 60px !important;
  margin-left: max(0px, calc((100% - var(--svx-max-w)) / 2));
}
body:has(.svwp) .sv-canvas-hero-block .hero-content .kicker {
  font-family: var(--svx-font-mono); font-size: .62rem; letter-spacing: 3px; text-transform: uppercase;
  color: var(--svx-accent); margin-bottom: 22px; text-align: left;
}
body:has(.svwp) .sv-canvas-hero-block .hero-content .kicker::before { content: '// '; opacity: .55; }
body:has(.svwp) .sv-canvas-hero-block .hero-content h1 {
  font-family: var(--svx-font-display); font-weight: 800; color: var(--svx-text);
  font-size: clamp(2.4rem, 5vw, 3.7rem); line-height: 1.02;
  letter-spacing: -.03em; margin-bottom: 22px;
}
/* PT copy runs longer than EN — keep it a notch smaller so it never overflows */
html[lang="pt-BR"] body:has(.svwp) .sv-canvas-hero-block .hero-content h1,
body:has(.svwp):lang(pt-BR) .sv-canvas-hero-block .hero-content h1 {
  font-size: clamp(1.7rem, 2.5vw, 2.7rem); line-height: 1.12;
}
body:has(.svwp) .sv-canvas-hero-block .hero-content h1 em { font-style: normal; color: var(--svx-accent); }
body:has(.svwp) .sv-canvas-hero-block .hero-content > p:not(.proofline) {
  font-family: var(--svx-font-body); color: rgba(240,240,245,.78); max-width: 600px;
  margin: 0 0 22px; font-weight: 300; line-height: 1.7; font-size: 1.14rem;
}
body:has(.svwp) .sv-canvas-hero-block .hero-content p.proofline {
  display: inline-block; border-left: 2px solid var(--svx-accent); padding-left: 14px;
  font-family: var(--svx-font-display); font-weight: 700; font-size: 1rem;
  color: rgba(255,255,255,.82); letter-spacing: -.02em; text-align: left;
  margin: 4px 0 34px;
}
body:has(.svwp) .sv-canvas-hero-block .hero-content p {
  font-family: var(--svx-font-body); color: var(--svx-text); margin: 0;
}
/* hero proof strip (métricas) — v1.1.0 do plugin canvas-hero, espelha a ref estática */
body:has(.svwp) .sv-canvas-hero-block .hero-strip {
  display: flex; flex-wrap: nowrap; gap: 0;
  margin-top: 52px; border-top: 1px solid rgba(255,255,255,.11);
  padding-top: 22px; width: 100%; max-width: 720px;
}
body:has(.svwp) .sv-canvas-hero-block .hero-strip div:first-child { padding-left: 0; text-align: left; }
body:has(.svwp) .sv-canvas-hero-block .hero-strip div {
  flex: 1 1 0; min-width: 0;
  padding: 0 26px; border-right: 1px solid rgba(255,255,255,.09);
  text-align: center;
}
body:has(.svwp) .sv-canvas-hero-block .hero-strip div:last-child { border-right: none; }
body:has(.svwp) .sv-canvas-hero-block .hero-strip b {
  display: block; font-family: var(--svx-font-display); font-size: 1.28rem;
  font-weight: 800; letter-spacing: -.04em; color: #fff;
}
body:has(.svwp) .sv-canvas-hero-block .hero-strip span {
  font-family: var(--svx-font-mono); font-size: .55rem;
  letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.42);
}
/* hero caption (legenda à direita, perto da animação) */
body:has(.svwp) .sv-canvas-hero-block .hero-caption {
  position: absolute; right: 48px; bottom: 96px;
  max-width: 300px; z-index: 10;
  display: flex; flex-direction: column; gap: 6px;
}
body:has(.svwp) .sv-canvas-hero-block .hero-caption b {
  color: #fff; font-weight: 500; font-family: var(--svx-font-display);
  font-size: .95rem; letter-spacing: -.01em; line-height: 1.35;
}
body:has(.svwp) .sv-canvas-hero-block .hero-caption span {
  font-family: var(--svx-font-body); font-weight: 300; font-size: .8rem;
  line-height: 1.6; color: rgba(255,255,255,.55);
}
/* hero scroll hint */
body:has(.svwp) .sv-canvas-hero-block .hero-hint {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: 10; font-family: var(--svx-font-mono); font-size: .55rem;
  letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.35);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
body:has(.svwp) .sv-canvas-hero-block .hero-hint::after {
  content: ''; width: 1px; height: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.4), transparent);
  animation: svxHintDrop 1.9s ease-in-out infinite;
}
@keyframes svxHintDrop { 0%,100% { opacity: .25; transform: scaleY(.6); } 50% { opacity: 1; transform: scaleY(1); } }
@media (max-width: 900px) {
  /* métricas lado a lado também no mobile (a fonte menor entra no bloco
     responsivo lá embaixo) */
  body:has(.svwp) .sv-canvas-hero-block .hero-strip { flex-wrap: nowrap; row-gap: 0; }
  body:has(.svwp) .sv-canvas-hero-block .hero-strip div { flex: 1 1 0; padding: 0 8px; }
  body:has(.svwp) .sv-canvas-hero-block .hero-caption { display: none; }
}
body:has(.svwp) .sv-canvas-hero-block .hero-btns {
  display: flex; gap: 14px; justify-content: flex-start !important; flex-wrap: wrap;
}
body:has(.svwp) .sv-canvas-hero-block .hero-btns .btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; border-radius: 8px;
  font-family: var(--svx-font-body); font-weight: 500; font-size: .95rem;
  text-decoration: none;
  transition: all .25s cubic-bezier(.23,1,.32,1); cursor: pointer; border: none; white-space: nowrap;
}
body:has(.svwp) .sv-canvas-hero-block .hero-btns .btn:hover { text-decoration: none; }
body:has(.svwp) .sv-canvas-hero-block .hero-btns .btn-primary {
  background: var(--svx-accent); color: #fff;
  box-shadow: 0 8px 28px rgba(var(--svx-accent-rgb), .25);
}
body:has(.svwp) .sv-canvas-hero-block .hero-btns .btn-primary:hover {
  transform: translateY(-2px); box-shadow: 0 14px 36px rgba(var(--svx-accent-rgb), .38);
}
body:has(.svwp) .sv-canvas-hero-block .hero-btns .btn-outline {
  border: 1px solid var(--svx-border-hi); color: var(--svx-text);
  background: rgba(255,255,255,.03); backdrop-filter: blur(8px);
}
body:has(.svwp) .sv-canvas-hero-block .hero-btns .btn-outline:hover {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22);
}

/* ═══ SECTION — demo (plugin synthvision/demo) ═══
   O plugin traz CSS próprio (.svdemo-*) com os mesmos tokens do site;
   só ajustamos o encaixe dentro do wrapper. ═══ */
.svwp .svdemo-anchor { background: var(--svx-bg); }

/* ═══ HEADER NATIVO DO TEMA (template part header) ═══
   Desde 25/09 as páginas de blocos usam o header padrão do WordPress
   (template part do tema: site-logo + wp:navigation id 6) — o .site-nav foi
   removido do conteúdo das interiores. Regras abaixo só pintam a marca;
   o cover/banner demo do tema continua escondido (regra mais abaixo).
   Obs: o CSS .site-nav das HOMES fica mais abaixo, mantido até as homes
   migrarem para o header nativo. */
body:has(.svwp) header.wp-block-template-part {
  display: block !important;
  position: sticky !important;
  top: 0;
  z-index: 1000;
}
body:has(.svwp) .header_fixed {
  background: rgba(10,10,15,.88) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
body:has(.svwp) .header_fixed .wp-block-navigation { font-family: var(--svx-font-body) !important; }
body:has(.svwp) .header_fixed .wp-block-navigation .wp-block-navigation-item__label {
  font-weight: 500; font-size: .88rem; text-transform: none;
  color: var(--svx-muted-hi); transition: color .2s;
}
body:has(.svwp) .header_fixed .wp-block-navigation .current-menu-item .wp-block-navigation-item__content,
body:has(.svwp) .header_fixed .wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--svx-text); }
body:has(.svwp) .header_fixed .wp-block-navigation .current-menu-item .wp-block-navigation-item__label { color: var(--svx-accent); }
/* overlay do menu mobile: o tema pinta com background/foreground claros —
   transparente no desktop (a classe has-background pintaria uma caixa atrás
   dos links) e surface só com o modal aberto */
body:has(.svwp) .wp-block-navigation__responsive-container.has-background-background-color {
  background: transparent !important;
}
html.has-modal-open body:has(.svwp) .wp-block-navigation__responsive-container.has-background-background-color {
  background: var(--svx-surface) !important;
}
/* container FECHADO no MOBILE (≤599px, breakpoint do burger do WP): fica
   fora da árvore de pintura — o tema usa visibility (mantém layout → alarga
   a página em ~473px e cria rolagem horizontal inútil). hidden de verdade =
   some do layout; o tema reexibe adicionando .has-modal-open no html.
   NO DESKTOP o container fechado é a nav inline: precisa ficar VISÍVEL —
   antes esta regra era global e escondia os links do menu no desktop. */
@media (max-width: 599px) {
  body:has(.svwp) .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }
  body:has(.svwp) .wp-block-navigation__responsive-container.is-menu-open {
    display: block !important;
  }
}
@media (min-width: 600px) {
  body:has(.svwp) .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: block !important;
    visibility: visible !important;
    background: transparent !important;
  }
  body:has(.svwp) .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content {
    display: flex !important;
    visibility: visible !important;
  }
}
/* X de fechar do menu: o tema pinta de preto (some no fundo escuro) */
body:has(.svwp) .wp-block-navigation__responsive-container-close svg,
body:has(.svwp) .wp-block-navigation__responsive-container-close { fill: var(--svx-text); color: var(--svx-text); stroke: var(--svx-text); }
body:has(.svwp) .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
  color: var(--svx-text); text-decoration: none;
}
body:has(.svwp) .header_fixed .wp-block-navigation__responsive-container-open svg { fill: var(--svx-text); }
/* backdrop-filter cria containing block para position:fixed — com o menu aberto
   o overlay do modal ficaria preso dentro do header (bug já existente no blog).
   Sem o blur enquanto o modal está aberto, o overlay volta ao viewport. */
html.has-modal-open .header_fixed {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ═══ HERO — responsivo (texto cabe no viewport; strip compacta) ═══ */
@media (max-width: 900px) {
  /* safe center + padding-top do header já valem no mobile (regra global):
     se o conteúdo é mais alto que a área, ele encosta no topo da área (abaixo
     do header) e flui pra baixo — sem corte. Só apertamos o paddings laterais. */
  body:has(.svwp) .sv-canvas-hero-block .hero-content {
    padding: 0 20px !important;
  }
  /* 100vh inline do plugin inclui a área atrás da barra de endereço do
     celular — o centro cai abaixo do visível e o topo some. 100svh = altura
     VISÍVEL real; browser sem suporte ignora e mantém 100vh (inline). */
  body:has(.svwp) .sv-canvas-hero-block .hero-sticky {
    height: 100svh !important;
  }
  body:has(.svwp) .sv-canvas-hero-block .hero-content h1 {
    font-size: clamp(1.45rem, 6.2vw, 2rem);
    line-height: 1.1;
    margin-bottom: 14px;
  }
  html[lang="pt-BR"] body:has(.svwp) .sv-canvas-hero-block .hero-content h1,
  body:has(.svwp):lang(pt-BR) .sv-canvas-hero-block .hero-content h1 {
    font-size: clamp(1.3rem, 5.4vw, 1.75rem);
  }
  body:has(.svwp) .sv-canvas-hero-block .hero-content .kicker { margin-bottom: 14px; }
  body:has(.svwp) .sv-canvas-hero-block .hero-content > p:not(.proofline) {
    font-size: .98rem; line-height: 1.55; margin-bottom: 14px;
  }
  body:has(.svwp) .sv-canvas-hero-block .hero-content p.proofline {
    font-size: .9rem; margin: 2px 0 20px;
  }
  body:has(.svwp) .sv-canvas-hero-block .hero-btns { gap: 10px; }
  body:has(.svwp) .sv-canvas-hero-block .hero-btns .btn {
    padding: 12px 20px; font-size: .88rem;
  }
  body:has(.svwp) .sv-canvas-hero-block .hero-strip {
    margin-top: 28px; padding-top: 16px;
  }
  body:has(.svwp) .sv-canvas-hero-block .hero-strip b { font-size: 1.05rem; }
  body:has(.svwp) .sv-canvas-hero-block .hero-strip span { font-size: .5rem; letter-spacing: 1px; }
  /* strip em 1 LINHA (4 colunas) com fonte reduzida — não estoura altura */
  body:has(.svwp) .sv-canvas-hero-block .hero-strip div { flex: 1 1 0; padding: 0 5px; }
  body:has(.svwp) .sv-canvas-hero-block .hero-strip b { font-size: .95rem; }
  body:has(.svwp) .sv-canvas-hero-block .hero-strip span { font-size: .45rem; letter-spacing: .5px; line-height: 1.6; }
}

/* ═══ HERO — aperto vertical ≤700px (o conteúdo tem que CABER inteiro no
   sticky: com safe center o excesso corta embaixo — a faixa de métricas
   sumia). PT roda mais longo que EN: clamp ainda menor. ═══ */
@media (max-width: 700px) {
  body:has(.svwp) .sv-canvas-hero-block .hero-content { padding: 0 16px !important; }
  body:has(.svwp) .sv-canvas-hero-block .hero-content .kicker { font-size: .55rem; margin-bottom: 10px; }
  body:has(.svwp) .sv-canvas-hero-block .hero-content h1 {
    font-size: clamp(1.2rem, 5.2vw, 1.65rem);
    margin-bottom: 10px;
  }
  html[lang="pt-BR"] body:has(.svwp) .sv-canvas-hero-block .hero-content h1,
  body:has(.svwp):lang(pt-BR) .sv-canvas-hero-block .hero-content h1 {
    font-size: clamp(1.08rem, 4.6vw, 1.5rem);
  }
  body:has(.svwp) .sv-canvas-hero-block .hero-content > p:not(.proofline) {
    font-size: .9rem; line-height: 1.5; margin-bottom: 10px;
  }
  body:has(.svwp) .sv-canvas-hero-block .hero-content p.proofline { font-size: .82rem; margin: 0 0 12px; }
  body:has(.svwp) .sv-canvas-hero-block .hero-btns { gap: 8px; }
  body:has(.svwp) .sv-canvas-hero-block .hero-btns .btn { padding: 9px 15px; font-size: .8rem; }
  body:has(.svwp) .sv-canvas-hero-block .hero-strip { margin-top: 14px; padding-top: 10px; }
  body:has(.svwp) .sv-canvas-hero-block .hero-strip b { font-size: .8rem; }
  body:has(.svwp) .sv-canvas-hero-block .hero-strip span { font-size: .4rem; line-height: 1.5; }
}
@media (max-height: 760px) {
  /* notebooks baixos / paisagem: aperta verticalmente pra tudo caber */
  body:has(.svwp) .sv-canvas-hero-block .hero-content .kicker { margin-bottom: 10px; }
  body:has(.svwp) .sv-canvas-hero-block .hero-content h1 { margin-bottom: 12px; }
  body:has(.svwp) .sv-canvas-hero-block .hero-content > p:not(.proofline) { margin-bottom: 12px; }
  body:has(.svwp) .sv-canvas-hero-block .hero-content p.proofline { margin-bottom: 14px; }
  body:has(.svwp) .sv-canvas-hero-block .hero-strip { margin-top: 20px; padding-top: 12px; }
  body:has(.svwp) .sv-canvas-hero-block .hero-strip b { font-size: .95rem; }
  body:has(.svwp) .sv-canvas-hero-block .hero-btns .btn { padding: 10px 18px; font-size: .85rem; }
}
@media (max-width: 700px) {
  /* 4 colunas estreitas: labels quebram DENTRO da célula — nowrap estouraria */
  body:has(.svwp) .sv-canvas-hero-block .hero-strip span { white-space: normal; }
  body:has(.svwp) .sv-canvas-hero-block .hero-strip div { padding: 0 4px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   §17 — HERO MOBILE: legenda visível + métricas dentro da tela
   (a) A legenda da animação (.hero-caption) era display:none ≤900px;
       volta como bloco compacto ABAIXO do conteúdo: o .hero-sticky vira
       coluna (justify-content safe center — se o conjunto não couber,
       alinha no topo em vez de cortar em cima) e a legenda entra no fluxo,
       centralizada, logo após as métricas.
   (b) ≤700px: métricas ainda mais compactas (valores e labels) e respiros
       reduzidos — os labels de 3 linhas não podem estourar pela base.
   (c) .hero-hint ("role") some no ≤700px: com o conteúdo alto ele fica
       sobreposto às métricas.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  body:has(.svwp) .sv-canvas-hero-block .hero-sticky {
    flex-direction: column;
    /* em coluna o eixo vertical é o main axis: flex-start + margens auto
       no conteúdo/legenda = centrado quando cabe, alinhado no TOPO quando
       estoura (nada cortado). Diferente de `safe center`, margens auto têm
       suporte universal — inclusive Safari/iOS, que não implementa `safe`. */
    justify-content: flex-start !important;
  }
  body:has(.svwp) .sv-canvas-hero-block .hero-content {
    margin-top: auto !important; /* absorve o espaço livre de cima */
    margin-bottom: 0 !important;
  }
  body:has(.svwp) .sv-canvas-hero-block .hero-caption {
    display: flex;
    position: static;
    max-width: 460px;
    margin: 16px auto auto; /* bottom auto absorve o espaço de baixo — o grupo inteiro fica centrado */
    padding: 0 20px;
    gap: 2px;
    text-align: left;
  }
  body:has(.svwp) .sv-canvas-hero-block .hero-caption b { font-size: .8rem; line-height: 1.3; }
  body:has(.svwp) .sv-canvas-hero-block .hero-caption span { font-size: .62rem; line-height: 1.5; }
}
@media (max-width: 700px) {
  body:has(.svwp) .sv-canvas-hero-block .hero-hint { display: none; }
  body:has(.svwp) .sv-canvas-hero-block .hero-caption { margin-top: 12px; padding: 0 16px; }
  body:has(.svwp) .sv-canvas-hero-block .hero-caption b { font-size: .74rem; }
  body:has(.svwp) .sv-canvas-hero-block .hero-caption span { font-size: .58rem; }
  /* métricas: aperto extra — valor e labels, sem estourar a base da tela */
  body:has(.svwp) .sv-canvas-hero-block .hero-strip { margin-top: 10px; padding-top: 8px; }
  body:has(.svwp) .sv-canvas-hero-block .hero-strip b { font-size: .74rem; }
  body:has(.svwp) .sv-canvas-hero-block .hero-strip span { font-size: .38rem; line-height: 1.35; letter-spacing: .3px; }
  body:has(.svwp) .sv-canvas-hero-block .hero-strip div { padding: 0 3px; }
  body:has(.svwp) .sv-canvas-hero-block .hero-content h1 { margin-bottom: 8px; }
  body:has(.svwp) .sv-canvas-hero-block .hero-content > p:not(.proofline) { margin-bottom: 8px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   §18 — BLOG MOBILE: posts primeiro, sidebar rebaixada, arquivo fora
   As colunas do tema (sidebar 33% + query 66%) empilham na ordem do DOM:
   no mobile a sidebar (busca/arquivo/…) aparecia ANTES dos posts.
   ≤900px: as colunas viram column-reverse (posts no topo, sidebar desce
   pro fim) e o widget de ARQUIVO some (lista longa de meses, pouco uso no
   celular — busca, categorias, posts recentes, tags e redes continuam).
   Escopado a body:not(:has(.svwp)): o blog NUNCA tem .svwp (nota §16) e
   as páginas de blocos nunca recebem estas regras. O card do widget é o
   grupo .has-background que CONTÉM .wp-block-archives (:has cobre heading
   + conteúdo, sem depender de classes geradas pelo tema).
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  body:not(:has(.svwp)) .wp-block-columns:has(.wp-block-query) {
    flex-direction: column-reverse;
    flex-wrap: nowrap;
  }
  body:not(:has(.svwp)) .wp-block-columns:has(.wp-block-query) > .wp-block-column {
    flex-basis: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body:not(:has(.svwp)) .wp-block-group.has-background:has(.wp-block-archives) {
    display: none;
  }
}

/* ═══ FUNDO RAIZ — o tema deixa html/body transparentes (= branco do
   navegador): qualquer fresta de subpixel em volta do footer, o bounce/
   overscroll da rolagem e páginas a meio render mostravam faixa/canela
   clara. O site é dark integral — pinta a raiz do mesmo preto do rodapé. ═══ */
html, body { background-color: #0A0A0F; }
/* scrollbar/overscroll/inputs nativos no esquema escuro: sem isto a barra
   de rolagem fica BRANCA (track claro) e parece uma linha clara ao lado do
   footer no fim da página */
html { color-scheme: dark; }

/* ═══ BLOG HERO (templates blog-listing / -en — renderiza o conteúdo da página:
   kicker READING + título + subtítulo) no lugar do cover claro do tema ═══ */
.svwp .blog-hero { background: var(--svx-bg); border-bottom: 1px solid var(--svx-border); }
.svwp .blog-hero h2 {
  font-family: var(--svx-font-display); font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.02em;
  color: var(--svx-text); margin: 0 0 12px;
}
.svwp .blog-hero p {
  color: var(--svx-muted-hi); font-family: var(--svx-font-body); font-weight: 300;
  line-height: 1.7; max-width: 640px; margin: 0;
}
.svwp .blog-hero p strong {
  color: var(--svx-accent); font-family: var(--svx-font-mono); font-weight: 500;
  letter-spacing: 2px; font-size: .72rem; text-transform: uppercase;
}

/* ═══ PAGE HERO (services / about / cases) ═══
   Header nativo = overlay (não consome fluxo) e o h1 da referência (70px/7 linhas)
   empurrava subtítulo+tags pra fora da primeira dobra. Compactado 25/09:
   título clamp menor (3 linhas) e respiros reduzidos — kicker+título+lead+tags
   cabem num viewport de laptop. */
.svwp .page-hero { padding: 72px 0 64px; border-bottom: 1px solid var(--svx-border); position: relative; overflow: hidden; }
.svwp .page-hero::before {
  content: ''; position: absolute; top: -200px; right: -200px;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--svx-accent-rgb), .07) 0%, transparent 70%);
  pointer-events: none;
}
.svwp .page-hero h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); margin-bottom: 20px; max-width: 880px; }
.svwp .page-hero p  { font-size: 1.1rem; color: var(--svx-muted-hi); max-width: 620px; font-weight: 300; line-height: 1.7; margin-bottom: 28px; }
.svwp .page-hero-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.svwp .page-hero-tags p { display: inline-block; width: auto; margin: 0; }
.svwp .tag {
  font-family: var(--svx-font-mono); font-size: .62rem; letter-spacing: 1.5px;
  padding: 5px 12px; border-radius: 100px;
  border: 1px solid var(--svx-border); color: var(--svx-muted-hi); text-transform: uppercase;
}

/* ═══ CARDS + GRIDS ═══ */
.svwp .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.svwp .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.svwp .card {
  background: var(--svx-surface); border: 1px solid var(--svx-border);
  border-radius: var(--svx-r); padding: 32px;
  position: relative; overflow: hidden;
  transition: border-color .28s, transform .28s;
}
.svwp .card:hover { border-color: rgba(var(--svx-accent-rgb), .35); transform: translateY(-2px); }
.svwp .card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(var(--svx-accent-rgb), .04) 0%, transparent 60%);
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.svwp .card:hover::before { opacity: 1; }
.svwp .card-num { font-family: var(--svx-font-mono); font-size: .6rem; letter-spacing: 1px; color: var(--svx-accent); opacity: .5; margin-bottom: 14px; }
.svwp .card h3 { font-size: 1.1rem; margin-bottom: 10px; }
.svwp .card p  { color: var(--svx-muted-hi); font-size: .9rem; font-weight: 300; line-height: 1.7; }

/* ═══ SERVICE CARDS ═══ */
.svwp .service-card {
  background: var(--svx-surface); border: 1px solid var(--svx-border);
  border-radius: var(--svx-r); padding: 32px; transition: border-color .28s, transform .28s;
  display: flex; flex-direction: column;
}
.svwp .service-card:hover { border-color: rgba(var(--svx-accent-rgb), .35); transform: translateY(-2px); }
.svwp .service-card .service-icon { font-size: 1.7rem; line-height: 1.25; margin: 0 0 16px; color: var(--svx-text); }
.svwp .service-card h3 { font-size: 1.05rem; margin-bottom: 10px; }
.svwp .service-card p  { color: var(--svx-muted-hi); font-size: .88rem; font-weight: 300; line-height: 1.7; margin-bottom: 18px; flex: 1; }
.svwp .service-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.svwp .service-tags p { margin: 0; }
.svwp .service-tags .service-tag {
  font-family: var(--svx-font-mono); font-size: .56rem; line-height: 1.4;
  letter-spacing: 1px; padding: 4px 9px; border-radius: 100px; margin: 0;
  border: 1px solid var(--svx-border); color: var(--svx-muted-hi); text-transform: uppercase;
}
.svwp .service-card--wide { grid-column: 1 / -1; }
.svwp .service-card--wide p { max-width: 88ch; }

/* ═══ PROCESS ═══ */
.svwp .process-list { display: flex; flex-direction: column; max-width: 900px; }
.svwp .process-step {
  display: grid; grid-template-columns: 80px 1fr; gap: 40px;
  align-items: start; padding: 48px 0; border-bottom: 1px solid var(--svx-border);
}
.svwp .process-step:last-child { border-bottom: none; }
.svwp .step-num {
  font-family: var(--svx-font-display); font-size: 3.5rem; font-weight: 800;
  letter-spacing: -.06em; color: rgba(var(--svx-accent-rgb), .16); line-height: 1;
}
.svwp .step-body h3 { font-size: 1.2rem; margin-bottom: 12px; }
.svwp .step-body > p { color: var(--svx-muted-hi); font-size: .95rem; font-weight: 300; line-height: 1.75; }
.svwp .step-body ul { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.svwp .step-body li { display: flex; align-items: flex-start; gap: 10px; font-size: .88rem; color: var(--svx-muted-hi); font-weight: 300; }
.svwp .step-body li::before { content: '→'; color: var(--svx-accent); flex-shrink: 0; margin-top: 1px; }

/* ═══ CASE BLOCKS ═══ */
.svwp .cases-list { display: flex; flex-direction: column; gap: 22px; }
/* wide render slot — spans the case body until real imagery exists */
.svwp .case-image {
  grid-column: 1 / -1; height: 210px;
  background: var(--svx-panel); border-bottom: 1px solid var(--svx-border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--svx-font-mono); font-size: .6rem; color: var(--svx-muted);
  letter-spacing: 1.2px; text-align: center; padding: 20px;
  position: relative; overflow: hidden;
}
.svwp .case-image::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 40px 40px;
}
.svwp .case-image span { position: relative; }
.svwp .case-block { background: var(--svx-surface); border: 1px solid var(--svx-border); border-radius: var(--svx-r); overflow: hidden; transition: border-color .3s; }
.svwp .case-block:hover { border-color: rgba(var(--svx-accent-rgb), .3); }
.svwp .case-header { display: grid; grid-template-columns: 1fr auto; align-items: start; padding: 48px; gap: 40px; }
.svwp .case-domain {
  font-family: var(--svx-font-mono); font-size: .62rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--svx-accent); margin-bottom: 12px;
}
.svwp .case-header h2 { font-size: clamp(1.4rem, 2.5vw, 2rem); margin-bottom: 12px; }
.svwp .case-header p { color: var(--svx-muted-hi); font-size: .95rem; font-weight: 300; line-height: 1.7; max-width: 620px; }
.svwp .case-body { border-top: 1px solid var(--svx-border); display: grid; grid-template-columns: repeat(3, 1fr); }
.svwp .case-col { padding: 36px 40px; border-right: 1px solid var(--svx-border); }
.svwp .case-col:last-child { border-right: none; }
.svwp .case-col-label {
  font-family: var(--svx-font-mono); font-size: .6rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--svx-muted); margin-bottom: 14px;
}
.svwp .case-col p { color: var(--svx-muted-hi); font-size: .87rem; font-weight: 300; line-height: 1.7; }
.svwp .case-col ul { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.svwp .case-col li { display: flex; align-items: flex-start; gap: 8px; font-size: .87rem; color: var(--svx-muted-hi); font-weight: 300; line-height: 1.6; }
.svwp .case-col li::before { content: '→'; color: var(--svx-accent); flex-shrink: 0; font-size: .8rem; }
.svwp .case-note {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--svx-panel); border: 1px solid var(--svx-border);
  border-radius: var(--svx-r-sm); padding: 20px 24px; margin-top: 40px; max-width: 780px;
}
.svwp .case-note-icon { font-size: 1rem; flex-shrink: 0; margin-top: 2px; }
.svwp .case-note p { color: var(--svx-muted-hi); font-size: .85rem; font-weight: 300; line-height: 1.7; }

/* ═══ FOUNDER / ORIGIN ═══ */
.svwp .founder-split { display: grid; grid-template-columns: 1fr 1.15fr; gap: 72px; align-items: start; }
.svwp .founder-card {
  background: var(--svx-surface); border: 1px solid var(--svx-border);
  border-radius: var(--svx-r); overflow: hidden; position: sticky; top: 120px;
}
.svwp .founder-photo { width: 100%; min-height: 300px; background: var(--svx-panel); border-bottom: 1px solid var(--svx-border); display: flex; align-items: center; justify-content: center; }
.svwp .founder-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svwp .founder-photo .ph-label { font-family: var(--svx-mono, monospace); font-size: .62rem; color: var(--svx-muted); letter-spacing: 1.5px; text-align: center; padding: 20px; }
.svwp .wp-block-image { margin: 0; }
.svwp .founder-body { padding: 32px; }
.svwp .founder-role {
  font-family: var(--svx-font-mono); font-size: .62rem;
  letter-spacing: 2px; text-transform: uppercase; color: var(--svx-accent); margin-bottom: 8px;
}
.svwp .founder-body h3 { font-size: 1.5rem; margin-bottom: 16px; }
.svwp .founder-body p  { color: var(--svx-muted-hi); font-size: .9rem; font-weight: 300; line-height: 1.75; margin-bottom: 14px; }
.svwp .founder-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.svwp .founder-link {
  font-family: var(--svx-font-mono); font-size: .6rem; letter-spacing: 1.5px;
  padding: 7px 14px; border-radius: 6px; border: 1px solid var(--svx-border);
  color: var(--svx-muted-hi); text-transform: uppercase; transition: all .2s;
}
.svwp .founder-link:hover { border-color: var(--svx-accent); color: var(--svx-accent); }
.svwp .origin-text h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin-bottom: 24px; }
.svwp .origin-text p  { color: var(--svx-muted-hi); font-size: 1rem; font-weight: 300; line-height: 1.8; margin-bottom: 18px; }
.svwp .origin-text strong { color: var(--svx-text); font-weight: 500; }
.svwp .origin-text .wp-block-quote {
  border-left: 2px solid var(--svx-accent); padding: 0 0 0 20px; margin: 30px 0;
  font-family: var(--svx-font-display); font-weight: 700; letter-spacing: -.03em;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.5; background: none;
}
.svwp .origin-text .wp-block-quote > p { color: var(--svx-text); margin: 0; }

/* ═══ BELIEF CARDS ═══ */
.svwp .belief-card {
  background: var(--svx-surface); border: 1px solid var(--svx-border);
  border-radius: var(--svx-r); padding: 32px; border-top: 2px solid var(--svx-accent);
}
.svwp .belief-card h3 { font-size: 1rem; margin-bottom: 10px; line-height: 1.3; }
.svwp .belief-card p  { color: var(--svx-muted-hi); font-size: .87rem; font-weight: 300; line-height: 1.72; }

/* ═══ CONTACT ═══ */
.svwp .contact-wrap {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: start; padding: 72px 48px 96px;
  /* no port perdeu a classe .wrap (era "wrap contact-wrap" no estático) —
     repomos aqui o container centralizado */
  max-width: var(--svx-max-w); margin-left: auto; margin-right: auto;
}
.svwp .contact-context h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); margin-bottom: 24px; }
.svwp .contact-context p  { color: var(--svx-muted-hi); font-size: 1rem; font-weight: 300; line-height: 1.8; margin-bottom: 16px; }
.svwp .contact-context strong { color: var(--svx-text); font-weight: 500; }
.svwp .what-happens {
  margin-top: 40px; background: var(--svx-surface); border: 1px solid var(--svx-border);
  border-radius: var(--svx-r); padding: 32px;
}
.svwp .what-happens h3 {
  font-family: var(--svx-font-mono); font-size: .65rem;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--svx-muted); margin-bottom: 24px;
}
.svwp .wh-step {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 14px 0; border-bottom: 1px solid var(--svx-border);
}
.svwp .wh-step:last-child { border-bottom: none; padding-bottom: 0; }
.svwp .wh-num {
  width: 24px; height: 24px; flex-shrink: 0;
  background: rgba(var(--svx-accent-rgb), .1); color: var(--svx-accent);
  border-radius: 5px; font-family: var(--svx-font-mono);
  font-size: .65rem; display: flex; align-items: center; justify-content: center;
}
.svwp .wh-step strong { display: block; font-size: .9rem; font-weight: 500; margin-bottom: 3px; }
.svwp .wh-text { font-size: .83rem; color: var(--svx-muted-hi); font-weight: 300; }
.svwp .direct-links { margin-top: 32px; display: flex; flex-direction: column; gap: 10px; }
.svwp .direct-link {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; border-radius: var(--svx-r-sm);
  border: 1px solid var(--svx-border); background: var(--svx-surface);
  transition: border-color .2s, background .2s;
}
.svwp .direct-link:hover { border-color: rgba(var(--svx-accent-rgb), .4); background: var(--svx-panel); }
.svwp .dl-icon { font-size: 1.2rem; }
.svwp .dl-text { flex: 1; }
.svwp .dl-text strong { display: block; font-size: .9rem; font-weight: 500; margin-bottom: 2px; color: var(--svx-text); }
.svwp .dl-text .dl-sub { font-size: .82rem; color: var(--svx-muted-hi); font-weight: 300; }
.svwp .dl-arrow { margin-left: auto; color: var(--svx-muted); font-size: .8rem; }
.svwp .contact-form-wrap {
  position: sticky; top: 100px;
  background: var(--svx-surface); border: 1px solid var(--svx-border);
  border-radius: var(--svx-r); overflow: hidden;
}
.svwp .form-header { padding: 28px 32px; border-bottom: 1px solid var(--svx-border); background: var(--svx-panel); }
.svwp .form-header h2 { font-size: 1.2rem; margin-bottom: 4px; }
.svwp .form-header p  { color: var(--svx-muted-hi); font-size: .85rem; font-weight: 300; margin: 0; }
.svwp .form-body { padding: 32px; }
.svwp .form-group { margin-bottom: 20px; }
.svwp .form-label {
  display: block; font-family: var(--svx-font-mono);
  font-size: .62rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--svx-muted-hi); margin-bottom: 8px;
}
.svwp .form-input, .svwp .form-select, .svwp .form-textarea {
  width: 100%; padding: 13px 16px;
  background: var(--svx-panel); border: 1px solid var(--svx-border);
  border-radius: var(--svx-r-sm); color: var(--svx-text);
  font-family: var(--svx-font-body); font-size: .9rem; font-weight: 300;
  transition: border-color .2s; outline: none;
  appearance: none;
}
.svwp .form-input:focus, .svwp .form-select:focus, .svwp .form-textarea:focus { border-color: rgba(var(--svx-accent-rgb), .5); }
.svwp .form-input::placeholder, .svwp .form-textarea::placeholder { color: var(--svx-muted); }
.svwp .form-select { cursor: pointer; }
.svwp .form-select option { background: var(--svx-panel); }
.svwp .form-textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.svwp .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.svwp .form-submit {
  width: 100%; padding: 16px;
  background: var(--svx-accent); color: #fff; border: none;
  border-radius: var(--svx-r-sm); font-family: var(--svx-font-display);
  font-size: 1rem; font-weight: 700; letter-spacing: -.02em;
  cursor: pointer; transition: all .25s;
  box-shadow: 0 8px 24px rgba(var(--svx-accent-rgb), .25);
  margin-top: 8px;
}
.svwp .form-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(var(--svx-accent-rgb), .38); }
.svwp .form-note { text-align: center; margin-top: 16px; font-size: .78rem; color: var(--svx-muted); font-weight: 300; }
.svwp .form-success { display: none; padding: 40px 32px; text-align: center; }
.svwp .form-success h3 { font-size: 1.4rem; margin-bottom: 12px; }
.svwp .form-success p  { color: var(--svx-muted-hi); font-size: .9rem; font-weight: 300; line-height: 1.7; }
.svwp .success-icon { font-size: 2.5rem; margin-bottom: 16px; }

/* ═══ LEGAL (terms / privacy) ═══ */
.svwp .legal-page { padding: 72px 0 96px; }
.svwp .legal-page h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); margin: 14px 0 10px; }
.svwp .legal-meta {
  font-family: var(--svx-font-mono); font-size: .72rem; letter-spacing: 1px;
  color: var(--svx-muted-hi); margin-bottom: 48px;
}
.svwp .legal-body { max-width: 780px; }
.svwp .legal-body h2 {
  font-family: var(--svx-font-display); font-size: 1.15rem; font-weight: 700;
  margin: 40px 0 12px; padding-top: 24px; border-top: 1px solid var(--svx-border);
  letter-spacing: -.02em;
}
.svwp .legal-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.svwp .legal-body p, .svwp .legal-body li {
  font-size: .95rem; line-height: 1.75; color: var(--svx-muted-hi); font-weight: 300;
}
.svwp .legal-body p { margin-bottom: 14px; }
.svwp .legal-body b, .svwp .legal-body strong { color: var(--svx-text); font-weight: 500; }
.svwp .legal-body ul { margin: 0 0 14px 0; display: grid; gap: 8px; list-style: none; padding-left: 0; }
.svwp .legal-body li { padding-left: 18px; position: relative; }
.svwp .legal-body li::before { content: "→"; position: absolute; left: 0; color: var(--svx-accent); font-weight: 500; }
.svwp .legal-body a { color: var(--svx-accent); text-decoration: none; border-bottom: 1px solid transparent; }
.svwp .legal-body a:hover { border-bottom-color: var(--svx-accent); }

/* ═══════════════════════════════════════════════════════════════════════
   BLOG / POSTS / ARCHIVE / SEARCH / 404 — fora do .svwp
   Escopo: body:not(:has(.svwp)) — templates do tema (blog-listing, single,
   archive, search, 404). Mesmos tokens/marca, sem afetar as páginas de
   blocos (que contêm .svwp e têm escopo próprio).
   ═══════════════════════════════════════════════════════════════════════ */
body:not(:has(.svwp)) {
  background: #0A0A0F !important;
  color: var(--svx-text);
  font-family: var(--svx-font-body);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: clip; /* clip (não hidden): hidden quebra sticky no mobile */

  /* tokens no body: as páginas de blog NÃO têm .svwp — sem isto todas as
     vars abaixo resolvem vazias (bug silencioso de cor/fundo) */
  --svx-bg:         #0A0A0F;
  --svx-bg-alt:     #0F0F16;
  --svx-surface:    #13131A;
  --svx-panel:      #1A1A24;
  --svx-border:     rgba(255, 255, 255, 0.07);
  --svx-border-hi:  rgba(255, 255, 255, 0.14);
  --svx-text:       #F0F0F5;
  --svx-muted:      #5A5A6A;
  --svx-muted-hi:   #888896;
  --svx-accent:     #FF4D1C;
  --svx-accent-rgb: 255, 77, 28;
  --svx-max-w:      1240px;
  --svx-r:          20px;
  --svx-r-sm:       12px;
  --svx-font-display: 'Syne', sans-serif;
  --svx-font-body:    'DM Sans', sans-serif;
  --svx-font-mono:    'DM Mono', monospace;
}

/* ── header fixo do tema (site-logo + nav) ──
   Fundo IGUAL ao da página (mesmo --svx-bg, sem blur): com rgba+blur ele
   escurecia o hero do blog atrás do header (faixa mais escura que o resto). */
body:not(:has(.svwp)) .header_fixed {
  background: var(--svx-bg) !important;
}
/* ═══ PARIDADE DA NAV: blog / posts / archive / search / 404 ═══
   O header nativo aqui é o MESMO template part das páginas de blocos
   (site-logo + wp:navigation), mas o escopo :has(.svwp) pinta a marca
   apenas nas páginas — no blog sobravam: fonte/peso/tamanho padrão do
   tema nos links (capitalize, 300, 16px), item ativo sem destaque,
   hamburger sem cor da marca e o container do menu mobile pintado de
   cinza-claro. Regras abaixo espelham 1:1 o bloco :has(.svwp). */
body:not(:has(.svwp)) .header_fixed .wp-block-navigation { font-family: var(--svx-font-body) !important; }
body:not(:has(.svwp)) .header_fixed .wp-block-navigation .wp-block-navigation-item__label {
  font-weight: 500; font-size: .88rem; text-transform: none;
  color: var(--svx-muted-hi); transition: color .2s;
}
body:not(:has(.svwp)) .header_fixed .wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--svx-text); }
/* página atual em destaque (mesmo comportamento do .current-menu-item nas páginas) */
body:not(:has(.svwp)) .header_fixed .wp-block-navigation .current-menu-item .wp-block-navigation-item__content,
body:not(:has(.svwp)) .header_fixed .wp-block-navigation .current-menu-item .wp-block-navigation-item__label { color: var(--svx-accent); }
body:not(:has(.svwp)) .header_fixed .wp-block-navigation__responsive-container-open svg { fill: var(--svx-text); }
/* language switch (EN/PT) — mesmo estilo nas páginas de blocos e no blog;
   item é reescrito server-side pelo block-sticky-header v1.1.0 + Polylang */
body:has(.svwp) .header_fixed .wp-block-navigation .lang-switch .wp-block-navigation-item__label,
body:not(:has(.svwp)) .header_fixed .wp-block-navigation .lang-switch .wp-block-navigation-item__label {
  font-family: var(--svx-font-mono) !important; font-size: .72rem !important;
  font-weight: 500; letter-spacing: 1px; color: var(--svx-muted-hi);
  padding: 5px 10px; border: 1px solid var(--svx-border-hi); border-radius: 6px;
}
body:has(.svwp) .header_fixed .wp-block-navigation .lang-switch:hover .wp-block-navigation-item__label,
body:not(:has(.svwp)) .header_fixed .wp-block-navigation .lang-switch:hover .wp-block-navigation-item__label {
  color: var(--svx-accent); border-color: rgba(var(--svx-accent-rgb), .4);
}
/* overlay do menu mobile: transparente no desktop; surface só com o modal
   aberto — o tema pinta com background/foreground claros */
body:not(:has(.svwp)) .wp-block-navigation__responsive-container.has-background-background-color {
  background: transparent !important;
}
html.has-modal-open body:not(:has(.svwp)) .wp-block-navigation__responsive-container.has-background-background-color {
  background: var(--svx-surface) !important;
}
body:not(:has(.svwp)) .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
  color: var(--svx-text); text-decoration: none;
}
/* blur cria containing block p/ position:fixed — sem ele o overlay do modal
   volta ao viewport (mesma correção do escopo das páginas) */
html.has-modal-open body:not(:has(.svwp)) .header_fixed {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* logo do site no header: contém a altura (a imagem nativa pode ser grande —
   no blog ela renderizava em tamanho cheio e transbordava no mobile) */
body:not(:has(.svwp)) .header_fixed .wp-block-site-logo img { max-height: 48px; width: auto; }

/* ── hero-banner (cover com kicker + título, canto inferior esquerdo) ── */
body:not(:has(.svwp)) .wp-block-cover {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  background: var(--svx-bg-alt);
}
/* cover do blog SEM imagem desde 25/09 (attrs + img removidos no template) —
   sobra o overlay preto como fundo liso da marca */
body:not(:has(.svwp)) .wp-block-cover { background: var(--svx-bg-alt); }
body:not(:has(.svwp)) .wp-block-cover .wp-block-cover__inner-container {
  width: 100%; max-width: var(--svx-max-w); margin: 0 auto; padding: 0 48px 56px;
  z-index: 1;
}
body:not(:has(.svwp)) .wp-block-cover .svb-kicker {
  font-family: var(--svx-font-mono); font-size: .68rem; letter-spacing: 2.5px;
  color: var(--svx-accent) !important; text-transform: uppercase; margin: 0 0 12px;
}
/* o tema pinta os headings da sidebar com preto (pírus herança de cor) —
   e .wp-block-cover p centra o título do hero, que a referência alinha à esquerda */
body:not(:has(.svwp)) .wp-block-cover .wp-block-cover__inner-container { text-align: left; }
body:not(:has(.svwp)) .wp-block-cover .has-text-align-center { text-align: left !important; }  /* grupo do post-title vem com has-text-align-center do template */
body:not(:has(.svwp)) .wp-block-cover .is-content-justification-center { justify-content: flex-start !important; text-align: left; }  /* parágrafo do hero centralizado pelo layout flex */
body:not(:has(.svwp)) .wp-block-column .wp-block-heading,
body:not(:has(.svwp)) .wp-block-column h2,
body:not(:has(.svwp)) .wp-block-column h3 { color: var(--svx-text) !important; }
body:not(:has(.svwp)) .wp-block-cover .wp-block-post-title,
body:not(:has(.svwp)) .wp-block-cover .wp-block-query-title {
  text-align: left !important;
  font-family: var(--svx-font-display); font-weight: 800; color: var(--svx-text) !important;
  font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.08; letter-spacing: -.03em;
  max-width: 900px; margin: 0;
}
body:not(:has(.svwp)) .wp-block-cover .wp-block-cover__inner-container p {
  font-weight: 300; color: var(--svx-muted-hi); text-align: left; font-size: 1rem;
  margin: 10px 0 0;
}

/* ── tipografia base do conteúdo ── */
body:not(:has(.svwp)) h1, body:not(:has(.svwp)) h2, body:not(:has(.svwp)) h3,
body:not(:has(.svwp)) h4, body:not(:has(.svwp)) h5, body:not(:has(.svwp)) h6 {
  font-family: var(--svx-font-display); color: var(--svx-text);
  letter-spacing: -.02em; font-weight: 700;
}
body:not(:has(.svwp)) p, body:not(:has(.svwp)) li { color: var(--svx-muted-hi); font-weight: 300; }
body:not(:has(.svwp)) a { color: var(--svx-accent); text-decoration: none; }
body:not(:has(.svwp)) a:hover { color: var(--svx-text); }

/* ── cards do loop (post-template) ── */
body:not(:has(.svwp)) .wp-block-post-template .wp-block-group[class*="has-background"] {
  background: var(--svx-surface) !important;
  border: 1px solid var(--svx-border);
  border-radius: var(--svx-r);
  overflow: hidden;
  transition: border-color .25s, transform .25s;
}
body:not(:has(.svwp)) .wp-block-post-template .wp-block-group[class*="has-background"]:hover {
  border-color: rgba(var(--svx-accent-rgb), .35);
  transform: translateY(-2px);
}
body:not(:has(.svwp)) .wp-block-post-template .wp-block-group.has-background-secondary-background-color {
  border-top: 1px solid var(--svx-border);
  border-radius: 0;
}
body:not(:has(.svwp)) .wp-block-post-template .wp-block-post-title { font-size: 1.1rem; }
body:not(:has(.svwp)) .wp-block-post-template .wp-block-post-title a,
body:not(:has(.svwp)) .wp-block-post-template .wp-block-post-author a,
body:not(:has(.svwp)) .wp-block-post-template .wp-block-post-date a { color: inherit; }
body:not(:has(.svwp)) .wp-block-post-template .wp-block-post-title a:hover { color: var(--svx-accent); }
body:not(:has(.svwp)) .wp-block-post-template .wp-block-post-author,
body:not(:has(.svwp)) .wp-block-post-template .wp-block-post-date {
  color: var(--svx-muted-hi); font-size: .8rem;
}
body:not(:has(.svwp)) .wp-block-post-template .wp-block-post-featured-image img {
  border-radius: 0; aspect-ratio: 16 / 9; object-fit: cover; width: 100%;
}
body:not(:has(.svwp)) .wp-block-post-excerpt__more-link { color: var(--svx-accent); }
body:not(:has(.svwp)) .wp-block-post-excerpt__more-link:hover { color: var(--svx-text); }

/* ── caixas brancas do tema ──
   O tema pinta os grupos com --wp--preset--color--background (#fff) e
   --wp--preset--color--background-secondary (#F7F6F4). No escuro isso vira
   caixa BRANCA na sidebar, no conteúdo do post, nos comentários e na busca.
   Recolorimos tudo que usa essas duas cores para a superfície da marca.
   (O container do menu mobile ficou de fora — é tratado na seção de
   paridade da nav acima: transparente no desktop, surface no modal.) */
body:not(:has(.svwp)) .wp-block-group.has-background-background-color,
body:not(:has(.svwp)) .wp-block-group.has-background-secondary-background-color,
body:not(:has(.svwp)) .wp-block-search__inside-wrapper.has-background {
  background: var(--svx-surface) !important;
}
body:not(:has(.svwp)) .wp-block-column .wp-block-group.has-background-background-color,
body:not(:has(.svwp)) main.wp-block-group .wp-block-group.has-background-background-color,
body:not(:has(.svwp)) .wp-block-comments .wp-block-group.has-background-background-color {
  border: 1px solid var(--svx-border);
  border-radius: var(--svx-r);
}

/* ── sidebar ── */
body:not(:has(.svwp)) .wp-block-column > .wp-block-group[class*="has-background"] {
  background: var(--svx-surface) !important;
  border: 1px solid var(--svx-border);
  border-radius: var(--svx-r);
}
body:not(:has(.svwp)) .wp-block-column .wp-block-heading { font-size: .95rem; }
body:not(:has(.svwp)) .wp-block-column ul.wp-block-list { list-style: none; padding-left: 0; }
body:not(:has(.svwp)) .wp-block-column .wp-block-latest-posts__post-title,
body:not(:has(.svwp)) .wp-block-column .wp-block-categories-list a { color: var(--svx-muted-hi); font-size: .9rem; }
body:not(:has(.svwp)) .wp-block-column .wp-block-latest-posts__post-title:hover,
body:not(:has(.svwp)) .wp-block-column .wp-block-categories-list a:hover { color: var(--svx-text); }

/* ── search form ── */
body:not(:has(.svwp)) .wp-block-search__inside-wrapper {
  background: var(--svx-panel); border: 1px solid var(--svx-border); border-radius: 10px;
}
body:not(:has(.svwp)) .wp-block-search__input {
  background: transparent; color: var(--svx-text); font-family: var(--svx-font-body);
}
body:not(:has(.svwp)) .wp-block-search__input::placeholder { color: var(--svx-muted); }
body:not(:has(.svwp)) .wp-block-search__button {
  background: var(--svx-accent) !important; color: #fff !important; border: none; cursor: pointer;
}

/* ── paginação ── */
body:not(:has(.svwp)) .wp-block-query-pagination { color: var(--svx-muted-hi); }
body:not(:has(.svwp)) .wp-block-query-pagination a { color: var(--svx-accent); }
body:not(:has(.svwp)) .wp-block-query-pagination-numbers .current { color: var(--svx-text); font-weight: 600; }

/* ── post único: capa, meta, conteúdo, tags, comentários ── */
body:not(:has(.svwp)) .wp-block-post-featured-image img {
  border-radius: var(--svx-r); border: 1px solid var(--svx-border);
}
/* o box do tema (fadeInUp/background) tem padding 40→10px inline no single;
   restaura o respiro do conteúdo (o «texto colado» no synbalance) e devolve o
   constrained-width (o post-content sai alignfull e o lead has-large-font-size
   fica gigante — este post usa esses attrs, os outros não) */
body:not(:has(.svwp)) main .has-no-hover-shadow-dark {
  padding: 40px !important;
}
body:not(:has(.svwp)) main .has-no-hover-shadow-dark .wp-block-post-content {
  max-width: var(--wp--style--global--content-size, 840px) !important;
  margin-left: auto !important; margin-right: auto !important;
}
body:not(:has(.svwp)) .wp-block-post-content .has-large-font-size { font-size: 1.25rem !important; line-height: 1.6; }
body:not(:has(.svwp)) .wp-block-post-author,
body:not(:has(.svwp)) .wp-block-post-date { color: var(--svx-muted-hi); }
body:not(:has(.svwp)) .wp-block-post-author__name { color: var(--svx-text); }
body:not(:has(.svwp)) .wp-block-post-content { color: var(--svx-muted-hi); }
body:not(:has(.svwp)) .wp-block-post-content h2 { font-size: 1.5rem; margin: 40px 0 14px; }
body:not(:has(.svwp)) .wp-block-post-content h3 { font-size: 1.2rem; margin: 32px 0 12px; }
body:not(:has(.svwp)) .wp-block-post-content img { border-radius: var(--svx-r-sm); }
body:not(:has(.svwp)) .wp-block-post-content ul,
body:not(:has(.svwp)) .wp-block-post-content ol { padding-left: 22px; }
body:not(:has(.svwp)) .wp-block-post-content ul li { list-style: disc; }
body:not(:has(.svwp)) .wp-block-post-content ol li { list-style: decimal; }
body:not(:has(.svwp)) .wp-block-post-content li { margin-bottom: 6px; }
body:not(:has(.svwp)) .wp-block-post-content blockquote {
  border-left: 2px solid var(--svx-accent); padding-left: 20px; margin: 24px 0;
  color: var(--svx-text); font-weight: 400;
}
body:not(:has(.svwp)) .wp-block-post-terms a {
  font-family: var(--svx-font-mono); font-size: .7rem; letter-spacing: 1px;
  text-transform: uppercase; color: var(--svx-accent);
  border: 1px solid var(--svx-border); border-radius: 100px; padding: 4px 12px;
}
body:not(:has(.svwp)) .wp-block-post-terms a:hover { border-color: rgba(var(--svx-accent-rgb), .4); color: var(--svx-text); }
body:not(:has(.svwp)) .wp-block-comments .wp-block-group[class*="has-background"] {
  background: var(--svx-surface) !important; border: 1px solid var(--svx-border);
  border-radius: var(--svx-r);
}
/* comments (wp:comments legacy no single): título, lista e formulário da marca */
body:not(:has(.svwp)) .wp-block-comments { color: var(--svx-muted-hi); }
body:not(:has(.svwp)) .wp-block-comments .wp-block-heading,
body:not(:has(.svwp)) .wp-block-comments .comment-reply-title { color: var(--svx-text) !important; font-size: 1.05rem; }
body:not(:has(.svwp)) .wp-block-comment-template li { margin-bottom: 18px; }
body:not(:has(.svwp)) .wp-block-comment-author-name,
body:not(:has(.svwp)) .wp-block-comment-content p { color: var(--svx-muted-hi); }
body:not(:has(.svwp)) .wp-block-comment-content { border-left: 2px solid var(--svx-border); padding-left: 14px; }
body:not(:has(.svwp)) .wp-block-post-comments-form label { color: var(--svx-muted-hi); font-size: .85rem; }
body:not(:has(.svwp)) .wp-block-post-comments-form input[type="submit"] {
  background: var(--svx-accent) !important; color: #fff !important; border: none;
  border-radius: 8px; padding: 12px 24px; cursor: pointer; font-family: var(--svx-font-body);
}
body:not(:has(.svwp)) .wp-block-post-comments-form input[type="text"],
body:not(:has(.svwp)) .wp-block-post-comments-form input[type="email"],
body:not(:has(.svwp)) .wp-block-post-comments-form input[type="url"],
body:not(:has(.svwp)) .wp-block-post-comments-form textarea {
  background: var(--svx-panel); border: 1px solid var(--svx-border); border-radius: 8px;
  color: var(--svx-text); font-family: var(--svx-font-body);
}

/* ── busca / arquivo: campos e resultados vazios ── */
body:not(:has(.svwp)) input[type="search"] {
  background: var(--svx-panel); border: 1px solid var(--svx-border); border-radius: 8px;
  color: var(--svx-text);
}
body:not(:has(.svwp)) .wp-block-query-no-results { color: var(--svx-muted-hi); }

/* ── responsivo ── */
@media (max-width: 900px) {
  body:not(:has(.svwp)) .wp-block-cover { min-height: 240px; }
  body:not(:has(.svwp)) .wp-block-cover .wp-block-cover__inner-container { padding: 0 20px 40px; }
}

/* ═══ ALTERNÂNCIA DE IDIOMA (PT na raiz × EN em /en/) ══════════════════════
   O rodapé é um template part ÚNICO (renderizado igual em todas as páginas),
   então ele carrega as DUAS versões — .l-pt e .l-en — e o CSS mostra a certa:
     · sem JS: pelas classes page-id das 8 páginas EN (server-side, sem flash)
     · com JS: html.sv-en (script injetado no header) cobre também URLs futuras
   As páginas de blocos já têm nav PRÓPRIO por idioma (injetado no conteúdo),
   então isto serve para o rodapé (e para qualquer bloco marcado com .l-pt/.l-en).
   Ao adicionar uma página EN nova, acrescente o page-id dela aqui. */
.l-en { display: none !important; }
html.sv-en .l-pt,
body.page-id-719 .l-pt, body.page-id-697 .l-pt, body.page-id-701 .l-pt,
body.page-id-699 .l-pt, body.page-id-703 .l-pt, body.page-id-705 .l-pt,
body.page-id-707 .l-pt, body.page-id-1133 .l-pt { display: none !important; }
html.sv-en .l-en,
body.page-id-719 .l-en, body.page-id-697 .l-en, body.page-id-701 .l-en,
body.page-id-699 .l-en, body.page-id-703 .l-en, body.page-id-705 .l-en,
body.page-id-707 .l-en, body.page-id-1133 .l-en { display: block !important; }

/* ═══ FOOTER — versão em BLOCOS nativos (fallback inerte, push-footer-blocks.py) ═══
   O template part ganha o grupo de blocos ANTES do wp:html antigo (.l-pt/.l-en):
   · wp:html no ar    → .footer-blocks fica escondido (default display:none)
   · wp:html removido → body deixa de ter footer.site-footer .l-pt e os blocos
     assumem sozinhos — sem novo deploy. .fb-pt/.fb-en reproduzem a lógica
     .l-pt/.l-en (regras logo abaixo). O grupo é um DIV irmão do <footer>
     antigo: estilos autossuficientes, tokens próprios. */
.wp-block-group.footer-blocks {
  --svx-border: rgba(255, 255, 255, 0.07);
  --svx-text: #F0F0F5;
  --svx-muted: #5A5A6A;
  --svx-muted-hi: #888896;
  --svx-accent: #FF4D1C;
  --svx-accent-rgb: 255, 77, 28;
  --svx-font-display: 'Syne', sans-serif;
  --svx-font-mono: 'DM Mono', monospace;
  display: none;
  padding: 80px 0 40px;
  border-top: 1px solid var(--svx-border);
  background: #0A0A0F;
}
body:not(:has(footer.site-footer .l-pt)) .wp-block-group.footer-blocks { display: block; }
.wp-block-group.footer-blocks .fb-en { display: none !important; }
html.sv-en .wp-block-group.footer-blocks .fb-en,
body.page-id-719 .footer-blocks .fb-en, body.page-id-697 .footer-blocks .fb-en,
body.page-id-701 .footer-blocks .fb-en, body.page-id-699 .footer-blocks .fb-en,
body.page-id-703 .footer-blocks .fb-en, body.page-id-705 .footer-blocks .fb-en,
body.page-id-707 .footer-blocks .fb-en, body.page-id-1133 .footer-blocks .fb-en { display: block !important; }
html.sv-en .wp-block-group.footer-blocks .fb-pt,
body.page-id-719 .footer-blocks .fb-pt, body.page-id-697 .footer-blocks .fb-pt,
body.page-id-701 .footer-blocks .fb-pt, body.page-id-699 .footer-blocks .fb-pt,
body.page-id-703 .footer-blocks .fb-pt, body.page-id-705 .footer-blocks .fb-pt,
body.page-id-707 .footer-blocks .fb-pt, body.page-id-1133 .footer-blocks .fb-pt { display: none !important; }
.wp-block-group.footer-blocks .wrap { max-width: 1240px; margin: 0 auto; padding: 0 48px; }
.wp-block-group.footer-blocks .footer-cols {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 60px;
  margin-bottom: 60px;
}
.wp-block-group.footer-blocks .wp-block-heading {
  font-family: var(--svx-font-display); font-size: .85rem; font-weight: 700;
  margin: 0 0 20px; color: var(--svx-text);
}
.wp-block-group.footer-blocks .wp-block-list { list-style: none; margin: 0; padding: 0; }
.wp-block-group.footer-blocks .wp-block-list li { margin-bottom: 10px; list-style: none; }
.wp-block-group.footer-blocks .wp-block-list a {
  color: var(--svx-muted-hi); font-size: .83rem; font-weight: 300;
  text-decoration: none; transition: color .2s;
}
.wp-block-group.footer-blocks .wp-block-list a:hover { color: var(--svx-accent); }
.wp-block-group.footer-blocks .footer-brand p {
  color: var(--svx-muted-hi); font-size: .83rem; font-weight: 300;
  line-height: 1.7; margin: 12px 0 0;
}
.wp-block-group.footer-blocks .footer-logo { margin: 0 0 4px; }
.wp-block-group.footer-blocks .footer-logo img { height: 30px; width: auto; object-fit: contain; }
.wp-block-group.footer-blocks .wp-block-social-links { margin: 14px 0 0; }
.wp-block-group.footer-blocks .wp-block-social-links .wp-block-social-link { color: var(--svx-muted-hi); transition: color .2s; }
.wp-block-group.footer-blocks .wp-block-social-links .wp-block-social-link:hover { color: var(--svx-accent); }
.wp-block-group.footer-blocks .wp-block-separator {
  border: 0; border-top: 1px solid var(--svx-border); background: none; opacity: 1; margin: 0 0 32px;
}
.wp-block-group.footer-blocks .footer-bottom-row p {
  font-family: var(--svx-font-mono); font-size: .72rem; letter-spacing: .5px;
  color: var(--svx-muted); margin: 0;
}
.wp-block-group.footer-blocks .footer-bottom-row p strong { color: var(--svx-muted-hi); font-weight: 400; }
@media (max-width: 900px) {
  .wp-block-group.footer-blocks .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .wp-block-group.footer-blocks .wrap { padding: 0 20px; }
  .wp-block-group.footer-blocks .footer-bottom-row { flex-direction: column; align-items: flex-start; }
  .wp-block-group.footer-blocks .wp-block-list a { overflow-wrap: anywhere; word-break: break-word; }
}

/* ═══ FOOTER (template part site-footer — igual em todas as páginas) ═══
   Markup wp:html colado do cluade_version. Tokens próprios no seletor:
   o footer fica FORA de .svwp e das chaves body:has/:not — precisa se sustentar. */
footer.site-footer {
  --svx-border: rgba(255, 255, 255, 0.07);
  --svx-text: #F0F0F5;
  --svx-muted: #5A5A6A;
  --svx-muted-hi: #888896;
  --svx-accent: #FF4D1C;
  --svx-accent-rgb: 255, 77, 28;
  --svx-max-w: 1240px;
  --svx-font-display: 'Syne', sans-serif;
  --svx-font-mono: 'DM Mono', monospace;

  padding: 80px 0 40px;
  border-top: 1px solid var(--svx-border);
  background: #0A0A0F;
}
footer.site-footer .wrap { max-width: var(--svx-max-w); margin: 0 auto; padding: 0 48px; }
footer.site-footer .footer-grid {
  /* minmax(0,1fr): 1fr puro tem min-width auto — o email longo (min-content
     ~208px) empurrava as colunas pra fora da tela no mobile (scroll horiz.) */
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 60px;
  margin-bottom: 60px;
}
footer.site-footer .fc h4 {
  font-family: var(--svx-font-display); font-size: .85rem; font-weight: 700;
  margin: 0 0 20px; color: var(--svx-text);
}
footer.site-footer .fc li { margin-bottom: 10px; list-style: none; }
footer.site-footer .fc ul { margin: 0; padding: 0; list-style: none; }
footer.site-footer .fc a { color: var(--svx-muted-hi); font-size: .83rem; font-weight: 300; text-decoration: none; transition: color .2s; }
footer.site-footer .fc a:hover { color: var(--svx-accent); }
footer.site-footer .fc p { color: var(--svx-muted-hi); font-size: .83rem; font-weight: 300; line-height: 1.7; margin: 12px 0 0; }
footer.site-footer .logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--svx-font-display); font-weight: 700; font-size: 1.05rem;
  color: var(--svx-text); text-decoration: none;
}
footer.site-footer a { text-decoration: none; }
footer.site-footer .logo-mark { height: 30px; width: auto; object-fit: contain; }
footer.site-footer .footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  padding-top: 32px; border-top: 1px solid var(--svx-border);
}
footer.site-footer .footer-bottom span {
  font-family: var(--svx-font-mono); font-size: .72rem; letter-spacing: .5px;
  color: var(--svx-muted);
}

/* ── espaço morto acima do footer: o main do tema (constrained) tem
   padding-bottom 80px inline — zera nas páginas de blocos (a cta-band já
   tem o respiro dela) e reduz nas de blog ── */
body:has(.svwp) main.wp-block-group { padding-bottom: 0 !important; }
body:not(:has(.svwp)) main.wp-block-group { padding-bottom: 40px !important; }

@media (max-width: 900px) {
  footer.site-footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  footer.site-footer .wrap { padding: 0 20px; }
  footer.site-footer .footer-bottom { flex-direction: column; align-items: flex-start; }
  footer.site-footer .fc a { overflow-wrap: anywhere; word-break: break-word; }
}

/* ═══ NAV PRÓPRIA (.site-nav) — DEPRECATED para interiores ═══
   Interiores agora usam o header nativo do tema (bloco HEADER NATIVO acima).
   Mantido só para as HOMES (717/719) enquanto não migrarem; quando migrarem,
   apagar daqui até o fim deste bloco (o mobile header faz parte dele). ═══ */
body:has(.svwp) .site-nav {
  position: fixed; top: 0; left: 0; width: 100%; max-width: none !important; z-index: 1000;
  padding: 18px 0;
  background: rgba(10,10,15,.88); backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--svx-border);
  font-family: var(--svx-font-body);
}
body:has(.svwp) .site-nav .wrap { display: flex; justify-content: space-between; align-items: center; padding: 0 48px; }
body:has(.svwp) .site-nav .logo { display: flex; align-items: center; gap: 10px; }
body:has(.svwp) .site-nav .logo-mark { height: 34px; width: auto; object-fit: contain; }
body:has(.svwp) .site-nav .logo-text {
  font-family: var(--svx-font-display); font-weight: 700; font-size: 1.05rem;
  color: var(--svx-text); letter-spacing: -.01em; line-height: 1;
}
body:has(.svwp) .site-nav .nav-links { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
body:has(.svwp) .site-nav .nav-links a { color: var(--svx-muted-hi); font-size: .88rem; transition: color .2s; }
body:has(.svwp) .site-nav .nav-links a:hover { color: var(--svx-text); }
body:has(.svwp) .site-nav .nav-links a.lang-switch {
  font-family: var(--svx-font-mono); font-size: .72rem; letter-spacing: 1px;
  padding: 5px 10px; border: 1px solid var(--svx-border-hi); border-radius: 6px;
}
body:has(.svwp) .site-nav .nav-links a.lang-switch:hover { color: var(--svx-accent); border-color: rgba(var(--svx-accent-rgb),.4); }
body:has(.svwp) .site-nav .nav-links a.btn-primary {
  color: #fff; background: var(--svx-accent); padding: 10px 20px; border-radius: 8px;
  font-weight: 500; box-shadow: 0 8px 28px rgba(var(--svx-accent-rgb), .25);
}
body:has(.svwp) .site-nav .nav-links a.btn-primary:hover { color: #fff; transform: translateY(-1px); }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 900px) {
  .svwp .wrap { padding: 0 24px; }
  .svwp .sec { padding: 64px 0; }
  .svwp .sec-head { margin-bottom: 40px; }
  .svwp .flow-strip { flex-direction: column; }
  .svwp .flow-step { border-right: none; border-bottom: 1px solid var(--svx-border); padding: 22px 24px; }
  .svwp .flow-step:last-child { border-bottom: none; }
  .svwp .flow-step::after {
    content: '↓'; right: 26px; top: auto; bottom: -8px;
    transform: none; background: var(--svx-surface);
  }
  .svwp .vs-panel { grid-template-columns: 1fr; }
  .svwp .vs-col + .vs-col { border-left: none; border-top: 1px solid var(--svx-border); }
  .svwp .custom-split { grid-template-columns: 1fr; gap: 40px; }
  .svwp .cta-inner { flex-direction: column; align-items: flex-start; padding: 60px 20px; }
  .svwp .problem-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
  body:has(.svwp) .sv-canvas-hero-block .hero-content { padding: 0 20px !important; }
  .svwp .page-hero { padding: 56px 0 48px; }
  /* no phone a palavra "treinamento" (Syne 800) não cabe em 350px com clamps
     maiores — mesmo padrão do hero da home na referência: clamp menor no mobile */
  .svwp .page-hero h1 { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .svwp .page-hero .wrap > p:not(.kicker) { margin-bottom: 24px; }
  .svwp .grid-2, .svwp .grid-3 { grid-template-columns: 1fr; }
  .svwp .case-header { grid-template-columns: 1fr; padding: 32px; }
  .svwp .case-body { grid-template-columns: 1fr; }
  .svwp .case-col { border-right: none; border-bottom: 1px solid var(--svx-border); padding: 28px 32px; }
  .svwp .case-col:last-child { border-bottom: none; }
  .svwp .process-step { grid-template-columns: 48px 1fr; gap: 20px; }
  .svwp .founder-split { grid-template-columns: 1fr; gap: 40px; }
  .svwp .founder-card { position: static; }
  .svwp .contact-wrap { grid-template-columns: 1fr; gap: 48px; padding: 56px 20px 64px; }
  .svwp .contact-form-wrap { position: static; }
  .svwp .form-row { grid-template-columns: 1fr; }
  .svwp .legal-page { padding: 56px 0 64px; }
  body:has(.svwp) .site-nav .wrap { padding: 0 20px; }
  body:has(.svwp) .site-nav .nav-links { gap: 14px; }
  body:has(.svwp) .site-nav .nav-links a { font-size: .78rem; }
  body:has(.svwp) .site-nav .nav-links a.btn-primary { padding: 8px 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   §13 — CONTACT FORM 7 dentro do painel de contato (.svwp-cf7)
   O CF7 gera <p><label> + <span.wpcf7-form-control-wrap><input></span></p>.
   Aproveitamos as classes do painel estático (form-header/form-body) e
   estilizamos os controles nativos do plugin.
   ═══════════════════════════════════════════════════════════════════════ */
.svwp .svwp-cf7 .form-body p { margin: 0 0 20px; }
.svwp .svwp-cf7 .form-body p:last-child { margin-bottom: 0; }
.svwp .svwp-cf7 .form-body br { display: none; }
.svwp .svwp-cf7 label {
  display: block;
  font-family: var(--svx-font-mono);
  font-size: .62rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--svx-muted-hi);
  margin-bottom: 20px;
}
.svwp .svwp-cf7 label .wpcf7-form-control { margin-top: 8px; }
.svwp .svwp-cf7 .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.svwp .svwp-cf7 .wpcf7-form-control {
  width: 100%;
  padding: 13px 16px;
  background: var(--svx-panel);
  border: 1px solid var(--svx-border);
  border-radius: var(--svx-r-sm);
  color: var(--svx-text);
  font-family: var(--svx-font-body);
  font-size: .9rem;
  font-weight: 300;
  transition: border-color .2s;
  outline: none;
  appearance: none;
}
.svwp .svwp-cf7 .wpcf7-form-control:focus { border-color: rgba(var(--svx-accent-rgb), .5); }
.svwp .svwp-cf7 .wpcf7-form-control::placeholder { color: var(--svx-muted); }
.svwp .svwp-cf7 select.wpcf7-form-control { cursor: pointer; }
.svwp .svwp-cf7 textarea.wpcf7-form-control { resize: vertical; min-height: 120px; line-height: 1.6; }
/* validação */
.svwp .svwp-cf7 .wpcf7-not-valid { border-color: rgba(var(--svx-accent-rgb), .7); }
.svwp .svwp-cf7 .wpcf7-not-valid-tip {
  font-family: var(--svx-font-mono);
  font-size: .68rem;
  color: var(--svx-accent);
  margin-top: 6px;
}
/* botão de envio */
.svwp .svwp-cf7 .wpcf7-submit {
  width: 100%;
  padding: 16px;
  background: var(--svx-accent);
  color: #fff;
  border: none;
  border-radius: var(--svx-r-sm);
  font-family: var(--svx-font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.02em;
  cursor: pointer;
  transition: all .25s;
  box-shadow: 0 8px 24px rgba(var(--svx-accent-rgb), .25);
  margin-top: 8px;
}
.svwp .svwp-cf7 .wpcf7-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(var(--svx-accent-rgb), .35);
}
.svwp .svwp-cf7 .wpcf7-spinner { background-color: var(--svx-accent); }
/* mensagem de resposta (sucesso/erro) */
.svwp .svwp-cf7 .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--svx-border);
  border-radius: var(--svx-r-sm);
  background: var(--svx-panel);
  color: var(--svx-text);
  font-family: var(--svx-font-body);
  font-size: .85rem;
  font-weight: 300;
}
.svwp .svwp-cf7 .wpcf7-form.sent .wpcf7-response-output {
  border-color: rgba(var(--svx-accent-rgb), .5);
}

/* ═══════════════════════════════════════════════════════════════════════
   §14 — HEADER DO BLOG: sem overlay escuro
   O dimRatio do wp:cover foi zerado nos 4 templates (blog-listing, single,
   archive, search). Blindagem: se algum dia o overlay voltar por estado
   do editor, a capa nunca pinta mais escuro que o fundo da página.
   ═══════════════════════════════════════════════════════════════════════ */
.svwp .wp-block-cover .wp-block-cover__background.has-black-background-color {
  background-color: transparent;
}
.svwp .wp-block-cover .wp-block-cover__background.has-foreground-background-color {
  background-color: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════
   §15 — COMENTÁRIOS (template single, blocos nativos)
   Hoje o form não aparece para visitantes porque o site exige cadastro
   (Configurações → Discussão; REST devolve 401 — ver manual §3.15).
   O CSS abaixo já deixa tudo pronto para quando isso for desligado.
   ═══════════════════════════════════════════════════════════════════════ */
.svwp .comment-list { list-style: none; margin: 0; padding: 0; }
.svwp .comment-list li {
  border: 1px solid var(--svx-border);
  border-radius: var(--svx-r-sm);
  background: var(--svx-panel);
  padding: 20px 24px;
  margin-bottom: 16px;
}
.svwp .wp-block-comment-author-name {
  font-family: var(--svx-font-mono);
  font-size: .7rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--svx-accent);
}
.svwp .wp-block-comment-date,
.svwp .comment-metadata {
  font-family: var(--svx-font-mono);
  font-size: .62rem;
  color: var(--svx-muted-hi);
}
.svwp .wp-block-comment-content,
.svwp .comment-content {
  color: var(--svx-muted-hi);
  font-weight: 300;
  font-size: .92rem;
  line-height: 1.7;
  margin-top: 8px;
}
.svwp .comment-respond label {
  display: block;
  font-family: var(--svx-font-mono);
  font-size: .62rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--svx-muted-hi);
  margin-bottom: 8px;
}
.svwp .comment-respond input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.svwp .comment-respond textarea {
  width: 100%;
  padding: 13px 16px;
  background: var(--svx-panel);
  border: 1px solid var(--svx-border);
  border-radius: var(--svx-r-sm);
  color: var(--svx-text);
  font-family: var(--svx-font-body);
  font-size: .9rem;
  font-weight: 300;
  outline: none;
  appearance: none;
}
.svwp .comment-respond input:focus,
.svwp .comment-respond textarea:focus { border-color: rgba(var(--svx-accent-rgb), .5); }
.svwp .comment-respond .submit {
  background: var(--svx-accent);
  color: #fff;
  border: none;
  border-radius: var(--svx-r-sm);
  padding: 14px 32px;
  font-family: var(--svx-font-display);
  font-weight: 700;
  letter-spacing: -.02em;
  cursor: pointer;
  transition: all .25s;
  box-shadow: 0 8px 24px rgba(var(--svx-accent-rgb), .25);
}
.svwp .comment-respond .submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(var(--svx-accent-rgb), .35);
}
.svwp .comment-respond .logged-in-as,
.svwp .comment-respond .comment-notes {
  font-size: .78rem;
  color: var(--svx-muted-hi);
}
.svwp .comment-respond a { color: var(--svx-accent); }

/* ═══════════════════════════════════════════════════════════════════════
   §16 — FOOTER: wrapper do template part sem frestas claras
   O template part footer do tema renderiza um <footer class="wp-block-
   template-part gtfy-204"> em volta do nosso grupo escuro — sem fundo
   próprio. Qualquer padding/margin de subpixel, fundo herdado (preset
   "background" do tema = branco) ou fresta de whitespace inline aparece
   CLARO em volta do rodapé ("padding branco"). Regras: pinta o wrapper
   com o fundo da marca, zera respiros e mata fundo branco no contêiner
   global do tema que o cerca. Valem igual no <style> do footer e no
   plugin synthvision-global-css (mesmo arquivo).
   ═══════════════════════════════════════════════════════════════════════ */
footer.wp-block-template-part {
  background: #0A0A0F;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0; /* fresta de whitespace inline entre wrappers some */
}
footer.wp-block-template-part > * { line-height: normal; }
/* contêiner de layout do tema (has-global-padding) que abriga o footer:
   o tema pode pintá-lo com o preset claro — fica escuro */
body:has(footer.wp-block-template-part) .has-global-padding:has(> footer.wp-block-template-part) {
  background: #0A0A0F;
}
/* se o footer for filho direto do contêiner constrained, alinhamentos
   de margem do root-container não criam vão claro */
.has-global-padding > .alignfull:has(footer.wp-block-template-part) { margin: 0 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   §16b — FOOTER: anti-moldura (faixa branca arredondada em volta)
   Três causas possíveis cobertas: (1) canto arredondado herdado do tema,
   (2) respiro do último elemento antes do footer, (3) wrapper constrained/
   flow do tema que abriga o footer pintado com fundo claro pelo Global
   Styles. Tudo escopado a quem contém DIRETAMENTE o footer (has >).
   ═══════════════════════════════════════════════════════════════════════ */
footer.wp-block-template-part,
footer.wp-block-template-part > * { border-radius: 0 !important; }
body:has(footer.wp-block-template-part) main:has(+ footer.wp-block-template-part),
body:has(footer.wp-block-template-part) main:has(~ footer.wp-block-template-part) {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
div[class*="is-layout-constrained"]:has(> footer.wp-block-template-part),
div[class*="is-layout-flow"]:has(> footer.wp-block-template-part),
div[class*="is-layout-constrained"]:has(> div > footer.wp-block-template-part) {
  background: #0A0A0F;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* NOTA (27/09): o hero do blog NÃO deve nunca receber a classe .svwp —
   com ela, body:has(.svwp) casa na página do blog e TODAS as regras
   body:not(:has(.svwp)) acima (cards escuros, sidebar, recolocação do
   tema) param de valer. A estrutura correta é a ORIGINAL do tema
   (templates blog-pt / blog-en): cover com post-title, sem conteúdo. */

/* §16c — contêiner raiz do site: herda o escuro (o .wp-site-blocks do
   tema é transparente; entre o fim do main e o footer ele mostrava o
   fundo do navegador em bordas/frestas de subpixel). */
.wp-site-blocks { background: #0A0A0F; }

/* §16d — o tema (Gutenify) pinta .has-border-color com a cor PRIMÁRIA
   (laranja) e define border-style:solid globalmente; qualquer elemento do
   rodapé que herde a classe mostrava borda laranja/faixa clara. O atributo
   de borda já foi removido do markup; isto aqui é a blindagem. */
footer.wp-block-template-part [class*="has-border-color"] {
  border-color: rgba(255, 255, 255, 0.07) !important;
}