/* =========================================================
   ESTILOS DIFERIDOS (todo lo que está bajo el primer pantallazo)
   Se carga de forma asíncrona desde index.php.
   Las variables y la base están en css/critico.css
   ========================================================= */

/* ---------- Secciones bajo el pliegue: render diferido ---------- */
.marcas,.banner,.franja,.pie{content-visibility:auto}
.marcas{contain-intrinsic-size:auto 120px}
.banner{contain-intrinsic-size:auto 33vw}
.franja{contain-intrinsic-size:auto 12vw}
.pie{contain-intrinsic-size:auto 32vw}

/* ---------- Marcas (carrusel infinito) ---------- */
.marcas{overflow:hidden;padding:clamp(18px,2.4vw,46px) 0;background:#fff}
.marcas__pista{display:flex;width:max-content;animation:marcas-desplazar 38s linear infinite}
.marcas:hover .marcas__pista{animation-play-state:paused}
.marcas__lista{display:flex;flex-shrink:0;align-items:center}
.marcas__lista li{display:flex;align-items:center;padding:0 clamp(22px,3.8vw,76px)}
.marcas__lista img{width:auto;height:clamp(26px,3.2vw,62px)}
@keyframes marcas-desplazar{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Banners de servicios ---------- */
.banner{position:relative;isolation:isolate;display:grid;place-items:center;min-height:clamp(260px,33vw,640px);overflow:hidden;background:#222;color:#fff}
.banner__img{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover}
.banner__caja{display:grid;justify-items:center;gap:clamp(10px,1.1vw,22px);width:min(88%,39vw);min-width:min(88%,300px);padding:clamp(14px,1.6vw,32px);background:rgba(0,0,0,.55);text-align:center}
.banner__titulo{font-weight:700;font-size:clamp(22px,3vw,58px);line-height:1.15;text-transform:uppercase;letter-spacing:.01em}
.banner .boton{font-size:clamp(12px,1.6vw,30px);padding:.55em 1.6em}

/* ---------- Franjas azules ---------- */
.franja{
  display:grid;place-items:center;
  min-height:clamp(84px,11.6vw,222px);
  padding:clamp(14px,2vw,40px) var(--margen);
  background-color:var(--azul);
  background-repeat:no-repeat;
  background-position:right center;
  background-size:cover;
  color:#fff;
}

/* Imagen individual de cada franja */
.franja--potencias{background-image:url("../imagenes/franja-azul-1.webp")}
.franja--silencio{background-image:url("../imagenes/franja-azul-2.webp")}

/* Contenido interno (esto no cambia) */
.franja__contenido{display:flex;align-items:center;gap:clamp(12px,1.6vw,32px)}
.franja__icono{flex:none;width:clamp(36px,4.6vw,88px);height:auto}
.franja__texto{text-align:center;line-height:1.15}
.franja__titulo{display:block;font-weight:700;font-size:clamp(17px,1.9vw,36px)}
.franja__detalle{display:block;font-weight:500;font-size:clamp(13px,1.5vw,28px)}

/* ---------- Pie de página ---------- */
.pie{padding:clamp(28px,3.4vw,66px) var(--margen);background:var(--azul);color:#fff}
.pie__rejilla{display:grid;grid-template-columns:1.05fr 1fr .85fr;gap:clamp(24px,3vw,60px);max-width:1920px;margin:0 auto}
.pie__logo{width:clamp(150px,17vw,330px);height:auto;margin-bottom:clamp(12px,1.6vw,30px)}
.pie__logo--udustria{width:clamp(110px,10.6vw,206px)}
.pie p,.pie li,.pie address{font-size:clamp(14px,1.2vw,24px);line-height:1.5;font-style:normal}
.pie strong{font-weight:700}
.pie a:hover{text-decoration:underline}
.pie__bloque+.pie__bloque{margin-top:clamp(14px,1.8vw,34px)}
.pie__contacto{display:grid;gap:clamp(6px,.8vw,14px);margin-top:clamp(8px,1vw,18px)}
.pie__contacto li{display:flex;align-items:flex-start;gap:.6em}
.pie__icono{flex:none;width:1.25em;height:1.25em;margin-top:.15em}
.pie__col--contacto{justify-self:center}

/* ---------- Responsive diferido ---------- */
@media (max-width:992px){
  .banner{min-height:clamp(280px,50vw,420px)}
  .banner__caja{width:min(88%,420px)}
  .banner__titulo{font-size:clamp(24px,5vw,34px)}
  .banner .boton{font-size:15px}
  .franja__titulo{font-size:clamp(18px,3vw,24px)}
  .franja__detalle{font-size:clamp(14px,2.4vw,18px)}
  .pie__rejilla{grid-template-columns:1fr 1fr}
  .pie__col--contacto{justify-self:start}
  .pie p,.pie li,.pie address{font-size:15px}
}
@media (max-width:576px){
  .marcas__lista img{height:30px}
  .marcas__lista li{padding:0 22px}
  .banner{min-height:300px}
  .franja{min-height:96px}
  .franja__contenido{gap:12px}
  .pie__rejilla{grid-template-columns:1fr}
  .pie__logo{width:190px}
  .pie__logo--udustria{width:130px}
}
@media (prefers-reduced-motion:reduce){
  .marcas__pista{animation:none}
  .marcas{overflow-x:auto}
}