/* =====================================================================
   WORKNOTE SIGNATURE — theme-signature.css
   Cópia própria do tema da Proposta D (`proposals/d-worknote-signature/theme.css`),
   seedada em 2026-07-31 no momento em que D foi aprovada como identidade oficial.
   Esta é a versão que EVOLUI com o site real — a proposta original em `proposals/`
   permanece congelada para sempre (ver `proposals/STATUS.md`, `DECISIONS.md` D009).
   Carregada depois de `system.css`, igual às propostas.
   ===================================================================== */
:root {
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'Space Grotesk', monospace;
  --fw-display: 800;
  --fw-display-sm: 700;

  --color-bg: #F7F2E7;
  --color-surface: #FFFFFF;
  --color-surface-alt: #EFE2C7;

  --color-text: #33281E;
  --color-text-muted: #7C6B57;
  --color-heading: #241B13;

  --color-border: #E2D3B8;
  --color-border-strong: #C2AC88;

  --color-accent: #C15B34;
  --color-accent-2: #2B6E63;

  --color-cta-bg: #C15B34;
  --color-cta-bg-hover: #A84A28;
  --color-cta-text: #FFF8EE;

  --color-focus-ring: #C15B34;

  --color-header-bg: rgba(247, 242, 231, .94);
  --color-header-bg-scrolled: rgba(247, 242, 231, .99);

  --color-logo-mark-bg: #241B13;
  --color-logo-mark-fg: #F7F2E7;

  --color-footer-bg: #241B13;
  --color-footer-text: #B7A688;
  --color-footer-text-hover: #F7F2E7;
  --color-footer-heading: #F7F2E7;
  --color-footer-border: #392C1E;

  --color-whatsapp: #2B6E63;

  --color-badge-bg: #EFE2C7;
  --color-badge-text: #8A5A3D;

  /* Dourado — quarto acento, usado sobre fundos escuros (painel institucional, destaques de
     upgrade) e reaproveitado nas estrelas de avaliação (antes um valor solto no HTML). */
  --color-accent-gold: #E8A23D;

  /* Disciplina de espaço herdada de A — mais generosa que a Proposta C.
     Reduzido em 2026-08-05 (ajustes pontuais, ver DECISIONS.md D015): o valor anterior
     (clamp(3.5rem, 3rem + 4vw, 7rem)) somava até 14rem de vão entre duas seções cheias
     consecutivas — sensação de conteúdo espalhado. Ver overrides pontuais por seção mais
     abaixo neste arquivo para os pares de blocos com espaço ainda mais reduzido. */
  --space-section: clamp(2.5rem, 2rem + 3vw, 4.5rem);

  --radius-btn: var(--radius-sm);
  --radius-card: var(--radius-md);
  --radius-icon-badge: var(--radius-sm);
  --radius-badge: var(--radius-xs);

  --shadow-card-rest: 0 1px 0 rgba(36,27,19,.05);
  --shadow-card-hover: 0 18px 36px rgba(36,27,19,.14);
  --card-hover-lift: -5px;

  --duration-reveal: var(--duration-slow);
  --ease-reveal: var(--ease-out);
  --reveal-distance: 16px;
}

/* ===================== Overrides gerais ===================== */

h1, h2, h3 { letter-spacing: -0.012em; }
.eyebrow { font-family: var(--font-mono); }

/* Textura de pontos restrita ao hero — lição de A (restrição) aplicada
   sobre a lição de C (o padrão em si já existia, mas competia com
   texto denso no FAQ; aqui só aparece onde não há texto corrido). */
.hero-d { background-image: radial-gradient(circle, rgba(36,27,19,.06) 1px, transparent 1px); background-size: 24px 24px; }

/* Botão primário com entalhe de ticket — dispositivo de assinatura,
   mantido de C por já ser tecnicamente sólido e sem precedente externo. */
.btn--primary {
  -webkit-mask-image:
    radial-gradient(circle 7px at 0 50%, transparent 99%, black 100%),
    radial-gradient(circle 7px at 100% 50%, transparent 99%, black 100%),
    linear-gradient(black, black);
  -webkit-mask-composite: source-in, xor;
  mask-composite: intersect;
}
.btn--primary:active { transform: translateY(1px) scale(.985); }

/* ===================== Cards — canto dobrado (dog-ear) ===================== */
.card {
  position: relative;
  border-left: none;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.card::after {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 16px 16px 0;
  border-color: transparent var(--color-accent) transparent transparent;
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.card:nth-child(3n+2)::after { border-color: transparent var(--color-accent-2) transparent transparent; }

/* ===================== Hero ===================== */
.hero-d { padding-block: clamp(2.25rem, 1.75rem + 3vw, 4rem) var(--space-section); }
.hero-d__kicker {
  text-align: center; font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-2xl); line-height: 1.25; color: var(--color-text-muted);
  max-width: 34ch; margin-inline: auto; margin-bottom: var(--space-10);
}
.hero-d__grid { display: grid; gap: var(--space-12); align-items: center; }
@media (min-width: 1024px) { .hero-d__grid { grid-template-columns: 1.1fr .9fr; } }
.hero-d__title { font-size: var(--text-5xl); line-height: 1.1; max-width: 22ch; margin-bottom: var(--space-4); }
.hero-d__title em { font-style: normal; color: var(--color-accent); }
.hero-d__lead { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 46ch; margin-bottom: var(--space-6); }
.hero-d__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }

