*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg:#0C1208; --bg-2:#10180C; --panel:#141F0C;
  --lime:#84CC16; --green:#22C55E; --cream:#F4F7EC;
  --muted:#86A878; --line:rgba(132,204,22,0.22);
  --glow:rgba(132,204,22,0.45);
}
html{scroll-behavior:smooth;}
body{background:var(--bg); color:var(--cream); font-family:'Manrope',sans-serif; overflow-x:hidden; position:relative;}
body::before{
  content:''; position:fixed; inset:0; z-index:500; pointer-events:none; opacity:0.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#cursor-blob{position:fixed; width:460px; height:460px; border-radius:50%; z-index:1; pointer-events:none; background:radial-gradient(circle, rgba(132,204,22,0.14) 0%, transparent 70%); transform:translate(-50%,-50%); left:50%; top:30%;}

#tech-static-bg{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:1;
  background-image:
    linear-gradient(rgba(132,204,22,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(132,204,22,0.05) 1px, transparent 1px),
    radial-gradient(circle at 20% 15%, rgba(132,204,22,0.08) 0%, transparent 45%),
    radial-gradient(circle at 80% 85%, rgba(34,197,94,0.07) 0%, transparent 45%);
  background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%;
  background-position: center, center, center, center;
}
#tech-static-bg::after{
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(circle at 50% 0%, rgba(12,18,8,0) 0%, var(--bg) 92%);
}
#particle-canvas{position:fixed; inset:0; z-index:1; pointer-events:none;}

#progress-bar{position:fixed; top:0; left:0; height:2px; z-index:300; background:linear-gradient(90deg,var(--lime),var(--green)); width:0%; transition:width 0.1s linear;}

nav{position:fixed; top:0; left:0; right:0; z-index:200; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:1.3rem 6%; background:rgba(12,18,8,0.6); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); transition:padding 0.3s, background 0.3s;}
nav.scrolled{padding:0.85rem 6%; background:rgba(12,18,8,0.94);}
.nav-logo{font-family:'Fraunces',serif; font-size:1.5rem; font-weight:600; color:var(--cream); text-decoration:none; letter-spacing:-0.01em; display:flex; align-items:center; gap:0.55rem; justify-self:start;}
.logo-img{height:34px; width:auto; display:block;}
.logo-dot{width:9px; height:9px; border-radius:50%; background:var(--lime); box-shadow:0 0 12px var(--lime);}
.nav-links{display:flex; gap:2rem; list-style:none;}
.nav-links a{color:var(--muted); text-decoration:none; font-size:0.9rem; font-weight:500; transition:color 0.25s; position:relative; padding-bottom:2px;}
.nav-links a::after{content:''; position:absolute; bottom:-2px; left:0; width:0; height:1px; background:var(--lime); transition:width 0.3s;}
.nav-links a:hover, .nav-links a.active{color:var(--cream);}
.nav-links a:hover::after, .nav-links a.active::after{width:100%;}
.nav-cta{justify-self:end; padding:0.6rem 1.5rem; background:var(--lime); color:#0C1208; border:none; border-radius:99px; font-weight:700; font-size:0.88rem; cursor:pointer; text-decoration:none; transition:transform 0.25s, box-shadow 0.25s;}
.nav-cta:hover{transform:scale(1.05); box-shadow:0 0 26px var(--glow);} 
.site-menu-toggle{display:none; position:fixed; top:0.75rem; left:1rem; z-index:260; width:46px; height:46px; border-radius:12px; border:1px solid var(--line); background:rgba(12,18,8,0.86); backdrop-filter:blur(12px); flex-direction:column; justify-content:center; gap:5px; padding:0 12px; cursor:pointer; box-shadow:0 12px 32px rgba(0,0,0,0.2);} 
.site-menu-toggle span{display:block; height:2px; border-radius:2px; background:var(--cream); transition:transform 0.25s ease, opacity 0.25s ease;} 
.site-menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);} 
.site-menu-toggle.open span:nth-child(2){opacity:0;} 
.site-menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} 
.site-menu-panel{display:none; position:fixed; top:0.9rem; left:0.9rem; z-index:255; min-width:220px; padding:0.9rem; border-radius:16px; border:1px solid var(--line); background:rgba(20,31,12,0.9); backdrop-filter:blur(16px); box-shadow:0 18px 44px rgba(0,0,0,0.25); flex-direction:column; gap:0.45rem; opacity:0; transform:translateY(-10px) scale(0.98); pointer-events:none; transition:opacity 0.25s ease, transform 0.25s ease;} 
.site-menu-toggle.open + .site-menu-panel, .site-menu-panel.open{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;} 
.site-menu-link{color:var(--cream); text-decoration:none; padding:0.6rem 0.75rem; border-radius:10px; font-size:0.92rem; transition:background 0.2s ease, color 0.2s ease;} 
.site-menu-link:hover, .site-menu-link.active{background:rgba(132,204,22,0.12); color:var(--lime);} 
.site-menu-group{border-top:1px solid var(--line); padding-top:0.6rem; margin-top:0.2rem; display:flex; flex-direction:column; gap:0.35rem;} 
.site-menu-label{font-size:0.68rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); padding:0 0.75rem;}

