/* Pilares animados: ícones SVG próprios. Só tokens do design system. */
.pilares-sec { border-top: 0; }
.pillars { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4); }
.pillars__rail { position: absolute; left: 0; right: 0; top: 148px; width: 100%; height: 4px; z-index: 0; overflow: visible; }
.pillars__rail line { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }

.pillar2 { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center;
  padding: var(--space-8) var(--space-3) var(--space-6); background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--laranja-ideia); cursor: default; outline: none;
  transition: border-color var(--dur-fast), transform var(--dur-base) var(--ease-out-expo); }
.pillar2__idx { position: absolute; top: var(--space-3); left: var(--space-4); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-muted); }
.pillar2__art { width: 132px; height: 132px; border-radius: var(--radius-full); transition: box-shadow var(--dur-base) var(--ease-out-expo); }
.pillar2__art svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pillar2__title { margin: 0; font-family: var(--font-sans); font-size: 15px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text); }
.pillar2__body { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-body); }

/* Traço: tudo que tem .draw se desenha ao entrar na tela */
.pillar2 svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-in .draw { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease-mech) calc(var(--i, 0) * 140ms + var(--d, 0ms)); }
.ring { stroke-width: 2; transform: rotate(-90deg); transform-origin: 60px 60px; }
.is-in .pillars__rail .draw { transition-duration: 1.6s; }

/* Preenchimento no hover: o círculo cresce, o ícone inverte para preto */
.ring-fill { fill: var(--laranja-ideia); stroke: none; transform: scale(0); transform-origin: 60px 60px; transition: transform var(--dur-base) var(--ease-out-expo); }
.pillar2:hover, .pillar2:focus-visible { border-color: var(--laranja-ideia); transform: translateY(-4px); }
.pillar2:hover .pillar2__art, .pillar2:focus-visible .pillar2__art { box-shadow: var(--glow-laranja); }
.pillar2:hover .ring-fill, .pillar2:focus-visible .ring-fill { transform: scale(1); }
.pillar2 .icon { transition: color var(--dur-fast); }
.pillar2:hover .icon, .pillar2:focus-visible .icon { color: var(--on-laranja); }
.pillar2:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Movimentos próprios (começam depois que o traço termina) */
.is-in .i-wink { transform-box: fill-box; transform-origin: center; animation: i-wink 4.5s var(--ease-in-out) 2.4s infinite; }
@keyframes i-wink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.08); } }

.is-in .i-spark { transform-box: fill-box; transform-origin: center; animation: i-twinkle 2.4s var(--ease-in-out) infinite; }
.is-in .i-spark.s2 { animation-delay: 0.8s; } .is-in .i-spark.s3 { animation-delay: 1.5s; }
@keyframes i-twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(0.4) rotate(90deg); opacity: 0.35; } }
.is-in .i-bolt { animation: i-zap 3.6s steps(1) 2.4s infinite; }
@keyframes i-zap { 0%, 100% { opacity: 1; } 3% { opacity: 0.3; } 6% { opacity: 1; } 9% { opacity: 0.5; } 12% { opacity: 1; } }

.i-arrow { transform-box: view-box; }
.is-in .i-arrow { animation: i-shoot 3.6s var(--ease-out-expo) 2s infinite; }
@keyframes i-shoot { 0% { transform: translate(14px, -14px); opacity: 0; } 12% { opacity: 1; } 22%, 100% { transform: translate(0, 0); opacity: 1; } }
.i-hit { fill: var(--laranja-ideia); stroke: none; transform-box: fill-box; transform-origin: center; opacity: 0; }
.is-in .i-hit { animation: i-pulse 3.6s var(--ease-out-expo) 2s infinite; }
@keyframes i-pulse { 0%, 18% { transform: scale(0); opacity: 0; } 24% { transform: scale(1); opacity: 1; } 60%, 100% { transform: scale(3.4); opacity: 0; } }
.pillar2:hover .i-hit { fill: var(--on-laranja); }

.is-in .i-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: i-flicker 1.7s var(--ease-in-out) 2.2s infinite alternate; }
.is-in .i-flame.in { animation-duration: 1.1s; animation-delay: 2.3s; }
@keyframes i-flicker { 0% { transform: scale(1, 1) skewX(0); } 35% { transform: scale(0.97, 1.05) skewX(-3deg); } 70% { transform: scale(1.03, 0.97) skewX(2deg); } 100% { transform: scale(0.98, 1.04) skewX(0); } }

.i-scan { stroke: currentColor; stroke-width: 2; opacity: 0; }
.is-in .i-scan { animation: i-scan 3.2s var(--ease-in-out) 2.2s infinite; }
@keyframes i-scan { 0% { transform: translateY(8px); opacity: 0; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(52px); opacity: 0; } }

.i-orbit { transform-box: view-box; transform-origin: 32px 32px; }
.is-in .i-orbit { animation: i-spin 14s linear 1.8s infinite; }
@keyframes i-spin { to { transform: rotate(360deg); } }
.i-core { fill: currentColor; stroke: none; transform-box: fill-box; transform-origin: center; }
.is-in .i-core { animation: i-beat 2.2s var(--ease-in-out) 1.8s infinite; }
@keyframes i-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.6); } }
.pillar2:hover .i-orbit { animation-duration: 3s; }

@media (max-width: 1100px) { .pillars { grid-template-columns: repeat(3, 1fr); } .pillars__rail { display: none; } }
@media (max-width: 600px) { .pillars { grid-template-columns: repeat(2, 1fr); } .pillar2__art { width: 112px; height: 112px; } }

@media (prefers-reduced-motion: reduce) {
  .draw { stroke-dashoffset: 0 !important; transition: none !important; }
  .is-in * { animation: none !important; }
  .pillar2, .ring-fill, .pillar2__art { transition: none; }
}

