@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Montserrat:wght@400;500;600;700;800&display=swap');

:root{
  --gold:      #C9A44B;
  --gold-dark: #9E7A28;
  --black:     #000000;
  --white:     #FFFFFF;
  --graphite:  #2B2B2B;
  --graphite-soft: #1A1A1A;
  --line:      rgba(201,164,75,0.25);
  --radius:    2px;
  --maxw:      1180px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--black);
  color:var(--white);
  font-family:'Montserrat', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}

h1,h2,h3,.display{
  font-family:'Orbitron', sans-serif;
  font-weight:700;
  letter-spacing:0.02em;
  text-transform:uppercase;
  line-height:1.05;
  color:var(--white);
}
.eyebrow{
  font-family:'Montserrat', sans-serif;
  font-weight:700;
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gold);
}
.mono{font-family:'Orbitron', sans-serif;}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(0,0,0,0.88);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:84px;}
.logo-img{height:52px; width:auto;}
.navlinks{display:flex; gap:34px; align-items:center;}
.navlinks a{
  font-family:'Montserrat', sans-serif;
  font-weight:600;
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:6px 0;
  border-bottom:2px solid transparent;
  transition:border-color .2s, color .2s;
  color:var(--white);
}
.navlinks a:hover, .navlinks a.active{border-color:var(--gold); color:var(--gold);}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Montserrat', sans-serif;
  font-weight:700;
  font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  padding:13px 24px;
  border:1px solid var(--gold);
  border-radius:var(--radius);
  transition:background .2s, color .2s, opacity .2s;
}
.btn-solid{background:var(--gold); border-color:var(--gold); color:var(--black);}
.btn-solid:hover{opacity:.85;}
.btn-outline{color:var(--white); border-color:var(--gold);}
.btn-outline:hover{background:var(--gold); color:var(--black);}
.btn-wa{background:#25D366; border-color:#25D366; color:var(--black);}
.btn-wa:hover{opacity:.85;}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:92vh;
  display:flex; align-items:flex-end;
  background:var(--black);
  color:var(--white);
  overflow:hidden;
  padding-bottom:64px;
}
.hero-media{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.hero-grad{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.95) 100%);
}
.hero-content{position:relative; z-index:2; width:100%;}
.hero .eyebrow{color:var(--gold);}
.hero h1{
  font-size:clamp(42px, 7.4vw, 100px);
  max-width:1000px;
  margin-top:12px;
}
.hero h1 em{font-style:normal; color:var(--gold);}
.hero-sub{
  max-width:540px;
  margin-top:22px;
  font-size:17px;
  color:rgba(255,255,255,0.82);
}
.hero-cta{margin-top:34px; display:flex; gap:16px; flex-wrap:wrap;}

