/* ============================================================
   B2 Sistemas — 02 / SISTEMAS (bento grid de produtos)
   Escopo: tudo prefixado com .sistemas
   ============================================================ */

.sistemas {
  position: relative;
  overflow: clip;
  padding-block: var(--section-pad);
}

/* Glow único, discreto, atrás do grid */
.sistemas .sistemas-glow {
  top: clamp(300px, 42vh, 460px);
  left: 44%;
  transform: translateX(-50%);
  opacity: 0.26;
}

.sistemas .container {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------
   Bento — 12 colunas / 3 linhas assimétricas
   linha 1–2:  Agrícola (4×2) · Posto (4×2) · Trans/Comércio (4×1 + 4×1)
   linha 3:    Fiscais (4) · Nuvem faixa (5) · Gestor (3)
   ------------------------------------------------------------ */

.sistemas .sys-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(235px, auto)) minmax(210px, auto);
  grid-template-areas:
    "agri agri agri agri posto posto posto posto trans trans trans trans"
    "agri agri agri agri posto posto posto posto comer comer comer comer"
    "fisc fisc fisc fisc nuvem nuvem nuvem nuvem nuvem gestor gestor gestor";
  gap: clamp(14px, 1.6vw, 18px);
}

.sistemas .sys-agri   { grid-area: agri; }
.sistemas .sys-posto  { grid-area: posto; }
.sistemas .sys-trans  { grid-area: trans; }
.sistemas .sys-comer  { grid-area: comer; }
.sistemas .sys-fisc   { grid-area: fisc; }
.sistemas .sys-nuvem  { grid-area: nuvem; }
.sistemas .sys-gestor { grid-area: gestor; }

/* ------------------------------------------------------------
   Card base
   ------------------------------------------------------------ */

.sistemas .sys-card {
  --pad: 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--pad);
}

.sistemas .sys-card--xl { --pad: 34px; }

/* Destaque sutil do card Agrícola (borda âmbar de repouso) */
.sistemas .sys-agri { border-color: rgba(252, 157, 19, 0.16); }
.sistemas .sys-agri:hover { border-color: var(--line-brand); }

/* Tag técnica no canto superior direito */
.sistemas .sys-tag {
  position: absolute;
  top: calc(var(--pad) - 2px);
  right: var(--pad);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

/* Chip do ícone */
.sistemas .sys-chip {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 14px;
  border: 1px solid var(--line-brand);
  background: rgba(252, 157, 19, 0.08);
  color: var(--brand-2);
}

.sistemas .sys-chip svg {
  width: 24px;
  height: 24px;
  transition: transform var(--dur) var(--ease-out);
}

.sistemas .sys-card:hover .sys-chip svg {
  transform: scale(1.1) rotate(-5deg);
}

/* Conteúdo */
.sistemas .sys-body { margin-top: 20px; }

.sistemas .sys-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.22;
  letter-spacing: -0.01em;
}

.sistemas .sys-card--xl h3 {
  font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.75rem);
}

.sistemas .sys-card p {
  margin-top: 10px;
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.65;
}

.sistemas .sys-card--xl p { max-width: 46ch; }

