/* ============================================================
   IINUX - Servicios (pagina property-design, 28596)
   Bloque autocontenido. Todo cuelga de .iix-servicios para no
   filtrar estilos al resto del sitio (Houzez carga Bootstrap).
   ============================================================ */
.iix-servicios{
  --iix-marino:#0D2E4F;
  --iix-panel:#072E51;
  --iix-acero:#588195;
  --iix-bruma:#99AEBF;
  --iix-claro:#F5F6F6;
  --iix-disco:#EFEFEF;
  --iix-tinta:#222222;
  --iix-texto:#7A7A7A;
  --iix-cielo:#329DDD;
  --iix-papel:#FFFFFF;
  --iix-caja:1140px;
  --iix-titular:Anton,"Arial Narrow",Roboto,sans-serif;
  --iix-peso-tit:400;
  --iix-cuerpo:Roboto,"Segoe UI",system-ui,sans-serif;

  font-family:var(--iix-cuerpo);
  color:var(--iix-texto);
  background:var(--iix-claro);
  max-width:100%;
}
.iix-servicios *,.iix-servicios *::before,.iix-servicios *::after{box-sizing:border-box}
.iix-servicios img{max-width:100%;height:auto;display:block}
.iix-servicios h2,.iix-servicios h3,.iix-servicios p,.iix-servicios ul,.iix-servicios figure{margin:0}
.iix-servicios ul{padding:0;list-style:none}

.iix-hero{height:330px;overflow:hidden}
.iix-hero-img{width:100%;height:100%;object-fit:cover}

/* --- intro a dos columnas --- */
.iix-intro{display:grid;grid-template-columns:40.5% 59.5%}
.iix-intro-izq{display:flex;flex-direction:column}
.iix-muestra{background:var(--iix-bruma);height:150px}
.iix-rotulo{flex:1;display:flex;align-items:center;padding:44px 8% 54px;min-height:230px}
.iix-rotulo h2{
  font-family:var(--iix-titular);font-weight:var(--iix-peso-tit);
  font-size:clamp(30px,3.5vw,46px);line-height:1.05;letter-spacing:.012em;
  text-transform:uppercase;text-wrap:balance;
}
.iix-intro-der{padding:40px 6% 54px}
.iix-intro-der h3{
  font-family:var(--iix-titular);font-weight:var(--iix-peso-tit);
  font-size:19px;letter-spacing:.03em;margin-bottom:10px;text-transform:uppercase;
}
.iix-intro-der h3+p{margin-bottom:34px}
.iix-intro-der p{text-align:justify;font-size:16px;font-weight:300;line-height:25px;max-width:66ch}

.iix-claro .iix-rotulo{background:var(--iix-panel)}
.iix-claro .iix-rotulo h2{color:var(--iix-papel)}
.iix-claro .iix-intro-der{background:var(--iix-claro);color:var(--iix-texto)}
.iix-claro .iix-intro-der h3{color:var(--iix-marino)}

.iix-oscuro .iix-rotulo{background:var(--iix-claro)}
.iix-oscuro .iix-rotulo h2{color:var(--iix-acero)}
.iix-oscuro .iix-intro-der{background:var(--iix-marino);color:var(--iix-papel)}
.iix-oscuro .iix-intro-der h3{color:var(--iix-papel)}