.hero-d__quickfacts { margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
.hero-d__quickfacts-grid { display: grid; gap: var(--space-5); text-align: center; }
@media (min-width: 768px) { .hero-d__quickfacts-grid { grid-template-columns: repeat(3, 1fr); text-align: left; } }
.hero-d__quickfact { display: flex; flex-direction: column; gap: var(--space-1); }
.hero-d__quickfact-value { font-weight: 700; font-size: var(--text-sm); color: var(--color-heading); }
.hero-d__quickfact-label { font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: .02em; }

/* ===================== Via-carbono do ticket =====================
   Segunda camada deslocada atrás do ticket principal, como a cópia carbono
   que fica na oficina enquanto o cliente leva a via original. */
.ticket-stack { position: relative; }
.ticket-stack::before {
  content: '';
  position: absolute;
  top: 14px; right: -14px; bottom: -14px; left: 14px;
  background: var(--color-surface-alt);
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  transform: rotate(2.5deg);
  z-index: 0;
}
.ticket {
  position: relative; z-index: 1;
  background: var(--color-surface);
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transform: rotate(-1.5deg);
  box-shadow: var(--shadow-3);
}
.ticket__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1.5px dashed var(--color-border); }
.ticket__id { font-family: var(--font-mono); font-weight: 700; color: var(--color-heading); }
.ticket__row { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-2); font-size: var(--text-sm); }
.ticket__row span:first-child { color: var(--color-text-muted); }
.ticket__row span:last-child { font-weight: 600; color: var(--color-heading); }
.ticket__perforation { display: flex; gap: 6px; justify-content: center; margin-block: var(--space-4); }
.ticket__perforation span { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-bg); border: 1.5px solid var(--color-border-strong); }

/* ===================== Selo — tratado como carimbo de tinta =====================
   Animação de entrada distinta: "batida de carimbo" (escala + rotação
   assentando), não o fade+translateY genérico do resto do sistema. */
.stamp {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: var(--radius-full);
  border: 2.5px solid var(--color-accent-2); color: var(--color-accent-2);
  transform: rotate(-8deg);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; text-align: center; line-height: 1.1;
  flex-shrink: 0;
}
[data-reveal].stamp--reveal {
  opacity: 0; transform: rotate(6deg) scale(1.35);
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}
[data-reveal].stamp--reveal.is-visible { opacity: 1; transform: rotate(-8deg) scale(1); }

/* ===================== Faixa de estatísticas ===================== */
.stat-strip-d { padding-block: var(--space-16); background: var(--color-surface-alt); }
.stat-strip-d__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); text-align: center; }
@media (min-width: 768px) { .stat-strip-d__grid { grid-template-columns: repeat(4, 1fr); } }
.stat-d__value { font-family: var(--font-display); font-weight: 800; font-size: var(--text-3xl); color: var(--color-accent); }
.stat-d__label { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); }

/* ===================== Passos ===================== */
.steps-d { display: grid; gap: var(--space-8); }
@media (min-width: 768px) { .steps-d { grid-template-columns: repeat(3, 1fr); } }
.steps-d__item { display: flex; gap: var(--space-4); align-items: flex-start; }
.steps-d__num {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-full);
  border: 2.5px solid var(--color-accent); color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700;
}
.steps-d__title {
  font-family: var(--font-display); font-weight: var(--fw-display-sm, 600);
  font-size: var(--text-lg); line-height: 1.3; color: var(--color-heading);
  margin-bottom: var(--space-1);
}
.steps-d p { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ===================== Prova social real (novo nesta cópia — não existe na proposta congelada) =====================
   Nota de honestidade (ver BRIEF_OFICIAL.md e DECISIONS.md D010): nota e contagem de
   avaliações são dado real da empresa, mantido em exatamente 2 lugares neste projeto
   (aqui não — nos arquivos HTML que consomem estes tokens), nunca inventado. */
.rating-badge { display: inline-flex; align-items: center; gap: var(--space-2); }
.rating-badge .stars { color: var(--color-accent-gold); display: flex; gap: 1px; }
.rating-badge .stars svg { width: 16px; height: 16px; }

/* ===================== Defeitos comuns (novo nesta cópia) =====================
   Título e as duas colunas vivem no MESMO wrapper central (.defects-wrap), única
   fonte de centralização — evita qualquer chance de os dois blocos terem centros
   diferentes. minmax(0, 1fr) nas colunas (não apenas "1fr") é deliberado: sem o
   "0", cada trilho de grid tem mínimo automático = min-content do texto mais
   longo daquela coluna, o que pode desequilibrar a largura das duas colunas
   dependendo do texto — com minmax(0, 1fr) as colunas ficam sempre idênticas. */
.defects-wrap {
  width: 100%;
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
  box-sizing: border-box;
}
.defects-head { text-align: center; margin-bottom: var(--space-12); }
.defects-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3) var(--space-12);
}
@media (min-width: 640px) {
  .defects-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.defects-list { display: flex; flex-direction: column; gap: var(--space-3); text-align: left; min-width: 0; }
.defects-list li { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--color-text); }
.defects-list li::before {
  content: '✓'; flex-shrink: 0; color: var(--color-accent-2);
  font-weight: 700; line-height: 1.6;
}

/* ===================== Leva e traz (empresas) — listas "Como funciona?"/"Vantagens" =====================
   Marcador discreto (mesmo ponto do .eyebrow::before) — texto puro, sem cards/ícones,
   para não competir em destaque visual com os cards de Serviços. */
.leva-traz-list { display: flex; flex-direction: column; gap: var(--space-3); }
.leva-traz-list li { position: relative; padding-left: var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); }
.leva-traz-list li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: var(--radius-full);
  background: var(--color-accent-2);
}
.leva-traz-list li strong { color: var(--color-heading); font-weight: 600; }

/* ===================== Carrossel de avaliações (novo nesta cópia) =====================
   Scroll nativo com scroll-snap: sem biblioteca, drag no celular "de graça" via touch
   scroll do navegador, leve o suficiente para não pesar no PageSpeed. Setas e autoplay
   (main.js) só chamam scrollBy sobre este mesmo scroll nativo. */
