/* color-mix-fallback-applied */.invisible{visibility:hidden}.container{width:100%}.flex{display:flex}.inline{display:inline}.flex-wrap{flex-wrap:wrap}.page-hero{flex-direction:column;justify-content:flex-start;min-height:100vh;padding:130px 0 120px;display:flex;position:relative} .page-hero-grid-bg{background-image:linear-gradient(var(--border)1px,transparent 1px),linear-gradient(90deg,var(--border)1px,transparent 1px);pointer-events:none;z-index:0;background-size:80px 80px;position:absolute;inset:0 0 -400px;-webkit-mask-image:linear-gradient(#0000 0%,#0009 8% 96%,#0000 100%);mask-image:linear-gradient(#0000,#0009 8% 96%,#0000)}.page-hero-glow{background:radial-gradient(ellipse at 50% 0%,var(--accent-glow)0%,transparent 70%);pointer-events:none;z-index:0;height:400px;position:absolute;top:0;left:30%;right:30%}.page-hero>.container,.page-hero>.visual-panel,.page-hero>div:not(.page-hero-grid-bg):not(.page-hero-glow):not(.scroll-indicator){z-index:1;position:relative}.page-hero-inner{grid-template-columns:1fr 1fr;align-items:center;gap:80px;display:grid}.page-hero-inner--center{align-items:center}.page-hero--compact{justify-content:flex-start;min-height:100vh;padding-bottom:120px}.page-hero--compact .scroll-indicator{opacity:0;animation:fadeIn 1s var(--ease-out)1.5s forwards;position:absolute;bottom:40px;left:50%;transform:translate(-50%)}.page-hero--ia{min-height:100vh;padding:160px 0 120px}.page-hero-title{letter-spacing:-.03em;font-family:Syne,sans-serif;font-size:clamp(52px,7vw,96px);font-weight:800;line-height:1.15}.page-hero-title .accent-word{color:var(--accent)}.page-hero-title--blog{letter-spacing:-.04em;font-size:clamp(64px,10vw,140px);line-height:1.05}.page-hero-title.hero-headline .line{margin-bottom:-.1em;padding-top:6px;padding-bottom:.18em;display:block;overflow:hidden}.page-hero-title.hero-headline.visible .line:nth-child(1) .line-inner{opacity:1;transform:translateY(0);transition-delay:.1s}.page-hero-title.hero-headline.visible .line:nth-child(2) .line-inner{opacity:1;transform:translateY(0);transition-delay:.3s}.page-hero-title.hero-headline.visible .line:nth-child(3) .line-inner{opacity:1;transform:translateY(0);transition-delay:.5s}.page-hero-title.hero-headline.visible .line:nth-child(4) .line-inner{opacity:1;transform:translateY(0);transition-delay:.7s}.page-hero-right{flex-direction:column;align-self:flex-start;gap:32px;margin-top:61px;display:flex}.page-hero-inner--center .page-hero-right{align-self:center;margin-top:37px}.page-hero-desc{color:var(--text-secondary);font-size:17px;line-height:1.65}.hero-pills{flex-wrap:wrap;gap:8px;display:flex}.hero-pill{border:1px solid var(--border);letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary);transition:border-color var(--transition),color var(--transition);padding:10px 18px;font-family:Berkeley Mono,monospace;font-size:12px;display:inline-block}.hero-pill:hover{border-color:var(--accent);color:var(--accent)}.hero-animate{opacity:0;transition:opacity 1.2s var(--ease-out),transform 1.2s var(--ease-out);transform:translateY(24px)}.hero-animate.revealed{opacity:1;transform:translateY(0)}.hero-animate-right{opacity:0;transition:opacity 1.2s var(--ease-out),transform 1.2s var(--ease-out);transform:translate(24px)}.hero-animate-right.revealed{opacity:1;transform:translate(0)}.hero-from-left{opacity:0;transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transform:translate(-48px)}.hero-from-left.revealed{opacity:1;transform:translate(0)}.hero-from-right{opacity:0;transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transform:translate(48px)}.hero-from-right.revealed{opacity:1;transform:translate(0)}.contact-scroll-hidden{opacity:0;pointer-events:none}.contact-hero-scroll-indicator:not(.contact-scroll-hidden){opacity:1;transition:opacity .6s var(--ease-out)}.visual-panel{border-top:1px solid var(--border);background:0 0;padding:0}.visual-panel-inner{background:0 0;grid-template-columns:repeat(3,1fr);gap:0;display:grid}.visual-panel-cell{transition:background var(--transition);border-right:1px solid var(--border);opacity:0;background:0 0;flex-direction:column;gap:16px;padding:24px 40px;animation:.7s cubic-bezier(.16,1,.3,1) forwards heroFadeUp;display:flex}.visual-panel-cell:last-child{border-right:none}.visual-panel-cell:hover{background:var(--accent-subtle)}.vpc-animate{animation-fill-mode:both}.vpc-num{letter-spacing:.1em;color:var(--accent-text);font-family:Berkeley Mono,monospace;font-size:11px}.vpc-value{color:var(--accent);letter-spacing:-.03em;font-family:Berkeley Mono,monospace;font-size:clamp(36px,4.5vw,60px);font-weight:700;line-height:1}.vpc-label{color:var(--text-secondary);max-width:240px;font-size:13px;line-height:1.5}.scroll-indicator{flex-direction:column;align-items:center;gap:8px;display:flex}.page-hero .scroll-indicator{z-index:2;opacity:0;animation:fadeIn 1s var(--ease-out)1s forwards;position:absolute;bottom:120px;left:50%;transform:translate(-50%)}.page-hero .scroll-indicator-dot{width:2px;height:14px;box-shadow:0 0 6px 2px var(--accent),0 0 12px 4px #3b6fe880;border-radius:1px;animation:2s cubic-bezier(.4,0,.6,1) 1.2s infinite scrollDotV}.scroll-indicator-text{letter-spacing:.25em;text-transform:uppercase;color:#f0eee8a6;font-family:Berkeley Mono,monospace;font-size:10px}[data-theme=light] .scroll-indicator-text{color:#080c14a6}.scroll-indicator-line{background:#fff3;width:1px;height:64px;position:relative;overflow:hidden}[data-theme=light] .scroll-indicator-line{background:#080c1426}.scroll-indicator-dot{background:var(--accent);width:2px;height:14px;box-shadow:0 0 6px 2px var(--accent),0 0 12px 4px #3b6fe880;border-radius:1px;animation:2s cubic-bezier(.4,0,.6,1) 1.2s infinite scrollDotV;position:absolute;top:-12px;left:50%;transform:translate(-50%)}@keyframes scrollDotV{0%{opacity:1;top:-12px}80%{opacity:.8;top:64px}to{opacity:0;top:64px}}.service-detail{border-bottom:1px solid var(--border);padding:80px 0;position:relative}.page-hero+.service-detail{padding-top:80px}.service-detail:last-of-type{border-bottom:none}.service-detail-inner{grid-template-columns:1fr 1fr;align-items:start;gap:80px;display:grid}.service-detail-inner.reverse{direction:rtl}.service-detail-inner.reverse>*{direction:ltr}.service-detail-left{align-self:start;position:-webkit-sticky;position:sticky;top:100px}.service-num-large{letter-spacing:.15em;text-transform:uppercase;color:var(--accent);align-items:center;gap:12px;margin-bottom:24px;font-family:Berkeley Mono,monospace;font-size:11px;display:flex}.service-num-large:before{content:"";background:var(--accent);width:32px;height:1px}.service-detail-title{letter-spacing:-.03em;color:var(--text-primary);margin-bottom:24px;padding-bottom:.05em;font-family:Syne,sans-serif;font-size:clamp(32px,4vw,52px);font-weight:800;line-height:1.1;overflow:visible}.service-detail-desc{color:var(--text-secondary);font-size:16px;line-height:1.75}.service-tags{flex-wrap:wrap;gap:8px;display:flex}.service-tag{letter-spacing:.1em;text-transform:uppercase;background:var(--accent-subtle);color:var(--accent-text);border:1px solid #3b6fe833;padding:6px 12px;font-family:Berkeley Mono,monospace;font-size:10px}.service-tag:hover{border-color:var(--accent-text);color:var(--accent-text)}.service-cta{letter-spacing:.04em;text-transform:uppercase;color:var(--text-primary);border:1px solid var(--border);transition:border-color var(--transition),background var(--transition),color var(--transition),gap var(--transition);align-items:center;gap:10px;margin-top:8px;padding:14px 28px;font-family:Söhne,sans-serif;font-size:13px;font-weight:600;display:inline-flex}.service-cta:hover{border-color:var(--accent);background:var(--accent-subtle);color:var(--accent);gap:16px}.service-cta-arrow{transition:transform var(--transition);font-size:14px}.service-cta:hover .service-cta-arrow{transform:translate(2px,-2px)}.service-features{flex-direction:column;gap:0;display:flex}.service-feature{border:1px solid var(--accent);grid-template-columns:48px 1fr;gap:20px;padding:24px 28px;display:grid}@supports (color: color-mix(in srgb, red, red)){.service-feature{border:transparent;border:1px solid color-mix(in srgb,var(--accent)30%,transparent)}}.service-feature{border-left:2px solid var(--accent);background:var(--accent)}@supports (color: color-mix(in srgb, red, red)){.service-feature{background:var(--bg-surface);background:color-mix(in srgb,var(--accent)6%,var(--bg-surface))}}.service-feature{opacity:0;margin-bottom:8px;transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1),background .3s,border-color .3s;transform:translateY(16px)}.service-feature:hover,.service-feature:active{background:var(--accent)}@supports (color: color-mix(in srgb, red, red)){.service-feature:hover,.service-feature:active{background:var(--bg-elevated);background:color-mix(in srgb,var(--accent)12%,var(--bg-elevated))}}.service-feature:hover,.service-feature:active{border-color:var(--accent)}@supports (color: color-mix(in srgb, red, red)){.service-feature:hover,.service-feature:active{border-color:transparent;border-color:color-mix(in srgb,var(--accent)60%,transparent)}}.service-feature:hover,.service-feature:active{border-left-color:var(--accent);box-shadow:inset 3px 0 12px -4px var(--accent)}@supports (color: color-mix(in srgb, red, red)){.service-feature:hover,.service-feature:active{box-shadow:transparent;box-shadow:inset 3px 0 12px -4px color-mix(in srgb,var(--accent)25%,transparent)}}.service-feature:hover .feature-content h4,.service-feature:active .feature-content h4,.service-feature:hover .feature-content p,.service-feature:active .feature-content p{color:var(--text-primary)}.service-feature.revealed{opacity:1;transform:translateY(0)}.feature-icon{letter-spacing:.1em;color:var(--accent-text);padding-top:3px;font-family:Berkeley Mono,monospace;font-size:11px}.feature-content h4{color:var(--text-primary);margin:0 0 6px;font-size:15px;font-weight:600}.feature-content p{color:var(--text-secondary);margin:0;font-size:14px;line-height:1.65}.title-group .title-line{display:block;overflow:hidden;margin-bottom:-.12em;padding-bottom:.12em}.title-group .title-line .title-line-inner{display:block;transform:translateY(110%);transition:transform 1.6s var(--ease-out)}.title-group .title-line.revealed .title-line-inner{transform:translateY(0)}.title-group .title-line:nth-child(2) .title-line-inner{transition-delay:.18s}.title-group .title-line:nth-child(3) .title-line-inner{transition-delay:.36s}.title-group .title-line:nth-child(4) .title-line-inner{transition-delay:.54s}.title-group .title-line:nth-child(5) .title-line-inner{transition-delay:.72s}.process-section{padding:80px 0}.process-header{margin-bottom:80px}.process-steps{background:var(--bg-base);grid-template-columns:repeat(4,1fr);gap:0;display:grid}.process-step{background:var(--accent)}@supports (color: color-mix(in srgb, red, red)){.process-step{background:var(--bg-base);background:color-mix(in srgb,var(--accent)6%,var(--bg-base))}}.process-step{opacity:0;border-left:2px solid var(--accent);flex-direction:column;gap:20px;padding:48px 36px;display:flex;position:relative;overflow:hidden;transform:translateY(28px)}@supports (color: color-mix(in srgb, red, red)){.process-step{border-left:2px solid color-mix(in srgb,var(--accent)40%,transparent)}}.process-step{border-right:1px solid var(--border);transition:opacity 1.1s var(--ease-out),transform 1.1s var(--ease-out),background .3s var(--ease-out),border-left-color .3s var(--ease-out),border-right-color .3s var(--ease-out),box-shadow .3s var(--ease-out)}.process-step.revealed{opacity:1;transform:translateY(0)}.process-step:after{display:none}.process-step:hover,.process-step:active{background:var(--accent)}@supports (color: color-mix(in srgb, red, red)){.process-step:hover,.process-step:active{background:var(--bg-surface);background:color-mix(in srgb,var(--accent)12%,var(--bg-surface))}}.process-step:hover,.process-step:active{border-left-color:var(--accent);box-shadow:inset 3px 0 12px -4px var(--accent)}@supports (color: color-mix(in srgb, red, red)){.process-step:hover,.process-step:active{box-shadow:transparent;box-shadow:inset 3px 0 12px -4px color-mix(in srgb,var(--accent)25%,transparent)}}.process-step:hover .step-title,.process-step:active .step-title,.process-step:hover .step-desc,.process-step:active .step-desc{color:var(--text-primary)}.step-num{letter-spacing:.12em;color:var(--accent-text);font-family:Berkeley Mono,monospace;font-size:11px}.step-title{color:var(--text-primary);font-family:Syne,sans-serif;font-size:22px;font-weight:700}.step-desc{color:var(--text-secondary);margin:0;font-size:14px;line-height:1.65}.tech-strip{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:48px 0}.tech-strip-label{margin-bottom:24px}.tech-logos{border:1px solid var(--border);grid-template-columns:repeat(4,1fr);gap:0;display:grid}.tech-category{border-right:1px solid var(--border);padding:24px}.tech-category:last-child{border-right:none}.tech-category-label{letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;font-family:Berkeley Mono,monospace;font-size:10px;display:block}.tech-category-items{flex-wrap:wrap;gap:8px;display:flex}.tech-logo-item{border:1px solid var(--border);transition:border-color var(--transition),background var(--transition);cursor:default;border-radius:4px;padding:10px 20px}.tech-logo-item:hover{border-color:var(--accent);background:#4285f40f}.tech-logo-name{letter-spacing:.06em;color:var(--text-secondary);transition:color var(--transition);font-family:Berkeley Mono,monospace;font-size:12px}.tech-logo-item:hover .tech-logo-name{color:var(--text-primary)}.page-cta{text-align:center;background:var(--bg-base);padding:140px 0;position:relative;overflow:hidden}.page-cta:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(#3a6cff59,#3a6cff1f 35%,#0000 65%);width:1000px;height:700px;position:absolute;top:50%;left:50%;transform:translate(-50%,-55%)}.page-cta>.container{z-index:1;position:relative}.page-cta .section-eyebrow{justify-content:center;margin-bottom:32px}.page-cta-title{letter-spacing:-.03em;color:var(--text-primary);margin:0 0 32px;font-family:Syne,sans-serif;font-size:clamp(40px,5.5vw,72px);font-weight:800;line-height:1.05}.page-cta-sub{color:var(--text-secondary);max-width:480px;margin:0 auto 48px;font-size:18px;line-height:1.65}.page-cta-btn-primary{letter-spacing:.08em;text-transform:uppercase;background:var(--accent);color:#fff;border:2px solid var(--accent);transition:background var(--transition),border-color var(--transition),gap var(--transition);cursor:none;align-items:center;gap:10px;padding:16px 32px;font-family:Söhne,sans-serif;font-size:13px;font-weight:600;text-decoration:none;display:inline-flex}.page-cta-btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);gap:16px}.page-cta-btn-secondary{letter-spacing:.08em;text-transform:uppercase;color:var(--text-primary);border:2px solid var(--border);transition:border-color var(--transition),color var(--transition),gap var(--transition);cursor:none;background:0 0;align-items:center;gap:10px;padding:16px 32px;font-family:Söhne,sans-serif;font-size:13px;font-weight:600;text-decoration:none;display:inline-flex}.page-cta-btn-secondary:hover{border-color:var(--accent);color:var(--accent);gap:16px}.reveal{opacity:0;transition:opacity 1.1s var(--ease-out),transform 1.1s var(--ease-out);transform:translateY(32px)}.reveal.revealed,.reveal.visible{opacity:1;transform:translateY(0)}@media(max-width:1024px){.page-hero-inner{grid-template-columns:1fr;gap:40px}.hero-animate-right{transform:translateY(20px)}.visual-panel-inner{grid-template-columns:1fr}.visual-panel-cell{border-right:none;border-bottom:1px solid var(--border)}.visual-panel-cell:last-child{border-bottom:none}.service-detail-inner,.service-detail-inner.reverse{direction:ltr;grid-template-columns:1fr;gap:48px}.service-detail-left{position:static}.tech-logos{grid-template-columns:repeat(2,1fr)}.tech-category:nth-child(2){border-right:none}.tech-category:nth-child(3){border-top:1px solid var(--border);border-right:1px solid var(--border)}.tech-category:nth-child(4){border-top:1px solid var(--border)}.process-steps{grid-template-columns:repeat(2,1fr)}.process-step:nth-child(2){border-right:none}.process-step:nth-child(3){border-right:1px solid var(--border)}.process-step:nth-child(4){border-right:none}}@media(max-width:640px){.page-hero{padding:100px 0 0}.page-hero-title{font-size:clamp(40px,11vw,56px)}.page-hero-title--blog{font-size:clamp(48px,13vw,80px);line-height:1.05}.process-steps{grid-template-columns:1fr}.process-step{border-right:none}.page-cta{padding:80px 0}.service-detail{padding:60px 0}}:lang(en) .svc-title-line,:lang(ca) .svc-title-line,:lang(en) .page-hero-title,:lang(ca) .page-hero-title{font-size:clamp(40px,5vw,80px)}@media(max-width:768px){:lang(en) .svc-title-line,:lang(ca) .svc-title-line,:lang(en) .page-hero-title,:lang(ca) .page-hero-title{font-size:clamp(32px,9vw,52px)}}@media(max-width:375px){.svc-hero-title,.svc-hero-title .svc-line-inner{font-size:clamp(32px,11vw,48px)}.process-step-num{font-size:48px}}.faq-section{border-top:1px solid var(--border);padding:100px 0 80px}.faq-section .section-title{letter-spacing:-.02em;color:var(--text-primary);margin-bottom:48px;font-size:clamp(28px,4vw,48px);font-weight:700}.faq-list{flex-direction:column;gap:0;width:100%;display:flex}.faq-item{border-bottom:1px solid var(--border)}.faq-item:first-child{border-top:1px solid var(--border)}.faq-question{cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;gap:16px;padding:24px 0;list-style:none;display:flex}.faq-question::-webkit-details-marker{display:none}.faq-q-text{color:var(--text-primary);flex:1;font-size:clamp(15px,1.6vw,17px);font-weight:600;line-height:1.4}.faq-icon{border:1px solid var(--border);width:28px;height:28px;color:var(--text-tertiary);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:18px;font-weight:300;line-height:1;transition:transform .25s,border-color .25s,color .25s;display:flex;margin-left:auto}.faq-item[open] .faq-icon{border-color:var(--accent);color:var(--accent);transform:rotate(45deg)}.faq-answer{padding:0 0 24px}.faq-answer p{color:var(--text-secondary);margin:0;font-size:clamp(14px,1.4vw,15px);line-height:1.75}@media(max-width:768px){.faq-section{padding:64px 0 56px}.faq-q-text{font-size:15px}.faq-answer p{font-size:14px}}
@keyframes slideInFromRight{0%{opacity:0;transform:translate(48px)}to{opacity:1;transform:translate(0)}}
.hero-headline .line-inner{opacity:0;transition:opacity 1.6s cubic-bezier(.16,1,.3,1),transform 1.6s cubic-bezier(.16,1,.3,1);display:block;transform:translateY(105%)}
@keyframes slideUp{to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{to{opacity:1}}


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE NAVIGATION — Hamburger & Mobile Menu
   Aplicado a todas las páginas interiores
   ═══════════════════════════════════════════════════════════════════════════ */
.hamburger {
  cursor: pointer;
  z-index: 10001;
  background: transparent;
  border: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 4px;
  display: none;
  position: relative;
}
.hamburger span {
  background: var(--text-primary);
  transform-origin: 50%;
  border-radius: 2px;
  width: 22px;
  height: 2px;
  transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .25s;
  display: block;
}
.hamburger.open span:first-child { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  background: var(--bg-base);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 32px;
  transition: opacity .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1);
  display: none;
  position: fixed;
  inset: 0;
  transform: translateY(-12px);
}
.mobile-menu.open {
  opacity: 1;
  pointer-events: all;
  display: flex;
  transform: translateY(0);
}
.mobile-nav {
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-bottom: 48px;
  display: flex;
}
.mobile-nav-link {
  letter-spacing: -.02em;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
  opacity: 0;
  padding: 10px 0;
  font-family: Syne, sans-serif;
  font-size: clamp(32px, 9vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  transition: color .2s, opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1);
  transform: translateY(16px);
}
.mobile-nav-link:last-child { border-bottom: none; }
.mobile-nav-link:hover, .mobile-nav-link.active { color: var(--accent); }
.mobile-menu.open .mobile-nav-link { opacity: 1; transform: translateY(0); }
.mobile-menu-cta {
  text-align: center;
  opacity: 0;
  justify-content: center;
  width: 100%;
  transition: color .2s, opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1);
  transform: translateY(12px);
}
.mobile-menu.open .mobile-menu-cta { opacity: 1; transition-delay: .46s; transform: translateY(0); }
.mobile-menu-close {
  border: 1px solid var(--border);
  width: 44px;
  height: 44px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
  background: transparent;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 20px;
  right: 24px;
}
.mobile-menu-close:hover { color: var(--text-primary); border-color: var(--text-primary); background: var(--bg-elevated); }
.mobile-menu-theme {
  border-top: 1px solid var(--border);
  opacity: 0;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 32px;
  padding-top: 24px;
  transition: opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1);
  display: flex;
  transform: translateY(8px);
}
.mobile-menu.open .mobile-menu-theme { opacity: 1; transition-delay: .54s; transform: translateY(0); }
.mobile-menu-theme .theme-toggle-text { letter-spacing: .12em; color: var(--text-tertiary); font-size: 11px; font-weight: 600; }