/* ===== Pilares: card expande no hover e abre o texto ===== */
.pillars { display: flex; gap: var(--space-4); align-items: stretch; min-height: 400px; }
.pillar2 { flex: 1 1 0; min-width: 0; flex-direction: row; justify-content: center; align-items: center; gap: 0; overflow: hidden;
  padding: var(--space-8) var(--space-4); transition: flex-grow 700ms var(--ease-out-expo), border-color var(--dur-fast), transform var(--dur-base) var(--ease-out-expo); }
.pillar2__head { flex: 0 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center;
  transition: width 700ms var(--ease-out-expo); }
.pillar2__art { transition: width 500ms var(--ease-out-expo), height 500ms var(--ease-out-expo), box-shadow var(--dur-base) var(--ease-out-expo); }
.pillar2__more { flex: 0 0 auto; max-width: 0; opacity: 0; overflow: hidden; margin-left: 0; clip-path: inset(0 100% 0 0);
  transition: max-width 700ms var(--ease-out-expo), margin 700ms var(--ease-out-expo), opacity var(--dur-base), clip-path 700ms var(--ease-curtain); }
.pillar2__panel { width: 300px; display: flex; flex-direction: column; gap: var(--space-4); text-align: left; padding-left: var(--space-6);
  border-left: 1px solid var(--laranja-ideia); }
.pillar2__hud { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-muted); }
.pillar2__lead { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1; text-transform: uppercase; color: var(--ink); }
.pillar2__text { margin: 0; font-size: 14px; line-height: 22px; color: var(--ink-body); }
.pillar2__chips { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pillar2__chips li { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-text);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px var(--space-2); }
.pillar2__panel > * { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-base) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo); }

/* Estado aberto */
.pillar2:is(:hover, :focus-visible, :focus-within) { flex-grow: 4.4; }
.pillar2:is(:hover, :focus-visible, :focus-within) .pillar2__head { width: 168px; }
.pillar2:is(:hover, :focus-visible, :focus-within) .pillar2__more { max-width: 340px; opacity: 1; margin-left: var(--space-6); clip-path: inset(0 0 0 0); }
.pillar2:is(:hover, :focus-visible, :focus-within) .pillar2__panel > * { opacity: 1; transform: none; }
.pillar2:is(:hover, :focus-visible, :focus-within) .pillar2__panel > :nth-child(1) { transition-delay: 160ms; }
.pillar2:is(:hover, :focus-visible, :focus-within) .pillar2__panel > :nth-child(2) { transition-delay: 220ms; }
.pillar2:is(:hover, :focus-visible, :focus-within) .pillar2__panel > :nth-child(3) { transition-delay: 280ms; }
.pillar2:is(:hover, :focus-visible, :focus-within) .pillar2__panel > :nth-child(4) { transition-delay: 340ms; }
.pillar2:is(:hover, :focus-visible, :focus-within) .pillar2__body { display: none; }

/* Vizinhos recuam */
.pillars:has(.pillar2:is(:hover, :focus-visible, :focus-within)) .pillar2:not(:is(:hover, :focus-visible, :focus-within)) .pillar2__art { width: 84px; height: 84px; }
.pillars:has(.pillar2:is(:hover, :focus-visible, :focus-within)) .pillar2:not(:is(:hover, :focus-visible, :focus-within)) .pillar2__body { display: none; }
.pillars:has(.pillar2:is(:hover, :focus-visible, :focus-within)) .pillar2:not(:is(:hover, :focus-visible, :focus-within)) .pillar2__title { font-size: 11px; letter-spacing: 0.02em; }
.pillars:has(.pillar2:is(:hover, :focus-visible, :focus-within)) .pillar2:not(:is(:hover, :focus-visible, :focus-within)) { opacity: 0.7; }

/* Tablet e celular: cards em coluna, texto sempre visível */
@media (max-width: 1100px) {
  .pillars { flex-wrap: wrap; min-height: 0; }
  .pillar2 { flex: 1 1 calc(50% - 8px); flex-direction: column; }
  .pillar2:is(:hover, :focus-visible, :focus-within) { flex-grow: 1; }
  .pillar2__head, .pillar2:is(:hover, :focus-visible, :focus-within) .pillar2__head { width: 100%; }
  .pillar2__more, .pillar2:is(:hover, :focus-visible, :focus-within) .pillar2__more { max-width: none; width: 100%; opacity: 1; margin: var(--space-6) 0 0; clip-path: none; }
  .pillar2__panel { width: 100%; padding-left: var(--space-4); }
  .pillar2__panel > * { opacity: 1; transform: none; }
  .pillar2:is(:hover, :focus-visible, :focus-within) .pillar2__body { display: block; }
  .pillars:has(.pillar2:is(:hover, :focus-visible, :focus-within)) .pillar2:not(:is(:hover, :focus-visible, :focus-within)) { opacity: 1; }
  .pillars:has(.pillar2:is(:hover, :focus-visible, :focus-within)) .pillar2:not(:is(:hover, :focus-visible, :focus-within)) .pillar2__art { width: 132px; height: 132px; }
  .pillars:has(.pillar2:is(:hover, :focus-visible, :focus-within)) .pillar2:not(:is(:hover, :focus-visible, :focus-within)) .pillar2__body { display: block; }
  .pillars:has(.pillar2:is(:hover, :focus-visible, :focus-within)) .pillar2:not(:is(:hover, :focus-visible, :focus-within)) .pillar2__title { font-size: 15px; letter-spacing: 0.06em; }
}
@media (max-width: 600px) { .pillar2 { flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .pillar2, .pillar2__head, .pillar2__art, .pillar2__more, .pillar2__panel > * { transition: none !important; }
}