/* CC Corps · style.css
   Tokens: 07-design-system.json (CC Corps Organic Authority 1.0.0)
   Ritmo: hero escuro, blocos claros em marfim, diferenciais e depoimentos em carvão, CTA final em cartão escuro. */

/* ---------- Fontes (hospedadas no próprio site) ---------- */
/* Fontes hospedadas no próprio site (Google Fonts, licença SIL OFL 1.1). latin + latin-ext. */
@font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/jetbrains-mono-500-latin-ext.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/jetbrains-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-variable-latin-ext.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-variable.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/space-grotesk-variable-latin-ext.woff2") format("woff2"); font-weight: 500 600; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/space-grotesk-variable.woff2") format("woff2"); font-weight: 500 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  --success: #2F7148;
  --error: #A93632;
  --whatsapp: #176B3A;
  --whatsapp-hover: #12572F;
  --whatsapp-active: #0E4726;
  --white: #FFFFFF;
  --font-sans: "Manrope", Inter, Arial, sans-serif;

  --fs-h1: clamp(3rem, 2rem + 5vw, 6.5rem);
  --fs-h2: clamp(2.5rem, 1.8rem + 3vw, 4.75rem);
  --fs-h3: clamp(1.75rem, 1.35rem + 1.5vw, 3rem);
  --fs-h4: clamp(1.375rem, 1.15rem + 0.8vw, 2rem);
  --fs-h5: clamp(1.125rem, 1rem + 0.35vw, 1.375rem);
  --fs-body-lg: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
  --fs-body: clamp(1rem, 0.96rem + 0.15vw, 1.125rem);
  --fs-small: clamp(0.875rem, 0.84rem + 0.12vw, 0.9375rem);
  --fs-eyebrow: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px; --s16: 64px; --s24: 96px; --s32: 128px;
  --section: 64px;
  --gap: 16px;

  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-xl: 32px; --r-pill: 999px;
  --sh-sm: 0 2px 8px rgba(42, 38, 32, 0.08);
  --sh-md: 0 12px 32px rgba(42, 38, 32, 0.12);
  --sh-lg: 0 24px 64px rgba(16, 16, 14, 0.18);
  --sh-dark: 0 24px 80px rgba(0, 0, 0, 0.48);
  --sh-glow: 0 0 64px rgba(184, 149, 95, 0.18);
  --sh-focus: 0 0 0 3px rgba(122, 90, 43, 0.32);
  --divider: 1px solid rgba(92, 85, 75, 0.22);

  --t-fast: 120ms cubic-bezier(0.2, 0, 0, 1);
  --t-base: 220ms cubic-bezier(0.2, 0, 0, 1);
  --t-slow: 480ms cubic-bezier(0.16, 1, 0.3, 1);
  --t-entrance: 700ms cubic-bezier(0.16, 1, 0.3, 1);

  --max: 1280px;
  --gutter: 20px;
}
@media (min-width: 768px) { :root { --section: 80px; --gutter: 32px; --gap: 24px; } }
@media (min-width: 1024px) { :root { --section: clamp(96px, 10vw, 128px); --gutter: 48px; --gap: 32px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { text-size-adjust: 100%; scroll-padding-top: 112px; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.7;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--accent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; transition: color var(--t-fast); }
a:hover { color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.band-dark :focus-visible, .site-header :focus-visible, .site-footer :focus-visible, .cta-card :focus-visible { outline-color: var(--secondary); }
strong { font-weight: 700; color: inherit; }
h1, h2, h3, h4, h5, h6 { margin: 0; text-wrap: balance; }

h1 { font-size: var(--fs-h1); }
h2 { max-width: 20ch; }
.nowrap { white-space: nowrap; }
h3, h4, h5, h6 { font-family: var(--font-sans); }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.08; letter-spacing: -0.03em; max-width: 22ch; }
h4 { font-size: var(--fs-h4); font-weight: 600; line-height: 1.18; letter-spacing: -0.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.ic { width: 24px; height: 24px; flex: none; }
.ic-sm { width: 16px; height: 16px; flex: none; stroke-width: 2; }

.skip { position: absolute; left: var(--s4); top: -100px; z-index: 200; padding: var(--s3) var(--s4); background: var(--surface); color: var(--text); border-radius: var(--r-md); }
.skip:focus { top: var(--s4); }

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.section { padding-block: var(--section); background: var(--surface); }
.band-alt { background: var(--surface-alt); }
.band-dark { background: var(--surface-dark); color: var(--text-inverse); }

.eyebrow { font-size: var(--fs-eyebrow); font-weight: 700; line-height: 1.3; }

.section-head { display: grid; gap: var(--s4); margin-bottom: var(--s12); max-width: 760px; }
.section-head > p:last-child { color: var(--text-muted); font-size: var(--fs-body-lg); line-height: 1.65; letter-spacing: -0.01em; margin-top: var(--s2); }
.band-dark .section-head > p:last-child { color: var(--text-muted-inverse); }
.band-dark .section-head a { color: var(--secondary); }
.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }
.section-foot { margin-top: var(--s8); color: var(--text-muted); font-size: var(--fs-small); }
.band-dark .section-foot { color: var(--text-muted-inverse); }
.link-light { color: var(--secondary); }
.link-light:hover { color: var(--white); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; border: 1px solid transparent;
  font: 700 0.9375rem/1 var(--font-sans); text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color var(--t-base), border-color var(--t-base), color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.btn-lg { min-height: 52px; padding: 0 24px; }
.btn-block { width: 100%; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--surface-dark); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--surface-dark); transform: translateY(-2px); }
.btn-primary:active { background: var(--primary-active); transform: translateY(0); box-shadow: none; }
.btn-primary:focus-visible { outline: 3px solid rgba(230, 207, 164, 0.48); outline-offset: 3px; }
.btn-secondary { background: transparent; color: var(--text); }

.btn-secondary:active { background: var(--primary-soft); }
.btn-ghost { background: none; }

.btn-ghost:active { background: rgba(184, 149, 95, 0.2); }
.btn-whatsapp { background: var(--whatsapp); border-color: transparent; color: var(--white); }
.btn-whatsapp:hover { background: var(--whatsapp-hover); color: var(--white); transform: translateY(-2px); }
.btn-whatsapp:active { background: var(--whatsapp-active); transform: translateY(0); }

.link-arrow { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; font-weight: 600; text-decoration: none; }
.link-arrow .ic-sm { transition: transform var(--t-base); }
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover .ic-sm { transform: translate(2px, -2px); }

/* ---------- Topbar ---------- */
.topbar { font: 600 0.8125rem/1.4 var(--font-sans); }
.topbar-in { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 36px; }
.topbar-info, .topbar-contacts li, .topbar-contacts a { display: inline-flex; align-items: center; gap: var(--s2); }
.topbar .ic { width: 16px; height: 16px; stroke-width: 2; }
.topbar-contacts { display: flex; gap: var(--s6); }
.topbar a { text-decoration: none; font-weight: 600; min-height: 36px; }
.topbar a:hover { text-decoration: underline; }
.topbar a:active { opacity: 0.8; }
.tb-hours, .tb-phone, .topbar-info { display: none !important; }
@media (min-width: 768px) { .topbar-info { display: inline-flex !important; } }
@media (min-width: 1024px) { .tb-hours, .tb-phone { display: inline-flex !important; } }
@media (max-width: 767px) { .topbar-in { justify-content: center; } }

/* ---------- Header ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 110; background: var(--surface-dark); }
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 100; color: var(--text-inverse);
}
/* O desfoque fica num pseudo-elemento: backdrop-filter no próprio header prenderia o menu mobile (position: fixed) dentro dele */
.site-header::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(16, 16, 14, 0.88); backdrop-filter: blur(18px); }
.header-in { display: flex; align-items: center; gap: var(--s6); min-height: 64px; }
.logo { display: inline-flex; align-items: center; min-height: 44px; }
.logo img { object-fit: contain; }
.menu-toggle { display: none; }
.nav-list { display: flex; flex-direction: column; }
.nav-list > li > a, .mega-trigger { color: var(--text-inverse); text-decoration: none; font-weight: 600; font-size: 0.9375rem; }
.nav-mobile-foot { display: none; }
.col-toggle { display: none; }
.mega-trigger { background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: var(--s2); padding: 0; font-family: var(--font-sans); }

/* Desktop: menu com hover e foco */
@media (min-width: 1024px) {

  .nav { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--s6); }
  .nav-list { flex-direction: row; gap: var(--s8); margin-inline: auto; }
  .nav-list > li { position: static; }
  .nav-list > li > a, .mega-trigger { display: inline-flex; align-items: center; position: relative; }
  .nav-list > li > a:hover, .mega-trigger:hover, .has-mega:hover .mega-trigger, .has-mega:focus-within .mega-trigger { color: var(--secondary); }
  .nav-list > li > a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--primary); }
  .mega-trigger .ic-sm { transition: transform var(--t-base); }
  .has-mega:hover .mega-trigger .ic-sm, .has-mega:focus-within .mega-trigger .ic-sm, .mega-trigger[aria-expanded="true"] .ic-sm { transform: rotate(180deg); }

  .mega {
    position: absolute; left: 50%; top: calc(100% + 8px);
    width: min(1184px, calc(100vw - 64px));
    transform: translate(-50%, -8px);
    background: var(--surface); color: var(--text);
    border-radius: var(--r-lg); box-shadow: var(--sh-lg); overflow: hidden;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--t-base) 120ms, transform var(--t-base) 120ms, visibility 0s linear 340ms;
  }
  .mega::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
  .has-mega:hover .mega, .has-mega:focus-within .mega, .mega.is-open {
    opacity: 1; visibility: visible; pointer-events: initial; transform: translate(-50%, 0);
    transition: opacity var(--t-base) 120ms, transform var(--t-base) 120ms, visibility 0s 120ms;
  }
  /* Pelo teclado e pelo clique, o menu abre na hora (sem o atraso do mouse) */
  .has-mega:focus-within .mega, .mega.is-open { transition: opacity var(--t-base), transform var(--t-base), visibility 0s; }
  .js .mega.is-closed { opacity: 0; visibility: hidden; pointer-events: none; }
  .mega-grid { display: grid; grid-template-columns: repeat(3, 1fr) 1fr; gap: var(--s8); padding: var(--s8); }
}
.mega-title { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s2); }
.mega-title a { font: 700 var(--fs-eyebrow)/1.3 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.mega-title a:hover { text-decoration: underline; }
.mega-items { display: grid; gap: var(--s1); }
.mega-items a { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3); border-radius: var(--r-md); color: var(--text); text-decoration: none; font-weight: 400; transition: background-color var(--t-fast); }
.mega-items a:hover { background: var(--surface-alt); color: var(--text); }
.mega-items a:active { color: var(--accent); }
.mega-items .ic { color: var(--accent); margin-top: 2px; }
.mega-items strong { display: block; font-weight: 700; font-size: 0.9375rem; line-height: 1.35; }
.mega-items small { display: block; color: var(--text-muted); font-size: 0.875rem; line-height: 1.45; margin-top: 2px; }
.mega-items .mega-all a { align-items: center; gap: var(--s2); min-height: 44px; color: var(--accent); font-weight: 600; font-size: 0.875rem; }
.mega-feature { display: grid; gap: var(--s3); align-content: start; padding: var(--s4); background: var(--surface-dark); color: var(--text-inverse); border-radius: var(--r-lg); }
.mega-feature img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--border-dark); }
.mega-feature-title { font: 400 1.75rem/1.05 var(--font-display); }
.mega-feature p:not(.mega-feature-title) { font-size: 0.875rem; line-height: 1.6; color: var(--text-muted-inverse); }
.mega-feature .link-arrow { color: var(--secondary); }
.mega-strip { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: var(--s4); padding: var(--s3) var(--s8); background: var(--surface-alt); border-top: 1px solid var(--border); font-size: 0.875rem; }
.mega-strip a, .mega-strip p { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; color: var(--text); text-decoration: none; font-weight: 400; }
.mega-strip a:hover { color: var(--accent); text-decoration: underline; }
.mega-strip .ic { width: 20px; height: 20px; color: var(--accent); }

/* Mobile: painel em tela cheia (com JS) ou lista no fim do cabeçalho (sem JS) */
@media (max-width: 1023px) {
  .header-in { flex-wrap: wrap; justify-content: space-between; }
  .no-js .nav { width: 100%; padding-bottom: var(--s6); }
  .nav-list > li > a, .mega-trigger { display: flex; align-items: center; width: 100%; min-height: 56px; border-bottom: 1px solid var(--border-dark); font-size: 1.0625rem; }
  .mega { color: var(--text-inverse); }
  .mega-grid { display: grid; gap: 0; }
  .mega-col { border-bottom: 1px solid var(--border-dark); }
  .mega-title { margin: 0; }
  .mega-title a { color: var(--secondary); flex: 1; min-height: 56px; }
  .mega-items a { color: var(--text-inverse); padding-inline: 0; }
  .mega-items a:hover { background: rgba(230, 207, 164, 0.08); color: var(--text-inverse); }
  .mega-items .ic { color: var(--secondary); }
  .mega-items small { color: var(--text-muted-inverse); }
  .mega-items .mega-all a { color: var(--secondary); }
  .mega-feature, .mega-strip, .mega-trigger { display: none; }
  .nav-cta { margin-top: var(--s6); width: 100%; }

  .js .menu-toggle {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    background: transparent; border: 1px solid var(--border-dark); border-radius: var(--r-md); color: var(--text-inverse); cursor: pointer;
  }
  .js .menu-toggle .ic-close { display: none; }
  .js .menu-toggle[aria-expanded="true"] .ic-open { display: none; }
  .js .menu-toggle[aria-expanded="true"] .ic-close { display: inline; }
  .js .menu-toggle span { display: inline-flex; }
  .js .nav {
    position: fixed; inset: 0; z-index: 90; overflow-y: auto; overscroll-behavior: contain;
    background: var(--surface-dark);
    padding: calc(84px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) calc(var(--s6) + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
    display: none; flex-direction: column;
  }
  .js .nav.is-open { display: flex; animation: menu-in var(--t-base) both; }
  .js .menu-toggle { position: relative; z-index: 95; }
  .js .col-toggle {
    display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: none;
    background: transparent; border: 0; color: var(--secondary); cursor: pointer;
  }
  .js .col-toggle .ic-sm { width: 20px; height: 20px; transition: transform var(--t-base); }
  .js .col-toggle[aria-expanded="true"] .ic-sm { transform: rotate(180deg); }
  .js .mega-items { display: none; padding-bottom: var(--s3); }
  .js .mega-items.is-open { display: grid; }
  .js .nav-mobile-foot { display: grid; gap: var(--s2); margin-top: auto; padding-top: var(--s6); text-align: center; color: var(--text-muted-inverse); font-size: 0.875rem; }
  body.menu-open { overflow: hidden; }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; z-index: -1;
  opacity: 0.6; animation: glow 6s ease-in-out infinite alternate;
}
@keyframes glow { from { opacity: 0.45; } to { opacity: 0.7; } }

.hero-text { display: grid; gap: var(--s6); min-width: 0; }

.hero-text > :nth-child(2) { animation-delay: 60ms; }
.hero-text > :nth-child(3) { animation-delay: 120ms; }
.hero-text > :nth-child(n+4) { animation-delay: 180ms; }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.hero h1 { color: var(--text-inverse); }
.hero-sub { line-height: 1.65; letter-spacing: -0.01em; }
.hero-lead { color: var(--text-muted-inverse); }
.hero-lead strong { color: var(--text-inverse); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s3); }

@media (max-width: 767px) { .cta-row .btn { width: 100%; } }

/* ---------- Números ---------- */

.trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.trust-grid li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); padding: var(--s6) var(--s4); text-align: center; min-height: 160px; }
.trust-grid li:nth-child(odd) { border-right: 1px solid var(--border); }
.trust-grid li:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
.trust-num { font-variant-numeric: tabular-nums; }
.trust-label { font-size: var(--fs-small); line-height: 1.5; color: var(--text-muted); max-width: 22ch; }
.trust-label strong { color: var(--text); }
.trust-award img { object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--border); }
@media (min-width: 768px) {
  .trust-grid { grid-template-columns: repeat(4, 1fr); }
  .trust-grid li { border: 0 !important; }
  .trust-grid li + li { border-left: 1px solid var(--border) !important; }
}

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base), background-color var(--t-base); }
.ic-box { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--border); }
.card-tag { display: inline-flex; align-items: center; justify-self: start; }

.svc-grid, .blog-grid { display: grid; gap: var(--gap); }
@media (min-width: 768px) { .svc-grid, .blog-grid { grid-template-columns: repeat(2, 1fr); } .blog-grid > :last-child { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .svc-grid, .blog-grid { grid-template-columns: repeat(3, 1fr); } .blog-grid > :last-child { grid-column: auto; } }
.svc-card, .blog-card { display: flex; flex-direction: column; overflow: hidden; }
.card-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--t-slow); }
.blog-card .card-img { aspect-ratio: 16 / 9; }
.svc-card .card-body, .blog-card .card-body { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--s3); padding: var(--s6); flex: 1; position: relative; }
.svc-card .card-body { grid-template-rows: auto auto auto 1fr auto; }
.svc-card .ic-box { top: -24px; right: var(--s6); }
.svc-card h3, .blog-card h3, .diff-card h3, .case-card h3, .ps-cols h3 { font-size: var(--fs-h4); line-height: 1.18; letter-spacing: -0.02em; }
.svc-card p:not(.card-tag), .blog-card p:not(.card-tag) { color: var(--text-muted); font-size: var(--fs-small); line-height: 1.6; }
.svc-card:hover, .blog-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--primary); }
.svc-card:active, .blog-card:active { transform: translateY(-1px); background: var(--surface-alt); }
.svc-card:hover .card-img, .blog-card:hover .card-img { transform: scale(1.03); }
.blog-card:hover h3 { color: var(--accent); }
.section.band-alt .card { background: var(--surface); }

