:root{
  --bg:#0a1426;
  --bg-2:#11203b;
  --navy:#1c3050;
  --ink:#eef3fa;
  --muted:#9bb0cc;
  --accent:#4ea33f;
  --accent-2:#7cc46a;
  --line:rgba(255,255,255,.09);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.accent{color:var(--accent)}

/* ============ MARQUEE LATERAL ============ */
.side-marquee{
  position:fixed; top:0; left:0; height:100vh; width:54px;
  background:linear-gradient(180deg,#0a1426 0%, #07101f 50%, #0a1426 100%);
  border-right:1px solid var(--line);
  overflow:hidden; z-index:50;
  display:flex; align-items:center; justify-content:center;
}
.side-glow{
  position:absolute; left:50%; top:-30%; transform:translateX(-50%);
  width:120px; height:160%;
  background:radial-gradient(closest-side, rgba(78,163,63,.18), transparent 70%);
  filter:blur(8px);
  animation: sideGlow 5s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes sideGlow{ from{top:-30%} to{top:50%} }
.side-track{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:13px; letter-spacing:.4em; color:var(--muted);
  white-space:nowrap;
  animation: slideUp 32s linear infinite;
}
.side-track span{margin:18px 0; display:inline-block}
.side-track .m-y{
  color:var(--ink); font-size:18px; letter-spacing:0;
  text-shadow:0 0 12px rgba(78,163,63,.6);
}
.side-track .m-dot{ color:var(--accent); animation: pulse 1.6s ease-in-out infinite }
.side-track .m-bar{ color:var(--accent-2); opacity:.5 }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.25} }
@keyframes slideUp{
  from{transform:rotate(180deg) translateY(0)}
  to  {transform:rotate(180deg) translateY(-50%)}
}

/* ============ INTRO (4s total) ============ */
.intro{
  position:fixed; inset:0; z-index:40;
  background:radial-gradient(1200px 800px at 70% 20%, #1c3050 0%, #07101f 65%);
  display:flex; align-items:center; justify-content:center;
  padding-left:54px;
  animation: introOut .7s ease 4s forwards;
}
.intro.done{pointer-events:none}
@keyframes introOut{ to{opacity:0; visibility:hidden; transform:scale(1.02)} }
.grid-bg{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(124,196,106,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,196,106,.07) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image:radial-gradient(ellipse at center, #000 40%, transparent 75%);
}
.intro-svg{ position:absolute; inset:0; width:100%; height:100%; }

#route{
  animation: drawRoute 2.4s cubic-bezier(.7,.05,.2,1) .15s forwards;
  filter: drop-shadow(0 0 10px rgba(78,163,63,.45));
}
@keyframes drawRoute{ to{ stroke-dashoffset:0 } }

.nodes circle{ opacity:0; animation: pop .35s ease forwards }
.nodes circle:nth-child(1),.nodes circle:nth-child(2){animation-delay:.2s}
.nodes circle:nth-child(3),.nodes circle:nth-child(4){animation-delay:.95s}
.nodes circle:nth-child(5),.nodes circle:nth-child(6){animation-delay:1.65s}
.nodes circle:nth-child(7),.nodes circle:nth-child(8){animation-delay:2.4s}
@keyframes pop{ from{opacity:0; transform:scale(.4)} to{opacity:1} }

#truck{
  offset-path: path("M 80 480 C 220 480, 260 360, 420 360 S 640 200, 800 200 S 1060 120, 1140 120");
  offset-rotate: auto;
  offset-distance: 0%;
  animation: drive 2.4s cubic-bezier(.7,.05,.2,1) .15s forwards;
  filter: drop-shadow(0 0 8px rgba(78,163,63,.55));
}
@keyframes drive{ to{ offset-distance:100% } }

.intro-text{
  position:relative; z-index:2; text-align:center; max-width:960px; padding:0 24px;
}
.intro-logo-wrap{
  display:inline-flex; margin:0 auto 22px; padding:26px 32px;
  background:#fff; border-radius:22px;
  opacity:0; transform:scale(.6) rotate(-8deg);
  animation: logoIn .7s cubic-bezier(.5,1.6,.4,1) forwards;
  box-shadow: 0 22px 60px rgba(78,163,63,.4), 0 0 0 1px rgba(255,255,255,.12);
}
.intro-logo{display:block; height:140px; width:auto}
@keyframes logoIn{ to{opacity:1; transform:none} }

.kicker{
  font-family:'Space Grotesk',sans-serif; letter-spacing:.5em; font-size:12px;
  color:var(--accent); margin-bottom:18px; opacity:0;
  animation: fadeUp .55s ease .35s forwards;
}
.title{
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:clamp(40px,7vw,88px); line-height:1.02; margin:0;
  letter-spacing:-.02em;
}
.title .word{display:inline-block; opacity:0; transform:translateY(28px); margin:0 .15em}
.title .w1{animation:fadeUp .5s ease 2.55s forwards}
.title .w2{animation:fadeUp .5s ease 2.7s forwards}
.title .w3{animation:fadeUp .5s ease 2.85s forwards}
.title .w4{animation:fadeUp .5s ease 3.0s forwards}
@keyframes fadeUp{ to{opacity:1; transform:translateY(0)} }

.loader-bar{
  margin: 32px auto 0; width:240px; height:2px; background:rgba(255,255,255,.1); overflow:hidden;
}
.loader-bar span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  animation: load 3.7s cubic-bezier(.6,.02,.2,1) .15s forwards;
}
@keyframes load{ to{width:100%} }
.skip-hint{
  margin-top:16px; font-size:11px; letter-spacing:.3em; color:rgba(155,176,204,.5);
  opacity:0; animation: fadeUp .5s ease 1s forwards;
}

