:root{
  --bg: #0A0E17;
  --bg-elevated: #111726;
  --bg-elevated-2: #0d1220;
  --line: rgba(237,239,247,0.09);
  --text: #EDEFF7;
  --muted: #8A93A6;
  --accent: #4CF2C7;
  --accent-2: #7B7FF6;
  --accent-ink: #0AA98F;
  --accent-2-ink: #5B4FE0;
  --accent-rgb: 76,242,199;
  --accent-2-rgb: 123,127,246;
  --font-display: 'Manrope', sans-serif;
  --font-body: 'Manrope', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,h4,.display-font{font-family:var(--font-display); letter-spacing:-0.02em;}
a{text-decoration:none;}
.eyebrow{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-size:0.72rem;
  color:var(--accent);
}
.text-muted-custom{color:var(--muted) !important;}
.text-accent{color:var(--accent) !important;}

/* ===== ICONS (inline SVG sprite) ===== */
.icon-inline{
  width:1em; height:1em;
  display:inline-block;
  vertical-align:-0.15em;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.icon-inline[fill="currentColor"] circle{fill:currentColor;}

/* ===== NAVBAR ===== */
.navbar-custom{
  background:transparent;
  backdrop-filter:none;
  border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.navbar-custom.scrolled{
  background:rgba(10,14,23,0.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.navbar-custom.menu-open{
  background:rgba(10,14,23,0.97);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
@media (max-width: 991.98px){
  .navbar-custom .navbar-collapse{
    background:rgba(10,14,23,0.97);
    backdrop-filter:blur(12px);
    border:1px solid var(--line);
    border-radius:14px;
    margin-top:0.85rem;
    padding:1.1rem 1.25rem;
  }
}
.navbar-custom .nav-link{
  color:var(--text);
  font-size:0.92rem;
  font-weight:500;
  margin:0 0.6rem;
  opacity:0.78;
  position:relative;
  transition:opacity .2s ease;
}
.navbar-custom .nav-link::after{
  content:'';
  position:absolute; left:0; bottom:-4px;
  width:0; height:2px;
  background:var(--accent);
  transition:width .25s ease;
}
.navbar-custom .nav-link:hover{opacity:1;}
.navbar-custom .nav-link:hover::after,
.navbar-custom .nav-link.active::after{width:100%;}
.navbar-custom .nav-link.active{color:var(--accent); opacity:1;}
.brand-mark{
  width:34px; height:34px; border-radius:9px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; color:#06120F;
  box-shadow:0 0 24px rgba(var(--accent-rgb),0.35);
}

.btn-accent{
  background:linear-gradient(120deg, #6FFFDA 0%, var(--accent-ink) 100%);
  color:#06120F;
  font-weight:600;
  border:none;
  padding:0.6rem 1.5rem;
  border-radius:999px;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  position:relative;
  overflow:hidden;
}
.btn-accent:hover{
  filter:brightness(1.06);
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(var(--accent-rgb),0.3);
  color:#06120F;
}
.btn-outline-custom{
  border:1px solid var(--line);
  color:var(--text);
  padding:0.6rem 1.5rem;
  border-radius:999px;
  font-weight:500;
  transition:border-color .2s ease, color .2s ease, transform .2s ease;
}
.btn-outline-custom:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-2px);}
.btn-ghost-light{
  background:rgba(237,239,247,0.08);
  color:var(--text);
  border:1px solid var(--line);
  padding:0.6rem 1.5rem;
  border-radius:999px;
  font-weight:500;
  transition:all .2s ease;
}
.btn-ghost-light:hover{background:rgba(237,239,247,0.14); color:var(--text); transform:translateY(-2px);}

/* ===== HERO ===== */
.hero{
  position:relative;
  min-height:92vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--bg);
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  overflow:hidden;
  background:
    radial-gradient(ellipse 70% 55% at 20% 10%, rgba(var(--accent-2-rgb),0.20), transparent 60%),
    radial-gradient(ellipse 55% 45% at 85% 30%, rgba(var(--accent-rgb),0.14), transparent 60%),
    linear-gradient(180deg, #0A0E17 0%, #0A0E17 100%);
}
.hero-bg::before{
  content:'';
  position:absolute; inset:-25%;
  background:conic-gradient(from 0deg at 50% 45%,
    rgba(var(--accent-2-rgb),0.16),
    rgba(var(--accent-rgb),0.12),
    transparent 35%,
    rgba(var(--accent-2-rgb),0.14),
    rgba(var(--accent-rgb),0.10));
  filter:blur(90px);
  animation:auroraSpin 44s linear infinite;
  mask-image:radial-gradient(ellipse 60% 60% at 50% 32%, black, transparent);
}
@keyframes auroraSpin{
  to{ transform:rotate(360deg); }
}
.blob{
  position:absolute;
  filter:blur(70px);
  opacity:0.6;
  z-index:0;
  animation:liquidMorph 17s ease-in-out infinite;
}
.blob-1{width:400px; height:400px; background:linear-gradient(135deg, var(--accent-2), var(--accent)); top:-110px; left:-90px; animation-delay:0s;}
.blob-2{width:340px; height:340px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); top:110px; right:-110px; animation-delay:-6s;}
.blob-3{width:280px; height:280px; background:linear-gradient(135deg, var(--accent-2), var(--accent)); bottom:-90px; left:32%; animation-delay:-11s;}
@keyframes liquidMorph{
  0%,100%{
    transform:translate(0,0) rotate(0deg) scale(1);
    border-radius:60% 40% 55% 45% / 50% 60% 40% 50%;
  }
  25%{
    transform:translate(22px,-26px) rotate(8deg) scale(1.06);
    border-radius:45% 55% 40% 60% / 55% 45% 62% 38%;
  }
  50%{
    transform:translate(-16px,18px) rotate(-6deg) scale(0.96);
    border-radius:55% 45% 65% 35% / 42% 58% 38% 62%;
  }
  75%{
    transform:translate(12px,10px) rotate(4deg) scale(1.03);
    border-radius:40% 60% 45% 55% / 60% 40% 58% 42%;
  }
}
.hero-content{position:relative; z-index:1;}
.hero h1{
  font-size:clamp(2.3rem, 4.6vw, 3.9rem);
  font-weight:700;
  line-height:1.08;
}
@media (prefers-reduced-motion: reduce){
  .blob, .hero-bg::before{animation:none;}
}

/* ===== REVEAL ON SCROLL ===== */
/* Visible by default. Only hidden once JS confirms it is running and has
   attached observers (html.js-reveal-ready) — this way content is never
   permanently invisible if a script fails or is blocked. */
.reveal, .reveal-scale{ opacity:1; transform:none; }
.js-reveal-ready .reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.js-reveal-ready .reveal.active{opacity:1; transform:translateY(0);}
.js-reveal-ready .reveal-scale{
  opacity:0;
  transform:scale(0.92);
  transition:opacity .6s ease, transform .6s ease;
}
.js-reveal-ready .reveal-scale.active{opacity:1; transform:scale(1);}
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-scale{opacity:1 !important; transform:none !important; transition:none !important;}
}

/* ===== SECTIONS ===== */
section{padding:6rem 0; position:relative;}
.section-alt{background:var(--bg-elevated); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

/* ===== LIGHT SECTIONS (alternating light/dark rhythm) ===== */
.section-light{
  background:#F6F7FB;
  color:#12151C; 
}
.section-light h1, .section-light h2, .section-light h3,
.section-light h4, .section-light h5, .section-light h6{color:#12151C;}
.section-light p{color:#4A5262;}
.section-light .text-muted-custom{color:#5B6472 !important;}
.section-light .eyebrow{color:var(--accent-ink);}
.section-light .text-accent{color:var(--accent-ink) !important;}
.section-light .section-lead{color:#5B6472;}

.section-light .feature-card{
  background:#FFFFFF;
  border:1px solid rgba(10,14,23,0.07);
  box-shadow:0 4px 18px rgba(16,24,40,0.05);
}
.section-light .feature-card:hover{
  border-color:rgba(var(--accent-rgb),0.5);
  box-shadow:0 16px 36px rgba(16,24,40,0.09);
}
.section-light .feature-icon-box{
  background:rgba(var(--accent-rgb),0.14);
  color:var(--accent-ink);
}

.section-light .mini-feature-row{
  background:#FFFFFF;
  border:1px solid rgba(10,14,23,0.07);
  box-shadow:0 2px 10px rgba(16,24,40,0.04);
}
.section-light .mini-feature-row:hover{border-color:rgba(var(--accent-2-rgb),0.4);}
.section-light .mini-feature-icon{background:rgba(var(--accent-2-rgb),0.14); color:var(--accent-2-ink);}
.section-light .mini-feature-row p{color:#5B6472;}

.section-light .bg-dark-panel{
  background:#FFFFFF;
  border:1px solid rgba(10,14,23,0.07);
  box-shadow:0 4px 18px rgba(16,24,40,0.05);
}

.section-light .num-item{/*border-top:1px solid rgba(10,14,23,0.08);*/}
.section-light .num-item p{color:#5B6472;}
.section-light .num-badge{color:var(--accent-ink);}

.section-light .btn-outline-custom{border-color:rgba(10,14,23,0.16); color:#12151C;}
.section-light .btn-outline-custom:hover{border-color:var(--accent-ink); color:var(--accent-ink);}
.section-light .btn-ghost-light{background:rgba(10,14,23,0.05); color:#12151C; border-color:rgba(10,14,23,0.1);}
.section-light .btn-ghost-light:hover{background:rgba(10,14,23,0.09);}

.section-light .form-control-custom{background:#FFFFFF; border-color:rgba(10,14,23,0.15); color:#12151C;}
.section-light .form-control-custom::placeholder{color:#8A93A6;}
.section-light .form-label-custom{color:#5B6472;}

.section-light .accordion-custom .accordion-item{background:#FFFFFF; border-color:rgba(10,14,23,0.08);}
.section-light .accordion-custom .accordion-button{background:#FFFFFF; color:#12151C;}
/*.section-light .accordion-custom .accordion-button:not(.collapsed){background:rgba(var(--accent-rgb),0.1); color:var(--accent-ink);}*/
.section-light .accordion-custom .accordion-button::after{filter:none;}
.section-light .accordion-custom .accordion-body{color:#5B6472;}

.section-light .cta-band{
  /*background:linear-gradient(135deg, rgba(var(--accent-2-rgb),0.10), rgba(var(--accent-rgb),0.08));*/
  /*border:1px solid rgba(10,14,23,0.08);*/
}

.section-light .stat-num{color:#12151C;}
.section-light .stat-label{color:#5B6472;}
.section-title{
  font-size:clamp(1.9rem,3vw,2.7rem);
  font-weight:700;
}
.section-lead{color:var(--muted); max-width:640px;}

.bg-dark-panel{
  background:linear-gradient(160deg, var(--bg-elevated), var(--bg-elevated-2));
  border:1px solid var(--line);
  border-radius:20px;
}

/* ===== FEATURE / SOLUTION CARDS ===== */
.feature-card{
  background:var(--bg-elevated);
  border:1px solid var(--line);
  border-radius:16px;
  padding:2rem;
  height:100%;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  position:relative;
  overflow:hidden;
}
.feature-card::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(circle at 30% 0%, rgba(var(--accent-rgb),0.08), transparent 60%);
  opacity:0;
  transition:opacity .3s ease;
}
.feature-card:hover{
  border-color:rgba(var(--accent-rgb),0.4);
  transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(0,0,0,0.35);
}
.feature-card:hover::before{opacity:1;}
.feature-icon-box{
  width:52px; height:52px;
  border-radius:12px;
  background:rgba(var(--accent-rgb),0.1);
  color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem;
  margin-bottom:1.2rem;
  transition:transform .25s ease, background .25s ease;
}
.feature-card:hover .feature-icon-box{
  transform:scale(1.1) rotate(-4deg);
  background:rgba(var(--accent-rgb),0.18);
}
.feature-card h5,.feature-card h6{font-family:var(--font-display); font-weight:600;}

.mini-feature-row{
  display:flex;
  align-items:flex-start;
  gap:1rem;
  background:var(--bg-elevated);
  border:1px solid var(--line);
  border-radius:14px;
  padding:1.2rem 1.4rem;
  margin-bottom:1rem;
  transition:transform .2s ease, border-color .2s ease;
}
.mini-feature-row:hover{transform:translateX(6px); border-color:rgba(var(--accent-rgb),0.35);}
.mini-feature-icon{
  width:44px; height:44px; min-width:44px;
  border-radius:10px;
  background:rgba(var(--accent-2-rgb),0.14);
  color:var(--accent-2);
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem;
}
.mini-feature-row h6{font-family:var(--font-display); font-weight:600; margin-bottom:0.2rem;}
.mini-feature-row p{color:var(--muted); font-size:0.88rem; margin:0;}

/* ===== PARTNERS STRIP (logos scrolling) ===== */
.partners-strip{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:2.4rem 0;
  position:relative;
  z-index:1;
  overflow:hidden;
}
.partners-strip .partners-label{
  font-family:var(--font-mono);
  font-size:0.72rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.14em;
  text-align:center;
  margin-bottom:1.4rem;
}
.partners-track{
  display:flex;
  align-items:center;
  gap:3.2rem;
  width:max-content;
  animation:partnersScroll 26s linear infinite;
}
.partner-logo{
  display:flex;
  align-items:center;
  gap:0.55rem;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.05rem;
  color:var(--muted);
  opacity:0.85;
  white-space:nowrap;
  transition:opacity .2s ease, color .2s ease;
}
.partner-logo:hover{opacity:1; color:var(--accent-ink, var(--accent));}
.partner-logo svg{width:1.35em; height:1.35em; color:var(--accent); flex-shrink:0;}
.section-light .partner-logo{color:#5B6472;}
.section-light .partner-logo svg{color:var(--accent-ink);}
@keyframes partnersScroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .partners-track{animation:none; flex-wrap:wrap; justify-content:center;}
}

/* ===== NUMBERED LIST (comisionistas benefits, etc.) ===== */
.num-item{
  display:flex; align-items:flex-start; gap:1rem;
  padding:1.1rem 0;
  border-top:1px solid var(--line);
}
.num-item:last-child{border-bottom:1px solid var(--line);}
.num-badge{
  color:var(--accent);
  background:rgba(var(--accent-rgb),0.12);
  width:2.5rem; height:2.5rem; min-width:2.5rem;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
  transition:transform .2s ease, background .2s ease;
}
.num-item:hover .num-badge{transform:scale(1.08); background:rgba(var(--accent-rgb),0.2);}
.section-light .num-badge{color:var(--accent-ink); background:rgba(var(--accent-rgb),0.16);}
.num-item h6{font-family:var(--font-display); font-weight:600; margin-bottom:0.25rem;}
.num-item p{color:var(--muted); font-size:0.9rem; margin:0;}

/* ===== CTA BAND ===== */
.cta-band{
  position:relative;
  border-radius:24px;
  padding:4rem 2rem;
  text-align:center;
  overflow:hidden;
  /*background:linear-gradient(135deg, rgba(var(--accent-2-rgb),0.16), rgba(var(--accent-rgb),0.1));
  border:1px solid var(--line);*/
}
.cta-band::after{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(circle at 80% 20%, rgba(var(--accent-rgb),0.25), transparent 55%);
  pointer-events:none;
}
.cta-band h2{position:relative; z-index:1;}
.cta-band .cta-inner{position:relative; z-index:1;}

/* ===== ACCORDION ===== */
.accordion-custom .accordion-item{
  background:var(--bg-elevated);
  border:1px solid var(--line);
  border-radius:12px !important;
  margin-bottom:0.8rem;
  overflow:hidden;
}
.accordion-custom .accordion-button{
  background:var(--bg-elevated);
  color:var(--text);
  font-weight:600;
  font-family:var(--font-display);
  box-shadow:none;
}
/*.accordion-custom .accordion-button:not(.collapsed){
  background:rgba(var(--accent-rgb),0.08);
  color:var(--accent);
}*/
.accordion-custom .accordion-button::after{
  filter:invert(1) brightness(0.8);
}
.accordion-custom .accordion-button:focus{box-shadow:none;}
.accordion-custom .accordion-body{
  color:var(--muted);
  font-size:1rem;
}

/* ===== FORM ===== */
.form-control-custom{
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--text);
  border-radius:8px;
  padding:0.7rem 0.9rem;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.form-control-custom:focus{
  background:var(--bg);
  color:var(--text);
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),0.15);
}
.form-control-custom::placeholder{color:var(--muted);}
.form-label-custom{font-size:0.85rem; color:var(--muted); margin-bottom:0.35rem;}
.form-check-input:checked{background-color:var(--accent); border-color:var(--accent);}

/* ===== PAGE HEADER (páginas internas tipo Cumplimiento) ===== */
.page-header{
  padding:4rem 0 3rem;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.page-header .hero-bg{opacity:0.7;}

/* ===== FOOTER ===== */
footer.site-footer{
  border-top:1px solid var(--line);
  padding:3.5rem 0 2rem;
  color:var(--muted);
  font-size:0.88rem;
  background:var(--bg-elevated-2);
}
footer.site-footer h6{color:var(--text); font-family:var(--font-display); font-weight:600;}
footer.site-footer a{color:var(--muted); transition:color .2s ease;}
footer.site-footer a:hover{color:var(--accent);}
footer.site-footer .social-icon{
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center;
  transition:border-color .2s ease, color .2s ease, transform .2s ease;
}
footer.site-footer .social-icon:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-3px);}

/* Utility fade-in for whole hero content */
@keyframes fadeUp{
  from{opacity:0; transform:translateY(18px);}
  to{opacity:1; transform:translateY(0);}
}
.fade-up-1{animation:fadeUp .7s ease both;}
.fade-up-2{animation:fadeUp .7s ease .12s both;}
.fade-up-3{animation:fadeUp .7s ease .24s both;}

/* Gradient accent text, scoped to headings only so it never breaks
   icons that also use .text-accent for their currentColor stroke. */
.hero h1 .text-accent,
.section-title .text-accent{
  background:linear-gradient(120deg, #7FFFD8 0%, var(--accent-ink) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}