/* Controles e estados */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-min); max-width: 100%; padding: var(--space-3) var(--space-5);
  border: var(--border-width) solid currentColor; border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: var(--font-size-button); font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-interface); text-align: center; text-decoration: none;
  white-space: normal; cursor: pointer; background: transparent; color: inherit;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.btn--primary { background: var(--color-primary); border-color: var(--color-primary-hover); color: var(--color-on-primary); }
.btn--secondary, .btn--outline-dark { border-color: var(--color-text-muted); color: inherit; }
.btn--outline-light { border-color: var(--color-muted-on-dark); color: var(--color-on-dark); }
.btn--text { border-color: transparent; color: var(--color-link); padding-inline: var(--space-2); text-decoration: underline; text-underline-offset: 0.2em; }
.btn--sm { padding-inline: var(--space-4); }
.btn--lg { min-height: 3.5rem; padding-inline: var(--space-6); }
.theme-dark .btn--secondary { border-color: var(--color-muted-on-dark); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--color-disabled-bg); color: var(--color-disabled-text);
  border-color: var(--color-disabled-text); cursor: not-allowed; transform: none;
}
@media (hover: hover) {
  .btn--primary:hover:not(:disabled) { background: var(--color-primary-hover); }
  .btn--secondary:hover:not(:disabled), .btn--outline-dark:hover:not(:disabled) { background: var(--color-primary-soft); color: var(--color-text); }
  .btn--outline-light:hover:not(:disabled), .theme-dark .btn--secondary:hover:not(:disabled) { background: var(--color-dark-secondary); color: var(--color-white); }
  .btn--text:hover:not(:disabled) { color: var(--color-link-hover); text-decoration-thickness: 0.15em; }
}
.link { color: var(--color-link); font-weight: var(--font-weight-semibold); }
.link:hover { color: var(--color-link-hover); text-decoration-thickness: 0.15em; }
.icon { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 1rem; height: 1rem; }
.icon--md { width: 1.25rem; height: 1.25rem; }
.icon--lg { width: 2rem; height: 2rem; }
.whatsapp-icon {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  object-fit: contain;
  filter: brightness(0) saturate(100%);
}
.btn--outline-light .whatsapp-icon { filter: brightness(0) invert(1); }
.icon-accent { color: var(--color-link); }
.icon-text { display: flex; align-items: flex-start; gap: var(--space-3); }
.badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); background: var(--color-primary-soft); color: var(--color-success); font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); }
.badge--pill { border-radius: var(--radius-pill); }
.divider { width: 100%; margin: 0; border: 0; border-block-start: var(--border-default); }
.theme-dark .divider { border-color: var(--color-border-dark); }
.eyebrow { display: flex; align-items: center; gap: var(--space-2); color: var(--color-link); }
.eyebrow::before { content: ""; width: 0.5rem; height: 0.75rem; background: var(--color-primary); transform: skew(-32deg); flex: 0 0 auto; }
.brand-line { width: 3rem; height: 2px; background: var(--color-primary); }
.accent-border { border-inline-start: 3px solid var(--color-primary); padding-inline-start: var(--space-4); }
.section-heading { display: grid; gap: var(--space-4); }
.section-heading > * { margin-block: 0; }
/* Marca fornecida: nunca filtrar, redesenhar ou aplicar efeitos. */
.brand { display: block; width: clamp(10rem, 20vw, 14rem); height: auto; }
.brand-protection { display: inline-flex; padding: var(--space-6); }
.brand--header { width: 10rem; }
.brand--footer { width: 12rem; }
/* Cards */
.card { min-width: 0; overflow: hidden; background: var(--color-white); color: var(--color-text); border: var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard); }
.card__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--card-padding); }
.card__body > * { margin-block: 0; }
.card__title { font-size: var(--font-size-h4); }
.card__description { font-size: var(--font-size-small); color: var(--color-text-muted); }
.card__action { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; color: var(--color-link); font-weight: var(--font-weight-semibold); }
.card__media { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card--project .card__media { aspect-ratio: 3 / 2; }
.card--engineering { background: var(--color-dark-secondary); color: var(--color-on-dark); border: var(--border-on-dark); }
.card--engineering .card__description { color: var(--color-muted-on-dark); }
.card--engineering .icon-accent { color: var(--color-focus-dark); }
@media (hover: hover) {
  .card:hover, .card:focus-within { transform: translateY(-3px); box-shadow: var(--shadow-md); }
}
/* Formulários: mensagens textuais acompanham os estados de validação. */
.field { display: grid; gap: var(--space-2); }
.field__label { font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); }
.input, .textarea, .select {
  width: 100%; min-width: 0; min-height: var(--control-min); padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-text-muted); border-radius: var(--radius-md);
  background: var(--color-white); color: var(--color-text); font-size: var(--font-size-body);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.textarea { min-height: 9rem; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--color-text-muted); opacity: 1; }
.input[aria-invalid="true"] { border-color: var(--color-error); border-width: 2px; }
.input:disabled { background: var(--color-disabled-bg); color: var(--color-disabled-text); cursor: not-allowed; }
.field__message { margin: 0; font-size: var(--font-size-small); color: var(--color-text-muted); }
.field__message--error { color: var(--color-error); }
.field__message--success { color: var(--color-success); }
.field--success .input { border-color: var(--color-success); border-width: 2px; }
.theme-dark .input, .theme-dark .textarea, .theme-dark .select { --color-text-muted: var(--color-text-muted-on-light); }
.contact-item { display: flex; align-items: center; gap: var(--space-3); min-height: 2.75rem; color: inherit; }
.nav-indicator { display: inline-flex; align-items: center; min-height: 2.75rem; padding: var(--space-2); text-decoration: none; border-block-end: 3px solid transparent; }
.nav-indicator[aria-current] { border-color: var(--color-primary); font-weight: var(--font-weight-bold); }
/* Imagens: usar width/height reais e lazy loading abaixo da primeira dobra. */
.media { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--media-position, center); }
.media--facade, .media--store, .media--institutional { aspect-ratio: 16 / 9; }
.media--materials { aspect-ratio: 4 / 3; }
.media--engineering { aspect-ratio: 3 / 4; }
.media--residential, .media--commercial { aspect-ratio: 3 / 2; }
.media--rounded { border-radius: var(--radius-xl); overflow: hidden; }
.media--contain { object-fit: contain; }
.media--original { aspect-ratio: auto; object-fit: contain; }
.media--full { width: 100%; }
.media-composition { display: grid; position: relative; isolation: isolate; overflow: hidden; }
.media-composition::after { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--color-overlay); pointer-events: none; }
.media-composition--lateral::after { background: linear-gradient(90deg, var(--color-overlay), var(--color-overlay-fade)); }
.media-composition__content { position: relative; z-index: 1; padding: var(--space-6); color: var(--color-on-dark); }
.media-composition > .media, .media-composition > .media-composition__content { grid-area: 1 / 1; }
.media-composition > .media-composition__content { align-self: end; }
.overlay { background: var(--color-overlay); color: var(--color-on-dark); }
/* Revelação opt-in, visível por padrão e independente de JavaScript. */
.reveal { animation: reveal-in var(--duration-slow) var(--ease-standard) both; }
@keyframes reveal-in { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }
.expandable { border: var(--border-default); border-radius: var(--radius-lg); padding: var(--space-5); }
.expandable > summary { min-height: 2.75rem; cursor: pointer; font-weight: var(--font-weight-semibold); }
.expandable[open] > summary { margin-block-end: var(--space-4); }