/* ============================================================
   COMPONENTS — botões, header, mobile menu, cards, form, FAQ,
                footer, fab. Estilos por-seção ficam em sections.css.
   ============================================================ */

/* ============================================================
   1. BOTÕES
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: 44px;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--text-base);
  line-height: 1.1;
  border-radius: var(--radius-sm);
  text-align: center;
  touch-action: manipulation;
  transition:
    transform var(--duration-fast) var(--ease-out-expo),
    background-color var(--duration-fast),
    color var(--duration-fast),
    box-shadow var(--duration-fast);
}
.btn__icon { flex: none; inline-size: 1.25em; block-size: 1.25em; }
.btn__arrow { transition: transform var(--duration-fast) var(--ease-out-expo); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* 1a. Primário — WhatsApp */
.btn--primary {
  background: var(--cta);
  color: var(--cta-fg);
}
.btn--primary:hover {
  background: var(--cta-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn--primary:active {
  background: var(--cta-press);
  transform: translateY(0) scale(0.98);
}
.btn--primary:disabled,
.btn--primary[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* 1b. Secundário — inversão */
.btn--secondary {
  background: transparent;
  border: 1.5px solid var(--brand);
  color: var(--brand);
}
.btn--secondary:hover {
  background: var(--brand);
  color: var(--white);
  transform: translateY(-1px);
}
.btn--secondary:active { transform: scale(0.98); }
/* Sobre seção escura */
.section--deep .btn--secondary {
  border-color: var(--white);
  color: var(--white);
}
.section--deep .btn--secondary:hover {
  background: var(--white);
  color: var(--brand);
}

/* 1c. Ghost / link */
.btn--ghost {
  padding-inline: 0;
  min-block-size: 44px;
  background: none;
  color: var(--fg);
  gap: var(--space-2);
}
.btn--ghost:hover { color: var(--cta); }
.btn--ghost:active { transform: scale(0.98); }

/* CTA full-width em blocos de conversão no mobile */
.btn--block { inline-size: 100%; }

/* ============================================================
   2. HEADER (sticky)
   ============================================================ */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  transition:
    background-color var(--duration-normal) var(--ease-out-expo),
    box-shadow var(--duration-normal) var(--ease-out-expo);
}
.header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-block-size: var(--header-h-top);
  transition: min-block-size var(--duration-normal) var(--ease-out-expo);
}
.header__logo {
  display: flex;
  align-items: center;
  flex: none;
  margin-inline-end: auto;
}
.header__logo img { inline-size: clamp(124px, 13vw, 176px); block-size: auto; }

/* Logo: por padrão sobre o hero bordô → branca. Troca para colorida quando sólido. */
.header__logo .logo--light { display: block; }
.header__logo .logo--color { display: none; }

.header__nav { display: none; }
.header__nav a {
  position: relative;
  color: var(--fg-on-deep-muted);
  font-weight: var(--fw-medium);
  font-size: var(--text-base);
  padding-block: var(--space-2);
  transition: color var(--duration-fast);
}
.header__nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 2px;
  background: var(--cta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-fast) var(--ease-out-expo);
}
.header__nav a:hover { color: var(--fg-on-deep); }
.header__nav a:hover::after,
.header__nav a[aria-current="true"]::after { transform: scaleX(1); }
.header__nav a[aria-current="true"] {
  color: var(--fg-on-deep);
  font-weight: var(--fw-semi);
}

.header__cta { display: none; flex: none; }

/* Link para a Carloman Comunicação Visual (site principal) */
.header__cv {
  display: none;
  align-items: center;
  gap: var(--space-2);
  flex: none;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-on-deep-muted);
  transition: color var(--duration-fast);
}
.header__cv svg { inline-size: 14px; block-size: 14px; }
.header__cv:hover { color: var(--white); }

.header__burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  inline-size: 44px;
  block-size: 44px;
  flex: none;
  padding: 10px;
}
.header__burger span {
  display: block;
  block-size: 2px;
  inline-size: 100%;
  background: var(--white);
  border-radius: 2px;
  transition: background-color var(--duration-fast);
}

