/* ============================================================
   Mecano Soluções Digitais — folha de estilo
   Mobile-first: base = mobile, min-width expande.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--color-bg-light);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
svg { display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--lh-heading);
  font-weight: var(--weight-display);
  font-stretch: var(--stretch-display);
  margin: 0 0 var(--sp-4);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 var(--sp-4); max-width: 65ch; text-align: left; }
p.lede { font-size: var(--fs-body); color: var(--color-text-muted); }

a { color: inherit; text-decoration-color: var(--color-accent); text-underline-offset: 3px; }

.tag {
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-ink);
}

/* --- Foco visível (nunca outline:none sem substituto) --- */
:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) { outline: none; }

/* --- Skip link --- */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  z-index: 100;
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top: var(--sp-4); }

/* Sobre grafite, a solda pode ser texto, ícone e foco (manual v1). */
.section-dark, .site-header, .site-footer, .nav-mobile { --accent-ink: var(--color-accent); }

/* --- Container / grid --- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(4, 1fr);
}
@media (min-width: 768px) { .grid { grid-template-columns: repeat(8, 1fr); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(12, 1fr); } }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
  border-bottom: 1px solid var(--color-border-dark);
}
.site-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
}
.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
/* Lockup: altura fixa (largura ~146px, mínimo do manual 140px).
   Área de proteção x = --logo-clear em volta; nunca distorcer. */
.logo img { height: var(--logo-h); width: auto; max-width: none; }

.nav-primary { display: none; }
.nav-primary ul { list-style: none; display: flex; gap: var(--sp-6); margin: 0; padding: 0; }
.nav-primary a {
  text-decoration: none;
  font-size: var(--fs-small);
  padding: var(--sp-2) 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.nav-primary a:hover,
.nav-primary a[aria-current="page"] { border-color: var(--color-accent); }

a.nav-cta { display: none; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid var(--color-border-dark);
  color: var(--color-text-inverse);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.menu-toggle svg { width: 20px; height: 20px; }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

.nav-mobile {
  position: fixed;
  inset: 72px 0 0 0;
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
  padding: var(--sp-6) var(--gutter);
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  z-index: 40;
}
.nav-mobile.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-mobile ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-5); }
.nav-mobile a {
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-h4);
  text-decoration: none;
  display: block;
}
.nav-mobile .btn { margin-top: var(--sp-6); width: 100%; justify-content: center; }

/* sem JS: o botao do menu nao funciona, entao a navegacao fica aberta no fluxo da pagina */
@media (scripting: none) {
  .menu-toggle { display: none; }
  .nav-mobile { position: static; opacity: 1; pointer-events: auto; transform: none; padding-block: var(--sp-4); }
  .nav-mobile ul { flex-direction: row; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); }
  .nav-mobile .btn { margin-top: var(--sp-4); }
}

@media (min-width: 1024px) {
  /* V5: logo a esquerda, 4 links realmente centralizados, acao a direita */
  .site-header .bar { display: grid; grid-template-columns: 1fr auto 1fr; }
  a.nav-cta { justify-self: end; }
  .nav-primary { display: block; }
  a.nav-cta { display: inline-flex; }
  .menu-toggle, .nav-mobile { display: none; }
}

/* ============================================================
   BOTÕES
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-small);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  min-height: 44px;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary { background: var(--color-accent); color: var(--color-primary); }
.btn-primary:hover:not(:disabled) { background: var(--color-accent-hover); }

.btn-ghost { background: transparent; border-color: var(--color-support-2); color: var(--color-primary); }
.btn-ghost:hover { border-color: var(--color-primary); }

.btn-inverse { background: var(--color-accent); color: var(--color-bg-dark); }
.btn-inverse:hover:not(:disabled) { background: var(--color-accent-hover-inverse); }

.btn-outline-inverse { background: transparent; border-color: var(--color-border-dark); color: var(--color-text-inverse); }
.btn-outline-inverse:hover { border-color: var(--color-text-inverse); }

/* ============================================================
   SEÇÕES GENÉRICAS
   ============================================================ */