#inicio{min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:150px 5% 60px; position:relative; z-index:2; overflow:hidden;}
#inicio::before{content:''; position:absolute; top:-30%; left:50%; transform:translateX(-50%); width:900px; height:900px; border-radius:50%; background:radial-gradient(circle, rgba(132,204,22,0.07) 0%, transparent 65%); animation:breathe 8s ease-in-out infinite; pointer-events:none;}
@keyframes breathe{0%,100%{transform:translateX(-50%) scale(1); opacity:.5;} 50%{transform:translateX(-50%) scale(1.15); opacity:.9;}}
.hero-inner{position:relative; z-index:2; max-width:820px; width:100%; opacity:0; transform:translateY(18px); animation:rise 0.8s ease forwards 0.1s;}
@keyframes rise{to{opacity:1; transform:translateY(0);}}
.hero-eyebrow{display:inline-flex; align-items:center; font-size:0.8rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--lime); margin-bottom:1.5rem;}
.novovert-reveal{margin:0 auto 1.4rem; max-width:560px;}
.nv-svg{width:100%; height:auto; overflow:visible;}
.nv-glyph{opacity:0;}
.nv-svg.nv-drawing .nv-glyph{opacity:1; transition:opacity 0.05s;}
.nv-svg path,.nv-svg rect{stroke-dasharray:1; stroke-dashoffset:1;}
.nv-svg.nv-drawing path,.nv-svg.nv-drawing rect{transition:stroke-dashoffset 0.9s cubic-bezier(.65,0,.35,1);}
.nv-svg.nv-drawing .nv-glyph[style*="--gi:0"] path{transition-delay:0s;}
.nv-svg.nv-drawing .nv-glyph[style*="--gi:1"] rect{transition-delay:.08s;}
.nv-svg.nv-drawing .nv-glyph[style*="--gi:2"] path{transition-delay:.16s;}
.nv-svg.nv-drawing .nv-glyph[style*="--gi:3"] rect{transition-delay:.24s;}
.nv-svg.nv-drawing .nv-glyph[style*="--gi:4"] path{transition-delay:.32s;}
.nv-svg.nv-drawing .nv-glyph[style*="--gi:5"] path{transition-delay:.4s;}
.nv-svg.nv-drawing .nv-glyph[style*="--gi:6"] path{transition-delay:.48s;}
.nv-svg.nv-drawing .nv-glyph[style*="--gi:7"] path{transition-delay:.56s;}
.nv-svg.nv-drawing path,.nv-svg.nv-drawing rect{stroke-dashoffset:0;}
.hero-title{font-family:'Fraunces',serif; font-size:clamp(2.4rem,5.2vw,4.4rem); font-weight:600; line-height:1.08; letter-spacing:-0.02em; margin-bottom:1.25rem;}
.hero-title .highlight{color:var(--lime); font-style:italic;}
.hero-sub{color:var(--muted); font-size:1.1rem; line-height:1.7; max-width:560px; margin:0 auto 2.5rem;}