/* --- banda de valor --- */
.iix-banda{padding:56px 0}
.iix-banda-in{
  max-width:var(--iix-caja);margin:0 auto;padding:0 5%;
  display:grid;grid-template-columns:1fr 380px;gap:56px;align-items:center;
}
.iix-banda-txt p{margin-bottom:16px;text-align:center;font-size:16px;font-weight:300;line-height:25px}
.iix-banda-txt p:last-child{margin-bottom:0}
.iix-banda-img{width:100%;aspect-ratio:4/3;object-fit:cover}
.iix-banda-cols{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.iix-ben-t{margin-bottom:14px;text-align:center;font-size:16px;font-weight:500}
.iix-ben ul{text-align:center}
.iix-ben li{font-size:16px;font-weight:300;line-height:25px}

.iix-claro .iix-banda{background:var(--iix-marino);color:var(--iix-papel)}
.iix-oscuro .iix-banda{background:var(--iix-claro);color:var(--iix-texto)}

/* --- proceso --- */
.iix-proceso{padding:54px 5% 66px}
.iix-proceso-t{
  font-family:var(--iix-titular);font-weight:var(--iix-peso-tit);
  font-size:clamp(26px,3.2vw,40px);letter-spacing:.012em;text-align:center;
  margin-bottom:46px;text-transform:uppercase;text-wrap:balance;
}
.iix-claro .iix-proceso{background:var(--iix-claro)}
.iix-claro .iix-proceso-t{color:var(--iix-marino)}
.iix-oscuro .iix-proceso{background:var(--iix-marino);color:var(--iix-papel)}
.iix-oscuro .iix-proceso-t{
  background:var(--iix-claro);color:var(--iix-marino);
  margin:-54px -5% 46px;padding:26px 5% 20px;
}

.iix-diagrama{position:relative;max-width:1040px;margin:0 auto}
.iix-conectores{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.iix-conectores line{stroke-width:1.6;stroke-linecap:round}
.iix-claro .iix-conectores line{stroke:var(--iix-marino)}
.iix-oscuro .iix-conectores line{stroke:var(--iix-papel)}

.iix-ic{width:100%;height:100%;display:block}
.iix-disco{
  width:74px;height:74px;border-radius:50%;background:var(--iix-disco);
  display:grid;place-items:center;color:var(--iix-tinta);flex:none;
}
.iix-disco .iix-ic{width:44px;height:44px}
.iix-suelto{width:56px;height:56px;display:grid;place-items:center;color:var(--iix-papel);flex:none}

.iix-et{
  font-family:var(--iix-titular);font-weight:var(--iix-peso-tit);
  font-size:15px;letter-spacing:.03em;text-transform:uppercase;
  margin:12px 0 8px;line-height:1.18;
}
.iix-claro .iix-et{color:var(--iix-marino)}
.iix-oscuro .iix-et{color:var(--iix-papel)}
.iix-tx{font-size:13.5px;font-weight:300;line-height:1.55;font-style:italic}
.iix-diagrama ul{margin-top:8px;padding-left:1.1em;list-style:disc;
  font-size:13.5px;font-weight:300;line-height:1.55;font-style:italic}
.iix-diagrama li{margin:1px 0}

.iix-lineal{display:grid;gap:0 16px;align-items:stretch}
.iix-cols-3{grid-template-columns:repeat(3,1fr)}
.iix-cols-5{grid-template-columns:repeat(5,1fr)}
.iix-lineal .iix-col{display:grid;grid-template-rows:1fr auto 1fr;justify-items:center;text-align:center;gap:6px}
.iix-celda{width:100%}
.iix-sup{display:flex;flex-direction:column;justify-content:flex-end}
.iix-inf{display:flex;flex-direction:column;justify-content:flex-start}
.iix-med{display:grid;place-items:center;padding:10px 0}
.iix-zigzag .iix-col-arriba .iix-med{transform:translateY(-13px)}
.iix-zigzag .iix-col-abajo .iix-med{transform:translateY(13px)}
.iix-uve .iix-col-arriba .iix-med{transform:translateY(38px)}

.iix-rombo4,.iix-rombo5{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 26px;text-align:center}
.iix-nodo{display:flex;flex-direction:column;align-items:center}
.iix-nodo ul{text-align:left}
.iix-n-arriba{grid-column:2;grid-row:1}
.iix-n-izq{grid-column:1;grid-row:2}
.iix-n-der{grid-column:3;grid-row:2}
.iix-n-abajo{grid-column:2;grid-row:3}
.iix-fila-abajo{grid-column:1/-1;grid-row:3;display:flex;justify-content:center;gap:clamp(40px,9vw,130px)}
.iix-fila-abajo .iix-n-par{max-width:280px}

.iix-nota{max-width:900px;margin:38px auto 0;text-align:center;
  font-size:12px;font-style:italic;line-height:1.55;opacity:.85}
.iix-cta{margin-top:26px;text-align:center}
.iix-boton{
  display:inline-block;background:var(--iix-cielo);color:var(--iix-papel);text-decoration:none;
  font-family:var(--iix-cuerpo);font-size:15px;font-weight:500;text-transform:uppercase;
  letter-spacing:.02em;padding:11px 26px;border-radius:2px;transition:background .18s ease;
}
.iix-boton:hover,.iix-boton:focus-visible{background:#1E86C4;color:var(--iix-papel)}
.iix-boton:focus-visible{outline:3px solid var(--iix-marino);outline-offset:3px}

@media (prefers-reduced-motion:reduce){.iix-servicios *{transition:none!important;animation:none!important}}

/* --- por debajo de 900 px: apilado provisional, pendiente el pase movil --- */
@media (max-width:900px){
  .iix-intro{grid-template-columns:1fr}
  .iix-rotulo{min-height:0;padding:34px 8%}
  .iix-banda-in{grid-template-columns:1fr;gap:32px}
  .iix-banda-cols{grid-template-columns:1fr}
  .iix-cols-3,.iix-cols-5{grid-template-columns:1fr}
  .iix-lineal .iix-col{grid-template-rows:auto auto auto;margin-bottom:26px}
  .iix-med{order:-1}
  .iix-zigzag .iix-med,.iix-uve .iix-med{transform:none}
  .iix-rombo4,.iix-rombo5{grid-template-columns:1fr}
  .iix-n-arriba,.iix-n-izq,.iix-n-der,.iix-n-abajo{grid-column:1;grid-row:auto}
  .iix-fila-abajo{grid-column:1;grid-row:auto;flex-direction:column;gap:30px;align-items:center}
  .iix-conectores{display:none}
  .iix-hero{height:210px}
}