/* ---------- TRAIL COMPUTER (signature element) ---------- */
.trailbar{
  background:var(--graphite-soft);
  color:var(--white);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.trailbar .wrap{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.tb-cell{
  padding:20px 22px;
  border-left:1px solid var(--line);
}
.tb-cell:first-child{border-left:none;}
.tb-label{font-family:'Montserrat',sans-serif; font-weight:600; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold);}
.tb-value{font-size:26px; margin-top:4px; font-family:'Orbitron', sans-serif; letter-spacing:0.02em;}
.tb-unit{font-size:11px; color:rgba(255,255,255,0.5); margin-left:4px; font-family:'Montserrat',sans-serif;}

/* ---------- SECTIONS ---------- */
section{padding:100px 0;}
.section-head{max-width:640px; margin-bottom:56px;}
.section-head h2{font-size:clamp(32px,4.2vw,50px); margin-top:8px;}
.section-head p{margin-top:16px; color:rgba(255,255,255,0.72); font-size:16px;}

.split{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.split-card{background:var(--black); padding:44px;}
.split-card .num{font-family:'Orbitron',sans-serif; font-size:12px; color:var(--gold); letter-spacing:.05em;}
.split-card h3{font-size:28px; margin-top:14px;}
.split-card p{margin-top:14px; color:rgba(255,255,255,0.72);}
.split-card ul{margin-top:20px; padding-left:18px;}
.split-card li{margin-bottom:8px; color:rgba(255,255,255,0.78);}
.split-card.dark{background:var(--graphite-soft);}
.split-card.dark .num{color:var(--gold);}

.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.fleet-card{background:var(--black); padding:0;}
.fleet-photo{
  aspect-ratio:4/3;
  width:100%; height:auto;
  object-fit:cover;
  display:block;
}
.fleet-body{padding:26px 28px 30px;}
.fleet-card h4{font-size:19px; margin-top:0;}
.fleet-card .spec{margin-top:10px; font-family:'Montserrat',sans-serif; font-size:12.5px; color:rgba(255,255,255,0.6); line-height:1.9;}

.allies{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.ally{border:1px solid var(--line); padding:30px; background:var(--graphite-soft);}
.ally .eyebrow{display:block; margin-bottom:10px;}
.ally h4{font-size:17px; font-family:'Montserrat',sans-serif; text-transform:none; font-weight:700;}
.ally p{margin-top:10px; font-size:14px; color:rgba(255,255,255,0.68);}

.cross{
  background:linear-gradient(135deg, var(--gold-dark), var(--gold));
  color:var(--black);
  padding:64px 0;
}
.cross .eyebrow{color:rgba(0,0,0,0.6);}
.cross h3{color:var(--black); font-size:clamp(26px,3.4vw,40px); max-width:560px;}
.cross p{margin-top:12px; max-width:520px; opacity:.85;}
.cross .wrap{display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;}
.cross .btn-outline{color:var(--black); border-color:var(--black);}
.cross .btn-outline:hover{background:var(--black); color:var(--gold);}

.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:6px;}
.gallery img{aspect-ratio:1/1; object-fit:cover; width:100%; transition:transform .3s;}
.gallery img:hover{transform:scale(1.04);}

.quote{
  border-left:3px solid var(--gold);
  padding-left:24px;
  font-size:20px;
  max-width:680px;
  font-style:normal;
  color:var(--white);
}
.quote .who{margin-top:16px; font-family:'Montserrat',sans-serif; font-size:12px; color:rgba(255,255,255,0.5);}

footer{background:var(--graphite-soft); color:rgba(255,255,255,0.85); padding:64px 0 28px; border-top:1px solid var(--line);}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px;}
footer .logo-img{height:44px; margin-bottom:14px;}
footer h5{font-family:'Montserrat',sans-serif; font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:16px;}
footer p, footer a{font-size:14px; opacity:.85; display:block; margin-bottom:8px;}
.foot-bottom{
  margin-top:48px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; font-family:'Montserrat',sans-serif; font-size:11px; opacity:.5;
  flex-wrap:wrap; gap:10px;
}

/* ---------- WhatsApp floating button ---------- */
.wa-float{
  position:fixed; right:24px; bottom:24px; z-index:60;
  width:58px; height:58px; border-radius:50%;
  background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,0.5);
  transition:transform .2s;
}
.wa-float:hover{transform:scale(1.08);}
.wa-float svg{width:28px; height:28px;}

/* ---------- Contact / forms (contacto.html) ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line);}
.contact-pane{background:var(--black); padding:44px;}
.field{margin-bottom:20px;}
.field label{
  display:block; font-family:'Montserrat',sans-serif; font-weight:600; font-size:11px;
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; color:var(--gold);
}
.field input, .field textarea, .field select{
  width:100%; padding:12px 14px; border:1px solid var(--line); background:var(--graphite-soft); color:var(--white);
  font-family:'Montserrat', sans-serif; font-size:15px; border-radius:var(--radius);
}
.field textarea{min-height:120px; resize:vertical;}
.mapbox{
  aspect-ratio:16/10; background:var(--graphite-soft); border:1px dashed var(--gold);
  display:flex; align-items:center; justify-content:center; color:var(--gold);
  font-family:'Montserrat',sans-serif; font-size:12px; text-align:center; padding:16px;
}

/* ---------- Page header (subpages) ---------- */
.pagehead{
  background:var(--graphite-soft); color:var(--white); padding:130px 0 60px;
  position:relative; overflow:hidden;
}
.pagehead .eyebrow{color:var(--gold);}
.pagehead h1{font-size:clamp(36px,5.6vw,66px); margin-top:10px;}

@media (max-width:860px){
  .navlinks{display:none;}
  .trailbar .wrap{grid-template-columns:repeat(2,1fr);}
  .tb-cell:nth-child(3){border-left:none;}
  .split{grid-template-columns:1fr;}
  .grid3{grid-template-columns:1fr;}
  .allies{grid-template-columns:1fr;}
  .gallery{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:1fr; gap:28px;}
  .contact-grid{grid-template-columns:1fr;}
  .cross .wrap{flex-direction:column; align-items:flex-start;}
}