/* ═══════════════════════════════════════════════════════
   AUROCARAG — PREMIUM CORPORATE CSS
   Design System: Navy + Cyan + White | Inter + Plus Jakarta Sans
═══════════════════════════════════════════════════════ */

/* ── RESET & BASE ─────────────────────────────────── */


:root {
      --navy: #00132E;
      --navym: #002E61;
      --blue: #015B97;
      --bluel: #1A7AC0;
      --orange: #F57B00;
      --oranged: #E76A0E;
      --gray: #F1F1F1;
      --text: #5B6472;
      --ease: cubic-bezier(.16, 1, .3, 1);
      --ease2: cubic-bezier(.19, 1, .22, 1)
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }
/* ── HOME ─────────────────────────────────── */
    html {
      scroll-behavior: smooth;
      font-size: 16px
    }

    body {
      font-family: 'Inter', sans-serif;
      background: #fff;
      color: var(--navy);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      cursor: none
    }

    a {
      text-decoration: none;
      color: inherit
    }

    ul {
      list-style: none
    }

    img {
      max-width: 100%;
      display: block
    }

    #cursor-dot {
      position: fixed;
      width: 8px;
      height: 8px;
      background: var(--orange);
      border-radius: 50%;
      pointer-events: none;
      z-index: 9999;
      transform: translate(-50%, -50%);
      transition: width .2s, height .2s, background .2s
    }

    #cursor-ring {
      position: fixed;
      width: 38px;
      height: 38px;
      border: 1.5px solid rgba(245, 123, 0, .45);
      border-radius: 50%;
      pointer-events: none;
      z-index: 9998;
      transform: translate(-50%, -50%);
      transition: transform .12s var(--ease), width .25s var(--ease), height .25s var(--ease), background .2s
    }

    body.link-hover #cursor-dot {
      width: 12px;
      height: 12px
    }

    body.link-hover #cursor-ring {
      width: 52px;
      height: 52px;
      background: rgba(245, 123, 0, .08);
      border-color: var(--orange)
    }

    #nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      transition: background .4s, padding .4s, box-shadow .4s;
      height: 90px;
      display: flex;
    }

    #nav.scrolled {
      padding: 12px 0;
      background: #155287;
      backdrop-filter: blur(16px);
      box-shadow: 0 1px 0 rgba(255, 255, 255, .07);
    }

    .nav-inner {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .logo-mark {
      width: 36px;
      height: 36px;
      background: var(--orange);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .logo-text {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 22px;
      font-weight: 900;
      color: #fff;
      letter-spacing: .03em
    }

    .logo-text em {
      color: var(--orange);
      font-style: normal
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 2px
    }

    .nav-link {
      padding: 8px 14px;
      border-radius: 6px;
      font-size: 13.5px;
      font-weight: 500;
      color: rgba(255, 255, 255, .75);
      transition: color .15s, background .15s;
      position: relative
    }

    .nav-link::after {
      content: '';
      position: absolute;
      bottom: 4px;
      left: 14px;
      right: 14px;
      height: 1.5px;
      background: var(--orange);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .28s var(--ease)
    }

    .nav-link:hover {
      color: #fff
    }

    .nav-link:hover::after,
    .nav-link.active::after {
      transform: scaleX(1)
    }

    .nav-link.active {
      color: #fff
    }

    .nav-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--orange);
      color: #fff;
      padding: 11px 22px;
      border-radius: 6px;
      font-size: 13.5px;
      font-weight: 600;
      transition: transform .2s var(--ease), box-shadow .2s, background .18s
    }

    .nav-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(245, 123, 0, .35);
      background: var(--oranged)
    }

    .nav-cta svg {
      transition: transform .2s var(--ease)
    }

    .nav-cta:hover svg {
      transform: translateX(3px)
    }

    .nav-mob {
      display: none;
      padding: 8px;
      background: transparent;
      border: none;
      color: rgba(255, 255, 255, .85);
      cursor: pointer;
      flex-shrink: 0
    }

    .nav-mob .hline {
      transition: transform .35s cubic-bezier(.16, 1, .3, 1), opacity .25s;
      transform-box: fill-box;
      transform-origin: center
    }

    .nav-mob.open .hline-1 {
      transform: rotate(45deg) translate(4.5px, 5px)
    }

    .nav-mob.open .hline-2 {
      opacity: 0
    }

    .nav-mob.open .hline-3 {
      transform: rotate(-45deg) translate(4.5px, -5px)
    }

    .mob-drawer {
      position: fixed;
      inset: 0;
      z-index: 99;
      background: rgba(0, 19, 46, .97);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 100px 32px 48px;
      opacity: 0;
      pointer-events: none;
      transition: opacity .35s cubic-bezier(.16, 1, .3, 1)
    }

    .mob-drawer.open {
      opacity: 1;
      pointer-events: all
    }

    .mob-links {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      margin-bottom: 36px
    }

    .mob-link {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: clamp(34px, 8vw, 52px);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .02em;
      color: rgba(255, 255, 255, .45);
      padding: 6px 24px;
      border-radius: 8px;
      opacity: 0;
      transform: translateY(28px);
      transition: color .15s, opacity .45s cubic-bezier(.16, 1, .3, 1), transform .45s cubic-bezier(.16, 1, .3, 1)
    }

    .mob-drawer.open .mob-link {
      opacity: 1;
      transform: translateY(0)
    }

    .mob-drawer.open .mob-link:nth-child(1) {
      transition-delay: .06s
    }

    .mob-drawer.open .mob-link:nth-child(2) {
      transition-delay: .11s
    }

    .mob-drawer.open .mob-link:nth-child(3) {
      transition-delay: .16s
    }

    .mob-drawer.open .mob-link:nth-child(4) {
      transition-delay: .21s
    }

    .mob-drawer.open .mob-link:nth-child(5) {
      transition-delay: .26s
    }

    .mob-link:hover {
      color: #fff
    }

    .mob-link.active {
      color: #F57B00
    }

    .mob-cta-wrap {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity .4s .3s cubic-bezier(.16, 1, .3, 1), transform .4s .3s cubic-bezier(.16, 1, .3, 1)
    }

    .mob-drawer.open .mob-cta-wrap {
      opacity: 1;
      transform: translateY(0)
    }

    .mob-close {
      position: absolute;
      top: 22px;
      right: 24px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .08);
      border: none;
      color: rgba(255, 255, 255, .7);
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background .18s
    }

    .mob-close:hover {
      background: rgba(255, 255, 255, .16)
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 28px;
      border-radius: 6px;
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      font-weight: 600;
      border: none;
      cursor: none;
      transition: transform .22s var(--ease), box-shadow .22s, background .18s
    }

    .btn:hover {
      transform: translateY(-2px)
    }

    .btn:active {
      transform: scale(.97)
    }

    .btn svg {
      transition: transform .2s var(--ease)
    }

    .btn:hover svg {
      transform: translateX(3px)
    }

    .btn-orange {
      background: var(--orange);
      color: #fff
    }

    .btn-orange:hover {
      background: var(--oranged);
      box-shadow: 0 10px 32px rgba(245, 123, 0, .32)
    }

    .btn-ghost {
      background: transparent;
      color: #fff;
      border: 1.5px solid rgba(255, 255, 255, .4)
    }

    .btn-ghost:hover {
      background: rgba(255, 255, 255, .09);
      border-color: rgba(255, 255, 255, .7)
    }

    .hero {
      position: relative;
      height: 100vh;
      min-height: 620px;
      display: flex;
      align-items: center;
      overflow: hidden
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      transform: scale(1.15);
      transform-origin: center
    }

    .hero-bg img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(0, 19, 46, .88) 0%, rgba(0, 46, 97, .62) 55%, rgba(0, 19, 46, .78) 100%)
    }

    .hero-grid {
      position: absolute;
      inset: 0;
      opacity: .03;
      background-image: linear-gradient(rgba(255, 255, 255, .7) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .7) 1px, transparent 1px);
      background-size: 56px 56px
    }

    .hero-content {
      position: relative;
      z-index: 2;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 32px;
      padding-top: 130px;
      width: 100%
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 28px;
      opacity: 0
    }

    .hero-eyebrow-dot {
      width: 7px;
      height: 7px;
      background: var(--orange);
      border-radius: 50%;
      animation: pulse 2s ease-in-out infinite
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1;
        transform: scale(1)
      }

      50% {
        opacity: .5;
        transform: scale(.65)
      }
    }

    .hero-eyebrow span {
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase
    }

    .hero-hl {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      text-transform: uppercase;
      color: #fff;
      line-height: .92;
      font-size: clamp(35px, 4vw, 130px);
      overflow: hidden
    }

    .hero-line {
      display: block;
      overflow: hidden
    }

    .hero-line span {
      display: block;
      transform: translateY(110%);
      opacity: 0
    }

    .hero-accent {
      color: var(--orange)
    }

    .hero-sub {
      color: #fff;
      font-size: 18px;
      line-height: 1.65;
      max-width: 520px;
      margin-top: 24px;
      opacity: 0;
      transform: translateY(20px)
    }

    .hero-modes {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 30px;
      opacity: 0;
      transform: translateY(16px)
    }

    .mode-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 8px 16px;
      border-radius: 100px;
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .13);
      color: rgba(255, 255, 255, .8);
      font-size: 13px;
      font-weight: 500;
      transition: background .18s, border-color .18s, transform .22s var(--ease)
    }

    .mode-pill:hover {
      background: rgba(255, 255, 255, .12);
      border-color: rgba(255, 255, 255, .28);
      transform: translateY(-2px)
    }

    .hero-ctas {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 36px;
      opacity: 0;
      transform: translateY(14px)
    }

    .hero-scroll {
      position: absolute;
      bottom: 36px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      color: rgba(255, 255, 255, .3);
      font-size: 10px;
      letter-spacing: .1em;
      text-transform: uppercase;
      opacity: 0
    }

    .scroll-line {
      width: 1px;
      height: 40px;
      background: linear-gradient(to bottom, rgba(255, 255, 255, .3), transparent);
      animation: scrollLine 2.2s ease-in-out infinite
    }

    @keyframes scrollLine {

      0%,
      100% {
        opacity: .35;
        transform: scaleY(1)
      }

      50% {
        opacity: .75;
        transform: scaleY(1.4)
      }
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 14px
    }

    .eyebrow::before {
      content: '';
      display: block;
      width: 20px;
      height: 2px;
      background: var(--orange);
      flex-shrink: 0
    }

    .eyebrow-light {
      color: #F8A855
    }

    .eyebrow-light::before {
      background: #F8A855
    }

    .section-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      text-transform: uppercase;
      color: var(--blue);
      line-height: .95;
      font-size: clamp(42px, 5.5vw, 80px)
    }

    .section-title-white {
      color: #fff
    }

    .wrap {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 32px
    }

    .section {
      padding: 96px 0
    }

    .section-sm {
      padding: 64px 0
    }

    .reveal {
      opacity: 0;
      transform: translateY(32px);
      transition: opacity .7s var(--ease), transform .7s var(--ease)
    }

    .reveal.on {
      opacity: 1;
      transform: translateY(0)
    }

    .reveal-l {
      opacity: 0;
      transform: translateX(-32px);
      transition: opacity .7s var(--ease), transform .7s var(--ease)
    }

    .reveal-l.on {
      opacity: 1;
      transform: translateX(0)
    }

    .reveal-r {
      opacity: 0;
      transform: translateX(32px);
      transition: opacity .7s var(--ease), transform .7s var(--ease)
    }

    .reveal-r.on {
      opacity: 1;
      transform: translateX(0)
    }

    .reveal-sc {
      opacity: 0;
      transform: scale(.88);
      transition: opacity .55s var(--ease), transform .55s var(--ease)
    }

    .reveal-sc.on {
      opacity: 1;
      transform: scale(1)
    }

    .stats {
      background: var(--navym);
      padding: 52px 0
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr)
    }

    .stat {
      text-align: center;
      padding: 20px;
      border-right: 1px solid rgba(255, 255, 255, .08)
    }

    .stat:last-child {
      border-right: none
    }

    .stat-n {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      color: var(--orange);
      line-height: 1;
      margin-bottom: 6px;
      font-size: clamp(48px, 5vw, 68px);
      font-variant-numeric: tabular-nums
    }

    .stat-l {
      color: #fff;
      font-size: 13px;
      font-weight: 500
    }

    .stat-s {
      color: #fff;
      font-size: 11px;
      margin-top: 3px
    }

    .services {
      background: #fff
    }

    .svc-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 52px
    }

    .svc-card {
      position: relative;
      overflow: hidden;
      border-radius: 16px;
      aspect-ratio: 4/5;
      cursor: pointer
    }

    .svc-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .6s var(--ease2)
    }

    .svc-card:hover img {
      transform: scale(1.05)
    }

    .svc-overlay {
      position: absolute;
      inset: 0;
      border-radius: 16px;
      background: linear-gradient(to top, rgba(0, 19, 46, .92) 0%, rgba(0, 19, 46, .15) 55%, transparent 100%);
      pointer-events: none
    }

    .svc-badge {
      position: absolute;
      top: 14px;
      left: 14px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .55);
      background: rgba(0, 0, 0, .3);
      backdrop-filter: blur(6px);
      padding: 4px 10px;
      border-radius: 100px;
      border: 1px solid rgba(255, 255, 255, .1)
    }

    .svc-desc {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 19, 46, .92);
      backdrop-filter: blur(8px);
      padding: 18px 22px 22px;
      transform: translateY(calc(100% - 62px));
      transition: transform .35s ease;
      border-top: 1px solid rgba(255, 255, 255, .07)
    }

    .svc-card:hover .svc-desc {
      transform: translateY(0)
    }

    .svc-card:focus-visible .svc-desc {
      transform: translateY(0)
    }

    .svc-desc-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px
    }

    .svc-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 22px;
      font-weight: 700;
      text-transform: uppercase;
      color: #fff
    }

    .svc-arrow {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 1px solid rgba(245, 123, 0, .5);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background .18s, border-color .18s
    }

    .svc-card:hover .svc-arrow {
      background: var(--orange);
      border-color: var(--orange)
    }

    .svc-tagline {
      color: rgba(255, 255, 255, .55);
      font-size: 13px;
      line-height: 1.55
    }

    .svc-features {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 10px
    }

    .svc-feat {
      font-size: 10px;
      color: rgba(255, 255, 255, .5);
      background: rgba(255, 255, 255, .07);
      padding: 3px 8px;
      border-radius: 4px;
      border: 1px solid rgba(255, 255, 255, .1)
    }

    .why {
      position: relative;
      padding: 128px 0;
      overflow: hidden
    }

    .why-bg {
      position: absolute;
      inset: 0;
      z-index: 0
    }

    .why-bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1.1)
    }

    .why-bg-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 19, 46, .88)
    }

    .why-content {
      position: relative;
      z-index: 1
    }

    .why-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-top: 52px
    }

    .why-card {
      padding: 28px;
      border-radius: 14px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .07);
      transition: background .22s, border-color .22s, transform .25s var(--ease)
    }

    .why-card:hover {
      background: rgba(255, 255, 255, .07);
      border-color: rgba(245, 123, 0, .28);
      transform: translateY(-5px)
    }

    .why-n {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 52px;
      font-weight: 900;
      color: rgba(245, 123, 0, .14);
      line-height: 1;
      margin-bottom: 16px
    }

    .why-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 20px;
      font-weight: 700;
      text-transform: uppercase;
      color: #fff;
      margin-bottom: 9px
    }

    .why-desc {
      font-size: 14px;
      color: rgba(255, 255, 255, .5);
      line-height: 1.62
    }

    .industries {
      background: var(--gray)
    }

    .ind-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: center;
      margin-top: 44px
    }

    .ind-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 22px;
      border-radius: 100px;
      background: #fff;
      border: 1px solid rgba(0, 19, 46, .1);
      font-size: 14px;
      font-weight: 500;
      color: var(--navym);
      transition: all .22s var(--ease);
      cursor: default
    }

    .ind-tag:hover {
      background: var(--navy);
      color: #fff;
      border-color: var(--navy);
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(0, 19, 46, .18)
    }

    .cta-band {
      position: relative;
      padding: 128px 0;
      overflow: hidden;
      text-align: center
    }

    .cta-band-bg {
      position: absolute;
      inset: 0;
      z-index: 0
    }

    .cta-band-bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1.08)
    }

    .cta-band-ov {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(0, 19, 46, .92) 0%, rgba(0, 46, 97, .8) 55%, rgba(1, 91, 151, .72) 100%)
    }

    .cta-band-content {
      position: relative;
      z-index: 1;
      max-width: 900px;
      margin: 0 auto;
      padding: 0 32px
    }

    .cta-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      text-transform: uppercase;
      color: #fff;
      line-height: .92;
      font-size: clamp(52px, 8vw, 108px);
      margin-bottom: 24px
    }

    .cta-sub {
      color: rgba(255, 255, 255, .6);
      font-size: 18px;
      margin-bottom: 36px;
      line-height: 1.6
    }

    .cta-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      justify-content: center
    }

    .footer {
      background: var(--navy);
      padding: 64px 0 32px;
      border-top: 1px solid rgba(255, 255, 255, .05)
    }

    .footer-top {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 48px;
      margin-bottom: 48px
    }

    .footer-tagline {
      font-size: 13.5px;
      color: rgb(255, 255, 255);
      line-height: 1.65;
      max-width: 280px;
      margin-top: 14px
    }

    .footer-col-h {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgb(255, 255, 255);
      margin-bottom: 16px
    }

    .footer-links {
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    .footer-lnk {
      font-size: 13.5px;
      color: rgba(255, 255, 255, 0.658);
      transition: color .15s
    }

    .footer-lnk:hover {
      color: var(--orange)
    }

    .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, .05);
      padding-top: 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px
    }

    .footer-copy {
      font-size: 12px;
      color: rgba(255, 255, 255, .25)
    }

    .footer-grupo {
      font-size: 12px;
      color: rgba(255, 255, 255, .25)
    }

    .footer-grupo span {
      color: rgba(255, 255, 255, .45)
    }

    @media(max-width:1024px) {
      .svc-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .why-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .footer-top {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:768px) {

      .nav-links,
      .nav-cta {
        display: none
      }

      .nav-mob {
        display: flex;
        align-items: center;
        justify-content: center
      }

      .stats-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .svc-grid {
        grid-template-columns: 1fr
      }

      .why-grid {
        grid-template-columns: 1fr
      }

      .footer-top {
        grid-template-columns: 1fr
      }

      .hero-hl {
        font-size: clamp(52px, 13vw, 80px)
      }
    }

    #back-top {
      position: fixed;
      bottom: 28px;
      right: 28px;
      z-index: 200;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: var(--orange);
      color: #fff;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 20px rgba(245, 123, 0, .35);
      opacity: 0;
      transform: translateY(12px) scale(.88);
      transition: opacity .35s var(--ease), transform .35s var(--ease), background .18s, box-shadow .18s;
      pointer-events: none
    }

    #back-top.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: all
    }

    #back-top:hover {
      background: var(--oranged);
      box-shadow: 0 8px 28px rgba(245, 123, 0, .48);
      transform: translateY(-3px) scale(1.07)
    }

    #back-top:active {
      transform: scale(.95)
    }

    @media(prefers-reduced-motion:reduce) {

      *,
      *::before,
      *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important
      }

      .hero-line span,
      .hero-sub,
      .hero-modes,
      .hero-ctas,
      .hero-eyebrow,
      .hero-scroll {
        opacity: 1 !important;
        transform: none !important
      }
    }


    /* ── HOME END ─────────────────────────────────── */

 /* ── CONTACTO─────────────────────────────────── */

     .page-hero {
      position: relative;
      height: 60vh;
      min-height: 400px;
      display: flex;
      align-items: flex-end;
      overflow: hidden;
      padding-bottom: 56px
    }

    .page-hero-bg {
      position: absolute;
      inset: 0;
      transform: scale(1.1)
    }

    .page-hero-bg img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .page-hero-ov {
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgba(0, 19, 46, .35) 0%, rgba(0, 19, 46, .9) 100%)
    }

    .page-hero-content {
      position: relative;
      z-index: 2;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 32px;
      width: 100%
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 64px;
      align-items: start
    }

    .contact-info-item {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 18px 0;
      border-bottom: 1px solid rgba(0, 19, 46, .07)
    }

    .contact-info-item:last-child {
      border-bottom: none
    }

    .contact-info-icon {
      width: 40px;
      height: 40px;
      flex-shrink: 0;
      border-radius: 10px;
      background: #F1F1F1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 17px
    }

    .contact-info-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #8F8F8F;
      margin-bottom: 3px
    }

    .contact-info-val {
      font-size: 14px;
      font-weight: 500;
      color: #00132E
    }

    .contact-info-val a {
      transition: color .15s
    }

    .contact-info-val a:hover {
      color: #F57B00
    }

    .form-card {
      background: #fff;
      border-radius: 20px;
      padding: 44px;
      box-shadow: 0 4px 40px rgba(0, 19, 46, .08);
      border: 1px solid rgba(0, 19, 46, .06)
    }

    .form-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 20px
    }

    .form-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #00132E
    }

    .form-input,
    .form-select,
    .form-textarea {
      width: 100%;
      padding: 13px 16px;
      border-radius: 8px;
      border: 1.5px solid rgba(0, 19, 46, .13);
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      color: #00132E;
      background: #fff;
      transition: border-color .2s, box-shadow .2s;
      outline: none
    }

    .form-input:focus,
    .form-select:focus,
    .form-textarea:focus {
      border-color: #F57B00;
      box-shadow: 0 0 0 3px rgba(245, 123, 0, .1)
    }

    .form-textarea {
      resize: none;
      height: 110px;
      line-height: 1.5
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px
    }

    .steps {
      display: flex;
      align-items: center;
      gap: 0;
      margin-bottom: 32px
    }

    .step-item {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 0
    }

    .step-dot {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      border: 2px solid rgba(0, 19, 46, .15);
      color: rgba(0, 19, 46, .4);
      transition: all .3s
    }

    .step-dot.active {
      background: #F57B00;
      border-color: #F57B00;
      color: #fff
    }

    .step-dot.done {
      background: #00132E;
      border-color: #00132E;
      color: #fff
    }

    .step-line {
      flex: 1;
      height: 2px;
      background: rgba(0, 19, 46, .1);
      transition: background .4s
    }

    .step-line.done {
      background: #F57B00
    }

    .step-label {
      font-size: 11px;
      color: rgba(0, 19, 46, .4);
      margin-top: 5px;
      text-align: center;
      display: none
    }

    .form-step {
      display: none
    }

    .form-step.active {
      display: block
    }

    .success-icon {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: rgba(245, 123, 0, .1);
      border: 2px solid #F57B00;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      font-size: 28px
    }

    @media(max-width:900px) {
      .contact-grid {
        grid-template-columns: 1fr
      }

      .form-row {
        grid-template-columns: 1fr
      }
    }

     /* ── CONTACTO END─────────────────────────────────── */


    /* ── NOSOTROS─────────────────────────────────── */

     .page-hero {
            position: relative;
            height: 100vh;
            min-height: 560px;
            display: flex;
            align-items: center;
            overflow: hidden
        }

        .page-hero-bg {
            position: absolute;
            inset: 0;
            transform: scale(1.12)
        }

        .page-hero-bg img {
            width: 100%;
            height: 100%;
            object-fit: cover
        }

        .page-hero-ov {
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom, rgba(0, 19, 46, .5) 0%, rgba(0, 19, 46, .85) 100%)
        }

        .page-hero-content {
            position: relative;
            z-index: 2;
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 32px;
            padding-top: 80px;
            width: 100%
        }

        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 72px;
            align-items: center
        }

        .about-photo {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            aspect-ratio: 4/5
        }

        .about-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .6s cubic-bezier(.16, 1, .3, 1)
        }

        .about-photo:hover img {
            transform: scale(1.03)
        }

        .about-photo-badge {
            position: absolute;
            bottom: 20px;
            left: 20px;
            right: 20px;
            padding: 18px 20px;
            border-radius: 12px;
            backdrop-filter: blur(12px);
            background: rgba(0, 19, 46, .85);
            border: 1px solid rgba(255, 255, 255, .1)
        }

        .mv-split {
            display: grid;
            grid-template-columns: 1fr 1fr
        }

        .mv-pane {
            position: relative;
            overflow: hidden;
            min-height: 440px;
            display: flex;
            align-items: center;
            padding: 64px 56px
        }

        .mv-pane img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover
        }

        .mv-pane-ov {
            position: absolute;
            inset: 0
        }

        .mv-pane-content {
            position: relative;
            z-index: 1;
            max-width: 400px
        }

        .val-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
            margin-top: 52px
        }

        .val-card {
            position: relative;
            overflow: hidden;
            border-radius: 16px;
            aspect-ratio: 16/9
        }

        .val-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .6s cubic-bezier(.16, 1, .3, 1)
        }

        .val-card:hover img {
            transform: scale(1.04)
        }

        .val-card-ov {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0, 19, 46, .92) 0%, rgba(0, 19, 46, .2) 55%, transparent 100%)
        }

        .val-card-desc {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 18px 22px 22px;
            transform: translateY(calc(100% - 56px));
            transition: transform .35s ease;
            background: rgba(0, 19, 46, .92);
            backdrop-filter: blur(8px);
            border-top: 1px solid rgba(255, 255, 255, .07)
        }

        .val-card:hover .val-card-desc {
            transform: translateY(0)
        }

        .offices-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px;
            margin-top: 48px
        }

        .office-card {
            padding: 22px;
            border-radius: 14px;
            border: 1px solid rgba(255, 255, 255, .08);
            background: rgba(255, 255, 255, .04);
            transition: border-color .22s, transform .25s cubic-bezier(.16, 1, .3, 1)
        }

        .office-card:hover {
            border-color: rgba(245, 123, 0, .28);
            transform: translateY(-4px)
        }

        .office-card.hq {
            background: var(--orange);
            border-color: transparent
        }

        @media(max-width:900px) {

            .about-grid,
            .mv-split {
                grid-template-columns: 1fr
            }

            .val-grid {
                grid-template-columns: 1fr
            }

            .offices-grid {
                grid-template-columns: repeat(2, 1fr)
            }

            .mv-pane {
                min-height: 300px;
                padding: 44px 28px
            }
        }

        @media(max-width:600px) {
            .offices-grid {
                grid-template-columns: 1fr
            }
        }

         /* ── END NOSOTROS─────────────────────────────────── */

           /* ── SERVICIOS─────────────────────────────────── */

         .page-hero {
            position: relative;
            height: 65vh;
            min-height: 440px;
            display: flex;
            align-items: flex-end;
            overflow: hidden;
            padding-bottom: 64px
        }

        .page-hero-bg {
            position: absolute;
            inset: 0
        }

        .page-hero-bg img {
            width: 100%;
            height: 100%;
            object-fit: cover
        }

        .page-hero-ov {
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom, rgba(0, 19, 46, .4) 0%, rgba(0, 19, 46, .88) 100%)
        }

        .page-hero-content {
            position: relative;
            z-index: 2;
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 32px;
            width: 100%
        }

        .svc-tabs {
            position: sticky;
            top: 70px;
            z-index: 50;
            background: rgba(0, 19, 46, .96);
            backdrop-filter: blur(16px);
            border-bottom: 1px solid rgba(255, 255, 255, .07)
        }

        .svc-tabs-inner {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 32px;
            display: flex;
            gap: 0;
            overflow-x: auto
        }

        .svc-tab {
            flex-shrink: 0;
            padding: 16px 20px;
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 15px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .04em;
            color: rgba(255, 255, 255, .45);
            background: none;
            border: none;
            border-bottom: 2px solid transparent;
            cursor: pointer;
            transition: color .2s, border-color .3s;
            position: relative
        }

        .svc-tab:hover {
            color: rgba(255, 255, 255, .75)
        }

        .svc-tab.active {
            color: #fff;
            border-bottom-color: #F57B00
        }

        .svc-panel {
            display: none
        }

        .svc-panel.active {
            display: grid;
            grid-template-columns: 1fr 1fr;
            min-height: 80vh
        }

        .svc-panel-img {
            position: relative;
            overflow: hidden;
            min-height: 480px
        }

        .svc-panel-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .8s cubic-bezier(.16, 1, .3, 1)
        }

        .svc-panel.active .svc-panel-img img {
            transform: scale(1)
        }

        .svc-panel-img-ov {
            position: absolute;
            inset: 0;
            background: linear-gradient(to right, transparent 60%, rgba(0, 19, 46, .5) 100%)
        }

        .svc-panel-info {
            display: flex;
            align-items: center;
            padding: 64px 56px;
            background: #fff
        }

        .svc-panel-inner {
            max-width: 480px
        }

        .svc-panel-feat {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 0;
            border-bottom: 1px solid rgba(0, 19, 46, .06);
            font-size: 14px;
            font-weight: 500;
            color: #00132E
        }

        .svc-panel-feat::before {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #F57B00;
            flex-shrink: 0
        }

        .add-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 48px
        }

        .add-card {
            padding: 28px;
            background: #fff;
            border-radius: 14px;
            border: 1px solid rgba(0, 19, 46, .08);
            transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s
        }

        .add-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 16px 48px rgba(0, 19, 46, .1)
        }

        .add-icon {
            font-size: 28px;
            margin-bottom: 14px
        }

        @media(max-width:900px) {
            .svc-panel.active {
                grid-template-columns: 1fr
            }

            .svc-panel-img {
                min-height: 280px
            }

            .svc-panel-info {
                padding: 40px 28px
            }

            .add-grid {
                grid-template-columns: repeat(2, 1fr)
            }
        }

        @media(max-width:600px) {
            .add-grid {
                grid-template-columns: 1fr
            }
        }


           /* ── SERVICIOS END─────────────────────────────────── */


           /* ── TECNOLOGIA─────────────────────────────────── */

           .page-hero {
      position: relative;
      height: 60vh;
      min-height: 440px;
      display: flex;
      align-items: flex-end;
      overflow: hidden;
      padding-bottom: 64px
    }

    .page-hero-bg {
      position: absolute;
      inset: 0;
      transform: scale(1.12)
    }

    .page-hero-bg img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .page-hero-ov {
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgba(0, 19, 46, .35) 0%, rgba(0, 19, 46, .92) 100%)
    }

    .page-hero-content {
      position: relative;
      z-index: 2;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 32px;
      width: 100%
    }

    .track-section {
      background: #00132E;
      padding: 96px 0
    }

    .track-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: start
    }

    .track-feat {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      margin-bottom: 24px
    }

    .track-feat-ico {
      width: 38px;
      height: 38px;
      flex-shrink: 0;
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      background: rgba(245, 123, 0, .12);
      border: 1px solid rgba(245, 123, 0, .2)
    }

    .track-feat-title {
      font-size: 14px;
      font-weight: 600;
      color: #fff;
      margin-bottom: 4px
    }

    .track-feat-desc {
      font-size: 13px;
      color: rgba(255, 255, 255, .46);
      line-height: 1.55
    }

    .mockup {
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 18px;
      overflow: hidden
    }

    .mockup-chrome {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 14px 18px;
      border-bottom: 1px solid rgba(255, 255, 255, .06)
    }

    .mockup-dots {
      display: flex;
      gap: 5px
    }

    .mockup-dot {
      width: 11px;
      height: 11px;
      border-radius: 50%
    }

    .mockup-bar {
      flex: 1;
      height: 24px;
      border-radius: 6px;
      background: rgba(255, 255, 255, .05);
      display: flex;
      align-items: center;
      padding: 0 10px
    }

    .mockup-url {
      font-size: 11px;
      color: rgba(255, 255, 255, .28);
      letter-spacing: .02em
    }

    .mockup-body {
      padding: 20px
    }

    .mock-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-bottom: 16px
    }

    .mock-stat {
      background: rgba(255, 255, 255, .04);
      border-radius: 10px;
      padding: 12px;
      text-align: center
    }

    .mock-stat-n {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: 26px;
      color: #fff;
      line-height: 1
    }

    .mock-stat-l {
      font-size: 10px;
      color: rgba(255, 255, 255, .35);
      margin-top: 3px
    }

    .track-card {
      background: rgba(255, 255, 255, .045);
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 12px;
      padding: 16px 18px;
      margin-bottom: 10px;
      transition: border-color .22s, background .22s
    }

    .track-card:hover {
      border-color: rgba(245, 123, 0, .25);
      background: rgba(255, 255, 255, .065)
    }

    .track-card:last-child {
      margin-bottom: 0
    }

    .track-card-hd {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px
    }

    .track-id {
      font-family: monospace;
      font-size: 11px;
      color: rgba(255, 255, 255, .55);
      letter-spacing: .06em
    }

    .badge {
      padding: 3px 9px;
      border-radius: 100px;
      font-size: 10px;
      font-weight: 700
    }

    .badge-ok {
      background: rgba(34, 197, 94, .13);
      color: #4ADE80;
      border: 1px solid rgba(74, 222, 128, .18)
    }

    .badge-tr {
      background: rgba(245, 123, 0, .13);
      color: #F8A855;
      border: 1px solid rgba(248, 168, 85, .2)
    }

    .track-route {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      color: rgba(255, 255, 255, .35);
      margin-bottom: 12px
    }

    .track-bar-wrap {
      height: 4px;
      background: rgba(255, 255, 255, .07);
      border-radius: 100px;
      overflow: hidden;
      margin-bottom: 10px
    }

    .track-bar-fill {
      height: 100%;
      border-radius: 100px;
      width: 0;
      transition: width 1.4s cubic-bezier(.16, 1, .3, 1)
    }

    .bar-ok {
      background: #22c55e
    }

    .bar-tr {
      background: #F57B00
    }

    .track-steps {
      display: flex;
      justify-content: space-between
    }

    .ts {
      flex: 1;
      text-align: center
    }

    .ts-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .12);
      margin: 0 auto 5px
    }

    .ts-dot.on {
      background: #F57B00
    }

    .ts-lbl {
      font-size: 9px;
      color: rgba(255, 255, 255, .28)
    }

    .ts-lbl.on {
      color: #F57B00
    }

    .cap-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 52px
    }

    .cap-card {
      background: #fff;
      border-radius: 16px;
      padding: 28px;
      border: 1px solid rgba(0, 19, 46, .07);
      transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s
    }

    .cap-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 16px 48px rgba(0, 19, 46, .1)
    }

    .cap-icon-wrap {
      width: 44px;
      height: 44px;
      border-radius: 11px;
      background: #E8F2FB;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px
    }

    .cap-icon-dot {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #015B97
    }

    .cta-dark {
      background: #002E61;
      padding: 80px 0;
      text-align: center
    }

    @media(max-width:960px) {
      .track-grid {
        grid-template-columns: 1fr
      }

      .cap-grid {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media(max-width:600px) {
      .cap-grid {
        grid-template-columns: 1fr
      }

      .mock-stats {
        grid-template-columns: repeat(3, 1fr)
      }
    }



           /* ── TECNOLOGIA END─────────────────────────────────── */