/* ---------- Problema e solução ---------- */
.split { display: grid; gap: var(--s12); align-items: center; }
.split-text { display: grid; gap: var(--s6); min-width: 0; }
.lead { font-size: var(--fs-body-lg); line-height: 1.65; color: var(--text-muted); }
.ps-cols { display: grid; gap: var(--gap); }
.ps-cols > div { display: grid; gap: var(--s4); align-content: start; padding: var(--s6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.list-mark { display: grid; gap: var(--s3); }
.list-mark li { position: relative; padding-left: 30px; line-height: 1.65; }
.list-mark li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 18px; height: 18px; border-radius: 50%; }
.list-check li::before { background: var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.list-x li::before { background: var(--surface-alt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' fill='none' stroke='%23A93632' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat; border: 1px solid var(--border); }
.list-check.light li { color: var(--text-inverse); }
.list-check.light li::before { background-color: var(--primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%2310100E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.note { padding: var(--s6); background: var(--surface-highlight); border-left: 4px solid var(--accent); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: var(--fs-small); }
.split-media { margin: 0; }
.split-media img { width: 100%; aspect-ratio: 7 / 8; object-fit: cover; border-radius: var(--r-lg); border: 1px solid var(--border); box-shadow: var(--sh-lg); }
@media (min-width: 768px) { .ps-cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .split { grid-template-columns: 7fr 5fr; gap: var(--s16); } }

/* ---------- Etapas do Método TOPO ---------- */
.steps { display: grid; gap: var(--s6); position: relative; }
.step { display: grid; gap: var(--s3); align-content: start; padding: var(--s6); border-radius: var(--r-lg); transition: background-color var(--t-base); }
.step:hover { background: var(--surface-alt); }
.step-num { display: inline-flex; align-items: center; position: relative; z-index: 1; }
.step-ic { color: var(--accent); }
.step-ic .ic { width: 32px; height: 32px; stroke-width: 1.5; }
.step h3 { font-size: var(--fs-h4); line-height: 1.18; letter-spacing: -0.02em; }
.step p { color: var(--text-muted); font-size: var(--fs-small); line-height: 1.6; }
@media (max-width: 767px) {
  .steps { gap: 0; }
  .steps::before { content: ""; position: absolute; left: 47px; top: 48px; bottom: 48px; width: 1px; background: var(--border); }
  .step { column-gap: var(--s4); }

}
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(4, 1fr); }
  .steps::before { content: ""; position: absolute; right: calc(25% - 58px); }
  .step { padding-inline: var(--s4); }
}

/* ---------- Diferenciais (fundo escuro) ---------- */
.diff-grid { display: grid; }
.diff-card { display: grid; gap: var(--s4); align-content: start; border-color: var(--border-dark); color: var(--text-inverse); box-shadow: none; }

.diff-card p { color: var(--text-muted-inverse); font-size: var(--fs-small); line-height: 1.6; }
.diff-card a { color: var(--secondary); }
.diff-card:hover { border-color: var(--primary); }
.diff-card:active { background: var(--surface-dark-active); }
@media (min-width: 768px) { .diff-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .diff-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Guia de decisão e tabela ---------- */
.sub-h { font-size: var(--fs-h4); line-height: 1.18; letter-spacing: -0.02em; max-width: none; margin-bottom: var(--s6); }
.sub-h:not(:first-of-type) { margin-top: var(--s16); }
.guide-grid { display: grid; }

.guide-card dl { margin: 0; }
.guide-card dt { font-size: var(--fs-eyebrow); font-weight: 700; }
.guide-card dd { line-height: 1.6; }

@media (min-width: 768px) { .guide-grid { } }
@media (min-width: 1280px) { .guide-grid { grid-template-columns: repeat(4, 1fr); } }

.compare { width: 100%; min-width: 760px; font-size: var(--fs-small); line-height: 1.5; }
.compare caption { text-align: left; padding: var(--s4) var(--s6); font-size: 0.875rem; color: var(--text-muted); caption-side: bottom; }
.compare th, .compare td { padding: var(--s4) var(--s6); text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); min-width: 180px; }

.compare tbody th { color: var(--text); position: sticky; left: 0; }
.compare tbody tr:nth-child(odd) { background: var(--surface); }
.compare tbody tr:nth-child(even) { background: var(--surface-alt); }

.compare td.col-hl { background: var(--surface-highlight); box-shadow: inset 2px 0 0 var(--primary), inset -2px 0 0 var(--primary); font-weight: 600; }
.compare tbody tr:last-child td.col-hl { box-shadow: inset 2px 0 0 var(--primary), inset -2px 0 0 var(--primary), inset 0 -2px 0 var(--primary); }

/* ---------- Cases ---------- */
.case-grid { display: grid; gap: var(--gap); }
.case-card { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: var(--s3); padding: var(--s6); }
.case-city { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-eyebrow); font-weight: 700; text-transform: uppercase; }
.case-who { font-size: var(--fs-small); color: var(--text-muted); }
.case-result { font-size: var(--fs-small); line-height: 1.5; padding-top: var(--s4); border-top: 1px solid var(--border); color: var(--text-muted); }
.case-result span { display: block; margin-bottom: var(--s1); font-variant-numeric: tabular-nums; }
.case-card:hover { transform: translateY(-4px); }
.split-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); }
@media (min-width: 768px) { .case-grid { grid-template-columns: repeat(2, 1fr); } .case-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* Grade sempre completa: no computador, a última linha incompleta divide o espaço por igual */
@media (min-width: 1024px) {
  .case-grid { grid-template-columns: repeat(6, 1fr); }
  .case-grid > *, .case-grid > :last-child:nth-child(odd) { grid-column: span 2; }
  .case-grid > :last-child:nth-child(3n+2), .case-grid > :nth-last-child(2):nth-child(3n+1) { grid-column: span 3; }
  .case-grid > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
}

/* ---------- Depoimentos (fundo escuro) ---------- */
.testi-grid { display: grid; gap: var(--gap); }
.testi-card { background: var(--surface-dark); border-color: var(--border-dark); box-shadow: none; }
.testi-card figure { margin: 0; height: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: var(--s6); padding: var(--s8); }

.testi-card blockquote { margin: 0; padding-left: var(--s6); border-left: 3px solid var(--primary); font: 400 clamp(1.5rem, 1.2rem + 1vw, 2.25rem)/1.35 var(--font-display); letter-spacing: -0.02em; color: var(--text-inverse); }
.testi-card figcaption { display: grid; gap: 2px; padding-top: var(--s4); border-top: 1px solid var(--border-dark); font-size: 0.875rem; color: var(--text-muted-inverse); }
.testi-card figcaption strong { color: var(--text-inverse); font-size: 1rem; }
.testi-card:hover { border-color: var(--primary); }
.band-dark .testi-card { background: var(--surface-dark-elevated); }
@media (max-width: 767px) {
  .testi-grid { grid-auto-flow: column; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s4); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .testi-card { scroll-snap-align: start; }
}
@media (min-width: 768px) and (max-width: 1023px) { .testi-grid { grid-template-columns: repeat(2, 1fr); } .testi-grid > :last-child { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .testi-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- FAQ ---------- */
.faq-wrap .faq { max-width: 860px; margin-inline: auto; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  min-height: 64px; padding: var(--s4) 0; cursor: pointer; list-style: none;
  font: 600 1.125rem/1.4 var(--font-sans); color: var(--text); transition: color var(--t-fast);
}
.faq summary:hover { color: var(--accent); }
.faq-ic { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; border: 1px solid var(--border-strong); color: var(--accent); }
.faq-minus, .faq details[open] .faq-plus { display: none; }
.faq details[open] .faq-minus { display: block; }
.faq details[open] .faq-ic { color: var(--surface); }
.faq-a { padding: 0 0 var(--s6); max-width: 70ch; color: var(--text-muted); }
@media (max-width: 767px) { .faq summary { min-height: 56px; font-size: 1rem; } }

/* ---------- CTA final e formulário ---------- */
.cta-final { background: var(--surface); }
.cta-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: var(--s12); align-items: start;
  padding: var(--s8) var(--s6);
  background: var(--surface-dark); color: var(--text-inverse); box-shadow: var(--sh-lg);
}
.cta-card::before { content: ""; position: absolute; z-index: -1; background: radial-gradient(closest-side, rgba(184, 149, 95, 0.24), transparent 70%); }
.cta-text { display: grid; gap: var(--s6); min-width: 0; }
.cta-text h2 { color: var(--text-inverse); }
.cta-text > p { color: var(--text-muted-inverse); font-size: var(--fs-body-lg); line-height: 1.65; }
.cta-text > p.cta-alt { font-size: var(--fs-small); }
.lead-form { display: grid; gap: var(--s4); padding: var(--s8) var(--s6); background: var(--surface); color: var(--text); min-width: 0; }
.lead-form :focus-visible { outline-color: var(--accent); }

.field { display: grid; gap: 6px; min-width: 0; }
.field-row { display: grid; gap: var(--s4); }
.field label { font: 600 0.875rem/1.4 var(--font-sans); color: var(--text); }
.req { font-weight: 400; color: var(--text-muted); font-size: 0.8125rem; }
.field input {
  width: 100%; height: 52px; padding: 14px 16px; border: 1px solid var(--border-strong);
  background: var(--white); color: var(--text); font: 400 1rem/1.4 var(--font-sans);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input::placeholder { color: var(--text-muted); opacity: 0.8; }
.field input:hover { border-color: var(--accent); }
.field input:focus { outline: none; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), var(--sh-focus); }
.field input[aria-invalid="true"] { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.field-error { display: flex; align-items: center; gap: 6px; font-size: 0.875rem; color: var(--error); font-weight: 600; }
.field-error::before { content: ""; width: 16px; height: 16px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A93632' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E") center / contain no-repeat; }
.form-note { font-size: 0.8125rem; line-height: 1.5; color: var(--text-muted); }
.form-note .link-light { color: var(--accent); }
.form-done { display: grid; gap: var(--s3); padding: var(--s4); border: 1px solid var(--success); border-radius: var(--r-md); background: #EAF2EC; font-size: var(--fs-small); }
[hidden] { display: none !important; }
@media (min-width: 768px) { .field-row { grid-template-columns: 1fr 1fr; } .cta-card { padding: var(--s12); } }
@media (max-width: 767px) { .cta-text { text-align: center; justify-items: center; } .cta-text .list-mark { text-align: left; } }
@media (min-width: 1024px) { .cta-card { grid-template-columns: 5fr 6fr; gap: var(--s16); padding: var(--s16); align-items: center; } .lead-form { padding: var(--s8); } }

/* ---------- Rodapé ---------- */
.site-footer { background: var(--surface-dark); color: var(--text-inverse); border-top: 1px solid var(--border-dark); padding-block: 80px calc(var(--s8) + env(safe-area-inset-bottom, 0px)); font-size: var(--fs-small); }
.footer-brand { display: grid; gap: var(--s4); max-width: 420px; margin-bottom: var(--s12); color: var(--text-muted-inverse); }
.footer-grid { display: grid; gap: var(--s8); padding-bottom: var(--s12); border-bottom: 1px solid var(--border-dark); }
.f-title { font: 700 var(--fs-eyebrow)/1.3 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary); margin-bottom: var(--s3); }
.f-col ul { display: grid; gap: 0; }
.f-col a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-muted-inverse); font-weight: 400; text-decoration: none; }
.f-col a:hover { color: var(--secondary); text-decoration: underline; }
.f-col address { font-style: normal; }
.f-contact li { padding-block: var(--s2); color: var(--text-muted-inverse); line-height: 1.5; }
.f-contact li strong { color: var(--text-inverse); }
.f-contact a { min-height: 0; display: inline; text-decoration: underline; }
.f-contact small { display: block; margin-top: 4px; font-size: 0.8125rem; }
.footer-seals { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s6); padding-block: var(--s8); border-bottom: 1px solid var(--border-dark); }
.seal { display: inline-flex; align-items: center; gap: var(--s3); color: var(--text-muted-inverse); font-size: 0.875rem; }
.seal strong { color: var(--text-inverse); }
.seal img { width: 72px; height: 48px; object-fit: cover; border-radius: var(--r-sm); }
.seal .ic { color: var(--secondary); }
.socials { display: flex; gap: var(--s2); margin-left: auto; }
.socials a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--border-dark); border-radius: var(--r-md); color: var(--secondary); transition: background-color var(--t-fast), color var(--t-fast); }
.socials a:hover { color: var(--surface-dark); background: var(--primary); border-color: var(--primary); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s4); padding-top: var(--s6); font-size: 0.8125rem; color: var(--text-muted-inverse); }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: var(--s4); }
.footer-bottom a { color: var(--text-muted-inverse); font-weight: 400; display: inline-flex; align-items: center; min-height: 44px; }
.footer-bottom a:hover { color: var(--secondary); }
@media (max-width: 767px) {
  .footer-grid { display: flex; flex-direction: column; }
  .socials { margin-left: 0; }
}
@media (min-width: 768px) and (max-width: 1023px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- WhatsApp flutuante ---------- */
.wa-float {
  position: fixed; z-index: 80;
  right: calc(var(--s4) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--s4) + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
  border-radius: 50%; background: var(--whatsapp); color: var(--white); box-shadow: var(--sh-md);
  transition: transform var(--t-base), background-color var(--t-base);
}
.wa-float:hover { background: var(--whatsapp-hover); color: var(--white); transform: translateY(-2px); }
.wa-float:active { background: var(--whatsapp-active); transform: translateY(0); }
.wa-float .ic { width: 28px; height: 28px; stroke-width: 2; }
.wa-float:focus-visible { outline: 3px solid rgba(23, 107, 58, 0.32); outline-offset: 3px; }

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .hero::before { animation: none; opacity: 0.55; }
  .card:hover, .btn:hover, .wa-float:hover, .card:hover .card-img, .link-arrow:hover .ic-sm { transform: none !important; }
}

/* =====================================================================
   VERSÃO 2 · Preto e dourado com identidade própria
   Títulos sem serifa (Space Grotesk), rótulos técnicos (JetBrains Mono),
   dourado só nos detalhes, base preto + off-white neutro (sem creme).
   ===================================================================== */
:root {
  --primary: #C9A35F;
  --primary-hover: #D8B676;
  --primary-active: #B38D4B;
  --primary-soft: #EFE3C8;
  --secondary: #E2C68C;
  --accent: #7A5A22;
  --text: #161614;
  --text-muted: #55534E;
  --text-inverse: #F4F3EF;
  --text-muted-inverse: #A9A69E;
  --surface: #F5F4F0;
  --surface-alt: #EBE9E3;
  --surface-highlight: #F3EBDA;
  --surface-dark: #0A0A09;
  --surface-dark-elevated: #141412;
  --surface-dark-active: #1D1C19;
  --border: #DCD9D1;
  --border-strong: #9C978C;
  --border-dark: #2A2924;
  --font-display: "Space Grotesk", "Manrope", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --r-lg: 16px;
  --grid-line: rgba(201, 163, 95, 0.07);
}

/* Títulos: sem serifa, peso firme */
h1, h2 { font-family: var(--font-display); font-weight: 600; }
h1 { letter-spacing: -0.04em; line-height: 1; }
h2 { letter-spacing: -0.035em; line-height: 1.04; font-size: clamp(2.25rem, 1.6rem + 2.6vw, 4rem); }
.hl { color: var(--primary); }

/* Rótulo: chip com ponto dourado, em fonte técnica (sem o tracinho clássico) */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; justify-self: start;
  padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--r-pill);
  font: 500 0.75rem/1.2 var(--font-mono); letter-spacing: 0.04em; text-transform: none; color: var(--text-muted);
  background: rgba(255, 255, 255, 0.5);
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px rgba(201, 163, 95, 0.2); }
.band-dark .eyebrow { color: var(--text-muted-inverse); border-color: var(--border-dark); background: rgba(255, 255, 255, 0.03); }
.section-head.center .eyebrow { justify-self: center; }

/* Botões em pílula, dourado chapado (sem degradê) */
.btn { border-radius: var(--r-pill); padding: 0 24px; }
.btn-primary:hover { box-shadow: 0 10px 28px rgba(201, 163, 95, 0.25); }
.btn-ghost { border-color: transparent; color: var(--text-inverse); text-decoration: underline; text-decoration-color: rgba(201, 163, 95, 0.6); text-underline-offset: 0.3em; }
.btn-ghost:hover { background: none; border-color: transparent; color: var(--secondary); }
.btn-secondary { border-color: var(--text); }
.btn-secondary:hover { background: var(--text); color: var(--surface); border-color: transparent; }

/* Topo: faixa fina neutra e menu em pílula flutuante */
.topbar { background: var(--surface-dark); color: var(--text-muted-inverse); border-bottom: 1px solid var(--border-dark); font-family: var(--font-mono); font-weight: 500; font-size: 0.75rem; }
.topbar a { color: var(--text-muted-inverse); }
.topbar a:hover { color: var(--secondary); }
.topbar .ic { color: var(--primary); }
.site-header { border-bottom: 0; padding-top: 12px; margin-bottom: -88px; }
.site-header::after { display: none; }
.header-in { position: relative; isolation: isolate; max-width: calc(var(--max) + 2 * var(--gutter)); }
.header-in::before {
  content: ""; position: absolute; z-index: -1; inset: 0 max(var(--gutter) - 12px, 8px);
  border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(20, 20, 18, 0.82); backdrop-filter: blur(16px);
}
.header-in { padding-left: calc(max(var(--gutter), env(safe-area-inset-left, 0px)) + 12px); padding-right: calc(max(var(--gutter), env(safe-area-inset-right, 0px)) + 12px); }
.logo img { width: 38px; height: 43px; }
@media (min-width: 1024px) {
  .header-in { min-height: 68px; }
  .nav-list > li > a, .mega-trigger { min-height: 68px; }
  .nav-cta { min-height: 44px; }
}