.reviews-carousel { position: relative; margin-top: var(--space-12); }
.reviews-carousel__viewport {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.reviews-carousel__viewport::-webkit-scrollbar { display: none; }
.reviews-carousel__track {
  display: flex; gap: var(--space-6);
  --reviews-visible: 1;
}
@media (min-width: 768px)  { .reviews-carousel__track { --reviews-visible: 2; } }
@media (min-width: 1024px) { .reviews-carousel__track { --reviews-visible: 3; } }
@media (min-width: 1280px) { .reviews-carousel__track { --reviews-visible: 4; } }

.review-card {
  scroll-snap-align: start;
  flex: 0 0 calc((100% - (var(--reviews-visible) - 1) * var(--space-6)) / var(--reviews-visible));
  display: flex; flex-direction: column;
  background: var(--color-surface); border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-card, var(--radius-lg));
  padding: var(--space-6); text-align: left;
}
.review-card__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.review-card__avatar {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-full);
  background: var(--color-surface-alt); object-fit: cover;
}
.review-card__name { font-weight: 600; color: var(--color-heading); font-size: var(--text-sm); }
.review-card__source { font-size: var(--text-xs); color: var(--color-text-muted); }
.review-card__stars { display: flex; gap: 2px; color: var(--color-accent-gold); margin-bottom: var(--space-3); }
.review-card__text {
  font-size: var(--text-sm); line-height: 1.6; color: var(--color-text);
  flex-grow: 1;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.review-card__date { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-4); }

.reviews-carousel__nav { display: flex; justify-content: center; gap: var(--space-4); margin-top: var(--space-6); }
.carousel-btn {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border-strong); color: var(--color-heading);
  transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.carousel-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.carousel-btn svg { width: 18px; height: 18px; }
.carousel-btn--prev svg { transform: rotate(90deg); }
.carousel-btn--next svg { transform: rotate(-90deg); }

/* ===================== Ampliação de conteúdo 2026-08-04 (ver DECISIONS.md D013) =====================
   Componentes novos desta rodada. Todos reaproveitam tokens já definidos acima (nenhuma cor
   fixa nova além de --color-accent-gold) e padrões de componente do system.css (.card, .btn,
   .icon-badge, .grid, .field, [data-reveal]) em vez de criar um segundo vocabulário visual. */

/* --- Quem somos (institucional) --- */
.about-panel { display: grid; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-3); }
@media (min-width: 960px) { .about-panel { grid-template-columns: 1fr 1.15fr; } }
.about-panel__side { background: var(--color-heading); color: var(--color-bg); padding: var(--space-10) var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); }
.about-panel__side .eyebrow { color: var(--color-accent-gold); }
.about-panel__side .eyebrow::before { background: var(--color-accent-gold); }
.about-panel__side h2 { color: var(--color-cta-text); font-size: var(--text-3xl); }
.about-panel__side h3 { color: var(--color-cta-text); font-size: var(--text-xl); }
.about-panel__side > p { color: rgba(247,242,231,.82); line-height: 1.7; }
.about-panel__side > p a { color: var(--color-accent-gold); text-decoration: underline; text-underline-offset: 2px; }
.about-panel__stats { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-5); border-top: 1px solid rgba(247,242,231,.18); }
.about-panel__stats li { display: flex; flex-direction: column; gap: 2px; }
.about-panel__stat-value { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); color: var(--color-accent-gold); }
.about-panel__stat-label { font-size: var(--text-sm); color: rgba(247,242,231,.75); }
.about-panel__side .btn--secondary { background: transparent; border-color: rgba(247,242,231,.35); color: var(--color-cta-text); align-self: flex-start; }
.about-panel__side .btn--secondary:hover { border-color: var(--color-accent-gold); color: var(--color-accent-gold); }
.about-panel__content { background: var(--color-surface); padding: var(--space-10) var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); }
.about-panel__content h3 { font-size: var(--text-xl); }
.about-panel__content > p { color: var(--color-text-muted); }
.about-panel__benefits { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .about-panel__benefits { grid-template-columns: repeat(2, 1fr); } }
.about-panel__benefits h4 { font-size: var(--text-base); margin-bottom: var(--space-1); }
.about-panel__benefits p { color: var(--color-text-muted); font-size: var(--text-sm); }
.about-panel__gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-6); }
.about-panel__gallery img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--color-border); }

/* --- Atendimento para empresas --- */
.business-panel {
  display: flex; flex-direction: column; gap: var(--space-6);
  background: linear-gradient(135deg, rgba(43,110,99,.09), rgba(43,110,99,.02));
  border: 1.5px solid rgba(43,110,99,.28);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-8);
}
@media (min-width: 768px) { .business-panel { flex-direction: row; align-items: flex-start; gap: var(--space-10); } }
.business-panel__icon {
  flex-shrink: 0; width: 72px; height: 72px; border-radius: var(--radius-lg);
  background: var(--color-accent-2); color: var(--color-cta-text);
  display: flex; align-items: center; justify-content: center;
}
.business-panel__icon svg { width: 34px; height: 34px; }
.business-panel__list { display: flex; flex-direction: column; gap: var(--space-3); margin-block: var(--space-6); }
.business-panel__list li { position: relative; padding-left: var(--space-6); color: var(--color-text); font-size: var(--text-sm); }
.business-panel__list li::before { content: '✓'; position: absolute; left: 0; color: var(--color-accent-2); font-weight: 700; }

/* --- Correção mobile (2026-08-10): "SOLICITAR ORÇAMENTO" (#mais-servicos) e "Falar sobre
   atendimento empresarial" (#atendimento-empresas) empurravam a coluna inteira para fora da
   viewport em telas estreitas — .btn tem white-space:nowrap (system.css, global, não alterado
   aqui) e, sem min-width:0, o item flex/grid não conseguia encolher abaixo da largura mínima do
   texto em uma linha só, forçando overflow (texto cortado do lado direito, botão vazando do
   card). Só estas duas seções, só abaixo de 640px — nenhuma alteração de largura/tipografia/
   espaçamento/animação no desktop (nada aqui se aplica acima de 640px, e nenhuma propriedade de
   layout foi tocada fora deste bloco). Ver docs/DECISIONS.md D032.

   --- Refinamento mobile (2026-08-11, ver D033): a correção acima resolveu o overflow, mas os
   dois botões ficaram "excessivamente altos" no mobile (texto quebrando em 2-3 linhas com o
   padding/fonte grandes de sempre). Ajuste pedido pelo usuário: usar como referência de
   DIMENSÕES (só tamanho — cor/fundo/borda continuam os mesmos de sempre, nada de
   `.btn--primary` foi tocado) o botão preto "Falar com um técnico" (`.btn--secondary` dentro de
   `#quem-somos`, fora deste escopo, não alterado) — que usa o `.btn` base do system.css
   (padding .9rem/1.6rem, font-size 1rem), sem o modificador `.btn--lg`. Continua só abaixo de
   640px, só nestas duas seções. */
