/* ==========================================================================
   Ingeniería 26 — www.i26mx.com
   Hoja de estilos principal · versión 1
   ========================================================================== */

:root{
  --azul:#0045B7;          /* azul de la marca, tomado del logo */
  --azul-hondo:#002A6E;    /* bloques oscuros */
  --azul-claro:#E7EEF9;    /* fondos suaves */
  --tinta:#0F1B2A;         /* texto principal */
  --tinta-media:#4A5A6B;   /* texto secundario */
  --papel:#EEF1F4;         /* fondo general */
  --blanco:#FFFFFF;
  --linea:#C9D3DC;         /* filetes y retículas */
  --estado:#1FA37A;        /* verde de estado, solo en el esquema */

  --ancho:1160px;
  --paso:clamp(56px, 8vw, 104px);   /* aire vertical entre secciones */
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important;transition:none !important}
}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:"Archivo","IBM Plex Sans",sans-serif;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.1;
  margin:0;
  text-wrap:balance;
}

p{margin:0 0 1em}
p:last-child{margin-bottom:0}

a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}

img{max-width:100%;display:block}

:focus-visible{
  outline:3px solid var(--azul);
  outline-offset:3px;
  border-radius:2px;
}

.caja{
  width:100%;
  max-width:var(--ancho);
  margin-inline:auto;
  padding-inline:24px;
}

.salta{
  position:absolute;left:-9999px;
  background:var(--azul);color:#fff;padding:12px 18px;z-index:100;
}
.salta:focus{left:12px;top:12px}

/* ---------- Barra superior ------------------------------------------------ */

.barra{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linea);
}
.barra .caja{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;min-height:74px;
}
.marca img{height:34px;width:auto}

.menu{display:flex;align-items:center;gap:30px}
.menu a{
  color:var(--tinta);font-size:15.5px;font-weight:500;
  padding:6px 0;border-bottom:2px solid transparent;
}
.menu a:hover{color:var(--azul);border-bottom-color:var(--azul);text-decoration:none}
.menu .boton-menu{
  background:var(--azul);color:#fff;border:0;border-radius:3px;
  padding:11px 20px;font-weight:600;
}
.menu .boton-menu:hover{background:var(--azul-hondo);border-bottom-color:transparent}

.hamburguesa{
  display:none;background:none;border:1px solid var(--linea);
  border-radius:3px;padding:9px 11px;cursor:pointer;
}
.hamburguesa span{
  display:block;width:20px;height:2px;background:var(--tinta);margin:4px 0;
}

/* ---------- Portada ------------------------------------------------------- */

.portada{
  background:var(--blanco);
  border-bottom:1px solid var(--linea);
  padding-block:clamp(48px,6vw,80px) clamp(48px,6vw,72px);
}
.portada .caja{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(32px,5vw,64px);
  align-items:center;
}
.portada h1{
  font-size:clamp(33px,4.1vw,50px);
  max-width:19ch;
}
.portada .entrada{
  font-size:clamp(17px,1.5vw,19.5px);
  color:var(--tinta-media);
  max-width:52ch;
  margin-top:22px;
}
.acciones{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

.boton{
  display:inline-block;border-radius:3px;padding:14px 26px;
  font-weight:600;font-size:16px;border:1.5px solid var(--azul);
  background:var(--azul);color:#fff;cursor:pointer;
  transition:background .15s ease;
}
.boton:hover{background:var(--azul-hondo);border-color:var(--azul-hondo);text-decoration:none}
.boton.hueco{background:transparent;color:var(--azul)}
.boton.hueco:hover{background:var(--azul-claro);border-color:var(--azul);color:var(--azul-hondo)}

.notas{
  display:flex;flex-wrap:wrap;gap:10px 28px;
  margin-top:34px;padding-top:22px;border-top:1px solid var(--linea);
  font-size:15px;color:var(--tinta-media);
}
.notas b{color:var(--tinta);font-weight:600}

.esquema{width:100%;height:auto}
.esquema text{font-family:"IBM Plex Sans",sans-serif}

/* trazo del esquema: una sola animación al cargar */
.esquema .enlace{
  stroke-dasharray:220;stroke-dashoffset:220;
  animation:trazar 1.5s cubic-bezier(.4,0,.2,1) forwards;
}
.esquema .d2{animation-delay:.14s}
.esquema .d3{animation-delay:.28s}
.esquema .d4{animation-delay:.42s}
.esquema .d5{animation-delay:.56s}
.esquema .d6{animation-delay:.70s}
.esquema .cono{opacity:0;animation:aparecer .7s ease forwards .8s}
.esquema .pulso{animation:latir 2.6s ease-in-out infinite 2s}
@keyframes trazar{to{stroke-dashoffset:0}}
@keyframes aparecer{to{opacity:1}}
@keyframes latir{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){
  .esquema .enlace{stroke-dashoffset:0}
  .esquema .cono{opacity:1}
}

/* ---------- Secciones ----------------------------------------------------- */

.seccion{padding-block:var(--paso)}
.seccion.clara{background:var(--blanco);border-block:1px solid var(--linea)}

.encabezado{max-width:60ch;margin-bottom:clamp(34px,4vw,52px)}
.encabezado h2{font-size:clamp(27px,3.2vw,38px)}
.encabezado p{margin-top:16px;color:var(--tinta-media);font-size:17.5px}

/* Servicios: filetes en lugar de tarjetas */
.servicios{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(32px,5vw,64px);
}
.servicio{
  padding:30px 0 32px;
  border-top:1px solid var(--linea);
}
.servicio h3{font-size:21px;display:flex;align-items:baseline;gap:12px}
.servicio h3::before{
  content:"";flex:0 0 auto;width:9px;height:9px;background:var(--azul);
  transform:translateY(-2px);
}
.servicio p{margin-top:12px;color:var(--tinta-media);font-size:16.5px;max-width:46ch}
.servicio ul{margin:14px 0 0;padding:0;list-style:none;font-size:15.5px}
.servicio li{
  padding:6px 0 6px 18px;position:relative;color:var(--tinta);
  border-top:1px dotted var(--linea);
}
.servicio li::before{
  content:"";position:absolute;left:0;top:16px;
  width:8px;height:1px;background:var(--azul);
}

/* Capacidades: lista técnica a dos columnas */
.capacidades{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(32px,5vw,64px);
}
.capacidad{
  display:grid;grid-template-columns:minmax(0,1fr);
  padding:22px 0;border-top:1px solid var(--linea);
}
.capacidad h3{font-size:17.5px;font-weight:600;letter-spacing:0}
.capacidad p{margin-top:7px;font-size:15.5px;color:var(--tinta-media)}

/* Proceso: aquí sí hay secuencia, por eso va numerado */
.proceso{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(18px,2.4vw,30px);
}
.paso{position:relative;padding-top:26px}
.paso::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--linea);
}
.paso::after{
  content:"";position:absolute;top:0;left:0;width:36%;height:2px;background:var(--azul);
}
.paso .num{
  font-family:"Archivo",sans-serif;font-weight:700;font-size:14px;
  color:var(--azul);letter-spacing:.04em;
}
.paso h3{font-size:17.5px;margin-top:8px}
.paso p{margin-top:9px;font-size:15px;color:var(--tinta-media)}