/* Activar hamburger en tablet/móvil */
@media (max-width: 1024px) {
  nav { display: none; }
  .hamburger { display: flex; }
  .btn-cta-header, .theme-toggle-wrapper { display: none; }
}

/* Ajustes menú móvil en pantallas muy pequeñas */
@media (max-width: 375px) {
  .mobile-nav-link { padding: 6px 0; font-size: clamp(22px, 7vw, 30px); }
  .mobile-nav { gap: 4px; margin-bottom: 24px; }
  .mobile-menu { justify-content: flex-start; padding: 80px 20px 24px; overflow-y: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION — Accesibilidad
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Overflow horizontal global */
body { overflow-x: hidden; }


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE SERVICIOS — v6 DEFINITIVO
   Breakpoints: 1024px (tablet), 768px (móvil), 640px (móvil pequeño), 375px (iPhone SE)
   IMPORTANTE: Todo dentro de @media — no afecta desktop
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── TABLET (≤1024px) ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Hero: colapsar a una columna */
  .page-hero { padding: 110px 0 80px; }
  .page-hero-inner { grid-template-columns: 1fr !important; gap: 48px; }
  .page-hero-title { font-size: clamp(40px, 8vw, 72px); }
  .hero-visual { display: block; margin-top: 0; } /* Mostrar panel visual en tablet/móvil */
  .hero-visual-frame { padding: 20px; }
  .visual-tags { flex-wrap: wrap; gap: 6px; }

  /* Visual panel de métricas: 1 columna */
  .visual-panel-inner { grid-template-columns: 1fr; }
  .visual-panel-cell { border-right: none; border-bottom: 1px solid var(--border); }
  .visual-panel-cell:last-child { border-bottom: none; }

  /* Secciones de servicio: colapsar a 1 columna */
  .service-detail-inner,
  .service-detail-inner.reverse { direction: ltr; grid-template-columns: 1fr; gap: 40px; }
  .service-detail-left { position: static; top: auto; }
  .service-detail { padding: 64px 0; }

  /* Tech logos: 2 columnas */
  .tech-logos { grid-template-columns: repeat(2, 1fr); }
  .tech-category:nth-child(2) { border-right: none; }
  .tech-category:nth-child(3) { border-top: 1px solid var(--border); border-right: 1px solid var(--border); }
  .tech-category:nth-child(4) { border-top: 1px solid var(--border); }

  /* Process steps: 2 columnas */
  .process-steps { grid-template-columns: repeat(2, 1fr); }
  .process-step:nth-child(2) { border-right: none; }
  .process-step:nth-child(3) { border-right: 1px solid var(--border); }
  .process-step:nth-child(4) { border-right: none; }

  /* Page CTA */
  .page-cta { padding: 100px 0; }
  .page-cta-title { font-size: clamp(32px, 6vw, 56px); }
}

/* ── MÓVIL (≤768px) ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .page-hero { padding: 100px 0 64px; }
  .page-hero-title { font-size: clamp(32px, 9vw, 52px); line-height: 1.05; }
  .service-hero-desc { max-width: 100%; font-size: 15px; }
  .service-detail-left { position: static; max-width: 100%; }
  .service-detail { padding: 56px 0; }
  .service-detail-inner { gap: 32px; }
  .service-detail-title { font-size: clamp(22px, 6vw, 32px); }
  /* .service-num-large mantiene font-size:11px base — es un eyebrow pequeño */
  .service-tags { flex-wrap: wrap; gap: 8px; }
  .service-cta { flex-direction: column; align-items: flex-start; gap: 16px; }
  .service-feature-grid { grid-template-columns: 1fr; }
  .tech-logos { grid-template-columns: 1fr; }
  .tech-category { border-right: none; border-bottom: 1px solid var(--border); }
  .tech-category:last-child { border-bottom: none; }
  .tech-category:nth-child(2),
  .tech-category:nth-child(3),
  .tech-category:nth-child(4) { border-right: none; border-top: none; border-bottom: 1px solid var(--border); }
  .process-steps { grid-template-columns: 1fr; }
  .process-step { border-right: none; border-bottom: 1px solid var(--border); padding-bottom: 32px; }
  .process-step:last-child { border-bottom: none; }
  .process-header { margin-bottom: 48px; }
  .page-cta { padding: 80px 0; }
  .page-cta-title { font-size: clamp(28px, 8vw, 44px); }
  .page-cta-sub { font-size: 15px; }

  /* Idiomas CA/EN — títulos más largos */
  :lang(en) .page-hero-title,
  :lang(ca) .page-hero-title { font-size: clamp(28px, 8.5vw, 48px); }
}