section { padding-block: var(--sp-8); }
@media (min-width: 768px) { section { padding-block: var(--sp-9); } }

.section-dark {
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
}
.section-dark p { color: var(--color-text-inverse-muted); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--color-text-inverse); }

.section-head { max-width: 640px; margin-bottom: var(--sp-7); }
.section-head .tag { display: block; margin-bottom: var(--sp-3); }

/* --- Hero --- */
.hero { padding-block: var(--sp-9) var(--sp-8); }
/* V1: palavra de destaque = italico da Archivo na cor de acao (solda sobre grafite, solda-texto sobre papel via --accent-ink) */
h1 em, h2 em { font-style: italic; color: var(--accent-ink); padding-right: 0.06em; }
/* V1: brilho suave de solda subindo do fundo do hero (so degrade, sem neon) */
.hero {
  background:
    radial-gradient(ellipse 80% 55% at 70% 115%, rgb(255 90 31 / 0.26), transparent 70%),
    var(--color-bg-dark);
}
.hero h1 { font-size: var(--fs-h1); }
@media (min-width: 768px) { .hero h1 { font-size: var(--fs-display); } }
/* --- Porca cromada (N4) ---------------------------------------
   Decorativa. 360: abaixo dos CTAs, pequena, nao empurra o CTA da dobra.
   1024+: coluna direita ao lado do titulo. Proporcao fixa = CLS 0.
   F15 monta o canvas do shader dentro de .hero-nut (mesma caixa). */
.hero-nut {
  position: relative;
  width: 7.5rem;
  aspect-ratio: 600 / 693;
  margin: var(--sp-6) 0 0 auto;
}
.hero-nut img, .hero-nut canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Shader (js/porca-shader.js): canvas na mesma caixa da imagem parada; entra com
   fade quando o 1o quadro esta pronto e a imagem some. Sem JS/WebGL nada muda. */
.hero-nut-shader { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 400ms var(--ease-out); }
.hero-nut-shader canvas { display: block; width: 100%; height: 100%; }
.hero-nut.is-live .hero-nut-shader { opacity: 1; }
.hero-nut.is-live img { opacity: 0; transition: opacity 400ms var(--ease-out); }

/* Interacao (js/porca.js, so mouse). Porca 3D: camadas de espessura (canvas
   pre-escurecidos) + brilho = gradiente que se move por transform dentro de
   uma mascara estatica no formato da porca. So transform muda por frame. */
@media (hover: hover) and (pointer: fine) {
  .hero-nut-stage { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
  .hero-nut-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; backface-visibility: hidden; }
  .hero-nut-sheen {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden; opacity: 0;
    transform: translateZ(1px);
    -webkit-mask: url("../assets/marca/porca-mascara.svg") center / 100% 100% no-repeat;
            mask: url("../assets/marca/porca-mascara.svg") center / 100% 100% no-repeat;
    transition: opacity var(--dur-fast) var(--ease-out);
  }
  .hero-nut-sheen > span {
    position: absolute; left: 0; top: 0; will-change: transform;
    background: radial-gradient(circle closest-side, rgb(255 253 248 / 0.95), rgb(255 253 248 / 0.4) 40%, transparent 100%);
  }
  .hero-nut:hover .hero-nut-sheen { opacity: 1; }
}
@media (min-width: 1024px) {
  .hero .container:has(> .hero-nut) { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; column-gap: var(--sp-8); }
  .hero .container:has(> .hero-nut) > * { grid-column: 1; }
  .hero .container:has(> .hero-nut) > .hero-nut { grid-column: 2; grid-row: 1 / span 4; width: 100%; margin: 0; align-self: center; }
  .hero .container:has(> .hero-nut) > .method { grid-column: 1 / -1; }
}

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-6); }

