/* ==========================================================================
   04b · Não foi falta de esforço. Foi falta de sistema.
   Referência 04.4 (tela 10 do Sentira): etiqueta e título centralizados,
   quatro cartões de altura igual, CTA centralizado.
   Cada cartão: × em círculo, a tentativa, régua, "O que faltou" em Sky e a
   frase do que faltou. Ao fundo, a malha de pontos do hero; o "O que
   faltou" é um painel de vidro por cima dela. No hover a borda acende em azul Garimpo, como o
   cartão destacado da referência.

   Contraste sobre #0C1629:
     Mint (nome) ............ ~17:1
     Mint 72% (texto) ....... ~9:1
     Sky (rótulo) ........... ~12:1
   ========================================================================== */

.v2-sistema__cabeca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
  text-align: center;
  margin-bottom: clamp(3rem, 1.5rem + 4vw, 6rem);
}

.v2-sistema__titulo {
  margin: 0;
  font-size: clamp(2.25rem, 1.2rem + 3.4vw, 4rem);
  font-weight: var(--w-regular);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}
.v2-sistema__destaque { display: block; color: var(--gp-sky); }

.v2-sistema__grade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.v2-sistema__cartao {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 22rem;
  padding: 26px;
  border: var(--linha) solid var(--v2-borda-sutil);
  border-radius: var(--r-2);
  background: var(--v2-cartao);
  transition: border-color var(--d-2) var(--ease-out-quart), transform var(--d-3) var(--ease-out-expo);
}
.v2-sistema__cartao:hover {
  border-color: color-mix(in srgb, var(--gp-garimpo) 80%, transparent);
  transform: translateY(-3px);
}

/* × desenhado em SVG: o círculo se fecha e os dois riscos cortam em
   sequência quando o cartão entra (classe .entrou, posta pelo GSAP em
   04b-sistema-anim.js, que também marca a seção com .v2-sistema--anima); um anel
   pulsa devagar em volta; no hover o × gira 45° e vira +, em azul Garimpo.
   Sem JS ou com movimento reduzido: × completo e parado. */
.v2-sistema__x {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  overflow: visible;
  color: var(--ink-2);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  transition: color var(--d-2) var(--ease-out-quart);
}
.v2-sistema__x-anel { stroke-width: 1; stroke: var(--regua-2); fill: transparent; transition: stroke var(--d-2) var(--ease-out-quart), fill var(--d-2) var(--ease-out-quart); }
.v2-sistema__x-risco { stroke-width: 1.5; }
.v2-sistema__x-cruz {
  transform-origin: 22px 22px;
  transition: transform var(--d-4) var(--ease-out-expo);
}

/* pulso: um segundo anel que cresce e some, a cada poucos segundos */
.v2-sistema__cartao::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 26px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--gp-sky) 45%, transparent);
  opacity: 0;
  pointer-events: none;
}

.v2-sistema--anima .v2-sistema__x-anel,
.v2-sistema--anima .v2-sistema__x-risco {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.v2-sistema--anima .v2-sistema__cartao.entrou .v2-sistema__x-anel {
  animation: v2-sistema-traco 700ms var(--ease-out-expo) forwards;
  animation-delay: 250ms;
}
.v2-sistema--anima .v2-sistema__cartao.entrou .v2-sistema__x-risco {
  animation: v2-sistema-traco 380ms var(--ease-out-quart) forwards;
  animation-delay: 700ms;
}
.v2-sistema--anima .v2-sistema__cartao.entrou .v2-sistema__x-risco--2 {
  animation-delay: 900ms;
}
.v2-sistema__cartao.entrou::before {
  animation: v2-sistema-pulso 3.2s var(--ease-out-quart) infinite;
  animation-delay: calc(var(--i, 0) * 400ms + 1.6s);
}

@keyframes v2-sistema-traco { to { stroke-dashoffset: 0; } }
@keyframes v2-sistema-pulso {
  0%   { opacity: 0.7; transform: scale(1); }
  60%  { opacity: 0;   transform: scale(1.7); }
  100% { opacity: 0;   transform: scale(1.7); }
}

.v2-sistema__cartao:hover .v2-sistema__x { color: var(--gp-garimpo); }
.v2-sistema__cartao:hover .v2-sistema__x-anel {
  stroke: color-mix(in srgb, var(--gp-garimpo) 70%, transparent);
  fill: color-mix(in srgb, var(--gp-garimpo) 14%, transparent);
}
/* 45°: o × vira +, a falha vira "o que faltou" */
.v2-sistema__cartao:hover .v2-sistema__x-cruz { transform: rotate(45deg) scale(1.08); }

.v2-sistema__nome {
  margin: var(--s-6) 0 0;
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  font-weight: var(--w-regular);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}

/* malha de pontos do hero, ao fundo do cartão: começa abaixo do título e
   corre por trás do painel de vidro */
.v2-sistema__malha {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 12%, #000 42%);
          mask-image: linear-gradient(to bottom, transparent 12%, #000 42%);
  opacity: 0.9;
  transition: opacity var(--d-3) var(--ease-out-quart);
}
.v2-sistema__cartao:hover .v2-sistema__malha { opacity: 1; }

/* o que faltou: painel de vidro no pé do cartão, de borda a borda,
   desfocando a malha que passa por trás */
.v2-sistema__falta {
  margin: auto -26px -26px;
  padding: 20px 26px 24px;
  border-top: var(--linha) solid color-mix(in srgb, var(--gp-mint) 14%, transparent);
  background: color-mix(in srgb, var(--gp-nightskye) 42%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gp-mint) 8%, transparent);
}

.v2-sistema__rotulo {
  margin: 0 0 var(--s-3);
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gp-sky);
}

.v2-sistema__texto {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

.v2-sistema__acao {
  display: flex;
  justify-content: center;
  margin-top: clamp(3rem, 2rem + 2vw, 4.5rem);
}

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

@media (max-width: 64rem) {
  .v2-sistema__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-sistema__cartao { min-height: 18rem; }
}

@media (max-width: 36rem) {
  .v2-sistema__grade { grid-template-columns: minmax(0, 1fr); }
  .v2-sistema__cartao { min-height: 0; }
  .v2-sistema__nome { margin: var(--s-5) 0 var(--s-8); }
  .v2-sistema__acao .v2-cta { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-sistema__cartao:hover { transform: none; }
  .v2-sistema__x-anel,
  .v2-sistema__x-risco { stroke-dashoffset: 0 !important; animation: none !important; }
  .v2-sistema__cartao.entrou::before { animation: none; }
  .v2-sistema__cartao:hover .v2-sistema__x-cruz { transform: none; }
}