.switch-wrap{margin:0 auto 2.5rem; display:flex; flex-direction:column; align-items:center; gap:0.85rem;}
.switch-label{font-size:0.7rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted);}
.switch-cards{display:flex; gap:0.75rem; flex-wrap:wrap; justify-content:center;}
.switch-card{position:relative; border-radius:12px; padding:0.85rem 1.1rem; border:1.5px solid var(--line); display:flex; align-items:center; gap:0.6rem; font-family:'Fraunces',serif; font-size:0.85rem; font-weight:600; color:var(--cream); background:var(--panel); text-decoration:none; transition:transform 0.2s, border-color 0.2s, box-shadow 0.25s; min-width:120px;}
.switch-card:hover{transform:translateY(-3px);}
.switch-card.current{border-color:var(--lime); box-shadow:0 0 18px var(--glow), inset 0 0 0 1px var(--lime);}
.sw-swatch{display:flex; gap:3px;}
.sw-dot{width:10px; height:10px; border-radius:50%;}
.sw-tag{font-size:0.68rem; font-weight:400; color:var(--muted); display:block; margin-top:1px; font-family:'Manrope',sans-serif;}

.hero-actions{display:flex; gap:1rem; flex-wrap:wrap; justify-content:center;}
.btn-primary{padding:0.9rem 2rem; background:var(--lime); color:#0C1208; border:none; border-radius:99px; font-family:'Fraunces',serif; font-weight:600; font-size:1rem; cursor:pointer; text-decoration:none; display:inline-block; transition:box-shadow 0.25s, transform 0.2s;}
.btn-primary:hover{box-shadow:0 0 32px var(--glow); transform:translateY(-2px);}
.btn-ghost{padding:0.9rem 2rem; background:transparent; color:var(--cream); border:1px solid var(--line); border-radius:99px; font-family:'Fraunces',serif; font-weight:500; font-size:1rem; cursor:pointer; text-decoration:none; display:inline-block; transition:border-color 0.25s, background 0.25s;}
.btn-ghost:hover{border-color:var(--lime); background:rgba(132,204,22,0.07);}

.section-wrap{padding:50px 5%;}
.section-wrap-alt{padding:50px 5%; background:linear-gradient(180deg,var(--bg-2) 0%, var(--bg) 100%);}
.section-wrap-dark{padding:50px 5%; background:var(--bg-2);}
.section-header{text-align:center; margin-bottom:3rem;}
.section-eyebrow{display:inline-block; font-size:0.75rem; font-weight:600; letter-spacing:0.15em; text-transform:uppercase; color:var(--lime); margin-bottom:0.9rem;}
.section-title{font-family:'Fraunces',serif; font-size:clamp(1.8rem,3.2vw,2.6rem); font-weight:600; letter-spacing:-0.02em; line-height:1.18;}
.section-sub{color:var(--muted); font-size:1rem; margin-top:0.75rem; line-height:1.65; max-width:540px; margin-inline:auto;}

.fade-up{opacity:0; transform:translateY(26px); transition:opacity 0.7s ease, transform 0.7s ease;}
.fade-up.in-view{opacity:1; transform:translateY(0);}
.slide-left{opacity:0; transform:translateX(-60px); transition:opacity 0.75s cubic-bezier(.16,1,.3,1), transform 0.75s cubic-bezier(.16,1,.3,1);}
.slide-left.in-view{opacity:1; transform:translateX(0);}
.slide-right{opacity:0; transform:translateX(60px); transition:opacity 0.75s cubic-bezier(.16,1,.3,1), transform 0.75s cubic-bezier(.16,1,.3,1);}
.slide-right.in-view{opacity:1; transform:translateX(0);}
.zoom-in{opacity:0; transform:scale(0.8); transition:opacity 0.65s ease, transform 0.65s cubic-bezier(.34,1.56,.64,1);}
.zoom-in.in-view{opacity:1; transform:scale(1);}
.rotate-in{opacity:0; transform:rotate(-7deg) translateY(30px) scale(0.92); transition:opacity 0.7s ease, transform 0.7s cubic-bezier(.22,1,.36,1);}
.rotate-in.in-view{opacity:1; transform:rotate(0) translateY(0) scale(1);}
.flip-up{opacity:0; transform:translateY(46px) rotateX(35deg); transform-origin:bottom center; transition:opacity 0.7s ease, transform 0.7s cubic-bezier(.22,1,.36,1);}
.flip-up.in-view{opacity:1; transform:translateY(0) rotateX(0);}
.pop-in{opacity:0; transform:translateY(20px) scale(0.7); transition:opacity 0.55s ease, transform 0.55s cubic-bezier(.34,1.56,.64,1);}
.pop-in.in-view{opacity:1; transform:translateY(0) scale(1);}
.stagger > *{opacity:0; transition:opacity 0.6s ease, transform 0.6s ease;}
.stagger.in-view > *, .stagger > *.in-view{opacity:1;}

.services-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:1.25rem; max-width:1200px; margin:0 auto;}
.service-card{background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:1.75rem; flex:1 1 260px; max-width:300px; position:relative; overflow:hidden; transition:transform 0.3s, box-shadow 0.3s, border-color 0.3s;}
.service-card:hover{transform:translateY(-10px); box-shadow:0 24px 56px rgba(0,0,0,0.45), 0 0 32px rgba(132,204,22,0.18); border-color:rgba(132,204,22,0.5);}
.service-icon{width:48px; height:48px; border-radius:50%; background:rgba(132,204,22,0.1); border:1px solid rgba(132,204,22,0.2); display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem; color:var(--lime);}
.service-icon svg{width:22px; height:22px;}
.service-name{font-family:'Fraunces',serif; font-size:1.05rem; font-weight:600; margin-bottom:0.6rem;}
.service-desc{color:var(--muted); font-size:0.88rem; line-height:1.65;}
.service-tag{display:inline-block; margin-top:1.1rem; font-size:0.72rem; font-weight:500; color:var(--lime); background:rgba(132,204,22,0.08); padding:0.28rem 0.7rem; border-radius:99px; border:1px solid rgba(132,204,22,0.2);}

