/* =========== Variables =========== */
:root{
  --navy:#0b2a4a;
  --orange:#ff7a00;
  --sky:#4aa3ff;
  --gray:#6b7280;
  --ink:#0f172a;
  --bg:#0b2a4a;
  --paper:#ffffff;
  --muted:#f4f6fa;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.12);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Outfit,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:#fff;scroll-behavior:smooth}

/* Containers & utilities */
.container{width:min(1120px, 92vw); margin-inline:auto}
.grid.two{display:grid;grid-template-columns:1.2fr 1fr; gap:28px}
.grid.three{display:grid;grid-template-columns:repeat(3,1fr); gap:22px}
@media (max-width:960px){
  .grid.two, .grid.three{grid-template-columns:1fr}
}
.section{padding:72px 0}
.band{background:linear-gradient(180deg, #f8fbff, #ffffff)}

.card{background:var(--paper);border:1px solid #eaeef5;border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.glass{backdrop-filter:blur(8px);background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.90))}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #eaeef5}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;color:var(--navy);text-decoration:none;font-weight:800}
.brand-logo{height:38px;width:auto}
.brand-text{letter-spacing:.2px}

.menu{display:flex;gap:18px}
.menu a{color:var(--navy);text-decoration:none;font-weight:600;padding:10px 8px;border-radius:10px}
.menu a:hover{background:rgba(11,42,74,.06)}

.hamburger{display:none; width:44px;height:40px;border:0;background:transparent;cursor:pointer}
.hamburger span{display:block;height:3px;margin:7px;background:var(--navy);border-radius:6px;transition:.25s}
@media (max-width:860px){
  .hamburger{display:block}
  .menu{position:fixed;inset:64px 14px auto 14px;background:#fff;border:1px solid #eaeef5;border-radius:14px;padding:18px;flex-direction:column;transform:translateY(-8px);opacity:0;pointer-events:none;transition:.25s}
  .menu.show{transform:translateY(0);opacity:1;pointer-events:auto;box-shadow:var(--shadow)}
}

/* Hero */
.hero{position:relative;isolation:isolate;background:radial-gradient(1200px 600px at 20% 0%, rgba(74,163,255,.35), transparent 60%), linear-gradient(160deg, #0b2a4a, #0b2a4a 55%, #133a65 100%);color:#fff;padding:88px 0 72px;overflow:hidden}
.hero-orn{position:absolute;inset:0;pointer-events:none;background:radial-gradient(200px 200px at 90% 10%, rgba(255,122,0,.35), transparent 40%)}
.hero h1{font-size:clamp(28px, 5vw, 46px);line-height:1.1;margin:0 0 10px}
.hero .accent-slice{background:linear-gradient( to right, var(--orange), #ffd5aa);color:transparent;-webkit-background-clip:text;background-clip:text}
.lead{font-size:clamp(16px, 2.5vw, 20px);opacity:.92;max-width:70ch}
.cta{display:flex;gap:12px;margin-top:16px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;text-decoration:none;font-weight:700;border:2px solid transparent}
.btn-primary{background:var(--orange);color:#1b1b1b}
.btn-ghost{border-color:#ffffff3a;color:#fff}
.btn-ghost:hover{background:#ffffff1a}
.btn-primary:hover{filter:brightness(1.05);transform:translateY(-1px);}

/* Prose */
.prose h2{color:var(--navy);margin-top:0}
.bullets{margin:0;padding-left:18px;display:grid;gap:8px}
.bullets li{padding-left:6px}

/* Mision/vision */
.inline{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0}
.inline li{list-style:none;background:#eef5ff;border:1px solid #e0ebff;color:#133a65;padding:4px 10px;border-radius:999px}

/* Goals */
.goals .section-title{ color:var(--navy); margin:0 0 8px}
.section-lead{ color:var(--gray); max-width:70ch; margin:0 0 18px}
.goals-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:8px}

.goal{--accentLocal:var(--orange); background:var(--paper);border:1px solid #eaeef5;border-radius:16px;padding:18px 16px;box-shadow:var(--shadow);transform:translateY(8px);opacity:0;animation:goalIn .7s ease forwards}
.goal:nth-child(2){animation-delay:.06s}.goal:nth-child(3){animation-delay:.12s}.goal:nth-child(4){animation-delay:.18s}.goal:nth-child(5){animation-delay:.24s}
.goal:nth-child(even){--accentLocal:var(--navy)}
.goal h3{margin:.2rem 0 .4rem;color:var(--accentLocal);font-weight:800}
.goal p{color:var(--ink)}
.goal-icon{display:inline-block;width:80px;height:80px;margin-bottom:10px;background:var(--accentLocal);-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;mask-size:contain;mask-repeat:no-repeat;mask-position:center;transition:transform .25s ease, background-color .25s ease, box-shadow .25s ease;filter:drop-shadow(0 2px 6px rgba(0,0,0,.08))}
.icon-construccion   { -webkit-mask-image:url("assets/icons/obj-construccion.png");   mask-image:url("assets/icons/obj-construccion.png") }
.icon-innovacion     { -webkit-mask-image:url("assets/icons/obj-innovacion.png");     mask-image:url("assets/icons/obj-innovacion.png") }
.icon-confianza      { -webkit-mask-image:url("assets/icons/obj-confianza.png");      mask-image:url("assets/icons/obj-confianza.png") }
.icon-sustentabilidad{ -webkit-mask-image:url("assets/icons/obj-sustentabilidad.png");mask-image:url("assets/icons/obj-sustentabilidad.png") }
.icon-competitividad { -webkit-mask-image:url("assets/icons/obj-competitividad.png"); mask-image:url("assets/icons/obj-competitividad.png") }
.goal:hover{transform:translateY(0) scale(1.02);box-shadow:0 12px 36px rgba(0,0,0,.12)}
.goal:hover .goal-icon{background:var(--navy);transform:translateY(-2px) scale(1.05)}
.goal:nth-child(even):hover .goal-icon{background:var(--orange)}
@keyframes goalIn{to{opacity:1; transform:translateY(0)}}

/* Timeline */
.timeline{position:relative;margin:26px 0 0;padding-left:0;list-style:none}
.timeline::before{content:"";position:absolute;left:14px;top:0;bottom:0;width:3px;background:linear-gradient(#ffbe80,#ff7a00)}
.tl-item{position:relative;padding-left:44px;margin:18px 0}
.tl-item .dot{position:absolute;left:6.5px;top:.4rem;width:18px;height:18px;border-radius:50%;background:var(--orange);border:3px solid #fff;box-shadow:0 0 0 4px #ffe9d6}
.tl-item h4{margin:0 0 4px;color:var(--navy)}
.tl-item p{margin:0;color:var(--ink)}

/* Servicios */
.svc{background:#fff;border:1px solid #eaeef5;border-radius:16px;padding:18px 16px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.svc .badge{position:absolute;top:12px;right:14px;background:var(--navy);color:#fff;border-radius:10px;padding:4px 8px;font-weight:700}
.svc:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(0,0,0,.12);}

/* Reseñas */
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.reviews blockquote{margin:0;padding:18px;border-left:4px solid var(--orange);background:#fff7ef;border-radius:12px}

/* Contacto */
.contact .map-wrap{min-height:300px}
.map{width:100%;height:100%;border:0;min-height:260px;border-radius:16px;box-shadow:var(--shadow)}
.contact-list{display:grid;gap:8px;padding-left:0;list-style:none}

/* Footer */
.site-footer{background:#0b2a4a;color:#fff;padding:18px 0;margin-top:24px}
.foot{display:flex;align-items:center;gap:12px}
.foot img{height:34px;width:auto;filter:drop-shadow(0 3px 8px rgba(0,0,0,.2))}

/* Simple reveal on load */
.fx-fade-up{opacity:0; transform:translateY(8px); animation:fadeUp .6s ease forwards; animation-delay:var(--d,0s)}
@keyframes fadeUp{to{opacity:1; transform:translateY(0)}}


/* ===== Timeline horizontal con iconos ===== */
.metodologia .tl-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.metodologia .section-title{ color:var(--navy); margin:0 }
.metodologia .section-subtitle{ color:var(--gray); margin:.3rem 0 10px }

.tl-counter{
  display:inline-flex; align-items:center; gap:6px;
  font-weight:800; color:var(--navy);
  background:#f2f6ff; border:1px solid #e2eafe; padding:6px 10px; border-radius:999px;
}
.tl-counter .sep{ opacity:.5 }

.timeline-h{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:clamp(260px, 28vw, 320px);
  gap:24px;
  overflow-x:auto;
  padding:10px 8px 22px;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
}
.timeline-h::-webkit-scrollbar{height:8px}
.timeline-h::-webkit-scrollbar-thumb{
  background:linear-gradient(90deg,var(--orange),var(--sky));
  border-radius:20px;
}

/* Tarjeta del paso */
.timeline-h .step{
  position:relative;
  background:var(--panel,#fff);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px 18px 18px 18px;
  border-top:5px solid var(--orange);
  scroll-snap-align:start;
   margin-top: 25px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.timeline-h .step h3{ margin:10px 0 6px; font-size:1.05rem; color:var(--navy) }
.timeline-h .step p{ margin:0; color:var(--ink); opacity:.9 }

/* Número */
.timeline-h .step .dot{
  position:absolute;
  left:16px; top:-16px;
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--navy); color:#fff;
  font-weight:700;
  outline:4px solid #fff;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
}

/* Icono circular */
.timeline-h .step .ico{
  position:absolute; right:14px; top:-22px;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--orange), #ff9c3a);
  color:#1b1b1b;
  outline:4px solid #fff;
  box-shadow:0 6px 16px rgba(255,122,0,.25);
  transition:transform .25s ease, filter .25s ease, background .25s ease;
}
.timeline-h .step .ico svg{ width:24px; height:24px }

/* Conector hacia la derecha */
.timeline-h .step:not(:last-child)::after{
  content:"";
  position:absolute; right:-14px; top:44px;
  width:28px; height:4px;
  background:linear-gradient(90deg,var(--orange),var(--sky));
  border-radius:2px; opacity:.85;
}

.timeline-h .step:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(0,0,0,.14);
}

/* Estado activo (al estar mayormente visible) */
.timeline-h .step.active{
  border-top-color:var(--navy);
}
.timeline-h .step.active .ico{
  background:linear-gradient(135deg, var(--sky), #89c1ff);
  box-shadow:0 8px 18px rgba(74,163,255,.30);
  transform:translateY(-2px) scale(1.04);
}

@media (max-width: 768px){
  .timeline-h{ grid-auto-columns:85%; gap:16px }
}