:root {
  --navy:       #0a1628;
  --navy-mid:   #0f1e38;
  --navy-light: #152444;
  --gold:       #c9a84c;
  --gold-light: #e8c96a;
  --blue:       #1e6fff;
  --blue-light: #5599ff;
  --white:      #f4f1eb;
  --muted:      #7a8fac;
  --border:     rgba(201,168,76,0.13);
  --border-blue:rgba(30,111,255,0.18);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--navy); color:var(--white); font-family:'DM Sans',sans-serif; font-weight:300; overflow-x:hidden; }

/* ═══════════════════════════ NAV ═══════════════════════════ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 3.5rem;
  height:68px;
  background:rgba(10,22,40,0.96);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.nav-logo { display:flex; flex-direction:column; text-decoration:none; }
.nav-logo-name {
  font-family:'Bebas Neue',sans-serif; font-size:1.75rem;
  letter-spacing:0.12em; color:var(--gold); line-height:1;
}
.nav-logo-sub {
  font-size:0.55rem; letter-spacing:0.32em; text-transform:uppercase;
  color:var(--muted); margin-top:1px;
}

/* main menu */
.nav-menu { display:flex; align-items:center; gap:0; list-style:none; height:68px; }
.nav-item { position:relative; height:100%; display:flex; align-items:center; }
.nav-item > a, .nav-item > button {
  display:flex; align-items:center; gap:0.35rem;
  padding:0 1.1rem; height:100%;
  color:var(--white); text-decoration:none; background:none; border:none; cursor:pointer;
  font-family:'DM Sans',sans-serif; font-size:0.75rem; letter-spacing:0.18em;
  text-transform:uppercase; font-weight:400;
  opacity:0.65; transition:opacity 0.2s, color 0.2s;
  white-space:nowrap;
}
.nav-item > a:hover, .nav-item > button:hover,
.nav-item:hover > a, .nav-item:hover > button { opacity:1; color:var(--gold); }
.nav-chevron { font-size:0.5rem; opacity:0.5; transition:transform 0.2s; }
.nav-item:hover .nav-chevron { transform:rotate(180deg); }

/* dropdown */
.nav-dropdown {
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background:rgba(9,18,34,0.98); backdrop-filter:blur(20px);
  border:1px solid var(--border);
  min-width:240px; padding:0.6rem 0;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateX(-50%) translateY(6px);
  transition:opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  border-top:2px solid var(--gold);
}
.nav-item:hover .nav-dropdown {
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.nav-dropdown a {
  display:flex; align-items:center; gap:0.7rem;
  padding:0.6rem 1.3rem;
  color:rgba(244,241,235,0.7); text-decoration:none;
  font-size:0.8rem; letter-spacing:0.05em;
  transition:background 0.15s, color 0.15s; white-space:nowrap;
}
.nav-dropdown a:hover { background:rgba(201,168,76,0.07); color:var(--gold); }
.nav-dropdown a span.dd-icon { font-size:1rem; width:1.4rem; text-align:center; }
.nav-dropdown-title {
  padding:0.4rem 1.3rem 0.2rem;
  font-size:0.6rem; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--muted); font-family:'DM Mono',monospace;
}
.nav-dropdown hr { border:none; border-top:1px solid var(--border); margin:0.4rem 0; }

/* blue-tinted dropdown for tech */
.nav-dropdown.tech-dd { border-top-color:var(--blue); }
.nav-dropdown.tech-dd a:hover { background:rgba(30,111,255,0.08); color:var(--blue-light); }

.nav-right { display:flex; align-items:center; gap:1rem; }
.nav-cta {
  background:var(--gold); color:var(--navy);
  padding:0.5rem 1.3rem; border-radius:2px;
  font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase;
  font-weight:600; text-decoration:none; transition:background 0.2s;
  white-space:nowrap;
}
.nav-cta:hover { background:var(--gold-light); }

/* hamburger */
.nav-burger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px; }
.nav-burger span { display:block; width:22px; height:2px; background:var(--white); border-radius:2px; transition:all 0.3s; }