/* V4: faixa de metodo (so fatos confirmados) */
.method {
  list-style: none; padding: 0; margin: var(--sp-8) 0 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-5);
}
.method li { border-top: 1px solid var(--color-border-dark); padding-top: var(--sp-4); }
.method-label {
  display: block; margin-bottom: var(--sp-1);
  font-family: var(--font-mono); font-weight: var(--weight-mono);
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-text-inverse-muted);
}
.method-text { display: block; font-size: var(--fs-small); color: var(--color-text-inverse); }
@media (min-width: 1024px) { .method { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); } }

/* --- Servicos (V2): chips + cartao com maquete ---
   Chips = pilulas (unica forma arredondada do site, e so no seletor). Sem JS (chips.js)
   todos os cartoes aparecem empilhados e os chips sao ancoras. */
.svc { scroll-margin-top: 5.5rem; }
.svc-chips {
  display: flex; gap: var(--sp-2);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  padding-bottom: var(--sp-1); margin-bottom: var(--sp-5);
}
.svc-chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 var(--sp-4); border-radius: 999px;
  border: 1px solid var(--color-support-2); background: transparent;
  color: var(--color-text); font-weight: 600; font-size: var(--fs-small);
  text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.chip:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .chip:hover { border-color: var(--color-primary); } }
.chip[aria-selected="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); }
@media (min-width: 768px) { .svc-chips { flex-wrap: wrap; overflow: visible; } }

.svc-card {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: center;
  background: var(--color-surface); border: 1px solid var(--color-support-2);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: var(--sp-5); margin-bottom: var(--sp-5);
}
.svc.is-tabs .svc-card { margin-bottom: 0; }
.svc-card[hidden] { display: none; }
.svc-card h3 { font-size: var(--fs-h3); }
.svc-card h4 { font-size: var(--fs-small); margin: var(--sp-5) 0 var(--sp-2); }
.svc-card p { color: var(--color-text-muted); }
.svc-card p strong { color: var(--color-text); }
.svc-card .lede { color: var(--color-text); }
.svc-list { margin: 0 0 var(--sp-4); padding-left: 1.1rem; color: var(--color-text-muted); }
.svc-list li { margin-bottom: var(--sp-2); }
.svc-text .btn { margin-top: var(--sp-2); }
.svc-mock { border-radius: var(--radius-md); overflow: hidden; background: var(--color-panel-dark); border: 1px solid var(--color-line-dark); }
.svc-mock img { width: 100%; height: auto; aspect-ratio: 320 / 200; }
@media (min-width: 768px) {
  .svc-card { grid-template-columns: 1.1fr 1fr; padding: var(--sp-7); gap: var(--sp-7); }
}
@media (prefers-reduced-motion: no-preference) {
  .svc.is-tabs .svc-card { animation: svc-in var(--dur-base) var(--ease-out); }
}
@keyframes svc-in { from { opacity: 0; transform: translateY(8px); } }

/* --- Processo (V3): 4 cartoes com maquete. 360 empilha; 768 2x2; 1024 em linha --- */
.steps { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step {
  display: flex; flex-direction: column;
  background: var(--color-bg-light); border: 1px solid var(--color-support-2);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: var(--sp-3) var(--sp-3) var(--sp-5);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .step:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } }
.step-mock { width: 100%; height: auto; aspect-ratio: 280 / 180; border-radius: var(--radius-md); border: 1px solid var(--color-line-dark); margin-bottom: var(--sp-4); }
.step > .num, .step > h3, .step > p { margin-inline: var(--sp-3); }
.step .num { font-family: var(--font-mono);
  font-weight: var(--weight-mono); color: var(--accent-ink); font-size: 0.8125rem; }
.step h3 { font-size: var(--fs-h4); margin-block: var(--sp-2) var(--sp-2); }
.step p { font-size: var(--fs-small); color: var(--color-text-muted); margin-bottom: 0; }

/* --- Diferenciais --- */
.diff-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 768px) { .diff-list { grid-template-columns: repeat(2, 1fr); } }
.diff-item { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-5) 0; border-bottom: 1px solid var(--color-support-2); }
.diff-item svg { flex-shrink: 0; width: 24px; height: 24px; color: var(--accent-ink); margin-top: 2px; }
.diff-item h3 { font-size: var(--fs-body); margin-bottom: var(--sp-1); }
.diff-item p { margin: 0; font-size: var(--fs-small); color: var(--color-text-muted); }

