:root{
  --navy:#1b3a6b;--brand:#16335f;--blue:#3a5a99;--blue-soft:#6f8bc0;--glow:#5b86d6;
  --ink:#1a2336;--mut:#5b6b86;--line:#e4e9f2;--bg2:#f5f7fb;--space:#04060e;--accent:#3a5a99;
  --display:'JetBrains Mono',monospace;--body:'Inter',sans-serif;--maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--display);font-weight:700;color:var(--brand);line-height:1.1;letter-spacing:-.01em}
.eyebrow{font-family:var(--display);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);font-weight:500}
.btn{display:inline-block;padding:13px 24px;border-radius:5px;font-size:14px;font-family:var(--body);font-weight:500;cursor:pointer;background:var(--accent);color:#fff;border:1px solid var(--accent);transition:.18s}
.btn:hover{filter:brightness(1.1)}
.btn.ghost{background:transparent;color:var(--brand);border-color:var(--line)}
.btn.ghost.on-dark{color:#fff;border-color:rgba(255,255,255,.5)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
section{padding:84px 0}
.sec-head{max-width:62ch}
.sec-title{font-size:clamp(26px,3.4vw,40px);margin:14px 0}
.sec-intro{color:var(--mut);font-size:17px}
.band{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* header */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.3) blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:30px;height:84px}
.nav .logo{height:62px;width:auto}
.nav .links{display:flex;gap:24px;margin-left:14px}
.nav .links a{font-size:14px;color:var(--ink);font-weight:500}
.nav .links a:hover{color:var(--accent)}
.nav .right{margin-left:auto;display:flex;align-items:center;gap:16px}
.langs button{background:none;border:none;font-family:var(--body);font-size:13px;color:var(--mut);cursor:pointer;padding:5px 7px;border-radius:3px;font-weight:500}
.langs button.active{color:#fff;background:var(--accent)}
.logolink{display:inline-flex;align-items:center}

/* hamburguesa (oculta en escritorio) */
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;margin-left:auto;padding:0 11px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer}
.burger span{display:block;width:100%;height:2px;background:var(--brand);border-radius:2px;transition:transform .2s,opacity .2s}
header.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.open .burger span:nth-child(2){opacity:0}
header.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* panel de menú móvil (oculto hasta header.open en ≤768px) */
.mobnav{display:none;flex-direction:column;background:#fff;border-top:1px solid var(--line);padding:6px 24px 18px}
.mobnav a:not(.btn){display:block;padding:13px 4px;font-size:15px;color:var(--ink);font-weight:500;border-bottom:1px solid var(--line)}
.mobnav a:not(.btn):hover{color:var(--accent)}
.mobnav .mobrow{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px}
.mobnav .mobrow .langs{display:flex;gap:6px}
.mobnav .mobrow .langs button{padding:10px 14px;font-size:14px;border:1px solid var(--line)}
.mobnav .btn{flex:1;text-align:center;padding:13px}

/* tablet: aprieta el nav inline para que quepa hasta 769px */
@media(max-width:980px) and (min-width:769px){
  .nav{gap:18px}
  .nav .links{gap:14px;margin-left:6px}
  .nav .links a{font-size:13px}
  .nav .right{gap:10px}
  .nav .right .btn{padding:11px 16px}
}
/* móvil: oculta nav inline + CTA de header, muestra hamburguesa */
@media(max-width:768px){
  .nav .links{display:none}
  /* oculta el bloque inline (selector de idioma + CTA): en móvil el ES/EN
     vive SOLO dentro del .mobnav, evitando el doble selector ES/EN arriba */
  .nav .right,.nav .right .langs{display:none}
  .burger{display:flex}
  .nav{gap:12px}
  .nav .logo{height:50px}
  header.open .mobnav{display:flex}
}
@media(max-width:560px){
  .wrap{padding:0 20px}
  section{padding:64px 0}
}

/* hero */
.hero{position:relative;height:calc(100vh - 84px);min-height:600px;overflow:hidden;background:var(--space)}
.scene{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease;background-size:cover;background-position:center;transform:scale(1.05);will-change:opacity,transform}
.scene.on{opacity:1;animation:kenburns 14s ease-out forwards}
@keyframes kenburns{from{transform:scale(1.05)}to{transform:scale(1.16) translate(-1.5%,-1.2%)}}
/* imágenes reales de Colombia (NASA · dominio público) · WebP local optimizado */
.s1{background-image:url("../assets/img/hero-ruiz.webp")}
.s2{background-image:url("../assets/img/hero-noche.webp")}
.s3{background-image:url("../assets/img/hero-guajira.webp")}
/* scan-line tipo radar: barrido horizontal tenue de arriba a abajo */
.hero::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:4;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(210,230,255,.9) 50%,transparent);opacity:.06;animation:scan 6s linear infinite}
@keyframes scan{0%{top:-2px}100%{top:100%}}
.veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,8,16,.8),rgba(4,8,16,.45) 45%,rgba(4,8,16,.12))}
.hero .content{position:relative;z-index:5;height:100%;display:flex;flex-direction:column;justify-content:center}
.hero .eyebrow{color:#bcd0f5;margin-bottom:20px}
.heads{position:relative;min-height:clamp(140px,22vw,250px)}
.head{position:absolute;left:0;top:0;opacity:0;transform:translateY(12px);transition:.9s;font-family:var(--display);color:#fff;font-weight:700;font-size:clamp(34px,6vw,76px);line-height:1.03;max-width:17ch}
.head.on{opacity:1;transform:none}
.hero .lead{margin-top:24px;font-size:clamp(16px,1.6vw,19px);color:#dbe6fb;max-width:46ch;font-weight:300}
.hero .cta{margin-top:32px;display:flex;gap:13px;flex-wrap:wrap}
.caption{position:absolute;left:32px;bottom:26px;z-index:5;font-family:var(--display);font-size:12px;letter-spacing:.1em;color:#cfe0ff;background:rgba(6,14,28,.5);border:1px solid rgba(140,176,245,.3);padding:7px 12px;border-radius:5px;backdrop-filter:blur(4px)}
.caption .cap{display:none}
.caption .cap.on{display:inline}
.dots{position:absolute;right:32px;bottom:30px;z-index:5;display:flex;gap:8px}
.dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);transition:.3s}
.dots i.on{background:#fff;width:22px;border-radius:5px}

/* grids / cards */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:42px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:42px}
@media(max-width:860px){.grid3,.grid2{grid-template-columns:1fr}}
.card{border:1px solid var(--line);border-radius:10px;padding:26px;background:#fff;transition:.18s}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(22,51,95,.08);border-color:var(--blue-soft)}
.card .ic{width:38px;height:38px;color:var(--accent);margin-bottom:16px}
.card h3{font-size:18px;margin-bottom:9px}
.card p{color:var(--mut);font-size:14.5px}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
@media(max-width:860px){.pillars{grid-template-columns:1fr}}
.pillar{border-left:3px solid var(--accent);padding:6px 0 6px 20px}
.pillar h3{font-size:16px;margin-bottom:6px}
.pillar p{color:var(--mut);font-size:14px}

/* nosotros split */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
@media(max-width:880px){.split{grid-template-columns:1fr;gap:34px}}
.split .visual{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:12px;border:1px solid var(--line);background:#04060e}

/* sectores */
.sectores{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:42px}
@media(max-width:860px){.sectores{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.sectores{grid-template-columns:1fr}}
.sector{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:20px;background:#fff}
.sector .ic{width:28px;height:28px;color:var(--accent);flex:none;margin-top:2px}
.sector h3{font-size:15.5px;margin-bottom:4px}
.sector p{color:var(--mut);font-size:13.5px}

/* casos */
.casos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:42px}
@media(max-width:860px){.casos{grid-template-columns:1fr}}
.caso{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.caso .ph{display:block;width:100%;height:120px;object-fit:cover;background:#04060e}
.caso .b{padding:20px}
.caso .row{margin-bottom:10px}
.caso .k{font-family:var(--display);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.caso .v{font-size:13.5px;color:#33414e}
.illus{font-family:var(--display);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-soft);margin-top:30px}

/* tecnología (dark) */
.tech{background:var(--space);color:#dce6f7}
.tech h2{color:#fff}
.tech .sec-intro{color:#9aabca}
.tech .grid3{margin-top:42px}
.tcard{border:1px solid #16243f;border-radius:10px;padding:24px;background:rgba(11,19,38,.5)}
.tcard h3{color:#fff;font-size:16px;margin-bottom:8px}
.tcard p{color:#9aabca;font-size:14px}
.tcard .ic{color:var(--glow)}

/* ecosistema band */
.eco{background:var(--brand);color:#fff;text-align:center}
.eco h2{color:#fff;font-size:clamp(22px,3vw,34px);max-width:24ch;margin:0 auto}
.eco p{color:#cdd9ef;max-width:60ch;margin:18px auto 0;font-size:16px}

/* insights */
.ins{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:42px}
@media(max-width:860px){.ins{grid-template-columns:1fr}}
.inscard{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.inscard .ph{display:block;width:100%;height:130px;object-fit:cover;background:#04060e}
.inscard .b{padding:18px}
.inscard .date{font-family:var(--display);font-size:11px;color:var(--blue-soft);margin-bottom:6px}
.inscard h3{font-size:15.5px;line-height:1.3}

/* contacto */
.contact{background:var(--bg2)}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:38px}
@media(max-width:820px){.cgrid{grid-template-columns:1fr}}
.form .f{margin-bottom:14px}
.form label{display:block;font-size:13px;font-weight:500;margin-bottom:6px}
.form input,.form textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:8px;font-family:inherit;font-size:14px;background:#fff}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--accent)}
.cside .row{padding:14px 0;border-bottom:1px solid var(--line)}
.cside .k{font-family:var(--display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.cside .v{font-size:15px;margin-top:3px}

footer{background:#010309;color:#9fb0cc;padding:22px 0 18px}
footer .ftop{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
footer small{font-size:12px;color:#6b7ea2}
@media(max-width:768px){
  footer{padding:18px 0 16px}
  footer .ftop{gap:8px}
}
.prov{font-family:var(--display);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#5a6c8c}
.built{font-size:11px;color:#5a6c8c;letter-spacing:.02em}
.built a{color:inherit;text-decoration:none}
.built a:hover{text-decoration:underline}

/* scroll-reveal: la clase .reveal la añade js/reveal.js solo si hay JS y no
   se prefiere menos movimiento; sin JS el contenido se ve normal (sin opacity:0) */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.reveal-in{opacity:1;transform:none}

/* accesibilidad: respeta usuarios que prefieren menos movimiento.
   La rotación del hero SIGUE corriendo con crossfade de opacidad (suave, no
   vestibular); solo se apagan los efectos de transform: Ken Burns y scan-line. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  /* desactiva SOLO animaciones (Ken Burns, scan-line) · NO las transiciones de opacidad */
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important}
  .scene{transform:none}        /* sin zoom/pan · conserva su transición de opacidad (crossfade) */
  .scene.on{animation:none}     /* Ken Burns off */
  .head{transform:none}         /* títulos cruzan solo en opacidad, sin desplazamiento */
  .hero::after{display:none}    /* scan-line de radar off */
  .reveal{opacity:1;transform:none;transition:none}
}