/* mobile nav */
.nav-mobile {
  display:none; position:fixed; top:68px; left:0; right:0; bottom:0;
  background:rgba(9,18,34,0.99); z-index:199; overflow-y:auto;
  padding:1.5rem 2rem 3rem;
}
.nav-mobile.open { display:block; }
.nav-mobile-group { margin-bottom:1.5rem; }
.nav-mobile-label {
  font-size:0.62rem; letter-spacing:0.3em; text-transform:uppercase;
  color:var(--muted); font-family:'DM Mono',monospace; margin-bottom:0.6rem;
}
.nav-mobile-group a {
  display:flex; align-items:center; gap:0.7rem;
  padding:0.65rem 0; color:rgba(244,241,235,0.75);
  text-decoration:none; font-size:0.9rem; border-bottom:1px solid rgba(255,255,255,0.05);
}
.nav-mobile-group a:hover { color:var(--gold); }

/* ═══════════════════════════ HERO ═══════════════════════════ */
.hero {
  min-height:100vh; display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 4rem 6rem; position:relative; overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0;
  background:
    linear-gradient(135deg, rgba(10,22,40,0.97) 0%, rgba(13,59,110,0.55) 60%, rgba(10,22,40,0.92) 100%),
    repeating-linear-gradient(0deg, transparent, transparent 80px, rgba(201,168,76,0.025) 80px, rgba(201,168,76,0.025) 81px),
    repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(201,168,76,0.025) 80px, rgba(201,168,76,0.025) 81px);
}
.hero-watermark {
  position:absolute; right:-2rem; top:50%; transform:translateY(-50%);
  font-family:'Bebas Neue'; font-size:22vw; line-height:1;
  color:rgba(201,168,76,0.05); pointer-events:none; user-select:none; white-space:nowrap;
}
.hero-eyebrow {
  position:relative; font-family:'DM Mono',monospace;
  font-size:0.7rem; letter-spacing:0.32em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.2rem;
  display:flex; align-items:center; gap:0.9rem;
}
.hero-eyebrow::before { content:''; display:block; width:36px; height:1px; background:var(--gold); }
.hero-title {
  position:relative; font-family:'Bebas Neue',sans-serif;
  font-size:clamp(4rem, 10vw, 9rem); line-height:0.92;
  letter-spacing:0.04em; margin-bottom:1.8rem;
}
.hero-title em { font-style:normal; color:var(--gold); }
.hero-sub {
  position:relative; max-width:540px; line-height:1.78;
  color:rgba(244,241,235,0.62); font-size:1rem; margin-bottom:2.5rem;
}
.hero-actions { position:relative; display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.btn-primary {
  background:var(--gold); color:var(--navy);
  padding:0.85rem 2rem; border-radius:2px;
  font-size:0.76rem; letter-spacing:0.2em; text-transform:uppercase;
  font-weight:600; text-decoration:none; transition:background 0.2s, transform 0.2s;
}
.btn-primary:hover { background:var(--gold-light); transform:translateY(-2px); }
.btn-outline {
  border:1px solid rgba(201,168,76,0.4); color:var(--white);
  padding:0.85rem 2rem; border-radius:2px; text-decoration:none;
  font-size:0.76rem; letter-spacing:0.2em; text-transform:uppercase;
  transition:border-color 0.2s, color 0.2s;
}
.btn-outline:hover { border-color:var(--gold); color:var(--gold); }

.hero-pills {
  position:absolute; bottom:6rem; right:4rem;
  display:flex; flex-direction:column; gap:0.6rem; align-items:flex-end;
}
.hero-pill {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.35rem 0.9rem; border-radius:100px; font-size:0.66rem;
  letter-spacing:0.18em; text-transform:uppercase; font-family:'DM Mono',monospace;
}
.hero-pill.gold { background:rgba(201,168,76,0.1); border:1px solid rgba(201,168,76,0.3); color:var(--gold); }
.hero-pill.blue { background:rgba(30,111,255,0.1); border:1px solid rgba(30,111,255,0.3); color:var(--blue-light); }
.hero-pill::before { content:'●'; font-size:0.45rem; }

/* ═══════════════════════════ SHARED ═══════════════════════════ */
.divider { width:100%; height:1px; background:linear-gradient(90deg, transparent, rgba(201,168,76,0.18), transparent); }
section { padding:7rem 4rem; }
.section-tag {
  font-family:'DM Mono',monospace; font-size:0.67rem;
  letter-spacing:0.35em; text-transform:uppercase; color:var(--gold);
  margin-bottom:0.9rem; display:flex; align-items:center; gap:0.8rem;
}
.section-tag::before { content:''; display:block; width:22px; height:1px; background:var(--gold); }
.section-tag.blue { color:var(--blue-light); }
.section-tag.blue::before { background:var(--blue-light); }
.section-title {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(2.6rem, 5vw, 4.5rem);
  letter-spacing:0.04em; line-height:0.94; margin-bottom:1.4rem;
}
.section-title em { font-style:normal; color:var(--gold); }
.section-title em.blue { color:var(--blue-light); }
.section-body { color:rgba(244,241,235,0.58); line-height:1.82; font-size:0.97rem; max-width:560px; }

/* ═══════════════════════════ TWO-COLUMN INTRO ═══════════════════════════ */
.intro-cols { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:end; margin-bottom:4.5rem; }

/* ═══════════════════════════ SERVICE CARDS ═══════════════════════════ */
.cards-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  border:1px solid rgba(201,168,76,0.1);
}
.scard {
  padding:2.5rem 2rem; background:rgba(10,22,40,0.85);
  border:1px solid rgba(201,168,76,0.07);
  position:relative; overflow:hidden;
  transition:background 0.3s; cursor:default;
}
.scard::after {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform 0.35s ease;
}
.scard:hover { background:rgba(15,30,56,0.95); }
.scard:hover::after { transform:scaleX(1); }
.scard-num {
  position:absolute; top:1.3rem; right:1.6rem;
  font-family:'Bebas Neue'; font-size:3.2rem; color:rgba(201,168,76,0.05); line-height:1;
}
.scard-icon { font-size:2rem; margin-bottom:1.1rem; line-height:1; }
.scard-title { font-family:'Bebas Neue'; font-size:1.5rem; letter-spacing:0.06em; margin-bottom:0.65rem; }
.scard-desc { font-size:0.85rem; line-height:1.72; color:var(--muted); }