/* Hero: centralizado, grade sutil e painel do Raio-X */
.hero { padding-block: calc(88px + var(--s16)) var(--s16); }
.hero::before { transform: translateX(50%); width: 90vw; height: 50vw; max-width: 1200px; max-height: 640px; background: radial-gradient(closest-side, rgba(201, 163, 95, 0.22), transparent 72%); }
.hero-grid-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 80%);
}

.hero-sub { color: var(--text-inverse); }
.hero-lead { font-size: var(--fs-small); }
.cta-row { align-items: center; }
@media (min-width: 1024px) { .hero { padding-block: calc(88px + var(--s24)) var(--s16); } }

.xray {
  margin: 0; width: 100%; max-width: 1080px; text-align: left;
  background: linear-gradient(180deg, #161613, #0F0F0D); border: 1px solid var(--border-dark); border-radius: 20px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(201, 163, 95, 0.08) inset; overflow: hidden;
}
.xray-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--border-dark); }
.xray-bar span { width: 10px; height: 10px; border-radius: 50%; background: #2E2C27; }
.xray-bar p { margin-left: 10px; font: 500 0.75rem/1 var(--font-mono); color: var(--text-muted-inverse); }
.xray-body { display: grid; gap: 1px; background: var(--border-dark); }
.xray-col { display: grid; gap: var(--s3); align-content: start; padding: var(--s6); background: #121210; }
.xray-label { font: 500 0.6875rem/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted-inverse); }
.xray-label:not(:first-child) { margin-top: var(--s2); }
.xray-search { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-pill); background: #1E1D1A; border: 1px solid #34322C; color: var(--text-inverse); font-size: 0.875rem; }
.xray-search .ic-sm { color: var(--primary); }
.xray-rank { display: grid; gap: 6px; }
.xray-rank li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #1A1916; color: var(--text-muted-inverse); font-size: 0.875rem; }
.xray-rank b { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: #2A2924; color: var(--text-muted-inverse); font: 500 0.75rem/1 var(--font-mono); }
.xray-rank li span { flex: 1; }
.xray-rank .is-you { background: rgba(201, 163, 95, 0.12); color: var(--text-inverse); box-shadow: inset 0 0 0 1px rgba(201, 163, 95, 0.45); font-weight: 600; }
.xray-rank .is-you b { background: var(--primary); color: var(--surface-dark); }
.xray-rank .is-you .ic-sm { color: var(--primary); }
.map-art { width: 100%; height: auto; border-radius: 12px; background: #181815; }
.map-roads path { fill: none; stroke: #2B2A25; stroke-width: 6; stroke-linecap: round; }
.map-radius { fill: rgba(201, 163, 95, 0.08); stroke: rgba(201, 163, 95, 0.4); stroke-dasharray: 4 6; }
.map-pin-o circle { fill: #4A4740; stroke: #181815; stroke-width: 3; }
.map-pin-you path { fill: var(--primary); }
.map-pin-you circle { fill: #181815; }
.map-pin-you { transform-origin: 160px 136px; animation: pin-drop 900ms 700ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes pin-drop { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: translateY(0); } }
.chart-art { width: 100%; height: auto; overflow: visible; }
.chart-grid path { stroke: #2A2924; stroke-dasharray: 3 5; }
.chart-area { fill: rgba(201, 163, 95, 0.12); }
.chart-line { fill: none; stroke: var(--primary); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 400; animation: draw 1.6s 600ms ease-out both; }
.chart-dot { fill: var(--primary); stroke: #121210; stroke-width: 3; }
@keyframes draw { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }
.xray-legend { display: flex; flex-wrap: wrap; gap: var(--s4); font: 500 0.75rem/1 var(--font-mono); color: var(--text-muted-inverse); }
.xray-legend li { display: inline-flex; align-items: center; gap: 6px; }
.xray-legend li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--primary); }
.xray-legend li:nth-child(2)::before { opacity: 0.6; }
.xray-legend li:nth-child(3)::before { opacity: 0.3; }
.xray figcaption { padding: 12px 16px; border-top: 1px solid var(--border-dark); font: 500 0.75rem/1.4 var(--font-mono); color: var(--text-muted-inverse); }
@media (max-width: 767px) { .xray-map { display: none; } }
@media (min-width: 768px) { .xray-body { grid-template-columns: 1fr 1fr; } .xray-body > :last-child { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .xray-body { grid-template-columns: 1.1fr 1fr 1.1fr; } .xray-body > :last-child { grid-column: auto; } }

/* Números: dentro do bloco escuro, sem faixa creme */
.hero .trust-grid { border: 1px solid var(--border-dark); border-radius: 20px; text-align: left; }
.hero .trust-grid li { align-items: flex-start; text-align: left; min-height: 0; padding: var(--s6); border-color: var(--border-dark) !important; }
.trust-num { font: 600 clamp(2.25rem, 1.8rem + 2vw, 3.5rem)/1 var(--font-display); color: var(--text-inverse); letter-spacing: -0.04em; }
.hero .trust-num::after { content: ""; display: block; width: 24px; height: 2px; margin-top: 12px; background: var(--primary); }
.hero .trust-label { color: var(--text-muted-inverse); }
.hero .trust-label strong { color: var(--text-inverse); }
.trust-award img { border-color: var(--border-dark); width: 96px; height: 64px; }

/* Cards: cantos menores e sem sombra pesada */
.card { box-shadow: none; }
.card-tag { height: auto; padding: 0; background: none; border-radius: 0; font: 500 0.6875rem/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.ic-box { border-radius: 50%; background: transparent; border-color: var(--border-strong); color: var(--text); }

/* Serviços em mosaico */
.bento { display: grid; gap: var(--gap); }
.svc-card .card-body, .svc-card.svc-sm .card-body { grid-template-rows: none; grid-auto-rows: min-content; }
.svc-sm .card-body { display: grid; gap: var(--s3); align-content: start; padding: var(--s6); height: 100%; }
.svc-sm .card-body > :nth-last-child(1) { margin-top: auto; align-self: end; }
.svc-card .ic-box { position: static; box-shadow: none; background: transparent; width: 44px; height: 44px; }
.svc-sm .card-body { grid-template-columns: 1fr auto; }
.svc-sm .card-body > * { grid-column: 1 / -1; }
.svc-sm .card-tag { grid-column: 1; align-self: center; }
.svc-sm .ic-box { grid-column: 2; grid-row: 1; }
.svc-sm h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); letter-spacing: -0.02em; }
.svc-sm:hover { transform: translateY(-3px); border-color: var(--text); box-shadow: none; }
.svc-sm:hover .ic-box { background: var(--primary); border-color: transparent; color: var(--surface-dark); }
.svc-feature { background: var(--surface-dark) !important; color: var(--text-inverse); border-color: transparent; }
.svc-feature .card-img { aspect-ratio: 16 / 9; }
.svc-feature .card-body { gap: var(--s4); padding: var(--s8); }
.svc-feature .card-tag, .svc-feature p:not(.card-tag) { color: var(--text-muted-inverse); }
.svc-feature .svc-kicker { justify-self: start; padding: 4px 10px; border-radius: var(--r-pill); background: var(--primary); color: var(--surface-dark) !important; font: 600 0.75rem/1.2 var(--font-mono); }
.svc-feature h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); letter-spacing: -0.035em; color: var(--text-inverse); }
.svc-feature p:not(.card-tag):not(.svc-kicker) { font-size: var(--fs-body); }
.svc-feature .ic-box { display: none; }
.svc-feature .link-arrow { color: var(--secondary); }
.svc-feature:hover { transform: translateY(-3px); border-color: var(--primary); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25); }
@media (min-width: 768px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento .svc-feature { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .bento { grid-template-columns: repeat(12, 1fr); }
  .bento .svc-feature { grid-column: 1 / span 6; grid-row: 1 / span 2; }
  .bento .svc-sm:nth-child(2), .bento .svc-sm:nth-child(3) { grid-column: span 6; }
  .bento .svc-sm:nth-child(n+4) { grid-column: span 4; }
}

/* Etapas: número técnico em vez de círculo */
.step-num { width: auto; height: auto; justify-content: flex-start; background: none; border-radius: 0; font: 500 0.875rem/1 var(--font-mono); color: var(--accent); padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: var(--r-pill); justify-self: start; background: var(--surface); }
.step-num::before { content: "0"; }
.step h3 { font-family: var(--font-display); font-weight: 600; }
@media (min-width: 1024px) { .steps::before { left: 64px; border-top: 1px dashed var(--border-strong); background: none; height: 0; } .step { padding-top: var(--s6); } .step-num { margin-bottom: var(--s2); } .step-ic { display: none; } }
@media (max-width: 767px) { .steps::before { display: none; } .step { grid-template-columns: 1fr; padding-inline: 0; } .step > :not(.step-num) { grid-column: 1; } .step-num { grid-row: auto; } }

/* Diferenciais: linhas finas, sem brilho */
.diff-grid { gap: 0; border-top: 1px solid var(--border-dark); }
.diff-card { background: transparent; border: 0; border-bottom: 1px solid var(--border-dark); border-radius: 0; padding: var(--s8) var(--s6); }
.diff-card .ic-box { border-radius: 50%; box-shadow: none; background: transparent; border-color: rgba(201, 163, 95, 0.45); color: var(--primary); width: 48px; height: 48px; }
.diff-card h3 { font-family: var(--font-display); font-weight: 600; }
.diff-card:hover { box-shadow: none; background: rgba(255, 255, 255, 0.02); }
@media (min-width: 768px) { .diff-card:nth-child(odd) { border-right: 1px solid var(--border-dark); } }
@media (min-width: 1024px) { .diff-card:nth-child(odd) { border-right: 0; } .diff-card:not(:nth-child(3n)) { border-right: 1px solid var(--border-dark); } }

/* Guia e tabela */
.guide-card { border-top: 1px solid var(--border); border-left: 3px solid var(--primary); }

/* Cases: número em destaque sem serifa, pino no canto */
.case-card { position: relative; }
.case-card::after { content: ""; position: absolute; top: 20px; right: 20px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 5px rgba(201, 163, 95, 0.18); }
.case-city { font: 500 0.6875rem/1.3 var(--font-mono); letter-spacing: 0.06em; color: var(--text-muted); }
.case-card h3 { font-family: var(--font-display); font-weight: 600; }
.case-result span { font: 600 clamp(2rem, 1.6rem + 1.4vw, 2.75rem)/1 var(--font-display); color: var(--text); letter-spacing: -0.04em; }
.case-result { border-top-style: dashed; }
.case-card:hover { border-color: var(--text); box-shadow: none; }

/* Depoimentos como mensagens de WhatsApp (telefone sempre oculto) */
.wa-card { background: #0F1416 !important; border-color: #1F2A2E; }
.wa-card figure { grid-template-rows: auto 1fr auto; gap: var(--s4); padding: 0; }
.wa-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #1A2327; border-radius: var(--r-lg) var(--r-lg) 0 0; color: #8FA3AA; }
.wa-av { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #2B3A40; color: var(--text-inverse); font: 600 0.8125rem/1 var(--font-sans); }
.wa-who { display: grid; flex: 1; line-height: 1.25; }
.wa-who b { color: var(--text-inverse); font-size: 0.9375rem; }
.wa-who small { font-size: 0.75rem; letter-spacing: 0.08em; }
.wa-card .wa-bubble {
  position: relative; justify-self: start; align-self: start; margin: var(--s2) var(--s4) 0; padding: 10px 14px 22px; max-width: 92%;
  background: #1F2C33; border: 0; border-radius: 0 12px 12px 12px;
  font: 400 1.0625rem/1.5 var(--font-sans); letter-spacing: 0; color: #E9EDEF;
}
.wa-card .wa-bubble::before { content: ""; position: absolute; left: -8px; top: 0; border: 8px solid transparent; border-top-color: #1F2C33; border-right-color: #1F2C33; border-width: 0 8px 10px 0; }
.wa-tick { position: absolute; right: 10px; bottom: 6px; color: #53BDEB; }
.wa-tick .ic-sm { width: 14px; height: 14px; }
.wa-card figcaption { margin: 0 var(--s4) var(--s4); border-top-color: #1F2A2E; }
.wa-card:hover { border-color: var(--primary); }
.band-dark .card.hub-svc h3 { color: var(--text); }
.wa-shot { background: #0A0A09 !important; }
.wa-shot figure { grid-template-rows: 1fr auto; }
.wa-shot img { display: block; width: 100%; height: 100%; max-height: 480px; object-fit: cover; object-position: center bottom; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.testi-grid .wa-shot img { height: 340px; object-fit: cover; object-position: center bottom; }
.wa-shot-fit img, .testi-grid .wa-shot-fit img { object-fit: contain; object-position: center; }

/* FAQ */
.faq-ic { border-radius: 8px; }
.faq details[open] .faq-ic { background: var(--text); border-color: transparent; }

/* CTA final: cartão escuro com grade, sem brilho redondo */
.cta-card { border-radius: 24px; }
.cta-card::before { inset: 0; left: 0; bottom: 0; width: auto; aspect-ratio: auto; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(90deg, #000, transparent 60%); }
.form-title { font: 600 clamp(1.5rem, 1.2rem + 1vw, 2.25rem)/1.1 var(--font-display); letter-spacing: -0.03em; }
.lead-form { border-radius: 16px; }
.field input { border-radius: 10px; }

/* Rodapé e menu */
.mega-feature-title { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; }
.mega-title a, .f-title { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.06em; }
.mega { border-radius: 20px; }

/* Ajustes finos */
.hero .eyebrow, .section-head.center .eyebrow { justify-self: center; }
.cta-text > p.eyebrow { font-size: 0.75rem; color: var(--text-muted-inverse); border-color: var(--border-dark); background: rgba(255, 255, 255, 0.03); }
@media (max-width: 767px) { .cta-text > p.eyebrow { justify-self: center; } }
@media (min-width: 1024px) { .steps::before { top: 38px; } }

/* Hero com a foto do prêmio ao fundo e texto à esquerda */
.hero { padding-top: 0; text-align: left; }
.hero::before { inset: auto 50% 0 auto; }
.hero-intro { position: relative; isolation: isolate; padding-block: calc(88px + 300px) var(--s12); }
.hero-photo { position: absolute; z-index: -1; inset: 0 0 auto 0; height: 440px; margin: 0; overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.72) saturate(0.85); }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 9, 0.55) 0%, rgba(10, 10, 9, 0.15) 35%, rgba(10, 10, 9, 0.7) 75%, var(--surface-dark) 100%); }
.hero-text { justify-items: start; }
.hero .eyebrow { justify-self: start; background: rgba(10, 10, 9, 0.6); backdrop-filter: blur(6px); }

.hero-lead { max-width: 54ch; }
.cta-row { justify-content: flex-start; }

.hero-grid-bg { top: auto; height: 70%; bottom: 0; }
@media (min-width: 768px) {
  .hero-intro { padding-block: calc(88px + 120px) var(--s16); }
  .hero-photo { inset: 0; height: auto; }

  .hero-photo::after { background:
      linear-gradient(90deg, var(--surface-dark) 0%, rgba(10, 10, 9, 0.92) 30%, rgba(10, 10, 9, 0.55) 55%, rgba(10, 10, 9, 0.2) 80%, rgba(10, 10, 9, 0.35) 100%),
      linear-gradient(180deg, rgba(10, 10, 9, 0.6) 0%, transparent 25%, transparent 70%, var(--surface-dark) 100%); }
}
@media (min-width: 1024px) {
  .hero { padding-top: 0; }
  .hero-intro { display: flex; align-items: center; padding-block: calc(88px + var(--s16)) var(--s16); }
  .hero-intro > .wrap { width: 100%; }

  .hero-photo::after { background:
      linear-gradient(90deg, var(--surface-dark) 0%, rgba(10, 10, 9, 0.7) 22%, rgba(10, 10, 9, 0.15) 55%, rgba(10, 10, 9, 0.25) 100%),
      linear-gradient(180deg, rgba(10, 10, 9, 0.65) 0%, transparent 22%, transparent 72%, var(--surface-dark) 100%); }
}
.hero-photo img { object-position: 50% 30%; }
@media (min-width: 768px) { .hero-photo img { object-position: 60% 0%; } }
@media (min-width: 1024px) { .hero-intro { min-height: 780px; } .hero-photo { left: 34%; } .hero-photo img { object-position: 50% 0%; } }

/* Seção própria do Raio-X */
.hero-intro { padding-bottom: var(--s8); }
.hero .trust-grid { margin-top: var(--s8); }
.hero .hero-grid-bg { display: none; }
.xray-section { position: relative; overflow: hidden; isolation: isolate; }
.xray-section .hero-grid-bg { height: 100%; top: 0; mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%); }
.xray-section .xray { margin-inline: auto; }
.xray-section::after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -20%; transform: translateX(-50%); width: 90vw; max-width: 1100px; height: 60%; background: radial-gradient(closest-side, rgba(201, 163, 95, 0.18), transparent 72%); }
.xray-cta { display: flex; justify-content: center; margin-top: var(--s8); }
@media (max-width: 767px) { .xray-cta .btn { width: 100%; } }
.hero::before { display: none; }
.hero-text { max-width: 820px; }
.hero .btn-ghost { padding-inline: 12px; }

.hero h1 .hl { white-space: nowrap; }
@media (max-width: 420px) { .hero h1 .hl { white-space: normal; } }
.hero-sub { max-width: 44ch; text-wrap: pretty; }
.hero h1 { max-width: 20ch; font-size: clamp(2rem, 1.35rem + 2.3vw, 3.25rem); line-height: 1.05; }
.hero-sub { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); }
@media (max-width: 767px) { .hero-photo { top: 76px; height: 400px; } .hero-photo img { object-position: 45% 0%; } .hero-intro { padding-top: calc(88px + 310px); } }
@media (min-width: 1024px) { .hero-photo { top: 40px; } }

/* Guia de decisão: cartões escuros; no desktop vira abas (lista à esquerda, resposta à direita) */
.guide-grid { gap: var(--s3); }
.guide-card {
  position: relative; overflow: hidden; display: grid; gap: var(--s3); align-content: start;
  background: var(--surface-dark) !important; color: var(--text-inverse); border: 1px solid var(--surface-dark); border-radius: 20px; box-shadow: none;
}
.guide-card h4 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); letter-spacing: -0.03em; line-height: 1.12; color: var(--text-inverse); max-width: 18ch; }
.guide-card dl { display: grid; gap: var(--s2); margin-top: var(--s2); }
.guide-card dt { font: 500 0.75rem/1.4 var(--font-mono); letter-spacing: 0.02em; text-transform: none; color: var(--primary); }
.guide-card dd { margin: 0 0 var(--s3); color: var(--text-muted-inverse); font-size: var(--fs-body); }
.guide-card dd strong { color: var(--text-inverse); }
.guide-card dd:last-of-type { padding: var(--s4) var(--s4); border-radius: 12px; background: rgba(201, 163, 95, 0.1); border: 1px solid rgba(201, 163, 95, 0.3); color: var(--text-inverse); }
.guide-card dd:last-of-type strong { color: var(--primary); }
.guide-link { color: var(--secondary); justify-self: start; }
.guide-card::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%; border: 1px solid rgba(201, 163, 95, 0.18); box-shadow: 0 0 0 30px rgba(201, 163, 95, 0.03), 0 0 0 60px rgba(201, 163, 95, 0.02); pointer-events: none; }

@media (min-width: 768px) and (max-width: 1023px) { .guide-grid { grid-template-columns: 1fr 1fr; } }

/* Tabela: coluna da Presença Completa em preto, destacada */
.table-wrap { border-radius: 20px; background: var(--white); overflow-x: auto; }
.compare { border-collapse: separate; border-spacing: 0; }
.compare thead th { background: var(--white); color: var(--text-muted); font-weight: 600; font-size: 0.875rem; padding-block: var(--s6); }
.compare tbody tr:nth-child(odd), .compare tbody tr:nth-child(even) { background: var(--white); }
.compare tbody tr:hover { background: var(--white); }
.compare tbody th { background: var(--white); font-weight: 600; }
.compare td { color: var(--text-muted); }
.compare th.col-hl, .compare td.col-hl, .compare tbody tr:last-child td.col-hl {
  background: var(--surface-dark); color: var(--text-inverse); box-shadow: none; border-bottom-color: var(--border-dark); font-weight: 500;
}
.compare thead th.col-hl { background: var(--surface-dark); color: var(--primary); font: 600 1rem/1.3 var(--font-display); box-shadow: none; }
.compare tbody tr:last-child td.col-hl { color: var(--primary); font-weight: 700; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare caption { background: var(--surface-alt); }
/* Guia: os 4 cartões visíveis em grade */
.guide-grid { counter-reset: guia; }
.guide-card { counter-increment: guia; padding: var(--s8) var(--s8) var(--s8); }
.guide-card::before { content: counter(guia, decimal-leading-zero); font: 500 0.8125rem/1 var(--font-mono); color: var(--primary); }
@media (min-width: 768px) { .guide-grid { grid-template-columns: 1fr 1fr; gap: var(--gap); } .guide-card { padding: var(--s12); } }
/* Tabela: bordas mais visíveis */
.table-wrap { border: 1.5px solid #B9B3A6; }
.compare thead th { border-bottom: 1.5px solid #B9B3A6; }
.compare tbody th, .compare tbody td { border-bottom: 1px solid #CFCAC0; }
.compare tbody th, .compare tbody td:not(.col-hl), .compare thead th:not(.col-hl) { border-right: 1px solid #E2DED6; }
.compare td:nth-last-child(2), .compare th:nth-last-child(2) { border-right: 0; }
.compare th.col-hl, .compare td.col-hl { border-bottom-color: #2E2D28; }
.compare caption { border-top: 1.5px solid #B9B3A6; }
/* Seção da tabela separada do guia */
.compare-section { background: var(--white); border-top: 1px solid var(--border); }
.compare-section .sub-h { margin-top: 0 !important; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); letter-spacing: -0.03em; max-width: 24ch; margin-bottom: var(--s8); }
.compare-section .table-wrap { background: var(--white); }
.compare-section .compare caption { background: var(--surface); }

/* =====================================================================
   HUB DE CATEGORIA (modelo M2) · usado em /seo/, /conversao/, /segmentos/
   ===================================================================== */
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 500 0.75rem/1.4 var(--font-mono); color: var(--text-muted-inverse); }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--primary); }
.breadcrumb a { color: var(--text-muted-inverse); font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.breadcrumb a:hover { color: var(--secondary); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--text-inverse); }

.hub-hero { position: relative; overflow: hidden; isolation: isolate; padding-block: calc(88px + var(--s6)) var(--s16); }
.hub-hero .hero-grid-bg { display: block; height: 100%; }
.hub-hero-grid { display: grid; gap: var(--s12); align-items: center; margin-top: var(--s6); }
.hub-hero-text { display: grid; gap: var(--s6); min-width: 0; }

.hub-hero h1 { color: var(--text-inverse); max-width: 18ch; font-size: clamp(2rem, 1.35rem + 2.3vw, 3.25rem); line-height: 1.05; }
.hub-hero .hero-sub { color: var(--text-muted-inverse); max-width: 46ch; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); }
.hub-hero .eyebrow { justify-self: start; }
.hub-hero .cta-row { justify-content: flex-start; }
.hub-hero .btn-ghost { padding-inline: 12px; }
@media (min-width: 1024px) { .hub-hero { padding-block: calc(88px + var(--s8)) var(--s24); } .hub-hero-grid { grid-template-columns: 6fr 5fr; gap: var(--s16); } }

/* Ilustração da página de busca */
.serp { margin: 0; background: #F7F6F2; color: var(--text); border-radius: 20px; overflow: hidden; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55); }
.serp-bar { display: flex; align-items: center; gap: 10px; margin: var(--s4); padding: 10px 16px; border-radius: var(--r-pill); background: var(--white); border: 1px solid var(--border); font-size: 0.875rem; }
.serp-bar .ic-sm { color: var(--accent); }
.serp-body { display: grid; gap: var(--s3); padding: 0 var(--s4) var(--s4); }
.serp-block { display: grid; gap: 8px; padding: var(--s4); border-radius: 14px; background: var(--white); border: 1px solid var(--border); }
.serp-tag { display: inline-flex; align-items: center; gap: 8px; font: 500 0.6875rem/1 var(--font-mono); letter-spacing: 0.04em; color: var(--text-muted); }
.serp-tag b { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-dark); color: var(--primary); font-weight: 500; }
.serp-line { display: block; height: 8px; border-radius: 4px; background: #E7E4DC; }
.w90 { width: 90%; } .w80 { width: 80%; } .w70 { width: 70%; }
.serp-cite { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 6px 10px; border-radius: 8px; background: var(--surface-highlight); font-size: 0.8125rem; font-weight: 600; }
.serp-cite .ic-sm { color: var(--accent); }
.serp-maps ol { display: grid; gap: 4px; }
.serp-maps li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; font-size: 0.8125rem; color: var(--text-muted); }
.serp-maps li span { flex: 1; }
.serp-maps li.is-you { background: var(--surface-dark); color: var(--text-inverse); font-weight: 600; }
.serp-maps li.is-you .ic-sm, .serp-maps li.is-you i { color: var(--primary); font-style: normal; letter-spacing: 1px; font-size: 0.75rem; }
.serp-url { font-size: 0.75rem; color: var(--text-muted); }
.serp-title { font: 600 1rem/1.3 var(--font-display); color: #1A3A8F; }
.serp figcaption { padding: 10px 16px; border-top: 1px solid var(--border); font: 500 0.6875rem/1.4 var(--font-mono); color: var(--text-muted); }
@media (min-width: 768px) { .serp-body { grid-template-columns: 1fr 1fr; } .serp-ai { grid-column: 1 / -1; } }

/* Resposta direta */
.hub-answer { background: var(--white); border-bottom: 1px solid var(--border); padding-block: var(--s12); }
.hub-answer-grid { display: grid; gap: var(--s8); align-items: center; }
.hub-answer-text { font: 500 clamp(1.125rem, 1rem + 0.6vw, 1.5rem)/1.5 var(--font-display); letter-spacing: -0.015em; color: var(--text); max-width: 60ch; }
.hub-facts { display: grid; gap: var(--s3); }
.hub-facts li { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-small); color: var(--text-muted); }
.hub-facts .ic { width: 20px; height: 20px; color: var(--accent); }
.hub-facts strong { color: var(--text); }
@media (min-width: 1024px) { .hub-answer-grid { grid-template-columns: 2fr 1fr; gap: var(--s16); } .hub-facts { padding-left: var(--s8); border-left: 1px solid var(--border); } }

/* Serviços da categoria: grade simétrica 2 x 2 */
.hub-svc-grid { display: grid; gap: var(--gap); }
.hub-svc { display: flex; flex-direction: column; overflow: hidden; background: var(--white) !important; }
.hub-svc .card-img { aspect-ratio: 16 / 9; }
.hub-svc .card-body { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--s3); padding: var(--s6) var(--s8) var(--s8); flex: 1; }
.hub-svc-top { display: flex; align-items: center; gap: var(--s3); margin-top: calc(-1 * var(--s12)); }
.hub-svc .ic-box { width: 56px; height: 56px; border-radius: 50%; background: var(--surface-dark); border: 4px solid var(--white); color: var(--primary); }
.hub-svc .card-tag { margin-top: var(--s8); }
.hub-svc h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -0.03em; }
.hub-svc p:not(.card-tag) { color: var(--text-muted); max-width: 46ch; }
.hub-svc:hover { transform: translateY(-4px); border-color: var(--text); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.08); }
.hub-svc:hover .card-img { transform: scale(1.03); }
@media (min-width: 768px) { .hub-svc-grid { grid-template-columns: 1fr 1fr; } }

/* Tabela do hub: linha de links */
.compare-hub tbody tr:last-child td a { font-weight: 700; }
.compare-hub td.col-hl a { color: var(--primary); }
.compare-hub thead th:first-child, .compare-hub tbody th { width: 16%; }

/* Etapas em fundo escuro */
.hub-steps .step:hover { background: rgba(255, 255, 255, 0.03); }
.hub-steps .step-num { background: var(--surface-dark); border-color: var(--border-dark); color: var(--primary); }
.hub-steps .step h3 { color: var(--text-inverse); }
.hub-steps .step p { color: var(--text-muted-inverse); }
.hub-steps .steps::before { border-top-color: var(--border-dark); }
.center-foot { text-align: center; }

/* Diferenciais: cartões pretos com número dourado (padrão aprovado) */
.hub-diff-grid { display: grid; gap: var(--gap); counter-reset: guia; }
.hub-diff { padding: var(--s8); }
.hub-diff h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); letter-spacing: -0.025em; line-height: 1.15; color: var(--text-inverse); max-width: 20ch; }
.hub-diff p { color: var(--text-muted-inverse); font-size: var(--fs-small); line-height: 1.6; }
@media (min-width: 768px) { .hub-diff-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .hub-diff-grid { grid-template-columns: repeat(3, 1fr); } }

