/* ============================================================
 * DEMARCA Content — global component styles (enqueued, not inline).
 * Every element is class/id-prefixed `dmc-` so it can be restyled globally.
 * Theme-proofed with !important where the Astra theme overrides (buttons,
 * padding, shadows).
 *
 * Blog identity, harvested from the live site:
 *   gold #c5a958 · ink #161616 · VOGA display · Poppins body
 * VOGA is reserved for the display moments (the DEMARCA wordmark and the
 * banner headlines). Everything else inherits the theme's Poppins.
 * ============================================================ */

:root {
  /* Kept for the components that are not part of this pass (FAQ, TL;DR,
     tables, stats, sidebar widget, modal) so they keep rendering as before. */
  --dmc-blue: #0055aa;
  --dmc-blue-2: #2f6bff;
  --dmc-navy: #0d1f3c;
  --dmc-violet: #8b5cf6;

  --dmc-gold: #c5a958;
  --dmc-gold-dark: #b3974a;
  --dmc-gold-ink: #8a7028;   /* gold that still passes contrast on white */
  --dmc-ink: #161616;
  --dmc-ink-2: #0b0b0c;
  --dmc-cream: #f4f1ea;
  --dmc-display: 'VOGA', 'Playfair Display', Georgia, serif;
  /* The post-title serif WITHOUT VOGA. VOGA is a thin display face: it only holds
     up very large, so anything under ~28px (component titles, numerals in a small
     circle) reads faint and is hard to scan. Those use this instead.
     Corollary for the sizes that DO use VOGA: set them noticeably larger than the
     equivalent Playfair, because VOGA's small x-height makes it look a size or two
     down at the same px. */
  --dmc-serif: 'Playfair Display', Georgia, serif;
  /* Self-contained film grain, so a flat ground still has some tooth. Inline SVG
     rather than an image file: no extra request and nothing to cache-bust. */
  --dmc-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  /* One easing for every motion in the plugin: fast out, settles at the end. */
  --dmc-ease: cubic-bezier(.22, .9, .25, 1);
  /* Overridden from PHP with the admin-set wall image. */
  --dmc-wall: url('https://www.designdemarca.pt/wp-content/uploads/Demarca-Design-Wall-2.jpg');
}

/* ── Shared bits ── */
.dmc-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--dmc-gold); margin-bottom: 14px; line-height: 1;
}
.dmc-eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--dmc-gold); flex: 0 0 auto; }
.dmc-rating { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: #6f6d67; }
/* Gold wherever they appear. This used to be scoped to .dmc-rating only, which
   left the stars inside the pop-up inheriting the surrounding grey. */
.dmc-stars { color: var(--dmc-gold); letter-spacing: 1px; }
.dmc-g { flex: 0 0 auto; vertical-align: middle; }

/* ── CTA button — four styles, picked in Definições ──
 * Shared skeleton first, then the per-style skins. */
.dmc-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-family: inherit !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.dmc-cta-btn::before, .dmc-cta-btn::after { display: none !important; content: none !important; }
.dmc-cta-btn .dmc-arrow { display: inline-block; transition: transform .22s ease; }
.dmc-cta-btn:hover .dmc-arrow { transform: translateX(4px); }

/* 1 — Ouro sólido */
.dmc-btn-1 { background: var(--dmc-gold) !important; color: var(--dmc-ink) !important; padding: 16px 34px !important; border-radius: 9999px !important; }
.dmc-btn-1:hover { background: var(--dmc-gold-dark) !important; color: var(--dmc-ink) !important; transform: translateY(-2px); box-shadow: 0 14px 26px -16px rgba(197, 169, 88, .9) !important; }

/* 2 — Contorno dourado */
.dmc-btn-2 { background: transparent !important; color: var(--dmc-gold-ink) !important; border: 1px solid var(--dmc-gold) !important; padding: 15px 33px !important; border-radius: 9999px !important; }
.dmc-btn-2:hover { background: var(--dmc-gold) !important; color: var(--dmc-ink) !important; }

/* 3 — Barra editorial (default): square, with the arrow in its own black tile */
.dmc-btn-3 { background: var(--dmc-gold) !important; color: var(--dmc-ink) !important; padding: 0 0 0 28px !important; border-radius: 2px !important; gap: 24px !important; overflow: hidden; letter-spacing: .16em !important; }
.dmc-btn-3 .dmc-btn-label { padding: 16px 0; }
.dmc-btn-3 .dmc-btn-sq { align-self: stretch; width: 54px; display: grid; place-items: center; background: var(--dmc-ink); color: var(--dmc-gold); font-size: 19px; }
.dmc-btn-3:hover { background: var(--dmc-gold-dark) !important; color: var(--dmc-ink) !important; }
.dmc-btn-3:hover .dmc-btn-sq { background: var(--dmc-ink-2); }

/* 4 — Fantasma editorial */
.dmc-btn-4 { background: transparent !important; color: var(--dmc-ink) !important; padding: 8px 2px !important; border-radius: 0 !important; position: relative; letter-spacing: .14em !important; font-size: 13px !important; }
.dmc-btn-4::after { display: block !important; content: '' !important; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--dmc-gold); transition: height .22s ease; }
.dmc-btn-4:hover { color: var(--dmc-ink) !important; }
.dmc-btn-4:hover::after { height: 4px; }