/* tech variant */
.scard.tech { background:rgba(8,16,32,0.85); border-color:rgba(30,111,255,0.08); }
.scard.tech::after { background:linear-gradient(90deg, var(--blue), var(--blue-light)); }
.scard.tech:hover { background:rgba(10,20,44,0.95); }
.scard-tags { display:flex; flex-wrap:wrap; gap:0.35rem; margin-top:0.9rem; }
.scard-tag {
  font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase;
  padding:0.18rem 0.55rem; border-radius:100px;
  background:rgba(30,111,255,0.08); border:1px solid rgba(30,111,255,0.22);
  color:var(--blue-light); font-family:'DM Mono',monospace;
}

/* ═══════════════════════════ STEPS ═══════════════════════════ */
.steps-row { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; margin-top:4rem; position:relative; }
.steps-row::before {
  content:''; position:absolute; top:2.3rem; left:12%; right:12%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(201,168,76,0.25), transparent);
}
.step { text-align:center; padding:0 0.8rem; }
.step-circle {
  width:4.6rem; height:4.6rem; border-radius:50%;
  border:1px solid rgba(201,168,76,0.3);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1.4rem;
  font-family:'Bebas Neue'; font-size:1.7rem; color:var(--gold);
  background:rgba(201,168,76,0.05); transition:background 0.3s, border-color 0.3s;
}
.step:hover .step-circle { background:rgba(201,168,76,0.12); border-color:var(--gold); }
.step-title { font-family:'Bebas Neue'; font-size:1.25rem; letter-spacing:0.06em; margin-bottom:0.55rem; }
.step-desc { font-size:0.82rem; color:var(--muted); line-height:1.68; }