/* Information Gain */
.hub-gain { background: var(--white); }
.gain-block { display: grid; gap: var(--s6); padding-block: var(--s12); border-top: 1px solid var(--border); }
.gain-block:first-of-type { border-top: 1.5px solid var(--text); }
.gain-head { display: grid; gap: var(--s3); align-content: start; }
.gain-n { font: 500 0.8125rem/1 var(--font-mono); color: var(--accent); }
.gain-head h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); letter-spacing: -0.03em; line-height: 1.1; }
.gain-head p { color: var(--text-muted); font-size: var(--fs-small); }
.gain-items { display: grid; gap: var(--s3); }
.gain-item { display: grid; gap: var(--s2); align-content: start; padding: var(--s6); border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.gain-item > .ic { width: 22px; height: 22px; color: var(--accent); }
.gain-item h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; letter-spacing: -0.015em; }
.gain-item p { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.6; }
.gain-stat { background: var(--surface-dark); border-color: transparent; }
.gain-stat h4 { color: var(--text-inverse); }
.gain-stat p { color: var(--text-muted-inverse); }
.gain-stat a { color: var(--secondary); }
.gain-num { font: 600 clamp(2.5rem, 2rem + 2vw, 3.5rem)/1 var(--font-display) !important; color: var(--primary) !important; letter-spacing: -0.04em; }
@media (min-width: 768px) { .gain-items { grid-template-columns: repeat(3, 1fr); } .gain-stats { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .gain-block { grid-template-columns: 4fr 8fr; gap: var(--s12); } .gain-head { position: sticky; top: 120px; } }

/* Áreas atendidas */
.city-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.city-grid strong, .city-grid small { overflow-wrap: anywhere; }
.city-grid a, .city-grid li > div { display: flex; align-items: flex-start; gap: var(--s3); height: 100%; padding: var(--s4); border: 1px solid var(--border-strong); border-radius: 14px; background: var(--white); color: var(--text); text-decoration: none; font-weight: 400; transition: border-color var(--t-fast), transform var(--t-fast); }
.city-grid .ic-sm { margin-top: 4px; color: var(--accent); }
.city-grid strong { display: block; font: 600 1rem/1.3 var(--font-display); }
.city-grid small { display: block; color: var(--text-muted); font-size: 0.8125rem; }
.city-grid a:hover { border-color: var(--text); transform: translateY(-2px); }
.city-you a { background: var(--surface-dark); border-color: transparent; color: var(--text-inverse); }
.city-you small { color: var(--secondary) !important; }
.city-you .ic-sm { color: var(--primary); }
@media (min-width: 1024px) { .city-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Campo de seleção do formulário */
.field select {
  width: 100%; height: 52px; padding: 0 44px 0 16px; border: 1px solid var(--border-strong); border-radius: 10px; appearance: none;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A5A22' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat;
  color: var(--text); font: 400 1rem/1.4 var(--font-sans);
}
.field select:hover { border-color: var(--accent); }
.field select:focus { outline: none; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), var(--sh-focus); }
.field select[aria-invalid="true"] { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }

/* =====================================================================
   PÁGINA DE SERVIÇO (modelo M3) · usado em S01 a S05, S10, S11
   ===================================================================== */
/* Hero em 2 colunas: texto + provas à esquerda, formulário à direita */
.svc-hero-grid { display: grid; gap: var(--s12); align-items: start; margin-top: var(--s6); }
.svc-hero h1 { max-width: 16ch; }
.svc-proofs { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border-dark); border-radius: 16px; overflow: hidden; }
.svc-proofs li { display: grid; gap: 4px; align-content: start; padding: var(--s4); }
.svc-proofs li + li { border-left: 1px solid var(--border-dark); }
.svc-proofs strong { font: 600 clamp(1.375rem, 1.1rem + 1vw, 1.875rem)/1 var(--font-display); color: var(--primary); letter-spacing: -0.03em; }
.svc-proofs span { font-size: 0.8125rem; line-height: 1.4; color: var(--text-muted-inverse); }
.svc-form { box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55); scroll-margin-top: 110px; }
.svc-form .form-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem); letter-spacing: -0.03em; }
.form-lead { margin-top: calc(-1 * var(--s2)); font-size: var(--fs-small); color: var(--text-muted); }
.svc-form .form-note a { color: var(--accent); }
@media (min-width: 1024px) { .svc-hero-grid { grid-template-columns: 7fr 5fr; gap: var(--s16); } .svc-hero .hub-hero-text { padding-top: var(--s8); } }

/* O que é: definição + 4 tipos */
.svc-def { display: grid; gap: var(--s6); margin-bottom: var(--s12); }
.svc-def .section-head { margin-bottom: 0; }
.svc-def-text { display: grid; gap: var(--s4); font-size: var(--fs-body-lg); line-height: 1.6; color: var(--text-muted); }
.svc-def-text strong { color: var(--text); }
.svc-types { display: grid; gap: var(--gap); }
.svc-type { display: grid; gap: var(--s3); align-content: start; padding: var(--s8); border: 1px solid var(--border-strong); border-radius: 20px; background: var(--white); }
.svc-type .ic-box { width: 48px; height: 48px; border-radius: 50%; background: var(--surface-dark); color: var(--primary); }
.svc-type h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); letter-spacing: -0.025em; line-height: 1.2; }
.svc-type p { font-size: var(--fs-small); line-height: 1.65; color: var(--text-muted); }
.svc-type strong { color: var(--text); }
@media (min-width: 768px) { .svc-types { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .svc-def { grid-template-columns: 5fr 7fr; gap: var(--s16); align-items: end; } }

/* Sinais: grade 3 x 2 com ícone */
.sign-grid { display: grid; gap: var(--gap); }
.sign-grid li { display: flex; align-items: center; gap: var(--s4); padding: var(--s6); border: 1px solid var(--border-strong); border-radius: 16px; background: var(--white); min-height: 104px; }
.sign-grid .ic { flex: none; width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: var(--surface-highlight); color: var(--accent); }
.sign-grid p { font: 500 1.0625rem/1.4 var(--font-display); letter-spacing: -0.01em; color: var(--text); }
@media (min-width: 768px) { .sign-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .sign-grid { grid-template-columns: repeat(3, 1fr); } }

/* Como funciona: 6 etapas numeradas com prazo */
.svc-steps { display: grid; gap: var(--gap); }
.svc-steps li { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--s3); padding: var(--s8); border: 1px solid var(--border-dark); border-radius: 20px; background: var(--surface-dark-elevated); }
.svc-step-n { font: 600 2.5rem/1 var(--font-display); color: var(--primary); letter-spacing: -0.04em; }
.svc-steps h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); letter-spacing: -0.025em; color: var(--text-inverse); }
.svc-steps p { font-size: var(--fs-small); line-height: 1.6; color: var(--text-muted-inverse); }
.svc-steps .svc-step-t { display: flex; align-items: center; gap: 8px; padding-top: var(--s4); border-top: 1px dashed var(--border-dark); font: 500 0.75rem/1.4 var(--font-mono); color: var(--secondary); }
@media (min-width: 768px) { .svc-steps { grid-template-columns: 1fr 1fr; } .svc-steps > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .svc-steps { grid-template-columns: repeat(3, 1fr); } .svc-steps > :last-child:nth-child(odd) { grid-column: auto; } }