@media (max-width: 640px) {
  #mais-servicos .about-panel__content {
    min-width: 0;
  }
  #mais-servicos .about-panel__content .btn--lg {
    white-space: normal;
    max-width: 100%;
    text-align: center;
    /* iguala às dimensões do .btn base (referência "Falar com um técnico"), sobrescrevendo só
       o padding/fonte maiores de .btn--lg — cor/fundo/borda continuam de .btn--primary. */
    padding: var(--btn-pad-y, .9rem) var(--btn-pad-x, 1.6rem);
    font-size: var(--text-base);
  }
  /* ícone escondido só no mobile: com ele, "SOLICITAR ORÇAMENTO" (20 caracteres, caixa alta)
     precisa de ~269px numa linha só e o card só tem ~256px disponíveis a 360px de viewport,
     forçando quebra de linha (botão ficando alto de novo). Sem o ícone (~26px a menos),
     cabe numa linha só nos 3 larguras testadas (360/390/412px). Medido, não estimado. */
  #mais-servicos .about-panel__content .btn--lg .about-panel__cta-icon {
    display: none;
  }
  #atendimento-empresas .business-panel__content {
    min-width: 0;
  }
  #atendimento-empresas .business-panel .btn--primary {
    white-space: normal;
    max-width: 100%;
    text-align: center;
    /* padding/fonte já batiam com a referência (.btn sem --lg) — o que sobrava de altura vinha
       do texto longo quebrando linha; ver troca de texto mobile-only em system.css
       (.btn-text-full/.btn-text-short) e no <span> deste botão em index.html. */
  }
  /* mesmo raciocínio do botão acima: com o texto mobile mais curto ("Atendimento empresarial")
     o ícone ainda deixava a largura necessária maior que o espaço disponível a 360px — escondido
     só no mobile para garantir uma linha só nas 3 larguras testadas. */
  #atendimento-empresas .business-panel .btn--primary .business-panel__cta-icon {
    display: none;
  }
}

/* --- Refinamento mobile (2026-08-11, ver D033) — telefones mais estreitos: medido em produção
   (worknote.com.br, fonte real carregada) que "Atendimento empresarial" a 360px de viewport
   ficava ~1px maior que o espaço disponível mesmo sem ícone, voltando a quebrar em 2 linhas
   (botão alto de novo). Ajuste mínimo e cirúrgico, só neste botão, só até 375px (390/412px, as
   outras duas larguras testadas, continuam com o padding igual ao da referência, sem esta
   regra) — reduz o padding horizontal com folga real de sobra, sem tocar fonte/cor/altura. */
@media (max-width: 375px) {
  #atendimento-empresas .business-panel .btn--primary {
    padding-inline: 1.15rem;
  }
}

/* --- Destaques em blocos coloridos --- */
.highlight-grid { display: grid; gap: var(--space-6); }
@media (min-width: 640px) { .highlight-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .highlight-grid { grid-template-columns: repeat(4, 1fr); } }
.highlight-block {
  position: relative; border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6);
  color: var(--color-cta-text); display: flex; flex-direction: column; gap: var(--space-4);
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.highlight-block:hover { transform: translateY(-5px); box-shadow: var(--shadow-4); }
.highlight-block h3 { color: var(--color-cta-text); font-size: var(--text-lg); }
.highlight-block p { color: rgba(255,248,238,.85); font-size: var(--text-sm); flex-grow: 1; }
.highlight-block__icon {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--radius-md);
  background: rgba(255,255,255,.16);
}
.highlight-block__icon svg { width: 24px; height: 24px; }
.highlight-block__cta { align-self: flex-start; border-color: rgba(255,248,238,.5); color: var(--color-cta-text); padding: .6rem 1.1rem; font-size: var(--text-sm); }
.highlight-block__cta:hover { border-color: var(--color-cta-text); background: rgba(255,255,255,.12); transform: translateY(-2px); }
.highlight-block--1 { background: linear-gradient(135deg, #C15B34, #96431F); }
.highlight-block--2 { background: linear-gradient(135deg, #2B6E63, #1E4D45); }
.highlight-block--3 { background: linear-gradient(135deg, #241B13, #3F3021); }
.highlight-block--4 { background: linear-gradient(135deg, #B98530, #8C6320); }

/* --- Faixa de fabricantes (marquee CSS puro, sem biblioteca) --- */
.brand-marquee {
  overflow: hidden; margin-top: var(--space-10); padding-block: var(--space-4);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.brand-marquee__track { display: flex; width: max-content; animation: brand-marquee 32s linear infinite; }
.brand-marquee:hover .brand-marquee__track,
.brand-marquee:focus-within .brand-marquee__track { animation-play-state: paused; }
.brand-marquee__list { display: flex; align-items: center; gap: var(--space-16); padding-inline: var(--space-8); }
.brand-marquee__list li {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl);
  color: var(--color-text-muted); white-space: nowrap; letter-spacing: .01em; opacity: .7;
}
@keyframes brand-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.brand-marquee__disclaimer { text-align: center; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-6); }
@media (prefers-reduced-motion: reduce) {
  .brand-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .brand-marquee__track { animation: none; }
  .brand-marquee__list:nth-child(2) { display: none; }
}

/* --- Prazos médios --- */
.timeline-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.timeline-card h3 { font-size: var(--text-lg); }
.timeline-card p { color: var(--color-text-muted); font-size: var(--text-sm); }
.timeline-note { text-align: center; color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-10); max-width: 60ch; margin-inline: auto; }

/* --- Por que escolher a WorkNote (ampliada) --- */
.why-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.why-card p { color: var(--color-text-muted); font-size: var(--text-sm); }
.choice-list { display: grid; gap: var(--space-4); margin-top: var(--space-10); }
@media (min-width: 640px) { .choice-list { grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-10); } }
.choice-list li { position: relative; padding-left: var(--space-6); color: var(--color-text); font-size: var(--text-sm); line-height: 1.6; }
.choice-list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--color-accent-2); font-weight: 700; }

/* --- Localização, mapa e formulário WhatsApp --- */
.location-grid { display: grid; gap: var(--space-8); margin-top: var(--space-16); }
@media (min-width: 960px) { .location-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.location-card { background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-5); text-align: left; }
.location-card h3 { font-size: var(--text-xl); }
.location-list { display: flex; flex-direction: column; gap: var(--space-3); }
.location-list li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text); }
.location-list li svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-accent); margin-top: 2px; }
.location-list li a { color: var(--color-heading); font-weight: 600; }
.location-list li a:hover { color: var(--color-accent); }
.location-note { font-size: var(--text-sm); color: var(--color-text-muted); }
.location-note a { color: var(--color-accent); font-weight: 600; }
.location-card .btn { align-self: flex-start; }
.location-map { border-radius: var(--radius-md); overflow: hidden; border: 1.5px solid var(--color-border); aspect-ratio: 16 / 10; }
.location-map iframe { width: 100%; height: 100%; display: block; }
.contact-form { display: flex; flex-direction: column; gap: var(--space-4); }
.contact-form select { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1.5px solid var(--color-border); background: var(--color-surface); color: var(--color-text); }
.contact-form select:focus { border-color: var(--color-accent); outline: 2.5px solid var(--color-focus-ring); outline-offset: 1px; }
.contact-form textarea { resize: vertical; min-height: 92px; }
.contact-form__note { font-size: var(--text-sm); color: var(--color-accent-2); min-height: 1.4em; }

