/* ═══════════════════════════════════════════════════════════════════
   APEX Ingeniería — hoja de estilos compartida
   Un solo archivo para todas las subpáginas (cacheable entre páginas).
   Marca: petróleo #102F45 · teal científico #1F8A8A · gris acero · hielo
   ═══════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}

:root{
  --petrol:#102F45;
  --petrol-d:#0A1F2E;
  --petrol-m:#163A54;
  --teal:#1F8A8A;
  --teal-lt:#E4F2F2;
  --teal-d:#156868;
  --acero:#6F7D85;
  --hielo:#EEF3F5;
  --hielo-d:#DDE6EA;
  --white:#FFFFFF;
  --text:#1A2B35;
  --muted:#5A6B74;

  --font:'Jost',system-ui,-apple-system,sans-serif;
  --max:1120px;
  --r:3px;

  --t-xs:.75rem; --t-sm:.875rem; --t-base:1rem; --t-lg:1.125rem;
  --t-xl:1.375rem; --t-2xl:1.75rem; --t-3xl:2.25rem; --t-4xl:3rem;
}

body{
  font-family:var(--font);
  color:var(--text);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ── Utilidades ─── */
.wrap{max-width:var(--max);margin:0 auto;padding:0 2rem}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:var(--font);cursor:pointer}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ── Botones ─── */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font);font-size:.875rem;font-weight:600;
  padding:.625rem 1.625rem;border-radius:var(--r);
  border:1.5px solid transparent;
  transition:background .18s,border-color .18s,color .18s,transform .12s;
  letter-spacing:.02em;white-space:nowrap
}
.btn:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.btn--solid{background:var(--teal);color:var(--white);border-color:var(--teal)}
.btn--solid:hover{background:var(--teal-d);border-color:var(--teal-d);transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.35)}
.btn--ghost:hover{border-color:var(--white);background:rgba(255,255,255,.08)}
.btn--full{width:100%;justify-content:center}

/* ── NAVBAR ─── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:300;height:62px;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--hielo-d);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:box-shadow .2s
}
.nav.scrolled{box-shadow:0 2px 16px rgba(16,47,69,.08)}
.nav__inner{
  display:flex;align-items:center;justify-content:space-between;
  height:100%;max-width:var(--max);margin:0 auto;padding:0 2rem
}
.nav__logo{display:flex;align-items:center;flex-shrink:0}
.nav__logo-img{height:42px;width:auto;display:block}
.nav__links{display:flex;gap:0;list-style:none}
.nav__links a{
  font-size:.8125rem;font-weight:500;color:var(--acero);
  padding:.5rem 1rem;transition:color .15s;letter-spacing:.01em
}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--petrol)}
.nav__links a[aria-current="page"]{font-weight:600}
.nav__right{display:flex;align-items:center;gap:.75rem}
.nav__portal{
  font-size:.8125rem;font-weight:500;color:var(--teal);
  border:1px solid var(--teal);padding:.375rem .875rem;
  border-radius:var(--r);transition:all .15s
}
.nav__portal:hover{background:var(--teal);color:var(--white)}
.nav__hamburger{
  display:none;background:none;border:none;
  flex-direction:column;gap:4px;padding:4px
}
.nav__hamburger span{
  display:block;width:22px;height:2px;background:var(--petrol);
  border-radius:2px;transition:all .2s
}
.nav__hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav__hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ── Menú mobile ─── */
.mobile-menu{display:none}
.mobile-menu__links{list-style:none;padding:1rem 2rem 0}
.mobile-menu__links a{
  display:block;font-size:1.125rem;font-weight:600;color:var(--petrol);
  padding:1.125rem 0;border-bottom:1px solid var(--hielo-d)
}
.mobile-menu__actions{
  padding:1.5rem 2rem 2rem;margin-top:auto;
  display:flex;flex-direction:column;gap:.75rem;
  border-top:1px solid var(--hielo-d)
}
.mobile-menu__actions .nav__portal{text-align:center}