/* Estado SÓLIDO (após scroll) — barra inteira em bordô, logo e nav brancos */
.site-header[data-state="solid"] {
  background: var(--surface-deep);
  box-shadow: 0 1px 0 var(--border-on-deep), 0 8px 24px -16px oklch(0% 0 0 / 0.5);
}
.site-header[data-state="solid"] .header__inner { min-block-size: var(--header-h); }
/* logo permanece branca (fundo bordô) */
.site-header[data-state="solid"] .header__logo .logo--light { display: block; }
.site-header[data-state="solid"] .header__logo .logo--color { display: none; }
.site-header[data-state="solid"] .header__nav a { color: var(--fg-on-deep-muted); }
.site-header[data-state="solid"] .header__nav a:hover,
.site-header[data-state="solid"] .header__nav a[aria-current="true"] { color: var(--white); }
.site-header[data-state="solid"] .header__burger span { background: var(--white); }

@media (min-width: 1024px) {
  .header__nav {
    display: flex;
    align-items: center;
    gap: var(--space-6);
  }
  .header__cta { display: inline-flex; }
  .header__cv { display: inline-flex; }
  .header__burger { display: none; }
}

/* ============================================================
   2-bis. MOBILE MENU (overlay)
   ============================================================ */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
}
.mobile-menu__scrim {
  position: absolute;
  inset: 0;
  background: oklch(21% 0.08 22 / 0.6);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out-expo);
}
.mobile-menu__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: var(--z-menu);
  inline-size: min(86vw, 360px);
  background: var(--surface-deep);
  color: var(--fg-on-deep);
  padding: calc(var(--header-h-top) + var(--space-5)) var(--gutter) var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  transform: translateX(100%);
  transition: transform var(--duration-normal) var(--ease-out-expo);
  overflow-y: auto;
}
.mobile-menu[data-open="true"] .mobile-menu__scrim { opacity: 1; }
.mobile-menu[data-open="true"] .mobile-menu__panel { transform: translateX(0); }
.mobile-menu__panel a:not(.btn) {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-on-deep);
  padding-block: var(--space-2);
  min-block-size: 44px;
  display: flex;
  align-items: center;
}
/* Link Comunicação Visual no menu mobile — secundário, com seta */
.mobile-menu__panel a.mobile-menu__cv {
  font-family: var(--font-body);
  text-transform: none;
  font-size: var(--text-base);
  font-weight: var(--fw-semi);
  letter-spacing: 0;
  gap: var(--space-2);
  color: var(--fg-on-deep-muted);
  padding-block-start: var(--space-4);
  margin-block-start: var(--space-3);
  border-block-start: 1px solid var(--border-on-deep);
}
.mobile-menu__cv svg { inline-size: 16px; block-size: 16px; flex: none; }
.mobile-menu__cta { margin-block-start: var(--space-5); }
@media (min-width: 1024px) {
  .mobile-menu { display: none; }
}

/* ============================================================
   3. CARD DE MÍDIA
   ============================================================ */
.media-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
.media-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  overflow: hidden;             /* clipa a imagem full-bleed no raio do card */
  background: var(--surface);
  color: var(--fg); /* card é superfície clara: texto sempre escuro, mesmo em section--deep */
  text-align: left; /* ficha técnica permanece à esquerda (legibilidade tabular) */
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition:
    background-color var(--duration-normal) var(--ease-out-expo),
    color var(--duration-normal) var(--ease-out-expo);
}
/* Foto do modelo — full-bleed no topo do card */
.media-card__media {
  margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-2);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--moon);
}
.media-card__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out-expo);
}
.media-card:hover .media-card__media img,
.media-card:focus-within .media-card__media img { transform: scale(1.04); }
.media-card__index {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--moon);
  letter-spacing: var(--tracking-tight);
  transition: color var(--duration-normal);
}
.media-card__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--text-xl);
  color: var(--brand);
  letter-spacing: var(--tracking-tight);
  transition: color var(--duration-normal);
}
.media-card__desc {
  font-size: var(--text-sm);
  color: var(--fg-muted);
  line-height: var(--leading-snug);
  transition: color var(--duration-normal);
}
/* Specs como ficha técnica tabular */
.media-card__specs { display: grid; gap: 0; margin-block: var(--space-2); }
.media-card__specs > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-block-start: 1px solid var(--border);
  transition: border-color var(--duration-normal);
}
.media-card__specs dt {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-muted);
  transition: color var(--duration-normal);
}
.media-card__specs dd {
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.media-card__cta { margin-block-start: auto; }
.media-card__cta.btn--ghost::after {
  content: "→";
  transition: transform var(--duration-fast) var(--ease-out-expo);
}
.media-card__cta.btn--ghost:hover::after { transform: translateX(4px); }

/* Status de disponibilidade (verde semântico) */
.media-card__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  color: var(--status-ok-fg);
  transition: color var(--duration-normal);
}
.media-card__status::before {
  content: "";
  inline-size: 9px; block-size: 9px;
  border-radius: var(--radius-pill);
  background: var(--status-ok);
  flex: none;
}

