/* =====================================================================
   Site público — sistema de design
   Troca de marca: altere só os tokens --brand-* (e, se quiser, --ink-*).
   Contraste AA conferido: texto branco sobre --brand-600 (5,2:1),
   --brand-600 sobre branco (5,2:1), --muted sobre branco (7,1:1).
   ===================================================================== */
:root {
  /* marca */
  --brand: #e8590c;          /* decorativo: ilustrações, destaques grandes */
  --brand-50: #fff7ed;
  --brand-100: #ffedd5;
  --brand-200: #fed7aa;
  --brand-300: #fdba74;      /* links e foco sobre fundo escuro */
  --brand-600: #c2410c;      /* botões, links, texto de destaque */
  --brand-700: #9a3412;      /* hover */
  /* neutros "concreto" */
  --ink: #1c1917;
  --ink-2: #292524;
  --ink-3: #3a3531;
  --ink-soft: #44403c;
  --muted: #57534e;
  --subtle: #6f6862;
  --line: #e7e5e4;
  --line-strong: #d6d3d1;
  --field-border: #857f79;   /* 3,9:1 sobre branco (WCAG 1.4.11) */
  --bg: #fafaf9;
  --surface: #ffffff;
  --surface-2: #f5f5f4;
  --concrete: #e7e5e4;
  /* estados */
  --ok: #15803d;   --ok-bg: #f0fdf4;   --ok-line: #bbf7d0;
  --warn: #b45309; --warn-bg: #fffbeb; --warn-line: #fde68a;
  --danger: #b91c1c; --danger-bg: #fef2f2; --danger-line: #fecaca;
  --info: #1d4ed8; --info-bg: #eff6ff; --info-line: #bfdbfe;
  --whats: #15803d;
  --whats-hover: #166534;
  /* tipografia (fontes do sistema, sem CDN) */
  --font: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", system-ui, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", system-ui, sans-serif;
  --fs-xs: .75rem; --fs-sm: .875rem; --fs-base: 1rem; --fs-md: 1.0625rem; --fs-lg: 1.25rem;
  --fs-xl: clamp(1.3rem, 1.1rem + .8vw, 1.6rem);
  --fs-2xl: clamp(1.6rem, 1.25rem + 1.4vw, 2.2rem);
  --fs-3xl: clamp(2rem, 1.4rem + 2.6vw, 3.1rem);
  /* espaçamento */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s20: 80px;
  /* forma */
  --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-xl: 22px; --r-full: 999px;
  --sh-1: 0 1px 2px rgba(28, 25, 23, .06);
  --sh-2: 0 1px 2px rgba(28, 25, 23, .05), 0 4px 14px rgba(28, 25, 23, .06);
  --sh-3: 0 2px 4px rgba(28, 25, 23, .04), 0 14px 34px -10px rgba(28, 25, 23, .20);
  --sh-4: 0 30px 70px -18px rgba(28, 25, 23, .38);
  --t: 180ms cubic-bezier(.2, .7, .3, 1);
  --focus-ring: #c2410c;
  --header-h: 72px;
  --container: 1200px;
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
main { flex: 1 0 auto; }
html, body { overflow-x: clip; }
main:focus { outline: none; }
[hidden] { display: none !important; }
img, svg { max-width: 100%; }
img { height: auto; }
a { color: var(--brand-600); text-underline-offset: .18em; text-decoration-thickness: 1px; transition: color var(--t); }
a:hover { color: var(--brand-700); }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.18; margin: 0 0 .5em; letter-spacing: -.015em; font-weight: 750; color: var(--ink); text-wrap: balance; overflow-wrap: break-word; }
h1 { font-size: var(--fs-3xl); letter-spacing: -.025em; font-weight: 800; }
h2 { font-size: var(--fs-2xl); letter-spacing: -.02em; }
h3, .h3 { font-size: var(--fs-lg); }
.h4 { font-size: var(--fs-md); }
p { margin: 0 0 .9em; }
small { font-size: var(--fs-sm); }
code { font-size: .9em; background: var(--surface-2); padding: 2px 6px; border-radius: var(--r-sm); word-break: break-all; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s6) 0; }
.ico { width: 1.25em; height: 1.25em; flex: none; vertical-align: middle; }
.ico-lg { width: 28px; height: 28px; }
.ico-sm { width: 1em; height: 1em; }
.num, .price, .money { font-variant-numeric: tabular-nums; white-space: nowrap; }

:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
.on-dark, .hero, .page-head, .site-footer, .topbar, .cta-band { --focus-ring: #fdba74; }

.skip-link { position: absolute; left: 12px; top: -80px; z-index: 200; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: var(--r); font-weight: 700; text-decoration: none; box-shadow: var(--sh-3); transition: top var(--t); }
.skip-link:focus { top: 12px; color: #fff; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.mt { margin-top: var(--s6); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* honeypot anti-robô (bot_trap_fields): fora da tela, sem ocupar espaço nem gerar rolagem */
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-600); margin: 0 0 var(--s3); }
.eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: currentColor; }
.lead { font-size: var(--fs-md); color: var(--ink-soft); max-width: 62ch; }

/* ===== Botões ===== */
.btn { --btn-bg: var(--surface); --btn-fg: var(--ink); --btn-bd: var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 11px 22px;
  border-radius: var(--r); border: 1.5px solid var(--btn-bd); background: var(--btn-bg); color: var(--btn-fg);
  font: inherit; font-weight: 650; font-size: var(--fs-base); line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--t), border-color var(--t), color var(--t), box-shadow var(--t), transform var(--t); -webkit-tap-highlight-color: transparent; }
.btn:hover { color: var(--btn-fg); }
.btn:active { transform: translateY(1px); }
.btn .ico { width: 20px; height: 20px; }
.btn-primary { --btn-bg: var(--brand-600); --btn-fg: #fff; --btn-bd: var(--brand-600); box-shadow: 0 1px 2px rgba(154, 52, 18, .25), inset 0 1px 0 rgba(255, 255, 255, .12); }
.btn-primary:hover { --btn-bg: var(--brand-700); --btn-bd: var(--brand-700); box-shadow: 0 6px 16px -6px rgba(154, 52, 18, .6); }
.btn-secondary { --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink); }
.btn-secondary:hover { --btn-bg: var(--ink-3); --btn-bd: var(--ink-3); }
.btn-outline { --btn-bg: var(--surface); --btn-fg: var(--ink); --btn-bd: var(--ink); }
.btn-outline:hover { --btn-bg: var(--ink); --btn-fg: #fff; }
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-strong); }
.btn-ghost:hover { --btn-bg: var(--surface-2); --btn-bd: var(--field-border); }
.btn-light { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; }
.btn-light:hover { --btn-bg: var(--brand-50); --btn-bd: var(--brand-50); }
.btn-ghost-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .45); }
.btn-ghost-light:hover { --btn-bg: rgba(255, 255, 255, .1); --btn-bd: #fff; }
.btn-whats { --btn-bg: var(--whats); --btn-fg: #fff; --btn-bd: var(--whats); }
.btn-whats:hover { --btn-bg: var(--whats-hover); --btn-bd: var(--whats-hover); }
.btn-danger { --btn-bg: var(--danger); --btn-fg: #fff; --btn-bd: var(--danger); }
.btn-danger:hover { --btn-bg: #991b1b; --btn-bd: #991b1b; }
.btn-sm { min-height: 44px; padding: 8px 16px; font-size: var(--fs-sm); }
.btn-lg { min-height: 56px; padding: 14px 28px; font-size: var(--fs-md); }
.btn-block { width: 100%; }
/* v2.24.4: botão nunca passa da largura do bloco; no celular o texto quebra em linhas (ex.: "Ver as 120 centrais e a área de
   atendimento" saía pela direita da tela, cortado pelo overflow-x: clip do body) */
.btn { max-width: 100%; }
@media (max-width: 640px) { .btn { white-space: normal; text-align: center; text-wrap: balance; } }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .65; cursor: not-allowed; transform: none; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: spin .7s linear infinite; }
.btn.is-busy { pointer-events: none; opacity: .85; }
.btn.is-busy::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; background: none; border: 0; padding: 0; color: var(--brand-600); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; font: inherit; font-weight: 600; }
.link:hover { color: var(--brand-700); }
.link.danger { color: var(--danger); }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; text-decoration: none; white-space: nowrap; }
.link-arrow .ico { width: 18px; height: 18px; transition: transform var(--t); }
.link-arrow:hover .ico { transform: translateX(3px); }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r); border: 0; background: transparent; color: var(--ink); cursor: pointer; position: relative; transition: background-color var(--t); }
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn .ico { width: 24px; height: 24px; }

/* ===== Badges / chips / tags ===== */
.badge { position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-full); background: var(--brand-600); color: #fff; font-size: .72rem; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; font-variant-numeric: tabular-nums; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-full); font-size: var(--fs-sm); font-weight: 650; background: var(--surface-2); color: var(--ink-soft); }
.pill-brand { background: var(--brand-50); color: var(--brand-700); }
.pill-ok { background: var(--ok-bg); color: var(--ok); }
.tags { list-style: none; padding: 0; margin: var(--s3) 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-full); padding: 2px 10px; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-soft); }