/* ── MÓVIL PEQUEÑO (≤640px) ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .page-hero { padding: 90px 0 48px; }
  .page-hero-title { font-size: clamp(28px, 9.5vw, 44px); line-height: 1.05; }
  /* .service-num-large mantiene font-size:11px base */
  .page-cta { padding: 64px 0; }
  .page-cta-title { font-size: clamp(24px, 8vw, 36px); }
  .page-cta-sub { flex-direction: column; gap: 12px; font-size: 14px; }
  .visual-panel-inner { grid-template-columns: 1fr; }
  .visual-panel-cell { border-right: none; border-bottom: 1px solid var(--border); padding: 24px; }
  .visual-panel-cell:last-child { border-bottom: none; }
  .vpc-value { font-size: clamp(28px, 9vw, 40px); }
  .tech-strip { padding: 32px 0; }
  .process-section { padding: 56px 0; }
  .process-header { margin-bottom: 32px; }
  .process-step { padding: 32px 24px; }
  .step-title { font-size: 18px; }

  /* Idiomas CA/EN */
  :lang(en) .page-hero-title,
  :lang(ca) .page-hero-title { font-size: clamp(24px, 8vw, 40px); }
}

/* ── iPhone SE (≤375px) ──────────────────────────────────────────────────── */
@media (max-width: 375px) {
  .page-hero { padding: 80px 0 40px; }
  .page-hero-title { font-size: clamp(26px, 9vw, 38px); line-height: 1.05; }
  /* .service-num-large mantiene font-size:11px base */
  .page-cta-title { font-size: clamp(22px, 8vw, 32px); }
  .vpc-value { font-size: clamp(24px, 8vw, 34px); }
  .step-num { font-size: 36px; }

  :lang(en) .page-hero-title,
  :lang(ca) .page-hero-title { font-size: clamp(22px, 8vw, 34px); }
}

