:root {
  --cursor-size: 20px;
  --cursor-hover-size: 80px;
  --brand-blue: #2563EB;
  --brand-black: #020205;
}
body {
  font-family: 'Open Sans', 'Prompt', sans-serif;
  cursor: none;
  overflow-x: hidden;
  background-color: var(--brand-black);
}
h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: 'Montserrat', 'Prompt', sans-serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--brand-black); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-blue); }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 4px;
}

/* Liquid Glass Card Style */
.glass-panel {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-panel::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
  transition: 0.5s;
  pointer-events: none;
  z-index: 20;
}
.glass-panel:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(37, 99, 235, 0.14);
}
.glass-panel:hover::before {
  left: 100%;
  transition: 0.7s ease-in-out;
}

/* Stacked Carousel Logic */
.stack-section {
  --_offset-steps: 4rem;
  --_scale-steps: 12;
  --_opacity-steps: 15;
  --_offset-steps-two: calc(var(--_offset-steps) * -1);
  --_offset-steps-three: calc(var(--_offset-steps) * -2);
  --scale-steps-two: calc(1 - var(--_scale-steps) * 0.01);
  --scale-steps-three: calc(1 - var(--_scale-steps) * 0.02);
  --opacity-steps-two: calc(1 - var(--_opacity-steps) * 0.02);
  --opacity-steps-three: calc(1 - var(--_opacity-steps) * 0.04);
  display: grid;
  grid-template-areas: "stack";
  width: min(calc(100% - 2rem), 32rem);
  margin: 0 auto;
}
.stack-card {
  grid-area: stack;
  transition: 800ms cubic-bezier(0.23, 1, 0.32, 1);
  translate: var(--_offset) 0;
  order: var(--_order);
  z-index: var(--_order);
  scale: var(--_scale);
  opacity: var(--_opacity);
  cursor: none;
  user-select: none;
  transform-style: preserve-3d;
  background: rgba(2, 2, 5, 0.72);
}
.stack-card:nth-of-type(1) { --_order: var(--_1-order); --_scale: var(--_1-scale); --_opacity: var(--_1-opacity); --_offset: var(--_1-offset); }
.stack-card:nth-of-type(2) { --_order: var(--_2-order); --_scale: var(--_2-scale); --_opacity: var(--_2-opacity); --_offset: var(--_2-offset); }
.stack-card:nth-of-type(3) { --_order: var(--_3-order); --_scale: var(--_3-scale); --_opacity: var(--_3-opacity); --_offset: var(--_3-offset); }
.stack-card:nth-of-type(4) { --_order: var(--_4-order); --_scale: var(--_4-scale); --_opacity: var(--_4-opacity); --_offset: var(--_4-offset); }
.stack-section.card-1-active {
  --_1-order: 4; --_1-scale: 1; --_1-opacity: 1; --_1-offset: 0;
  --_2-order: 3; --_2-scale: var(--scale-steps-two); --_2-opacity: var(--opacity-steps-two); --_2-offset: var(--_offset-steps-two);
  --_3-order: 2; --_3-scale: var(--scale-steps-three); --_3-opacity: var(--opacity-steps-three); --_3-offset: var(--_offset-steps-three);
  --_4-order: 1; --_4-scale: calc(1 - var(--_scale-steps) * 0.03); --_4-opacity: calc(1 - var(--_opacity-steps) * 0.06); --_4-offset: calc(var(--_offset-steps) * -3);
}
.stack-section.card-2-active {
  --_2-order: 4; --_2-scale: 1; --_2-opacity: 1; --_2-offset: 0;
  --_3-order: 3; --_3-scale: var(--scale-steps-two); --_3-opacity: var(--opacity-steps-two); --_3-offset: var(--_offset-steps-two);
  --_4-order: 2; --_4-scale: var(--scale-steps-three); --_4-opacity: var(--opacity-steps-three); --_4-offset: var(--_offset-steps-three);
  --_1-order: 1; --_1-scale: calc(1 - var(--_scale-steps) * 0.03); --_1-opacity: calc(1 - var(--_opacity-steps) * 0.06); --_1-offset: calc(var(--_offset-steps) * -3);
}
.stack-section.card-3-active {
  --_3-order: 4; --_3-scale: 1; --_3-opacity: 1; --_3-offset: 0;
  --_4-order: 3; --_4-scale: var(--scale-steps-two); --_4-opacity: var(--opacity-steps-two); --_4-offset: var(--_offset-steps-two);
  --_1-order: 2; --_1-scale: var(--scale-steps-three); --_1-opacity: var(--opacity-steps-three); --_1-offset: var(--_offset-steps-three);
  --_2-order: 1; --_2-scale: calc(1 - var(--_scale-steps) * 0.03); --_2-opacity: calc(1 - var(--_opacity-steps) * 0.06); --_2-offset: calc(var(--_offset-steps) * -3);
}
.stack-section.card-4-active {
  --_4-order: 4; --_4-scale: 1; --_4-opacity: 1; --_4-offset: 0;
  --_1-order: 3; --_1-scale: var(--scale-steps-two); --_1-opacity: var(--opacity-steps-two); --_1-offset: var(--_offset-steps-two);
  --_2-order: 2; --_2-scale: var(--scale-steps-three); --_2-opacity: var(--opacity-steps-three); --_2-offset: var(--_offset-steps-three);
  --_3-order: 1; --_3-scale: calc(1 - var(--_scale-steps) * 0.03); --_3-opacity: calc(1 - var(--_opacity-steps) * 0.06); --_3-offset: calc(var(--_offset-steps) * -3);
}