/* ── Breadcrumb ─── */
.breadcrumb{position:relative;z-index:3}
.breadcrumb__inner{
  display:flex;align-items:center;gap:.5rem;
  font-size:.75rem;font-weight:500;color:rgba(255,255,255,.55);
  letter-spacing:.02em;padding:1.25rem 0 0
}
.breadcrumb__inner a{color:#fff}
.breadcrumb__inner a:hover{text-decoration:underline}
.breadcrumb__inner span[aria-hidden]{opacity:.4}

/* ═══ HERO compacto (compartido, con variantes por página) ═══
   Reemplaza los tres heroes gigantes (100vh, foto+SVG pesados) por una
   franja de marca contenida y consistente. Cada página aporta su acento. */
.hero{
  position:relative;overflow:hidden;
  background:var(--petrol);color:#fff;
  padding-top:62px;
}
.hero__inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:3.5rem;align-items:center;
  padding:2.5rem 0 3.25rem;min-height:340px
}
.hero__logo{height:44px;width:auto;margin-bottom:1.5rem;
  filter:brightness(0) invert(1);opacity:.95}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:.625rem;
  font-size:.6875rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal-lt);margin-bottom:1rem
}
.hero__eyebrow::before{content:'';width:20px;height:1px;background:var(--teal)}
.hero__title{
  font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:700;
  line-height:1.12;letter-spacing:-.02em;margin-bottom:1.1rem;
  max-width:16ch
}
.hero__lead{
  font-size:var(--t-lg);font-weight:300;
  color:rgba(255,255,255,.72);line-height:1.6;max-width:46ch
}
.hero__aside{position:relative;min-height:220px}

/* Franja de datos clave bajo el hero */
.keystrip{background:var(--petrol-d);border-top:1px solid rgba(255,255,255,.06)}
.keystrip__inner{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:0
}
.keystrip__item{
  padding:1.5rem 0 1.5rem 1.25rem;
  border-left:2px solid var(--teal)
}
.keystrip__item+.keystrip__item{margin-left:2rem}
.keystrip__num{
  font-size:1.5rem;font-weight:700;color:#fff;
  line-height:1.1;letter-spacing:-.01em
}
.keystrip__label{
  font-size:.8125rem;font-weight:300;
  color:rgba(255,255,255,.6);margin-top:.3rem;line-height:1.45
}

/* ═══ Secciones ═══ */
.section{padding:4.5rem 0}
.section--alt{background:var(--hielo)}
.section--dark{background:var(--petrol);color:#fff}
.section__head{max-width:640px;margin-bottom:2.75rem}
.section__eyebrow{
  font-size:.6875rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal);
  display:block;margin-bottom:.6rem
}
.section--dark .section__eyebrow{color:var(--teal-lt)}
.section__title{
  font-size:var(--t-3xl);font-weight:700;color:var(--petrol);
  letter-spacing:-.02em;line-height:1.18
}
.section--dark .section__title{color:#fff}
.section__body{
  font-size:var(--t-base);font-weight:300;color:var(--muted);
  line-height:1.7;margin-top:.9rem
}
.section--dark .section__body{color:rgba(255,255,255,.6)}

/* ═══ Grilla de capacidades (reemplaza el grid de 6 íconos genéricos) ═══
   Lista editorial numerada: la numeración codifica un catálogo real,
   no decoración. Más chica, más densa, más legible. */
.caps{border-top:1px solid var(--hielo-d)}
.section--dark .caps{border-top-color:rgba(255,255,255,.12)}
.cap{
  display:grid;grid-template-columns:2.5rem 1fr;
  gap:1.25rem;align-items:baseline;
  padding:1.35rem 0;border-bottom:1px solid var(--hielo-d);
  transition:padding-left .2s
}
.section--dark .cap{border-bottom-color:rgba(255,255,255,.1)}
.cap:hover{padding-left:.5rem}
.cap__num{
  font-size:.75rem;font-weight:700;color:var(--teal);
  letter-spacing:.05em;font-variant-numeric:tabular-nums;
  padding-top:.2rem
}
.cap__body{max-width:60ch}
.cap__title{
  font-size:var(--t-lg);font-weight:600;color:var(--petrol);
  line-height:1.25;margin-bottom:.25rem
}
.section--dark .cap__title{color:#fff}
.cap__desc{
  font-size:.9375rem;font-weight:300;color:var(--muted);line-height:1.6
}
.section--dark .cap__desc{color:rgba(255,255,255,.62)}

/* ═══ Proceso — timeline horizontal compacto ═══ */
.flow{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:1px solid var(--hielo-d);border-radius:var(--r);overflow:hidden
}
.section--dark .flow{border-color:rgba(255,255,255,.14)}
.flow__step{
  padding:1.75rem;background:var(--white);
  border-right:1px solid var(--hielo-d);position:relative
}
.section--dark .flow__step{background:rgba(255,255,255,.02);border-right-color:rgba(255,255,255,.1)}
.flow__step:last-child{border-right:none}
.flow__num{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:var(--teal);color:#fff;
  font-size:.8125rem;font-weight:700;margin-bottom:1rem
}
.flow__title{
  font-size:var(--t-lg);font-weight:600;color:var(--petrol);
  margin-bottom:.4rem;line-height:1.2
}
.section--dark .flow__title{color:#fff}
.flow__body{
  font-size:.8125rem;font-weight:300;color:var(--acero);line-height:1.6
}
.section--dark .flow__body{color:rgba(255,255,255,.6)}

/* ═══ Pills de norma ═══ */
.norms{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
.norm{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.75rem;font-weight:600;color:var(--petrol);
  background:var(--white);border:1px solid var(--hielo-d);
  padding:.45rem .8rem;border-radius:2px;letter-spacing:.01em
}
.section--dark .norm{
  color:#fff;background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.14)
}
.norm svg{width:14px;height:14px;color:var(--teal);flex-shrink:0}
.section--dark .norm svg{color:var(--teal-lt)}

/* ═══ CTA de cierre ═══ */
.endcta{background:var(--petrol);padding:3.5rem 0}
.endcta__inner{
  display:flex;justify-content:space-between;align-items:center;
  gap:2rem;flex-wrap:wrap
}
.endcta__title{
  font-size:var(--t-2xl);font-weight:700;color:#fff;
  letter-spacing:-.01em;max-width:24ch;line-height:1.2
}
.endcta__actions{display:flex;gap:.75rem;flex-wrap:wrap}

/* ═══ FOOTER ═══ */
.footer{background:var(--petrol-d);padding:3.25rem 0 2rem;
  border-top:1px solid rgba(255,255,255,.05)}
.footer__inner{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;
  gap:3rem;margin-bottom:2.5rem;padding-bottom:2.5rem;
  border-bottom:1px solid rgba(255,255,255,.06)
}
.footer__brand{display:flex;align-items:center;gap:.7rem;margin-bottom:.85rem}
.footer__brand-apex{font-size:.9375rem;font-weight:700;letter-spacing:.25em;color:#fff}
.footer__tagline{
  font-size:.8125rem;font-weight:300;color:rgba(255,255,255,.35);
  line-height:1.65;max-width:250px;margin-bottom:1rem
}
.footer__iso{
  display:inline-flex;align-items:center;gap:.375rem;
  font-size:.625rem;font-weight:600;letter-spacing:.08em;color:var(--teal);
  border:1px solid rgba(31,138,138,.25);padding:.25rem .5rem;border-radius:2px
}
.footer__col-title{
  font-size:.5625rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.25);margin-bottom:.85rem
}
.footer__links{display:flex;flex-direction:column;gap:.4rem}
.footer__links a{font-size:.8125rem;font-weight:300;color:rgba(255,255,255,.4);transition:color .12s}
.footer__links a:hover{color:rgba(255,255,255,.8)}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem}
.footer__copy,.footer__legal{font-size:.75rem;color:rgba(255,255,255,.2)}
.footer__legal a{color:rgba(255,255,255,.3);transition:color .12s}
.footer__legal a:hover{color:rgba(255,255,255,.65)}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1024px){
  .nav__links{display:none}
  .nav__right .nav__portal,.nav__right>a.btn--solid{display:none}
  .nav__hamburger{display:flex}
  .mobile-menu{
    display:flex;flex-direction:column;
    position:fixed;top:62px;left:0;right:0;bottom:0;
    background:var(--white);z-index:290;
    transform:translateX(100%);transition:transform .28s ease;overflow-y:auto
  }
  .mobile-menu.open{transform:translateX(0)}
  body.menu-open{overflow:hidden}
  .hero__inner{grid-template-columns:1fr;gap:2rem;padding-bottom:2.75rem}
  .hero__aside{display:none}
  .footer__inner{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .wrap{padding:0 1.35rem}
  .nav__inner{padding:0 1.35rem}
  .flow{grid-template-columns:1fr}
  .flow__step{border-right:none;border-bottom:1px solid var(--hielo-d)}
  .flow__step:last-child{border-bottom:none}
  .section--dark .flow__step{border-bottom-color:rgba(255,255,255,.1)}
  .keystrip__item+.keystrip__item{margin-left:0}
  .keystrip__item{padding:1.25rem 0 1.25rem 1.1rem}
  .footer__inner{grid-template-columns:1fr;gap:2rem}
  .endcta__inner{flex-direction:column;align-items:flex-start}
  .cap{grid-template-columns:2rem 1fr;gap:.9rem}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}