/* Hover de inversão (interação-assinatura) */
.media-card:hover,
.media-card:focus-within {
  background: var(--brand);
  border-color: var(--brand);
}
.media-card:hover .media-card__title,
.media-card:focus-within .media-card__title,
.media-card:hover .media-card__index,
.media-card:focus-within .media-card__index { color: var(--white); }
.media-card:hover .media-card__desc,
.media-card:focus-within .media-card__desc,
.media-card:hover .media-card__specs dt,
.media-card:focus-within .media-card__specs dt { color: var(--moon); }
.media-card:hover .media-card__specs dd,
.media-card:focus-within .media-card__specs dd { color: var(--white); }
.media-card:hover .media-card__specs > div,
.media-card:focus-within .media-card__specs > div { border-color: var(--border-on-deep); }
.media-card:hover .media-card__status,
.media-card:focus-within .media-card__status { color: var(--status-ok-on-deep); }
.media-card:hover .media-card__cta,
.media-card:focus-within .media-card__cta { color: var(--white); }
.media-card:active { transform: scale(0.99); }

/* Badge "+ procurado" */
.badge--popular {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-end: var(--space-4);
  padding: var(--space-1) var(--space-3);
  background: var(--cta);
  color: var(--cta-fg);
  font-size: var(--text-label);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
}

@media (min-width: 768px) {
  .media-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  /* 3 formatos (Front Light + Outdoor + Sob medida) */
  .media-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   8. FAQ (acordeão nativo <details>/<summary>)
   ============================================================ */
.faq { max-inline-size: var(--measure-max); }
.faq__item { border-block-end: 1px solid var(--border); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-block-size: 44px;
  padding-block: var(--space-5);
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--text-lg);
  color: var(--brand);
  cursor: pointer;
  list-style: none;
  transition: color var(--duration-fast);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--cta); }
.faq__icon {
  position: relative;
  flex: none;
  inline-size: 20px; block-size: 20px;
}
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  inset-block-start: 50%; inset-inline-start: 50%;
  background: currentColor;
  transition: transform var(--duration-normal) var(--ease-out-expo);
}
.faq__icon::before { inline-size: 16px; block-size: 2px; transform: translate(-50%, -50%); }
.faq__icon::after  { inline-size: 2px; block-size: 16px; transform: translate(-50%, -50%); }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__a {
  padding-block-end: var(--space-5);
  color: var(--fg-muted);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  max-inline-size: var(--measure);
}

/* ============================================================
   9. FORMULÁRIO (lead-form)
   ============================================================ */
.lead-form { display: grid; gap: var(--space-5); }
.field { display: grid; gap: var(--space-2); }
.field label {
  font-weight: var(--fw-semi);
  font-size: var(--text-sm);
}
.field input, .field textarea {
  inline-size: 100%;
  min-block-size: 44px;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  color: var(--ink);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xs);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.field textarea { resize: vertical; min-block-size: 96px; }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-muted); opacity: 0.7; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--cta);
  box-shadow: 0 0 0 3px oklch(59.3% 0.234 28.1 / 0.18);
}
.field__hint { font-size: var(--text-sm); color: var(--fg-muted); }
.field__error { font-size: var(--text-sm); color: var(--danger); font-weight: var(--fw-semi); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: var(--danger);
}
/* Form sobre seção escura: labels/hints claros */
.section--deep .field label { color: var(--fg-on-deep); }
.section--deep .field__hint { color: var(--fg-on-deep-muted); }
.section--deep .field__error { color: var(--moon); }

.lead-form__alt { font-size: var(--text-sm); color: var(--fg-muted); }
.section--deep .lead-form__alt { color: var(--fg-on-deep-muted); }
.lead-form__alt a { color: var(--cta); font-weight: var(--fw-semi); text-decoration: underline; }
.section--deep .lead-form__alt a { color: var(--white); }

