/* ============================================================
   ALN — Alianza Logística Nacional
   Design tokens
   ============================================================ */
:root{
  --navy: #0B2545;
  --navy-deep: #071A33;
  --blue: #1E6FD9;
  --blue-light: #4E9BFF;
  --ice: #F5F8FC;
  --white: #FFFFFF;
  --slate: #5B6B82;
  --ink: #0F1B2D;
  --amber: #F4A100;
  --line: #DCE6F2;

  --display: "Space Grotesk", sans-serif;
  --body: "Inter", sans-serif;
  --mono: "IBM Plex Mono", monospace;

  --radius: 10px;
  --container: 1160px;
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  font-family: var(--body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; }

.wrap{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

h1,h2,h3,h4{
  font-family: var(--display);
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
h1{ font-size: clamp(2.4rem, 5vw, 3.6rem); }
h2{ font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
h3{ font-size: 1.25rem; }

.eyebrow{
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.eyebrow::before{
  content:"";
  width: 22px; height: 2px;
  background: var(--amber);
  display:inline-block;
}

p.lead{ color: var(--slate); font-size: 1.08rem; max-width: 60ch; }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family: var(--body);
  font-weight:600;
  font-size: 0.95rem;
  padding: 13px 26px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:focus-visible{ outline: 3px solid var(--blue-light); outline-offset: 2px; }
.btn-primary{ background: var(--blue); color: var(--white); }
.btn-primary:hover{ background: var(--navy); transform: translateY(-1px); }
.btn-ghost{ border-color: rgba(255,255,255,0.4); color: var(--white); }
.btn-ghost:hover{ background: rgba(255,255,255,0.12); }
.btn-outline{ border-color: var(--blue); color: var(--blue); }
.btn-outline:hover{ background: var(--blue); color:var(--white); }

/* ---------------- Header ---------------- */
header.site{
  position: sticky; top:0; z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 28px;
  max-width: var(--container);
  margin:0 auto;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family: var(--display); font-weight:700; font-size:1.15rem;
  color: var(--navy);
}
.brand .mark{
  width:34px; height:34px; border-radius:8px;
  background: linear-gradient(135deg, var(--blue), var(--navy));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family: var(--mono); font-weight:700; font-size:0.85rem;
}
.brand small{ display:block; font-family: var(--mono); font-size:0.62rem; letter-spacing:.08em; color:var(--slate); font-weight:500; }

/* Logo real */
.brand img.logo{
  height: 52px !important;
  max-height: 52px !important;
  width: auto !important;
  display:block;
}
.logo-chip{
  display:inline-flex; align-items:center;
}
.logo-chip img{ height: 64px !important; max-height:64px !important; width:auto !important; display:block; }

nav.links{ display:flex; gap: 30px; }
nav.links a{
  font-size: 0.94rem; font-weight:500; color: var(--ink);
  position:relative; padding: 6px 0;
}
nav.links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px;
  background: var(--amber); transition: width .2s ease;
}
nav.links a:hover::after, nav.links a[aria-current="page"]::after{ width:100%; }
nav.links a[aria-current="page"]{ color: var(--blue); }

.nav-cta{ display:flex; align-items:center; gap:18px; }
.burger{ display:none; }

@media (max-width: 860px){
  nav.links{
    position:fixed; inset: 68px 0 0 0; background: var(--white);
    flex-direction:column; padding: 30px 28px; gap: 22px;
    transform: translateX(100%); transition: transform .25s ease;
  }
  nav.links.open{ transform: translateX(0); }
  .burger{
    display:flex; width:40px; height:40px; border-radius:8px;
    border:1px solid var(--line); align-items:center; justify-content:center;
    background:none; cursor:pointer;
  }
  .nav-cta .btn-primary{ display:none; }
}

/* ---------------- Hero ---------------- */
.hero{
  position:relative;
  background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 65%, #0B2545 100%);
  color: var(--white);
  overflow:hidden;
  padding: 90px 0 60px;
}
.hero .wrap{ position:relative; z-index:2; }
.hero-grid{
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items:center;
}
.hero h1{ color:var(--white); }
.hero h1 em{ font-style:normal; color: var(--blue-light); }
.hero p.lead{ color: rgba(255,255,255,0.78); margin: 20px 0 30px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

.route-map{ width:100%; height:auto; }
.route-line{
  stroke-dasharray: 8 6;
  animation: dash 40s linear infinite;
}
@keyframes dash{ to{ stroke-dashoffset: -400; } }
.route-node circle{ transition: r .2s ease; }
.route-pulse{
  animation: pulse 2.6s ease-in-out infinite;
  transform-origin: center;
}
@keyframes pulse{
  0%,100%{ opacity:.55; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.15); }
}
@media (prefers-reduced-motion: reduce){
  .route-line{ animation:none; }
  .route-pulse{ animation:none; }
}

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

/* ---------------- Stats strip ---------------- */
.stats{
  background: var(--ice);
  border-bottom: 1px solid var(--line);
}
.stats .wrap{
  display:grid; grid-template-columns: repeat(4,1fr);
  gap: 20px; padding: 34px 28px;
}
.stat b{
  font-family: var(--mono); font-size: 1.9rem; color: var(--navy); display:block;
}
.stat span{ font-size: 0.85rem; color: var(--slate); }
@media (max-width:760px){
  .stats .wrap{ grid-template-columns: 1fr 1fr; }
}

/* ---------------- Sections ---------------- */
section{ padding: 84px 0; }
.section-head{ max-width: 620px; margin-bottom: 46px; }
.section-alt{ background: var(--ice); }

/* Service cards */
.services-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
@media (max-width:1000px){ .services-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width:600px){ .services-grid{ grid-template-columns: 1fr; } }

.card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -20px rgba(11,37,69,0.35);
  border-color: var(--blue-light);
}
.card .icon{
  width:46px; height:46px; border-radius:9px;
  background: var(--ice); display:flex; align-items:center; justify-content:center;
  margin-bottom:18px; color: var(--blue);
}
.card .icon svg{ width:24px; height:24px; }
.illustration{
  background: var(--ice);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 18px;
  height: 200px;
  display:flex; align-items:center; justify-content:center;
}
.illustration svg{ width:100%; height:100%; max-height:200px; display:block; padding:22px; box-sizing:border-box; }
.illustration img{ width:100%; height:100%; object-fit:cover; display:block; }
.card h3{ margin-bottom:8px; }
.card p{ color: var(--slate); font-size: 0.95rem; }
.card a.more{ display:inline-block; margin-top:14px; color:var(--blue); font-weight:600; font-size:0.9rem; }

/* Value strip */
.values{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
@media (max-width: 800px){ .values{ grid-template-columns: 1fr; } }
.value{ border-left: 3px solid var(--amber); padding-left: 18px; }
.value h4{ font-family: var(--body); font-size: 1.02rem; margin-bottom:6px; }
.value p{ color: var(--slate); font-size: 0.94rem; }

/* CTA band */
.cta-band{
  background: linear-gradient(120deg, var(--navy) 0%, var(--blue) 130%);
  color: var(--white); text-align:center;
}
.cta-band h2{ color: var(--white); margin-bottom: 14px; }
.cta-band p{ color: rgba(255,255,255,0.8); max-width:520px; margin: 0 auto 28px; }

/* Footer */
footer.site{
  background: var(--navy-deep); color: rgba(255,255,255,0.75);
  padding: 56px 0 26px; font-size: 0.92rem;
}
.footer-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px;
  padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,0.12);
}
footer.site h4{ color: var(--white); font-family: var(--body); font-size: 0.85rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px; }
footer.site li{ margin-bottom:10px; }
footer.site a:hover{ color: var(--blue-light); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; padding-top: 22px;
  flex-wrap:wrap; gap:10px; font-size:0.82rem; color: rgba(255,255,255,0.5);
}
@media (max-width:760px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }

/* Placeholder note (visible only to whoever edits the file) */
.fill-me{ color: var(--amber); font-weight:600; }

/* Page hero (interior pages) */
.page-hero{
  background: linear-gradient(180deg, var(--navy-deep), var(--navy));
  color: var(--white); padding: 64px 0 48px;
}
.page-hero h1{ color:var(--white); }
.breadcrumb{ font-family: var(--mono); font-size:0.78rem; color: var(--blue-light); margin-bottom:14px; letter-spacing:.06em; }

/* Contact page */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width:860px){ .contact-grid{ grid-template-columns: 1fr; } }
.info-list li{ display:flex; gap:14px; padding: 16px 0; border-bottom:1px solid var(--line); }
.info-list b{ display:block; font-size:0.82rem; color:var(--slate); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.info-list .icon{
  width:38px; height:38px; border-radius:8px; background: var(--ice); color:var(--blue);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

.form-card{
  background: var(--ice); border:1px solid var(--line); border-radius: var(--radius);
  padding: 32px;
}
.form-row{ margin-bottom:18px; }
.form-row label{ display:block; font-size:0.85rem; font-weight:600; margin-bottom:6px; color: var(--navy); }
.form-row input, .form-row select, .form-row textarea{
  width:100%; padding: 12px 14px; border-radius:8px; border:1px solid var(--line);
  font-family: var(--body); font-size:0.95rem; background:var(--white);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,111,217,0.15);
}
.form-two{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:500px){ .form-two{ grid-template-columns:1fr; } }

/* About page timeline / pillars */
.pillars{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
@media (max-width:800px){ .pillars{ grid-template-columns:1fr; } }
.map-shell{
  border-radius: var(--radius); overflow:hidden; border:1px solid var(--line);
}

.reveal{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }