/* ============================================================
   INGEFOR — ingefor.com.co
   Sistema de diseño "sala de máquinas"
   Paleta: tinta (cuarto de bombas), azul logo, verde bomba
   Barnes, rojo válvula (reservado a emergencias / RCI).
   Tipos: Archivo (display) · Barlow (texto) · Barlow Condensed
   (placas de equipo: eyebrows, códigos, datos).
   ============================================================ */

:root{
  --tinta:      #0C1622;
  --panel:      #122236;
  --panel-2:    #16293F;
  --papel:      #F2F5F7;
  --blanco:     #FFFFFF;
  --azul:       #1D4FA1;
  --azul-vivo:  #2E6BD6;
  --verde:      #0F7A4B;
  --verde-vivo: #17A868;
  --verde-texto:#0E6E44;
  --rojo:       #C93A31;
  --ink:        #101820;
  --ink-2:      #45525E;
  --ink-3:      #5A6773;
  --linea:      #D8DFE5;
  --linea-dark: rgba(255,255,255,.14);
  --claro:      #E9EEF2;
  --claro-2:    #B8C4CE;

  --d: 'Archivo', system-ui, sans-serif;
  --b: 'Barlow', system-ui, sans-serif;
  --c: 'Barlow Condensed', 'Arial Narrow', sans-serif;

  --max: 1160px;
  --r: 14px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

body{
  font-family:var(--b);
  font-size:17px; line-height:1.6;
  color:var(--ink); background:var(--blanco);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:var(--azul-vivo); }
:focus-visible{ outline:3px solid var(--verde-vivo); outline-offset:2px; border-radius:2px; }

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

.skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--verde); color:#fff; font-family:var(--d); font-weight:650; padding:12px 20px; border-radius:0 0 10px 0; text-decoration:none; }
.skip:focus{ left:0; }

/* ---------- placa de equipo (firma del sitio) ---------- */
.placa{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--c); font-weight:600; font-size:15px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2);
}
.placa .cod{
  border:1.5px solid currentColor; border-radius:4px;
  padding:1px 8px 2px; font-size:14px; letter-spacing:.18em;
}
.placa--verde{ color:var(--verde-texto); }
.dark .placa--verde, .sec--tinta .placa--verde, .hero .placa--verde{ color:#7FD4A8; }
.placa--rojo{ color:var(--rojo); }
.placa--claro{ color:var(--claro-2); }

/* ---------- tipografía ---------- */
h1,h2,h3{ font-family:var(--d); line-height:1.12; letter-spacing:-.015em; }
h1{ font-size:clamp(34px, 5.2vw, 58px); font-weight:750; }
h2{ font-size:clamp(27px, 3.6vw, 40px); font-weight:700; margin:14px 0 14px; }
h3{ font-size:21px; font-weight:650; }
.lede{ font-size:clamp(18px, 2vw, 21px); color:var(--ink-2); max-width:56ch; }
.dark .lede{ color:var(--claro-2); }

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--d); font-weight:650; font-size:16px;
  padding:14px 24px; border-radius:9px; text-decoration:none;
  border:2px solid transparent;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn svg{ flex:none; }
