/* Refinamento visual D2/D3 do site institucional City Metal.
   Carregar depois de site.css; depende de tokens.css. Não altera markup ou conteúdo. */

:root {
  --bg: var(--cm-canvas);
  --surface: var(--cm-surface);
  --surface-2: var(--cm-surface-raised);
  --line: var(--cm-hairline);
  --line-forte: var(--cm-ink-subtle);
  --text: var(--cm-ink);
  --text-2: var(--cm-ink-muted);
  --text-3: var(--cm-ink-subtle);
  --acao: var(--cm-action);
  --acao-hover: var(--cm-action-hover);
  --foco: var(--cm-focus);
  --foco-anel: var(--cm-focus-ring);
  --red: var(--cm-action);
  --red-escuro: var(--cm-action-hover);
  --acao-texto: var(--cm-action);
  --campo-bg: var(--cm-surface);
  --largura: var(--cm-content-width);
  --gutter: var(--cm-gutter);
  --raio-card: var(--cm-radius-lg);
  --raio-btn: var(--cm-radius-pill);
  --corpo: var(--cm-font-body);
  --display: var(--cm-font-display);
  --sombra: var(--cm-shadow-none);
  --sombra-hover: var(--cm-shadow-none);
  --cta-bg: var(--cm-surface-dark);
  --rodape-bg: var(--cm-surface-dark-deep);
}

:root[data-theme="dark"] {
  --bg: var(--cm-canvas);
  --surface: var(--cm-surface);
  --surface-2: var(--cm-surface-raised);
  --line: var(--cm-hairline);
  --line-forte: var(--cm-ink-subtle);
  --text: var(--cm-ink);
  --text-2: var(--cm-ink-muted);
  --text-3: var(--cm-ink-subtle);
  --acao: var(--cm-action);
  --acao-hover: var(--cm-action-hover);
  --foco: var(--cm-focus);
  --foco-anel: var(--cm-focus-ring);
  --red: var(--cm-action);
  --red-escuro: var(--cm-action-hover);
  --acao-texto: var(--cm-action-on-dark);
  --campo-bg: var(--cm-surface-raised);
  --sombra: var(--cm-shadow-none);
  --sombra-hover: var(--cm-shadow-none);
  --cta-bg: var(--cm-surface-dark);
  --rodape-bg: var(--cm-surface-dark-deep);
}

html { scroll-padding-top: calc(var(--cm-nav-height) + var(--cm-space-3)); }

body {
  background: var(--cm-canvas);
  color: var(--cm-ink);
  font-family: var(--cm-font-body);
  font-size: var(--cm-type-body);
  line-height: var(--cm-leading-body);
  font-feature-settings: var(--cm-font-feature-settings);
}

.contem { max-width: var(--cm-content-width); padding-inline: var(--cm-gutter); }

h1, h2, h3 {
  color: var(--cm-ink);
  font-family: var(--cm-font-display);
  font-feature-settings: var(--cm-font-feature-settings);
  font-weight: var(--cm-weight-semibold);
  letter-spacing: var(--cm-tracking-title);
  line-height: var(--cm-leading-title);
  text-transform: none;
}
h1 { font-size: clamp(2.25rem, 5.2vw, var(--cm-type-display)); letter-spacing: var(--cm-tracking-display); }
h2 { font-size: clamp(1.8rem, 3.6vw, var(--cm-type-title-xl)); }
h3 { font-size: clamp(1.25rem, 2.1vw, var(--cm-type-title-sm)); }

.lead { max-width: 66ch; font-size: clamp(1.05rem, 1.6vw, var(--cm-type-body)); line-height: 1.55; }
.sobre-titulo { color: var(--cm-action); font: var(--cm-weight-semibold) var(--cm-type-caption)/1.35 var(--cm-font-body); letter-spacing: .08em; }
.sobre-titulo::before { content: none; }