/* Ambient Liquid Blobs */
.liquid-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.6;
  z-index: -1;
  animation: float 10s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes float {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30px, 50px) scale(1.1); }
}

/* Custom Cursor */
#cursor {
  position: fixed; top: 0; left: 0;
  width: var(--cursor-size); height: var(--cursor-size);
  background-color: white; border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s, background-color 0.3s;
  mix-blend-mode: overlay;
  backdrop-filter: blur(2px);
}
#cursor.hovered {
  width: var(--cursor-hover-size); height: var(--cursor-hover-size);
  opacity: 0.5; background-color: rgba(37, 99, 235, 0.55); mix-blend-mode: normal;
  border: 1px solid rgba(255,255,255,0.5);
}

/* Loading Animation */
#preloader {
  position: fixed; inset: 0; background: var(--brand-black);
  z-index: 10000; display: flex; justify-content: center; align-items: center;
  transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1);
}
#preloader.loaded { transform: translateY(-100%); }
.loader-bar { width: 200px; height: 1px; background: rgba(255,255,255,0.1); position: relative; overflow: hidden; }
.loader-progress { position: absolute; left: 0; top: 0; height: 100%; background: var(--brand-blue); width: 0%; transition: width 0.5s ease; }

/* Animation Utilities */
.will-change-transform { will-change: transform; }
.split-line { overflow: hidden; display: block; }
.split-line span {
  display: block;
  transform: translateY(100%);
  transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.hero-revealed .split-line span { transform: translateY(0); }
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }

/* Grid Transition */
.service-grid {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Marquee */
.marquee-container { mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); }
.marquee-content { display: flex; animation: scroll 30s linear infinite; }
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Inputs */
.input-group { position: relative; }
.input-group input {
  width: 100%; background: transparent; border: none;
  border-bottom: 1px solid rgba(255,255,255,0.2); padding: 10px 0;
  color: white; outline: none; transition: border-color 0.3s;
}
.input-group label {
  position: absolute; top: 10px; left: 0; color: rgba(255,255,255,0.5);
  pointer-events: none; transition: 0.3s ease all;
}
.input-group input:focus { border-bottom-color: var(--brand-blue); }
.input-group input:focus ~ label, .input-group input:not(:placeholder-shown) ~ label {
  top: -12px; font-size: 0.75rem; color: var(--brand-blue);
}

/* Noise */
.noise-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 50; opacity: 0.04;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.55) 0 0.5px, transparent 0.7px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,0.35) 0 0.45px, transparent 0.7px);
  background-size: 4px 4px, 5px 5px;
  mix-blend-mode: overlay;
}

