/* 15 · Valor — "Cinco resultados": vista explodida de uma pilha de placas que se abre em lista */
#valor { --vl-gap: clamp(10px, 1.4vh, 14px); }
#valor .vl-pin { position: relative; min-height: 100vh; min-height: 100svh; padding-block: clamp(96px, 13vh, 160px) clamp(64px, 10vh, 120px); }
#valor .vl-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#valor .vl-bg__grid { opacity: 0.35; }
#valor .vl-bg__glow { position: absolute; right: -10%; top: 50%; width: 80vmax; height: 70vmax; transform: translateY(-50%); background: radial-gradient(closest-side, rgba(18, 197, 181, 0.13), rgba(29, 159, 208, 0.05) 55%, transparent 75%); }

/* ---------- Coluna esquerda ---------- */
#valor .vl-left { position: relative; z-index: 2; }
#valor .vl-h2 { max-width: 17ch; }
#valor .vl-rule { display: block; width: min(220px, 50%); margin: clamp(24px, 4vh, 44px) 0 clamp(20px, 3.4vh, 36px); }
#valor .vl-manifesto {
  margin: 0; max-width: 22ch;
  font-family: var(--font-display); font-style: italic; font-weight: 800; font-stretch: 110%;
  font-size: clamp(24px, 2.3vw, 40px); line-height: 1.1; letter-spacing: -0.015em;
}
#valor .vl-m1, #valor .vl-m2 { display: block; }
#valor .vl-m2 { margin-top: 0.45em; }
#valor .vl-m2, #valor .vl-m2 .vl-w { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
#valor .vl-m2 .vl-w { padding-right: 0.08em; margin-right: -0.08em; }
#valor .vl-manifesto.is-split .vl-m2 { background: none; -webkit-background-clip: border-box; background-clip: border-box; }

/* ---------- Coluna direita: placas ---------- */
#valor .vl-right { position: relative; margin-top: clamp(40px, 6vh, 64px); }
#valor .vl-hud { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 14px; font-size: 11px; color: var(--ink-3); }
#valor .vl-hud span { display: inline-flex; align-items: center; gap: 8px; }
#valor .vl-hud b { color: var(--teal-hi); font-weight: 700; }
#valor .vl-hud i { width: 7px; height: 7px; border-radius: 50%; background: var(--teal-hi); box-shadow: 0 0 10px var(--teal-hi); }
#valor .vl-device { position: relative; perspective: 1800px; perspective-origin: 50% 40%; }
#valor .vl-tilt { position: relative; transform-style: preserve-3d; }
#valor .vl-stack { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--vl-gap); transform-style: preserve-3d; }
#valor .vl-plate { --acc: var(--teal-hi); --acc-rgb: 79, 240, 220; position: relative; transform-style: preserve-3d; }
#valor .vl-plate:nth-child(even) { --acc: var(--cyan-hi); --acc-rgb: 111, 211, 255; }

#valor .vl-body {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: clamp(46px, 3.8vw, 60px) minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: center; column-gap: clamp(16px, 1.8vw, 28px);
  min-height: clamp(74px, 11vh, 108px); padding: clamp(12px, 1.6vh, 18px) clamp(18px, 1.8vw, 28px);
  border-radius: 14px;
  background: linear-gradient(100deg, #16365f 0%, #0b2146 45%, #071833 100%);
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
#valor .vl-body::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(110deg, rgba(var(--acc-rgb), 0.7), rgba(29, 159, 208, 0.14) 30%, rgba(126, 170, 232, 0.08) 70%, rgba(var(--acc-rgb), 0.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
#valor .vl-body::after { content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 0 3px 3px 0; background: var(--acc); box-shadow: 0 0 14px var(--acc); }
#valor .vl-glow { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(var(--acc-rgb), 0.32), rgba(var(--acc-rgb), 0.06) 45%, transparent 75%); }
#valor .vl-icon { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 12px; border: 1px solid rgba(var(--acc-rgb), 0.35); background: radial-gradient(circle at 50% 40%, rgba(var(--acc-rgb), 0.16), rgba(5, 20, 46, 0.4) 70%); color: var(--acc); }
#valor .vl-icon svg { width: 62%; height: 62%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(var(--acc-rgb), 0.6)); }
#valor .vl-head { position: relative; min-width: 0; }
#valor .vl-num { display: block; margin-bottom: 4px; font-size: 11px; letter-spacing: 0.22em; color: var(--acc); }
#valor .vl-name {
  margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 850; font-stretch: 118%;
  font-size: clamp(20px, min(2vw, 3.6vh), 34px); line-height: 1; letter-spacing: -0.01em; text-transform: uppercase;
  overflow-wrap: anywhere;
}
#valor .vl-desc { position: relative; margin: 0; font-size: clamp(14px, 1.1vw, 17px); line-height: 1.42; color: var(--ink-2); text-wrap: pretty; }

/* Espessura das placas (só aparece na vista explodida) */
#valor .vl-edge { position: absolute; pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; background: linear-gradient(180deg, rgba(var(--acc-rgb), 0.55), rgba(18, 48, 94, 0.9)); }
#valor .vl-edge--b { left: 10px; right: 10px; bottom: 0; height: 12px; transform-origin: 50% 100%; transform: rotateX(90deg); }
#valor .vl-edge--l { left: 0; top: 10px; bottom: 10px; width: 12px; transform-origin: 0 50%; transform: rotateY(90deg); background: linear-gradient(90deg, rgba(var(--acc-rgb), 0.45), rgba(18, 48, 94, 0.9)); }
#valor .vl-edge--r { right: 0; top: 10px; bottom: 10px; width: 12px; transform-origin: 100% 50%; transform: rotateY(-90deg); background: linear-gradient(270deg, rgba(var(--acc-rgb), 0.45), rgba(18, 48, 94, 0.9)); }