/* ============ SITIO ============ */
.site{
  margin-left:54px;
  opacity:0; transform:translateY(20px);
  animation: siteIn .9s ease 4.05s forwards;
}
@keyframes siteIn{ to{opacity:1; transform:none} }

.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 5vw; border-bottom:1px solid var(--line);
  position:sticky; top:0; backdrop-filter: blur(12px);
  background:rgba(10,20,38,.8); z-index:20;
}
.logo{
  display:inline-flex; align-items:center;
  background:#fff; padding:12px 22px; border-radius:14px;
  box-shadow:0 4px 18px rgba(0,0,0,.3);
}
.logo img{display:block; height:54px; width:auto}
.nav nav{display:flex; gap:26px; font-size:14px; color:var(--muted)}
.nav nav a{position:relative; padding:4px 0}
.nav nav a::after{content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px; background:var(--accent); transition:right .25s ease}
.nav nav a:hover{color:var(--ink)}
.nav nav a:hover::after{right:0}
@media(max-width:900px){.nav nav{display:none}}

.btn{
  display:inline-block; padding:11px 18px; border-radius:999px;
  border:1px solid var(--line); font-size:14px; font-weight:500;
  transition:.2s ease; cursor:pointer;
}
.btn:hover{border-color:var(--accent); color:var(--accent)}
.btn.primary{background:var(--accent); color:#04140c; border-color:var(--accent)}
.btn.primary:hover{filter:brightness(1.1); color:#04140c; transform:translateY(-1px); box-shadow:0 10px 30px rgba(78,163,63,.3)}
.btn.ghost{background:transparent}

/* HERO */
.hero{padding:80px 5vw 70px; position:relative; overflow:hidden}
.hero-photo{
  position:absolute; right:-3%; top:50px; width:52%; height:80%;
  background:url("fleet-hero.jpg") center/cover no-repeat;
  border-radius:18px; opacity:0;
  transform:translateX(40px) scale(.97);
  animation: heroPhoto 1.1s ease 4.4s forwards;
  mask-image:linear-gradient(90deg,transparent 0%, #000 20%, #000 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%, #000 20%, #000 100%);
}
.hero-photo-shade{
  position:absolute; right:-3%; top:50px; width:52%; height:80%;
  background:linear-gradient(180deg, transparent 60%, rgba(10,20,38,.7) 100%);
  border-radius:18px; pointer-events:none; opacity:0;
  animation: heroPhoto 1.1s ease 4.4s forwards;
}
@keyframes heroPhoto{ to{opacity:.9; transform:none} }
@media(max-width:1100px){.hero-photo,.hero-photo-shade{display:none}}
.hero-inner{max-width:680px; position:relative; z-index:1}
.badge{
  display:inline-flex; gap:8px; align-items:center;
  padding:6px 14px; border:1px solid var(--line); border-radius:999px;
  font-size:12px; color:var(--muted); margin-bottom:24px;
  background:rgba(255,255,255,.02);
}
.badge::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); animation:pulse 1.6s ease-in-out infinite}
.hero h2{
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:clamp(38px,6vw,76px); line-height:1.04; letter-spacing:-.02em; margin:0 0 22px;
}
.lead{color:var(--muted); font-size:18px; max-width:700px; line-height:1.6; margin:0 0 30px}
.lead.small{font-size:16px}
.cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:60px}