/* --- Fecho (V4): frase grande + 1 botao --- */
.cta-band {
  text-align: center; padding-block: var(--sp-9);
  background: radial-gradient(ellipse 70% 90% at 50% 130%, rgb(255 90 31 / 0.22), transparent 70%), var(--color-bg-dark);
}
.cta-band .container { display: flex; flex-direction: column; gap: var(--sp-6); align-items: center; }
.cta-band h2 { font-size: var(--fs-display); margin: 0; max-width: 18ch; }

/* ============================================================
   FOOTER (V5): logo + frase, 4 colunas discretas, linha final
   ============================================================ */
.site-footer { background: var(--color-bg-dark); color: var(--color-text-inverse); padding-block: var(--sp-8) var(--sp-6); }
.footer-top { margin-bottom: var(--sp-7); }
.footer-top .logo { margin-bottom: var(--logo-clear); }
.footer-top p { color: var(--color-text-inverse-muted); font-size: var(--fs-small); max-width: 36ch; margin: 0; }
.footer-grid { display: grid; gap: var(--sp-6) var(--sp-5); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--sp-7); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.footer-col h2 { font-family: var(--font-mono);
  font-weight: var(--weight-mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8125rem; color: var(--color-text-inverse-muted); margin-bottom: var(--sp-4); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--fs-small); }
@media (max-width: 479px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }
.footer-col a { text-decoration: none; color: var(--color-text-inverse); }
.footer-col a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.footer-bottom {
  border-top: 1px solid var(--color-border-dark);
  padding-top: var(--sp-5);
  font-size: 0.8125rem;
  color: var(--color-text-inverse-muted);
}

/* ============================================================
   FORMULÁRIO (contato)
   ============================================================ */
.form-grid { display: grid; gap: var(--sp-9); grid-template-columns: 1fr; }
@media (min-width: 1024px) { .form-grid { grid-template-columns: 1fr 1.1fr; } }

.field { margin-bottom: var(--sp-5); }
.field label { display: block; font-weight: 600; font-size: var(--fs-small); margin-bottom: var(--sp-2); }
.field .hint { font-size: 0.8125rem; color: var(--color-text-muted); margin-top: var(--sp-2); }
.field input, .field select, .field textarea {
  width: 100%;
  font: inherit;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--color-support-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-primary);
  min-height: 48px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-accent); }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: var(--color-error); }
.field-error {
  display: none;
  color: var(--color-error);
  font-size: 0.8125rem;
  margin-top: var(--sp-2);
}
.field[data-invalid="true"] .field-error { display: block; }

.form-status {
  display: none;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-md);
  font-size: var(--fs-small);
  margin-top: var(--sp-5);
}
.form-status[data-state="success"] { display: block; background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success-border); }
.form-status[data-state="error"] { display: block; background: var(--color-error-bg); color: var(--color-error); border: 1px solid var(--color-error-border); }

.btn[data-loading="true"] { position: relative; color: transparent; }
.btn[data-loading="true"]::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--color-primary);
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn[data-loading="true"]::after { animation: none; }
}

.contact-info { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.contact-info li { display: flex; gap: var(--sp-3); align-items: center; font-size: var(--fs-small); }
.contact-info svg { width: 20px; height: 20px; color: var(--accent-ink); flex-shrink: 0; }
.placeholder-note { color: var(--color-text-muted); }

/* ============================================================
   REVEAL ON SCROLL (progressivo — sem função = removido)
   ============================================================ */
@media (scripting: enabled) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out);
  }
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   PÁGINA 404
   ============================================================ */