/* Feixe central (vista explodida) e espinha de conexão (lista) */
#valor .vl-core { position: absolute; left: 50%; top: 50%; width: 9px; height: 330px; margin-left: -4.5px; pointer-events: none; transform-origin: 50% 0; transform: rotateX(90deg); }
#valor .vl-core b { position: absolute; inset: 0; border-radius: 6px; opacity: 0; transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(190, 255, 248, 0.95), rgba(79, 240, 220, 0.8) 30%, rgba(29, 159, 208, 0.35) 80%, rgba(29, 159, 208, 0)); box-shadow: 0 0 22px rgba(18, 197, 181, 0.9), 0 0 60px rgba(18, 197, 181, 0.4); }
#valor .vl-ring { position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%; pointer-events: none; opacity: 0; transform: translateZ(-30px);
  background: radial-gradient(circle, rgba(79, 240, 220, 0.5), rgba(18, 197, 181, 0.16) 38%, transparent 64%); border: 1px solid rgba(79, 240, 220, 0.35); box-shadow: 0 0 40px rgba(18, 197, 181, 0.35), inset 0 0 40px rgba(18, 197, 181, 0.25); }
#valor .vl-spine { position: absolute; z-index: 0; top: 30px; bottom: 30px; left: calc(clamp(18px, 1.8vw, 28px) + clamp(46px, 3.8vw, 60px) / 2 - 1px); width: 2px; background: var(--line-2); pointer-events: none; }
#valor .vl-spine b { position: absolute; inset: 0; background: var(--grad-brand-v); box-shadow: 0 0 12px var(--teal); transform-origin: 50% 0; transform: scaleY(0); }
.no-js #valor .vl-spine b, .reduced #valor .vl-spine b { transform: scaleY(1); }
#valor .vl-spine u { position: absolute; left: 50%; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(79, 240, 220, 0.25), 0 0 18px var(--teal-hi); opacity: 0; }
/* Pacotes de energia subindo pelo núcleo */
#valor .vl-core b::before, #valor .vl-core b::after { content: ''; position: absolute; left: 50%; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px var(--teal-hi), 0 0 30px var(--teal); animation: vl-packet 1.6s linear infinite; }
#valor .vl-core b::after { animation-delay: 0.8s; }
@keyframes vl-packet { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(330px); opacity: 0; } }
#valor:not(.vl-inview) .vl-core b::before, #valor:not(.vl-inview) .vl-core b::after { animation-play-state: paused; }
/* Interação: a placa sob o ponteiro acende */
#valor .vl-body { transition: transform 0.45s var(--ease-out); }
#valor.vl-live .vl-plate:hover .vl-body { transform: translateX(8px); }
#valor.vl-live .vl-plate:hover .vl-glow { opacity: 0.8 !important; transition: opacity 0.3s; }

/* ---------- Palco com pin (desktop/projetor) ---------- */
@media (min-width: 1100px) and (min-height: 640px) {
  #valor .vl-pin { padding-block: 0; }
  #valor .vl-stage {
    min-height: 100vh; min-height: 100svh;
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 5vw, 100px); align-items: center;
    padding-top: calc(var(--hud-h) + clamp(8px, 2vh, 24px)); padding-bottom: clamp(20px, 4vh, 44px);
  }
  #valor .vl-right { margin-top: 0; }
  #valor .vl-h2 { font-size: clamp(30px, min(3.3vw, 6vh), 58px); }
  #valor .vl-manifesto { font-size: clamp(22px, min(2.2vw, 4.2vh), 40px); }
  #valor .vl-desc { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.34; }
}
#valor.vl-pinned .vl-pin { height: 100vh; height: 100svh; overflow: hidden; }
#valor:not(.vl-pinned) .vl-hud { display: none; }

/* ---------- Tablet ---------- */
@media (min-width: 821px) and (max-width: 1099.98px) {
  #valor .vl-manifesto { max-width: 28ch; }
}

/* ---------- Celular ---------- */
@media (max-width: 820px) {
  #valor .vl-pin { padding-block: clamp(84px, 12vh, 120px) clamp(56px, 9vh, 96px); }
  #valor .vl-manifesto { font-size: clamp(22px, 6.4vw, 30px); }
  #valor .vl-right { margin-top: 40px; }
  #valor .vl-hud { font-size: 10px; letter-spacing: 0.1em; }
  #valor .vl-hud span:first-child { display: none; }
  #valor .vl-device { perspective: 900px; }
  #valor .vl-body { grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: 'icon head' 'icon desc'; column-gap: 16px; row-gap: 6px; align-items: start; padding: 16px 16px 16px 18px; }
  #valor .vl-icon { grid-area: icon; align-self: start; }
  #valor .vl-head { grid-area: head; }
  #valor .vl-desc { grid-area: desc; font-size: 15px; }
  #valor .vl-name { font-size: 22px; }
  #valor .vl-num { font-size: 10px; }
  #valor .vl-spine { left: calc(18px + 24px - 1px); top: 40px; bottom: 40px; }
  #valor .vl-edge, #valor .vl-core, #valor .vl-ring { display: none; }
}

/* ---------- Movimento reduzido ---------- */
.reduced #valor .vl-edge, .reduced #valor .vl-core, .reduced #valor .vl-ring { display: none; }
.reduced #valor .vl-tilt, .reduced #valor .vl-stack, .reduced #valor .vl-plate { transform: none !important; }