.cta-banner{display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:2.2rem; max-width:1100px; margin-inline:auto;}
.cta-banner-text h3{font-family:'Fraunces',serif; font-size:1.4rem; font-weight:600; margin-bottom:0.5rem;}
.cta-banner-text p{color:var(--muted); font-size:0.92rem; max-width:480px; line-height:1.6;}

.tech-highlight-row{display:flex; flex-wrap:wrap; gap:1.25rem; max-width:1200px; margin:0 auto 2.5rem; justify-content:center;}
.tech-highlight-card{flex:1 1 300px; max-width:380px; background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:1.6rem; display:flex; gap:1rem;}
.th-icon{width:44px; height:44px; border-radius:50%; background:rgba(132,204,22,0.1); border:1px solid rgba(132,204,22,0.2); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--lime);}
.th-icon svg{width:20px; height:20px;}
.th-title{font-family:'Fraunces',serif; font-weight:600; font-size:1.02rem; margin-bottom:0.4rem;}
.th-desc{color:var(--muted); font-size:0.85rem; line-height:1.6;}

.tech-strip{display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem; max-width:1100px; margin:0 auto;}
.tech-item{text-align:center; width:140px;}
.tech-icon{width:54px; height:54px; border-radius:50%; background:var(--panel); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; margin:0 auto 0.7rem; color:var(--lime);}
.tech-icon svg{width:24px; height:24px;}
.tech-name{font-family:'Fraunces',serif; font-weight:600; font-size:0.92rem; margin-bottom:0.2rem;}
.tech-label{color:var(--muted); font-size:0.76rem;}