/* Estado de sucesso */
.form-success {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-6);
  border: 1.5px solid var(--status-ok);
  border-radius: var(--radius-sm);
  background: oklch(71.5% 0.229 144.5 / 0.08);
}
.form-success__check {
  flex: none;
  inline-size: 28px; block-size: 28px;
  border-radius: var(--radius-pill);
  background: var(--status-ok);
  color: var(--white);
  display: grid;
  place-items: center;
  font-weight: var(--fw-bold);
}
.form-success p { color: var(--fg-on-deep); }
.form-success a { color: var(--white); text-decoration: underline; font-weight: var(--fw-semi); }

/* Spinner do botão loading */
.btn__spinner {
  inline-size: 1.1em; block-size: 1.1em;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: var(--radius-pill);
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn__spinner { animation: none; }
}

@media (min-width: 768px) {
  .lead-form { grid-template-columns: 1fr 1fr; }
  .field--full, .lead-form__submit, .lead-form__alt { grid-column: 1 / -1; }
}

/* ============================================================
   10. CTA FLUTUANTE (fab-whatsapp)
   ============================================================ */
.fab-whatsapp {
  position: fixed;
  z-index: var(--z-fab);
  inset-block-end: max(var(--space-5), env(safe-area-inset-bottom));
  inset-inline-end: var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: 56px;
  min-inline-size: 56px;
  padding: var(--space-3) var(--space-5);
  background: var(--cta);
  color: var(--cta-fg);
  border-radius: var(--radius-pill);
  font-weight: var(--fw-semi);
  box-shadow: var(--shadow-lg);
  touch-action: manipulation;
  opacity: 0;
  transform: translateY(12px) scale(0.92);
  pointer-events: none;
  transition:
    opacity var(--duration-normal) var(--ease-out-expo),
    transform var(--duration-normal) var(--ease-out-expo),
    background-color var(--duration-fast);
}
.fab-whatsapp[data-visible="true"] {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.fab-whatsapp:hover {
  background: var(--cta-hover);
  transform: translateY(-2px) scale(1);
  box-shadow: var(--shadow-lg), var(--shadow-md);
}
.fab-whatsapp:active { transform: scale(0.96); }
.fab-whatsapp__icon { flex: none; inline-size: 28px; block-size: 28px; }
.fab-whatsapp__label { display: none; }
@media (min-width: 768px) {
  .fab-whatsapp { padding-inline: var(--space-5) var(--space-6); }
  .fab-whatsapp__label { display: inline; }
}

/* ============================================================
   11. FOOTER — RODAPÉ PADRÃO CARLOMAN
   Estrutura única do grupo (base: Linha Parceiros / chrome.css da Home),
   adequada à ID visual da OOH via tokens on-deep (bordô 950 + moon).
   5 colunas: Marca · Navegação · Contato · Endereço · Redes + barra inferior.
   ============================================================ */
.site-footer {
  background: var(--surface-deep-2);
  color: var(--fg-on-deep);
  /* Base folgada: o FAB do WhatsApp é fixed (56px + 24px do fundo) e, com a
     página rolada até o fim, cobriria a barra inferior. O respiro deixa ele
     flutuar em espaço vazio em vez de cima da frase de impacto. */
  padding-block: var(--space-8) var(--space-9);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}

/* --- Coluna 1: marca --------------------------------------------------- */
.footer__brand img { inline-size: clamp(180px, 24vw, 260px); block-size: auto; }
.footer__tagline {
  margin-block-start: var(--space-4);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-on-deep-muted);
  max-inline-size: 16ch;
}
.footer__kicker {
  margin-block-start: var(--space-3);
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-weight: var(--fw-bold);
  color: var(--moon);
}

/* --- Títulos de coluna ------------------------------------------------- */
/* Eyebrow do standard (bolinha 6px + 14px + tracking .14em). A cor fica em
   moon, não na alternância vermelho/verde do Parceiros: sobre bordô o verde
   perde contraste e o vermelho é reservado a ação no design system da OOH. */
.footer__col h3 {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-on-deep-muted);
  margin-block-end: var(--space-4);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
}
.footer__col h3::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: var(--radius-pill);
  background: currentColor;
  flex-shrink: 0;
}
.footer__col ul { display: grid; gap: var(--space-3); }
.footer__col a, .footer__col address {
  color: var(--moon);
  font-style: normal;
  line-height: var(--leading-snug);
  transition: color var(--duration-fast);
}
.footer__col a:hover { color: var(--white); text-decoration: underline; }