.kpis{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  border-top:1px solid var(--line); padding-top:30px;
}
.kpis div{display:flex; flex-direction:column; gap:6px}
.kpis strong{font-family:'Space Grotesk'; font-size:32px; color:var(--ink)}
.kpis span{font-size:13px; color:var(--muted)}
@media(max-width:780px){.kpis{grid-template-columns:repeat(2,1fr)}}

/* TRUST STRIP */
.trust{
  display:flex; align-items:center; gap:30px; flex-wrap:wrap;
  padding:24px 5vw; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.015);
}
.trust-label{font-family:'Space Grotesk'; font-size:11px; letter-spacing:.4em; color:var(--accent)}
.trust-list{display:flex; gap:30px; flex-wrap:wrap; align-items:center; color:var(--muted); font-weight:600; letter-spacing:.18em; font-size:13px}
.trust-list i{display:inline-block; width:4px; height:4px; border-radius:50%; background:var(--line)}

/* BLOQUES */
.block{padding:90px 5vw; border-top:1px solid var(--line)}
.block-head{display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:44px; flex-wrap:wrap}
.tag{
  font-family:'Space Grotesk'; font-size:12px; letter-spacing:.4em; color:var(--accent);
  border:1px solid rgba(78,163,63,.35); padding:7px 14px; border-radius:999px;
  background:rgba(78,163,63,.06);
}
.block h3{
  font-family:'Space Grotesk'; font-size:clamp(28px,3.8vw,48px);
  margin:0; max-width:820px; letter-spacing:-.01em; line-height:1.1;
}
.block-body.two{display:grid; grid-template-columns:1fr 1fr; gap:40px; color:var(--muted); font-size:17px; line-height:1.7}
@media(max-width:780px){.block-body.two{grid-template-columns:1fr}}

/* CARDS */
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.cards article{
  background:linear-gradient(180deg,#0c1422,#080d17);
  border:1px solid var(--line); padding:26px; border-radius:18px;
  transition:.25s ease;
}
.cards article:hover{border-color:rgba(78,163,63,.45); transform:translateY(-4px); background:linear-gradient(180deg,#0e1a2c,#080d17)}
.cards .ico{
  width:44px; height:44px; border-radius:12px;
  background:rgba(78,163,63,.12); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:14px;
}
.cards h4{margin:0 0 8px; font-size:17px}
.cards p{margin:0; color:var(--muted); font-size:14.5px; line-height:1.55}
@media(max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cards{grid-template-columns:1fr}}

/* SPLIT (yardjockey / montacargas) */
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center}
.split.reverse{grid-template-columns:.95fr 1.05fr}
.split.reverse .split-text{order:2}
.split.reverse .split-photo{order:1}
.split-text .tag{display:inline-block; margin-bottom:18px}
.split-text h3{margin:0 0 18px}
.bullets{list-style:none; padding:0; margin:0 0 28px}
.bullets li{
  position:relative; padding:8px 0 8px 26px; color:var(--muted); font-size:15.5px;
  border-bottom:1px solid var(--line);
}
.bullets li::before{
  content:""; position:absolute; left:0; top:14px;
  width:14px; height:14px; border:2px solid var(--accent); border-radius:4px;
  background:linear-gradient(135deg, var(--accent) 50%, transparent 50%);
}
.mini-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:28px}
.mini-cards div{
  border:1px solid var(--line); border-radius:12px; padding:14px 16px;
  background:rgba(255,255,255,.02);
  display:flex; flex-direction:column; gap:4px;
}
.mini-cards strong{font-family:'Space Grotesk'; font-size:15px; color:var(--ink)}
.mini-cards span{font-size:13px; color:var(--muted)}

.split-photo{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.split-photo .photo-frame.ratio-4-5{grid-row:span 2; grid-column:1/3}
.split-photo .photo-frame.small{grid-column:1/3; aspect-ratio:16/9}

.photo-frame{
  position:relative; overflow:hidden; border-radius:16px;
  border:1px solid var(--line); aspect-ratio:4/5;
  background:#0c1422;
}
.photo-frame::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(10,20,38,.55) 100%);
  pointer-events:none;
}
.photo-frame img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transform-origin:center;
}
/* foto Cat Montacargas (PNG aislada) */
.split-photo.cat-photo{display:block}
.cat-frame{
  aspect-ratio:1/1;
  background:radial-gradient(closest-side, rgba(78,163,63,.15), transparent 70%), linear-gradient(180deg,#0c1a30,#080d17);
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line);
  position:relative; overflow:hidden;
}
.cat-frame::before{
  content:""; position:absolute; left:10%; right:10%; bottom:14%;
  height:14px; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 70%);
  filter:blur(4px);
}
.cat-frame img{
  position:relative; width:88%; height:88%;
  object-fit:contain; object-position:center;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.45));
}
.cat-frame::after{display:none}