/* ═══════════════════════════ TRACKING ═══════════════════════════ */
#rastreo { background:var(--navy-mid); position:relative; overflow:hidden; }
#rastreo::before {
  content:'TRACK'; position:absolute; right:-1rem; top:50%; transform:translateY(-50%);
  font-family:'Bebas Neue'; font-size:14rem; color:rgba(201,168,76,0.04);
  pointer-events:none; line-height:1;
}
.track-cols { display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:center; }
.track-box {
  background:rgba(10,22,40,0.7); border:1px solid rgba(201,168,76,0.2);
  padding:2.5rem; border-radius:3px;
}
.track-box p { font-size:0.87rem; color:var(--muted); margin-bottom:1.4rem; line-height:1.72; }
.track-row { display:flex; }
.track-input {
  flex:1; background:rgba(255,255,255,0.04); border:1px solid rgba(201,168,76,0.2);
  border-right:none; padding:0.78rem 1rem;
  color:var(--white); font-family:'DM Mono',monospace; font-size:0.84rem;
  outline:none; border-radius:2px 0 0 2px;
}
.track-input::placeholder { color:var(--muted); }
.track-input:focus { border-color:var(--gold); }
.track-btn {
  background:var(--gold); color:var(--navy); border:none; cursor:pointer;
  padding:0.78rem 1.3rem; font-size:0.72rem; letter-spacing:0.2em;
  text-transform:uppercase; font-weight:700; font-family:'DM Sans',sans-serif;
  border-radius:0 2px 2px 0; transition:background 0.2s;
}
.track-btn:hover { background:var(--gold-light); }
.track-alt { font-size:0.77rem; color:var(--muted); margin-top:0.8rem; }
.track-alt a { color:var(--gold); text-decoration:none; }
.track-result {
  display:none; margin-top:1rem; padding:1.1rem;
  background:rgba(201,168,76,0.07); border:1px solid rgba(201,168,76,0.22); border-radius:2px;
  font-size:0.84rem; color:var(--muted); line-height:1.7;
}
.track-result a { color:var(--gold); text-decoration:none; }

/* ═══════════════════════════ TECH CTA BAR ═══════════════════════════ */
.tech-cta {
  margin-top:3.5rem; padding:2.5rem 3rem;
  background:linear-gradient(135deg, rgba(30,111,255,0.07), rgba(201,168,76,0.04));
  border:1px solid rgba(30,111,255,0.18); border-radius:4px;
  display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap;
}
.tech-cta h3 { font-family:'Bebas Neue'; font-size:1.8rem; letter-spacing:0.05em; }
.tech-cta h3 em { font-style:normal; color:var(--blue-light); }
.tech-cta p { font-size:0.84rem; color:var(--muted); margin-top:0.3rem; }
.btn-blue {
  background:var(--blue); color:#fff; border:none; cursor:pointer;
  padding:0.85rem 2rem; border-radius:2px;
  font-size:0.76rem; letter-spacing:0.2em; text-transform:uppercase;
  font-weight:600; text-decoration:none; transition:background 0.2s, transform 0.2s;
  white-space:nowrap;
}
.btn-blue:hover { background:var(--blue-light); transform:translateY(-1px); }

/* ═══════════════════════════ CONTACT ═══════════════════════════ */
#contacto { background:var(--navy); }
.contact-grid { display:grid; grid-template-columns:1fr 1.45fr; gap:5rem; margin-top:3.5rem; }
.contact-info { display:flex; flex-direction:column; gap:1.8rem; }
.ci-label {
  font-family:'DM Mono',monospace; font-size:0.63rem;
  letter-spacing:0.3em; text-transform:uppercase; color:var(--gold); margin-bottom:0.35rem;
}
.ci-val { font-size:0.9rem; color:rgba(244,241,235,0.72); line-height:1.65; }
.ci-val a { color:inherit; text-decoration:none; }
.ci-val a:hover { color:var(--gold); }
.ci-note {
  padding:1.3rem 1.5rem; border:1px solid var(--border);
  background:rgba(201,168,76,0.04); border-radius:2px;
  font-size:0.82rem; color:var(--muted); line-height:1.75;
}