/* Bloque oscuro: licitaciones y proyectos complejos */
.bloque-oscuro{
  background:var(--azul-hondo);color:#fff;
  padding-block:var(--paso);
}
.bloque-oscuro .caja{
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(30px,5vw,64px);align-items:start;
}
.bloque-oscuro h2{font-size:clamp(26px,3vw,36px)}
.bloque-oscuro p{color:#C3D3EC;margin-top:18px;max-width:46ch}
.entregables{
  margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;
}
.entregables li{
  padding:13px 0;border-top:1px solid rgba(255,255,255,.22);
  font-size:16px;color:#EAF1FB;
}

/* Fabricantes */
.fabricantes{display:flex;flex-wrap:wrap;gap:10px}
.fabricantes span{
  border:1px solid var(--linea);background:var(--blanco);
  border-radius:2px;padding:9px 15px;font-size:15px;font-weight:500;
}
.seccion.clara .fabricantes span{background:var(--papel)}
.pie-nota{margin-top:22px;font-size:15px;color:var(--tinta-media);max-width:70ch}

/* Sectores */
.sectores{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 clamp(28px,4vw,56px);margin:0;padding:0;list-style:none;
}
.sectores li{
  padding:14px 0;border-top:1px solid var(--linea);
  font-size:16.5px;font-weight:500;
}

/* ---------- Contacto ------------------------------------------------------ */

.contacto .caja{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,5vw,64px);align-items:start;
}
.formulario{display:grid;gap:16px}
.campo{display:grid;gap:7px}
.campo label{font-size:14.5px;font-weight:600}
.campo input,.campo textarea,.campo select{
  font-family:inherit;font-size:16px;color:var(--tinta);
  background:var(--blanco);border:1px solid var(--linea);border-radius:3px;
  padding:12px 14px;width:100%;
}
.campo textarea{min-height:132px;resize:vertical}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  border-color:var(--azul);outline:2px solid rgba(0,69,183,.18);outline-offset:0;
}
.dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.legal{font-size:13.5px;color:var(--tinta-media)}

.datos{
  border-top:3px solid var(--azul);background:var(--blanco);
  border-inline:1px solid var(--linea);border-bottom:1px solid var(--linea);
  padding:28px;
}
.datos h3{font-size:19px}
.datos dl{margin:22px 0 0;display:grid;gap:16px}
.datos dt{font-size:14px;color:var(--tinta-media)}
.datos dd{margin:2px 0 0;font-size:16.5px;font-weight:500}

/* ---------- Pie ----------------------------------------------------------- */

.pie{background:var(--tinta);color:#AFBECD;padding-block:52px 34px;font-size:15px}
.pie .caja{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:start}
.pie img{height:32px;width:auto}
.pie p{margin-top:16px;max-width:44ch}
.pie nav{display:grid;gap:9px;justify-items:start}
.pie a{color:#DDE6EF}
.pie .cierre{
  margin-top:38px;padding-top:20px;border-top:1px solid rgba(255,255,255,.15);
  display:flex;flex-wrap:wrap;gap:8px 24px;font-size:13.5px;
}

/* ---------- Adaptación a pantallas chicas --------------------------------- */

@media (max-width:960px){
  .portada .caja,
  .bloque-oscuro .caja,
  .contacto .caja{grid-template-columns:minmax(0,1fr)}
  .portada h1{max-width:20ch}
  .proceso{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sectores{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:720px){
  body{font-size:16.5px}
  .hamburguesa{display:block}
  .menu{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--blanco);border-bottom:1px solid var(--linea);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 20px;
  }
  .menu.abierto{display:flex}
  .menu a{padding:13px 0;border-bottom:1px solid var(--linea)}
  .menu .boton-menu{text-align:center;margin-top:12px;border-bottom:0}
  .servicios,.capacidades,.entregables,.dos{grid-template-columns:minmax(0,1fr)}
  .proceso,.sectores{grid-template-columns:minmax(0,1fr)}
  .pie .caja{grid-template-columns:minmax(0,1fr)}
}