/* =====================================================================
   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));
  background: var(--color-surface); border: 1.5px dashed 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 {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: var(--radius-full);
  background: var(--color-surface-alt); color: var(--color-text-muted);
}
.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--pending .review-card__pending-label {
  font-size: var(--text-sm); color: var(--color-text-muted); font-style: italic;
}

.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__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; }

/* --- 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; }

/* ===================== 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; }
}