/* === Hero min-height fix para móvil === */
@media(max-width:768px){
  .page-hero{min-height:auto!important;padding-bottom:60px!important;}
}
@media(max-width:480px){
  .page-hero{min-height:auto!important;padding-top:90px!important;padding-bottom:48px!important;}
}
@media(max-width:375px){
  .page-hero{min-height:auto!important;padding-top:80px!important;padding-bottom:40px!important;}
}


/* === FIX: visual-panel métricas visible y bien formateado en móvil === */
@media (max-width: 640px) {
  .visual-panel { display: block !important; }
  .visual-panel-inner {
    grid-template-columns: 1fr 1fr !important;
    gap: 0;
  }
  .visual-panel-cell {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 20px 16px;
  }
  .visual-panel-cell:nth-child(2n) { border-right: none; }
  .visual-panel-cell:last-child,
  .visual-panel-cell:nth-last-child(2):nth-child(odd) { border-bottom: none; }
  .vpc-value { font-size: clamp(24px, 8vw, 36px); }
  .vpc-label { font-size: 11px; }
}
@media (max-width: 375px) {
  .visual-panel-inner { grid-template-columns: 1fr !important; }
  .visual-panel-cell { border-right: none !important; }
  .vpc-value { font-size: clamp(22px, 8vw, 32px); }
}