/* O que está incluído / não incluído */
.incl-grid { display: grid; gap: var(--gap); }
.incl-card { display: grid; gap: var(--s6); align-content: start; padding: var(--s8); border-radius: 20px; }
.incl-yes { background: var(--white); border: 1.5px solid var(--text); }
.incl-no { background: var(--surface-dark); color: var(--text-inverse); }
.incl-title { display: flex; align-items: center; gap: 10px; font: 600 1.375rem/1.2 var(--font-display); letter-spacing: -0.02em; }
.incl-yes .incl-title .ic-sm { color: var(--success); }
.incl-no .incl-title .ic-sm { color: var(--primary); }
.incl-list { grid-template-columns: 1fr; }
.incl-x { display: grid; gap: var(--s3); }
.incl-x li { display: flex; align-items: center; gap: 12px; color: var(--text-muted-inverse); }
.incl-x .ic-sm { color: #E08A80; }
.incl-note { padding-top: var(--s4); border-top: 1px solid var(--border-dark); font-size: var(--fs-small); color: var(--secondary); }
@media (min-width: 768px) { .incl-list { grid-template-columns: 1fr 1fr; column-gap: var(--s8); } }
@media (min-width: 1024px) { .incl-grid { grid-template-columns: 8fr 4fr; } }

/* Tabela de fatores de preço */
.compare-price thead th:first-child, .compare-price tbody th { width: 24%; }
.compare-price { min-width: 640px; }

/* Information Gain: variações */
@media (min-width: 768px) { .gain-2x2 { grid-template-columns: 1fr 1fr; } }
.gain-check { display: grid; gap: var(--s3); padding: var(--s8); border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
@media (min-width: 768px) { .gain-check { grid-template-columns: 1fr 1fr; column-gap: var(--s8); } }
.gain-block > .table-wrap { min-width: 0; }
.compare-ways { min-width: 720px; }
.rules-grid { display: grid; gap: var(--s3); }
.rule-card { display: grid; gap: var(--s2); align-content: start; padding: var(--s6); border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.rule-card h4 { margin-bottom: var(--s2); font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; }
.rule-card h5 { display: flex; align-items: center; gap: 8px; margin-top: var(--s2); font: 700 0.9375rem/1.3 var(--font-sans); }
.rule-card h5 .ic-sm { color: var(--accent); }
.rule-card p { font-size: var(--fs-small); line-height: 1.6; color: var(--text-muted); }
.rules-foot { grid-column: 1 / -1; font-size: var(--fs-small); color: var(--text-muted); }
@media (min-width: 768px) { .rules-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .gain-block > .gain-check, .gain-block > .rules-grid, .gain-block > .rules-foot { grid-column: 2; } .gain-block > .table-wrap { grid-column: 1 / -1; } }
.compare-price tbody tr:nth-child(odd), .compare-ways tbody tr:nth-child(odd) { background: var(--white); }

/* Cases dentro dos diferenciais */
.svc-cases-title { margin: var(--s16) 0 var(--s6); font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -0.03em; }

/* Serviços relacionados + artigos de apoio */
.rel-grid { display: grid; gap: var(--gap); }
.rel-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--s3); padding: var(--s8); background: var(--white) !important; }
.rel-card .ic-box { width: 48px; height: 48px; border-radius: 50%; background: var(--surface-dark); color: var(--primary); }
.rel-card h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); letter-spacing: -0.03em; }
.rel-card p { color: var(--text-muted); font-size: var(--fs-small); line-height: 1.6; }
.rel-card:hover { transform: translateY(-4px); border-color: var(--text); }
@media (min-width: 1024px) { .rel-grid { grid-template-columns: repeat(3, 1fr); } }
.support-box { display: grid; gap: var(--s4); margin-top: var(--s12); padding: var(--s8); border-radius: 20px; background: var(--surface-dark); }
.support-title { display: flex; align-items: center; gap: 10px; font: 500 0.75rem/1.4 var(--font-mono); color: var(--secondary); }
.support-box ul { display: grid; }
.support-box li + li { border-top: 1px solid var(--border-dark); }
.support-box a { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 56px; padding-block: var(--s3); color: var(--text-inverse); font: 600 1.0625rem/1.35 var(--font-display); letter-spacing: -0.01em; text-decoration: none; }
.support-box a .ic-sm { flex: none; color: var(--primary); transition: transform var(--t-fast); }
.support-box a:hover { color: var(--primary); }
.support-box a:hover .ic-sm { transform: translateX(4px); }

.gain-wide .gain-head { position: static !important; }

/* =====================================================================
   PÁGINA SOBRE (modelo M7) · entity home /sobre/
   ===================================================================== */
.about-hero-grid { display: grid; gap: var(--s12); align-items: start; margin-top: var(--s6); }
.about-hero h1 { max-width: 20ch; }
.entity-def p { color: var(--text-muted-inverse); font-size: var(--fs-body); line-height: 1.7; max-width: 64ch; }
.entity-def strong { color: var(--text-inverse); font-weight: 600; }
.entity-card { padding: var(--s8); border-radius: 20px; background: #F7F6F2; color: var(--text); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55); }
.entity-title { margin-bottom: var(--s4); font: 500 0.75rem/1.4 var(--font-mono); color: var(--accent); }
.entity-card dl { display: grid; margin: 0; }
.entity-card dl > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: var(--s4); padding-block: 12px; border-top: 1px solid var(--border); }
.entity-card dt { font-size: 0.8125rem; color: var(--text-muted); }
.entity-card dd { margin: 0; font-size: 0.9375rem; font-weight: 600; line-height: 1.45; }
@media (max-width: 479px) { .entity-card dl > div { grid-template-columns: 1fr; gap: 2px; } }
@media (min-width: 1024px) { .about-hero-grid { grid-template-columns: 7fr 5fr; gap: var(--s16); } }
.entity-def { display: grid; gap: var(--s4); }
.about-hero .cta-row { margin-top: var(--s8); }
.about-hero .legal-updated { margin-top: var(--s4); }
.about-sub { max-width: none; margin-top: var(--s16); font: 600 var(--fs-h5)/1.25 var(--font-display); letter-spacing: -0.02em; scroll-margin-top: 110px; }
.about-sub-lead { margin: var(--s2) 0 var(--s6); color: var(--text-muted); max-width: 64ch; }
.about-mid-cta { margin-top: var(--s8); }
.xray-proof { margin-top: var(--s8); }
.page-updated { margin-top: var(--s4); }

/* História */
.about-split { display: grid; gap: var(--s6); margin-bottom: var(--s12); }
.about-split .section-head { margin-bottom: 0; }
.about-lead { font: 500 clamp(1.125rem, 1rem + 0.6vw, 1.5rem)/1.5 var(--font-display); letter-spacing: -0.015em; color: var(--text); max-width: 52ch; }
@media (min-width: 1024px) { .about-split { grid-template-columns: 5fr 7fr; gap: var(--s16); align-items: end; } }
.timeline { display: grid; gap: var(--gap); position: relative; }
.timeline li { position: relative; display: grid; gap: var(--s3); align-content: start; padding: var(--s8); border: 1px solid var(--border-strong); border-radius: 20px; background: var(--white); }
.tl-year { font: 600 clamp(2rem, 1.6rem + 1.4vw, 2.75rem)/1 var(--font-display); color: var(--text); letter-spacing: -0.04em; }
.timeline li::before { content: ""; position: absolute; top: var(--s8); right: var(--s8); width: 10px; height: 10px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 5px rgba(201, 163, 95, 0.18); }
.timeline h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; }
.timeline p { font-size: var(--fs-small); line-height: 1.6; color: var(--text-muted); }
.tl-pending { border-style: dashed !important; background: var(--surface) !important; }
.tl-pending .tl-year { font-size: 1.25rem; color: var(--text-muted); }
@media (min-width: 768px) { .timeline { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .timeline { grid-template-columns: repeat(4, 1fr); padding-top: var(--s8); }
  .timeline::before { content: ""; position: absolute; top: 0; left: 0; right: 0; border-top: 1.5px solid var(--text); }
  .timeline li::after { content: ""; position: absolute; top: calc(-1 * var(--s8) - 5px); left: var(--s8); width: 9px; height: 9px; border-radius: 50%; background: var(--text); }
}

/* Sócios */
.founders { display: grid; gap: var(--gap); }
.founder { display: flex; flex-direction: column; overflow: hidden; background: var(--white) !important; }
.founder-img { width: 100%; aspect-ratio: 6 / 7; object-fit: cover; background: var(--surface-alt); }
.founder-body { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--s2); padding: var(--s6) var(--s8) var(--s8); flex: 1; }
.founder h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); letter-spacing: -0.025em; line-height: 1.2; }
.founder-role { font: 500 0.75rem/1.4 var(--font-mono); color: var(--accent); }
.founder-body > p:not(.founder-role) { font-size: var(--fs-small); line-height: 1.6; color: var(--text-muted); }
.founder-link { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--border); font-size: 0.875rem; color: var(--text-muted); }
@media (min-width: 768px) { .founders { grid-template-columns: repeat(3, 1fr); } }

/* Missão, visão e valores */
.mvv .hub-diff { min-height: 220px; }
.mvv-list { display: grid; gap: var(--s3); }
.mvv-list li { font-size: var(--fs-small); line-height: 1.55; color: var(--text-muted-inverse); }
.mvv-list strong { color: var(--secondary); font-weight: 600; }
.band-dark .guide-card { border: 1px solid var(--border-dark); }

/* Números */
.num-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1.5px solid var(--text); border-radius: 20px; overflow: hidden; background: var(--white); }
.num-grid li { display: grid; gap: var(--s2); align-content: center; justify-items: center; padding: var(--s8) var(--s4); text-align: center; min-height: 180px; }
.num-grid li:nth-child(odd) { border-right: 1px solid var(--border-strong); }
.num-grid li:nth-child(-n+2) { border-bottom: 1px solid var(--border-strong); }
.num-grid strong { font: 600 clamp(2.5rem, 1.9rem + 2.4vw, 4rem)/1 var(--font-display); letter-spacing: -0.045em; color: var(--text); }
.num-grid span { max-width: 20ch; font-size: var(--fs-small); color: var(--text-muted); }
@media (min-width: 1024px) {
  .num-grid { grid-template-columns: repeat(4, 1fr); }
  .num-grid li { border: 0 !important; }
  .num-grid li + li { border-left: 1px solid var(--border-strong) !important; }
}

/* Prêmios e registros */
.award-grid { display: grid; gap: var(--s8); align-items: center; }
.award-photo { margin: 0; overflow: hidden; border-radius: 20px; background: var(--surface-dark); }
.award-photo img { width: 100%; height: auto; aspect-ratio: 1600 / 1033; object-fit: cover; }
.award-photo figcaption { padding: 12px 16px; font: 500 0.75rem/1.4 var(--font-mono); color: var(--secondary); }
.award-list { display: grid; gap: var(--s3); }
.award-item { display: flex; gap: var(--s4); align-items: flex-start; padding: var(--s6); border: 1px solid var(--border-strong); border-radius: 16px; background: var(--white); }
.award-item > .ic { flex: none; width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: var(--surface-dark); color: var(--primary); }
.award-item h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; }
.award-item p { font-size: var(--fs-small); color: var(--text-muted); }
.award-item.is-pending { border-style: dashed; background: var(--surface); }
@media (min-width: 1024px) { .award-grid { grid-template-columns: 7fr 5fr; gap: var(--s12); } }

/* Sede na grade de cidades */
.city-grid .city-you > div { background: var(--surface-dark); border-color: transparent; color: var(--text-inverse); }

/* Onde encontrar: NAP + perfis oficiais */
.nap-grid { display: grid; gap: var(--gap); }
.nap-card { display: grid; gap: var(--s4); align-content: start; padding: var(--s8); border-radius: 20px; background: var(--surface-dark); color: var(--text-inverse); font-style: normal; }
.nap-name { font: 600 1.75rem/1.1 var(--font-display); letter-spacing: -0.03em; }
.nap-card p:not(.nap-name) { display: flex; gap: 12px; align-items: flex-start; padding-top: var(--s4); border-top: 1px solid var(--border-dark); color: var(--text-muted-inverse); line-height: 1.55; }
.nap-card .ic-sm { flex: none; margin-top: 4px; color: var(--primary); }
.nap-card small { display: block; margin-top: 4px; color: var(--secondary); font-size: 0.8125rem; }
.nap-card a { color: var(--text-inverse); }
.profiles { display: grid; gap: var(--s4); align-content: start; }
.profiles-title { font: 500 0.75rem/1.4 var(--font-mono); color: var(--accent); }
.profiles ul { display: grid; gap: var(--s3); }
.profiles a, .profiles li > div { display: flex; align-items: center; gap: var(--s4); min-height: 72px; padding: var(--s4) var(--s6); border: 1px solid var(--border-strong); border-radius: 14px; background: var(--white); color: var(--text); text-decoration: none; font-weight: 400; transition: border-color var(--t-fast), transform var(--t-fast); }
.profiles a:hover { border-color: var(--text); transform: translateY(-2px); }
.profiles .ic-sm { flex: none; color: var(--accent); }
.profiles strong { display: block; font: 600 1rem/1.3 var(--font-display); }
.profiles small { display: block; color: var(--text-muted); font-size: 0.8125rem; }
.profiles .is-pending > div { border-style: dashed; background: var(--surface); }
@media (min-width: 768px) { .profiles ul { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .nap-grid { grid-template-columns: 5fr 7fr; } }

/* CTA final sem formulário */
.about-cta { grid-template-columns: 1fr !important; text-align: center; justify-items: center; }
.about-cta .cta-text { justify-items: center; max-width: 720px; margin-inline: auto; }
.about-cta .cta-row { justify-content: center; }
.about-cta .eyebrow { justify-self: center; }

/* =====================================================================
   PÁGINA DE CONTATO (modelo M8) · /contato/ = página do Raio-X
   ===================================================================== */
.contact-quick { display: grid; gap: var(--s2); }
.contact-quick li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-small); color: var(--text-muted-inverse); }
.contact-quick .ic-sm { color: var(--primary); }

/* 4 canais */
.channel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.channel-grid a { display: grid; gap: 6px; align-content: start; height: 100%; padding: var(--s6); border: 1px solid var(--border-strong); border-radius: 20px; background: var(--white); color: var(--text); text-decoration: none; font-weight: 400; transition: border-color var(--t-fast), transform var(--t-fast); }
.channel-grid a:hover { border-color: var(--text); transform: translateY(-3px); }
.channel-grid .ic-box { width: 48px; height: 48px; margin-bottom: var(--s3); border-radius: 50%; background: var(--surface-dark); color: var(--primary); }
.channel-grid strong { font: 600 1.25rem/1.2 var(--font-display); letter-spacing: -0.02em; }
.channel-grid span:not(.ic-box) { font-size: 0.9375rem; font-weight: 600; overflow-wrap: break-word; }
.channel-grid small { font: 500 0.6875rem/1.4 var(--font-mono); color: var(--text-muted); }
@media (min-width: 1024px) { .channel-grid { grid-template-columns: repeat(4, 1fr); } }
.hours-bar { display: grid; gap: var(--s3); margin-top: var(--gap); padding: var(--s6) var(--s8); border-radius: 16px; background: var(--surface-dark); color: var(--text-inverse); }
.hours-bar p { display: flex; align-items: center; gap: 12px; font-size: var(--fs-small); color: var(--text-muted-inverse); }
.hours-bar strong { color: var(--text-inverse); }
.hours-bar .ic-sm { flex: none; color: var(--primary); }
@media (min-width: 768px) { .hours-bar { grid-template-columns: 1fr 1fr; } }

/* O que você vê no Raio-X */
.xray-grid { display: grid; gap: var(--gap); }
.xray-grid li { display: grid; gap: var(--s3); align-content: start; padding: var(--s8); border-radius: 20px; background: var(--surface-dark); border: 1px solid var(--border-dark); }
.xray-grid h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--text-inverse); }
.xray-grid p { font-size: var(--fs-small); line-height: 1.6; color: var(--text-muted-inverse); }
@media (min-width: 768px) { .xray-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .xray-grid { grid-template-columns: repeat(4, 1fr); } }

/* Mapa carregado só depois do clique */
.map-grid { display: grid; gap: var(--gap); }
.map-box { position: relative; min-height: 320px; overflow: hidden; border-radius: 20px; border: 1px solid var(--border-strong); background: #EBE9E3; }
.map-box .map-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-pin { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -100%); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--surface-dark); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25); }
.map-pin .ic { rotate: 45deg; color: var(--primary); }
.map-btn { position: absolute; left: 50%; bottom: var(--s6); transform: translateX(-50%); white-space: nowrap; }
.map-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 1024px) { .map-grid { grid-template-columns: 5fr 7fr; } .map-box { min-height: 100%; } }

/* =====================================================================
   BLOG (modelo M10) · hub /blog/, páginas /blog/pagina/N/ e categorias /blog/[categoria]/
   ===================================================================== */