/* Chips fiscais (NF-e, NFC-e…) */
.sistemas .sys-chips {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sistemas .sys-chips li {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap; /* nunca quebrar termo fiscal no hífen */
  color: var(--ink-2);
  padding: 5px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(247, 242, 231, 0.02);
  transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.sistemas .sys-fisc:hover .sys-chips li {
  border-color: var(--line-brand);
  color: var(--ink-1);
}

/* CTA — sempre alinhado à base do card */
.sistemas .sys-cta {
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 20px;
  row-gap: 10px;
}

.sistemas .sys-deco ~ .sys-cta { margin-top: 0; }

/* Seta avança também no hover do card inteiro */
.sistemas .sys-card:hover .link-arrow svg { transform: translateX(4px); }

/* Variante secundária discreta do link (segundo CTA do Gestor) */
.sistemas .link-arrow--muted {
  color: var(--ink-3);
  transition: color var(--dur) var(--ease-out);
}
.sistemas .link-arrow--muted:hover { color: var(--ink-2); }

/* ------------------------------------------------------------
   Detalhes decorativos dos cards grandes (aria-hidden)
   ------------------------------------------------------------ */

.sistemas .sys-deco {
  flex: 1 1 auto;
  min-height: 150px;
  margin-top: 26px;
}

/* Agrícola — "talhões": parcelas com direções de plantio distintas */
.sistemas .sys-deco--agri {
  display: grid;
  grid-template-columns: 1.35fr 1fr 0.75fr;
  grid-auto-rows: minmax(56px, 1fr);
  gap: 9px;
}

.sistemas .sys-deco--agri i {
  display: block;
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: repeating-linear-gradient(90deg, rgba(247, 242, 231, 0.035) 0 1px, transparent 1px 10px);
  transition: border-color var(--dur) var(--ease-out);
}

.sistemas .sys-deco--agri i:nth-child(2) {
  border-color: var(--line-brand);
  background:
    repeating-linear-gradient(90deg, rgba(252, 157, 19, 0.1) 0 1px, transparent 1px 10px),
    rgba(252, 157, 19, 0.05);
}

.sistemas .sys-deco--agri i:nth-child(4) {
  grid-column: span 2;
  background: repeating-linear-gradient(0deg, rgba(247, 242, 231, 0.035) 0 1px, transparent 1px 12px);
}

.sistemas .sys-deco--agri i:nth-child(5) {
  background: repeating-linear-gradient(45deg, rgba(247, 242, 231, 0.03) 0 1px, transparent 1px 11px);
}

.sistemas .sys-agri:hover .sys-deco--agri i { border-color: var(--line-brand); }

/* Posto — três tanques com nível em gradiente laranja */
.sistemas .sys-deco--posto {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 520px;
}

.sistemas .sys-deco--posto i {
  --lvl: 50%;
  position: relative;
  display: block;
  min-width: 0;
  min-height: 140px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: repeating-linear-gradient(0deg, rgba(247, 242, 231, 0.04) 0 1px, transparent 1px 26%);
}

.sistemas .sys-deco--posto i::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: var(--lvl);
  background: linear-gradient(180deg, rgba(255, 188, 66, 0.5), rgba(224, 124, 5, 0.1));
  box-shadow: 0 -1px 0 0 rgba(255, 188, 66, 0.55);
  transition: height 0.5s var(--ease-out);
}

.sistemas .sys-deco--posto i:nth-child(1) { --lvl: 62%; }
.sistemas .sys-deco--posto i:nth-child(2) { --lvl: 34%; }
.sistemas .sys-deco--posto i:nth-child(3) { --lvl: 80%; }

.sistemas .sys-posto:hover .sys-deco--posto i::after {
  height: calc(var(--lvl) + 7%);
}

/* ------------------------------------------------------------
   Nuvem — card wide com mini-rack de servidores à direita
   ------------------------------------------------------------ */

.sistemas .sys-nuvem p { max-width: 44ch; }

/* reserva a coluna do rack (172px + respiro) enquanto ele está visível */
@media (min-width: 761px) {
  .sistemas .sys-nuvem .sys-body { padding-right: 212px; }
}

.sistemas .sys-rack {
  position: absolute;
  right: var(--pad);
  bottom: calc(var(--pad) + 4px);
  width: 172px;
  display: grid;
  gap: 8px;
}

.sistemas .sys-rack i {
  position: relative;
  display: block;
  height: 26px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: rgba(247, 242, 231, 0.02);
  transition: border-color var(--dur) var(--ease-out);
}

/* dot de status */
.sistemas .sys-rack i::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 8px 0 rgba(252, 157, 19, 0.55);
}

.sistemas .sys-rack i:nth-child(2)::before {
  background: var(--brand-2);
  box-shadow: 0 0 8px 0 rgba(255, 188, 66, 0.45);
}

/* fendas de ventilação */
.sistemas .sys-rack i::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 30px;
  height: 9px;
  margin-top: -4.5px;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 2px, transparent 2px 7px);
}

.sistemas .sys-nuvem:hover .sys-rack i { border-color: var(--line-brand); }

.sistemas .sys-uptime {
  justify-self: end;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ------------------------------------------------------------
   Responsivo
   ------------------------------------------------------------ */

@media (max-width: 1080px) {
  .sistemas .sys-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    grid-template-areas:
      "agri agri"
      "posto posto"
      "trans comer"
      "fisc fisc"
      "nuvem nuvem"
      "gestor gestor";
  }

  .sistemas .sys-deco { min-height: 132px; }
}

@media (max-width: 760px) {
  .sistemas .sys-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "agri"
      "posto"
      "trans"
      "comer"
      "fisc"
      "nuvem"
      "gestor";
    gap: 12px;
  }

  .sistemas .sys-card,
  .sistemas .sys-card--xl { --pad: 22px; }

  .sistemas .sys-card--xl h3 { font-size: 1.4rem; }

  .sistemas .sys-deco {
    min-height: 112px;
    margin-top: 22px;
  }

  .sistemas .sys-deco--agri i { min-height: 44px; }

  .sistemas .sys-deco--posto {
    gap: 10px;
    max-width: none;
  }
  .sistemas .sys-deco--posto i { min-height: 104px; }

  /* sem espaço lateral no mobile — o rack sairia por cima do CTA */
  .sistemas .sys-rack { display: none; }

  .sistemas .sys-cta { column-gap: 16px; }
}