/* --- Correção mobile (2026-08-11, ver DECISIONS.md D034): overflow horizontal da página inteira
   causado pelo botão "Montar mensagem e abrir WhatsApp" (#contato .contact-form .btn--block).
   Mesma causa raiz de D032 (.btn tem white-space: nowrap, global, não alterado aqui), mas desta
   vez o item que não conseguia encolher era um item de CSS Grid (.location-card dentro de
   .location-grid, coluna única implícita abaixo de 960px) — sem min-width: 0 na cadeia
   grid-item -> flex-item -> flex-item (.location-card -> .contact-form -> .field), o min-content
   do botão (nowrap) virava o mínimo da COLUNA INTEIRA do grid, empurrando as duas cards e a
   página inteira ~103px além da viewport a 360px (confirmado via scrollWidth/clientWidth e
   getBoundingClientRect isolando min-content de cada nó da árvore, sem alterar nada antes de
   medir). O <select> (#wa-servico) tinha um min-content secundário (opções longas como "Limpeza
   e manutenção preventiva") que se tornaria o novo gargalo depois de corrigir só o botão —
   resolvido com max-width: 100% (o navegador trunca a opção selecionada normalmente, comportamento
   nativo, sem redesenho). Só #contato, só abaixo de 640px — nenhuma alteração de largura/cor/
   tipografia/espaçamento no desktop, nenhum dos 2 botões corrigidos em D032/D033 foi tocado. */
@media (max-width: 640px) {
  #contato .location-card,
  #contato .contact-form,
  #contato .field {
    min-width: 0;
  }
  #contato .contact-form .btn--block {
    white-space: normal;
    max-width: 100%;
    text-align: center;
  }
  #contato .contact-form select {
    max-width: 100%;
  }
}

/* ===================== Evolução de conteúdo/comunicação 2026-08-05 (ver DECISIONS.md D014) =====================
   Apenas os componentes mínimos necessários para reorganizar conteúdo — mesma paleta,
   tipografia e espaçamentos já existentes, sem novo vocabulário visual. */

/* --- Logo em imagem (header e footer) --- */
.logo__img { display: block; height: 34px; width: auto; }

