/* =====================================================================
   user.tecsaconstrutora.com.br — extensões Precision Craft
   (consome tokens do styles.css base: --space-*, --r-*, --d-*, --c-*)
   Hub-mãe de ferramentas/setores. Adições: card de setor, página de
   setor com 3 grandes ícones, link "voltar".
   ===================================================================== */

/* ---- Link "voltar ao hub" (header de setor) ---- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tecsa-gray);
  transition: color var(--d-fast) var(--ease-precision);
}
.back-link:hover { color: var(--tecsa-blue); }
.back-link svg { width: 16px; height: 16px; stroke-width: 2; }

/* ---- Card de SETOR na home (destaque dourado permanente) ---- */
.product-card.setor::before { transform: scaleX(1); background: var(--tecsa-gold); }
.product-card.setor .product-icon { background: var(--tecsa-gold-light); color: var(--tecsa-gold); }
.product-card.setor:hover .product-icon { background: var(--tecsa-gold); color: var(--tecsa-white); }
.product-card.setor:hover::before { background: var(--tecsa-gold); }
.badge.setor { background: var(--tecsa-gold-light); color: var(--tecsa-gold); }
.badge.setor .dot { background: var(--tecsa-gold); }

/* ---- Página de SETOR: 3 grandes ferramentas ---- */
.sector-hero { padding-bottom: var(--space-xl); }

.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 280px;
  padding: var(--space-2xl) var(--space-xl);
  background: var(--tecsa-white);
  border: 1px solid var(--tecsa-border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: box-shadow var(--d-normal) var(--ease-precision),
              transform var(--d-normal) var(--ease-precision),
              border-color var(--d-normal) var(--ease-precision);
}
.tool-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 3px;
  background: var(--tecsa-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-normal) var(--ease-precision);
}
.tool-card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  transform: translateY(-3px);
  border-color: var(--tecsa-gray-medium);
}
.tool-card:hover::before { transform: scaleX(1); }

.tool-num {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--tecsa-gray-medium);
}

.tool-icon {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  margin-bottom: var(--space-lg);
  border-radius: var(--r-md);
  background: var(--c-blue-soft);
  color: var(--c-blue);
  transition: background var(--d-normal) var(--ease-precision),
              color var(--d-normal) var(--ease-precision);
}
.tool-icon svg { width: 30px; height: 30px; stroke-width: 1.5; }
.tool-card.c-blue    .tool-icon { background: var(--c-blue-soft);    color: var(--c-blue); }
.tool-card.c-emerald .tool-icon { background: var(--c-emerald-soft); color: var(--c-emerald); }
.tool-card.c-violet  .tool-icon { background: var(--c-violet-soft);  color: var(--c-violet); }
.tool-card:hover .tool-icon { color: var(--tecsa-white); }
.tool-card.c-blue:hover    .tool-icon { background: var(--c-blue); }
.tool-card.c-emerald:hover .tool-icon { background: var(--c-emerald); }
.tool-card.c-violet:hover  .tool-icon { background: var(--c-violet); }

.tool-name {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--tecsa-blue);
  margin-bottom: var(--space-sm);
}
.tool-desc {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--tecsa-gray);
  margin-bottom: var(--space-lg);
}
.tool-foot {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tecsa-blue);
}
.tool-foot svg {
  width: 14px; height: 14px; stroke-width: 2;
  transition: transform var(--d-normal) var(--ease-precision);
}
.tool-card:hover .tool-foot svg { transform: translate(2px, -2px); }

@media (max-width: 900px) {
  .tool-grid { grid-template-columns: 1fr; }
  .tool-card { min-height: 0; padding: var(--space-xl); }
}

/* ---- Foco visível por teclado (WCAG 2.4.7) em todos os interativos ---- */
a:focus-visible,
button:focus-visible,
.product-card:focus-visible,
.tool-card:focus-visible,
.back-link:focus-visible,
.brand:focus-visible {
  outline: 2px solid var(--tecsa-blue);
  outline-offset: 2px;
  border-radius: var(--r-md);
}

/* loop infinito do brand-mark roda no compositor */
.top-nav .brand-mark { will-change: transform; }

/* =====================================================================
   SETOR em destaque na home: card HORIZONTAL largura-cheia
   (resolve o card unico orfao na grade de 3 colunas; quando entrar o
   2o setor, basta remover .is-feature/.is-wide e volta para a grade)
   ===================================================================== */
.grid-3.is-feature { grid-template-columns: 1fr; }

.product-card.setor.is-wide {
  flex-direction: row;
  align-items: center;
  gap: var(--space-xl);
  padding: var(--space-xl) var(--space-2xl);
}
.product-card.setor.is-wide .product-card-head {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  margin-bottom: 0;
  flex-shrink: 0;
}
.product-card.setor.is-wide .product-icon { width: 56px; height: 56px; }
.product-card.setor.is-wide .product-icon svg { width: 28px; height: 28px; }
.product-card.setor.is-wide .product-name { margin-bottom: var(--space-xs); }
.product-card.setor.is-wide .product-desc { margin-bottom: 0; max-width: 52ch; }
.product-card.setor.is-wide .product-foot {
  flex-direction: column;
  align-items: flex-end;
  border-top: 0;
  padding-top: 0;
  flex-shrink: 0;
  gap: var(--space-sm);
  margin-left: auto;
}
@media (max-width: 768px) {
  .product-card.setor.is-wide { flex-direction: column; align-items: flex-start; padding: var(--space-lg); }
  .product-card.setor.is-wide .product-desc { max-width: none; }
  .product-card.setor.is-wide .product-foot {
    flex-direction: row; align-items: center; width: 100%;
    margin-left: 0; padding-top: var(--space-sm); border-top: 1px solid var(--tecsa-border);
  }
}