/* Visual 3D del hero, aislado del resto del sitio. */
.hero {
  height: 120vh;
  view-timeline-name: --atlasHeroTimeline;
  view-timeline-axis: block;
}

.hero > .hero-inner {
  position: sticky;
  top: 74px;
  height: calc(100vh - 74px);
}

.hero-atlas-3d {
  --atlas-plane: #303944;
  --atlas-text: #e5e9ed;
  --atlas-muted: #8c97a3;
  --atlas-coral: #ff7167;
  --atlas-cyan: #45c3ed;
  --atlas-purple: #a16df5;
  --atlas-green: #55d78b;
  --atlas-orange: #f69a56;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: grid;
  place-items: center;
  color: var(--atlas-text);
  perspective: 1500px;
  transform: translate(76px, -57px);
}

.atlas-scene-camera { width: min(112%, 880px); margin-left: -6%; aspect-ratio: 1.08; display: grid; place-items: center; perspective: 1500px; }
.atlas-world { position: relative; width: 100%; aspect-ratio: 1200 / 780; transform-style: preserve-3d; transform: rotateX(2deg) rotateZ(0deg) scale(.94); animation: atlas-world-scroll linear both; animation-timeline: --atlasHeroTimeline; animation-range: entry 0% exit 52%; transition: transform 700ms cubic-bezier(.2,.75,.2,1); }
.atlas-base-plane { position: absolute; inset: 0; border-radius: 28px; background: radial-gradient(circle at 50% 35%, #3b4652, var(--atlas-plane) 48%, #242c35); border: 1px solid rgba(255,255,255,.08); box-shadow: 18px 34px 65px rgba(20,28,38,.34); transform-style: preserve-3d; }
.atlas-base-plane::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; z-index: -1; border-radius: 28px; background: #1d252e; transform: translateZ(-25px); box-shadow: 15px 30px 55px rgba(0,0,0,.36); }
.atlas-base-grid { position: absolute; inset: 0; border-radius: inherit; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size: 52px 52px; }
.atlas-plane-label { position: absolute; top: 3%; left: 50%; transform: translateX(-50%) translateZ(2px); color: rgba(255,255,255,.22); font-size: clamp(5px,.55vw,9px); letter-spacing: .28em; white-space: nowrap; }
.atlas-connections { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; transform: translateZ(3px); }
.atlas-connection { fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 9 10; vector-effect: non-scaling-stroke; opacity: .82; animation: atlas-neon-flow 1.8s linear infinite; }
.atlas-connection.coral { stroke: var(--atlas-coral); filter: drop-shadow(0 0 3px #ff7167) drop-shadow(0 0 8px rgba(255,113,103,.78)); }
.atlas-connection.blue { stroke: var(--atlas-cyan); filter: drop-shadow(0 0 3px #45c3ed) drop-shadow(0 0 9px rgba(69,195,237,.82)); animation-duration: 1.45s; animation-direction: reverse; }

.atlas-stack { position: absolute; z-index: 2; transform-style: preserve-3d; }
.atlas-layer,.atlas-face { position: absolute; inset: 0; border-radius: inherit; }
.atlas-layer { border: 1px solid rgba(255,255,255,.025); background: linear-gradient(145deg,#27313b,#1c242d); box-shadow: 8px 14px 25px rgba(0,0,0,.25); }
.atlas-layer:nth-child(1) { transform: translateZ(-14px) translate(4px,6px); }
.atlas-layer:nth-child(2) { transform: translateZ(-7px) translate(2px,3px); }
.atlas-core .atlas-layer:nth-child(3) { transform: translateZ(-22px) translate(6px,9px); }
.atlas-face { z-index: 4; overflow: hidden; background: linear-gradient(145deg,#394550,#323c47 60%,#2b343f); border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 1px rgba(255,255,255,.08),8px 18px 35px rgba(0,0,0,.22); backface-visibility: hidden; }
.atlas-face::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg,rgba(255,255,255,.05),transparent 32%); }

.atlas-module { top: 6%; width: 18%; height: 15%; border-radius: 13px; transform: translateZ(3px); animation: atlas-module-lift linear both; animation-timeline: --atlasHeroTimeline; animation-range: entry 0% exit 30%; }
.atlas-module.sales { left: 3%; } .atlas-module.purchases { left: 28.3%; } .atlas-module.support { left: 53.7%; } .atlas-module.inventory { left: 79%; }
.atlas-module .atlas-face { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.atlas-module h3 { margin: 4px 0 2px; font-size: clamp(7px,1.15vw,14px); font-weight: 650; }
.atlas-module p { margin: 0; font-size: clamp(5px,.8vw,10px); animation: atlas-number-glow 2.2s ease-in-out infinite; }
.atlas-module-icon,.atlas-cap-icon { display: grid; place-items: center; border-radius: 50%; background: rgba(20,25,30,.42); font-weight: 750; }
.atlas-module-icon { width: clamp(20px,2.7vw,34px); height: clamp(20px,2.7vw,34px); }
.atlas-cap-icon { width: clamp(18px,2.2vw,28px); height: clamp(18px,2.2vw,28px); font-size: 8px; }
.hero-atlas-3d .green { color: var(--atlas-green); border-color: rgba(85,215,139,.45); } .hero-atlas-3d .blue { color: var(--atlas-cyan); border-color: rgba(69,195,237,.45); } .hero-atlas-3d .purple { color: var(--atlas-purple); border-color: rgba(161,109,245,.45); } .hero-atlas-3d .orange { color: var(--atlas-orange); border-color: rgba(246,154,86,.45); }
.atlas-module-icon,.atlas-cap-icon { border-width: 1px; border-style: solid; }

.atlas-core { left: 27%; top: 29%; width: 46%; height: 18%; border-radius: 18px; transform: translateZ(4px); animation: atlas-core-lift linear both; animation-timeline: --atlasHeroTimeline; animation-range: entry 0% exit 36%; }
.atlas-core-face { display: flex; align-items: center; justify-content: center; gap: clamp(10px,2vw,22px); }
.atlas-symbol { color: var(--atlas-cyan); font-size: clamp(26px,5vw,66px); line-height: 1; text-shadow: 0 0 12px rgba(69,195,237,.2); transform: translateZ(12px); }
.atlas-core h3 { margin: 0; font-size: clamp(10px,2vw,26px); line-height: 1; font-weight: 500; }
.atlas-core h3 span { display: block; margin-top: 5px; color: var(--atlas-cyan); }
.atlas-core p { margin: 8px 0 0; color: var(--atlas-muted); font-size: clamp(5px,.8vw,10px); }
.atlas-core b { color: var(--atlas-coral); padding: 0 2px; }

.atlas-capability { top: 57%; width: 27%; height: 19%; border-radius: 15px; transform: translateZ(3px); animation: atlas-capability-lift linear both; animation-timeline: --atlasHeroTimeline; animation-range: entry 2% exit 42%; }
.atlas-capability.automation { left: 4%; } .atlas-capability.ai { left: 36.5%; } .atlas-capability.software { left: 69%; }
.atlas-capability .atlas-face { padding: 7%; }
.atlas-capability header { display: flex; align-items: center; gap: 7px; }
.atlas-capability h3 { margin: 0; font-size: clamp(7px,1vw,12px); }
.atlas-capability ul { list-style: none; margin: 8px 0 0; padding: 0; }
.atlas-capability li { position: relative; margin-top: 4px; padding-left: 11px; color: var(--atlas-muted); font-size: clamp(5px,.67vw,9px); }
.atlas-capability li::before { content: "✓"; position: absolute; left: 0; color: var(--atlas-coral); }

.atlas-dashboard { left: 3%; top: 81%; width: 94%; height: 16%; border-radius: 15px; transform: translateZ(3px); animation: atlas-dashboard-lift linear both; animation-timeline: --atlasHeroTimeline; animation-range: entry 4% exit 48%; }
.atlas-dashboard-face { display: grid; grid-template-columns: 1.8fr repeat(3,.8fr); }
.atlas-chart { padding: 8px 13px; border-right: 1px solid rgba(255,255,255,.06); }
.atlas-chart h3 { margin: 0; font-size: clamp(7px,1vw,12px); } .atlas-chart p { margin: 2px 0 0; color: var(--atlas-muted); font-size: clamp(4px,.55vw,7px); }
.atlas-chart svg { width: 100%; height: 45%; margin-top: 3px; overflow: visible; } .atlas-chart polygon { fill: url(#heroChartGradient); } .atlas-chart polyline { fill: none; stroke: var(--atlas-cyan); stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.atlas-metric { display: flex; flex-direction: column; justify-content: center; padding: 7px 10px; border-right: 1px solid rgba(255,255,255,.06); }
.atlas-metric:last-child { border: 0; } .atlas-metric span { color: var(--atlas-muted); font-size: clamp(4px,.55vw,7px); } .atlas-metric strong { margin-top: 3px; color: #f4fbff; font-size: clamp(9px,1.6vw,20px); font-weight: 600; animation: atlas-metric-glow 1.9s ease-in-out infinite; } .atlas-metric:nth-child(3) strong { animation-delay: .3s; } .atlas-metric:nth-child(4) strong { animation-delay: .6s; } .atlas-metric small { margin-top: 3px; color: var(--atlas-green); font-size: clamp(4px,.55vw,7px); }

@keyframes atlas-world-scroll {
  0%,12% { opacity: 1; transform: rotateX(2deg) rotateZ(0deg) scale(.94) translateY(0); }
  42% { opacity: 1; transform: rotateX(24deg) rotateZ(-3deg) scale(.97) translateY(2px); }
  78%,100% { opacity: 1; transform: rotateX(56deg) rotateZ(-9deg) scale(1) translateY(0); }
}
@keyframes atlas-module-lift { 0% { transform: translateZ(3px); } 65%,100% { transform: translateZ(52px); } }
@keyframes atlas-core-lift { 0% { transform: translateZ(4px); } 65%,100% { transform: translateZ(138px); } }
@keyframes atlas-capability-lift { 0% { transform: translateZ(3px); } 65%,100% { transform: translateZ(88px); } }
@keyframes atlas-dashboard-lift { 0% { transform: translateZ(3px); } 65%,100% { transform: translateZ(62px); } }
@keyframes atlas-connection-scroll { 0%,10% { stroke-dashoffset: 260; opacity: .08; } 55%,100% { stroke-dashoffset: 0; opacity: .78; } }
@keyframes atlas-neon-flow { 0% { stroke-dashoffset: 38; opacity: .5; } 45% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: .62; } }
@keyframes atlas-number-glow { 0%,100% { text-shadow: 0 0 2px currentColor; opacity: .76; } 50% { text-shadow: 0 0 5px currentColor,0 0 12px currentColor; opacity: 1; } }
@keyframes atlas-metric-glow { 0%,100% { color: #f4fbff; text-shadow: 0 0 3px rgba(69,195,237,.38); } 50% { color: #fff; text-shadow: 0 0 5px #45c3ed,0 0 14px #45c3ed,0 0 24px rgba(69,195,237,.72); } }

@media (max-width: 920px) { .hero { height: 128vh; } .hero > .hero-inner { top: 0; height: 100vh; overflow: hidden; align-content: center; } .hero-atlas-3d { transform: translateY(-24px); } .atlas-scene-camera { width: min(96vw,780px); margin-left: 0; } }
@media (max-width: 520px) { .hero { height: 122vh; } .hero-atlas-3d { transform: translateY(-12px); } .atlas-scene-camera { width: 112vw; margin-left: -12vw; } }
@media (prefers-reduced-motion: reduce) { .hero { height: auto; } .hero > .hero-inner { position: relative; top: auto; height: auto; } .hero-atlas-3d { transform: translate(76px, -57px); } .atlas-world,.atlas-connection,.atlas-module,.atlas-core,.atlas-capability,.atlas-dashboard,.atlas-module p,.atlas-metric strong { animation: none; } .atlas-world,.hero-atlas-3d:hover .atlas-world { transform: rotateX(52deg) rotateZ(-8deg) scale(.92); } .atlas-module { transform: translateZ(48px); } .atlas-core { transform: translateZ(130px); } .atlas-capability { transform: translateZ(82px); } .atlas-dashboard { transform: translateZ(58px); } .atlas-connection { stroke-dashoffset: 0; opacity: .82; } }

@supports not (animation-timeline: view()) {
  .hero { height: auto; }
  .hero > .hero-inner { position: relative; top: auto; height: auto; }
  .atlas-world,.atlas-module,.atlas-core,.atlas-capability,.atlas-dashboard { animation: none; }
  .atlas-world { transform: rotateX(52deg) rotateZ(-8deg) scale(.92); }
  .atlas-module { transform: translateZ(48px); }
  .atlas-core { transform: translateZ(130px); }
  .atlas-capability { transform: translateZ(82px); }
  .atlas-dashboard { transform: translateZ(58px); }
  .atlas-connection { stroke-dashoffset: 0; opacity: .78; }
}