/* On dark grounds (banner A/B) styles 2 and 4 flip to gold/white. */
.dmc-banner-a .dmc-btn-2, .dmc-banner-b .dmc-btn-2 { color: var(--dmc-gold) !important; }
.dmc-banner-a .dmc-btn-4, .dmc-banner-b .dmc-btn-4 { color: #fff !important; }

/* Auto-inserted CTA wrapper. Mobile is always centred; desktop follows the
   admin setting (left by default). */
.dmc-cta-auto { margin: 32px 0; text-align: center; }
@media (min-width: 783px) {
  .dmc-cta-auto.dmc-align-left { text-align: left; }
  .dmc-cta-auto.dmc-align-center { text-align: center; }
}

/* ── End-of-article stack: banner → author → related, outside the card ── */
.dmc-entry-after { display: flow-root; margin: 34px 0 0; }
.dmc-entry-after > * + * { margin-top: 34px; }

/* ── CTA banner — three designs ── */
.dmc-banner { position: relative; overflow: hidden; }
.dmc-banner h3 { font-family: var(--dmc-display); font-weight: 400; line-height: 1.16; margin: 0 0 14px; letter-spacing: .01em; }
.dmc-banner p { font-size: 15px; line-height: 1.7; margin: 0 0 26px; }

/* A — Parede */
.dmc-banner-a { background: var(--dmc-ink-2) var(--dmc-wall) center / cover no-repeat; color: #fff; }
.dmc-banner-a::before { content: ''; position: absolute; inset: 0; background: var(--dmc-ink); opacity: .9; }
.dmc-banner-a .dmc-banner-frame { position: relative; z-index: 1; margin: 14px; padding: 52px 40px; text-align: center; border: 1px solid rgba(197, 169, 88, .28); }
.dmc-banner-a .dmc-banner-mark { display: block; width: 56px; margin: 0 auto 18px; }
.dmc-banner-a .dmc-banner-mark img { display: block; width: 100%; height: auto; }
.dmc-banner-a h3 { color: #fff !important; font-size: clamp(25px, 2.4vw, 33px); }
.dmc-banner-a p { color: #c3c1bb; max-width: 52ch; margin-left: auto; margin-right: auto; }

/* B — Editorial (default) */
.dmc-banner-b { display: grid; grid-template-columns: 1.25fr .85fr; background: var(--dmc-ink); color: #fff; }
.dmc-banner-b .dmc-banner-main { padding: 44px 40px; }
.dmc-banner-b h3 { color: #fff !important; font-size: clamp(24px, 2.2vw, 31px); }
.dmc-banner-b p { color: #c3c1bb; max-width: 44ch; }
.dmc-banner-b .dmc-banner-proofs { background: var(--dmc-ink-2); border-left: 1px solid rgba(197, 169, 88, .25); padding: 30px 32px; display: flex; flex-direction: column; justify-content: center; }
.dmc-banner-b .dmc-proof { padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.dmc-banner-b .dmc-proof:last-child { border-bottom: 0; }
.dmc-banner-b .dmc-proof-v { display: block; font-family: var(--dmc-display); font-weight: 400; font-size: 27px; line-height: 1; color: var(--dmc-gold); }
.dmc-banner-b .dmc-proof-l { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8b8981; margin-top: 7px; }
.dmc-banner-b .dmc-proof-l .dmc-stars { color: var(--dmc-gold); letter-spacing: 1px; }
@media (max-width: 760px) {
  .dmc-banner-b { grid-template-columns: 1fr; }
  .dmc-banner-b .dmc-banner-proofs { border-left: 0; border-top: 1px solid rgba(197, 169, 88, .25); }
}

/* C — Ficha creme */
.dmc-banner-c { display: grid; grid-template-columns: 1fr auto; gap: 38px; align-items: center; background: var(--dmc-cream); border: 1px solid #e0d8c4; border-top: 3px solid var(--dmc-gold); padding: 36px 38px; }
.dmc-banner-c .dmc-eyebrow { color: var(--dmc-gold-ink); }
.dmc-banner-c h3 { color: #12151a !important; font-size: clamp(23px, 2vw, 29px); }
.dmc-banner-c p { color: #57544c; max-width: 48ch; margin-bottom: 18px; }
.dmc-banner-c ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.dmc-banner-c li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #3d3a33; margin: 0; }
.dmc-banner-c li svg { width: 14px; height: 14px; color: var(--dmc-gold-ink); flex: 0 0 auto; }
.dmc-banner-c .dmc-banner-side { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
@media (max-width: 760px) { .dmc-banner-c { grid-template-columns: 1fr; gap: 24px; padding: 28px 22px; } }

/* ════════════════════════════════════════════════════════════════════════
 * IN-ARTICLE COMPONENTS
 *
 * These used to be a blue/violet set left over from before the blog had an
 * identity, so an article read as two different brands: gold-and-black at the
 * end (banner, author box) and generic SaaS blue in the middle. They now take
 * their language from the closing banner and the author box:
 *
 *   · gold hairline rules to open a block          · VOGA for display moments only
 *   · uppercase, letterspaced micro-labels         · ink and cream grounds
 *   · square-ish furniture, rounded media
 *
 * Radius is a deliberate hierarchy, not an inconsistency: media (images,
 * tables) is rounded 12px because it is content; editorial furniture stays at
 * 4px because it is chrome.
 * ════════════════════════════════════════════════════════════════════════ */

/* Shared micro-label. Same type as .dmc-eyebrow but sized for inside a block. */
.dmc-comp-lab {
  display: block; margin-bottom: 10px;
  font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--dmc-gold-ink); line-height: 1;
}

/* ── FAQ (smooth accordion) ── */
.dmc-faq { margin: 30px 0; display: flow-root; }
/* Gaps come from the container, not from per-item margins: the theme sets its own
   margin on block children inside .entry-content and it was compounding. */
.dmc-faq-item + .dmc-faq-item { margin-top: 8px !important; }
.dmc-faq-item { border: 1px solid #e7e2d7; border-radius: 4px; margin: 0; overflow: hidden; background: #fff; transition: border-color .22s ease; }
.dmc-faq-item:hover { border-color: #d9d1bf; }
.dmc-faq-item summary { padding: 17px 54px 17px 20px; cursor: pointer; font-weight: 600; font-size: 15.5px; color: var(--dmc-ink); background: #faf8f4; list-style: none; position: relative; display: block; transition: background .22s ease, color .22s ease; }
.dmc-faq-item summary::-webkit-details-marker { display: none; }
.dmc-faq-item summary::marker { content: ''; }
/* A chevron drawn from two borders: crisper at any size than the ▼ glyph, and it
   inherits currentColor so it flips with the open state for free. */
.dmc-faq-item summary::after {
  content: ''; position: absolute; right: 22px; top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--dmc-gold-ink); border-bottom: 2px solid var(--dmc-gold-ink);
  transform: rotate(45deg); transform-origin: center;
  transition: transform .3s var(--dmc-ease), border-color .22s ease;
}
.dmc-faq-item summary:hover { background: #f4f1ea; }
.dmc-faq-item[open] summary,
.dmc-faq-item[open] summary:hover { background: var(--dmc-ink); color: #fff; }
.dmc-faq-item[open] summary::after { border-color: var(--dmc-gold); transform: rotate(-135deg); margin-top: -2px; }
/* Smooth open/close: animate a wrapper's max-height (JS toggles .dmc-open). */
.dmc-faq-answer { overflow: hidden; max-height: 0; transition: max-height .3s ease; }
.dmc-faq-item[open] .dmc-faq-answer { /* max-height set by JS to scrollHeight */ }
.dmc-faq-answer-inner { padding: 18px 20px 20px; border-top: 2px solid var(--dmc-gold); }
.dmc-faq-answer-inner p { margin: 0 0 10px; }
.dmc-faq-answer-inner p:last-child { margin-bottom: 0; }

/* ── TL;DR / resposta rápida ──
 * The first block the reader meets after the intro, so it is allowed to be the
 * loudest thing on the page short of the stat band: a full 3px gold rule, the
 * label set as a proper eyebrow with a hairline running out to the edge, and
 * copy a notch larger than body text. */
.dmc-tldr {
  position: relative; margin: 30px 0; padding: 26px 30px 28px;
  background: var(--dmc-cream); border: 1px solid #e2dac6; border-top: 3px solid var(--dmc-gold);
  border-radius: 0 0 4px 4px; font-size: 16.5px; line-height: 1.75; color: #35322b;
}
.dmc-tldr > *:last-child { margin-bottom: 0; }
.dmc-tldr strong { color: var(--dmc-ink); font-weight: 600; }
/* The label was set at 10px with a 10px gap and read as if it were glued to the
   first line. Bigger, wider tracking, and real air under it. */
.dmc-tldr .dmc-comp-lab {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px; font-size: 12.5px; letter-spacing: .22em; color: var(--dmc-gold-ink);
}
.dmc-tldr .dmc-comp-lab::after {
  content: ''; flex: 1 1 auto; height: 1px;
  background: linear-gradient(90deg, rgba(197, 169, 88, .6), rgba(197, 169, 88, 0));
}

/* ── Key takeaways ── */
.dmc-takeaways { margin: 26px 0; padding: 20px 24px; background: #fff; border: 1px solid #e7e2d7; border-left: 3px solid var(--dmc-gold); border-radius: 4px; }
/* 10px was unreadable next to 17px body copy — the eyebrow read as a caption for
   something else rather than as the box's own title. 13px matches .dmc-stats-lab,
   so every gold uppercase eyebrow in the article is now one size. */
.dmc-takeaways > strong { display: block; margin-bottom: 12px; font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--dmc-gold-ink); }
.dmc-takeaways ul { margin: 0; padding-left: 20px; }
.dmc-takeaways li { margin: 6px 0; }

/* ── Styled table ──
 * Rounded and clipped by the wrapper: border-collapse:collapse ignores a radius
 * on the table itself, so the corners are cut by the scroll container instead. */
.dmc-table-wrap {
  margin: 26px 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid #e7e1d3; border-radius: 12px; background: #fff;
}
.dmc-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0; font-size: 14.8px; }
.dmc-table th, .dmc-table td { padding: 13px 16px; text-align: left; vertical-align: top; }
/* The header row was 11px, i.e. SMALLER than the cells under it, so the column
   labels lost to their own data. A header should be at least as loud as the body. */
.dmc-table thead th {
  background: var(--dmc-ink); color: #fff !important;
  font-size: 14px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  white-space: nowrap; border-bottom: 2px solid var(--dmc-gold);
}
.dmc-table tbody td { border-top: 1px solid #f0ebe0; line-height: 1.6; color: #46443e; }
.dmc-table tbody tr:first-child td { border-top: 0; }
/* The first cell is the row's label, so it carries the weight. */
/* nowrap because a two-word label breaking over two lines ("250 g a 300 / g")
   reads as a mistake. The wrapper scrolls, so it cannot overflow on mobile. */
/* The row label is emphasised, and it WRAPS.
 *
 * `white-space: nowrap` was right for the labels this was designed against ("60%",
 * "Impresso") and ruinous for the ones it actually met: a comparison table whose left
 * column is a full sentence forced the table far past the article width, so the reader
 * got a horizontal scrollbar, a row several lines tall, and the right-hand column
 * pushed off screen entirely.
 *
 * Auto table layout already gives a short label the width it needs, so it stays on one
 * line without being told to. The max-width is what stops a long sentence from taking
 * the whole table and squeezing the column it is being compared against. */
.dmc-table tbody td:first-child {
  font-weight: 600; color: var(--dmc-ink);
  white-space: normal; overflow-wrap: break-word; hyphens: none;
  min-width: 7ch; max-width: 34ch; text-wrap: pretty;
}
.dmc-table tbody tr { transition: background .18s ease; }
.dmc-table tbody tr:hover { background: rgba(197, 169, 88, .09); }

/* ── Procedure steps (from [dmc_steps]) ──
 * Gold VOGA numerals in the margin, one hairline per step. */
.entry-content ol.dmc-steps { list-style: none; margin: 28px 0; padding: 0; counter-reset: dmcstep; }
.entry-content ol.dmc-steps > li {
  counter-increment: dmcstep; position: relative;
  margin: 0; padding: 16px 0 16px 56px; border-top: 1px solid #ece7dc;
}
.entry-content ol.dmc-steps > li:first-child { border-top: 0; padding-top: 4px; }
/* The numeral is set in the body face at 600, NOT VOGA: VOGA is a thin display
   face and a single digit inside a 36px circle came out faint and hard to read.
   Same reasoning as the component titles below. */
.entry-content ol.dmc-steps > li::before {
  content: counter(dmcstep); position: absolute; left: 0; top: 13px;
  width: 38px; height: 38px; display: grid; place-items: center;
  font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1;
  color: var(--dmc-ink); background: var(--dmc-cream);
  border: 1.5px solid var(--dmc-gold); border-radius: 50%;
}
.entry-content ol.dmc-steps > li:first-child::before { top: 2px; }

/* ── Badge / pill ── */
.dmc-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--dmc-ink); color: var(--dmc-gold); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; padding: 5px 11px; border-radius: 3px; }

/* ── Last-updated pill ── */
.dmc-updated-pill { align-items: center; gap: 5px; background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; line-height: 1.4; }
.dmc-updated-pill .dmc-check { color: #16a34a; font-size: 12px; }
.dmc-updated-desktop { display: none; }
.dmc-updated-mobile { display: none; }
@media (min-width: 481px) { .dmc-updated-desktop { display: inline-flex; } }
@media (max-width: 480px) { .dmc-updated-mobile { display: inline-flex; } }

/* ── Sidebar widget (converting) ── */
.dmc-widget { position: relative; overflow: hidden; background: linear-gradient(160deg, #0a1a3a 0%, #0d2d6b 60%, #123a8a 100%); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 26px 22px; color: #fff; box-shadow: 0 20px 48px -22px rgba(13,45,107,.6); }
.dmc-widget::before { content: ''; position: absolute; top: -60px; right: -50px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(37,120,255,.5) 0%, transparent 70%); pointer-events: none; }
.dmc-widget::after { content: ''; position: absolute; bottom: -70px; left: -50px; width: 190px; height: 190px; background: radial-gradient(circle, rgba(139,92,246,.32) 0%, transparent 70%); pointer-events: none; }
.dmc-widget > * { position: relative; z-index: 1; }
.dmc-widget-eyebrow { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.20); color: #dbe7ff; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1; padding: 5px 12px; border-radius: 9999px; margin-bottom: 14px; }
.dmc-widget-eyebrow .dmc-dot { width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #8b5cf6); box-shadow: 0 0 10px rgba(96,140,255,.9); }
.dmc-widget h3 { color: #fff !important; font-size: 21px; line-height: 1.2; margin: 0 0 8px; font-weight: 800; }
.dmc-widget p { color: #c2d3f0; font-size: 14px; line-height: 1.55; margin: 0 0 16px; }
.dmc-widget ul { list-style: none; margin: 0 0 18px; padding: 0; }
.dmc-widget li { display: flex; align-items: flex-start; gap: 9px; color: #dbe7ff; font-size: 13.5px; line-height: 1.5; margin: 8px 0; }
.dmc-widget li svg { flex: 0 0 16px; margin-top: 2px; color: #6ee7b7; }
.dmc-widget .dmc-cta-btn { width: 100%; justify-content: center; font-size: 15px !important; padding: 13px 20px !important; }
.dmc-widget-review { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: #9fb3d4; }
.dmc-widget-review .dmc-stars { color: #FBBC04; letter-spacing: 1px; }

/* ── Native lead modal (opt-in; replaces the Elementor popup) ─────────────
 * Two steps, split card: the DEMARCA argument stays on screen (dark, on the
 * wall texture) while the form is filled in on white, which is where people
 * actually finish forms. The scrim dims AND blurs; the card rises and settles.
 * ------------------------------------------------------------------------ */
#dmc-modal{ position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; padding: 20px; }
#dmc-modal[hidden]{ display: none; }
#dmc-modal [hidden]{ display: none !important; }
#dmc-modal .dmc-scrim{ position: absolute; inset: 0; background: rgba(10,10,11,.55); backdrop-filter: blur(9px) saturate(115%); -webkit-backdrop-filter: blur(9px) saturate(115%); opacity: 0; transition: opacity .34s var(--dmc-ease); }
#dmc-modal.dmc-open .dmc-scrim{ opacity: 1; }
#dmc-modal .dmc-modal-card{ position: relative; width: 100%; max-width: 940px; max-height: calc(100vh - 40px); display: flex; overflow: hidden;
  background: #fff; border-radius: 4px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(18px) scale(.975); transition: opacity .3s var(--dmc-ease), transform .42s var(--dmc-ease); }
#dmc-modal.dmc-open .dmc-modal-card{ opacity: 1; transform: none; }
#dmc-modal.dmc-closing .dmc-modal-card{ transition-duration: .22s, .24s; }
#dmc-modal .dmc-modal-card:focus{ outline: none; }
#dmc-modal .dmc-modal-close{
  position: absolute; top: 14px; right: 14px; z-index: 5;
  display: grid !important; place-items: center;
  width: 36px !important; height: 36px !important; min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important; border-radius: 999px !important;
  background: rgba(0,0,0,.05) !important;
  color: #57544c !important;
  font-family: inherit !important; font-size: 21px !important; font-weight: 400 !important;
  line-height: 1 !important; letter-spacing: normal !important; text-transform: none !important;
  box-shadow: none !important; text-shadow: none !important;
  cursor: pointer;
  transition: background .2s, color .2s, transform .2s;
}
#dmc-modal .dmc-modal-close::before,#dmc-modal .dmc-modal-close::after{ display: none !important; content: none !important; }
#dmc-modal .dmc-modal-close:hover{ background: var(--dmc-gold) !important; color: var(--dmc-ink) !important; transform: rotate(90deg); }

/* left column — the argument */
#dmc-modal .dmc-modal-side{ flex: 0 0 340px; position: relative; padding: 34px 32px; display: flex; flex-direction: column; gap: 22px; color: #fff;
  background: var(--dmc-ink-2) var(--dmc-wall) center / cover no-repeat; }
#dmc-modal .dmc-modal-side::before{ content: ''; position: absolute; inset: 0; background: var(--dmc-ink); opacity: .9; }
#dmc-modal .dmc-modal-side > *{ position: relative; z-index: 1; }
#dmc-modal .dmc-modal-mark{ display: block; width: 72px; height: auto; }
#dmc-modal .dmc-modal-side-body{ flex: 1; }
#dmc-modal .dmc-modal-side .dmc-eyebrow{ margin-bottom: 12px; }
#dmc-modal .dmc-modal-side h2{ font-family: var(--dmc-display); font-weight: 400; font-size: 28px; line-height: 1.16; letter-spacing: .005em; margin: 0 0 12px; color: #fff; }
#dmc-modal .dmc-modal-side p{ font-size: 13px; line-height: 1.68; color: #bfbdb7; margin: 0; }
#dmc-modal .dmc-modal-proof{ list-style: none !important; margin: 0 !important; padding: 16px 0 0 !important; border-top: 1px solid rgba(197,169,88,.3); display: flex; flex-direction: column; gap: 9px; }
#dmc-modal .dmc-modal-proof li{ display: flex; align-items: center; gap: 8px; font-size: 11.5px; line-height: 1.4; color: #a5a39d; margin: 0 !important; padding: 0 !important; }
#dmc-modal .dmc-modal-proof li::before,#dmc-modal .dmc-modal-proof li::marker{ display: none !important; content: none !important; }
#dmc-modal .dmc-modal-proof b{ color: #e6e4de; font-weight: 600; }
.dmc-tick { width: 14px; height: 14px; flex: 0 0 auto; color: var(--dmc-gold); }

/* right column — the form */
#dmc-modal .dmc-modal-form{ display: flex; flex-direction: column; min-width: 0; flex: 1; overflow-y: auto; padding: 30px 36px 24px; color: var(--dmc-ink); }
#dmc-modal .dmc-modal-head{ margin-bottom: 22px; }
#dmc-modal .dmc-step-count{ display: block; margin-bottom: 10px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #8a8880; }
#dmc-modal .dmc-bar{ height: 2px; border-radius: 2px; overflow: hidden; background: rgba(0,0,0,.1); }
#dmc-modal .dmc-bar i{ display: block; height: 100%; width: 50%; background: var(--dmc-gold); transition: width .42s var(--dmc-ease); }
#dmc-modal .dmc-steps{ flex: 1; }
#dmc-modal .dmc-step{ display: none; }
#dmc-modal .dmc-step.is-on{ display: block; animation: dmcStepIn .38s var(--dmc-ease) both; }
@keyframes dmcStepIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
#dmc-modal.dmc-back .dmc-step.is-on{ animation-name: dmcStepBack; }
@keyframes dmcStepBack { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }

#dmc-modal .dmc-field{ display: block; margin: 0 0 18px; }
#dmc-modal .dmc-lab{ display: block; font-size: 12px; font-weight: 600; letter-spacing: .06em; margin-bottom: 9px; color: #4a4842; }
#dmc-modal .dmc-lab i{ font-style: normal; color: var(--dmc-gold); }
/* The chips, the close button and the fields are plain <button>/<input>/<textarea>
   elements, so Astra's global form and button styling applies to them: uppercase,
   letter-spacing, its own padding, radius, background and box-shadow. Every
   property the theme contests is forced here — same approach as .dmc-cta-btn. */
#dmc-modal .dmc-chips{ display: flex; flex-wrap: wrap; gap: 8px; }
#dmc-modal .dmc-chip{
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  padding: 9px 15px !important;
  border-radius: 999px !important;
  border: 1px solid #ddd9d0 !important;
  background: #fff !important;
  color: #4a4842 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  cursor: pointer;
  transition: all .18s var(--dmc-ease);
}
#dmc-modal .dmc-chip::before,#dmc-modal .dmc-chip::after{ display: none !important; content: none !important; }
/* Hover states are declared in full: the theme has its own `button:hover` that
   was turning the label white on a white chip. */
#dmc-modal .dmc-chip:hover{ border-color: var(--dmc-gold) !important; background: #fff !important; color: var(--dmc-ink) !important; }
#dmc-modal .dmc-chip.is-on,
#dmc-modal .dmc-chip.is-on:hover{ background: var(--dmc-ink) !important; border-color: var(--dmc-ink) !important; color: var(--dmc-gold) !important; }
#dmc-modal .dmc-chip:focus{ background: #fff !important; color: var(--dmc-ink) !important; }
#dmc-modal .dmc-chip.is-on:focus{ background: var(--dmc-ink) !important; color: var(--dmc-gold) !important; }
#dmc-modal .dmc-grid2{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
#dmc-modal .dmc-inp{
  width: 100% !important;
  height: auto !important;
  font-family: inherit !important;
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  padding: 12px 14px !important;
  border-radius: 3px !important;
  border: 1px solid #ddd9d0 !important;
  background: #fbfaf8 !important;
  color: var(--dmc-ink) !important;
  box-shadow: none !important;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
#dmc-modal .dmc-inp:focus{ outline: none !important; border-color: var(--dmc-gold) !important; box-shadow: 0 0 0 3px rgba(197,169,88,.18) !important; background: #fff !important; }
#dmc-modal .dmc-inp::placeholder{ color: #a3a099 !important; opacity: 1; }
#dmc-modal .dmc-ta{ resize: vertical; min-height: 62px !important; }
#dmc-modal .dmc-modal-foot{ display: flex; align-items: center; gap: 14px; border-top: 1px solid #eeebe4; padding-top: 18px; margin-top: 4px; }
#dmc-modal .dmc-modal-foot [data-dmc-next],#dmc-modal .dmc-modal-foot [data-dmc-send]{ margin-left: auto; }
#dmc-modal .dmc-btn-ghost{
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 8px 2px !important;
  color: #8a8880 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  width: auto !important;
  min-width: 0 !important;
  cursor: pointer;
  transition: color .2s;
}
#dmc-modal .dmc-btn-ghost::before,#dmc-modal .dmc-btn-ghost::after{ display: none !important; content: none !important; }
#dmc-modal .dmc-btn-ghost:hover{ color: var(--dmc-ink) !important; }
/* the escape hatch, quieter than the button */
#dmc-modal .dmc-modal-contacts{ display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid #f2efe9; }
#dmc-modal .dmc-mc-lab{ font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #a3a099; }
#dmc-modal .dmc-modal-contacts a{ display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: #6f6d67; text-decoration: none; transition: color .2s; }
#dmc-modal .dmc-modal-contacts a:hover{ color: var(--dmc-ink); }
#dmc-modal .dmc-modal-contacts svg{ width: 14px; height: 14px; flex: 0 0 auto; color: var(--dmc-gold); }
/* Inside the modal the gold button is a bar, not a pill: it is a form action,
   not an in-article CTA. Overrides .dmc-btn-1's pill radius. */
#dmc-modal .dmc-cta-btn{ border-radius: 2px !important; padding: 15px 28px !important; }
#dmc-modal .dmc-cta-btn:hover{ transform: translateY(-1px); }

/* sent state — replaces the form column, the dark side panel stays */
#dmc-modal .dmc-modal-done{ flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 40px 36px; text-align: center; }
#dmc-modal .dmc-modal-done h3{ font-family: var(--dmc-display); font-weight: 400; font-size: 28px; margin: 0 0 10px; color: var(--dmc-ink); }
#dmc-modal .dmc-modal-done p{ font-size: 14px; color: #6f6d67; margin: 0; }

@media (max-width: 820px) {
  #dmc-modal .dmc-modal-card{ flex-direction: column; max-height: calc(100vh - 24px); }
  #dmc-modal .dmc-modal-side{ flex: 0 0 auto; flex-direction: row; align-items: center; gap: 18px; padding: 18px 22px; }
  #dmc-modal .dmc-modal-side h2{ font-size: 21px; margin: 0; }
  #dmc-modal .dmc-modal-side p,#dmc-modal .dmc-modal-proof,#dmc-modal .dmc-modal-side .dmc-eyebrow{ display: none; }
  #dmc-modal .dmc-modal-mark{ width: 50px; }
  #dmc-modal .dmc-modal-form{ padding: 24px 22px 20px; }
  #dmc-modal .dmc-mc-lab{ display: none; }
}
@media (max-width: 560px) { #dmc-modal .dmc-grid2{ grid-template-columns: 1fr; } }

/* ── Author / E-E-A-T box (native, replaces the Elementor section) ──
 * The wall texture under a #161616 overlay at 0.9, the real diamond mark,
 * and "DEMARCA" in VOGA. Square corners, like the rest of the blog. */
.dmc-author { position: relative; overflow: hidden; background: var(--dmc-ink-2) var(--dmc-wall) center / cover no-repeat; color: #fff; }
.dmc-author::before { content: ''; position: absolute; inset: 0; background: var(--dmc-ink); opacity: .9; }
.dmc-author-top { position: relative; z-index: 1; height: 2px; background: linear-gradient(90deg, var(--dmc-gold) 0%, var(--dmc-gold) 22%, rgba(197,169,88,.12) 22%); }
.dmc-author-in { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1px 1fr; gap: 34px; align-items: center; padding: 40px 44px; }
.dmc-author-mark { width: 112px; }
.dmc-author-mark img { display: block; width: 100%; height: auto; }
.dmc-author-div { align-self: stretch; background: linear-gradient(180deg, transparent, rgba(197,169,88,.5), transparent); }
.dmc-author .dmc-eyebrow { margin-bottom: 10px; }
.dmc-author-name { font-family: var(--dmc-display); font-size: 38px; font-weight: 400; letter-spacing: .06em; line-height: 1; margin: 0 0 12px; color: #fff; }
.dmc-author-desc { color: #c8c6c0; font-size: 13.5px; line-height: 1.75; margin: 0; max-width: 62ch; }
.dmc-author-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 18px; }
.dmc-socials { display: flex; gap: 9px; }
.dmc-socials a { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(197,169,88,.45); color: var(--dmc-gold); transition: background .2s, color .2s, border-color .2s; }
.dmc-socials a:hover { background: var(--dmc-gold); color: var(--dmc-ink); border-color: var(--dmc-gold); }
.dmc-socials svg { width: 15px; height: 15px; }
.dmc-author-meta { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: #7e7c76; }
.dmc-author-meta a { color: var(--dmc-gold); text-decoration: none; }
.dmc-author-meta a:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .dmc-author-in { grid-template-columns: 1fr; gap: 20px; padding: 30px 24px; }
  .dmc-author-div { display: none; }
  .dmc-author-mark { width: 88px; }
  .dmc-author-name { font-size: 32px; }
}

/* ── Related posts (native, replaces Astra's) ──
 * Editorial cards: full-bleed image with the category as a black-and-gold
 * tab, then type on the page ground. Titles stay in the theme face. */
.dmc-related { max-width: 100%; }
.dmc-related-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; border-bottom: 1px solid #d6d4cf; padding-bottom: 12px; margin-bottom: 22px; }
.dmc-related-rule { display: block; width: 44px; height: 2px; background: var(--dmc-gold); margin-bottom: 10px; }
.dmc-related h2 { font-size: 24px; font-weight: 600; line-height: 1.1; margin: 0; color: #12151a; }
.dmc-related-all { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #7b7972; text-decoration: none; white-space: nowrap; }
.dmc-related-all:hover { color: var(--dmc-ink); }
.dmc-related-grid { display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 780px) { .dmc-related-grid { grid-template-columns: 1fr; } }
.dmc-related-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform .25s ease; }
.dmc-related-card:hover { transform: translateY(-4px); }
.dmc-related-thumb { position: relative; display: block; aspect-ratio: 16/10; overflow: hidden; background: #dcdad5; }
.dmc-related-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.dmc-related-card:hover .dmc-related-thumb img { transform: scale(1.05); }
.dmc-related-cat { position: absolute; left: 0; bottom: 0; background: var(--dmc-ink); color: var(--dmc-gold); font-size: 9.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; padding: 6px 11px; }
.dmc-related-txt { display: flex; flex-direction: column; flex: 1; padding: 16px 0 0; }
.dmc-related-title { display: block; font-size: 16.5px; font-weight: 600; line-height: 1.35; color: #12151a; margin: 0 0 8px; }
.dmc-related-meta { font-size: 11px; color: #8a8880; margin-bottom: 14px; }
.dmc-related-go { position: relative; margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--dmc-ink); padding-bottom: 6px; }
.dmc-related-go::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 26px; background: var(--dmc-gold); transition: width .3s ease; }
.dmc-related-card:hover .dmc-related-go::after { width: 100%; }
.dmc-related-card:hover .dmc-arrow { transform: translateX(4px); }
.dmc-related .dmc-arrow { display: inline-block; transition: transform .22s ease; }

/* ── Callout / notice boxes ──
 * The one component that does NOT take the blog palette, deliberately. A tip and
 * a warning are a signalling system, not decoration: the colour IS the meaning,
 * and the reader should know which one it is before reading a word. Flattening
 * all three onto the same warm neutral (v0.9.0) threw that away, so each type
 * gets its own tinted ground back. */
.dmc-callout { display: flex; gap: 14px; border-radius: 4px; padding: 18px 20px; margin: 26px 0; font-size: 15px; line-height: 1.65; border: 1px solid; border-left-width: 3px; }
.dmc-callout .dmc-callout-ic { flex: 0 0 22px; margin-top: 2px; }
.dmc-callout > div > *:last-child { margin-bottom: 0; }
.dmc-callout p:last-child { margin-bottom: 0; }
.dmc-callout-info { background: #f4f8ff; border-color: #cfe0fb; border-left-color: #2f6bff; color: #1e3a5f; }
.dmc-callout-info .dmc-callout-ic { color: #2f6bff; }
.dmc-callout-info strong { color: #12294a; }
.dmc-callout-tip { background: #f0fdf6; border-color: #bbf0d0; border-left-color: #16a34a; color: #14532d; }
.dmc-callout-tip .dmc-callout-ic { color: #16a34a; }
.dmc-callout-tip strong { color: #0b3a1e; }
.dmc-callout-aviso { background: #fff8f0; border-color: #faddb0; border-left-color: #d97706; color: #7c4a03; }
.dmc-callout-aviso .dmc-callout-ic { color: #d97706; }
.dmc-callout-aviso strong { color: #5a3502; }

/* ── Two-column blocks: comparison and pros/cons ─────────────────────────────
 * TWO different components that happen to share a skeleton, and picking the
 * wrong one is a real content bug:
 *
 *   [dmc_compare] — two NEUTRAL options being weighed against each other
 *                   ("Impresso" vs "Digital"). Both columns are equal; the
 *                   bullets are statements, not verdicts.
 *   [dmc_proscons] — ONE thing's advantages against its disadvantages. Green
 *                   ticks and red crosses are a judgement, and they only make
 *                   sense when a judgement is what is being made.
 *
 * Dressing a comparison as pros/cons tells the reader that everything in the
 * right-hand column is a drawback, which is exactly the wrong message. */
.dmc-proscons { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; margin: 28px 0; }
@media (max-width: 620px) { .dmc-proscons { grid-template-columns: 1fr; } }
.dmc-pros, .dmc-cons, .dmc-opt {
  border: 1px solid #e7e1d3; border-radius: 6px; padding: 0 24px 22px; background: #fff;
  overflow: hidden;   /* so the header bar's corners follow the card's */
  box-shadow: 0 16px 30px -28px rgba(22, 22, 22, .6);
}

/* A dark header bar, the same treatment the tables use, so the two columns read
   as a designed pair instead of two bordered boxes. The accent colour moves to a
   rule under the bar, where it labels the column without tinting the whole card. */
.dmc-pros h4, .dmc-cons h4, .dmc-opt h4 {
  margin: 0 -24px 18px; padding: 16px 24px 14px;
  /* Playfair, NOT VOGA. At 22px VOGA is thin and hard to read; it only holds up
     at headline sizes. The post titles use this face anyway, so the columns now
     match the article they sit in. */
  font-family: var(--dmc-serif); font-weight: 600; font-size: 21px; line-height: 1.15;
  letter-spacing: .005em; background: var(--dmc-ink);
  border-bottom: 2px solid;
  /* !important because the site's own inline CSS carries `.single :is(h1,…,h6){color:#212121}`
     — `:is()` takes its most specific argument, so that is (0,1,1), identical to
     `.dmc-opt h4`, and an inline <style> in wp_head prints after our enqueued sheet.
     Same trap as the v0.8.4 pop-up headline. Any dark-ground heading needs this. */
  color: #fff !important;
}
.dmc-pros h4 { border-bottom-color: #3f8f5f; }
.dmc-cons h4 { border-bottom-color: #c2571f; }
.dmc-opt h4 { border-bottom-color: var(--dmc-gold); }

.dmc-proscons ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.dmc-proscons li { position: relative; padding-left: 28px; margin: 12px 0; font-size: 15px; line-height: 1.55; color: #46443e; }
.dmc-proscons li::marker { content: ''; }
.dmc-pros li::before { content: '✓'; position: absolute; left: 0; top: -1px; color: #3f8f5f; font-weight: 700; }
.dmc-cons li::before { content: '✕'; position: absolute; left: 1px; top: -1px; color: #c2571f; font-weight: 700; }
/* A GOLD tick, not a green one: still reads as a positive point, but both columns
   carry the same mark, so neither is the losing side. (The dash was neutral and
   also inert — it looked like a list bullet nobody had styled.) */
.dmc-opt li::before { content: '✓'; position: absolute; left: 0; top: -1px; color: var(--dmc-gold-ink); font-weight: 700; }
/* A comparison of three or more options stays readable by dropping to one column
   sooner than the two-option layout does. */
.dmc-proscons-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .dmc-proscons-3 { grid-template-columns: 1fr; } }

/* ── Stat highlights ────────────────────────────────────────────────────────
 * The article's punctuation mark. It borrows the author box wholesale: the wall
 * texture under #161616 at .9, the 2px gold rule across the top, VOGA numerals
 * in gold, and uppercase letterspaced labels. Dropped mid-article it stops the
 * scroll the way a pull quote does, and it is unmistakably the same brand as the
 * block that closes the page.
 *
 * `[dmc_stats style="claro"]` gives the cream variant for articles that already
 * carry a dark block nearby.
 *
 * The column count comes from the shortcode (.dmc-stats-2/3/4). auto-fit used to
 * pick four tracks for three stats, which left a hole and wrapped the last one. */
.dmc-stats {
  position: relative; overflow: hidden; margin: 36px 0;
  padding: 32px 30px 34px;
  /* Flat ink, not the wall photograph: the texture competed with the numerals and
     cost a request. The tooth comes from an inline SVG grain instead. */
  background: var(--dmc-ink);
  border-radius: 4px;
}
.dmc-stats::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--dmc-noise); background-size: 160px 160px;
  opacity: .05; mix-blend-mode: overlay;
}
/* Gold rule the FULL width. The author box's 22%-then-fade version reads as a
   deliberate detail on a big closing block, but at this size it just looked
   clipped. */
.dmc-stats::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--dmc-gold); }
.dmc-stats-lab { position: relative; z-index: 1; display: block; margin-bottom: 26px; font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--dmc-gold); line-height: 1; }
.dmc-stats-grid { position: relative; z-index: 1; display: grid; gap: 28px 0; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.dmc-stats-1 .dmc-stats-grid { grid-template-columns: minmax(0, 1fr); }
.dmc-stats-2 .dmc-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dmc-stats-4 .dmc-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 700px) { .dmc-stats-3 .dmc-stats-grid, .dmc-stats-4 .dmc-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 430px) { .dmc-stats-2 .dmc-stats-grid, .dmc-stats-3 .dmc-stats-grid, .dmc-stats-4 .dmc-stats-grid { grid-template-columns: minmax(0, 1fr); } }

/* A container, so .dmc-stat-value can size itself against ITS OWN column width. */
.dmc-stat { min-width: 0; padding: 0 22px; container-type: inline-size; }
/* Hairline dividers between columns, never before the first or after a wrap. */
.dmc-stat + .dmc-stat { border-left: 1px solid rgba(197, 169, 88, .28); }
@media (max-width: 700px) { .dmc-stats-3 .dmc-stat:nth-child(2n+1), .dmc-stats-4 .dmc-stat:nth-child(2n+1) { border-left: 0; } }
@media (max-width: 430px) { .dmc-stat + .dmc-stat { border-left: 0; border-top: 1px solid rgba(197, 169, 88, .28); padding-top: 24px; } }

.dmc-stat-value {
  font-family: var(--dmc-display); font-weight: 400;
  /* Sized UP for VOGA. It has a small x-height, so it reads a size or two smaller
     than Playfair at the same px — the numbers looked timid at 2.7rem. Still
     capped, because a word value ("Estático") breaks mid-word if the track is
     narrower than the word. */
  /* Fit the value to ONE line instead of managing what happens when it wraps.
     `--dmc-stat-w` is the shortcode's estimate of the string's width in em; 1cqi is 1%
     of this stat's own column. So `100cqi / w` is the size at which the string spans
     the column exactly, and `min()` takes it only when it is smaller than the normal
     size — "3 semanas" or "60%" is untouched, "8 a 12 semanas" steps down just enough
     to hold one line. The floor stops a very long string shrinking into the label. */
  font-size: max(1.7rem, min(
    clamp(2.4rem, 1.5rem + 2.6vw, 3.4rem),
    calc(100cqi / var(--dmc-stat-w, 6))
  ));
  line-height: 1.02; letter-spacing: .005em; color: var(--dmc-gold);
  hyphens: none; overflow-wrap: break-word; text-wrap: nowrap;

  /* Fitting each value to its column means neighbouring values can end up at
     different sizes, which puts them on different baselines and pushes their labels
     to different heights. Reserving the FULL-SIZE line box and seating the text at
     the bottom of it gives every column one shared baseline and one label height,
     whatever size each value resolved to. */
  display: flex; align-items: flex-end;
  min-height: calc(clamp(2.4rem, 1.5rem + 2.6vw, 3.4rem) * 1.02);
}
/* No container queries: keep the old behaviour rather than a broken size. */
@supports not (container-type: inline-size) {
  .dmc-stat-value { font-size: clamp(2.4rem, 1.5rem + 2.6vw, 3.4rem); text-wrap: balance; display: block; min-height: 0; }
}
.dmc-stat-label { margin-top: 13px; font-size: 11.5px; font-weight: 500; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: #949289; }

/* ── H3 markers ──────────────────────────────────────────────────────────────
   Long stretches of an article carry no image, table or diagram — correctly, they
   occur naturally — and read as an undifferentiated grey rhythm. These give each
   subsection a visible start WITHOUT numbering it, so they fit any H3 anywhere
   rather than only a list. Chosen in Definições; the body class does the switching,
   so changing it restyles every article at once.

   `filete` is the default because it is the only one that adds nothing to the LEFT
   of the column: paragraphs, tables and diagrams all start on the same vertical
   line, and an indent on the heading alone would break that alignment. */
.single-post .entry-content h3 { position: relative; }

/* Filete — a short gold rule under the heading. */
.dmc-h3-filete.single-post .entry-content h3 { padding-bottom: 11px; }
.dmc-h3-filete.single-post .entry-content h3::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 38px; height: 2px; background: var(--dmc-gold);
}

/* Marca — a solid gold block hanging to the left. */
.dmc-h3-marca.single-post .entry-content h3 { padding-left: 26px; }
.dmc-h3-marca.single-post .entry-content h3::before {
  content: ''; position: absolute; left: 0; top: .44em; width: 12px; height: 12px;
  background: var(--dmc-gold); border-radius: 2px;
}

/* Tab — a vertical hairline running the height of the heading. */
.dmc-h3-tab.single-post .entry-content h3 { padding-left: 20px; }
.dmc-h3-tab.single-post .entry-content h3::before {
  content: ''; position: absolute; left: 0; top: .14em; bottom: .14em; width: 3px;
  background: var(--dmc-gold); border-radius: 2px;
}

/* Fantasma — the numeral as texture. It still implies an ORDER, so it is scoped to
   a section explicitly marked as an enumeration and never applied blindly. */
.dmc-h3-fantasma .single-post .entry-content .dmc-enum { counter-reset: dmc-enum; }
.dmc-h3-fantasma .single-post .entry-content .dmc-enum h3 { counter-increment: dmc-enum; padding-left: 52px; }
.dmc-h3-fantasma .single-post .entry-content .dmc-enum h3::before {
  content: counter(dmc-enum); position: absolute; left: 0; top: 50%; transform: translateY(-52%);
  font-family: var(--dmc-serif); font-size: 46px; line-height: 1;
  color: var(--dmc-gold); opacity: .26; font-variant-numeric: tabular-nums;
}

/* Marcador — a soft gold wash. Note it competes with the yellow highlight the theme
   puts on in-article links; two different coloured grounds on one page teach the
   reader that a coloured ground means nothing. */
.dmc-h3-marcador.single-post .entry-content h3 {
  box-shadow: inset 0 -.30em 0 rgba(197, 169, 88, .30);
  display: inline; padding: 0 .06em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* Régua — the heading sits on a hairline running out to the column edge. */
.dmc-h3-regua.single-post .entry-content h3 { display: flex; align-items: center; gap: 16px; }
.dmc-h3-regua.single-post .entry-content h3::after {
  content: ''; flex: 1; height: 1px; background: var(--dmc-line, #ddd6c7);
}

/* ── H2 rule (optional) ── */
.dmc-h2-rule.single-post .entry-content h2 {
  position: relative; padding-bottom: 14px; border-bottom: 1px solid var(--dmc-line, #ddd6c7);
}
.dmc-h2-rule.single-post .entry-content h2::after {
  content: ''; position: absolute; left: 0; bottom: -1px; width: 72px; height: 3px; background: var(--dmc-gold);
}

/* ── Citation ────────────────────────────────────────────────────────────────
   A real, attributed quotation from someone outside the article. Styled to read as
   another voice — serif italic, gold rule — rather than as one of our own boxes. */
.dmc-quote {
  margin: 32px 0; padding: 4px 0 4px 26px; border-left: 3px solid var(--dmc-gold);
  background: none; font-style: normal;
}
.dmc-quote p {
  margin: 0 0 10px; font-family: var(--dmc-serif); font-style: italic;
  font-size: 20px; line-height: 1.5; color: var(--dmc-ink); max-width: 44ch;
}
.dmc-quote cite {
  display: block; font-style: normal; font-size: 12.5px; letter-spacing: .06em; color: var(--dmc-gold-ink);
}
.dmc-quote cite b { font-weight: 600; color: var(--dmc-ink); }

/* ── Named things (typefaces, tools, suppliers) ──
   Italic, not bold: bold implies a hierarchy that is not true, and many bold words
   in one paragraph speckle the page. */
.dmc-n { font-style: italic; color: var(--dmc-ink); }

/* Light variant — the banner C "ficha creme" ground. */
.dmc-stats-claro { background: var(--dmc-cream); border: 1px solid #e7e1d3; }
.dmc-stats-claro::before { opacity: .035; mix-blend-mode: multiply; }
.dmc-stats-claro .dmc-stats-lab { color: var(--dmc-gold-ink); }
.dmc-stats-claro .dmc-stat-value { color: var(--dmc-ink); }
.dmc-stats-claro .dmc-stat-label { color: #6f6d67; }
.dmc-stats-claro .dmc-stat + .dmc-stat { border-color: #e0d8c4; }

/* ── Definition box ── */
.dmc-definition { background: #faf8f4; border: 1px solid #ece7dc; border-left: 3px solid var(--dmc-gold); border-radius: 4px; padding: 18px 22px; margin: 26px 0; font-size: 15.5px; line-height: 1.7; color: #3a3730; }
.dmc-definition-term { font-weight: 700; color: var(--dmc-ink); }

/* ── Schematic diagram ──
 * Narrower than a photo on purpose: a schematic reads better small and looks
 * amateurish blown up to full column width. Cream ground so the white shapes
 * inside the SVG have something to sit on. */
.single-post .entry-content figure.dmc-diagram {
  margin: 32px 0 !important;
  /* Full width of the article container by default. A schematic capped at 440px
     was legible but small; the SVG is vector, so letting it fill the column
     costs nothing and makes the labels comfortably readable. `max="…"` on the
     shortcode still narrows an individual diagram when one wants it. */
  width: 100%;
  max-width: var(--dmc-diagram-max, 100%);
  /* Explicit, not inherited from the theme's reset: with content-box, `width: 100%`
     plus 24px of side padding makes the figure ~46px wider than the column it sits in. */
  box-sizing: border-box;
  padding: 22px 24px 18px;
  background: var(--dmc-cream);
  border: 1px solid #e7e1d3; border-top: 2px solid var(--dmc-gold);
  border-radius: 4px; text-align: center;
}
.single-post .entry-content figure.dmc-diagram img {
  display: block; width: 100%; height: auto; margin: 0 auto;
  border-radius: 0;   /* it is a schematic, not a photo — the 12px would look odd */
}
.single-post .entry-content figure.dmc-diagram figcaption {
  margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: #6f6d67; text-align: center;
}

/* The expand control sits over the top-right of the drawing. */
.dmc-diagram-frame { position: relative; }
.dmc-diagram-expand {
  position: absolute !important; top: 8px !important; right: 8px !important;
  width: 36px; height: 36px; padding: 0 !important; margin: 0 !important;
  border: 1px solid #e0d8c4 !important; border-radius: 4px !important;
  background: rgba(255, 255, 255, .94) !important;
  cursor: zoom-in; display: grid; place-items: center;
  /* !important on the colour in BOTH states: the icon is drawn from currentColor and
     the theme's own button:hover sets color to white, which turned this control into
     a blank white square on hover. */
  color: var(--dmc-gold-ink) !important;
  transition: background .12s, border-color .12s;
}
.dmc-diagram-expand:hover {
  background: #fff !important;
  border-color: var(--dmc-gold) !important;
  color: var(--dmc-ink) !important;
}
.dmc-diagram-expand:focus-visible { outline: 2px solid var(--dmc-gold); outline-offset: 2px; }
/* Two corner brackets drawn from borders — no glyph, so no font dependency.
   Both corners are absolutely positioned inside a fixed 15x15 box: the previous
   version offset the second one with `position: relative`, which grew the element
   past its own width and left the mark visibly off-centre in the button. */
.dmc-diagram-expand span { position: relative; display: block; width: 15px; height: 15px; }
.dmc-diagram-expand span::before, .dmc-diagram-expand span::after {
  content: ''; position: absolute; width: 7px; height: 7px; border: 2px solid currentColor;
}
.dmc-diagram-expand span::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.dmc-diagram-expand span::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* ── Mobile: let the drawing use the whole screen ──
 * The figure's own padding sits inside the article's padding, so a schematic ends up
 * roughly 200px wide on a phone and its labels land near 4px. `margin-inline` with
 * `calc(50% - 50vw)` breaks it out to the viewport edge without a transform, so it
 * creates no containing block and nothing inside it shifts. */
@media (max-width: 700px) {
  .single-post .entry-content figure.dmc-diagram {
    /* Reclaim the figure's OWN side padding so the drawing spans the full content
       column. It deliberately does not break out to the screen edge: the article sits
       in a card, and a diagram hanging past it reads as a layout bug rather than as
       emphasis. The zoom below is what handles the cases this is still too small for. */
    margin: 24px 0 !important;
    box-sizing: border-box;
    width: 100%; max-width: 100%;
    padding: 14px 6px 12px;
  }
  .single-post .entry-content figure.dmc-diagram figcaption { padding: 0 8px; }
}

/* ── Zoom overlay ──
 * The image is shown at a legible minimum width and panned, rather than fitted to a
 * screen it was never going to be legible on. `touch-action: pinch-zoom` keeps the
 * browser's own zoom working inside the dialog on top of that. */
dialog.dmc-zoom {
  /* Pinned with inset, and the controls below are positioned against THIS box rather
     than left to `position: fixed`. Inside a top-layer dialog whose content overflows,
     a fixed child resolved against a box wider than the screen and put the close
     button off the right edge of a phone — measured at left 397 on a 390px viewport. */
  position: fixed; inset: 0;
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  background: var(--dmc-cream) !important; color: var(--dmc-ink);
}
dialog.dmc-zoom::backdrop { background: rgba(22, 22, 22, .82); }
.dmc-zoom-scroll {
  width: 100%; height: 100%; overflow: auto; touch-action: pinch-zoom;
  display: grid; place-items: center; padding: 74px 14px 18px;
}
.dmc-zoom-scroll img { display: block; width: auto; min-width: 760px; max-width: none; height: auto; }
@media (min-width: 900px) { .dmc-zoom-scroll img { min-width: 0; max-width: 92vw; } }
dialog.dmc-zoom .dmc-zoom-close {
  margin: 0 !important;   /* theme adds margin-right; it lands on top of `right` */
  /* Pinned with !important: the theme's own button rules were pulling this flush into
     the corner, and it is the only way out of the overlay besides Esc. */
  position: absolute !important; top: 18px !important; right: 18px !important; z-index: 3;
  width: 44px; height: 44px; padding: 0 !important; border-radius: 50% !important;
  display: grid; place-items: center; cursor: pointer;
  background: var(--dmc-ink) !important;
  color: #fff !important;
  border: 1px solid var(--dmc-ink) !important;
  box-shadow: 0 1px 6px rgba(22, 22, 22, .18);
}
dialog.dmc-zoom .dmc-zoom-close:hover { background: #000 !important; color: #fff !important; }
/* The X, drawn from two bars so there is no glyph and no font dependency. */
dialog.dmc-zoom .dmc-zoom-close span { position: relative; display: block; width: 16px; height: 16px; }
dialog.dmc-zoom .dmc-zoom-close span::before,
dialog.dmc-zoom .dmc-zoom-close span::after {
  content: ''; position: absolute; left: 0; top: 7px; width: 16px; height: 2px;
  background: currentColor; border-radius: 1px;
}
dialog.dmc-zoom .dmc-zoom-close span::before { transform: rotate(45deg); }
dialog.dmc-zoom .dmc-zoom-close span::after { transform: rotate(-45deg); }
dialog.dmc-zoom .dmc-zoom-close:focus-visible { outline: 2px solid var(--dmc-gold); outline-offset: 2px; }
dialog.dmc-zoom .dmc-zoom-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  margin: 0 !important;   /* a <p> margin-bottom lifts this off the floor */ padding: 10px 16px;
  background: rgba(250, 248, 243, .96); border-top: 1px solid #e7e1d3;
  font-size: 12.5px; line-height: 1.45; color: #6f6d67; text-align: center;
}

/* ── Table of contents (native) ──────────────────────────────────────────────
 * A map, so it has to be scannable at a glance.
 *
 * THE FIGHT, measured on the live page rather than guessed at. The site's own
 * inline CSS carries:
 *
 *   .single-post .entry-content a:not(#mktbtnx):not(.lwptoc a):not(#mktbtnx *):not(.lwptoc *) {
 *       font-weight: bold !important;
 *       background-image: linear-gradient(rgba(255,235,0,.35), …);   <- the yellow highlight
 *       background-size: 100% .6em;
 *       padding: .1em .1em;                                          <- flattens our rows
 *   }
 *
 * `:not()` takes the specificity of its argument, so `#mktbtnx` makes that rule
 * (1,2,1) — and `font-weight` is `!important` on top. No class selector can win,
 * which is why the first two attempts shipped a flat, yellow-barred list: every
 * row bold, padding collapsed to 1.55px, numbers sitting under the text.
 *
 * Note the site already exempts `.lwptoc a` — the old TOC plugin had exactly this
 * problem solved by hand. Ours instead scopes under TWO ids (nav + list), which
 * outranks (1,2,1) no matter the load order.
 *
 * Hierarchy: H2 rows numbered, ink, larger; H3 rows indented and lighter on a
 * gold rail that lights up on hover.
 */
#dmc-toc {
  margin: 32px 0; padding: 4px 0 0;
  background: var(--dmc-cream); border: 1px solid #e7e1d3; border-top: 2px solid var(--dmc-gold);
  border-radius: 0 0 4px 4px;
}
#dmc-toc .dmc-toc-head {
  display: flex !important; align-items: center; justify-content: space-between; gap: 14px;
  width: 100% !important; padding: 16px 24px 14px !important; margin: 0 !important;
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  font-family: var(--dmc-serif) !important; font-size: 22px !important; font-weight: 600 !important;
  letter-spacing: normal !important; text-transform: none !important; line-height: 1.2 !important;
  color: var(--dmc-ink) !important; text-align: left !important; cursor: pointer;
}
#dmc-toc .dmc-toc-head::before, #dmc-toc .dmc-toc-head::after { display: none !important; content: none !important; }
#dmc-toc .dmc-toc-head:hover { background: none !important; color: var(--dmc-ink) !important; }
#dmc-toc .dmc-toc-x { position: relative; width: 11px; height: 11px; flex: 0 0 auto; }
#dmc-toc .dmc-toc-x::before, #dmc-toc .dmc-toc-x::after { content: ''; position: absolute; background: var(--dmc-gold-ink); transition: transform .25s var(--dmc-ease); }
#dmc-toc .dmc-toc-x::before { left: 0; top: 4.5px; width: 11px; height: 2px; }
#dmc-toc .dmc-toc-x::after { left: 4.5px; top: 0; width: 2px; height: 11px; }
#dmc-toc .dmc-toc-head[aria-expanded="true"] .dmc-toc-x::after { transform: scaleY(0); }

#dmc-toc #dmc-toc-list { list-style: none !important; margin: 0 !important; padding: 2px 24px 16px !important; counter-reset: dmctoc; }
#dmc-toc #dmc-toc-list[hidden] { display: none; }
#dmc-toc #dmc-toc-list li { margin: 0 !important; padding: 0 !important; }
#dmc-toc #dmc-toc-list li::marker { content: '' !important; }

/* Strip the site's link treatment first — highlight, padding, margin, bold — then
   re-apply ours. Two ids beat its (1,2,1), and !important answers its !important. */
/* Descendant, NOT `li > a`: the H3 links now sit inside `.dmc-toc-sub`, so a
   direct-child combinator stopped matching them and the yellow highlight came
   straight back on the sub-rows. Two ids still outrank the site's (1,2,1). */
#dmc-toc #dmc-toc-list a {
  display: block; position: relative;
  background: none !important; background-image: none !important; background-size: auto !important;
  text-decoration: none !important; box-shadow: none !important; border-bottom: 0 !important;
  margin: 0 !important;
  transition: color .18s ease;
}

/* H2 — the spine. Numerals in the BODY face, not the serif: at 13px a Playfair
   figure is thin and hard to read, exactly the problem VOGA had in the stat band. */
#dmc-toc #dmc-toc-list li.dmc-toc-l2 { counter-increment: dmctoc; padding: 7px 0 !important; }
#dmc-toc #dmc-toc-list li.dmc-toc-l2 + li.dmc-toc-l2 { border-top: 1px solid #e9e2d2; }
#dmc-toc #dmc-toc-list li.dmc-toc-l2 > a {
  padding: 0 0 0 34px !important;
  font-size: 15.5px !important; font-weight: 600 !important; line-height: 1.35 !important;
  color: var(--dmc-ink) !important;
}
#dmc-toc #dmc-toc-list li.dmc-toc-l2 > a::before {
  content: counter(dmctoc, decimal-leading-zero);
  position: absolute; left: 0; top: 1px;
  font-family: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.5;
  color: var(--dmc-gold-ink); font-variant-numeric: tabular-nums;
}
#dmc-toc #dmc-toc-list li.dmc-toc-l2 > a:hover { color: var(--dmc-gold-ink) !important; }

/* H3 — inline under their H2, middot-separated. Three sub-sections cost one
   wrapped line instead of three rows, which is where the height went. */
#dmc-toc .dmc-toc-sub { padding-left: 34px; }
#dmc-toc .dmc-toc-sub:not(:empty) { margin-top: 4px; }
#dmc-toc #dmc-toc-list a.dmc-toc-l3 {
  display: inline !important; position: static;
  padding: 0 !important; margin: 0 !important;
  font-size: 13.2px !important; font-weight: 400 !important; line-height: 1.55 !important;
  color: #78756d !important;
}
#dmc-toc #dmc-toc-list a.dmc-toc-l3 + a.dmc-toc-l3::before {
  content: '·'; margin: 0 7px; color: var(--dmc-gold); font-weight: 700;
}
#dmc-toc #dmc-toc-list a.dmc-toc-l3:hover { color: var(--dmc-ink) !important; }
#dmc-toc #dmc-toc-list li.dmc-toc-orphan > a { display: none; }

/* FONT-WEIGHT NEEDS ONE MORE ID. Counting the site rule properly:
 *   .single-post .entry-content a:not(#mktbtnx):not(.lwptoc a):not(#mktbtnx *):not(.lwptoc *)
 * `:not()` contributes its argument's specificity, and TWO of those arguments
 * contain `#mktbtnx` — so the rule is ~(2,4,2), not the (1,2,1) I first read. Its
 * `background-image` is not !important, so our reset wins that on !important
 * alone; but `font-weight: bold !important` ties on !important and then beats a
 * two-id selector on the class count. Repeating the id is the cheapest legal way
 * to add a third and settle it — measured, not assumed: computed font-weight was
 * still 700 until this rule existed. */
#dmc-toc#dmc-toc #dmc-toc-list li.dmc-toc-l2 > a { font-weight: 600 !important; }
#dmc-toc#dmc-toc #dmc-toc-list a.dmc-toc-l3 { font-weight: 400 !important; }
#dmc-toc#dmc-toc .dmc-toc-head { font-weight: 600 !important; }

@media (max-width: 600px) {
  #dmc-toc .dmc-toc-head { font-size: 19px !important; padding: 14px 18px 12px !important; }
  #dmc-toc #dmc-toc-list { padding: 0 18px 16px !important; }
}

/* Anchored headings: keep the sticky header from covering the target on jump. */
.single-post .entry-content h2[id], .single-post .entry-content h3[id] { scroll-margin-top: 90px; }

/* ── Tables stacked on the phone (setting: table_stack_mobile, on by default) ──
 * Each row becomes a labelled card. `data-label` is written onto every cell from
 * its column header by dmc_table_labels(), so a figure never loses the column it
 * belongs to. */
@media (max-width: 600px) {
  .dmc-stack-tables .dmc-table-wrap { overflow-x: visible; border: 0; background: none; border-radius: 0; }
  .dmc-stack-tables .dmc-table { font-size: 14.5px; }
  .dmc-stack-tables .dmc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dmc-stack-tables .dmc-table tbody tr {
    display: block; margin: 0 0 12px; background: #fff;
    border: 1px solid #e7e1d3; border-top: 2px solid var(--dmc-gold); border-radius: 8px; overflow: hidden;
  }
  .dmc-stack-tables .dmc-table tbody tr:hover { background: #fff; }
  .dmc-stack-tables .dmc-table tbody td { display: flex; gap: 14px; justify-content: space-between; align-items: baseline; padding: 10px 14px; border-top: 1px solid #f2ede2; white-space: normal; }
  .dmc-stack-tables .dmc-table tbody td:first-child { background: #faf8f4; font-size: 15.5px; }
  .dmc-stack-tables .dmc-table tbody tr td:first-child { border-top: 0; }
  .dmc-stack-tables .dmc-table tbody td::before {
    content: attr(data-label); flex: 0 0 38%;
    font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: #9a938a; line-height: 1.5;
  }
  .dmc-stack-tables .dmc-table tbody td:not([data-label])::before { content: none; }
  .dmc-stack-tables .dmc-table tbody td:first-child::before { color: var(--dmc-gold-ink); }
}

/* ── Image placeholder ── */
.single-post .entry-content figure.dmc-ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  margin: 30px 0 !important; width: 100%;
  background: repeating-linear-gradient(45deg, #efece6 0 10px, #e9e5dd 10px 20px);
  border: 1px dashed #cdc6b6; border-radius: 12px; color: #8a8272;
}
.single-post .entry-content figure.dmc-ph .dmc-ph-ic {
  width: 34px; height: 28px; border: 2px solid currentColor; border-radius: 3px; position: relative; opacity: .55;
}
.single-post .entry-content figure.dmc-ph .dmc-ph-ic::before { content: ''; position: absolute; left: 4px; bottom: 4px; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 11px solid currentColor; }
.single-post .entry-content figure.dmc-ph .dmc-ph-ic::after { content: ''; position: absolute; right: 5px; top: 4px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.single-post .entry-content figure.dmc-ph .dmc-ph-t { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-align: center; padding: 0 16px; }

/* ── Reading time (in the updated-pill row) ── */
.dmc-readtime { align-items: center; gap: 5px; color: #64748b; font-size: 11px; font-weight: 500; }

/* ── Sticky mobile CTA bar ── */
.dmc-sticky { display: none; }
@media (max-width: 782px) {
  .dmc-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; display: flex; align-items: center; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-top: 1px solid #e6e9ef; box-shadow: 0 -8px 24px -12px rgba(15,23,42,.25); }
  .dmc-sticky-txt { flex: 1 1 auto; font-size: 13px; font-weight: 600; color: var(--dmc-navy); line-height: 1.3; }
  .dmc-sticky .dmc-cta-btn { padding: 11px 18px !important; font-size: 14px !important; box-shadow: none !important; }
}

/* ── Belt and braces for wpautop ──
 * dmc_unautop_between() cleans this at render time, but posts published before
 * v0.8.6 (and anything pasted through the Visual editor) can still carry a stray
 * <br> or an empty <p> inside a container. In a grid those count as items and
 * shove the real ones onto a second row, so make sure they can never lay out. */
.dmc-stats-grid > br, .dmc-proscons > br, .dmc-faq > br, .dmc-takeaways > br,
.dmc-stats-grid > p:empty, .dmc-proscons > p:empty, .dmc-faq > p:empty,
.dmc-pros > p:empty, .dmc-cons > p:empty, .dmc-opt > p:empty,
.dmc-table-wrap > br, .dmc-table-wrap > p:empty {
  display: none !important;
}

/* ── Article rhythm: images need air on BOTH sides ──
 * The first pass only fixed the gap above. A figure still had 12px under it, so
 * an <h2> after an image sat almost on top of it — the same complaint, other
 * side. The figure now owns symmetric margin and the following heading adds its
 * own, which is what makes a new section read as a new section.
 * Scoped to the post body so it cannot touch Elementor layouts. */
.single-post .entry-content figure.wp-block-image,
.single-post .entry-content > figure { margin: 34px 0 34px !important; }
.single-post .entry-content figure.wp-block-image img,
.single-post .entry-content > figure img {
  display: block; width: 100%; height: auto;
  border-radius: 12px;   /* media is rounded; editorial furniture stays at 4px */
}
.single-post .entry-content figure + h2 { margin-top: 46px !important; }
.single-post .entry-content figure + h3 { margin-top: 38px !important; }
.single-post .entry-content figure + p { margin-top: 26px !important; }
.single-post .entry-content figure figcaption { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: #8a8880; }

@media (prefers-reduced-motion: reduce) {
  .dmc-faq-answer, .dmc-faq-item summary::after, .dmc-cta-btn, .dmc-cta-btn .dmc-arrow, .dmc-related-card,
  .dmc-related-thumb img, .dmc-related-go::after,
  .dmc-modal .dmc-scrim, .dmc-modal-card, .dmc-bar i, .dmc-chip, .dmc-inp, .dmc-modal-close { transition: none !important; }
  .dmc-step.is-on { animation: none !important; }
}

/* ── Commercial block [dmc_offer] ────────────────────────────────────────────
 * Top-of-article counterpart to the end banner, for commercial pages that rank and
 * do not convert. Three weights; "b" is the default because "c" competes with the end
 * banner and, as the first thing after the H1, gives an organic result the feel of a
 * paid landing page. Numbers come from the same filter the end banner uses. */
.dmc-offer { margin: 0 0 32px; }
.dmc-offer-k {
  display: block; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dmc-gold-ink); margin-bottom: 9px; font-weight: 600;
}
.dmc-offer .dmc-offer-t {
  font-family: var(--dmc-serif); font-weight: 400; font-size: 24px; line-height: 1.25;
  color: var(--dmc-ink); margin: 0 0 9px; text-wrap: balance; max-width: 26ch;
}
.dmc-offer .dmc-offer-x { margin: 0 0 18px; font-size: 15.8px; line-height: 1.68; color: #4a4842; max-width: 62ch; }
.dmc-offer p { margin: 0 0 18px; }

/* The rating: 5,0 with five gold stars beside it, review count under it behind the G. */
.dmc-offer-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start;
  border-top: 1px solid #e4ddcc; padding-top: 16px; margin-bottom: 18px; }
.dmc-offer-proof { padding-right: 18px; min-width: 0; }
.dmc-offer-proof + .dmc-offer-proof { border-left: 1px solid #e4ddcc; padding-left: 18px; }
.dmc-offer-v {
  display: block; font-family: var(--dmc-serif); font-size: 23px; line-height: 1.1;
  color: var(--dmc-gold-ink); white-space: nowrap;
}
.dmc-offer-stars { color: var(--dmc-gold); font-size: 14px; letter-spacing: .08em; vertical-align: .12em; }
.dmc-offer-l {
  display: flex; align-items: center; gap: 6px; margin-top: 5px;
  font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: #8a877f; line-height: 1.35;
}
.dmc-offer-l .dmc-g { flex: 0 0 auto; }
.dmc-offer-cta { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.dmc-offer-more {
  color: var(--dmc-gold-ink); font-weight: 600; font-size: 14px;
  text-decoration: none; border-bottom: 1px solid var(--dmc-gold);
}
.dmc-offer-more:hover { color: var(--dmc-ink); }

/* a — Discreto: a rule, not a box. */
.dmc-offer-a { padding: 2px 0 2px 22px; border-left: 3px solid var(--dmc-gold); }
.dmc-offer-a p { font-size: 17px; line-height: 1.7; color: var(--dmc-ink); margin-bottom: 10px; max-width: 60ch; }
.dmc-offer-row { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; font-size: 13.5px; color: #6f6d67; }
.dmc-offer-row b { color: var(--dmc-ink); font-weight: 600; }
.dmc-offer-row > span { display: inline-flex; align-items: center; gap: 5px; }

/* b — Ficha (default). */
.dmc-offer-b {
  background: var(--dmc-cream); border: 1px solid #e7e1d3; border-top: 2px solid var(--dmc-gold);
  border-radius: 5px; padding: 24px 26px 22px;
}

/* c — Painel. */
.dmc-offer-c { background: var(--dmc-ink); border-radius: 5px; padding: 28px 30px 26px; position: relative; overflow: hidden; }
.dmc-offer-c::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--dmc-gold); }
.dmc-offer-c .dmc-offer-k { color: var(--dmc-gold); }
/* On the ink panel the title and body must be light. Stated explicitly and with
   !important: as an <h3> this inherited the theme's heading colour and rendered
   dark-on-dark, which is the bug that made the headline nearly invisible. */
.dmc-offer-c .dmc-offer-t { color: #fff !important; font-size: 27px; max-width: 22ch; }
.dmc-offer-c .dmc-offer-x { color: #c9c5bd !important; max-width: 58ch; }
.dmc-offer-c .dmc-offer-band { border-top-color: #33312c; }
.dmc-offer-c .dmc-offer-proof + .dmc-offer-proof { border-left-color: #33312c; }
.dmc-offer-c .dmc-offer-v { color: var(--dmc-gold); font-size: 26px; }
.dmc-offer-c .dmc-offer-l { color: #8e8a82; }
.dmc-offer-c .dmc-offer-more { color: #d9c98f; border-bottom-color: #6b5c2c; }

@media (max-width: 560px) {
  .dmc-offer-band { grid-template-columns: 1fr; }
  .dmc-offer-proof + .dmc-offer-proof {
    border-left: 0; padding-left: 0; border-top: 1px solid #e4ddcc; padding-top: 12px; margin-top: 12px;
  }
  .dmc-offer-c .dmc-offer-proof + .dmc-offer-proof { border-top-color: #33312c; }
}

/* ── Component links opt out of the article-body link treatment ──────────────
 * The theme paints EVERY <a> inside .entry-content with a yellow highlight, padding
 * and bold:
 *     .single-post .entry-content a:not(#mktbtnx):not(.lwptoc a):not(#mktbtnx *):not(.lwptoc *)
 * That is specificity (2,4,2) — `:not(#mktbtnx)` appears TWICE and each `:not(#id)`
 * contributes an id. Our "Ver o serviço" link is UI, not prose, so it has to opt out.
 *
 * Two different fights in one rule, worth naming because they need different weapons:
 *   - the highlight, padding and colour are NOT !important in the theme, so plain
 *     `!important` beats them at any specificity;
 *   - `font-weight: bold !important` IS, so importance ties and specificity decides.
 *     Three ids beat two, and repeating `:not(#dmc)` is how a class-only selector
 *     gets them. Same trick the TOC needed, for the same reason.
 *
 * The CTA button is excluded: it has its own styling and `padding: 0` would flatten it. */
.dmc-offer a:not(.dmc-cta-btn):not(#dmc):not(#dmc):not(#dmc) {
  background-image: none !important;
  background-size: 0 0 !important;
  padding: 0 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  color: var(--dmc-gold-ink) !important;
}
.dmc-offer .dmc-offer-more:not(#dmc):not(#dmc):not(#dmc) {
  border-bottom: 1px solid var(--dmc-gold) !important;
}
.dmc-offer .dmc-offer-more:not(#dmc):not(#dmc):not(#dmc):hover {
  color: var(--dmc-ink) !important;
}
.dmc-offer-c a:not(.dmc-cta-btn):not(#dmc):not(#dmc):not(#dmc) { color: #d9c98f !important; }
.dmc-offer-c .dmc-offer-more:not(#dmc):not(#dmc):not(#dmc) { border-bottom-color: #6b5c2c !important; }
.dmc-offer-c .dmc-offer-more:not(#dmc):not(#dmc):not(#dmc):hover { color: #fff !important; }

/* ── [dmc_tool] — ferramenta recomendada ──────────────────────────────────────
 * Três estilos do MESMO componente, não três componentes:
 *   .dmc-tool-regua   (padrão) discreto, para usar em muitos artigos sem cansar
 *   .dmc-tool-escuro  alto contraste, para quando a ferramenta É a resposta
 *   .dmc-tool-janela  moldura de navegador, diz "do outro lado está uma app"
 * Todos são <a> — o bloco inteiro é clicável, não só o botão. */
.dmc-tool { display: flex; gap: 16px; align-items: flex-start; text-decoration: none !important;
  margin: 30px 0; box-sizing: border-box; }
.dmc-tool:hover { text-decoration: none !important; }
.dmc-tool .dmc-tool-ic { flex: none; display: grid; place-items: center; }
.dmc-tool .dmc-tool-tx { flex: 1; min-width: 0; }
.dmc-tool .dmc-tool-k { display: block; font-size: .7rem; letter-spacing: .15em; text-transform: uppercase;
  font-weight: 800; margin-bottom: 3px; }
.dmc-tool .dmc-tool-n { display: block; font-family: var(--dmc-serif); font-weight: 500; font-size: 1.2rem;
  line-height: 1.25; letter-spacing: -.005em; }
.dmc-tool .dmc-tool-d { display: block; font-size: .92rem; line-height: 1.5; margin-top: 3px; }
.dmc-tool .dmc-tool-go { flex: none; align-self: center; font-weight: 800; font-size: .87rem; white-space: nowrap; }

/* régua dourada — o padrão */
.dmc-tool-regua { background: #fff; border: 1px solid rgba(13,31,60,.14); border-left: 4px solid var(--dmc-gold);
  border-radius: 0 12px 12px 0; padding: 18px 20px; color: var(--dmc-ink);
  transition: transform .25s var(--dmc-ease), box-shadow .25s var(--dmc-ease); }
.dmc-tool-regua:hover { transform: translateX(3px); box-shadow: 0 6px 22px -12px rgba(13,31,60,.4); }
.dmc-tool-regua .dmc-tool-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--dmc-cream);
  color: var(--dmc-gold-ink); }
.dmc-tool-regua .dmc-tool-k { color: var(--dmc-gold-ink); }
.dmc-tool-regua .dmc-tool-n { color: var(--dmc-ink); }
.dmc-tool-regua .dmc-tool-d { color: #5c5c5c; }
.dmc-tool-regua .dmc-tool-go { color: var(--dmc-gold-ink); }
.dmc-tool-regua .dmc-tool-go::after { content: " \2192"; }

/* mosaico escuro — destaque */
.dmc-tool-escuro { position: relative; overflow: hidden; align-items: center; flex-wrap: wrap;
  background: var(--dmc-navy); border-radius: 14px; padding: 22px 24px; color: #fff; }
.dmc-tool-escuro::before { content: ""; position: absolute; inset: 0; background-image: var(--dmc-noise);
  opacity: .16; pointer-events: none; }
.dmc-tool-escuro > * { position: relative; }
.dmc-tool-escuro .dmc-tool-ic { width: 52px; height: 52px; border-radius: 13px;
  background: linear-gradient(140deg, var(--dmc-gold), var(--dmc-gold-dark)); color: var(--dmc-navy); }
.dmc-tool-escuro .dmc-tool-tx { min-width: 200px; }
.dmc-tool-escuro .dmc-tool-k { color: var(--dmc-gold); }
.dmc-tool-escuro .dmc-tool-n { color: #fff; font-weight: 400; font-size: 1.36rem; }
.dmc-tool-escuro .dmc-tool-d { color: #b9c4d4; }
.dmc-tool-escuro .dmc-tool-go { background: var(--dmc-gold); color: var(--dmc-navy); padding: 11px 20px;
  border-radius: 10px; transition: transform .2s var(--dmc-ease); }
.dmc-tool-escuro:hover .dmc-tool-go { transform: translateY(-2px); }

/* janela — moldura de navegador */
.dmc-tool-janela { display: block; padding: 0; border: 1px solid rgba(13,31,60,.14); border-radius: 14px;
  overflow: hidden; background: #fff; color: var(--dmc-ink); transition: box-shadow .3s var(--dmc-ease); }
.dmc-tool-janela:hover { box-shadow: 0 14px 40px -22px rgba(13,31,60,.55); }
.dmc-tool-janela .dmc-tool-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px;
  background: var(--dmc-cream); border-bottom: 1px solid rgba(13,31,60,.14); }
.dmc-tool-janela .dmc-tool-dot { width: 9px; height: 9px; border-radius: 50%; background: #d6cfc0; }
.dmc-tool-janela .dmc-tool-url { margin-left: 8px; font-size: .72rem; color: #8a8578; background: #fff;
  border: 1px solid rgba(13,31,60,.14); border-radius: 5px; padding: 3px 9px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.dmc-tool-janela .dmc-tool-body { display: flex; gap: 18px; align-items: center; padding: 20px 22px; flex-wrap: wrap; }
.dmc-tool-janela .dmc-tool-ic { width: 46px; height: 46px; border-radius: 11px; background: var(--dmc-navy);
  color: var(--dmc-gold); }
.dmc-tool-janela .dmc-tool-tx { min-width: 200px; }
.dmc-tool-janela .dmc-tool-k { color: var(--dmc-gold-ink); }
.dmc-tool-janela .dmc-tool-d { color: #5c5c5c; }
.dmc-tool-janela .dmc-tool-go { background: var(--dmc-navy); color: #fff; padding: 11px 18px; border-radius: 9px; }

@media (max-width: 560px) {
  .dmc-tool { flex-wrap: wrap; }
  .dmc-tool .dmc-tool-go { align-self: flex-start; margin-top: 4px; }
}
/* Telemóvel estreito. Medido a 320/360/390/414: não havia overflow, mas a descrição ficava
   espremida numa coluna de ~215px. Ícone e espaçamentos mais pequenos devolvem largura ao texto.
   O `min-width: 0` é o que importa mesmo: os 200px do escuro/janela podiam romper a caixa dentro
   de um contentor de tema mais estreito do que o ecrã. */
@media (max-width: 430px) {
  .dmc-tool { gap: 12px; }
  .dmc-tool .dmc-tool-n { font-size: 1.12rem; }
  /* `min-width: 0` sozinho era pior: deixava o texto encolher ao lado do ícone e o bloco escuro
     passava de 310px para 545px de altura a 320px. O texto ocupa a linha toda, por baixo do ícone. */
  .dmc-tool-escuro .dmc-tool-tx,
  .dmc-tool-janela .dmc-tool-tx { min-width: 0; flex: 1 0 100%; }
  .dmc-tool-regua { padding: 16px 15px; }
  .dmc-tool-regua .dmc-tool-ic { width: 34px; height: 34px; }
  .dmc-tool-escuro { padding: 18px 16px; }
  .dmc-tool-escuro .dmc-tool-ic { width: 42px; height: 42px; }
  .dmc-tool-escuro .dmc-tool-n { font-size: 1.2rem; }
  .dmc-tool-janela .dmc-tool-body { padding: 16px; gap: 12px; }
  .dmc-tool-janela .dmc-tool-ic { width: 38px; height: 38px; }
}