.topo {
  --text: var(--cm-on-dark);
  --text-2: var(--cm-on-dark-muted);
  --line: var(--cm-hairline-dark);
  --red: var(--cm-action-on-dark);
  --acao-texto: var(--cm-action-on-dark);
}
.topo-fundo {
  background: var(--cm-glass-dark);
  border-color: var(--cm-hairline-dark);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topo-fundo { -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); }
}
.nav-gatilho, .nav-link, .topo-ico { min-height: var(--cm-touch-target); }
.nav-gatilho, .nav-link { border-radius: var(--cm-radius-pill); transition: color var(--cm-motion-fast) var(--cm-ease-standard), background-color var(--cm-motion-fast) var(--cm-ease-standard); }
.topo-cta { border-radius: var(--cm-radius-pill); }
.nav-caixa, .conta-caixa { box-shadow: 0 18px 48px rgb(0 0 0 / 20%); } /* taste-skill-ignore: menu e popover flutuantes */

.hero { border: 0; background: var(--cm-surface-dark-deep); }
.hero::after {
  background: linear-gradient(90deg, rgb(11 13 16 / 88%) 0%, rgb(11 13 16 / 56%) 52%, rgb(11 13 16 / 8%) 100%), /* taste-skill-ignore: scrim sobre foto para contraste */
    linear-gradient(0deg, rgb(11 13 16 / 66%) 0%, transparent 58%); /* taste-skill-ignore: scrim sobre foto para contraste */
}
.hero .contem { padding-block: clamp(72px, 12vh, 144px); }
.hero h1 { max-width: 15ch; background: none; color: var(--cm-on-dark); -webkit-text-fill-color: currentColor; }
.hero h1 em { color: var(--cm-action-on-dark); -webkit-text-fill-color: currentColor; }
.hero .lead { color: var(--cm-on-dark-muted); }

.secao { padding-block: var(--cm-section-space); }
.secao-alt { background: var(--cm-canvas-parchment); border: 0; }
.cabeca { max-width: 780px; margin-bottom: clamp(32px, 5vw, var(--cm-space-7)); }
.grade, .grade-2 { gap: var(--cm-grid-gap); }
.grade-5 { gap: var(--cm-grid-gap); }

.card, .galeria figure, .faq details, .painel-lateral, .foto, .etapas li {
  border: 0;
  border-radius: var(--cm-radius-md);
}
.card { background: var(--cm-surface); transition: border-color var(--cm-motion-standard) var(--cm-ease-standard), transform var(--cm-motion-standard) var(--cm-ease-standard); }
.card:hover { background: var(--cm-surface-raised); }
a.card:hover { transform: translateY(-2px); }
.card-corpo { padding: clamp(20px, 2.2vw, 30px); gap: var(--cm-space-2); }
.card h3 { margin-bottom: .2em; }
.card .mais, .mega-todos { color: var(--cm-action); font-family: var(--cm-font-body); font-weight: var(--cm-weight-semibold); letter-spacing: 0; text-transform: none; }
.card .mais::after { transition: transform var(--cm-motion-standard) var(--cm-ease-standard); }

.etapas { gap: var(--cm-space-2); }
.etapas li { padding: clamp(20px, 2.2vw, 30px); background: var(--cm-surface); }
.etapas li::before { color: var(--cm-action); font: var(--cm-weight-semibold) var(--cm-type-caption)/1.4 var(--cm-font-body); }
.etapas strong { font: var(--cm-weight-semibold) var(--cm-type-title-sm)/1.25 var(--cm-font-body); letter-spacing: var(--cm-tracking-title); text-transform: none; }
.etapas span { display: block; margin-top: var(--cm-space-2); color: var(--cm-ink-muted); }