/* --- Mais serviços: reaproveita a distribuição de ".about-panel" (ver "Quem somos") --- */
.about-panel__feature-list { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid rgba(247,242,231,.18); }
.about-panel__feature-list li { position: relative; padding-left: var(--space-6); color: rgba(247,242,231,.82); font-size: var(--text-sm); line-height: 1.5; }
.about-panel__feature-list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--color-accent-gold); font-weight: 700; }
.contact-form__note[data-state="error"] { color: #B91C1C; }

/* ===================== Ajustes pontuais 2026-08-05 (ver DECISIONS.md D015) =====================
   Só espaçamento vertical entre/dentro de seções específicas — nenhuma cor, fonte ou
   componente novo. Ajuste por contexto, não um valor único aplicado cegamente:
   - #atendimento-empresas: espaço reduzido acima E abaixo (ficava "ilha isolada" entre
     dois blocos institucionais).
   - #quem-somos (padding-bottom) e #mais-servicos (padding-bottom): reduz o lado que
     encosta no próximo bloco relacionado, sem mexer no lado oposto.
   - #defeitos-comuns (padding-top): reduz a distância vinda de "Mais serviços" — a
     distância vinda do lado de baixo (para "Como funciona") não foi tocada. */
@media (max-width: 640px) {
  :root { --space-section: clamp(2rem, 1.5rem + 3vw, 3rem); }
}

#quem-somos { padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
#atendimento-empresas { padding-block: clamp(1.75rem, 1.25rem + 2vw, 3rem); }
#mais-servicos { padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
#defeitos-comuns { padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }

/* =====================================================================
   SISTEMA DE ANIMAÇÃO — 2026-08-06 (ver DECISIONS.md D019)
   Vive inteiramente aqui, nunca em system.css nem em nenhum tema0N-*.css: é assim que a
   linguagem de animação fica restrita ao SIGNATURE sem exigir HTML duplicado por tema (ver
   D019 para o raciocínio completo). Reaproveita a base [data-reveal]/.is-visible já existente
   em system.css (fade + translateY, disparada pelo IntersectionObserver de main.js) e só
   ACRESCENTA variantes de direção/escala, stagger de itens de lista/grid, microinterações de
   hover e algumas animações pontuais (hero, cabeçalho, WhatsApp flutuante, FAQ). --reveal-system
   abaixo é o único sinal que main.js usa para saber se está rodando no Signature — nenhum outro
   tema define essa variável, então o trecho de JS que depende dela nunca roda fora daqui.
   Nenhuma propriedade de layout (display, grid-template, flex, padding, margin, font-size) é
   tocada nesta seção — só opacity, transform, box-shadow, animation e transition-delay. */

:root {
  --reveal-system: on;
  --reveal-distance-lg: 32px;
  --scale-from: .97;
  --stagger-step: 90ms;
  --ease-reveal-soft: cubic-bezier(.16, .84, .44, 1);
  --duration-reveal-slow: 750ms;
}

/* --- Variantes de direção/escala do [data-reveal] genérico (a variante "up", padrão, já
   está em system.css) --- */
[data-reveal="left"]  { transform: translateX(calc(-1 * var(--reveal-distance-lg))); }
[data-reveal="left"].is-visible  { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(var(--reveal-distance-lg)); }
[data-reveal="right"].is-visible { transform: translateX(0); }
[data-reveal="scale"] { transform: scale(var(--scale-from)); }
[data-reveal="scale"].is-visible { transform: scale(1); }
/* "card" — reservado ao ticket do hero: NÃO usa mais o fade+translate+scale genérico acima.
   Ver bloco dedicado "Ticket do hero: animação de destacar" perto de .float-soft/@keyframes
   float-soft, mais abaixo — o ticket fica sempre visível na posição/tamanho finais (sem fade,
   sem entrada lateral); só a rotação, a sombra e a "via-carbono" (::before) entram, com um
   instante reto antes do movimento. */
[data-reveal="card"] { opacity: 1; transform: none; }
[data-reveal="card"].is-visible { opacity: 1; transform: none; }

@media (max-width: 640px) {
  /* Mobile: sem deslocamento lateral (evita qualquer risco de overflow horizontal) — a
     variante "left"/"right" cai para um fade-up simples, atrasos mais curtos. "card" (ticket
     do hero) não participa deste fallback — a animação dedicada de destacar já não desloca
     lateralmente em nenhuma largura de tela. */
  :root { --reveal-distance-lg: 16px; --stagger-step: 60ms; }
  [data-reveal="left"], [data-reveal="right"] {
    transform: translateY(var(--reveal-distance, 16px));
  }
  [data-reveal="left"].is-visible, [data-reveal="right"].is-visible {
    transform: translateY(0);
  }
}

/* --- Stagger de itens de lista/grid -----------------------------------------------------
   Estado oculto por padrão; some visível quando o [data-reveal] responsável (o próprio item,
   um ancestral próximo, ou o próprio grid) ganha .is-visible via IntersectionObserver. Atraso
   limitado a 6 passos — do 7º item em diante usa o mesmo atraso do 6º, para nunca criar uma
   espera longa em listas compridas (FAQ com 17 perguntas, defeitos comuns com 10 itens). */
.about-panel__stats > li,
.about-panel__benefits > li,
.about-panel__feature-list > li,
.business-panel__list > li,
.defects-list > li,
.choice-list > li,
.leva-traz-list > li,
.hero-d__quickfact,
.steps-d__item,
.highlight-grid > .highlight-block,
.grid--3 > .card,
.grid--2 > .card,
.footer__grid > *,
.faq-item,
.review-card {
  opacity: 0; transform: translateY(var(--reveal-distance, 16px));
  transition: opacity var(--duration-reveal, var(--duration-slow)) var(--ease-reveal, var(--ease-standard)),
              transform var(--duration-reveal, var(--duration-slow)) var(--ease-reveal, var(--ease-standard));
}
.about-panel__side[data-reveal].is-visible .about-panel__stats > li,
.about-panel__content[data-reveal].is-visible .about-panel__benefits > li,
.about-panel__side[data-reveal].is-visible .about-panel__feature-list > li,
.business-panel[data-reveal].is-visible .business-panel__list > li,
.defects-wrap[data-reveal].is-visible .defects-list > li,
.choice-list[data-reveal].is-visible > li,
[data-reveal].is-visible .leva-traz-list > li,
.hero-d__quickfacts[data-reveal].is-visible .hero-d__quickfact,
.steps-d[data-reveal].is-visible > .steps-d__item,
.highlight-grid[data-reveal].is-visible > .highlight-block,
.grid--3[data-reveal].is-visible > .card,
.grid--2[data-reveal].is-visible > .card,
.footer__grid[data-reveal].is-visible > *,
.faq-list[data-reveal].is-visible > .faq-item,
.reviews-carousel[data-reveal].is-visible .review-card {
  opacity: 1; transform: translateY(0);
}

.about-panel__stats > li:nth-child(1), .about-panel__benefits > li:nth-child(1), .about-panel__feature-list > li:nth-child(1), .business-panel__list > li:nth-child(1), .defects-list > li:nth-child(1), .choice-list > li:nth-child(1), .leva-traz-list > li:nth-child(1), .hero-d__quickfact:nth-child(1), .steps-d__item:nth-child(1), .highlight-grid > .highlight-block:nth-child(1), .grid--3 > .card:nth-child(1), .grid--2 > .card:nth-child(1), .footer__grid > *:nth-child(1), .faq-item:nth-child(1), .review-card:nth-child(1)
{ transition-delay: calc(var(--stagger-step) * 0); }
.about-panel__stats > li:nth-child(2), .about-panel__benefits > li:nth-child(2), .about-panel__feature-list > li:nth-child(2), .business-panel__list > li:nth-child(2), .defects-list > li:nth-child(2), .choice-list > li:nth-child(2), .leva-traz-list > li:nth-child(2), .hero-d__quickfact:nth-child(2), .steps-d__item:nth-child(2), .highlight-grid > .highlight-block:nth-child(2), .grid--3 > .card:nth-child(2), .grid--2 > .card:nth-child(2), .footer__grid > *:nth-child(2), .faq-item:nth-child(2), .review-card:nth-child(2)
{ transition-delay: calc(var(--stagger-step) * 1); }
.about-panel__stats > li:nth-child(3), .about-panel__benefits > li:nth-child(3), .about-panel__feature-list > li:nth-child(3), .business-panel__list > li:nth-child(3), .defects-list > li:nth-child(3), .choice-list > li:nth-child(3), .leva-traz-list > li:nth-child(3), .hero-d__quickfact:nth-child(3), .steps-d__item:nth-child(3), .highlight-grid > .highlight-block:nth-child(3), .grid--3 > .card:nth-child(3), .grid--2 > .card:nth-child(3), .footer__grid > *:nth-child(3), .faq-item:nth-child(3), .review-card:nth-child(3)
{ transition-delay: calc(var(--stagger-step) * 2); }
.about-panel__stats > li:nth-child(4), .about-panel__benefits > li:nth-child(4), .about-panel__feature-list > li:nth-child(4), .business-panel__list > li:nth-child(4), .defects-list > li:nth-child(4), .choice-list > li:nth-child(4), .leva-traz-list > li:nth-child(4), .hero-d__quickfact:nth-child(4), .steps-d__item:nth-child(4), .highlight-grid > .highlight-block:nth-child(4), .grid--3 > .card:nth-child(4), .grid--2 > .card:nth-child(4), .footer__grid > *:nth-child(4), .faq-item:nth-child(4), .review-card:nth-child(4)
{ transition-delay: calc(var(--stagger-step) * 3); }
.about-panel__stats > li:nth-child(5), .about-panel__benefits > li:nth-child(5), .about-panel__feature-list > li:nth-child(5), .business-panel__list > li:nth-child(5), .defects-list > li:nth-child(5), .choice-list > li:nth-child(5), .leva-traz-list > li:nth-child(5), .hero-d__quickfact:nth-child(5), .steps-d__item:nth-child(5), .highlight-grid > .highlight-block:nth-child(5), .grid--3 > .card:nth-child(5), .grid--2 > .card:nth-child(5), .footer__grid > *:nth-child(5), .faq-item:nth-child(5), .review-card:nth-child(5)
{ transition-delay: calc(var(--stagger-step) * 4); }
.about-panel__stats > li:nth-child(n+6), .about-panel__benefits > li:nth-child(n+6), .about-panel__feature-list > li:nth-child(n+6), .business-panel__list > li:nth-child(n+6), .defects-list > li:nth-child(n+6), .choice-list > li:nth-child(n+6), .leva-traz-list > li:nth-child(n+6), .hero-d__quickfact:nth-child(n+6), .steps-d__item:nth-child(n+6), .highlight-grid > .highlight-block:nth-child(n+6), .grid--3 > .card:nth-child(n+6), .grid--2 > .card:nth-child(n+6), .footer__grid > *:nth-child(n+6), .faq-item:nth-child(n+6), .review-card:nth-child(n+6)
{ transition-delay: calc(var(--stagger-step) * 5); }

/* --- Destaques ("Serviços em destaque"): cascata mais perceptível, só para este grupo ------
   Pedido do usuário (2026-08-07): o intervalo padrão (--stagger-step, 90ms/60ms no mobile,
   compartilhado com FAQ, avaliações, rodapé etc.) estava rápido demais para notar a cascata
   aqui. Sobrescreve só o transition-delay de .highlight-block com valores fixos em ms — mesma
   especificidade da regra genérica acima (mesmo seletor), então precisa vir DEPOIS dela no
   arquivo para vencer no empate. Não toca em opacity/transform/duration/easing (herdados da
   regra de stagger genérica) nem em --stagger-step (que continua valendo para todo o resto). */
.highlight-grid > .highlight-block:nth-child(1) { transition-delay: 0ms; }
.highlight-grid > .highlight-block:nth-child(2) { transition-delay: 300ms; }
.highlight-grid > .highlight-block:nth-child(3) { transition-delay: 600ms; }
.highlight-grid > .highlight-block:nth-child(4) { transition-delay: 900ms; }

/* --- Hero: sequência de entrada (kicker → título → texto → botões → informações rápidas →
   cartão) — ver seção 4 do briefing. Cada elemento é seu próprio [data-reveal], observado
   pelo mesmo IntersectionObserver de main.js; como o hero já está visível no carregamento, a
   sequência acontece de forma praticamente imediata, só com os atrasos abaixo. */
.hero-d__kicker[data-reveal] { transition-delay: 0ms; }
.hero-d__title[data-reveal] { transition-delay: 90ms; }
.hero-d__lead[data-reveal] { transition-delay: 180ms; }
.hero-d__actions[data-reveal] { transition-delay: 270ms; }
.hero-d__quickfacts[data-reveal] { transition-delay: 360ms; }
/* [data-reveal="card"] (ticket do hero) não usa mais transition-delay aqui — sua própria
   temporização (instante reto + destacar) vive no bloco dedicado logo abaixo. */

/* Flutuação suave do cartão do hero, só depois de destacado, nunca antes — evita competir
   com a animação de entrada. Amplitude pequena (6px), ida e volta lenta (7s). Disparo e
   temporização ficam combinados com a animação de destacar no mesmo `animation` (ver bloco
   "Ticket do hero" abaixo) para não haver duas declarações de `animation` competindo pelo
   mesmo elemento. */
@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* --- Ticket do hero: animação de "destacar da página" -----------------------------------
   Pedido do usuário (2026-08-07, refinado no mesmo dia): o ticket deve parecer, no início,
   uma peça ainda presa ao layout — reto, sem sombra, sem a segunda camada (via-carbono) — e
   só depois de um instante bem parado ele "se solta", em UM ÚNICO MOVIMENTO CONTÍNUO (sem
   etapas, sem overshoot/bounce/snap, sem recuo no meio) até a pose final: gira suavemente no
   mesmo sentido de sempre, eleva muito pouco, e a sombra/segunda camada surgem progressivamente
   junto. Por isso o @keyframes abaixo tem só 2 paradas (0%/100%) — qualquer parada
   intermediária é o que causava o pequeno recuo percebido na primeira versão. Chega à mesma
   posição/tamanho/inclinação/sombra finais de sempre (definidos em .ticket/.ticket-stack::before,
   acima) — aqui só descrevemos o CAMINHO até lá, nunca o destino. Acontece uma única vez ao
   carregar o Hero (a flutuação contínua de sempre, float-soft, começa só depois, encadeada na
   mesma declaração `animation` abaixo). Ver prefers-reduced-motion mais abaixo. */
:root {
  --ticket-peel-delay: 1350ms;
  --duration-ticket-peel: 850ms;
}
.ticket-stack[data-reveal="card"]::before {
  opacity: 0;
  transition: opacity var(--duration-ticket-peel) var(--ease-reveal-soft) var(--ticket-peel-delay);
}
.ticket-stack[data-reveal="card"].is-visible::before { opacity: 1; }

.ticket-stack[data-reveal="card"] .ticket {
  transform: rotate(0deg) translate(0, 4px);
  box-shadow: none;
}
@keyframes ticket-peel {
  0%   { transform: rotate(0deg) translate(0, 4px);   box-shadow: none; }
  100% { transform: rotate(-1.5deg) translate(0, 0);  box-shadow: var(--shadow-3); }
}
.ticket-stack[data-reveal="card"].is-visible .float-soft {
  animation:
    ticket-peel var(--duration-ticket-peel) var(--ease-reveal-soft) var(--ticket-peel-delay) both,
    float-soft 7s ease-in-out infinite calc(var(--ticket-peel-delay) + var(--duration-ticket-peel) + 200ms);
}

/* --- Cabeçalho: entrada suave no carregamento (nunca bloqueia interação — opacidade não
   desativa clique) --- */
@keyframes header-fade-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.header .logo { animation: header-fade-in .5s var(--ease-reveal-soft) both; }
.header .nav__list { animation: header-fade-in .5s var(--ease-reveal-soft) .08s both; }
.header .nav__cta { animation: header-fade-in .5s var(--ease-reveal-soft) .14s both; }
.header__actions { animation: header-fade-in .5s var(--ease-reveal-soft) .2s both; }
/* Header ao rolar: acrescenta uma sombra suave à transição já existente em system.css
   (border-color/background-color) — redeclara a lista inteira porque "transition" em CSS
   substitui, não soma, então as três propriedades ficam juntas aqui. */
.header { transition: border-color var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard); }
.header.is-scrolled { box-shadow: 0 1px 0 var(--color-border), var(--shadow-2); }