/* Custom Motion Animations for Gallery */
@keyframes slide-right { 0% { transform: translateX(-20%); } 100% { transform: translateX(0%); } }
@keyframes slide-left { 0% { transform: translateX(0%); } 100% { transform: translateX(-20%); } }
@keyframes pulse-soft { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
.motion-banner-anim { animation: slide-right 4s ease-in-out infinite alternate; }
.motion-banner-anim-rev { animation: slide-left 5s ease-in-out infinite alternate; }
.gallery-card-hover:hover .gallery-overlay { opacity: 1; }
.gallery-card-hover:hover .gallery-img { transform: scale(1.05); }

/* Filtering Transitions */
.gallery-item {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-item.hidden-item {
  display: none;
}
.gallery-item.fading-out {
  opacity: 0;
  transform: scale(0.95);
}

@media (pointer: coarse) {
  body,
  .stack-card {
    cursor: auto;
  }

  #cursor {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════
   ECOSSISTEMA JPC LAB — #sobre section
═══════════════════════════════════════════════════════ */

/* Container — square, max 500px, relative for absolute children */
.eco-container {
  --eco-mx: 50%;
  --eco-my: 50%;
}
.eco-container::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 180px at var(--eco-mx) var(--eco-my), rgba(37,99,235,0.07), transparent 70%);
  pointer-events: none;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 4px;
}
.eco-container:hover::after { opacity: 1; }

/* Nucleus: circular center node */
.eco-nucleus {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 14%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(2,2,5,0.96);
  border: 1px solid rgba(37,99,235,0.45);
  box-shadow: 0 0 28px rgba(37,99,235,0.22), inset 0 0 14px rgba(37,99,235,0.07);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  opacity: 0;
  scale: 0.65;
  transition: opacity 0.65s ease, scale 0.65s cubic-bezier(0.34,1.4,0.64,1);
}
.eco-container.eco-visible .eco-nucleus { opacity: 1; scale: 1; }

/* SVG rings */
.eco-nucleus-ring {
  opacity: 0;
  transition: opacity 0.6s ease 0.25s;
}
.eco-container.eco-visible .eco-nucleus-ring { opacity: 1; }
.eco-nucleus-ring-outer {
  opacity: 0;
  animation: eco-ring-spin 18s linear infinite;
  transform-origin: 50px 50px;
  transition: opacity 0.6s ease 0.35s;
}
.eco-container.eco-visible .eco-nucleus-ring-outer { opacity: 1; }
@keyframes eco-ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* SVG connection lines — drawn via stroke-dashoffset */
.eco-svg-line {
  stroke-dasharray: 54;
  stroke-dashoffset: 54;
  transition: stroke-dashoffset 0.95s cubic-bezier(0.4,0,0.2,1),
              stroke 0.4s ease,
              opacity 0.4s ease;
}
.eco-container.eco-visible #eco-ln-0 { stroke-dashoffset: 0; transition-delay: 0.3s; }
.eco-container.eco-visible #eco-ln-1 { stroke-dashoffset: 0; transition-delay: 0.45s; }
.eco-container.eco-visible #eco-ln-2 { stroke-dashoffset: 0; transition-delay: 0.6s; }
.eco-container.eco-visible #eco-ln-3 { stroke-dashoffset: 0; transition-delay: 0.75s; }

/* SVG endpoint dots */
.eco-endpoint {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.eco-container.eco-visible .eco-endpoint { opacity: 1; transition-delay: 1s; }

/* Pillar node cards — absolutely positioned in corners */
.eco-node {
  position: absolute;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.34,1.2,0.64,1);
  z-index: 5;
}
.eco-container.eco-visible .eco-node { opacity: 1; transform: translateY(0); }
.eco-container.eco-visible [data-node="0"] { transition-delay: 0.9s; }
.eco-container.eco-visible [data-node="1"] { transition-delay: 1.0s; }
.eco-container.eco-visible [data-node="2"] { transition-delay: 1.1s; }
.eco-container.eco-visible [data-node="3"] { transition-delay: 1.2s; }

/* Node inner card */
.eco-node-inner {
  background: rgba(255,255,255,0.025);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-top: 1px solid rgba(255,255,255,0.11);
  border-left: 1px solid rgba(255,255,255,0.07);
  border-right: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 12px;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.eco-node:hover .eco-node-inner,
.eco-node:focus-visible .eco-node-inner,
.eco-node.eco-active .eco-node-inner {
  background: rgba(37,99,235,0.07);
  border-top-color: rgba(37,99,235,0.3);
  border-left-color: rgba(37,99,235,0.2);
  border-right-color: rgba(37,99,235,0.15);
  border-bottom-color: rgba(37,99,235,0.1);
  box-shadow: 0 0 22px rgba(37,99,235,0.1);
}
.eco-node:focus-visible { outline: none; }
.eco-node:focus-visible .eco-node-inner {
  outline: 2px solid rgba(37,99,235,0.6);
  outline-offset: 2px;
}
.eco-node-icon { transition: color 0.3s ease; }
.eco-node.eco-active .eco-node-icon { color: rgba(37,99,235,0.9) !important; }

/* Focus state: dim non-active, highlight active */
.eco-container.eco-focusing .eco-node { opacity: 0.25; }
.eco-container.eco-focusing .eco-node.eco-active { opacity: 1; }
.eco-container.eco-focusing .eco-svg-line { opacity: 0.12; }
.eco-container.eco-focusing .eco-svg-line.eco-line-active {
  opacity: 1;
  stroke: rgba(37,99,235,0.75);
}
.eco-container.eco-focusing .eco-endpoint { opacity: 0.15; }
.eco-container.eco-focusing .eco-endpoint.eco-ep-active { opacity: 1; }

/* ═══════════════════════════════════════════════════════
   PROCESS STRIP
═══════════════════════════════════════════════════════ */
.eco-proc-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
/* Horizontal connecting track (desktop) */
.eco-proc-track {
  position: absolute;
  height: 1px;
  background: rgba(255,255,255,0.06);
  pointer-events: none;
  left: 12.5%;
  right: 12.5%;
  top: 5px;
  overflow: hidden;
}
.eco-proc-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(37,99,235,0.85), rgba(37,99,235,0.2));
  transition: width 1.4s cubic-bezier(0.4,0,0.2,1) 0.2s;
}
.eco-proc-fill.eco-proc-filled { width: 100%; }