/* --- Coluna 3: contato (dots de status) -------------------------------- */
.footer__contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: var(--fw-semi);
  color: var(--fg-on-deep);
}
.footer__contact-soft {
  font-weight: var(--fw-book) !important;
  font-size: var(--text-sm);
  color: var(--moon) !important;
}
.footer__dot {
  inline-size: 0.45rem;
  block-size: 0.45rem;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.footer__dot--green { background: var(--status-ok); }
.footer__dot--red { background: var(--cta); }

/* --- Coluna 4: endereço ------------------------------------------------ */
.footer__addr {
  font-style: normal;
  line-height: var(--leading-body);
  color: var(--fg-on-deep);
}
.footer__addr-soft { color: var(--moon); font-size: var(--text-sm); }

/* --- Coluna 5: redes --------------------------------------------------- */
/* Seletor com a coluna junto para vencer o `.footer__col ul { display: grid }`
   acima — senão as pills empilham na vertical. */
.footer__col ul.footer__social {
  display: flex;
  gap: var(--space-2);
  margin-block-end: 0.65rem;
}
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-on-deep);
  transition:
    background var(--duration-fast) var(--ease-out-soft),
    color var(--duration-fast) var(--ease-out-soft),
    border-color var(--duration-fast) var(--ease-out-soft),
    transform var(--duration-fast) var(--ease-out-soft);
}
.footer__social a:hover { text-decoration: none; transform: translateY(-2px); }
/* Sobre bordô, o ícone vira a cor do fundo no hover (o inverso do padrão claro). */
.footer__social-ig { color: var(--cta); }
.footer__social-ig:hover { background: var(--cta); color: var(--surface-deep-2); border-color: var(--cta); }
.footer__social-fb { color: var(--moon); }
.footer__social-fb:hover { background: var(--moon); color: var(--surface-deep-2); border-color: var(--moon); }
.footer__social-wa { color: var(--status-ok); }
.footer__social-wa:hover { background: var(--status-ok); color: var(--surface-deep-2); border-color: var(--status-ok); }
.footer__handle {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--fg-on-deep);
}

/* --- Barra inferior: copyright + frase de impacto + tag Antimatter ----- */
.footer__bottom {
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--border-on-deep);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4) var(--space-5);
}
.footer__copy,
.footer__impact {
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: var(--fw-semi);
  color: var(--moon);
}
.footer__copy {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.footer__copy strong { color: var(--cta); font-weight: var(--fw-bold); }
.footer__copy a {
  color: var(--moon);
  border-block-end: 1px solid transparent;
  transition: color var(--duration-fast), border-color var(--duration-fast);
}
.footer__copy a:hover { color: var(--white); border-block-end-color: currentColor; text-decoration: none; }

@media (min-width: 768px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1.2fr; }
}
@media (min-width: 1024px) {
  .footer__grid { grid-template-columns: 1.6fr 0.9fr 1.2fr 1.2fr 1fr; }
}
@media (max-width: 720px) {
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   12. TAG ANTIMATTER — crédito discreto no rodapé
   O SVG pinta as formas com gradientes radiais brancos, então currentColor
   não pega. Usado como máscara: lê o alfa e a cor vem do background —
   monocromático com o rodapé em qualquer superfície, sem editar o arquivo.
   ============================================================ */
.antimatter-tag {
  display: inline-block;
  inline-size: 140px;
  aspect-ratio: 937.85 / 145.24;
  background-color: currentColor;
  color: var(--moon);
  -webkit-mask: url("../assets/logos/tag-by-antimatter.svg") center / contain no-repeat;
          mask: url("../assets/logos/tag-by-antimatter.svg") center / contain no-repeat;
  opacity: 0.38;
  transition: opacity var(--duration-fast) var(--ease-out-soft);
}
.antimatter-tag:hover,
.antimatter-tag:focus-visible { opacity: 0.8; }
/* Centralizada no vão entre o copyright e a frase de impacto: os dois autos
   dividem o espaço livre em partes iguais. Não vai no canto direito porque o
   FAB do WhatsApp é fixed e cobre ali com a página rolada até o fim.
   Só acima de 720px — abaixo disso a barra empilha e a tag alinha à esquerda. */
@media (min-width: 721px) {
  .footer__bottom .antimatter-tag { margin-inline: auto; }
}