/* --- Cartões: hover-lift discreto (elevação + sombra), reaplicado ao .card de todo o site
   (serviços, prazos, por que escolher) --- */
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); border-color: var(--color-border-strong); }

/* --- Galeria de "Quem somos": zoom muito sutil no hover --- */
.about-panel__gallery img { transition: transform var(--duration-base) var(--ease-standard); }
.about-panel__gallery img:hover { transform: scale(1.03); }

/* --- Ícone do painel "Atendimento para empresas": pequena escala na entrada --- */
.business-panel__icon { transition-delay: 80ms; }

/* --- Botões: completa os estados :active que faltavam (primary já tinha, ver acima) --- */
.btn--secondary:active, .btn--ghost:active { transform: translateY(0) scale(.985); }

/* --- Botões do carrossel de avaliações: pequena escala no hover, além da borda/cor já
   existente em system.css --- */
.carousel-btn { transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.carousel-btn:hover { transform: scale(1.06); }

/* --- Números dos passos ("Como funciona"): pequena escala na entrada, sincronizada com o
   atraso do próprio item --- */
@keyframes number-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
.steps-d[data-reveal].is-visible .steps-d__item:nth-child(1) .steps-d__num { animation: number-pop var(--duration-reveal-slow) var(--ease-reveal-soft) calc(var(--stagger-step) * 0) both; }
.steps-d[data-reveal].is-visible .steps-d__item:nth-child(2) .steps-d__num { animation: number-pop var(--duration-reveal-slow) var(--ease-reveal-soft) calc(var(--stagger-step) * 1) both; }
.steps-d[data-reveal].is-visible .steps-d__item:nth-child(3) .steps-d__num { animation: number-pop var(--duration-reveal-slow) var(--ease-reveal-soft) calc(var(--stagger-step) * 2) both; }

/* --- Faixa de fabricantes: revisão de suavidade (ver seção 14 do briefing) — desacelera
   levemente o marquee (era 32s, ver acima) para uma leitura mais tranquila; hover/foco já
   pausava (system.css) e prefers-reduced-motion já era respeitado (regra própria abaixo,
   igual à já existente). Sem carrossel novo, sem alterar estrutura. */
.brand-marquee__track { animation-duration: 40s; }

/* --- WhatsApp flutuante: entrada única (fade + escala), sem pulso contínuo --- */
@keyframes wa-float-in { from { opacity: 0; transform: scale(.5) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.whatsapp-float { animation: wa-float-in .6s var(--ease-reveal-soft) 1.1s both; }

/* --- prefers-reduced-motion: reforço explícito além do corte global já existente em
   system.css (que já zera duração/iterações de toda animação/transição) — aqui garantimos
   que os elementos com animação contínua ou de entrada fiquem no estado final, nunca
   invisíveis nem "presos" a meio caminho. --- */
@media (prefers-reduced-motion: reduce) {
  .float-soft, .whatsapp-float, .header .logo, .header .nav__list, .header .nav__cta, .header__actions, .steps-d__num {
    animation: none;
    opacity: 1;
    transform: none;
  }
  /* Ticket do hero: precisa de um resultado próprio aqui (mais específico que a regra acima,
     que zera .float-soft para transform:none) — sem isso, reduced-motion deixaria o ticket
     reto/sem sombra para sempre, em vez da aparência final aprovada (inclinada, com sombra). */
  .ticket-stack[data-reveal="card"] .ticket,
  .ticket-stack[data-reveal="card"]::before {
    animation: none;
    transition: none;
  }
  .ticket-stack[data-reveal="card"] .ticket {
    transform: rotate(-1.5deg) translate(0, 0);
    box-shadow: var(--shadow-3);
  }
  .ticket-stack[data-reveal="card"]::before { opacity: 1; }
}