.blog-hero { position: relative; padding-block: calc(88px + var(--s6)) var(--s12); background: var(--surface-dark); color: var(--text-inverse); }
.blog-hero .wrap { display: grid; gap: var(--s6); }
.blog-hero .wrap > * { min-width: 0; }
.blog-hero .eyebrow { justify-self: start; }
.blog-hero h1 { max-width: 22ch; color: var(--text-inverse); font-size: clamp(2rem, 1.35rem + 2.3vw, 3.25rem); line-height: 1.05; }
.h1-page { color: var(--text-muted-inverse); font-weight: 500; }
.blog-intro { max-width: 62ch; color: var(--text-muted-inverse); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.6; }
.blog-intro a { color: var(--secondary); }
.blog-intro strong { color: var(--text-inverse); }
.cat-nav ul { display: flex; flex-wrap: wrap; gap: var(--s2); }
.cat-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--border-dark); border-radius: var(--r-pill); color: var(--text-inverse); font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: border-color var(--t-fast), background-color var(--t-fast); }
.cat-nav a:hover { border-color: var(--primary); }
.cat-nav a[aria-current="page"] { background: var(--primary); border-color: transparent; color: var(--surface-dark); }
@media (max-width: 767px) { .cat-nav { margin-inline: calc(-1 * var(--gutter)); } .cat-nav ul { flex-wrap: nowrap; overflow-x: auto; padding-inline: var(--gutter); scrollbar-width: none; } .cat-nav li { flex: none; } }

/* Guia em destaque */
.sr-title { margin-bottom: var(--s6); font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -0.03em; }
.feat-post { display: grid; overflow: hidden; border: 1.5px solid var(--text); border-radius: 24px; background: var(--white); }
.feat-post img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface-alt); }
.feat-body { display: grid; gap: var(--s4); align-content: center; justify-items: start; padding: var(--s8); }
.feat-label { display: inline-flex; align-items: center; gap: 8px; font: 500 0.75rem/1.4 var(--font-mono); color: var(--accent); }
.feat-body h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.375rem); letter-spacing: -0.035em; line-height: 1.1; }
.feat-body > p:not(.feat-label):not(.post-meta) { color: var(--text-muted); line-height: 1.6; }
@media (min-width: 1024px) { .feat-post { grid-template-columns: 7fr 5fr; } .feat-body { padding: var(--s12); } }

/* Cards de artigo */
.post-grid { display: grid; gap: var(--gap); }
/* Grade sempre completa, com qualquer número de cards: a última linha incompleta divide o espaço por igual */
@media (min-width: 768px) {
  .post-grid { grid-template-columns: 1fr 1fr; }
  .post-grid > :last-child { grid-column: auto; }
  .post-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .post-grid { grid-template-columns: repeat(6, 1fr); }
  .post-grid > *, .post-grid > :last-child, .post-grid > :last-child:nth-child(odd) { grid-column: span 2; }
  .post-grid > :last-child:nth-child(3n+2), .post-grid > :nth-last-child(2):nth-child(3n+1) { grid-column: span 3; }
  .post-grid > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
}
.post-card { display: flex; flex-direction: column; overflow: hidden; background: var(--white) !important; position: relative; }
.post-card .card-img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }
.post-card .card-body { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--s3); flex: 1; padding: var(--s6); }
.post-cat { justify-self: start; position: relative; z-index: 2; text-decoration: none; }
.post-cat:hover { text-decoration: underline; }
.post-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.02em; }
.post-link { color: var(--text); text-decoration: none; font-weight: 600; }
.post-card .post-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.post-link:hover { text-decoration: underline; text-decoration-color: var(--primary); text-underline-offset: 4px; }
.post-sum { max-height: 3.2em; overflow: hidden; font-size: var(--fs-small); line-height: 1.6; color: var(--text-muted); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: var(--s3); border-top: 1px dashed var(--border-strong); font: 500 0.6875rem/1.4 var(--font-mono); color: var(--text-muted); }
.post-meta .ic-sm { width: 14px; height: 14px; color: var(--accent); }
.post-card:hover { transform: translateY(-4px); border-color: var(--text); }

/* Paginação com links reais */
.pager { margin-top: var(--s12); }
.pager ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
.pager a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 48px; min-height: 48px; padding: 0 16px; border: 1px solid var(--border-strong); border-radius: var(--r-pill); background: var(--white); color: var(--text); font-weight: 600; text-decoration: none; }
.pager a:hover { border-color: var(--text); }
.pager a[aria-current="page"] { background: var(--surface-dark); border-color: transparent; color: var(--primary); }

/* Temas */
.topic-grid { display: grid; gap: var(--gap); }
.topic-grid a { position: relative; display: grid; gap: 4px; height: 100%; padding: var(--s6) var(--s12) var(--s6) var(--s6); border-radius: 20px; background: var(--surface-dark); color: var(--text-inverse); text-decoration: none; font-weight: 400; transition: transform var(--t-fast); }
.topic-grid strong { font: 600 1.25rem/1.2 var(--font-display); letter-spacing: -0.02em; }
.topic-grid span { font: 500 0.75rem/1.4 var(--font-mono); color: var(--primary); }
.topic-grid small { font-size: 0.8125rem; color: var(--text-muted-inverse); }
.topic-grid .ic-sm { position: absolute; top: var(--s6); right: var(--s6); color: var(--primary); transition: transform var(--t-fast); }
.topic-grid a:hover { transform: translateY(-3px); }
.topic-grid a:hover .ic-sm { transform: translateX(4px); }
@media (min-width: 768px) { .topic-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .topic-grid { grid-template-columns: repeat(3, 1fr); } }

/* CTA para o serviço */
.svc-cta { display: grid; gap: var(--s8); align-items: center; padding: var(--s8); border-radius: 24px; background: var(--surface-dark); color: var(--text-inverse); }
.svc-cta h2 { margin-top: var(--s3); color: var(--text-inverse); font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); }
.svc-cta p:not(.eyebrow) { margin-top: var(--s3); max-width: 56ch; color: var(--text-muted-inverse); line-height: 1.6; }
.svc-cta strong { color: var(--text-inverse); }
.svc-cta-actions { display: grid; gap: var(--s3); }
.svc-cta-actions .btn { justify-content: center; }
@media (min-width: 1024px) { .svc-cta { grid-template-columns: 7fr 5fr; padding: var(--s12); } }

/* =====================================================================
   ARTIGO DO BLOG (modelo M6) · /blog/[slug]/
   ===================================================================== */
.art-hero { padding-block: calc(88px + var(--s6)) var(--s12); background: var(--surface-dark); color: var(--text-inverse); }
.art-wrap { display: grid; gap: var(--s5, 20px); }
.art-wrap > * { min-width: 0; }
.art-hero .post-cat { color: var(--primary); }
.art-hero h1 { max-width: 24ch; color: var(--text-inverse); font-size: clamp(2rem, 1.35rem + 2.3vw, 3.25rem); line-height: 1.07; }
.author-line { display: flex; align-items: center; gap: var(--s4); }
.author-line img { width: 56px; height: 56px; flex: none; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--primary); background: var(--surface-dark-elevated); }
.author-line p { color: var(--text-muted-inverse); font-size: var(--fs-small); line-height: 1.5; }
.author-line a { color: var(--text-inverse); font-weight: 700; }
.author-line a:hover { color: var(--secondary); }
.author-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px; font: 500 0.6875rem/1.5 var(--font-mono) !important; }
.author-meta span + span::before { content: "·"; margin-right: 14px; color: var(--primary); }

.art-layout { display: grid; gap: var(--s12); padding-block: var(--s12) var(--section); }
.art-layout > * { min-width: 0; }
@media (min-width: 1024px) { .art-layout { grid-template-columns: minmax(0, 1fr) 260px; gap: var(--s16, 64px); } }
.art-body { max-width: 760px; font-size: var(--fs-body); line-height: 1.75; }
.art-body > * + * { margin-top: var(--s5, 20px); }
.art-body h2 { margin-top: var(--s16, 64px); padding-top: var(--s8); border-top: 1px solid var(--border); font-family: var(--font-display); font-weight: 600; font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2.25rem); line-height: 1.12; letter-spacing: -0.03em; scroll-margin-top: 100px; }
.art-body h3 { margin-top: var(--s8); font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem); line-height: 1.2; letter-spacing: -0.02em; }
.art-body h4 { margin-top: var(--s6); font-weight: 700; font-size: 1.0625rem; }
.art-body h3 + p, .art-body h4 + p { margin-top: var(--s2); }
.art-body p a, .art-body li a:not(.link-arrow) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.art-body strong { font-weight: 700; color: var(--text); }
.art-answer { font-size: var(--fs-body-lg); line-height: 1.65; color: var(--text); padding: var(--s6); border-radius: 20px; background: var(--surface-highlight); border: 1px solid var(--border); }
.art-lead { font-size: 1.125rem; color: var(--text); font-weight: 600; line-height: 1.6; }
.art-box-title { display: flex; align-items: center; gap: 8px; margin-bottom: var(--s4); font: 600 1.0625rem/1.3 var(--font-display); letter-spacing: -0.01em; }
.art-box-title .ic-sm { color: var(--accent); }
.art-summary, .art-toc, .art-check { padding: var(--s6); border: 1.5px solid var(--text); border-radius: 20px; background: var(--white); }
.art-summary { margin-top: var(--s8) !important; }
.art-company { margin-top: var(--s8) !important; padding: var(--s4) var(--s6); border-radius: 16px; background: var(--surface-alt); font-size: var(--fs-small); line-height: 1.6; color: var(--text-muted); }
.art-company strong { color: var(--text); }
.art-company .link-arrow { display: inline-flex; margin-top: var(--s2); font-weight: 600; }
.art-toc ol { display: grid; gap: 2px; counter-reset: toc; }
.art-toc li { counter-increment: toc; }
.art-toc a { display: flex; gap: 12px; align-items: baseline; min-height: 40px; padding: 8px 0; color: var(--text) !important; text-decoration: none !important; font-weight: 600; border-bottom: 1px dashed var(--border); }
.art-toc li:last-child a { border-bottom: 0; }
.art-toc a::before { content: counter(toc, decimal-leading-zero); font: 500 0.75rem/1 var(--font-mono); color: var(--accent); }
.art-toc a:hover { color: var(--accent) !important; }

/* Tabela "pode / cuidado / não pode" */
.art-body .table-wrap { margin-top: var(--s8); border: 1.5px solid var(--text); border-radius: 20px; overflow-x: auto; background: var(--white); }
.art-table { min-width: 640px; }
.art-table th, .art-table td { min-width: 0; }
.art-table th[scope="row"] { min-width: 170px; }
.art-table td:nth-child(2) { white-space: nowrap; }
.st { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-pill); font: 700 0.75rem/1.4 var(--font-sans); border: 1px solid; }
.st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.st-ok { color: var(--success); border-color: rgba(47, 113, 72, 0.35); background: rgba(47, 113, 72, 0.08); }
.st-care { color: var(--accent); border-color: rgba(122, 90, 34, 0.4); background: rgba(201, 163, 95, 0.14); }
.st-no { color: var(--error); border-color: rgba(169, 54, 50, 0.35); background: rgba(169, 54, 50, 0.07); }

/* Passo a passo */
.art-steps { display: grid; gap: var(--s4); counter-reset: step; }
.art-steps > li { padding: var(--s6); border-radius: 20px; background: var(--surface-dark); color: var(--text-inverse); }
.art-steps h3 { margin-top: 0; color: var(--primary); }
.art-steps p { margin-top: var(--s2); color: var(--text-muted-inverse); }
.art-steps p a { color: var(--secondary) !important; }
@media (min-width: 768px) { .art-steps { grid-template-columns: 1fr 1fr; } .art-steps > :last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* Checklist marcável */
.art-check { background: var(--surface-alt); border-color: var(--border-strong); }
.check-list { display: grid; gap: 2px; }
@media (min-width: 768px) { .check-list { grid-template-columns: 1fr 1fr; column-gap: var(--s6); } .check-list > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
.check-list label { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 0; cursor: pointer; font-size: var(--fs-small); line-height: 1.5; }
.check-list input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--success); cursor: pointer; }
.check-list input:checked + * , .check-list label:has(input:checked) { color: var(--text-muted); text-decoration: line-through; }

/* CTA no meio do texto */
.art-cta { display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: start; padding: var(--s6); border-radius: 20px; background: var(--surface-dark); color: var(--text-inverse); }
.art-cta .ic-box { border-color: rgba(201, 163, 95, 0.45); color: var(--primary); }
.art-cta p { color: var(--text-muted-inverse); }
.art-cta-title { font: 600 1.25rem/1.25 var(--font-display) !important; color: var(--text-inverse) !important; letter-spacing: -0.02em; margin-bottom: var(--s2); }
.art-cta .link-arrow { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s4); color: var(--primary); font-weight: 700; text-decoration: none; }
.art-cta .link-arrow:hover { text-decoration: underline; }
@media (max-width: 520px) { .art-cta { grid-template-columns: 1fr; } }

/* Exemplo real */
.art-case { display: grid; gap: var(--s6); padding: var(--s8); border-radius: 24px; background: var(--surface-dark); color: var(--text-inverse); }
.art-case-num { display: grid; gap: 4px; }
.art-case-num strong { font: 600 clamp(3rem, 2.4rem + 2vw, 4.5rem)/1 var(--font-display); color: var(--primary); letter-spacing: -0.04em; }
.art-case-num span { font: 500 0.8125rem/1.4 var(--font-mono); color: var(--text-muted-inverse); }
.art-case blockquote p { font-size: var(--fs-body-lg); line-height: 1.5; color: var(--text-inverse); }
.art-case blockquote footer { margin-top: var(--s3); font-size: var(--fs-small); color: var(--text-muted-inverse); }
.art-case figcaption { padding-top: var(--s4); border-top: 1px solid var(--border-dark); font-size: 0.8125rem; color: var(--text-muted-inverse); }
.art-case figcaption a { color: var(--secondary) !important; }
@media (min-width: 768px) { .art-case { grid-template-columns: 220px 1fr; align-items: center; } .art-case figcaption { grid-column: 1 / -1; } }

.art-faq { border-top: 1px solid var(--border); }
.art-faq .faq-a p { margin-top: 0; }
.art-sources { padding-top: var(--s4); border-top: 1px dashed var(--border-strong); font-size: 0.8125rem; color: var(--text-muted); line-height: 1.6; }

/* Caixa do autor */
.author-box { display: grid; grid-template-columns: auto 1fr; gap: var(--s6); margin-top: var(--s12) !important; padding: var(--s6); border: 1.5px solid var(--text); border-radius: 20px; background: var(--white); }
.author-box img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary); background: var(--surface-alt); }
.author-box .art-box-title { margin-bottom: var(--s2); font: 500 0.75rem/1.4 var(--font-mono); color: var(--text-muted); }
.author-name { font: 600 1.375rem/1.2 var(--font-display); letter-spacing: -0.02em; }
.author-role { font-size: var(--fs-small); color: var(--accent); font-weight: 700; }
.author-box p:not(.author-name):not(.author-role):not(.art-box-title) { margin-top: var(--s3); font-size: var(--fs-small); color: var(--text-muted); line-height: 1.6; }
.author-box .link-arrow { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s4); color: var(--text); font-weight: 700; text-decoration: none; }
.author-box .link-arrow:hover { color: var(--accent); }
@media (max-width: 520px) { .author-box { grid-template-columns: 1fr; } .author-box img { width: 72px; height: 72px; } }

/* Barra lateral fixa */
.art-side { display: none; }
@media (min-width: 1024px) {
  .art-side { display: block; }
  .art-side-sticky { position: sticky; top: 112px; display: grid; gap: var(--s4); padding: var(--s6); border-radius: 20px; background: var(--surface-alt); border: 1px solid var(--border); }
  .art-side .art-box-title { margin-bottom: 0; font-size: 1rem; }
  .art-side ol { display: grid; gap: 2px; }
  .art-side a:not(.btn) { display: block; padding: 6px 0; color: var(--text-muted); font-size: 0.875rem; font-weight: 600; text-decoration: none; }
  .art-side a:not(.btn):hover { color: var(--text); text-decoration: underline; }
  .art-side .btn { justify-content: center; }
}
.art-case, .art-case blockquote { margin: 0; }
.art-body > .art-case { margin-top: var(--s6); }
@media (max-width: 767px) { .author-meta { flex-direction: column; gap: 2px; } .author-meta span + span::before { content: none; } }

/* =====================================================================
   INSTITUCIONAIS (modelo M9) · políticas, /obrigado/ e 404
   ===================================================================== */
.legal-ic, .thanks-ic { display: inline-flex; align-items: center; justify-content: center; justify-self: start; width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(201, 163, 95, 0.45); color: var(--primary); }
.legal-updated { display: inline-flex; align-items: center; gap: 8px; font: 500 0.75rem/1.4 var(--font-mono); color: var(--text-muted-inverse); }
.legal-updated .ic-sm { color: var(--primary); }
.legal-sum { max-width: 62ch; color: var(--text-muted-inverse); font-size: var(--fs-body-lg); line-height: 1.6; }
.legal-body .art-toc { margin-top: var(--s6); }
.legal-body .table-wrap + p, .legal-body .list-mark + p { margin-top: var(--s6); }
.legal-table { min-width: 680px; }
.legal-table td:nth-child(2) { white-space: normal; }
.legal-table td .st { margin-bottom: 4px; }
.legal-rights { display: grid; gap: var(--s3); counter-reset: dir; }
.legal-rights li { counter-increment: dir; position: relative; display: grid; gap: 4px; padding: var(--s6) var(--s6) var(--s6) 64px; border-radius: 20px; background: var(--surface-dark); color: var(--text-inverse); }
.legal-rights li::before { content: counter(dir, decimal-leading-zero); position: absolute; left: var(--s6); top: var(--s6); font: 500 0.875rem/1.6 var(--font-mono); color: var(--primary); }
.legal-rights strong { color: var(--text-inverse) !important; font: 600 1.125rem/1.3 var(--font-display); }
.legal-rights span { color: var(--text-muted-inverse); font-size: var(--fs-small); line-height: 1.5; }
@media (min-width: 768px) { .legal-rights { grid-template-columns: 1fr 1fr; } }
.legal-steps { display: grid; gap: var(--s3); counter-reset: passo; }
.legal-steps li { counter-increment: passo; grid-template-columns: 40px 1fr; gap: var(--s3); align-items: start; padding: var(--s4) var(--s6); border: 1.5px solid var(--text); border-radius: 16px; background: var(--white); }
.legal-steps li::before { content: counter(passo); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: var(--surface-dark); font: 600 0.9375rem/1 var(--font-display); }
.legal-types { display: grid; gap: var(--s3); }
.legal-types li { display: grid; gap: var(--s2); align-content: start; padding: var(--s6); border-radius: 20px; background: var(--surface-dark); }
.legal-types strong { color: var(--primary) !important; font: 600 1.25rem/1.2 var(--font-display); }
.legal-types span { color: var(--text-muted-inverse); font-size: var(--fs-small); line-height: 1.6; }
@media (min-width: 768px) { .legal-types { grid-template-columns: repeat(3, 1fr); } }
.legal-more { padding-block: var(--s12); }
.legal-links { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s8); }
.legal-links .link-arrow { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--text); font-weight: 700; text-decoration: none; }
.legal-links .link-arrow:hover { color: var(--accent); text-decoration: underline; }