.eco-proc-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 12px;
  transition: opacity 0.3s ease;
}
.eco-proc-step:hover .eco-proc-dot {
  background: rgba(37,99,235,0.35);
  box-shadow: 0 0 10px rgba(37,99,235,0.4);
}
.eco-proc-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(37,99,235,0.12);
  border: 1.5px solid rgba(37,99,235,0.4);
  flex-shrink: 0;
  margin-bottom: 16px;
  position: relative;
  z-index: 2;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.eco-proc-content { /* textual content of each step */ }

/* Mobile: stack vertically with left line */
@media (max-width: 1023px) {
  .eco-proc-steps {
    grid-template-columns: 1fr;
    padding-left: 24px;
  }
  .eco-proc-steps::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 8px;
    width: 1px;
    height: calc(100% - 24px);
    background: rgba(255,255,255,0.06);
    pointer-events: none;
  }
  .eco-proc-track { display: none; }
  .eco-proc-step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    padding: 0 0 24px 0;
  }
  .eco-proc-step:last-child { padding-bottom: 0; }
  .eco-proc-dot {
    position: absolute;
    left: -20px;
    top: 3px;
    margin-bottom: 0;
  }
  .eco-proc-content { width: 100%; }
}

/* ═══════════════════════════════════════════════════════
   TRUST BAND
═══════════════════════════════════════════════════════ */
.eco-trust-item {
  transition: background 0.3s ease;
}
.eco-trust-item:hover {
  background: rgba(37,99,235,0.04);
}
@media (max-width: 639px) {
  .eco-trust-item + .eco-trust-item {
    border-top: 1px solid rgba(255,255,255,0.04);
  }
}

/* ═══════════════════════════════════════════════════════
   REDUCED MOTION OVERRIDES
═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  .liquid-blob,
  .marquee-content,
  .motion-banner-anim,
  .motion-banner-anim-rev {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .eco-svg-line { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; transition: none !important; }
  .eco-nucleus { transition: opacity 0.3s ease !important; scale: 1 !important; }
  .eco-node { transition: opacity 0.3s ease !important; transform: none !important; }
  .eco-nucleus-ring-outer { animation: none !important; opacity: 1 !important; transition: none !important; }
  .eco-proc-fill { transition: none !important; }
}