/* ===== fennir.ch — Zeit · Geld · Energie + red de automatización (#value) =====
   Estado base = todo visible; el movimiento es decorativo y siempre en bucle CSS/SMIL. */
#value {
  --v-cyan: #22d3ee; --v-violet: #a78bfa; --v-green: #34d399; --v-orange: #ff7c00; --v-pink: #f472b6; --v-gold: #f3c77a;
  position: relative; z-index: 2; padding: 140px 0 120px; overflow: hidden;
}
#value .v-bg { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(243,199,122,.07), transparent 70%); }
.v-head { text-align: center; max-width: 820px; margin: 0 auto 64px; }
.v-head .section-sub { margin-left: auto; margin-right: auto; }
.v-title { font-family: 'Cormorant Garamond', Georgia, serif !important; font-weight: 400 !important; letter-spacing: -.01em !important; }
.v-title em { font-style: italic; font-weight: 500;
  background: linear-gradient(100deg, #f3e2c4, #ffb35c 50%, var(--v-orange)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* tres pilares */
.v-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1180px; margin: 0 auto; padding: 0 24px; perspective: 1400px; }
.v-card {
  --c: var(--v-cyan); position: relative; padding: 30px 28px 28px; border-radius: 24px; min-width: 0;
  background: linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.012));
  border: 1px solid rgba(255,255,255,.08); overflow: hidden;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.22,1,.36,1), border-color .3s;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.8);
}
.v-card:hover { border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.v-card::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--c) 18%, transparent), transparent 55%); }
.v-card > * { position: relative; }
.v-num { font: 500 11px/1 'Space Grotesk', sans-serif; letter-spacing: .3em; color: rgba(255,255,255,.4); }
.v-card h3 { margin: 18px 0 6px; font: 400 clamp(40px, 4vw, 56px)/1 'Cormorant Garamond', Georgia, serif; color: #fff; }
.v-card h3 span { color: var(--c); font-style: italic; }
.v-card .v-lead { font: 600 15px/1.4 'Space Grotesk', sans-serif; color: #fff; margin: 0 0 10px; }
.v-card p { font: 300 14.5px/1.65 'Inter', sans-serif; color: rgba(255,255,255,.72); margin: 0; }
.v-icon { height: 120px; display: grid; place-items: center; margin: 6px 0 4px; transform: translateZ(40px); }

/* Zeit: reloj */
.v-clock { position: relative; width: 96px; height: 96px; border-radius: 50%;
  border: 2px solid var(--c); box-shadow: 0 0 24px color-mix(in srgb, var(--c) 60%, transparent), inset 0 0 24px color-mix(in srgb, var(--c) 30%, transparent); }
.v-clock i { position: absolute; left: 50%; bottom: 50%; width: 3px; border-radius: 3px; background: #fff; transform-origin: bottom center; }
.v-clock i:nth-child(1) { height: 26px; margin-left: -1.5px; animation: vSpin 12s linear infinite; }
.v-clock i:nth-child(2) { height: 38px; width: 2px; margin-left: -1px; background: var(--c); animation: vSpin 2s linear infinite; }
.v-clock b { position: absolute; inset: 44px; border-radius: 50%; background: #fff; }
@keyframes vSpin { to { transform: rotate(360deg); } }

/* Geld: monedas 3D que suben */
.v-coins { position: relative; width: 110px; height: 110px; transform-style: preserve-3d; transform: rotateX(62deg) rotateZ(-20deg); }
.v-coins i { position: absolute; left: 25px; width: 60px; height: 60px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6d8, var(--c) 55%, color-mix(in srgb, var(--c) 45%, #000));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 60%, #000), 0 0 22px color-mix(in srgb, var(--c) 70%, transparent);
  animation: vCoin 3.6s ease-in-out infinite; }
.v-coins i:nth-child(1) { top: 40px; transform: translateZ(0); }
.v-coins i:nth-child(2) { top: 40px; transform: translateZ(14px); animation-delay: .2s; }
.v-coins i:nth-child(3) { top: 40px; transform: translateZ(28px); animation-delay: .4s; }
.v-coins i:nth-child(4) { top: 40px; transform: translateZ(42px); animation-delay: .6s; }
@keyframes vCoin { 50% { filter: brightness(1.35); } }
.v-coins::after { content: "CHF"; position: absolute; left: 50%; top: -6px; transform: translateX(-50%) rotateZ(20deg) rotateX(-62deg);
  font: 700 13px/1 'Space Grotesk', sans-serif; color: var(--c); letter-spacing: .1em; animation: vRise 3.6s ease-in-out infinite; }
@keyframes vRise { 0%, 100% { opacity: .5; margin-top: 6px; } 50% { opacity: 1; margin-top: -8px; } }

/* Energie: batería que se carga + rayo */
.v-batt { position: relative; width: 64px; height: 104px; border-radius: 12px; border: 2px solid var(--c); padding: 6px;
  box-shadow: 0 0 24px color-mix(in srgb, var(--c) 50%, transparent); }
.v-batt::before { content: ""; position: absolute; top: -9px; left: 50%; width: 22px; height: 7px; margin-left: -11px; border-radius: 3px 3px 0 0; background: var(--c); }
.v-batt i { position: absolute; left: 6px; right: 6px; bottom: 6px; border-radius: 6px;
  background: linear-gradient(0deg, var(--c), color-mix(in srgb, var(--c) 40%, #fff)); animation: vCharge 3.2s ease-in-out infinite; }
.v-batt b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 30px/1 'Space Grotesk', sans-serif; color: #07070b; }
@keyframes vCharge { 0% { height: 22%; } 70%, 100% { height: calc(100% - 12px); } }

/* red de automatización */
.v-net-wrap { max-width: 1180px; margin: 70px auto 0; padding: 0 24px; }
.v-net { position: relative; border-radius: 28px; border: 1px solid rgba(255,255,255,.08); overflow: hidden;
  background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(167,139,250,.08), transparent 70%), rgba(255,255,255,.02); }
.v-net-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 22px 26px 0; }
.v-net-head h3 { margin: 0; font: 600 16px/1.3 'Space Grotesk', sans-serif; color: #fff; }
.v-net-head span { font: 500 10.5px/1 'Space Grotesk', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.v-net svg { display: block; width: 100%; height: auto; }
.v-net .wire { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 1.5; }
.v-net .flow { fill: none; stroke-width: 2; stroke-dasharray: 4 14; animation: vFlow 1.4s linear infinite; }
@keyframes vFlow { to { stroke-dashoffset: -36; } }
.v-net .node rect { fill: rgba(14,14,20,.92); stroke: rgba(255,255,255,.14); }
.v-net .node text { font: 600 13px 'Space Grotesk', sans-serif; fill: #fff; }
.v-net .node circle { filter: drop-shadow(0 0 6px currentColor); }
.v-net .hub-ring { fill: none; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: vSpin 12s linear infinite; }
.v-net .hub-ring.r2 { animation-duration: 18s; animation-direction: reverse; }
.v-net .hub-core { filter: drop-shadow(0 0 22px rgba(34,211,238,.7)); }
.v-net .hub-text { font: 700 15px 'Space Grotesk', sans-serif; fill: #07070b; letter-spacing: .04em; }
.v-net .hub-sub { font: 600 9px 'Space Grotesk', sans-serif; fill: #07070b; letter-spacing: .2em; }
.v-net-foot { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 26px 24px; }
.v-chip { font: 500 12px/1 'Space Grotesk', sans-serif; color: rgba(255,255,255,.75); padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); }
.v-chip b { color: var(--v-green); font-weight: 600; margin-right: 6px; }

@media (max-width: 900px) {
  #value { padding: 100px 0 80px; }
  .v-pillars { grid-template-columns: 1fr; padding: 0 16px; }
  .v-card { transform: none !important; }
  .v-net-wrap { padding: 0 16px; margin-top: 48px; }
  .v-net .node text { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  #value *, #value *::after { animation: none !important; }
}