/* Obrigado */
.thanks-hero { padding-block: calc(88px + var(--s12)) var(--s16); background: var(--surface-dark); color: var(--text-inverse); text-align: center; }
.thanks-wrap { display: grid; gap: var(--s5, 20px); justify-items: center; }
.thanks-wrap > * { min-width: 0; }
.thanks-ic { justify-self: center; width: 72px; height: 72px; background: rgba(201, 163, 95, 0.12); }
.thanks-ic .ic { width: 36px; height: 36px; }
.thanks-hero h1 { max-width: 22ch; color: var(--text-inverse); font-size: clamp(2rem, 1.35rem + 2.3vw, 3.25rem); line-height: 1.07; overflow-wrap: break-word; }
.thanks-svc { padding: 8px 18px; border-radius: var(--r-pill); border: 1px solid var(--border-dark); background: rgba(255, 255, 255, 0.04); color: var(--text-muted-inverse); font-size: var(--fs-small); }
.thanks-svc strong { color: var(--primary); }
.thanks-lead { max-width: 52ch; color: var(--text-muted-inverse); font-size: var(--fs-body-lg); line-height: 1.6; }
.thanks-time { display: inline-flex; align-items: center; gap: 8px; font: 500 0.8125rem/1.5 var(--font-mono); color: var(--secondary); }
.thanks-steps { counter-reset: guia; }
.thanks-wa { display: grid; gap: var(--s4); justify-items: center; margin-top: var(--s12); padding: var(--s8); border-radius: 24px; border: 1.5px solid var(--text); background: var(--white); text-align: center; }
.thanks-wa p { font-weight: 600; }
.thanks-back { display: flex; justify-content: center; margin-top: var(--s12); }
.thanks-prep { display: grid; gap: var(--gap); }
@media (min-width: 768px) { .thanks-prep { grid-template-columns: 1fr 1fr; } }
.thanks-prep-card { display: grid; align-content: start; gap: var(--s6); padding: var(--s8); }
.thanks-dl { display: grid; gap: var(--s4); margin: 0; }
.thanks-dl > div { display: grid; gap: var(--s1); padding-bottom: var(--s4); border-bottom: var(--divider); }
.thanks-dl > div:last-child { padding-bottom: 0; border-bottom: 0; }
.thanks-dl dt { font: 500 0.8125rem/1.5 var(--font-mono); color: var(--accent); }
.thanks-dl dd { margin: 0; line-height: 1.6; }
@media (max-width: 520px) { .thanks-wa .btn, .thanks-back .btn { width: 100%; justify-content: center; } }

/* 404 */
.nf-hero { padding-block: calc(88px + var(--s12)) var(--s16); background: var(--surface-dark); color: var(--text-inverse); }
.nf-wrap { display: grid; gap: var(--s5, 20px); justify-items: start; }
.nf-wrap > * { min-width: 0; }
.nf-code { font: 500 clamp(4rem, 3rem + 5vw, 8rem)/1 var(--font-mono); color: var(--primary); letter-spacing: -0.04em; }
.nf-hero h1 { max-width: 20ch; color: var(--text-inverse); font-size: clamp(2rem, 1.35rem + 2.3vw, 3.25rem); line-height: 1.07; }
.nf-lead { max-width: 60ch; color: var(--text-muted-inverse); font-size: var(--fs-body-lg); line-height: 1.6; }
.nf-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s2); }
@media (min-width: 1024px) { .nf-grid { grid-template-columns: repeat(4, 1fr); } }
.nf-popular { display: grid; gap: var(--s3); }
.nf-popular a { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 64px; padding: var(--s4) var(--s6); border: 1.5px solid var(--text); border-radius: 16px; background: var(--white); color: var(--text); font-weight: 700; text-decoration: none; }
.nf-popular a:hover { background: var(--surface-highlight); }
@media (min-width: 768px) { .nf-popular { grid-template-columns: 1fr 1fr; } }
.legal-steps li { display: block; position: relative; padding-left: 64px; }
.legal-steps li::before { position: absolute; left: var(--s6); top: var(--s4); }
.legal-table td { min-width: 110px; }
.legal-table td:nth-child(3) { min-width: 220px; }


/* ============ Página de case (modelo M5) · tudo dentro de .page-case para não vazar ============ */
.page-case .case-hero-grid { display: grid; gap: var(--s12); align-items: start; margin-top: var(--s6); }
.page-case .case-hero h1 { max-width: 24ch; font-size: clamp(1.875rem, 1.3rem + 2vw, 2.875rem); line-height: 1.08; }
.page-case .case-ficha { position: relative; z-index: 1; display: grid; gap: var(--s4); padding: var(--s8); border: 1px solid var(--border-dark); border-radius: 20px; background: var(--surface-dark-elevated); color: var(--text-inverse); }
.page-case .case-ficha-title { display: flex; align-items: center; gap: 8px; font: 500 0.75rem/1.4 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--primary); }
.page-case .case-ficha dl { display: grid; margin: 0; }
.page-case .case-ficha dl > div { display: grid; grid-template-columns: 96px 1fr; gap: var(--s4); padding-block: var(--s3); border-bottom: 1px solid var(--border-dark); }
.page-case .case-ficha dt { font: 500 0.75rem/1.6 var(--font-mono); color: var(--text-muted-inverse); }
.page-case .case-ficha dd { margin: 0; font-size: var(--fs-small); font-weight: 600; color: var(--text-inverse); }
.page-case .case-ficha .case-ficha-res { border-bottom: 0; padding-top: var(--s4); align-items: baseline; }
.page-case .case-ficha-res dd { font-weight: 400; color: var(--text-muted-inverse); }
.page-case .case-ficha-res strong { display: block; font: 600 clamp(2.25rem, 1.9rem + 1.4vw, 3rem)/1 var(--font-display); letter-spacing: -0.04em; color: var(--primary); margin-bottom: 4px; }
.page-case .case-ficha-note { font-size: 0.8125rem; line-height: 1.5; color: var(--text-muted-inverse); padding-top: var(--s4); border-top: 1px dashed var(--border-dark); }
@media (min-width: 1024px) { .page-case .case-hero-grid { grid-template-columns: 7fr 4fr; gap: var(--s16); } .page-case .case-hero .hub-hero-text { padding-top: var(--s4); } }

.page-case .case-stats { display: grid; gap: var(--gap); margin-bottom: var(--s12); }
.page-case .case-stat { display: grid; gap: var(--s2); align-content: start; padding: var(--s8); border-radius: 20px; background: var(--surface-dark); color: var(--text-inverse); }
.page-case .case-stat strong { font: 600 clamp(2.5rem, 2rem + 2vw, 3.5rem)/1 var(--font-display); letter-spacing: -0.04em; color: var(--primary); }
.page-case .case-stat span { font: 500 0.8125rem/1.4 var(--font-mono); color: var(--secondary); }
.page-case .case-stat p { margin-top: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--border-dark); font-size: var(--fs-small); line-height: 1.6; color: var(--text-muted-inverse); }
@media (min-width: 768px) { .page-case .case-stats { grid-template-columns: repeat(3, 1fr); } }

.page-case .case-compare { display: grid; gap: var(--s8); align-items: start; }
.page-case .compare-case { min-width: 560px; }
.page-case .compare-case th, .page-case .compare-case td { min-width: 140px; }
.page-case .case-print { display: grid; gap: var(--s3); margin: 0; }
.page-case .case-print img { width: 100%; height: auto; border-radius: 20px; border: 1px solid var(--border); }
.page-case .case-print figcaption { font: 500 0.75rem/1.5 var(--font-mono); color: var(--text-muted); }
.page-case .case-disclaimer { display: flex; align-items: center; gap: 8px; }
@media (min-width: 1024px) { .page-case .case-compare { grid-template-columns: 7fr 5fr; } }
@media (min-width: 1024px) { .page-case .case-compare:not(:has(.case-print)) { grid-template-columns: 1fr; } }

.page-case .case-before { display: grid; gap: var(--s6); }
.page-case .case-before .section-head { align-self: start; align-content: start; }
.page-case .case-before .eyebrow { justify-self: start; }
.page-case .case-before-text { display: grid; gap: var(--s4); max-width: 68ch; font-size: var(--fs-body-lg); line-height: 1.7; color: var(--text); }
@media (min-width: 1024px) { .page-case .case-before { grid-template-columns: 4fr 8fr; gap: var(--s16); } }

@media (min-width: 1024px) { .page-case .case-steps { grid-template-columns: repeat(4, 1fr); } }
.page-case .case-steps li { grid-template-rows: auto auto 1fr auto; }
.page-case .case-here { padding-top: var(--s4); border-top: 1px dashed var(--border-dark); color: var(--text-inverse) !important; }
.page-case .case-here b { color: var(--primary); font-weight: 600; }

.page-case .case-time { display: grid; gap: var(--s4); counter-reset: none; }
.page-case .case-time li { position: relative; display: grid; gap: var(--s2); align-content: start; padding: var(--s6); padding-top: var(--s8); border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.page-case .case-time li::before { content: ""; position: absolute; top: var(--s4); left: var(--s6); width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--primary); }
.page-case .case-time .is-goal { background: var(--surface-dark); border-color: transparent; }
.page-case .case-time .is-goal::before { background: var(--primary); box-shadow: 0 0 0 5px rgba(201, 163, 95, 0.2); }
.page-case .case-time-when { font: 500 0.75rem/1.4 var(--font-mono); color: var(--accent); }
.page-case .case-time h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.2; }
.page-case .case-time p { font-size: var(--fs-small); line-height: 1.6; color: var(--text-muted); }
.page-case .case-time .is-goal .case-time-when { color: var(--secondary); }
.page-case .case-time .is-goal h3 { color: var(--primary); }
.page-case .case-time .is-goal p { color: var(--text-muted-inverse); }
@media (min-width: 768px) { .page-case .case-time { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .page-case .case-time { grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
  .page-case .case-time::before { content: none; }
}

.page-case .case-testi { display: grid; gap: var(--s8); align-items: center; }
.page-case .case-testi .wa-card { max-width: 480px; width: 100%; }
@media (min-width: 1024px) { .page-case .case-testi { grid-template-columns: 5fr 6fr; gap: var(--s16); } .page-case .case-testi .wa-card { justify-self: end; } }
.page-case .case-testi-media { display: grid; gap: var(--s6); justify-items: center; }
.page-case .case-testi-video { grid-template-columns: 1fr; gap: var(--s12); }
.page-case .case-testi-video .case-testi-media { justify-items: stretch; align-items: start; gap: var(--s8); }
.page-case .case-testi-video .case-video { max-width: 320px; justify-self: center; }
.page-case .case-testi-side { display: grid; gap: var(--s6); align-content: start; }
.page-case .case-testi-side .wa-card { max-width: none; justify-self: stretch !important; }
.page-case .case-testi-video .case-testi-media { align-items: stretch; }
.page-case .case-testi-side { grid-template-rows: auto 1fr auto auto; }
.page-case .case-quote { margin: 0; display: grid; gap: var(--s6); padding: var(--s8); border-radius: 20px; background: var(--surface-dark); color: var(--text-inverse); }
.page-case .case-quote blockquote { margin: 0; padding-left: var(--s6); border-left: 3px solid var(--primary); font: 500 clamp(1.375rem, 1.15rem + 0.8vw, 1.875rem)/1.3 var(--font-display); letter-spacing: -0.02em; }
.page-case .case-quote figcaption { display: grid; gap: 2px; padding-top: var(--s4); border-top: 1px solid var(--border-dark); font-size: 0.875rem; color: var(--text-muted-inverse); }
.page-case .case-quote figcaption strong { color: var(--text-inverse); font-size: 1rem; }
.page-case .case-transcript { border: 1px solid var(--border-strong); border-radius: 16px; background: var(--white); }
.page-case .case-transcript summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 56px; padding: var(--s3) var(--s3) var(--s3) var(--s6); font: 600 1rem/1.3 var(--font-display); color: var(--text); cursor: pointer; list-style: none; }
.page-case .case-transcript summary:hover { color: var(--accent); }
.page-case .case-transcript summary:focus-visible { outline: none; box-shadow: var(--sh-focus); border-radius: 16px; }
.page-case .case-transcript .faq-minus, .page-case .case-transcript[open] .faq-plus { display: none; }
.page-case .case-transcript[open] .faq-minus { display: block; }
.page-case .case-transcript-body { display: grid; gap: var(--s3); padding: 0 var(--s6) var(--s6); }
.page-case .case-transcript-body p { font-size: var(--fs-small); line-height: 1.7; color: var(--text-muted); }
@media (min-width: 768px) { .page-case .case-testi-video .case-testi-media { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); } .page-case .case-testi-video .case-video { justify-self: start; } }
@media (min-width: 1024px) { .page-case .case-testi.case-testi-video { grid-template-columns: 1fr; gap: var(--s12); } .page-case .case-testi-video .case-testi-media { grid-template-columns: 320px 1fr; gap: var(--s12); } }
.page-case .case-video { margin: 0; width: 100%; max-width: 340px; display: grid; gap: var(--s3); }
.page-case .case-video video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 20px; border: 1px solid var(--border-dark); background: var(--surface-dark); }
.page-case .case-video figcaption { font: 500 0.75rem/1.5 var(--font-mono); color: var(--text-muted); }
@media (min-width: 1024px) { .page-case .case-testi-media { justify-items: end; } }

.page-case .case-lessons { display: grid; gap: var(--gap); }
.page-case .case-lesson { display: grid; gap: var(--s4); align-content: start; padding: var(--s8); border: 1px solid var(--border); border-radius: 20px; background: var(--surface); }
.page-case .case-lesson h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); letter-spacing: -0.025em; line-height: 1.15; }
.page-case .case-lesson p { font-size: var(--fs-small); line-height: 1.7; color: var(--text-muted); }
@media (min-width: 1024px) { .page-case .case-lessons { grid-template-columns: repeat(3, 1fr); } }

/* ============ Página do Método TOPO (modelo M11) · tudo dentro de .page-metodo para não vazar ============ */
/* Hero com texto à esquerda, como nas demais páginas (regra v1.1) */
.page-metodo .topo-hero-text { display: grid; gap: var(--s6); justify-items: start; margin-top: var(--s6); max-width: 820px; }

.page-metodo .topo-hero h1 { max-width: 20ch; }
.page-metodo .topo-hero .hero-sub { max-width: 60ch; }
.page-metodo .topo-tile { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 18px; background: var(--surface-dark-elevated); border: 1px solid var(--primary); box-shadow: 0 0 32px rgba(201, 163, 95, 0.22); font: 600 2.25rem/1 var(--font-display); color: var(--primary); letter-spacing: -0.02em; }
.page-metodo .topo-letters { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s12); }
.page-metodo .topo-letters a { display: grid; justify-items: start; gap: var(--s2); padding: var(--s6) var(--s4); border-radius: 20px; text-decoration: none; color: var(--text-inverse); transition: background-color var(--t-base); }
.page-metodo .topo-letters a:hover, .page-metodo .topo-letters a:focus-visible { background: rgba(201, 163, 95, 0.08); }
.page-metodo .topo-letters .topo-tile { margin-bottom: var(--s2); }
.page-metodo .topo-letters b { font: 600 1rem/1.2 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.page-metodo .topo-letters small { font-size: var(--fs-small); line-height: 1.5; color: var(--text-muted-inverse); max-width: 22ch; }
.page-metodo .topo-facts { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--s3) var(--s8); margin-top: var(--s8); padding-top: var(--s8); border-top: 1px solid var(--border-dark); }
.page-metodo .topo-facts li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--text-muted-inverse); }
.page-metodo .topo-facts .ic { color: var(--primary); }
.page-metodo .topo-facts strong { color: var(--text-inverse); }
@media (min-width: 1024px) { .page-metodo .topo-letters { grid-template-columns: repeat(4, 1fr); gap: var(--s6); } .page-metodo .topo-tile { width: 88px; height: 88px; font-size: 2.75rem; border-radius: 20px; } }

.page-metodo .topo-what { display: grid; gap: var(--s6); }
.page-metodo .topo-what .section-head { align-self: start; align-content: start; }
.page-metodo .topo-what .eyebrow { justify-self: start; }
.page-metodo .topo-what-text { display: grid; gap: var(--s4); max-width: 68ch; font-size: var(--fs-body-lg); line-height: 1.7; }
@media (min-width: 1024px) { .page-metodo .topo-what { grid-template-columns: 4fr 8fr; gap: var(--s16); } }

.page-metodo .topo-pre { display: grid; gap: var(--gap); }
.page-metodo .topo-pre li { position: relative; display: grid; gap: var(--s3); align-content: start; padding: var(--s8); border: 1px solid var(--border); border-radius: 20px; background: var(--surface); }
.page-metodo .topo-pre li > .ic { width: 26px; height: 26px; color: var(--accent); }
.page-metodo .topo-pre-n { position: absolute; top: var(--s8); right: var(--s8); font: 500 0.8125rem/1 var(--font-mono); color: var(--accent); }
.page-metodo .topo-pre h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.2; }
.page-metodo .topo-pre p { font-size: var(--fs-small); line-height: 1.6; color: var(--text-muted); }
@media (min-width: 768px) { .page-metodo .topo-pre { grid-template-columns: repeat(3, 1fr); } }