/* ===== Alertas ===== */
.flash-wrap { padding-top: var(--s5); }
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--r); margin: 0 0 12px; border: 1px solid; font-size: .95rem; line-height: 1.5; }
.alert > .ico { margin-top: 1px; width: 20px; height: 20px; }
.alert p { margin: 0; }
.alert-success { background: var(--ok-bg); border-color: var(--ok-line); color: #14532d; }
.alert-error { background: var(--danger-bg); border-color: var(--danger-line); color: #7f1d1d; }
.alert-warning { background: var(--warn-bg); border-color: var(--warn-line); color: #78350f; }
.alert-info { background: var(--info-bg); border-color: var(--info-line); color: #1e3a8a; }
.error-summary { border: 1px solid var(--danger-line); border-left: 4px solid var(--danger); background: var(--danger-bg); border-radius: var(--r); padding: 16px 18px; color: #7f1d1d; }
.error-summary h2 { font-size: var(--fs-md); color: #7f1d1d; margin: 0 0 6px; display: flex; gap: 8px; align-items: center; }
.error-summary ul { margin: 0; padding-left: 1.2em; }
.error-summary a { color: #7f1d1d; font-weight: 600; }

/* ===== Topbar + Header ===== */
.topbar { background: var(--ink); color: #d6d3d1; font-size: var(--fs-sm); }
.topbar-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.topbar-msg { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.topbar-msg .ico { color: var(--brand-300); width: 16px; height: 16px; }
.topbar-links { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; align-items: center; }
.topbar-links li, .topbar-links a { display: inline-flex; align-items: center; gap: 6px; }
.topbar-links a { color: #fff; text-decoration: none; min-height: 38px; }
.topbar-links a:hover { color: var(--brand-300); }
.topbar-links .ico { width: 16px; height: 16px; opacity: .85; }

.site-header { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; transition: box-shadow var(--t); }
.site-header.is-scrolled { box-shadow: 0 6px 20px -12px rgba(28, 25, 23, .25); }
.header-row { display: flex; align-items: center; gap: 20px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; flex-shrink: 0; min-height: 44px; }
.brand:hover { color: var(--ink); }
.brand img { width: 40px; height: 40px; border-radius: 10px; }
.brand-name { font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; line-height: 1.15; letter-spacing: -.01em; max-width: 14ch; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.brand--light, .brand--light:hover { color: #fff; }
.main-nav { margin-left: auto; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.nav-list a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: var(--r-sm); color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: .95rem; white-space: nowrap; position: relative; transition: color var(--t), background-color var(--t); }
.nav-list a:hover { color: var(--ink); background: var(--surface-2); }
.nav-list a[aria-current="page"] { color: var(--ink); }
.nav-list a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 3px; border-radius: 2px; background: var(--brand); }
.nav-head, .nav-extra { display: none; }
.header-actions { display: flex; align-items: center; gap: 6px; }
.unit-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; max-width: 240px; padding: 6px 14px 6px 10px; border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--r); font: inherit; cursor: pointer; color: var(--ink); text-align: left; transition: border-color var(--t), background-color var(--t); }
.unit-chip:hover { border-color: var(--brand-600); background: var(--brand-50); }
.unit-chip > .ico { color: var(--brand-600); width: 22px; height: 22px; }
.unit-chip-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.unit-chip-text small { font-size: .7rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.unit-chip-text span { font-size: .88rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-toggle { display: none; }
.unit-chip-short { display: none !important; }
.nav-backdrop { position: fixed; inset: 0; background: rgba(28, 25, 23, .5); z-index: 90; opacity: 0; transition: opacity var(--t); }
.nav-backdrop.is-visible { opacity: 1; }

/* ===== Page head e breadcrumbs ===== */
.page-head { position: relative; overflow: hidden; background: var(--ink); color: #fff; padding: var(--s12) 0 var(--s10); isolation: isolate; }
.page-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(900px 300px at 85% -40%, rgba(232, 89, 12, .28), transparent 60%),
  linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 28px 28px,
  linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 28px 28px; }
.page-head h1 { color: #fff; margin-bottom: .3em; }
.page-head p { color: #d6d3d1; margin: 0; max-width: 64ch; font-size: var(--fs-md); }
.page-head a:not(.btn) { color: var(--brand-300); }
.page-head .muted { color: #d6d3d1; }
.page-head--compact { padding: var(--s8) 0 var(--s8); }
.page-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.crumbs { margin: 0 0 var(--s3) !important; font-size: var(--fs-sm); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; color: #d6d3d1; }
.crumbs li { display: inline-flex; align-items: center; gap: 4px; }
.crumbs li + li::before { content: ""; width: 14px; height: 14px; background: currentColor; opacity: .6; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.crumbs a { color: #fff; text-decoration: none; opacity: .85; display: inline-block; padding: 6px 0; }
.crumbs a:hover { opacity: 1; text-decoration: underline; color: #fff; }
.crumbs [aria-current] { color: var(--brand-300); font-weight: 600; }
.head-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: var(--s4); align-items: center; }
.head-meta .pill { background: rgba(255, 255, 255, .1); color: #fff; }

/* ===== Seções ===== */
.section { padding: var(--s16) 0; }
.section-sm { padding: var(--s10) 0; }
.section-alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: var(--s8); flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.section-head p { margin: 6px 0 0; color: var(--muted); max-width: 60ch; }
.section-head--center { flex-direction: column; align-items: center; text-align: center; }

/* ===== Hero ===== */
.hero { position: relative; overflow: hidden; background: var(--ink); color: #fff; padding: var(--s16) 0 var(--s20); isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(700px 420px at 78% 30%, rgba(232, 89, 12, .30), transparent 62%),
  radial-gradient(600px 400px at 0% 100%, rgba(120, 113, 108, .25), transparent 60%),
  linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 32px 32px,
  linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 32px 32px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--s12); align-items: center; }
.hero .eyebrow { color: var(--brand-300); }
.hero h1 { color: #fff; font-size: clamp(2.2rem, 1.5rem + 3vw, 3.5rem); margin-bottom: .35em; }
.hero h1 em { font-style: normal; color: var(--brand-300); }
.hero .lead { color: #e7e5e4; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); margin-bottom: var(--s8); }
.hero-search { background: #fff; color: var(--ink); border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--sh-4); max-width: 560px; --focus-ring: #c2410c; }
.hero-search-title { display: flex; align-items: center; gap: 8px; font-weight: 750; margin: 0 0 var(--s3); font-size: var(--fs-md); }
.hero-search-title .ico { color: var(--brand-600); }
.hero-search .cep-form { max-width: none; }
.hero-search .hero-note { color: var(--muted); font-size: var(--fs-sm); margin: var(--s3) 0 0; }
.hero-search .hero-note a { color: var(--brand-600); }
.hero-points { list-style: none; padding: 0; margin: var(--s6) 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; color: #e7e5e4; font-size: .95rem; }
.hero-points li { display: inline-flex; align-items: center; gap: 8px; }
.hero-points .ico { color: var(--brand-300); width: 20px; height: 20px; }
.hero-art { position: relative; }
.hero-art svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .35)); }

/* ilustração do caminhão (SVG próprio) */
.ill-bg { fill: rgba(255, 255, 255, .04); }
.ill-sun { fill: var(--brand); opacity: .22; }
.ill-city { fill: #3a3531; }
.ill-city-2 { fill: #2f2a27; }
.ill-window { fill: #57534e; }
.ill-crane { stroke: #57534e; stroke-width: 4; fill: none; stroke-linecap: round; }
.ill-crane-fill { fill: #57534e; }
.ill-ground { fill: #292524; }
.ill-road { stroke: #57534e; stroke-width: 4; stroke-dasharray: 26 18; stroke-linecap: round; }
.ill-brand { fill: var(--brand); }
.ill-brand-dark { fill: #b8470a; }
.ill-drum { fill: #e7e5e4; }
.ill-drum-shade { fill: #c9c4bf; }
.ill-stripe { fill: var(--brand); }
.ill-dark { fill: #1c1917; }
.ill-metal { fill: #78716c; }
.ill-light { fill: #f5f5f4; }
.ill-glass { fill: #bfdbfe; opacity: .9; }
.ill-tire { fill: #0c0a09; }
.ill-hub { fill: #a8a29e; }
.ill-speed { stroke: #78716c; stroke-width: 4; stroke-linecap: round; opacity: .7; }
.ill-lamp { fill: #fde68a; }
.ill-card { fill: #fff; }
.ill-card-line { fill: #e7e5e4; }
.ill-check { stroke: var(--ok); stroke-width: 4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ill-ok-bg { fill: var(--ok-bg); }
.ill-text-dark { fill: #1c1917; font: 700 15px var(--font); }
.ill-text-muted { fill: #57534e; font: 600 12px var(--font); }
@media (prefers-reduced-motion: no-preference) {
  .ill-drum-rot { animation: drum 6s linear infinite; transform-box: fill-box; transform-origin: center; }
  .ill-float { animation: float 5s ease-in-out infinite; }
}
@keyframes drum { from { transform: translateX(0); } to { transform: translateX(-64px); } }
@keyframes float { 50% { transform: translateY(-6px); } }

/* ===== Faixa de benefícios ===== */
.benefits { position: relative; z-index: 2; margin-top: calc(-1 * var(--s12)); }
.benefits-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-3); }
.benefit { display: flex; gap: 14px; align-items: flex-start; padding: var(--s6); }
.benefit + .benefit { border-left: 1px solid var(--line); }
.benefit h3 { font-size: var(--fs-base); margin: 0 0 2px; }
.benefit p { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.icon-tile { display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 12px; background: var(--brand-50); color: var(--brand-600); }
.icon-tile .ico { width: 26px; height: 26px; }
.icon-tile--dark { background: rgba(255, 255, 255, .08); color: var(--brand-300); }

/* ===== Passos ===== */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); counter-reset: step; }
.steps li { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s6); display: flex; flex-direction: column; gap: 6px; box-shadow: var(--sh-1); }
.steps li::after { content: ""; position: absolute; top: 46px; right: -21px; width: 22px; height: 2px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 5px, transparent 5px 9px); }
.steps li:last-child::after { display: none; }
.step-num { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.step-num b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.step-num .ico { width: 28px; height: 28px; color: var(--brand-600); }
.steps strong { font-size: var(--fs-md); font-weight: 750; }
.steps small { color: var(--muted); font-size: var(--fs-sm); }

/* ===== Cards ===== */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s6); box-shadow: var(--sh-1); }
.card > :last-child { margin-bottom: 0; }
.card-title { display: flex; align-items: center; gap: 10px; font-size: var(--fs-lg); margin: 0 0 var(--s4); }
.card-title .ico { color: var(--brand-600); }
.card-hover { transition: box-shadow var(--t), transform var(--t), border-color var(--t); }
.card-hover:hover { box-shadow: var(--sh-3); transform: translateY(-2px); border-color: var(--line-strong); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--s5); }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: var(--s5); }
.col-span { grid-column: 1 / -1; }
.stack { display: flex; flex-direction: column; gap: var(--s3); }
.stack-lg { display: flex; flex-direction: column; gap: var(--s6); }
.feature-card h3 { font-size: var(--fs-md); margin: var(--s4) 0 6px; }
.feature-card p { color: var(--muted); margin: 0; }

/* card de produto */
.product-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); transition: box-shadow var(--t), transform var(--t), border-color var(--t); }
.product-card:hover { box-shadow: var(--sh-3); transform: translateY(-3px); border-color: var(--line-strong); }
.product-card:focus-within { box-shadow: var(--sh-3); }
.product-thumb { width: 100%; height: 170px; object-fit: cover; display: block; }
.product-fck { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 18px 20px 16px; background:
  linear-gradient(135deg, #f5f5f4 0%, #e7e5e4 100%); border-bottom: 1px solid var(--line); overflow: hidden; }
.product-fck::after { content: ""; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; border: 18px solid rgba(232, 89, 12, .10); }
.fck-value { display: flex; align-items: baseline; gap: 6px; color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 600; }
.fck-value strong { font-family: var(--font-display); font-size: 2.3rem; line-height: 1; color: var(--ink); letter-spacing: -.03em; font-weight: 800; font-variant-numeric: tabular-nums; }
.fck-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--muted); }
.product-body { padding: 18px 20px 6px; flex: 1; }
.product-body h3 { font-size: var(--fs-md); margin: 0 0 6px; }
.product-body h3 a { color: var(--ink); text-decoration: none; }
.product-body h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.product-body p { color: var(--muted); font-size: .95rem; margin: 0; }
.product-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 16px 20px 20px; }
.price-from { display: flex; flex-direction: column; line-height: 1.2; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.price-from strong { font-size: 1.3rem; color: var(--ink); white-space: nowrap; text-transform: none; letter-spacing: -.01em; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 2px; }
.price-from strong small { font-size: .8rem; color: var(--muted); font-weight: 600; }
.price-muted { color: var(--muted); font-weight: 650; font-size: .95rem; }
.product-go { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2); color: var(--ink); flex: none; transition: background-color var(--t), color var(--t), transform var(--t); }
.product-card:hover .product-go { background: var(--brand-600); color: #fff; transform: translateX(2px); }
.ribbon { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--warn-bg); color: #78350f; border: 1px solid var(--warn-line); font-size: var(--fs-xs); font-weight: 700; padding: 3px 10px; border-radius: var(--r-full); }
.product-card.is-unavailable .product-fck, .product-card.is-unavailable .product-body { opacity: .7; }

.unit-card h3, .unit-card h2 { margin-bottom: 6px; }
.unit-card p { margin: 0 0 6px; color: var(--ink-soft); }
/* v2.15: central da obra (CEP informado) */
.unit-card.is-mine { border-color: var(--ok-line); box-shadow: 0 0 0 1px var(--ok-line); }
.unit-mine { margin-bottom: 8px; font-size: var(--fs-xs); }
.unit-mine-card { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); margin-bottom: var(--s6); border-color: var(--ok-line); }
.unit-mine-card > div:not(.actions) { flex: 1 1 260px; }
.unit-mine-card .eyebrow { margin: 0 0 2px; color: var(--ok); }
.unit-mine-card h2 { margin: 0 0 4px; }
.unit-mine-card .icon-tile { color: var(--ok); background: var(--ok-bg); }
.unit-mine-card .actions { margin: 0; }
.unit-mine-card .nowrap, .nowrap { white-space: nowrap; }   /* v2.23: utilitário geral (CEP numa linha só) */
@media (max-width: 560px) { .unit-mine-card .icon-tile { display: none; } .unit-mine-card .actions { width: 100%; } .unit-mine-card .actions .btn { flex: 1 1 auto; } }
.contact-list { list-style: none; margin: 0 0 var(--s4); padding: 0; display: flex; flex-direction: column; gap: 4px; }
.contact-list li { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-soft); }
.contact-list .ico { color: var(--brand-600); margin-top: 3px; width: 18px; height: 18px; }
.contact-list a { display: inline-flex; min-height: 32px; align-items: center; }

/* estados vazios */
.empty, .empty-state { text-align: center; padding: var(--s12) var(--s6); color: var(--muted); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); }
.empty-state .icon-tile { margin-bottom: var(--s4); width: 56px; height: 56px; }
.empty-state h2, .empty-state h3 { color: var(--ink); font-size: var(--fs-lg); margin-bottom: 6px; }
.empty-state p { max-width: 46ch; margin: 0 auto var(--s5); }
.empty-state .actions { margin: 0; }

/* ===== Formulários ===== */
label { display: flex; flex-direction: column; gap: 6px; font-weight: 650; font-size: .92rem; color: var(--ink); }
.label-text { display: inline-flex; gap: 4px; align-items: baseline; }
.req { color: var(--danger); font-weight: 700; }
.opt { color: var(--muted); font-weight: 500; font-size: var(--fs-sm); }
input, select, textarea { font: inherit; font-weight: 400; font-size: 1rem; color: var(--ink); background: var(--surface); border: 1.5px solid var(--field-border); border-radius: var(--r); padding: 11px 14px; width: 100%; min-height: 48px; transition: border-color var(--t), box-shadow var(--t), background-color var(--t); }
input::placeholder, textarea::placeholder { color: #736c66; font-weight: 400; letter-spacing: 0; }
input:hover, select:hover, textarea:hover { border-color: var(--ink-soft); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-600); box-shadow: 0 0 0 4px rgba(194, 65, 12, .18); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 1px; }
select { appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2344403c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px; }
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; min-height: 0; padding: 0; accent-color: var(--brand-600); cursor: pointer; flex: none; }
[aria-invalid="true"] { border-color: var(--danger) !important; background-color: #fffafa; }
[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(185, 28, 28, .15); }
.field-error { display: flex; align-items: flex-start; gap: 6px; color: var(--danger); font-size: var(--fs-sm); font-weight: 600; }
.field-error::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.1'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.1'/%3E%3C/svg%3E") center / contain no-repeat; }
.hint, label small.muted, label > small:not(.field-error) { font-weight: 400; color: var(--muted); font-size: var(--fs-sm); }
.form-note { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 var(--s4); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.card { padding: var(--s6); }
fieldset.card legend { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 750; font-size: var(--fs-lg); padding: 0; margin-bottom: var(--s5); color: var(--ink); float: left; width: 100%; }
fieldset.card legend + * { clear: both; }
.legend-num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; flex: none; }
.input-affix { position: relative; display: flex; align-items: center; }
.input-affix input { padding-right: 52px; }
.input-affix .affix { position: absolute; right: 14px; color: var(--muted); font-weight: 600; pointer-events: none; font-size: .95rem; }
.check-row, .terms-check { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; font-weight: 400; margin: 0; cursor: pointer; }
.check-row input, .terms-check input { margin-top: 1px; }
.terms-check { padding: 12px 14px; background: var(--surface-2); border-radius: var(--r); font-size: .93rem; }
.filters { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.filters label { min-width: 220px; flex: 0 1 260px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: var(--s5) 0; }
.actions-start { justify-content: flex-start; }
.actions-col { flex-direction: column; margin: 0; }
.input-sm { max-width: 120px; min-height: 44px; padding: 8px 10px; }

/* stepper de volume */
.stepper { display: flex; align-items: stretch; border: 1.5px solid var(--field-border); border-radius: var(--r); background: var(--surface); overflow: hidden; transition: border-color var(--t), box-shadow var(--t); }
.stepper:focus-within { border-color: var(--brand-600); box-shadow: 0 0 0 4px rgba(194, 65, 12, .18); }
.stepper input { border: 0; border-radius: 0; text-align: center; font-weight: 700; font-size: 1.1rem; min-width: 0; box-shadow: none !important; -moz-appearance: textfield; font-variant-numeric: tabular-nums; }
.stepper input:focus-visible { outline: none; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper button { flex: none; width: 48px; min-height: 48px; border: 0; background: var(--surface-2); color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: background-color var(--t); }
.stepper button:hover { background: var(--line); }
.stepper .unit { display: grid; place-items: center; padding: 0 12px 0 0; color: var(--muted); font-weight: 600; }
.stepper--sm button { width: 44px; min-height: 44px; }
.stepper--sm input { font-size: 1rem; width: 64px; }

/* ===== Formulário de CEP ===== */
.cep-form { display: flex; flex-wrap: wrap; gap: 10px; max-width: 540px; }
.cep-field { position: relative; flex: 1 1 200px; display: flex; }
.cep-field .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.cep-form input { flex: 1 1 200px; font-size: 1.1rem; font-weight: 600; letter-spacing: .02em; min-height: 52px; padding-left: 44px; }
.cep-form .btn { min-height: 52px; }
.cep-form .cep-result { flex-basis: 100%; }
.cep-result:empty { display: none; }
.cep-result { color: var(--ink); border-radius: var(--r); padding: 12px 14px; font-size: .95rem; border: 1px solid var(--line); background: var(--surface); animation: pop var(--t); }
.cep-result.ok { border-color: var(--ok-line); background: var(--ok-bg); color: #14532d; }
.cep-result.fail { border-color: var(--warn-line); background: var(--warn-bg); color: #78350f; }
.cep-result .muted { color: inherit; opacity: .85; }
.cep-result .actions { margin: 10px 0 0; justify-content: flex-start; }
.cep-inline { max-width: 560px; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } }

/* ===== Produto / compra ===== */
.product-layout, .cart-layout, .calc-layout, .tracking-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s8); align-items: start; }
.buy-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s6); box-shadow: var(--sh-3); position: sticky; top: calc(var(--header-h) + 20px); }
.buy-box h2 { font-size: var(--fs-lg); }
.buy-unit { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-sm); color: var(--muted); margin: 0 0 var(--s4); padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.buy-unit .ico { color: var(--ok); width: 18px; height: 18px; margin-top: 2px; }
.buy-unit strong { color: var(--ink); }
.buy-unit .link { min-height: 0; font-size: var(--fs-sm); display: inline; padding: 0 2px; }
.price-label { font-size: var(--fs-sm); color: var(--muted); margin: 0; font-weight: 600; }
.price-big { font-family: var(--font-display); font-size: 2.3rem; font-weight: 800; margin: 2px 0 4px; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-big small { font-size: 1rem; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.price-hint { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 var(--s5); }
.price-hint strong { color: var(--ok); }
.subtotal-box { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: var(--r); background: var(--surface-2); margin: 0; }
.subtotal-box span { color: var(--ink-soft); font-weight: 600; font-size: .95rem; }
.subtotal-box output, .subtotal-box strong { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.buy-note { font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.buy-trust { list-style: none; margin: var(--s5) 0 0; padding: var(--s4) 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-sm); color: var(--ink-soft); }
.buy-trust li { display: flex; gap: 10px; align-items: flex-start; }
.buy-trust .ico { color: var(--ok); width: 18px; height: 18px; margin-top: 2px; }
.spec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.spec-grid div { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.spec-grid div:nth-child(odd) { border-right: 1px solid var(--line); }
.spec-grid div:nth-last-child(-n+2) { border-bottom: 0; }
.spec-grid dt { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-bottom: 4px; }
.spec-grid dd { margin: 0; font-weight: 650; }
.spec, .table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--s5); }
.spec th, .spec td, .table th, .table td { padding: 14px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.spec th { width: 40%; color: var(--muted); font-weight: 600; background: var(--surface-2); }
.table thead th { background: var(--surface-2); font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tiers tr { transition: background-color var(--t); }
.tiers tr.is-active td { background: var(--brand-50); }
.tiers tr.is-active td:first-child { box-shadow: inset 4px 0 0 var(--brand); font-weight: 700; }
.tier-best { color: var(--ok); font-size: var(--fs-xs); font-weight: 700; margin-left: 6px; text-transform: uppercase; letter-spacing: .04em; }
.prose { max-width: 70ch; line-height: 1.75; font-size: var(--fs-md); color: var(--ink-soft); }
.prose h2 { margin: 1.8em 0 .5em; font-size: 1.5rem; color: var(--ink); }
.prose h3 { margin: 1.5em 0 .4em; font-size: 1.2rem; color: var(--ink); }
.prose img { max-width: 100%; height: auto; border-radius: var(--r); }
.prose blockquote { margin: 1.4em 0; padding: 8px 20px; border-left: 4px solid var(--brand); background: var(--surface-2); border-radius: 0 var(--r) var(--r) 0; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .35em; }
.prose strong { color: var(--ink); }
.prose > :first-child { margin-top: 0; }
.option-card, .service-option { display: flex; flex-direction: row; align-items: flex-start; gap: 14px; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--r-lg); padding: 16px; font-weight: 400; cursor: pointer; transition: border-color var(--t), background-color var(--t), box-shadow var(--t); }
.option-card:hover, .service-option:hover { border-color: var(--field-border); }
.option-card:has(input:checked), .service-option:has(input:checked) { border-color: var(--brand-600); background: var(--brand-50); box-shadow: 0 0 0 1px var(--brand-600); }
.option-card input, .service-option input { margin-top: 2px; }
.option-card > span, .service-option > span { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.option-card strong, .service-option strong { font-weight: 700; }
.option-card small, .service-option small { color: var(--muted); }
.option-card em, .service-option em { font-style: normal; font-weight: 750; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.option-card em small, .service-option em small { display: block; font-weight: 500; font-size: var(--fs-xs); }
.service-option.is-required { cursor: default; background: var(--surface-2); }
.option-card em small, .service-option em small { white-space: normal; }
@media (max-width: 640px) {
  /* celular: o preço desce para baixo do nome, para o texto não virar uma coluna estreita (pedido do cliente, 10/10) */
  .service-option { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 8px; }
  .service-option > span { grid-column: 2; }
  .service-option em { grid-column: 2; text-align: left; white-space: normal; }
}
.order-lines { list-style: none; padding: 0; margin: 0 0 var(--s4); }
.order-lines li { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.order-lines li span:last-child { font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.order-lines small { display: block; color: var(--muted); }
.order-lines li:last-child { border-bottom: 0; }
.summary { display: grid; grid-template-columns: 1fr auto; gap: 8px 0; margin: 0 0 var(--s5); }
.summary dt { color: var(--ink-soft); }
.summary dd { margin: 0; padding-left: 12px; text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.summary dd.is-free { color: var(--ok); }
.summary .total { font-size: 1.3rem; color: var(--ink); font-weight: 800; padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--line); }
.summary dt.total { font-size: 1.05rem; font-weight: 750; }
.summary-divider { grid-column: 1 / -1; height: 0; }
.summary-note { font-size: var(--fs-sm); color: var(--muted); margin: var(--s3) 0 0; }
.summary-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.summary-title .pill { font-size: var(--fs-xs); }
.trust-inline { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: var(--s4) 0 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--ink-soft); }
.trust-inline li { display: inline-flex; gap: 6px; align-items: center; }
.trust-inline .ico { width: 18px; height: 18px; color: var(--ok); }
.pay-methods { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--s4) 0 0; padding: 0; list-style: none; }
.pay-methods li { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 10px; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft); background: var(--surface); }
.pay-methods .ico { width: 16px; height: 16px; }
.legal-id { font-size: var(--fs-xs); color: #a8a29e; margin: 0; line-height: 1.6; }
.legal-id a { color: #e7e5e4; }
.legal-id--checkout { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); font-size: var(--fs-xs); }
.legal-id--checkout .ico { width: 18px; height: 18px; color: var(--muted); margin-top: 1px; }
.legal-id--checkout strong { color: var(--ink); }

/* Barra de compra fixa (mobile) */
.sticky-buy { display: none; }

/* checkout: etapas */
.checkout-steps { list-style: none; margin: var(--s5) 0 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; counter-reset: cs; }
.checkout-steps li { display: inline-flex; align-items: center; gap: 8px; color: #a8a29e; font-size: var(--fs-sm); font-weight: 650; }
.checkout-steps li + li::before { content: ""; width: 28px; height: 2px; background: #57534e; border-radius: 2px; margin-right: 2px; }
.checkout-steps b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #57534e; font-size: var(--fs-xs); }
.checkout-steps .is-done { color: #d6d3d1; }
.checkout-steps .is-done b { background: #57534e; border-color: #57534e; color: #fff; }
.checkout-steps [aria-current] { color: #fff; }
.checkout-steps [aria-current] b { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }

/* carrinho */
.cart-context { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: var(--s5); font-size: .95rem; }
.cart-context p { margin: 0; display: flex; align-items: flex-start; gap: 10px; }
.cart-context p .ico { margin-top: 2px; }
.cart-context .ico { color: var(--ok); }
.cart-items { list-style: none; margin: 0 0 var(--s5); padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.cart-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto 44px; gap: 16px; align-items: center; padding: 18px 20px; }
.cart-item + .cart-item { border-top: 1px solid var(--line); }
.cart-fck { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 12px; background: linear-gradient(135deg, #f5f5f4, #e7e5e4); line-height: 1; text-align: center; }
.cart-fck strong { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.cart-fck small { display: block; font-size: .62rem; font-weight: 700; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.cart-item-name a { color: var(--ink); font-weight: 700; text-decoration: none; }
.cart-item-name a:hover { color: var(--brand-600); text-decoration: underline; }
.cart-item-name small { display: block; color: var(--muted); font-size: var(--fs-sm); }
.cart-item-total { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 110px; }
.cart-item-total small { display: block; font-weight: 500; color: var(--muted); font-size: var(--fs-xs); }
.remove-btn { color: var(--muted); }
.remove-btn:hover { color: var(--danger); background: var(--danger-bg); }
.cart-services { display: flex; flex-direction: column; gap: var(--s3); }
.cart-services h2 { font-size: var(--fs-lg); margin: 0 0 4px; }
form.is-loading { opacity: .6; pointer-events: none; transition: opacity var(--t); }
.live-status { font-size: var(--fs-sm); color: var(--muted); min-height: 1.4em; margin: 0; }

/* calculadora */
.calc-types { margin-bottom: var(--s6); }
.calc-type-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.calc-types legend { font-family: var(--font-display); font-weight: 750; font-size: var(--fs-lg); margin-bottom: var(--s4); padding: 0; float: left; width: 100%; }
.calc-types legend + * { clear: both; }
.calc-types label { flex-direction: row; align-items: center; gap: 10px; border: 1.5px solid var(--line-strong); border-radius: var(--r); padding: 12px 14px; font-weight: 650; cursor: pointer; min-height: 56px; background: var(--surface); transition: border-color var(--t), background-color var(--t), box-shadow var(--t); }
.calc-types label:hover { border-color: var(--field-border); }
.calc-types input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.calc-types label .ico { color: var(--muted); width: 22px; height: 22px; }
.calc-types label:has(input:checked) { border-color: var(--brand-600); background: var(--brand-50); color: var(--brand-700); box-shadow: 0 0 0 1px var(--brand-600); }
.calc-types label:has(input:checked) .ico { color: var(--brand-600); }
.calc-types label:has(input:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.calc-result { text-align: left; }
.calc-volume { font-family: var(--font-display); font-size: 3rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; margin: 6px 0 8px; font-variant-numeric: tabular-nums; }
.calc-headline { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 4px 16px; }
.calc-headline .calc-volume { margin-bottom: 8px; }
.calc-total { display: flex; flex-direction: column; align-items: flex-start; margin: 0 0 10px; line-height: 1.1; text-align: left; font-variant-numeric: tabular-nums; }
.calc-total small { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.calc-total strong { font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; color: var(--brand-700); }
.calc-total[hidden] { display: none; }
.calc-estimate { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--r); background: var(--ok-bg); border: 1px solid var(--ok-line); color: #14532d; font-size: var(--fs-sm); margin: 0 0 var(--s4); }
.calc-estimate strong { font-size: 1.15rem; }
.calc-warn { font-size: var(--fs-sm); color: #78350f; background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: var(--r); padding: 10px 12px; margin: 0 0 var(--s4); }

/* ===== Status / acompanhamento ===== */
.status-hero { text-align: center; padding: var(--s12) var(--s6); }
.status-icon { width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto var(--s5); color: #fff; box-shadow: 0 0 0 10px rgba(0, 0, 0, .04); }
.status-icon .ico { width: 40px; height: 40px; }
.status-ok { background: var(--ok); box-shadow: 0 0 0 10px var(--ok-bg); }
.status-fail { background: var(--warn); box-shadow: 0 0 0 10px var(--warn-bg); }
.status-wait { background: var(--ink-soft); box-shadow: 0 0 0 10px var(--surface-2); }
.status-card { max-width: 720px; margin: 0 auto; }
.status-card h1 { font-size: var(--fs-2xl); }
.status-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin: var(--s6) 0; text-align: left; }
.status-details div { background: var(--surface); padding: 14px 16px; }
.status-details dt { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.status-details dd { margin: 2px 0 0; font-weight: 700; }
.next-steps { list-style: none; margin: var(--s6) 0 0; padding: 0; text-align: left; display: grid; gap: 10px; }
.next-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: var(--surface-2); border-radius: var(--r); font-size: .95rem; }
.next-steps .ico { color: var(--brand-600); margin-top: 2px; }
.link-box { display: flex; gap: 8px; align-items: center; background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: var(--r); padding: 10px 12px; margin-top: var(--s5); text-align: left; }
.link-box code { background: none; padding: 0; flex: 1; font-size: var(--fs-sm); }
.error-page { padding: var(--s16) 0; }
.error-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s12); align-items: center; }
.error-code { font-family: var(--font-display); font-size: clamp(4rem, 10vw, 7rem); font-weight: 800; line-height: 1; letter-spacing: -.05em; margin: 0 0 var(--s3); color: var(--brand-600); }
.error-links { list-style: none; padding: 0; margin: var(--s6) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.error-links a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 650; min-height: 56px; transition: border-color var(--t), box-shadow var(--t); }
.error-links a:hover { border-color: var(--brand-600); box-shadow: var(--sh-2); color: var(--ink); }
.error-links .ico { color: var(--brand-600); }
.error-art svg { width: 100%; max-width: 420px; height: auto; display: block; margin: 0 auto; }

.status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--r-full); background: #fff; color: var(--ink); font-weight: 750; font-size: .9rem; }
.status-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.status-delayed, .status-rescheduled { background: #fef3c7; }
.status-delayed::before, .status-rescheduled::before { background: var(--warn); }
.status-cancelled { background: #fee2e2; }
.status-cancelled::before { background: var(--danger); }
.status-delivered, .status-confirmed { background: #dcfce7; }
.status-delivered::before, .status-confirmed::before { background: var(--ok); }
.status-out_for_delivery::before, .status-on_site::before { animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .3; } }
.tracking-head .muted { color: #d6d3d1; }
.delivery-map { height: 380px; border-radius: var(--r); background: var(--concrete); position: relative; z-index: 0; }
.delivery-map:empty::after { content: "Carregando mapa…"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: var(--fs-sm); }
.map-card { padding: 12px; }
.map-note { margin: 10px 6px 2px; }
.route-info { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 6px 0; font-size: .95rem; }
.route-info span { display: inline-flex; align-items: center; gap: 6px; }
.route-info .ico { color: var(--brand-600); width: 18px; height: 18px; }
.current-status { display: flex; gap: 16px; align-items: flex-start; padding: var(--s5); border-radius: var(--r-lg); background: var(--brand-50); border: 1px solid var(--brand-200); margin-bottom: var(--s6); }
.current-status .icon-tile { background: #fff; }
.current-status h2 { font-size: var(--fs-lg); margin: 0 0 2px; }
.current-status p { margin: 0; color: var(--ink-soft); }
.timeline { list-style: none; padding: 0; margin: 0 0 var(--s4); position: relative; }
.timeline li { position: relative; padding: 0 0 22px 40px; display: flex; flex-direction: column; color: var(--muted); min-height: 44px; }
.timeline li::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: 0; width: 2px; background: var(--line-strong); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::before { display: none; }
.timeline .dot { position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); display: grid; place-items: center; }
.timeline strong { color: inherit; font-weight: 650; line-height: 24px; }
.timeline small { font-size: var(--fs-sm); }
.timeline li.done { color: var(--ink); }
.timeline li.done strong { font-weight: 700; }
.timeline li.done .dot { background: var(--brand-600); border-color: var(--brand-600); }
.timeline li.done .dot::after { content: ""; width: 12px; height: 12px; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.timeline li.done::before { background: var(--brand-600); }
.timeline li.current .dot { box-shadow: 0 0 0 6px rgba(232, 89, 12, .18); }
.timeline li.current strong::after { content: "Etapa atual"; margin-left: 10px; font-size: var(--fs-xs); font-weight: 700; color: var(--brand-700); background: var(--brand-50); border: 1px solid var(--brand-200); padding: 2px 8px; border-radius: var(--r-full); vertical-align: 2px; }
.note { background: var(--surface-2); border-radius: var(--r); padding: 12px 14px; margin-bottom: 8px; border-left: 3px solid var(--brand); }
.note small { color: var(--muted); }
.note p { margin: 4px 0 0; }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 10px 12px; margin: 0; font-size: .95rem; }
.kv.mt { margin-top: var(--s6); }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.truck-card-head { display: flex; gap: 14px; align-items: center; margin-bottom: var(--s4); }
.truck-card-head h2 { margin: 0; }
.truck-empty { display: flex; gap: 10px; align-items: flex-start; background: var(--surface-2); border-radius: var(--r); padding: 12px 14px; font-size: .93rem; color: var(--ink-soft); margin: var(--s4) 0 0; }
.truck-empty .ico { color: var(--muted); margin-top: 2px; }
.pay-status { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }
.pay-status strong { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.truck-marker { background: var(--brand-600); color: #fff; border-radius: 50%; width: 46px; height: 46px; display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); border: 3px solid #fff; }
.truck-marker .drum-stripe { stroke: var(--brand-600); }
.truck-marker .truck-window, .truck-marker .truck-hub { fill: var(--brand-600); }
.truck-marker-img { width: 52px; height: 52px; object-fit: contain; display: block; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }
.map-pin { background: var(--ink); color: #fff; border-radius: 6px; padding: 4px 9px; font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.leaflet-popup-content { font-family: var(--font); }
.leaflet-popup-content hr { margin: 6px 0; border: 0; border-top: 1px solid var(--line); }
.cancel-box { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 0 16px; }
.cancel-box summary { cursor: pointer; font-weight: 650; color: var(--danger); min-height: 48px; display: flex; align-items: center; list-style: none; }
.cancel-box summary::-webkit-details-marker { display: none; }
.cancel-box[open] { padding-bottom: 16px; }

/* ===== Home: seções extras ===== */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s12); align-items: center; }
.calc-teaser { background: var(--ink); color: #fff; border-radius: var(--r-xl); padding: var(--s12); position: relative; overflow: hidden; isolation: isolate; --focus-ring: #fdba74; }
.calc-teaser::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(500px 300px at 100% 0%, rgba(232, 89, 12, .35), transparent 60%), linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 24px 24px; }
.calc-teaser h2 { color: #fff; }
.calc-teaser p { color: #d6d3d1; }
.calc-teaser .calc-demo .pill-brand { color: var(--brand-700); }   /* v2.23: o "Exemplo: laje" herdava o cinza claro do texto do bloco escuro e sumia no cartão branco */
.calc-teaser .eyebrow { color: var(--brand-300); }
.calc-demo { background: #fff; color: var(--ink); border-radius: var(--r-lg); padding: var(--s6); box-shadow: var(--sh-4); }
.calc-demo dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 var(--s4); }
.calc-demo dl div { background: var(--surface-2); border-radius: var(--r); padding: 10px 12px; }
.calc-demo dt { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.calc-demo dd { margin: 0; font-weight: 800; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.calc-demo-result { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: var(--s4); }
.calc-demo-result strong { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
.trust-item { padding: var(--s6); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.trust-item h3 { font-size: var(--fs-md); margin: var(--s4) 0 6px; }
.trust-item p { color: var(--muted); font-size: .95rem; margin: 0; }
.trust-item a { font-weight: 650; }
.cta-band { position: relative; overflow: hidden; background: var(--brand-600); color: #fff; border-radius: var(--r-xl); padding: var(--s12); display: flex; align-items: center; justify-content: space-between; gap: var(--s8); flex-wrap: wrap; isolation: isolate; }
.cta-band::before { content: ""; position: absolute; z-index: -1; right: -80px; top: -120px; width: 380px; height: 380px; border-radius: 50%; border: 60px solid rgba(255, 255, 255, .08); }
.cta-band h2 { color: #fff; margin: 0 0 6px; }
.cta-band p { margin: 0; color: #ffedd5; max-width: 52ch; }
.cta-band .actions { margin: 0; }
.service-card .icon-tile { margin-bottom: var(--s4); }
.service-card h2, .service-card h3 { font-size: var(--fs-lg); margin-bottom: 6px; }
.service-card p { color: var(--muted); margin: 0; }
.service-price { margin-top: var(--s4) !important; padding-top: var(--s4); border-top: 1px solid var(--line); color: var(--ink) !important; font-weight: 650; }

/* ===== Rodapé ===== */
.site-footer { background: var(--ink); color: #d6d3d1; padding: var(--s16) 0 var(--s6); margin-top: var(--s16); font-size: .95rem; }
.page-home .site-footer, .has-flush-footer .site-footer { margin-top: 0; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--brand-300); text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: var(--s10); }
.footer-brand p { margin: var(--s4) 0 0; max-width: 38ch; color: #a8a29e; }
.footer-brand img { border-radius: 10px; }
.footer-title { color: #fff; font-weight: 750; margin: 0 0 var(--s3); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .08em; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li a, .footer-links li > span { display: inline-flex; align-items: center; gap: 10px; padding: 8px 0; min-height: 44px; line-height: 1.4; }
.footer-links li > span { color: #d6d3d1; }
.footer-links .ico { width: 18px; height: 18px; margin-top: 2px; color: var(--brand-300); }
.social { display: flex; gap: 16px; }
.social a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.social .ico { width: 14px; height: 14px; opacity: .7; }
.footer-bottom { margin-top: var(--s12); padding-top: var(--s6); border-top: 1px solid #3a3531; display: flex; flex-direction: column; gap: var(--s3); }
.footer-policies { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: var(--fs-sm); }
.footer-policies a, .footer-policies button { display: inline-flex; align-items: center; min-height: 44px; color: #e7e5e4; }
.copyright { font-size: var(--fs-xs); color: #a8a29e; margin: 0; }
.link-light { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.link-light:hover { color: var(--brand-300); text-decoration: underline; }

/* WhatsApp flutuante */
.whats-float { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); width: 58px; height: 58px; border-radius: 50%; background: var(--whats); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px -4px rgba(21, 128, 61, .55); z-index: 60; transition: transform var(--t), background-color var(--t); }
.whats-float:hover { transform: scale(1.06); background: var(--whats-hover); color: #fff; }
.whats-float .ico { width: 30px; height: 30px; }
body.has-cookie-bar .whats-float, body.has-cookie-bar .chat, body.nav-open .whats-float, body.nav-open .chat { display: none; }

/* ===== Diálogo CEP ===== */
.cep-dialog { border: 0; border-radius: var(--r-xl); padding: var(--s8); max-width: 520px; width: calc(100% - 32px); box-shadow: var(--sh-4); color: var(--ink); }
.cep-dialog[open] { animation: dialog-in 200ms cubic-bezier(.2, .7, .3, 1); }
.cep-dialog::backdrop { background: rgba(28, 25, 23, .6); backdrop-filter: blur(2px); }
.cep-dialog h2 { font-size: var(--fs-xl); margin-bottom: 6px; }
.cep-dialog p { color: var(--muted); }
.dialog-icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--brand-50); color: var(--brand-600); margin-bottom: var(--s4); }
.dialog-close { position: absolute; right: 12px; top: 12px; margin: 0; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* ===== Aviso de cookies ===== */
.cookie-bar { position: fixed; left: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 70; max-width: 440px; background: var(--ink); color: #e7e5e4; border-radius: var(--r-lg); box-shadow: var(--sh-4); padding: 14px 16px; display: flex; gap: 12px 16px; align-items: center; flex-wrap: wrap; font-size: var(--fs-sm); animation: pop 250ms ease; --focus-ring: #fdba74; }
.cookie-bar p { margin: 0; flex: 1 1 220px; }
.cookie-bar a { color: var(--brand-300); }
.cookie-actions { display: flex; gap: 8px; }
.cookie-bar .btn-secondary { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; }
.cookie-bar .btn-secondary:hover { --btn-bg: var(--brand-50); }
.cookie-bar .btn-ghost { --btn-fg: #fff; --btn-bd: #57534e; }
.cookie-bar .btn-ghost:hover { --btn-bg: rgba(255, 255, 255, .08); }

/* ===== Blog, FAQ, conteúdo ===== */
.post-card { position: relative; padding: 0; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--t), transform var(--t); }
.post-card:hover { box-shadow: var(--sh-3); transform: translateY(-2px); }
.post-card img { width: 100%; height: 190px; object-fit: cover; display: block; }
.post-card-cover { height: 110px; background: linear-gradient(135deg, var(--ink) 0%, var(--ink-3) 100%); position: relative; overflow: hidden; }
.post-card-cover::after { content: ""; position: absolute; right: -20px; bottom: -40px; width: 140px; height: 140px; border-radius: 50%; border: 22px solid rgba(232, 89, 12, .35); }
.post-card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.post-card time, .post-card .post-date { color: var(--muted); font-size: var(--fs-sm); }
.post-card h3 { margin: 6px 0 8px; font-size: var(--fs-md); }
.post-card h3 a { color: var(--ink); text-decoration: none; }
.post-card h3 a::after { content: ""; position: absolute; inset: 0; }
.post-card:hover h3 a { color: var(--brand-600); }
.post-card p { color: var(--muted); font-size: .95rem; margin: 0 0 12px; }
.post-card .link-arrow { margin-top: auto; color: var(--brand-600); font-size: var(--fs-sm); }
.post-cover { width: 100%; height: auto; border-radius: var(--r-lg); margin-bottom: var(--s8); }
.post-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: var(--s4); color: #d6d3d1; }
.post-meta .btn { min-height: 40px; }
.post-cta { margin: var(--s10) 0 0; display: flex; gap: var(--s5); align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--brand-50); border-color: var(--brand-200); }
.post-cta p { margin: 0; max-width: 44ch; }
.post-cta .actions { margin: 0; }
.muted-light { color: #d6d3d1; }
.pager { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--s8); justify-content: center; }
.pager a { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r); text-decoration: none; color: var(--ink); background: var(--surface); font-weight: 650; }
.pager a:hover { border-color: var(--ink); }
.pager a.active, .pager a[aria-current] { background: var(--ink); border-color: var(--ink); color: #fff; }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0 20px; transition: border-color var(--t), box-shadow var(--t); }
.faq[open] { border-color: var(--line-strong); box-shadow: var(--sh-2); }
.faq summary { cursor: pointer; padding: 18px 0; font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2410c' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform var(--t); }
.faq[open] summary::after { transform: rotate(45deg); }
.faq-answer { padding: 0 0 18px; color: var(--ink-soft); }
.faq-more { margin-top: var(--s6); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.faq-more p { margin: 0; font-weight: 650; }
.faq-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--s12); align-items: start; }
.faq-aside { position: sticky; top: calc(var(--header-h) + 24px); }
.faq-aside p { color: var(--muted); }
.legal-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--s12); align-items: start; }
.legal-nav { position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; gap: 4px; }
.legal-nav a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: var(--r); color: var(--ink-soft); text-decoration: none; font-weight: 600; }
.legal-nav a:hover { background: var(--surface-2); color: var(--ink); }
.legal-nav a[aria-current] { background: var(--surface); color: var(--ink); box-shadow: inset 3px 0 0 var(--brand); border: 1px solid var(--line); }
.legal-nav .ico { color: var(--muted); width: 18px; height: 18px; }
.draft-note { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-sm); color: var(--muted); background: var(--surface-2); padding: 10px 14px; border-radius: var(--r); }
.uf-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.uf-filter a { display: inline-grid; place-items: center; min-height: 44px; min-width: 52px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--r-full); background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 650; font-size: .92rem; }
.uf-filter a:hover { border-color: var(--ink); }
.uf-filter a.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.about-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.legal-card dl { display: grid; grid-template-columns: 150px 1fr; gap: 8px 16px; margin: 0; }
.legal-card dt { color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.legal-card dd { margin: 0; font-weight: 600; }

/* orçamento em etapas */
.quote-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s8); align-items: start; }
.quote-form fieldset { border: 0; padding: 0; margin: 0 0 var(--s5); }
.quote-form legend { font-family: var(--font-display); font-weight: 750; font-size: var(--fs-lg); margin-bottom: var(--s4); padding: 0; }
.step-dots { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 var(--s6); }
.step-dots li { flex: 1; font-size: var(--fs-sm); font-weight: 650; color: var(--muted); border-top: 4px solid var(--line); padding-top: 8px; transition: border-color var(--t), color var(--t); }
.step-dots li.active { border-color: var(--brand); color: var(--ink); }
.step-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; padding-top: var(--s5); border-top: 1px solid var(--line); }
.review { margin-bottom: 14px; }
.kv.review { grid-template-columns: 170px 1fr; }
.quote-done { text-align: center; }
.quote-done h2 { margin-top: 0; }
.quote-form { scroll-margin-top: 110px; }
.side-card { position: sticky; top: calc(var(--header-h) + 20px); }
.side-card h2 { font-size: var(--fs-md); }
.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-soft); font-size: .95rem; }
.check-list .ico { color: var(--ok); margin-top: 2px; width: 18px; height: 18px; }

/* ===== Atendente virtual ===== */
/* ===== Atendente virtual — v2.19: conversa no estilo do WhatsApp (cabeçalho verde, fundo bege, balões com horário) ===== */
.chat { --wa-head: #075e54; --wa-head-2: #128c7e; --wa-bg: #efeae2; --wa-out: #d9fdd3; --wa-in: #fff; --wa-ink: #111b21; --wa-soft: #667781; --wa-send: #00a884; --wa-tick: #53bdeb;
  position: fixed; right: 20px; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 55; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.chat-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; background: var(--wa-head); color: #fff; border: 0; border-radius: var(--r-full); padding: 6px 18px 6px 6px; font: inherit; font-weight: 650; cursor: pointer; box-shadow: 0 10px 28px -6px rgba(0, 0, 0, .35); transition: transform var(--t), background-color var(--t); }
.chat-toggle:hover { transform: translateY(-1px); background: var(--wa-head-2); }
.chat-toggle-avatar, .chat-avatar { position: relative; flex: none; display: grid; place-items: center; border-radius: 50%; background: #fff; }
.chat-toggle-avatar { width: 40px; height: 40px; }
.chat-toggle-avatar img { width: 30px; height: 30px; object-fit: contain; border-radius: 50%; }
.chat-toggle-avatar i, .chat-online-dot { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: #25d366; box-shadow: 0 0 0 2px var(--wa-head); }
.chat.is-open .chat-toggle-text { display: none; }
.chat.is-open .chat-toggle { padding-right: 6px; }
.chat-panel { width: min(380px, calc(100vw - 32px)); height: min(600px, calc(100vh - 180px)); background: var(--wa-bg); border-radius: 14px; box-shadow: var(--sh-4); display: flex; flex-direction: column; overflow: hidden; order: -1; animation: pop 200ms ease; color: var(--wa-ink); }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 10px 8px 10px 14px; background: var(--wa-head); color: #fff; }
.chat-avatar { width: 46px; height: 46px; }
.chat-avatar img { width: 36px; height: 36px; object-fit: contain; border-radius: 50%; }
/* v2.22: foto do atendente ocupa o círculo inteiro (como a foto de perfil do WhatsApp) */
.chat-toggle-avatar.is-photo img, .chat-avatar.is-photo img { width: 100%; height: 100%; object-fit: cover; }
.chat-id { flex: 1; min-width: 0; line-height: 1.25; }
.chat-name { display: block; font-size: 1.02rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-status { display: block; font-size: .8rem; opacity: .85; }
.chat-wa { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px 6px 9px; border-radius: var(--r-full); background: #25d366; color: #fff; font-size: .85rem; font-weight: 700; text-decoration: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: background-color var(--t); --focus-ring: #a7f3d0; }
.chat-wa:hover { background: #1ebe5b; color: #fff; }
.chat-wa .ico { width: 18px; height: 18px; }
@media (max-width: 380px) { .chat-wa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .chat-wa { padding: 8px; } }
.chat--solo { bottom: calc(20px + env(safe-area-inset-bottom)); }
.chat-close { flex: none; display: grid; place-items: center; background: none; border: 0; color: #fff; cursor: pointer; width: 44px; height: 44px; border-radius: 50%; --focus-ring: #a7f3d0; }
.chat-close:hover { background: rgba(255, 255, 255, .12); }
.chat-log { flex: 1; overflow-y: auto; padding: 12px 14px 8px; display: flex; flex-direction: column; gap: 3px; background-color: var(--wa-bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%2354656f' stroke-opacity='.09' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='20' r='7'/%3E%3Cpath d='M58 14h16v10H58zM74 18h6l4 4v2h-10'/%3E%3Ccircle cx='62' cy='27' r='2.5'/%3E%3Ccircle cx='79' cy='27' r='2.5'/%3E%3Cpath d='M112 12l8 14h-16z'/%3E%3Cpath d='M14 62c6-6 12 6 18 0s12 6 18 0'/%3E%3Cpath d='M86 56v14M79 63h14'/%3E%3Crect x='112' y='56' width='14' height='14' rx='3'/%3E%3Cpath d='M20 104l8-8 8 8v12H20z'/%3E%3Ccircle cx='70' cy='108' r='4'/%3E%3Cpath d='M104 100c4 0 8 4 8 8s-4 8-8 8'/%3E%3Cpath d='M46 128h12M124 126l6-6'/%3E%3C/g%3E%3C/svg%3E"); }
.chat-notice { align-self: center; max-width: 92%; margin: 0 0 10px; padding: 6px 10px; border-radius: 8px; background: #ffeecd; color: #54656f; font-size: .72rem; line-height: 1.4; text-align: center; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.chat-notice svg { vertical-align: -1px; margin-right: 4px; }
.chat-notice a { color: #027eb5; }
.chat-msg { position: relative; max-width: 85%; padding: 6px 9px 7px; border-radius: 8px; font-size: .93rem; line-height: 1.4; background: var(--wa-in); color: var(--wa-ink); word-wrap: break-word; overflow-wrap: anywhere; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); align-self: flex-start; }
.chat-msg + .chat-msg { margin-top: 2px; }
.chat-msg.bot + .chat-msg.user, .chat-msg.user + .chat-msg.bot { margin-top: 8px; }
.chat-msg.tail.bot { border-top-left-radius: 0; }
.chat-msg.tail.user { border-top-right-radius: 0; }
.chat-msg.tail.bot::before, .chat-msg.tail.user::before { content: ""; position: absolute; top: 0; width: 8px; height: 13px; }
.chat-msg.tail.bot::before { left: -8px; background: linear-gradient(to bottom left, var(--wa-in) 50%, transparent 50%); }
.chat-msg.tail.user::before { right: -8px; background: linear-gradient(to bottom right, var(--wa-out) 50%, transparent 50%); }
.chat-msg.user { align-self: flex-end; background: var(--wa-out); }
.chat-msg a { color: #027eb5; }
.chat-text { white-space: normal; }
.chat-meta { float: right; display: inline-flex; align-items: center; gap: 3px; margin: 6px 0 -4px 10px; font-size: .68rem; color: var(--wa-soft); line-height: 1; white-space: nowrap; }
.chat-ticks { width: 16px; height: 11px; color: #8696a0; }
.chat-ticks.read { color: var(--wa-tick); }
.chat-msg.typing { display: inline-flex; gap: 4px; padding: 11px 12px; }
.chat-msg.typing i { width: 7px; height: 7px; border-radius: 50%; background: #8696a0; animation: chatDot 1.2s infinite ease-in-out; }
.chat-msg.typing i:nth-child(2) { animation-delay: .15s; }
.chat-msg.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chatDot { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .chat-msg.typing i { animation: none; } }
.chat-handoff { display: inline-flex; margin-top: 8px; color: #fff !important; text-decoration: none; }
/* v2.23: carrinho pronto montado pelo atendente */
.chat-cart { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; color: #fff !important; text-decoration: none; white-space: normal; text-align: left; }
.chat-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 12px 2px; background: var(--wa-bg); }
.chat-quick button { background: #fff; color: #008069; border: 0; border-radius: var(--r-full); padding: 6px 12px; min-height: 34px; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.chat-quick button:hover { background: #f0f2f5; }
.chat-form { position: relative; display: flex; gap: 8px; padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); align-items: flex-end; background: var(--wa-bg); }
.chat-field { flex: 1; display: flex; align-items: flex-end; gap: 2px; min-height: 48px; padding: 2px 12px 2px 4px; background: #fff; border-radius: 24px; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.chat-field:focus-within { box-shadow: 0 0 0 2px var(--wa-send); }
.chat-emoji-btn { flex: none; display: grid; place-items: center; width: 42px; height: 44px; background: none; border: 0; border-radius: 50%; color: #54656f; cursor: pointer; }
.chat-emoji-btn:hover, .chat-emoji-btn[aria-expanded="true"] { color: var(--wa-send); }
.chat-field textarea { flex: 1; width: auto; resize: none; max-height: 110px; min-height: 44px; padding: 12px 0 10px; border: 0; border-radius: 0; outline: 0; box-shadow: none; background: transparent; font: inherit; font-size: .95rem; line-height: 1.35; color: var(--wa-ink); }
.chat-field textarea:focus, .chat-field textarea:focus-visible { outline: none; border: 0; box-shadow: none; }
.chat-field textarea::placeholder { color: #8696a0; }
.chat-send { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--wa-send); color: #fff; cursor: pointer; box-shadow: 0 1px 3px rgba(11, 20, 26, .25); transition: background-color var(--t), transform var(--t); --focus-ring: #a7f3d0; }
.chat-send:hover { background: #008f6f; }
.chat-send:active { transform: scale(.95); }
.chat-emoji { position: absolute; left: 10px; bottom: calc(100% - 2px); display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; padding: 8px; background: #fff; border-radius: 12px; box-shadow: 0 8px 24px -6px rgba(0, 0, 0, .3); }
.chat-emoji[hidden] { display: none; }
.chat-emoji button { width: 40px; height: 40px; border: 0; border-radius: 8px; background: none; font-size: 1.35rem; line-height: 1; cursor: pointer; }
.chat-emoji button:hover { background: #f0f2f5; }
@media (max-width: 520px) {
  .chat { right: 12px; }
  /* v2.22.1: com o teclado aberto, o chat acompanha a área visível (--chat-top/--chat-h, do visualViewport no app.js) */
  .chat.is-open { inset: auto 0 auto 0; top: var(--chat-top, 0); height: var(--chat-h, 100%); right: 0; bottom: auto; align-items: stretch; z-index: 120; }
  .chat.is-open .chat-toggle { display: none; }
  .chat.is-open .chat-panel { width: 100%; height: 100%; max-height: none; border-radius: 0; animation: none; }
  .chat-log { overscroll-behavior: contain; }
  html.chat-lock, html.chat-lock body { overflow: hidden; }
  .chat-head { padding-top: calc(10px + env(safe-area-inset-top)); }
}

/* ===== Responsivo ===== */
@media (max-width: 1200px) {
  .nav-list a { padding: 8px 9px; font-size: .92rem; }
  .unit-chip { max-width: 200px; }
}
@media (max-width: 1120px) {
  .nav-toggle { display: inline-grid; }
  .main-nav { position: fixed; top: 0; right: 0; bottom: 0; z-index: 100; width: min(360px, 88vw); margin: 0; background: var(--surface); box-shadow: var(--sh-4); display: flex; flex-direction: column; overflow-y: auto; transform: translateX(105%); visibility: hidden; transition: transform 240ms cubic-bezier(.2, .7, .3, 1), visibility 0s linear 240ms; }
  .main-nav.open { transform: none; visibility: visible; transition: transform 240ms cubic-bezier(.2, .7, .3, 1); }
  .nav-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--line); min-height: var(--header-h); }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 12px; }
  .nav-list a { display: flex; min-height: 52px; padding: 12px; font-size: 1.05rem; border-radius: var(--r); }
  .nav-list a[aria-current="page"] { background: var(--brand-50); color: var(--brand-700); }
  .nav-list a[aria-current="page"]::after { display: none; }
  .nav-extra { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px 24px; margin-top: auto; border-top: 1px solid var(--line); }
  .nav-extra .btn { white-space: normal; text-align: left; justify-content: flex-start; }
  .header-actions { margin-left: auto; }
  body.nav-open { overflow: hidden; }
  body.nav-open .site-header { z-index: 95; }
}
@media (max-width: 960px) {
  :root { --header-h: 64px; }
  .topbar { display: none; }
  .hero-grid, .product-layout, .cart-layout, .calc-layout, .tracking-layout, .split, .quote-layout, .faq-layout, .legal-layout, .error-grid { grid-template-columns: minmax(0, 1fr); }
  .hero { padding: var(--s10) 0 var(--s16); }
  .hero-art { max-width: 520px; margin: 0 auto; width: 100%; }
  .buy-box, .side-card, .faq-aside, .legal-nav { position: static; }
  .product-layout > .buy-box { order: -1; }
  .benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .benefit:nth-child(3) { border-left: 0; }
  .benefit:nth-child(n+3) { border-top: 1px solid var(--line); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps li::after { display: none; }
  .grid-3, .grid-4, .trust-grid, .about-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .legal-nav { flex-direction: row; flex-wrap: wrap; }
  .calc-teaser { padding: var(--s8); }
  .cta-band { padding: var(--s8); }
  /* nada termina embaixo do botão do WhatsApp */
  main { padding-bottom: 24px; }
  .page-carrinho .whats-float, .page-checkout .whats-float, .page-produto .whats-float,
  .page-carrinho .chat, .page-checkout .chat, .page-produto .chat { display: none; }
  .sticky-buy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 65; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); backdrop-filter: blur(8px); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -12px rgba(28, 25, 23, .3); transform: translateY(110%); transition: transform var(--t); }
  .sticky-buy.is-visible { transform: none; }
  .sticky-buy-price { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
  .sticky-buy-price small { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
  .sticky-buy-price strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .sticky-buy .btn { flex: none; }
  .page-produto main, .page-carrinho main { padding-bottom: 96px; }
}
@media (max-width: 640px) {
  .container { padding: 0 16px; }
  .section { padding: var(--s12) 0; }
  .section-head { margin-bottom: var(--s6); }
  .header-row { gap: 8px; }
  .brand-name { font-size: .9rem; max-width: 12.5ch; line-height: 1.12; }
  .brand { gap: 8px; }
  .unit-chip { max-width: 118px; padding: 6px 10px 6px 8px; min-height: 44px; gap: 4px; }
  .unit-chip-text small { display: none; }
  .unit-chip-text span { font-size: .82rem; }
  .unit-chip-long { display: none !important; }
  .unit-chip-short { display: block !important; }
  .unit-chip > .ico { width: 20px; height: 20px; }
  .grid-2, .grid-3, .grid-4, .trust-grid, .about-values, .footer-grid, .status-details { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s8) var(--s5); }
  .footer-brand, .footer-grid > div:last-child { grid-column: 1 / -1; }
  .site-footer { padding-top: var(--s12); }
  .benefits { margin-top: calc(-1 * var(--s10)); }
  .benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .benefit { flex-direction: column; gap: 8px; padding: var(--s4); }
  .benefit h3, .benefit .h3 { font-size: .95rem; }
  .benefit p { font-size: .8rem; line-height: 1.45; }
  .benefit .icon-tile { width: 40px; height: 40px; }
  .benefit .icon-tile .ico { width: 22px; height: 22px; }
  .hero-art { max-width: 340px; }
  .product-fck { padding: 12px 16px; }
  .fck-value strong { font-size: 1.9rem; }
  .product-body { padding: 14px 16px 4px; }
  .product-foot { padding: 12px 16px 16px; }
  .steps { grid-template-columns: 1fr 1fr; gap: 10px; }
  .steps li { padding: 14px; }
  .steps small { display: none; }
  .steps strong { font-size: var(--fs-base); }
  .step-num .ico { display: none; }
  .hero h1 { font-size: 2.1rem; }
  .hero-search { padding: var(--s4); }
  .hero-points { gap: 8px 16px; font-size: .9rem; }
  .cep-form .btn { flex: 1 1 100%; }
  .page-head { padding: var(--s8) 0 var(--s8); }
  .page-head h1 { font-size: 1.85rem; }
  .spec-grid { grid-template-columns: minmax(0, 1fr); }
  .spec-grid div:nth-child(odd) { border-right: 0; }
  .spec-grid div:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .cart-item { grid-template-columns: 52px minmax(0, 1fr) 44px; gap: 10px 12px; padding: 16px; }
  .cart-fck { width: 52px; height: 52px; }
  .cart-fck strong { font-size: 1.1rem; }
  .cart-item-qty { grid-column: 2 / 4; min-width: 0; }   /* v2.23: o seletor de volume não passa da borda em 320 px */
  .cart-item-total { grid-column: 2 / 4; grid-row: 3; text-align: left; display: flex; justify-content: space-between; align-items: baseline; min-width: 0; }
  .cart-item .remove-btn { grid-column: 3; grid-row: 1; }
  .calc-type-grid { grid-template-columns: 1fr 1fr; }
  .calc-teaser, .cta-band { padding: var(--s6); border-radius: var(--r-lg); }
  /* v2.23: os 3 quadros cabem em qualquer largura (antes "ESPESSURA" empurrava o 3º para fora do cartão) */
  .calc-demo { padding: var(--s5); }
  .calc-demo dl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .calc-demo dl div { padding: 10px 8px; min-width: 0; }
  .calc-demo dt { font-size: .66rem; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .calc-demo dd { font-size: .95rem; white-space: nowrap; }
  .calc-demo-result { gap: 12px; }
  .calc-demo-result strong { font-size: 1.7rem; white-space: nowrap; }
  .error-links { grid-template-columns: minmax(0, 1fr); }
  .kv.review { grid-template-columns: 1fr; }
  .kv.review dd { margin-bottom: 6px; }
  .legal-card dl { grid-template-columns: 1fr; gap: 2px; }
  .legal-card dd { margin-bottom: 8px; }
  .delivery-map { height: 300px; }
  .cookie-bar { left: 12px; right: 12px; max-width: none; bottom: calc(12px + env(safe-area-inset-bottom)); }
  .chat { right: 12px; bottom: calc(88px + env(safe-area-inset-bottom)); }
  /* v2.21: no celular o botão do chat é só a foto (redondo); sem o botão flutuante do WhatsApp, ocupa o canto */
  .chat.chat--solo { bottom: calc(14px + env(safe-area-inset-bottom)); }
  .chat-toggle { padding: 5px; min-height: 0; }
  .chat-toggle-text { display: none; }
  .chat-toggle-avatar { width: 46px; height: 46px; }
  .chat-toggle-avatar img { width: 34px; height: 34px; }
  .chat-toggle-avatar.is-photo img { width: 100%; height: 100%; }
  .whats-float { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); width: 54px; height: 54px; }
  .step-actions .btn { flex: 1 1 auto; }
  .post-cta { flex-direction: column; align-items: flex-start; }
  .checkout-steps { gap: 6px; flex-wrap: nowrap; }
  .checkout-steps li + li::before { width: 16px; }
  .checkout-steps li:not([aria-current]) .step-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}
@media (max-width: 380px) {
  .brand-name { display: none; }
}

/* movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* impressão (ex.: página do pedido) */
@media print {
  .topbar, .site-header, .site-footer, .whats-float, .chat, .cookie-bar, .sticky-buy, .nav-backdrop { display: none !important; }
  .page-head { background: none; color: var(--ink); padding: 0 0 16px; }
  .page-head h1, .page-head p { color: var(--ink); }
}

/* ===== Catálogo ===== */
.product-body :is(h2, h3) { font-size: var(--fs-md); margin: 0 0 6px; }
.product-body :is(h2, h3) a { color: var(--ink); text-decoration: none; }
.product-body :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.catalog-bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 24px; flex-wrap: wrap; padding: var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: var(--s5); }
.catalog-count { margin: 0; color: var(--muted); font-size: var(--fs-sm); max-width: 34ch; }
.app-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 var(--s6); }
.app-links-label { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; margin-right: 4px; }
.app-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink-soft); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; }
.app-links a:hover, .app-links a[aria-current] { border-color: var(--ink); color: var(--ink); }
.app-links a[aria-current] { background: var(--ink); color: #fff; }
.catalog-help { display: flex; align-items: center; gap: var(--s5); margin-top: var(--s10); flex-wrap: wrap; }
.catalog-help > div { flex: 1 1 320px; }
.catalog-help h2 { margin: 0 0 4px; }
.catalog-help p { margin: 0; color: var(--muted); }
.catalog-help .actions { margin: 0; }
.head-meta .btn-light { min-height: 44px; }
@media (max-width: 640px) {
  .catalog-bar { padding: var(--s4); }
  .filters label { flex: 1 1 100%; min-width: 0; }
  .app-links { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; margin-right: -16px; padding-right: 16px; }
  .app-links a { white-space: nowrap; }
  .app-links-label { display: none; }
}

/* ===== Produto ===== */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { display: block; }
.product-photo { width: 100%; height: auto; max-height: 420px; object-fit: cover; border-radius: var(--r-lg); display: block; }
.product-main h2.h3 { margin-bottom: var(--s4); }
.serving h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.serving h2 .ico { color: var(--brand-600); }
.serving p { margin: 0; }
/* v2.15: central da obra em destaque e as demais recolhidas, por cidade */
.serving-mine { display: flex; gap: 8px; align-items: flex-start; }
.serving-mine .ico { color: var(--ok); flex: none; margin-top: 2px; }
.serving-more { margin-top: var(--s3); border-top: 1px solid var(--line); padding-top: var(--s3); }
.serving-more summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 650; color: var(--ink-soft); }
.serving-more summary:hover { color: var(--ink); }
.serving-list { margin: var(--s3) 0 0; max-height: 320px; overflow: auto; font-size: var(--fs-sm); display: grid; grid-template-columns: minmax(110px, max-content) 1fr; gap: 6px 14px; }
.serving-list dt { font-weight: 650; color: var(--ink); }
.serving-list dd { margin: 0; color: var(--ink-soft); }
.serving-list a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.serving-list a:hover { color: var(--brand-700); text-decoration-color: currentColor; }
@media (max-width: 560px) { .serving-list { grid-template-columns: 1fr; gap: 2px; } .serving-list dd { margin-bottom: 8px; } }
.buy-box .dialog-icon { margin-bottom: var(--s3); }
.buy-box .cep-form .btn { flex: 1 1 100%; }
.map-fallback { display: grid; place-items: center; text-align: center; padding: 24px; color: var(--muted); font-size: var(--fs-sm); }
.is-free { color: var(--ok) !important; }
.post-card .post-title { margin: 6px 0 8px; font-size: var(--fs-md); }
.post-card .post-title a { color: var(--ink); text-decoration: none; }
.post-card .post-title a::after { content: ""; position: absolute; inset: 0; }
.post-card:hover .post-title a { color: var(--brand-600); }
.post-meta span { display: inline-flex; align-items: center; gap: 6px; }
.about-values--stack { grid-template-columns: minmax(0, 1fr); }
.about-values--stack .feature-card { display: grid; grid-template-columns: 48px 1fr; gap: 4px 16px; align-items: start; }
.about-values--stack .feature-card .icon-tile { grid-row: span 2; }
.about-values--stack .feature-card h2 { margin: 0; }
.contact-card .icon-tile { margin-bottom: var(--s4); }
.contact-card h2 { margin-bottom: var(--s3); }
.contact-card--main { border-color: var(--brand-200); box-shadow: var(--sh-2); }
.cep-card .cep-form { max-width: none; }
.page-head .cep-inline .cep-result { color: var(--ink); }
.status-card { text-align: center; }
.status-card .lead { margin-left: auto; margin-right: auto; }
.status-card .actions { margin-top: var(--s6); }
.status-card .next-steps, .status-card .link-box { max-width: 560px; margin-left: auto; margin-right: auto; }
.head-meta .muted { display: inline-flex; align-items: center; gap: 6px; }
.calc-estimate span { font-weight: 600; }
.catalog-bar .filters { flex: 1 1 540px; }
.catalog-bar .filters .btn { align-self: flex-end; }
.summary { align-items: baseline; }
.summary-title { margin-bottom: var(--s3); }
.summary-title h2 { margin: 0; }
.buy-box .terms-check { margin-bottom: var(--s3); }
.buy-box .terms-check + .field-error { margin: -4px 0 var(--s3); }

/* =====================================================================
   Acabamento v2.1 — tipografia de marca, textura de concreto e impacto visual
   (camada final: sobrescreve estilos acima; troque a fonte/cores só aqui e nos tokens)
   ===================================================================== */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-regular.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("../fonts/poppins-medium.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700 900; font-display: swap; src: url("../fonts/poppins-bold.woff") format("woff"); }
:root {
  --font-display: "Poppins", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  /* textura de concreto (ruído SVG, sem imagem externa) */
  --tex-concrete: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --tex-concrete-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1  0 0 0 0 .09  0 0 0 0 .08  0 0 0 .45 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --stripes: repeating-linear-gradient(-45deg, rgba(255,255,255,.14) 0 14px, transparent 14px 28px);
}
h1, h2, h3, h4, .h3, .h4, .brand-name, .eyebrow, .btn, .price-from strong, .fck-value strong, .step-num b, .legend-num, .calc-demo-result strong, .benefit h2, .benefit h3 { font-family: var(--font-display); }
h1, h2 { font-weight: 700; letter-spacing: -.03em; }
h3, h4, .h3, .h4 { font-weight: 600; letter-spacing: -.01em; }
.btn { font-weight: 600; letter-spacing: .005em; }
.brand-name { font-weight: 700; }
.eyebrow { font-weight: 600; letter-spacing: .12em; font-size: .78rem; }

/* ---- Hero ---- */
.hero { padding: clamp(56px, 7vw, 104px) 0 clamp(96px, 10vw, 140px); background: #141110; }
.hero::before { background:
  radial-gradient(760px 520px at 80% 38%, rgba(232, 89, 12, .38), transparent 62%),
  radial-gradient(520px 380px at 8% 105%, rgba(168, 162, 158, .16), transparent 60%),
  linear-gradient(180deg, rgba(20,17,16,0) 55%, rgba(20,17,16,.65) 100%),
  var(--tex-concrete); background-size: auto, auto, auto, 220px 220px; opacity: 1; }
.hero::after { content: ""; position: absolute; z-index: -1; right: -8%; top: -30%; width: 58%; height: 160%; transform: skewX(-14deg); background: linear-gradient(180deg, rgba(232,89,12,.16), rgba(232,89,12,.02)); border-left: 1px solid rgba(253,186,116,.18); pointer-events: none; }
.hero h1 { font-size: clamp(2.2rem, 1.3rem + 2.9vw, 3.45rem); line-height: 1.06; letter-spacing: -.035em; margin-bottom: .45em; }
@media (min-width: 961px) { .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.hero h1 .hl { position: relative; white-space: nowrap; color: #fff; background: linear-gradient(transparent 64%, rgba(232,89,12,.9) 64%, rgba(232,89,12,.9) 88%, transparent 88%); padding: 0 .04em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero .lead { font-size: clamp(1.08rem, 1rem + .45vw, 1.3rem); color: #e7e5e4; max-width: 34ch; }
.hero .eyebrow { color: var(--brand-300); }
.hero-search { border-radius: 18px; padding: 22px; box-shadow: 0 40px 80px -24px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); }
.hero-search-title { font-family: var(--font-display); font-weight: 600; }
.hero-points { gap: 10px 12px; }
.hero-points li { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); padding: 7px 14px 7px 10px; border-radius: 999px; font-size: .9rem; backdrop-filter: blur(4px); }
.hero-art svg { filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .5)); }
.hero-art .ill-sun { opacity: .35; }
.hero-art .ill-ground { fill: #1f1b19; }
@media (min-width: 961px) { .hero-art { transform: scale(1.06) translateX(2%); transform-origin: center left; } }

/* ---- Benefícios ---- */
.benefits-grid { border-radius: 18px; box-shadow: 0 30px 60px -30px rgba(28,25,23,.35), 0 1px 0 rgba(28,25,23,.04); border-color: #ece9e6; }
.benefit { padding: 26px; }
.benefit .icon-tile { background: var(--ink); color: var(--brand-300); border-radius: 14px; }

/* ---- Seções ---- */
.section { padding: clamp(56px, 7vw, 96px) 0; }
.section-head h2, .section-head--center h2 { font-size: clamp(1.8rem, 1.3rem + 1.9vw, 2.7rem); }
.section-alt { background: #f4f2f0; border-color: #ebe8e5; position: relative; isolation: isolate; }
.section-alt::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tex-concrete-dark); background-size: 220px 220px; opacity: .22; pointer-events: none; }

/* ---- Passos ---- */
.steps { gap: 18px; }
.steps li { padding: 28px 24px 26px; border-radius: 18px; border-color: #ebe8e5; box-shadow: 0 1px 2px rgba(28,25,23,.04); overflow: hidden; transition: transform var(--t), box-shadow var(--t); }
.steps li:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
.steps li::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--brand), var(--brand-300)); opacity: .9; }
.step-num { width: 100%; justify-content: space-between; margin-bottom: 14px; }
.step-num b { display: inline-flex; place-items: initial; width: auto; height: auto; background: none; color: transparent; font-size: 3rem; line-height: 1; font-weight: 700; letter-spacing: -.04em; -webkit-text-stroke: 1.5px var(--ink); }
.step-num b::before { content: "0"; }
.step-num .ico { width: 40px; height: 40px; padding: 8px; border-radius: 12px; background: var(--brand-50); color: var(--brand-600); }
.steps strong { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }

/* ---- Cards de concreto ---- */
.product-card { border-radius: 18px; border-color: #ebe8e5; }
.product-fck { background: #1c1917; border-bottom: 0; padding: 22px 22px 18px; isolation: isolate; }
.product-fck::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(220px 140px at 100% 0%, rgba(232,89,12,.45), transparent 70%), var(--tex-concrete); background-size: auto, 220px 220px; }
.product-fck::after { right: 18px; top: auto; bottom: 0; width: 64px; height: 4px; border: 0; border-radius: 4px 4px 0 0; background: var(--brand); }
.fck-value { color: #e7e5e4; }
.fck-value strong { color: #fff; font-size: 2.9rem; font-weight: 700; letter-spacing: -.05em; }
.fck-label { color: var(--brand-300); }
.product-body { padding: 20px 22px 6px; }
.product-body h3 { font-weight: 600; font-size: 1.08rem; }
.product-foot { padding: 16px 22px 22px; }
.price-from strong { font-weight: 700; font-size: 1.4rem; letter-spacing: -.02em; }
.product-go { background: var(--ink); color: #fff; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 28px 50px -24px rgba(28,25,23,.45); }

/* ---- Calculadora e CTA ---- */
.calc-teaser { border-radius: 24px; background: #141110; }
.calc-teaser::before { background: radial-gradient(560px 360px at 100% 0%, rgba(232, 89, 12, .42), transparent 62%), var(--tex-concrete); background-size: auto, 220px 220px; }
.cta-band { border-radius: 24px; background: linear-gradient(120deg, #c2410c 0%, #9a3412 100%); box-shadow: 0 40px 70px -30px rgba(154,52,18,.55); }
.cta-band::before { content: ""; position: absolute; z-index: -1; right: -60px; top: -40px; bottom: -40px; height: auto; width: 40%; border: 0; border-radius: 0; background: var(--stripes); transform: skewX(-18deg); opacity: .45; pointer-events: none; }
.cta-band h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); color: #fff; }

/* ---- Cabeçalhos internos ---- */
.page-head { background: #141110; padding: clamp(40px, 5vw, 72px) 0 clamp(36px, 4.5vw, 64px); }
.page-head::before { background: radial-gradient(900px 340px at 88% -30%, rgba(232, 89, 12, .34), transparent 62%), var(--tex-concrete); background-size: auto, 220px 220px; }
.page-head h1 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.3rem); letter-spacing: -.035em; }

/* ---- Rodapé ---- */
.site-footer { background: #141110; position: relative; isolation: isolate; }
.site-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tex-concrete); background-size: 220px 220px; opacity: .5; pointer-events: none; }
.site-footer::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-linear-gradient(-45deg, var(--brand) 0 16px, #1c1917 16px 32px); }

@media (max-width: 960px) {
  .hero::after { width: 90%; right: -40%; opacity: .6; }
  .hero h1 .hl { white-space: normal; }
}
@media (max-width: 640px) {
  .hero-points li { font-size: .85rem; padding: 6px 12px 6px 8px; }
  .step-num b { font-size: 2.4rem; }
  .cta-band::before { width: 70%; opacity: .35; }
}
@media print { .hero::after, .section-alt::before, .site-footer::after, .cta-band::before { display: none; } }

/* ---- Selo de melhor preço ---- */
.promo { display: flex; gap: 14px; align-items: flex-start; border-radius: 16px; padding: 16px 18px; position: relative; overflow: hidden; isolation: isolate; }
.promo-seal { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--brand); color: #fff; box-shadow: 0 0 0 4px rgba(232,89,12,.25); }
.promo-seal .ico { width: 24px; height: 24px; }
.promo-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.promo-title { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; letter-spacing: -.01em; line-height: 1.2; }
.promo-title sup { font-size: .6em; margin-left: 2px; }
.promo-text { font-size: .95rem; }
.promo-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; margin-top: 4px; min-height: 32px; }
.promo-link .ico { width: 16px; height: 16px; }
.promo-note { font-size: .75rem; line-height: 1.45; margin-top: 4px; }
.promo--dark { background: linear-gradient(120deg, rgba(232,89,12,.22), rgba(232,89,12,.08)); border: 1px solid rgba(253,186,116,.35); color: #fff; margin: 0 0 18px; max-width: 560px; }
.promo--dark .promo-text { color: #f5f5f4; }
.promo--dark .promo-note { color: #d6d3d1; }
.promo--dark .promo-link { color: var(--brand-300); }
.promo--light { background: var(--brand-50); border: 1px solid var(--brand-200); color: var(--ink); }
.promo--light .promo-text, .promo--light .promo-note { color: var(--ink-soft); }
.promo--light .promo-link { color: var(--brand-600); }
.promo--band { background: #fff; color: var(--ink); border: 0; box-shadow: 0 20px 40px -24px rgba(0,0,0,.45); }
.promo--band .promo-text, .promo--band .promo-note { color: var(--ink-soft); }
@media (max-width: 640px) { .promo { padding: 14px; } .promo-seal { width: 40px; height: 40px; } }
.ill-sticker { fill: #fb923c; font: 700 12px var(--font-display); letter-spacing: .12em; }
.hero-fineprint { margin: 14px 0 0; max-width: 560px; font-size: .75rem; line-height: 1.5; color: #a8a29e; }
.hero .promo--dark { padding: 12px 16px; align-items: center; }
.hero .promo--dark .promo-link { margin-top: 2px; }
.brand-name { max-width: 16ch; }
.unit-chip-text small { white-space: nowrap; }
@media (max-width: 1200px) { .nav-list a { padding: 8px 9px; } }
@media (max-width: 640px) {
  .brand { gap: 8px; min-width: 0; flex-shrink: 1; }
  .brand { flex: 1 1 auto; gap: 6px; }
  .brand img { width: 32px; height: 32px; border-radius: 8px; }
  .brand-name { font-size: .74rem; max-width: none; letter-spacing: -.015em; line-height: 1.2; }
  .header-actions { gap: 2px; flex: none; }
  /* v2.23: o botão do CEP não encolhe (no iPhone ficava "Seu …"); quem cede espaço é o nome da empresa */
  .unit-chip { padding: 6px 8px 6px 6px; flex: none; max-width: none; }
}
@media (max-width: 380px) { .brand-name { display: none; } }
/* v2.23: exemplo da calculadora em linhas (rótulo à esquerda, valor à direita) nas telas estreitas */
@media (max-width: 480px) {
  .calc-demo dl { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .calc-demo dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 12px; }
  .calc-demo dt { font-size: .72rem; }
}

/* ---- Orçamento no WhatsApp ---- */
.hero-whats { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #f0fdf4; border: 1px solid #bbf7d0; color: #14532d; text-decoration: none; font-size: .93rem; line-height: 1.35; transition: background-color var(--t), border-color var(--t); }
.hero-whats:hover { background: #dcfce7; border-color: #86efac; color: #14532d; }
.hero-whats > .ico:first-child { width: 28px; height: 28px; color: var(--whats); flex: none; }
.hero-whats > .ico:last-child { width: 18px; height: 18px; margin-left: auto; flex: none; }
.hero-whats span { display: flex; flex-direction: column; }
.hero-whats strong { font-family: var(--font-display); font-weight: 600; }
.whats-pref { padding: 12px 14px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: var(--r); }
.whats-pref span { display: flex; flex-direction: column; gap: 2px; }
.whats-pref input { accent-color: var(--whats); }
.side-card .promo { margin-bottom: 20px; }
.turnstile { margin: 12px 0; min-height: 65px; }
.lead-note { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; line-height: 1.45; }
.lead-note .ico-sm { flex: none; margin-top: 2px; }

/* ---------- Página da central (SEO local) ---------- */
.eyebrow-light { color: var(--brand-300); }
.unit-head { padding-bottom: var(--s12); }
.unit-head-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--s10); align-items: center; }
.unit-headline { font-size: var(--fs-md); color: #e7e5e4 !important; max-width: 60ch; }
.unit-photo { margin: 0; border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .12); aspect-ratio: 3 / 2; background: #292524; }
.unit-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.unit-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s10); align-items: start; }
.unit-layout h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.unit-aside { position: sticky; top: 96px; }
.unit-aside .delivery-map { height: 260px; }
.tags-lg li { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); padding: 6px 12px; background: var(--surface); }
.tags-lg .ico { width: 16px; height: 16px; color: var(--brand-600); }
.unit-cep p { margin: 0 0 var(--s3); }
.unit-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--s4); }
.unit-service h3 { display: flex; gap: 10px; align-items: center; margin: 0 0 6px; }
.unit-service h3 .ico { color: var(--brand-600); }
.unit-service p { margin: 0; color: var(--ink-soft); }
.unit-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s10); align-items: start; }
.unit-others ul { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 8px; }
.unit-others a { display: block; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); text-decoration: none; font-weight: 650; }
.unit-others a:hover { border-color: var(--brand-300); }
.units-cities { columns: 3 220px; column-gap: var(--s8); }
.units-cities section { break-inside: avoid; margin-bottom: var(--s5); }
.units-cities h3 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 6px; }
.units-cities ul { list-style: none; padding: 0; margin: 0; }
.units-cities li { padding: 3px 0; }
.unit-card-photo { margin: calc(var(--s6) * -1) calc(var(--s6) * -1) var(--s4); border-radius: var(--r-lg) var(--r-lg) 0 0; overflow: hidden; aspect-ratio: 16 / 9; background: var(--surface-2); }
.unit-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 960px) {
  .unit-head-grid, .unit-layout, .unit-faq { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .unit-aside { position: static; }
}
.unit-aside address { font-style: normal; line-height: 1.6; }
.unit-others a .muted { font-weight: 500; }

/* ===== Revisão 29/09 (v2.8) ===== */
/* checkout: no celular o valor do botão vai para o resumo, sem cortar o texto */
@media (max-width: 480px) { .btn-lg .btn-amount { display: none; } .btn-lg { white-space: normal; } }
/* alvo de toque mínimo para links de ação pequenos (WCAG 2.5.8) */
.buy-unit .link[data-open-cep] { display: inline-block; padding: 6px; margin: -6px 0; }

/* v2.9 — barra fixa de compra no celular: o aviso de cookies sobe para não cobrir o "Continuar" */
body.sticky-open .cookie-bar { bottom: calc(var(--sticky-h, 72px) + 8px); transition: bottom var(--t); }


/* v2.12: pagamento alternativo do pedido (Pix copia e cola, link, dados bancários) */
.pay-option { border: 2px solid var(--brand-200); }
.pay-option h2 { display: flex; align-items: center; gap: 8px; }
.pay-option-amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 var(--s4); }
.pay-option-amount strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.pay-option-amount .muted:first-child { flex-basis: 100%; }
.pay-option-instr { padding: 10px 12px; background: var(--brand-50); border-radius: 8px; }
.pay-option-block { display: grid; gap: 10px; padding: var(--s4) 0; border-top: 1px solid var(--line); }
.pay-option-block h3 { margin: 0; }
.pix-qr { display: flex; justify-content: center; }
.pix-qr svg { width: 200px; height: 200px; max-width: 100%; background: #fff; padding: 8px; border-radius: 8px; border: 1px solid var(--line); }
.pix-code { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; word-break: break-all; resize: none; background: var(--surface-2); }
.bank-details { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: .95rem; padding: 10px 12px; background: var(--surface-2); border-radius: 8px; }
.pay-option-wrap { max-width: 720px; margin: var(--s6) auto 0; }
.pay-online h2 { display: flex; align-items: center; gap: 8px; }

/* v2.14 — revisão no celular (pedido do Renato, 11/10) */
@media (max-width: 640px) {
  /* tabela de preço por volume: o selo "menor preço" desce para baixo do valor, para a 1ª coluna não virar uma tira estreita */
  .tiers .num { white-space: nowrap; }
  .tiers .tier-best { display: block; margin: 2px 0 0; }
}
@media (max-width: 400px) {
  /* vantagens da home: uma por linha nos celulares pequenos */
  .benefits-grid { grid-template-columns: minmax(0, 1fr); }
  .benefit { flex-direction: row; gap: 12px; }
  .benefit + .benefit { border-left: 0; border-top: 1px solid var(--line); }
}

/* v2.14: centrais agrupadas por cidade (Onde atendemos) */
.units-compact { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.units-compact > h2 { margin: var(--s4) 0 0; }
.unit-city { padding: 0; }
.unit-city summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; cursor: pointer; font-weight: 700; list-style: none; min-height: 48px; }
.unit-city summary::-webkit-details-marker { display: none; }
.unit-city summary::after { content: ''; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: -4px 4px 0 0; transition: transform var(--t); flex: none; }
.unit-city[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.unit-city summary > span:first-child { flex: 1; min-width: 0; }
.unit-city summary .pill { font-weight: 600; white-space: nowrap; }
.unit-city ul { list-style: none; margin: 0; padding: 0 18px 14px; display: grid; gap: 8px; }
.unit-city li { line-height: 1.4; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  /* calculadora no celular: volume e valor lado a lado sempre que couberem (pedido do cliente, 10/10) */
  .calc-headline { gap: 2px 12px; }
  .calc-headline .calc-volume { font-size: 2.4rem; }
  .calc-total strong { font-size: 1.35rem; }
}
.map-note { margin: 8px 2px 0; }

/* v2.16: descontos (cupom e primeira compra) e oferta de saída */
.discount-line, .order-lines li.discount-line span, .summary .discount-line { color: var(--ok); }
.order-lines li.discount-line small { color: var(--muted); }
.old-total { color: var(--muted); font-weight: 500; font-size: .85em; margin-right: 4px; }
.first-purchase-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--ok-bg); border: 1px solid var(--ok-line); border-radius: var(--r); color: #14532d; font-size: .92rem; margin: 0 0 var(--s4); }
.first-purchase-note .ico { color: var(--ok); flex: none; margin-top: 2px; }
.coupon-box { margin: 0 0 var(--s4); }
.coupon-box > label { display: block; font-weight: 650; margin-bottom: 6px; font-size: .95rem; }
.coupon-row { display: flex; gap: 8px; }
.coupon-row input { flex: 1 1 auto; min-width: 0; text-transform: uppercase; letter-spacing: .04em; }
.coupon-row .btn { flex: none; }
.coupon-applied { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 var(--s4); padding: 10px 12px; border-radius: var(--r); background: var(--ok-bg); color: #14532d; font-size: .93rem; }
.coupon-applied .ico { color: var(--ok); }
.coupon-applied .link { margin-left: auto; }
.exit-dialog { text-align: center; }
.exit-dialog .dialog-icon { margin-inline: auto; }
.exit-coupon { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: var(--s4) 0 var(--s2); }
.exit-code { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.35rem; font-weight: 800; letter-spacing: .08em; padding: 8px 18px; border: 2px dashed var(--brand-600); border-radius: var(--r); color: var(--brand-600); background: var(--brand-50); }
.exit-conditions { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 var(--s4); }
.exit-dialog form { margin: 0; }
.exit-no { margin-top: var(--s2); }

/* v2.17 (B68): forma de pagamento preferida no pedido enviado para liberação */
.pay-pref { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 14px 12px; margin: 0 0 var(--s4); background: var(--surface); min-width: 0; }
.pay-pref legend { font-weight: 650; font-size: .95rem; padding: 0 4px; }
.pay-pref > p { margin: 0 0 10px; }
.pay-pref-options { display: grid; gap: 8px; }
.pay-pref-option { position: relative; display: block; margin: 0; cursor: pointer; font-weight: 500; }
.pay-pref-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pay-pref-option span { display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-height: 44px; border: 1px solid var(--field-border); border-radius: var(--r); background: var(--surface); line-height: 1.3; }
.pay-pref-option span .ico { width: 20px; height: 20px; flex: none; color: var(--muted); }
.pay-pref-option:hover span { border-color: var(--brand-600); }
.pay-pref-option input:checked + span { border-color: var(--brand-600); background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand-600); font-weight: 650; }
.pay-pref-option input:checked + span .ico { color: var(--brand-600); }
.pay-pref-option input:focus-visible + span { outline: 3px solid var(--brand-300); outline-offset: 2px; }
.pay-pref-option input[aria-invalid="true"] + span, .pay-pref:has(input[aria-invalid="true"]) .pay-pref-option span { border-color: var(--danger); }
.pay-pref .field-error { display: block; margin-top: 6px; }
.pay-pref-note-label { display: block; font-weight: 600; font-size: .9rem; margin: 12px 0 6px; }
.pay-pref textarea { width: 100%; min-height: 0; resize: vertical; }