/* === FIX v8: Servicios — min-height y reveal === */
@media (max-width: 768px) {
  section.hero,
  .page-hero,
  .services-hero {
    min-height: auto !important;
    padding-top: 88px !important;
    padding-bottom: 40px !important;
  }
  .reveal,
  .svc-line-inner,
  .hero-animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .scroll-indicator,
  .scroll-indicator-wrap {
    display: none !important;
  }
}

/* === FIX v8: Estilos del hero-visual-frame que faltaban en servicios === */
/* Estos estilos solo existen en home.css — se añaden aqui para servicios */
.hero-visual-frame{border:1px solid var(--border);background:var(--bg-surface);flex-direction:column;justify-content:space-between;width:100%;min-height:auto;padding:40px;display:flex;position:relative;overflow:hidden}
.hero-visual-frame:before{content:"";background:linear-gradient(90deg,transparent,var(--accent),transparent);height:1px;position:absolute;top:0;left:0;right:0}
.visual-label{letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:16px;font-size:13px;font-weight:500}
.visual-desc{color:var(--text-secondary);font-size:14px;line-height:1.6;margin-bottom:0}
.visual-top{display:flex;flex-direction:column}
.visual-bottom{display:flex;flex-direction:column}
.visual-divider{background:var(--border);height:1px;margin:32px 0}
.visual-tags{flex-wrap:wrap;gap:10px;display:flex}
.visual-tag{letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);border:1px solid var(--border);transition:border-color var(--transition),color var(--transition);padding:9px 16px;font-family:Berkeley Mono,monospace;font-size:11px;font-weight:400}