.page-metodo .topo-stages { display: grid; gap: var(--gap); }
.page-metodo .topo-stage { display: grid; grid-template-rows: auto auto 1fr auto auto; gap: var(--s4); padding: var(--s8); border: 1px solid var(--border-dark); border-radius: 24px; background: var(--surface-dark-elevated); scroll-margin-top: 110px; }
.page-metodo .topo-stage h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); letter-spacing: -0.025em; line-height: 1.2; color: var(--text-inverse); }
.page-metodo .topo-stage .list-check li { font-size: var(--fs-small); }
.page-metodo .topo-out { padding: var(--s4); border-radius: 14px; background: rgba(201, 163, 95, 0.1); border: 1px solid rgba(201, 163, 95, 0.3); font-size: var(--fs-small); line-height: 1.6; color: var(--text-inverse); }
.page-metodo .topo-out b { color: var(--primary); font-weight: 600; }
.page-metodo .topo-lead { color: var(--text-muted-inverse); line-height: 1.6; }
.page-metodo .topo-lead strong { color: var(--text-inverse); font-weight: 600; }
.page-metodo .topo-hero-text .cta-row { margin-top: var(--s6); }
.page-metodo .topo-when { display: flex; align-items: center; gap: 8px; padding-top: var(--s4); border-top: 1px dashed var(--border-dark); font: 500 0.75rem/1.4 var(--font-mono); color: var(--secondary); }
@media (min-width: 768px) { .page-metodo .topo-stages { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .page-metodo .topo-stages { grid-template-columns: repeat(4, 1fr); } .page-metodo .topo-stage { padding: var(--s6); } }

.page-metodo .topo-time { display: grid; gap: var(--s4); }
.page-metodo .topo-time li { position: relative; display: grid; gap: var(--s2); align-content: start; padding: var(--s8) var(--s6) var(--s6); border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.page-metodo .topo-time li::before { content: ""; position: absolute; top: var(--s4); left: var(--s6); width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--primary); }
.page-metodo .topo-time .is-goal { background: var(--surface-dark); border-color: transparent; }
.page-metodo .topo-time .is-goal::before { background: var(--primary); box-shadow: 0 0 0 5px rgba(201, 163, 95, 0.2); }
.page-metodo .topo-time-when { font: 500 0.75rem/1.4 var(--font-mono); color: var(--accent); }
.page-metodo .topo-time h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.1875rem; letter-spacing: -0.02em; line-height: 1.2; }
.page-metodo .topo-time p { font-size: var(--fs-small); line-height: 1.6; color: var(--text-muted); }
.page-metodo .topo-time .is-goal .topo-time-when { color: var(--secondary); }
.page-metodo .topo-time .is-goal h3 { color: var(--primary); }
.page-metodo .topo-time .is-goal p { color: var(--text-muted-inverse); }
.page-metodo .topo-disclaimer { display: flex; align-items: flex-start; gap: 8px; }
.page-metodo .topo-disclaimer .ic { flex: none; margin-top: 3px; }
@media (min-width: 768px) { .page-metodo .topo-time { grid-template-columns: repeat(2, 1fr); } .page-metodo .topo-time > :last-child { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .page-metodo .topo-time { grid-template-columns: repeat(5, 1fr); } .page-metodo .topo-time > :last-child { grid-column: auto; } }

.page-metodo .compare-topo th, .page-metodo .compare-topo td { min-width: 170px; }

.page-case .case-testi-proof { display: grid; align-content: center; gap: var(--s4); padding: var(--s6) var(--s8); border: 1px solid var(--border-strong); border-radius: 20px; background: var(--white); }
.page-case .case-testi-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; list-style: none; }
.page-case .case-testi-stats li { display: grid; gap: 6px; align-content: start; padding: 0 var(--s4); border-left: 1px solid var(--border); }
.page-case .case-testi-stats li:first-child { padding-left: 0; border-left: 0; }
.page-case .case-testi-stats strong { font: 600 clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem)/1 var(--font-display); letter-spacing: -0.04em; color: var(--accent); }
.page-case .case-testi-stats span { font-size: var(--fs-small); line-height: 1.4; color: var(--text-muted); }
.page-case .case-testi-note { font: 500 0.75rem/1.5 var(--font-mono); color: var(--text-muted); }
.page-case .case-testi-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--s6); padding: var(--s6) var(--s8); border-radius: 20px; background: var(--surface-highlight); }
.page-case .case-testi-cta p { font-size: var(--fs-small); line-height: 1.55; color: var(--text-muted); }
.page-case .case-testi-cta strong { display: block; margin-bottom: 2px; font: 600 1.125rem/1.3 var(--font-display); color: var(--text); }
.page-case .case-testi-cta .btn { flex: none; }
@media (max-width: 1023px) { .page-case .case-testi-cta { flex-direction: column; align-items: stretch; } .page-case .case-testi-cta .btn { white-space: normal; text-align: center; } }
@media (max-width: 520px) { .page-case .case-testi-stats { grid-template-columns: 1fr; gap: var(--s4); } .page-case .case-testi-stats li { padding: var(--s4) 0 0; border-left: 0; border-top: 1px solid var(--border); } .page-case .case-testi-stats li:first-child { padding-top: 0; border-top: 0; } }

/* Formulários de orçamento por serviço (quote-form) */
.hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.quote-form { position: relative; }
.opt { font-weight: 400; color: var(--text-muted); font-size: 0.8125rem; }
.field-check label { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 0.875rem; line-height: 1.5; color: var(--text-muted); cursor: pointer; min-height: 44px; }
.field-check input[type=checkbox] { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); }
.field-check a { color: var(--accent); text-decoration: underline; }
.field-check input[aria-invalid=true] + span { color: var(--error); }
.quote-form .form-wa { margin-top: calc(var(--s2) * -1); }
.quote-form button[type=submit].is-loading { cursor: progress; opacity: 0.85; }
.quote-form button[type=submit].is-loading .btn-label::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 10px; vertical-align: -3px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: cc-spin 0.7s linear infinite; }
@keyframes cc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .quote-form button[type=submit].is-loading .btn-label::before { animation: none; } }

.serp-stars { display: inline-flex; gap: 1px; margin-left: auto; }
.serp-stars .ic-star { width: 12px; height: 12px; }

/* Simetria: grade de 3 cartões fica em 3 colunas desde o tablet; em listas de 2 colunas com número ímpar, o último item ocupa a linha inteira */
@media (min-width: 768px) {
  .hub-diff-grid:has(> :last-child:nth-child(3)) { grid-template-columns: repeat(3, 1fr); }
  .gain-check > li:last-child:nth-child(odd), .incl-list > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Animações de entrada só com JavaScript ligado: sem JS, o conteúdo aparece direto */
.js .hero-text > * { animation: fade-up var(--t-entrance) both; }
.js .xray { animation: fade-up var(--t-entrance) 240ms both; }
.js .hub-hero-text > * { animation: fade-up var(--t-entrance) both; }
.js .serp { animation: fade-up var(--t-entrance) 200ms both; }
.js .svc-form { animation: fade-up var(--t-entrance) 200ms both; }
.js .entity-card { animation: fade-up var(--t-entrance) 200ms both; }
.js .page-metodo .topo-hero-text > * { animation: fade-up var(--t-entrance) both; }

/* ============ AVISO DE COOKIES (LGPD) ============
   Fica fixo por cima da página (não empurra nada: sem mudança de layout) e não cobre a tela no celular.
   Os três botões têm o mesmo peso visual, como pede a LGPD. */
.cookie-bar {
  position: fixed; z-index: 120; left: 0; right: 0; bottom: 0;
  display: grid; gap: var(--s3); max-height: 45vh; overflow-y: auto;
  padding: var(--s4) calc(var(--s4) + env(safe-area-inset-right, 0px)) calc(var(--s4) + env(safe-area-inset-bottom, 0px)) calc(var(--s4) + env(safe-area-inset-left, 0px));
  background: var(--surface-dark-elevated); color: var(--text-inverse);
  border-top: 1px solid var(--border-dark); box-shadow: var(--sh-dark);
  animation: cookie-in var(--t-slow) both;
}
@media (min-width: 768px) {
  .cookie-bar {
    left: calc(var(--s6) + env(safe-area-inset-left, 0px)); right: auto; bottom: calc(var(--s6) + env(safe-area-inset-bottom, 0px));
    width: min(440px, calc(100vw - 2 * var(--s6))); max-height: none; gap: var(--s4); padding: var(--s6);
    border: 1px solid var(--border-dark); border-radius: 24px;
  }
}
@keyframes cookie-in { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .cookie-bar { animation: none; } }
.cookie-title { font: 600 1.0625rem/1.3 var(--font-display); color: var(--text-inverse); }
.cookie-text { font-size: var(--fs-small); line-height: 1.55; color: var(--text-muted-inverse); }
.cookie-text a { color: var(--secondary); text-decoration: underline; text-underline-offset: 3px; }
.cookie-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.cookie-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--s3);
  border: 1.5px solid var(--primary); border-radius: var(--r-pill); background: transparent; color: var(--text-inverse);
  font: 600 0.875rem/1.2 var(--font-sans); text-align: center; cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast);
}
@media (max-width: 400px) { .cookie-btn { padding: 0 var(--s1); font-size: 0.8125rem; white-space: nowrap; } }
.cookie-btn:hover { background: var(--primary); color: var(--surface-dark); }
.cookie-btn:active { background: var(--primary-active); color: var(--surface-dark); }
.cookie-btn:focus-visible, .cookie-close:focus-visible, .cookie-switch input:focus-visible + span { outline: 3px solid var(--secondary); outline-offset: 3px; }
/* No celular, o botão flutuante do WhatsApp some enquanto o aviso está aberto, para não ficar por cima dos botões */
@media (max-width: 767px) { .cookie-open .wa-float { visibility: hidden; } }

.cookie-dialog {
  width: min(560px, calc(100vw - 2 * var(--s4))); max-height: calc(100dvh - 2 * var(--s4)); margin: auto; padding: 0;
  border: 1px solid var(--border-dark); border-radius: 24px; background: var(--surface-dark-elevated); color: var(--text-inverse);
  box-shadow: var(--sh-dark); overflow-y: auto;
}
.cookie-dialog::backdrop { background: rgba(10, 10, 9, 0.6); }
.cookie-form { display: grid; gap: var(--s4); padding: var(--s6); }
.cookie-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.cookie-close {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none;
  border: 1px solid var(--border-dark); border-radius: 50%; background: transparent; color: var(--text-inverse); cursor: pointer;
}
.cookie-close:hover { border-color: var(--primary); color: var(--primary); }
.cookie-cat { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s4); border: 1px solid var(--border-dark); border-radius: var(--r-lg); }
.cookie-cat-text { display: grid; gap: var(--s1); }
.cookie-cat-title { font-weight: 700; color: var(--text-inverse); }
.cookie-cat-text p:not(.cookie-cat-title) { font-size: var(--fs-small); line-height: 1.5; color: var(--text-muted-inverse); }
.cookie-always { flex: none; font: 500 0.75rem/1.4 var(--font-mono); color: var(--secondary); }
.cookie-switch { position: relative; flex: none; display: inline-flex; width: 52px; height: 44px; align-items: center; cursor: pointer; }
.cookie-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cookie-switch span { position: relative; width: 52px; height: 30px; border-radius: var(--r-pill); background: var(--surface-dark-active); border: 1.5px solid var(--border-strong); transition: background-color var(--t-fast), border-color var(--t-fast); pointer-events: none; }
.cookie-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: var(--text-muted-inverse); transition: transform var(--t-fast), background-color var(--t-fast); }
.cookie-switch input:checked + span { background: var(--primary); border-color: transparent; }
.cookie-switch input:checked + span::after { transform: translateX(22px); background: var(--surface-dark); }

/* Link "Preferências de cookies" do rodapé (botão com cara de link) */
.footer-cookie-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--text-muted-inverse); font: inherit; cursor: pointer; }
.footer-cookie-btn:hover { color: var(--secondary); }
.no-js [data-cookie-prefs] { display: none; }

/* ============ POP-UPS DE CAPTAÇÃO (saída, rolagem e tempo parado) ============
   Cartão em duas partes: lado escuro com a chamada e lado claro com o formulário em 2 passos.
   No celular vira uma gaveta que sobe por baixo, sem cobrir a tela inteira. */
.lead-pop {
  width: min(920px, calc(100vw - 2 * var(--s6))); max-width: none; max-height: calc(100dvh - 2 * var(--s6));
  margin: auto; padding: 0; border: 0; border-radius: 28px; background: var(--surface); color: var(--text);
  box-shadow: var(--sh-dark); overflow: hidden; overscroll-behavior: contain;
}
.lead-pop[open] { animation: pop-in var(--t-slow) both; }
.lead-pop::backdrop { background: rgba(10, 10, 9, 0.62); backdrop-filter: blur(3px); }
@keyframes pop-in { from { transform: translateY(24px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) { .lead-pop[open] { animation: none; } }
.lead-pop-inner { position: relative; display: grid; grid-template-columns: 5fr 6fr; max-height: inherit; }
.lead-pop-close {
  position: absolute; top: var(--s4); right: var(--s4); z-index: 2; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 50%; background: var(--white); color: var(--text); cursor: pointer;
}
.lead-pop-close:hover { border-color: var(--text); }
.lead-pop-close:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.lead-pop-side {
  position: relative; display: grid; align-content: center; gap: var(--s4); padding: var(--s12) var(--s8);
  background: var(--surface-dark); color: var(--text-inverse); overflow: hidden; isolation: isolate;
}
.lead-pop-side::before {
  content: ""; position: absolute; z-index: -1; inset: auto -30% -40% auto; width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(201, 163, 95, 0.22), transparent 70%);
}
.lead-pop-ic { display: inline-flex; align-items: center; justify-content: center; justify-self: start; width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(201, 163, 95, 0.45); background: rgba(201, 163, 95, 0.12); color: var(--primary); }
.lead-pop-side .eyebrow { justify-self: start; color: var(--text-muted-inverse); border-color: var(--border-dark); background: rgba(255, 255, 255, 0.03); }
.lead-pop-title { font: 600 clamp(1.625rem, 1.3rem + 1vw, 2.25rem)/1.1 var(--font-display); letter-spacing: -0.03em; color: var(--text-inverse); }
.lead-pop-text { color: var(--text-muted-inverse); line-height: 1.6; }
.lead-pop-proof { display: grid; gap: var(--s3); margin-top: var(--s2); padding-top: var(--s4); border-top: 1px solid var(--border-dark); }
.lead-pop-proof li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-small); line-height: 1.5; color: var(--text-inverse); }
.lead-pop-proof .ic { flex: none; margin-top: 2px; color: var(--primary); }
.lead-pop-form { align-content: start; gap: var(--s4); padding: var(--s12) var(--s8) var(--s8); border-radius: 0; overflow-y: auto; }
.lead-pop-progress { display: grid; gap: var(--s2); padding-right: 56px; }
.lead-pop-step { font: 500 0.8125rem/1.4 var(--font-mono); color: var(--accent); }
.lead-pop-bar { display: block; height: 4px; border-radius: var(--r-pill); background: var(--surface-alt); overflow: hidden; }
.lead-pop-bar i { display: block; width: 50%; height: 100%; border-radius: inherit; background: var(--primary); transition: width var(--t-base); }
.lead-pop-form.is-step2 .lead-pop-bar i { width: 100%; }
.lead-pop-pane { display: grid; gap: var(--s4); }
.lead-pop-pane .btn .ic, .lead-pop-actions .btn .ic { width: 18px; height: 18px; }
.lead-pop-actions { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); }
.lead-pop-actions .btn { justify-content: center; gap: 8px; }
.lead-pop-wa { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: var(--fs-small); color: var(--whatsapp); }
.lead-pop-wa:hover { color: var(--whatsapp-hover); text-decoration: underline; text-underline-offset: 3px; }
.lead-pop .field-row { grid-template-columns: 1fr 1fr; align-items: end; }

@media (max-width: 767px) {
  .lead-pop {
    width: 100%; max-height: 88dvh; margin: auto 0 0; border-radius: 24px 24px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .lead-pop[open] { animation-name: sheet-in; }
  @keyframes sheet-in { from { transform: translateY(100%); } }
  .lead-pop-inner { grid-template-columns: 1fr; max-height: 88dvh; overflow-y: auto; }
  .lead-pop-side { gap: var(--s2); padding: var(--s6) 72px var(--s6) var(--s4); }
  .lead-pop-ic, .lead-pop-proof, .lead-pop-side .eyebrow { display: none; }
  .lead-pop-title { font-size: 1.375rem; }
  .lead-pop-text { font-size: var(--fs-small); line-height: 1.5; }
  .lead-pop-close { top: var(--s4); right: var(--s4); background: transparent; color: var(--text-inverse); border-color: var(--border-dark); }
  .lead-pop-form { padding: var(--s6) var(--s4) var(--s4); overflow: visible; }
  .lead-pop-progress { padding-right: 0; }
  .lead-pop .field-row { grid-template-columns: 1fr; }
}

/* Termo definido no texto (<dfn>): mesmo visual do texto, só marca o significado */
dfn { font-style: normal; }
/* Data de atualização da página (no topo, perto do título) */
.page-updated { margin-top: var(--s4); font-size: var(--fs-small); color: var(--text-muted); }
.band-dark .page-updated, .hub-hero .page-updated { color: var(--text-muted-inverse); }
/* Resumo da página (mesmo cartão do resumo dos artigos), antes das perguntas frequentes */
.page-summary { max-width: 860px; margin: 0 auto var(--s12); }
.page-summary p:not(.art-box-title) { margin-top: var(--s3); }