/* yard jockey single hero */
.split-photo.single{display:block}
.jockey-hero{aspect-ratio:16/9}
.jockey-hero img{transform:none; width:100%; height:100%; object-fit:cover; object-position:center}
.photo-tag{
  position:absolute; left:14px; bottom:14px; z-index:2;
  font-family:'Space Grotesk'; font-size:11px; letter-spacing:.35em;
  color:#fff; background:rgba(10,20,38,.7); padding:6px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(6px);
}

/* ===== WhatsApp ===== */
.contact-card{display:flex; flex-direction:column; gap:8px}
.contact-card.whatsapp{
  background:linear-gradient(160deg, rgba(37,211,102,.08), rgba(37,211,102,0));
  border:1px solid rgba(37,211,102,.25);
  border-radius:14px; padding:18px; gap:6px;
}
.wa-link{
  display:flex; align-items:center; gap:10px;
  font-family:'Space Grotesk'; font-weight:700; font-size:18px;
  color:#fff; border:none !important; padding:0 !important;
}
.wa-link:hover{color:#25D366}
.wa-hint{font-size:13px; color:var(--muted); margin:6px 0 0}

.wa-fab{
  position:fixed; right:22px; bottom:22px; z-index:60;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 30px rgba(37,211,102,.45), 0 4px 10px rgba(0,0,0,.3);
  animation: waPulse 2.4s ease-in-out infinite;
  transition:.2s ease;
}
.wa-fab:hover{transform:translateY(-3px); box-shadow:0 16px 40px rgba(37,211,102,.6)}
@keyframes waPulse{
  0%,100%{box-shadow:0 12px 30px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,.5)}
  50%{box-shadow:0 12px 30px rgba(37,211,102,.45), 0 0 0 14px rgba(37,211,102,0)}
}
@media(max-width:900px){
  .split,.split.reverse{grid-template-columns:1fr}
  .split.reverse .split-text{order:1}
  .split.reverse .split-photo{order:2}
}

/* FLEET GRID */
.fleet-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  grid-auto-rows:240px;
  gap:14px;
}
.fleet-card{
  background-size:cover; background-position:center;
  border-radius:16px; border:1px solid var(--line);
  position:relative;
  transition:.3s ease;
}
.fleet-card::after{
  content:""; position:absolute; inset:0; border-radius:16px;
  background:linear-gradient(180deg, transparent 50%, rgba(7,16,31,.55) 100%);
}
.fleet-card.big{grid-row:span 2; grid-column:1/2}
.fleet-card.wide{grid-column:2/4}
.fleet-card:hover{transform:translateY(-3px); border-color:rgba(78,163,63,.45)}
@media(max-width:780px){
  .fleet-grid{grid-template-columns:1fr; grid-auto-rows:220px}
  .fleet-card.big{grid-row:auto; grid-column:auto}
}

/* TECH */
.tech-list{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:18px}
.tech-list li{
  border-left:3px solid var(--accent); padding:16px 20px;
  background:rgba(78,163,63,.05); color:var(--muted); font-size:16px;
  border-radius:0 12px 12px 0;
}
.tech-list strong{color:var(--ink)}
@media(max-width:780px){.tech-list{grid-template-columns:1fr}}

/* CONTACT */
.contact-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
@media(max-width:1100px){.contact-grid{grid-template-columns:repeat(2,1fr)}}
.c-label{font-family:'Space Grotesk'; font-size:12px; letter-spacing:.3em; color:var(--accent); margin-bottom:10px}
.contact-grid a{color:var(--ink); border-bottom:1px solid var(--accent); padding-bottom:2px}
.contact-grid p{margin:0; color:var(--muted); line-height:1.6}
@media(max-width:780px){.contact-grid{grid-template-columns:1fr}}

/* FOOTER */
.foot{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:30px 5vw; border-top:1px solid var(--line);
  font-size:13px; color:var(--muted);
}
.foot-links{display:flex; gap:18px}