/* === FIX: hero-visual-frame compacto en móvil === */
@media (max-width: 768px) {
  .hero-visual-frame {
    min-height: auto !important;
    padding: 24px !important;
  }
}

/* FIX-GLOBAL-HERO-MOBILE */
@media (max-width: 768px) {
  .page-hero, .page-hero--compact, .page-hero--ia {
    min-height: auto !important;
    padding-top: 88px !important;
    padding-bottom: 40px !important;
  }
}

/* FIX-GRID-BG-MOBILE */
@media (max-width: 768px) {
  .page-hero-grid-bg {
    inset: 0 !important;
    display: none !important;
  }
}

/* FIX-HERO-VISUAL-MOBILE */
@media (max-width: 1024px) {
  .vpc-animate,
  .hero-visual,
  .hero-visual-frame,
  .visual-top,
  .visual-bottom,
  .visual-tags,
  .visual-tag {
    opacity: 1 !important;
    animation: none !important;
    display: revert !important;
  }
}

/* FIX-OPACITY-MOBILE: forzar visibilidad de elementos animados en movil */
@media (max-width: 1024px) {
  .hero-animate, .hero-animate-right, .hero-from-left, .hero-from-right,
  .hero-headline .line-inner, .visual-panel-cell, .vpc-animate,
  .service-feature, .process-step, .reveal {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* FIX-HERO-INNER-MOBILE */
@media (max-width: 1024px) {
  .page-hero-inner {
    align-items: flex-start !important;
    gap: 24px !important;
  }
  .page-hero {
    padding-bottom: 32px !important;
  }
}

/* FIX-HERO-VISUAL-FRAME: eliminar espacio vacío en móvil */
@media (max-width: 1024px) {
  .hero-visual-frame {
    justify-content: flex-start !important;
    gap: 16px !important;
    min-height: auto !important;
    height: auto !important;
  }
  .hero-visual {
    height: auto !important;
    min-height: auto !important;
  }
}

/* FIX-HIDE-HERO-VISUAL-MOBILE: ocultar panel de tags en móvil para eliminar espacio */
@media (max-width: 1024px) {
  .hero-visual {
    display: none !important;
  }
}

/* FIX-COMPACT-TAGS-MOBILE: compactar hero-visual en móvil sin ocultar contenido */
@media (max-width: 1024px) {
  .hero-visual {
    display: block !important;
  }
  .hero-visual-frame {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    gap: 12px !important;
  }
  .visual-top {
    gap: 8px !important;
  }
  .visual-desc {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
  .visual-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .visual-tag {
    padding: 4px 8px !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
  .visual-bottom {
    gap: 8px !important;
  }
}

/* FIX-PAGE-HERO-PADDING-MOBILE: reducir padding-top del hero en móvil */
@media (max-width: 1024px) {
  .page-hero {
    padding-top: 32px !important;
    padding-bottom: 24px !important;
  }
}

/* FIX-SERVICE-DETAIL-PADDING-MOBILE */
@media (max-width: 768px) {
  .service-detail {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}

/* FIX-SCROLL-INDICATOR-MOBILE */
@media (max-width: 768px) {
  .scroll-indicator {
    display: none !important;
  }
}