.btn--wa{ background:var(--verde); color:#fff; }
.btn--wa:hover{ background:#0C6B41; }
.btn--linea{ border-color:var(--claro-2); color:var(--ink); background:transparent; }
.btn--linea:hover{ border-color:var(--ink); }
.dark .btn--linea{ border-color:var(--linea-dark); color:#fff; }
.dark .btn--linea:hover{ border-color:#fff; }
/* botones de contorno sobre fondos oscuros sin clase .dark (hero y panel de contacto) */
.hero .btn--linea, .contacto-panel .btn--linea{
  border-color:rgba(255,255,255,.6); color:#fff; background:rgba(255,255,255,.07);
}
.hero .btn--linea:hover, .contacto-panel .btn--linea:hover{
  border-color:#fff; background:rgba(255,255,255,.16);
}
.emergencia .btn--blanco:hover{ background:#FFE1DE; }
.menu-btn:hover{ border-color:#fff; }

/* ---------- header ---------- */
.top{
  position:sticky; top:0; z-index:50;
  background:rgba(12,22,34,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea-dark);
}
.top .wrap{ display:flex; align-items:center; gap:28px; height:68px; }
.marca{ display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto; }
.marca svg{ flex:none; }
.marca b{
  font-family:var(--d); font-weight:800; font-size:21px; letter-spacing:.02em; color:#fff;
}
.marca span{
  display:block; font-family:var(--c); font-weight:500; font-size:11.5px;
  letter-spacing:.22em; color:var(--claro-2); text-transform:uppercase; margin-top:-3px;
}
/* logo real (INGEFOR, versión blanca) directo sobre cabecera/pie oscuros */
.marca-logo{ display:block; height:48px; width:auto; }
.pie .marca-logo{ height:56px; }
.nav{ display:flex; gap:26px; align-items:center; }
.nav a{
  font-family:var(--c); font-weight:600; font-size:16.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--claro); text-decoration:none;
}
.nav a:hover{ color:#fff; }
.top > .wrap > .btn{ padding:9px 16px; font-size:14.5px; }
.menu-btn{ display:none; background:none; border:1.5px solid var(--linea-dark); border-radius:8px; color:#fff; padding:8px 10px; cursor:pointer; }

/* ---------- hero ---------- */
.hero{
  position:relative; background:var(--tinta); color:#fff; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(78deg, rgba(9,17,27,.97) 0%, rgba(9,17,27,.88) 34%, rgba(10,20,32,.42) 68%, rgba(10,20,32,.28) 100%),
    url("../assets/hero-cuarto-bombas.jpg") right center / cover no-repeat;
}
.hero .wrap{ position:relative; padding-top:92px; padding-bottom:96px; }
.hero h1{ max-width:15ch; margin:18px 0 20px; }
.hero h1 em{ font-style:normal; color:#7FD4A8; }
.hero .lede{ color:var(--claro); max-width:46ch; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; }
.hero-nota{ margin-top:16px; font-family:var(--c); font-weight:600; font-size:15.5px; letter-spacing:.1em; text-transform:uppercase; color:#7FD4A8; }
.hero-chips{ display:flex; gap:10px; flex-wrap:wrap; margin-top:44px; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--c); font-weight:600; font-size:15px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--claro); border:1px solid var(--linea-dark); border-radius:999px; padding:7px 15px;
  background:rgba(12,22,34,.82);
}
.chip svg{ flex:none; }

/* ---------- franja de confianza ---------- */
.franja{ background:var(--papel); border-bottom:1px solid var(--linea); }
.franja .wrap{ display:flex; align-items:center; gap:12px 34px; flex-wrap:wrap; padding-top:20px; padding-bottom:20px; }
.franja p{ font-family:var(--c); font-weight:600; font-size:15px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.franja ul{ display:flex; gap:14px 38px; flex-wrap:wrap; list-style:none; align-items:center; }
.franja li{ display:flex; align-items:center; }
.franja li img{ height:30px; width:auto; max-width:170px; object-fit:contain; }
.franja li img.franja-alto{ height:44px; }

/* ---------- secciones ---------- */
.sec{ padding:88px 0; }
.sec--papel{ background:var(--papel); }
.sec--tinta{ background:var(--tinta); color:#fff; }
.sec-head{ max-width:720px; margin-bottom:44px; }

/* ---------- stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(4, 1fr); gap:2px; background:var(--linea-dark); border:1px solid var(--linea-dark); border-radius:var(--r); overflow:hidden; }
.stat{ background:var(--panel); padding:26px 26px 22px; }
.stat b{ display:block; font-family:var(--d); font-weight:750; font-size:clamp(30px,3.4vw,44px); letter-spacing:-.02em; color:#fff; }
.stat b i{ font-style:normal; color:#7FD4A8; }
.stat span{ font-family:var(--c); font-weight:500; font-size:15.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--claro-2); }
.stats-nota{ margin-top:14px; font-size:14.5px; color:var(--claro); }

/* ---------- tarjetas de servicio ---------- */
.grid-serv{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.serv{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--linea);
  border-radius:var(--r); overflow:hidden; text-decoration:none; color:var(--ink);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.serv:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(16,24,32,.12); border-color:var(--claro-2); }
.serv figure{ aspect-ratio:16/10; overflow:hidden; background:var(--panel); }
.serv figure img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.serv:hover figure img{ transform:scale(1.04); }
.serv figure.serv-ilus{ display:flex; align-items:center; justify-content:center; }
.serv-body{ padding:22px 24px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.serv h3{ margin-top:2px; }
.serv p{ color:var(--ink-2); font-size:15.5px; flex:1; }
.serv .mas{ font-family:var(--d); font-weight:650; font-size:15px; color:var(--azul-vivo); display:inline-flex; align-items:center; gap:6px; }
.serv:hover .mas{ text-decoration:underline; }

/* ---------- proceso / evidencia ---------- */
.proceso{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:paso; }
.paso{ background:#fff; border:1px solid var(--linea); border-radius:var(--r); padding:24px; }
.sec--tinta .paso{ background:var(--panel); border-color:var(--linea-dark); }
.paso::before{
  counter-increment:paso; content:"PASO " counter(paso, decimal-leading-zero);
  display:inline-block; font-family:var(--c); font-weight:600; font-size:14px; letter-spacing:.18em;
  color:var(--verde-vivo); border:1.5px solid var(--verde-vivo); border-radius:4px; padding:1px 8px 2px; margin-bottom:14px;
}
.paso h3{ font-size:18.5px; margin-bottom:8px; color:var(--ink); }
.paso p{ font-size:15px; color:var(--ink-2); }
.sec--tinta .paso h3{ color:#fff; }
.sec--tinta .paso p{ color:var(--claro-2); }

/* ---------- banda emergencias ---------- */
.emergencia{ background:linear-gradient(100deg, #96261F 0%, var(--rojo) 55%, #B93229 100%); color:#fff; }
.emergencia .wrap{ display:flex; align-items:center; gap:22px 36px; flex-wrap:wrap; padding-top:42px; padding-bottom:42px; }
.emergencia h2{ font-size:clamp(22px,2.6vw,30px); margin:8px 0 4px; }
.emergencia p{ color:#fff; max-width:52ch; }
.emergencia .cta{ margin-left:auto; display:flex; gap:12px; flex-wrap:wrap; }
.emergencia .btn--linea{ border-color:rgba(255,255,255,.55); color:#fff; }
.emergencia .btn--linea:hover{ border-color:#fff; }
.emergencia .btn--blanco{ background:#fff; color:var(--rojo); }
.emergencia .placa--rojo{ color:#FFD9D6; }

/* ---------- clientes ---------- */
.clientes{ display:flex; flex-wrap:wrap; gap:12px; }
.clientes li{
  list-style:none; font-family:var(--d); font-weight:650; font-size:15.5px; color:var(--ink-2);
  border:1px solid var(--linea); border-radius:999px; padding:9px 18px; background:#fff;
}
.clientes-nota{ margin-top:18px; color:var(--ink-3); font-size:15px; }

/* muro de logos de clientes */
.logo-wall{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.logo-cell{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:86px; padding:16px 14px; background:#fff;
  border:1px solid var(--linea); border-radius:12px;
  font-family:var(--d); font-weight:700; font-size:15.5px; line-height:1.2; letter-spacing:.005em;
  color:#5A6773; transition:color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.logo-cell:hover{ color:var(--ink); border-color:var(--claro-2); box-shadow:0 8px 22px rgba(16,24,32,.09); transform:translateY(-2px); }
.logo-cell img{ max-height:40px; max-width:100%; width:auto; object-fit:contain; }
.logo-cell img.logo-alto{ max-height:62px; }
@media(max-width:980px){ .logo-wall{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:620px){ .logo-wall{ grid-template-columns:repeat(2,1fr); } }

/* ---------- marcas ---------- */
.marcas{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.marca-card{
  background:var(--panel); border:1px solid var(--linea-dark); border-radius:var(--r);
  padding:28px; color:#fff; text-decoration:none; display:block;
  transition:border-color .18s ease, transform .18s ease;
}
.marca-card:hover{ border-color:var(--claro-2); transform:translateY(-3px); }
.marca-card h3{ margin:10px 0 8px; }
.logo-prov{
  display:inline-flex; align-items:center; background:#fff; border-radius:10px;
  padding:12px 18px; margin-bottom:14px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.logo-prov:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.35); }
.logo-prov img{ height:46px; width:auto; display:block; }
.marca-card p{ color:var(--claro-2); font-size:15.5px; }
.marca-card .mas{ display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-family:var(--d); font-weight:650; font-size:15px; color:#7FD4A8; }

/* ---------- contacto ---------- */
.contacto-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:start; }
.dato{ display:flex; gap:14px; align-items:flex-start; padding:17px 0; border-bottom:1px solid var(--linea); }
.dato:last-child{ border-bottom:none; }
.dato svg{ flex:none; margin-top:3px; }
.dato b{ font-family:var(--c); font-weight:600; font-size:14.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); display:block; }
.dato a{ font-family:var(--d); font-weight:650; font-size:19px; color:var(--ink); text-decoration:none; }
.dato a:hover{ color:var(--azul-vivo); text-decoration:underline; }
.dato p{ font-size:15px; color:var(--ink-2); }
.contacto-panel{
  background:var(--tinta); border-radius:var(--r); padding:34px; color:#fff;
}
.contacto-panel h3{ font-size:24px; margin:12px 0 10px; }
.contacto-panel p{ color:var(--claro-2); margin-bottom:22px; }
.contacto-panel .btn{ width:100%; justify-content:center; margin-bottom:12px; }
.contacto-panel small{ display:block; text-align:center; color:var(--claro-2); font-size:13.5px; }

/* ---------- footer ---------- */
.pie{ background:var(--tinta); color:var(--claro-2); border-top:1px solid var(--linea-dark); }
.pie .wrap{ padding-top:56px; padding-bottom:34px; }
.pie-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:34px; padding-bottom:38px; border-bottom:1px solid var(--linea-dark); }
.pie h3{ font-family:var(--c); font-weight:600; font-size:15px; letter-spacing:.16em; text-transform:uppercase; color:var(--claro); margin-bottom:14px; }
.pie ul{ list-style:none; display:grid; gap:9px; }
.pie a{ color:var(--claro-2); text-decoration:none; font-size:15.5px; }
.pie a:hover{ color:#fff; text-decoration:underline; }
.pie .marca b{ color:#fff; }
.pie-desc{ margin-top:12px; font-size:15px; max-width:36ch; }
.pie-legal{ display:flex; gap:10px 28px; flex-wrap:wrap; padding-top:22px; font-size:13.5px; color:#8A94A0; }
.pie-legal span{ color:var(--claro-2); }

/* ---------- páginas de servicio ---------- */
.s-hero{ background:var(--tinta); color:#fff; position:relative; overflow:hidden; }
.s-hero .wrap{ position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center; padding-top:66px; padding-bottom:66px; }
.s-hero h1{ font-size:clamp(30px,4vw,46px); margin:16px 0 16px; }
.s-hero figure{ border-radius:var(--r); overflow:hidden; border:1px solid var(--linea-dark); }
.s-hero figure img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.s-hero .hero-cta{ margin-top:28px; }

.miga{ background:var(--tinta); border-bottom:1px solid var(--linea-dark); }
.miga .wrap{ padding-top:14px; padding-bottom:14px; }
.miga ol{ list-style:none; display:flex; gap:8px; flex-wrap:wrap; font-family:var(--c); font-weight:500; font-size:14.5px; letter-spacing:.08em; text-transform:uppercase; }
.miga a{ color:var(--claro-2); text-decoration:none; }
.miga a:hover{ color:#fff; }
.miga li:not(:last-child)::after{ content:"›"; margin-left:8px; color:var(--ink-3); }
.miga li[aria-current]{ color:#fff; }

.lista-check{ list-style:none; display:grid; gap:13px; margin-top:8px; }
.lista-check li{ display:flex; gap:12px; align-items:flex-start; font-size:16.5px; color:var(--ink-2); }
.lista-check li::before{
  content:""; flex:none; width:22px; height:22px; margin-top:3px; border-radius:50%;
  background:var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4 10-10'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.dos-col{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
.aviso{
  border-left:4px solid var(--verde); background:var(--papel);
  border-radius:0 10px 10px 0; padding:20px 24px; margin-top:30px;
}
.aviso--rojo{ border-left-color:var(--rojo); }
.aviso b{ font-family:var(--d); }
.rel{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.rel a{
  background:#fff; border:1px solid var(--linea); border-radius:12px; padding:20px 22px;
  text-decoration:none; color:var(--ink); font-family:var(--d); font-weight:650; font-size:16.5px;
  transition:border-color .15s ease, transform .15s ease;
}
.rel a span{ display:block; font-family:var(--c); font-weight:600; font-size:13.5px; letter-spacing:.14em; color:var(--verde); text-transform:uppercase; margin-bottom:6px; }
.rel a:hover{ border-color:var(--claro-2); transform:translateY(-2px); }

/* ---------- reveal ---------- */
.rev{ opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease; }
.rev.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .rev{ opacity:1; transform:none; } }

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .grid-serv{ grid-template-columns:1fr 1fr; }
  .proceso{ grid-template-columns:1fr 1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
  .contacto-grid, .dos-col, .s-hero .wrap{ grid-template-columns:1fr; }
  .marcas{ grid-template-columns:1fr; }
  .pie-grid{ grid-template-columns:1fr 1fr; }
  .rel{ grid-template-columns:1fr; }
  .nav{ display:none; position:absolute; top:68px; left:0; right:0; background:var(--tinta);
        flex-direction:column; align-items:flex-start; padding:18px 24px 24px; gap:18px;
        border-bottom:1px solid var(--linea-dark); }
  .nav.abierta{ display:flex; }
  .menu-btn{ display:block; }
}
.nowrap{ white-space:nowrap; }
@media (max-width: 620px){
  .solo-desktop{ display:none; }
  .franja .wrap{ flex-direction:column; align-items:center; gap:14px; }
  .franja ul{ justify-content:center; gap:16px 26px; }
  .franja li img{ height:26px; max-width:140px; }
  .franja li img.franja-alto{ height:38px; }
  .hero::before{
    background:
      linear-gradient(180deg, rgba(9,17,27,.93) 0%, rgba(9,17,27,.87) 100%),
      url("../assets/hero-cuarto-bombas.jpg") center / cover no-repeat;
  }
  .grid-serv{ grid-template-columns:1fr; }
  .proceso{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
  .sec{ padding:64px 0; }
  .hero .wrap{ padding-top:64px; padding-bottom:72px; }
  .emergencia .cta{ margin-left:0; }
}