.page-404 { min-height: 60vh; display: flex; align-items: center; }
.page-404 .code { font-family: var(--font-mono);
  font-weight: var(--weight-mono); color: var(--accent-ink); font-size: var(--fs-h3); }

/* ============================================================
   HIGHLIGHTED TEXT (inspirado em spell.sh — "Highlighted Text")
   Barra sólida desliza atrás da frase. Visível por padrão (sem
   JS/anime.js a frase já aparece com o destaque estático).
   ============================================================ */
.hl { position: relative; display: inline-block; padding-inline: 0.3em; margin-inline: 0.1em; color: var(--color-primary); font-weight: 600; }
.hl-bg {
  position: absolute;
  inset: 6% 0;
  background: var(--color-accent);
  z-index: -1;
  transform-origin: left center;
}

/* ============================================================
   UTILITÁRIOS
   ============================================================ */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   FORJA F4-F8: WhatsApp, escolha rápida, FAQ, aviso do formulário
   ============================================================ */
.wa-float {
  position: fixed; z-index: 40;
  right: max(var(--sp-4), env(safe-area-inset-right));
  bottom: max(var(--sp-4), env(safe-area-inset-bottom));
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-accent); color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.wa-float:hover { background: var(--color-accent-hover); }
.wa-float:active { transform: scale(0.96); }
.wa-float svg { width: 26px; height: 26px; }
.wa-float.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.site-footer { padding-bottom: calc(var(--sp-6) + 56px); }
[id] { scroll-margin-top: 6rem; }
.wa-inline { margin-block: var(--sp-3) 0; }

.quick-pick { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); max-width: 44rem; }
.quick-pick li { padding: var(--sp-3) var(--sp-4); background: var(--color-surface); border: 1px solid var(--color-support-2); border-radius: var(--radius-sm); }
.quick-pick span { color: var(--color-text-muted); margin-right: var(--sp-2); }
.quick-pick a { font-weight: 700; color: var(--accent-ink); }

/* FAQ (V4): titulo a esquerda, lista numerada em acordeao a direita (details/summary: teclado nativo) */
.faq { counter-reset: faq; border-top: 1px solid var(--color-support-2); }
.faq details { counter-increment: faq; border-bottom: 1px solid var(--color-support-2); }
.faq summary {
  display: flex; align-items: center; gap: var(--sp-4);
  cursor: pointer; list-style: none; font-weight: 600; padding: var(--sp-4) 0; min-height: 56px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: counter(faq, decimal-leading-zero); flex: none;
  font-family: var(--font-mono); font-weight: var(--weight-mono); font-size: 0.8125rem; color: var(--accent-ink);
}
.faq summary::after {
  content: ""; flex: none; margin-left: auto; width: 10px; height: 10px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform var(--dur-base) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq details p { margin: 0 0 var(--sp-4); padding-left: calc(0.8125rem * 2 + var(--sp-4)); color: var(--color-text-muted); }
@media (min-width: 1024px) {
  .faq-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--sp-9); align-items: start; }
  .faq-grid .section-head { margin: 0; position: sticky; top: 7rem; }
}

.form-status[data-state="info"] { display: block; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-support-2); }
.form-status a { font-weight: 600; }

.form-grid h3 { font-size: var(--fs-h4); }

/* ============================================================
   V6: hover, entrada do FAQ e reduced-motion (sem animacao nem transicao)
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  .svc-card, .step { transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
  .svc-card:hover, .step:hover { border-color: var(--color-primary); }
  .faq summary:hover { color: var(--accent-ink); }
}
@media (prefers-reduced-motion: no-preference) {
  .faq details[open] p { animation: faq-in var(--dur-base) var(--ease-out); }
}
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .chip, .svc-card, .step, .faq summary::after { transition: none; }
  .chip:active, .btn:active { transform: none; }
  .svc.is-tabs .svc-card, .faq details[open] p { animation: none; }
}