.btn {
  min-height: var(--cm-touch-target);
  border-radius: var(--cm-radius-pill);
  font: var(--cm-weight-semibold) 1rem/1.2 var(--cm-font-body);
  letter-spacing: 0;
  transition: color var(--cm-motion-standard) var(--cm-ease-standard), background-color var(--cm-motion-standard) var(--cm-ease-standard), border-color var(--cm-motion-standard) var(--cm-ease-standard), transform var(--cm-motion-fast) var(--cm-ease-standard);
}
.btn-pri, .filtros button[aria-pressed="true"] { background: var(--cm-action); border-color: var(--cm-action); color: var(--cm-on-action); }
.btn-pri:hover, .filtros button[aria-pressed="true"]:hover { background: var(--cm-action-hover); border-color: var(--cm-action-hover); }
.btn-sec { color: var(--cm-ink); border-color: var(--cm-hairline); }
.btn-sec:hover { color: var(--cm-action); border-color: var(--cm-action); background: var(--cm-surface); }
.btn-whats { background: #18763f; color: #fff; }
.btn-whats:hover { background: #135f32; }
.btn-pri:active, .btn-sec:active { transform: scale(var(--cm-press-scale)); }

.cta-faixa { background: var(--cm-surface-dark); border: 0; color: var(--cm-on-dark); }
.cta-faixa h2 { color: var(--cm-on-dark); }
.cta-faixa .contem { padding-block: clamp(48px, 7vw, 80px); }

.filtros button {
  min-height: var(--cm-touch-target);
  padding-inline: var(--cm-space-4);
  border-color: var(--cm-hairline);
  border-radius: var(--cm-radius-pill);
  font-family: var(--cm-font-body);
  transition: color var(--cm-motion-fast) var(--cm-ease-standard), background-color var(--cm-motion-fast) var(--cm-ease-standard), border-color var(--cm-motion-fast) var(--cm-ease-standard);
}
.galeria figure { background: var(--cm-surface); }
.galeria figcaption { color: var(--cm-ink-muted); }
.faq details { background: var(--cm-surface); }
.faq summary { min-height: var(--cm-touch-target); }
.faq summary::after { color: var(--cm-action); }

.campo input, .campo select, .campo textarea {
  border-color: var(--cm-hairline);
  border-radius: var(--cm-radius-sm);
  background: var(--cm-surface);
  color: var(--cm-ink);
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--cm-action); box-shadow: 0 0 0 3px var(--cm-focus-ring); } /* taste-skill-ignore: anel funcional de foco do formulário */
.painel-lateral { background: var(--cm-surface); }
.documento-legal { max-width: var(--cm-reading-width); }
.documento-legal h2 { color: var(--cm-ink); }
.documento-legal a { color: var(--cm-action); }

:root[data-theme="dark"] .sobre-titulo,
:root[data-theme="dark"] .card .mais,
:root[data-theme="dark"] .mega-todos,
:root[data-theme="dark"] .etapas li::before,
:root[data-theme="dark"] .faq summary::after,
:root[data-theme="dark"] .btn-sec:hover,
:root[data-theme="dark"] .documento-legal a {
  color: var(--cm-action-on-dark);
}
:root[data-theme="dark"] .btn-sec:hover { border-color: var(--cm-action-on-dark); }

/* Contornos de controles precisam se destacar da superfície escura. */
:root[data-theme="dark"] :is(.btn-sec, .filtros button, .campo input, .campo select, .campo textarea) {
  border-color: var(--cm-ink-subtle);
}

/* A regra legacy de foco dos campos remove o outline; restaura um indicador nítido para teclado. */
.campo :is(input, select, textarea):focus-visible {
  outline: 3px solid var(--cm-focus);
  outline-offset: 2px;
  box-shadow: none; /* taste-skill-ignore: o outline acessível substitui a sombra no foco visível */
}

.rodape { background: var(--cm-surface-dark-deep); border: 0; color: var(--cm-on-dark-muted); }
.rodape h2 { color: var(--cm-on-dark); font: var(--cm-weight-semibold) var(--cm-type-caption)/1.4 var(--cm-font-body); letter-spacing: .04em; }
.rodape a:hover, .rodape a:focus-visible { color: var(--cm-on-dark); }
.rodape-base { border-color: var(--cm-hairline-dark); }

:focus-visible { outline: 3px solid var(--cm-focus); outline-offset: 3px; }
.topo :is(a, button):focus-visible, .sheet :is(a, button):focus-visible { outline-color: var(--cm-action-on-dark); }

@media (max-width: 640px) {
  .hero { min-height: min(78vh, 680px); }
  .hero::after { background: linear-gradient(90deg, rgb(11 13 16 / 82%), rgb(11 13 16 / 42%)), /* taste-skill-ignore: scrim sobre foto para contraste */ linear-gradient(0deg, rgb(11 13 16 / 68%), transparent 68%); /* taste-skill-ignore: scrim sobre foto para contraste */ }
  .hero .contem { padding-block: 64px; }
  .secao { padding-block: var(--cm-section-space); }
  .card-corpo { padding: 20px; }
  .cta-faixa .contem { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card, .btn, .nav-gatilho, .nav-link, .filtros button, .card .mais::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  a.card:hover, .btn:hover, .btn:active { transform: none; }
}

/* Navegação local das páginas de serviço; mantém o cabeçalho global acima. */
.cm-service-nav {
  position: sticky;
  top: var(--topo-h, 72px);
  z-index: 40;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  background: var(--cm-surface);
  color: var(--text, #171a1d);
}
.cm-service-nav:focus-visible {
  outline: 3px solid var(--foco, #d2001f);
  outline-offset: -3px;
}
.cm-service-nav__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1.4vw, 20px);
  width: max-content;
  min-width: 100%;
  min-height: 56px;
  padding-block: 6px;
}
.cm-service-nav a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 999px;
  color: inherit;
  font: 500 .92rem/1.25 var(--corpo, system-ui, sans-serif);
  text-decoration: none;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: color .16s ease, background-color .16s ease;
}
.cm-service-nav a:hover { color: var(--acao, #d2001f); background: rgb(210 0 31 / 7%); }
.cm-service-nav a:focus-visible {
  outline: 3px solid var(--foco, #d2001f);
  outline-offset: 1px;
}
.cm-service-nav .cm-service-nav__cta {
  color: var(--acao, #d2001f);
  font-weight: 650;
}
.cm-service-nav ~ section :is(h1, h2, h3)[id] {
  scroll-margin-top: calc(var(--topo-h, 72px) + 56px + 16px);
}
:root[data-theme="dark"] .cm-service-nav {
  background: rgb(19 22 26 / 94%);
  border-color: #343b42;
  color: #eef1f4;
}
:root[data-theme="dark"] .cm-service-nav a:hover { background: rgb(255 102 115 / 12%); }
:root[data-theme="dark"] .cm-service-nav .cm-service-nav__cta { color: #ff7b86; }
@media (max-width: 640px) {
  .cm-service-nav { scroll-snap-type: x proximity; }
  .cm-service-nav__inner { justify-content: flex-start; gap: 4px; padding-inline: 12px; }
  .cm-service-nav a { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .cm-service-nav a { scroll-behavior: auto; transition: none; }
}

/* Mantém a navegação local utilizável quando o conteúdo não cabe no viewport. */
.cm-service-nav { max-width: 100%; }
.cm-service-nav__inner { box-sizing: border-box; }
@media (max-width: 760px) {
  .cm-service-nav__inner { justify-content: flex-start; }
}
@media (max-width: 360px) {
  .cm-service-nav__inner { gap: 2px; padding-inline: 8px; }
  .cm-service-nav a { padding-inline: 10px; font-size: .875rem; }
}

/* Preserva foco e separação visual em modos de alto contraste do sistema. */
@media (forced-colors: active) {
  .cm-service-nav {
    background: Canvas;
    border-color: CanvasText;
    color: CanvasText;
  }
  .cm-service-nav :is(a, a:hover, .cm-service-nav__cta) {
    color: LinkText;
    background: transparent;
  }
  :focus-visible,
  .cm-service-nav:focus-visible,
  .cm-service-nav a:focus-visible {
    outline-color: Highlight;
  }
}