.faq-list{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:0.8rem;}
.faq-item{border:1px solid var(--line); border-radius:14px; background:var(--panel); overflow:hidden;}
.faq-q{width:100%; text-align:left; background:none; border:none; color:var(--cream); font-family:'Fraunces',serif; font-size:0.98rem; font-weight:600; padding:1.1rem 1.4rem; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem;}
.faq-arrow svg{width:18px; height:18px; color:var(--lime); transition:transform 0.3s;}
.faq-item.open .faq-arrow svg{transform:rotate(180deg);}
.faq-a{padding:0 1.4rem; max-height:0; overflow:hidden; color:var(--muted); font-size:0.9rem; line-height:1.65; transition:max-height 0.35s ease, padding 0.35s ease;}
.faq-item.open .faq-a{padding:0 1.4rem 1.3rem; max-height:300px;}

.final-cta{padding:90px 5%; text-align:center; background:radial-gradient(ellipse 70% 70% at 50% 50%, rgba(132,204,22,0.08) 0%, transparent 70%), var(--bg-2);}
.final-cta-inner{max-width:680px; margin:0 auto;}
.final-cta-inner h2{font-family:'Fraunces',serif; font-size:clamp(1.9rem,3.4vw,2.7rem); font-weight:600; margin:0.8rem 0 1rem; letter-spacing:-0.02em;}
.final-cta-inner p{color:var(--muted); line-height:1.65; margin-bottom:2rem;}
.final-cta-actions{display:flex; gap:1rem; flex-wrap:wrap; justify-content:center;}

.page-footer{padding:60px 6% 40px; border-top:1px solid var(--line); display:flex; flex-direction:column; align-items:center; gap:1rem; text-align:center; color:var(--muted); font-size:0.85rem;}
.footer-links{display:flex; gap:1.4rem;}
.footer-links a{color:var(--muted); text-decoration:none;}
.footer-links a:hover{color:var(--cream);}

@media (max-width: 900px){
  #inicio{padding:140px 1.15rem 50px;}
  .hero-title{font-size:clamp(1.95rem,7vw,3rem);}
  .hero-sub{max-width:100%;}
  .switch-cards{gap:0.6rem;}
  .switch-card{min-width:0; flex:1 1 calc(50% - 0.35rem); justify-content:center;}
  .services-grid{gap:1rem;}
  .service-card{max-width:100%;}
  .cta-banner{flex-direction:column; text-align:center; padding:2rem 1.25rem;}
  .tech-highlight-card{max-width:100%;}
  .tech-item{width:calc(50% - 0.75rem);}
}
@media (max-width: 640px){
  nav{padding:1rem 1rem; justify-content:center;}
  .nav-links{display:none;}
  .nav-cta{display:none;}
  .nav-logo{margin:0 auto;}
  .site-menu-toggle{display:flex;}
  .site-menu-panel{display:flex; top:calc(1rem + 4.4rem);}
  .logo-img{height:28px;}
  .hero-actions, .final-cta-actions, .cta-banner-actions{flex-direction:column; align-items:stretch;}
  .btn-primary, .btn-ghost{width:100%; text-align:center;}
  .switch-card{flex:1 1 100%;}
  .tech-item{width:100%;}
  .section-wrap, .section-wrap-alt, .section-wrap-dark, .final-cta{padding-left:1rem; padding-right:1rem;}
  .cta-banner{flex-direction:column; text-align:center;}
}
@media (max-width: 420px){
  #inicio{padding-top:112px;}
  .hero-eyebrow{margin-bottom:1rem; font-size:0.72rem;}
  .hero-title{font-size:clamp(1.8rem,8vw,2.4rem);}
  .hero-sub{font-size:0.95rem; line-height:1.6;}
}