.cform { display:flex; flex-direction:column; gap:1.1rem; }
.frow { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.fg { display:flex; flex-direction:column; gap:0.38rem; }
.fg label {
  font-size:0.63rem; letter-spacing:0.25em; text-transform:uppercase;
  color:var(--muted); font-family:'DM Mono',monospace;
}
.fg input, .fg select, .fg textarea {
  background:rgba(255,255,255,0.04); border:1px solid rgba(201,168,76,0.18);
  color:var(--white); font-family:'DM Sans',sans-serif; font-size:0.88rem;
  padding:0.76rem 1rem; border-radius:2px; outline:none;
  transition:border-color 0.2s; -webkit-appearance:none; appearance:none;
}
.fg select {
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5'%3E%3Cpath d='M0 0l4.5 5L9 0z' fill='%23c9a84c'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center;
}
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color:var(--gold); background:rgba(255,255,255,0.06); }
.fg input::placeholder, .fg textarea::placeholder { color:var(--muted); }
.fg textarea { resize:vertical; min-height:105px; }
.fg.span2 { grid-column:1/-1; }
.fnotice {
  font-size:0.75rem; color:var(--muted); line-height:1.65;
  background:rgba(201,168,76,0.06); border-left:2px solid var(--gold);
  padding:0.75rem 1rem; border-radius:0 2px 2px 0;
}
.btn-send {
  background:var(--gold); color:var(--navy); border:none; cursor:pointer;
  padding:0.95rem 2rem; font-family:'DM Sans',sans-serif;
  font-size:0.76rem; letter-spacing:0.2em; text-transform:uppercase;
  font-weight:700; border-radius:2px; transition:background 0.2s, transform 0.2s; width:100%;
}
.btn-send:hover { background:var(--gold-light); transform:translateY(-1px); }
.form-ok {
  display:none; text-align:center; padding:3rem;
  border:1px solid rgba(201,168,76,0.28); background:rgba(201,168,76,0.05); border-radius:2px;
}
.form-ok h3 { font-family:'Bebas Neue'; font-size:2rem; color:var(--gold); margin-bottom:0.8rem; }
.form-ok p { color:var(--muted); font-size:0.88rem; line-height:1.7; }

/* ═══════════════════════════ FOOTER ═══════════════════════════ */
footer {
  background:#060e1a; padding:2.5rem 4rem;
  border-top:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.5rem;
}
.foot-logo span:first-child { font-family:'Bebas Neue'; font-size:1.4rem; letter-spacing:0.1em; color:var(--gold); display:block; }
.foot-logo span:last-child { font-size:0.58rem; letter-spacing:0.28em; color:var(--muted); text-transform:uppercase; }
.foot-mid { text-align:center; font-size:0.7rem; color:var(--muted); letter-spacing:0.07em; line-height:1.8; }
.foot-right { font-size:0.7rem; color:var(--muted); text-align:right; line-height:1.8; }
.foot-right a { color:var(--gold); text-decoration:none; }

/* ═══════════════════════════ FADE IN ═══════════════════════════ */
.fi { opacity:0; transform:translateY(22px); transition:opacity 0.65s ease, transform 0.65s ease; }
.fi.vis { opacity:1; transform:none; }
.fi-d1 { transition-delay:0.1s; }
.fi-d2 { transition-delay:0.2s; }
.fi-d3 { transition-delay:0.3s; }

/* ═══════════════════════════ RESPONSIVE ═══════════════════════════ */
@media(max-width:960px){
  nav { padding:0 1.5rem; }
  .nav-menu, .nav-right .nav-cta { display:none; }
  .nav-burger { display:flex; }
  .hero { padding:0 1.5rem 4rem; }
  .hero-pills { display:none; }
  section { padding:5rem 1.5rem; }
  .intro-cols { grid-template-columns:1fr; gap:2rem; }
  .cards-grid { grid-template-columns:1fr; }
  .steps-row { grid-template-columns:1fr 1fr; }
  .track-cols { grid-template-columns:1fr; gap:2.5rem; }
  .contact-grid { grid-template-columns:1fr; gap:2.5rem; }
  .frow { grid-template-columns:1fr; }
  .tech-cta { flex-direction:column; align-items:flex-start; }
  footer { flex-direction:column; align-items:flex-start; }
  .foot-right, .foot-mid { text-align:left; }
}
@media(max-width:600px){
  .steps-row { grid-template-columns:1fr; }
}