/* Fondo industrial moderno (todo el sitio) — según ABSA_Especificacion_Fondo_Industrial_Moderno.pdf.
   Paleta: base #2B2B2C · reflejo #59595A · sombra #1C1C1E · acento #F26C0F.
   Todo es CSS/SVG (sin imágenes pesadas). Capas, de arriba hacia abajo:
   1. línea de energía naranja en el corte diagonal del extremo derecho
   2. placas diagonales superpuestas (luz en el borde, sombra interna)
   3. acero cepillado muy sutil (ruido SVG estirado en horizontal)
   4. base grafito con reflejo satinado (degradado 135°) */
body.metal-bg {
  --metal-brushed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.003 0.85' numOctaves='3' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* Vetas más marcadas (se mezclan con "overlay": casi no se ven en lo oscuro y destacan en la franja de reflejo). */
  --metal-streaks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0018 0.95' numOctaves='4' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.15 -.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  background-color: #0b0b0c;
}
/* El metal vive en una capa fija propia (compuesta por la GPU): con background-attachment:fixed el navegador lo repintaba en cada cuadro del scroll. */
body.metal-bg .site-frame::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; will-change: transform; transform: translateZ(0);
  background-image:
    /* juntas finas y claras entre placas */
    linear-gradient(112deg, transparent 0 29.7%, #ffffff66 29.7% 29.85%, transparent 29.85% 74.4%, #ffffff59 74.4% 74.55%, transparent 74.55%),
    /* sombra interna a cada lado de la franja central: da volumen a las placas */
    linear-gradient(112deg, #00000099 0%, #00000040 28%, #00000040 72%, #00000099 100%),
    /* vetas de acero cepillado */
    var(--metal-streaks),
    var(--metal-brushed),
    /* franja de reflejo satinado, ancha y suave, un poco a la derecha del centro */
    linear-gradient(112deg, transparent 0 38%, #ffffff08 44%, #ffffff1a 50%, #ffffff2a 53%, #ffffff18 57%, #ffffff07 63%, transparent 70%),
    /* base grafito casi negra con leves cambios de tono entre placas */
    linear-gradient(112deg, #09090a 0%, #101011 30%, #141415 31%, #0d0d0e 60%, #0b0b0c 74%, #080809 100%);
  background-size: 100% 100%;
  background-blend-mode: normal, normal, overlay, normal, normal, normal;
}

/* Líneas de energía naranja en los extremos (izquierdo y derecho), con resplandor. */
body.metal-bg::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    /* izquierda */
    linear-gradient(112deg, transparent 0 7.2%, #ff9a3c 7.2% 7.32%, transparent 7.32%),
    linear-gradient(112deg, transparent 0 6.5%, #f26c0f55 7.1%, transparent 8.6%),
    linear-gradient(112deg, transparent 0 14.2%, #ffb067 14.2% 14.3%, transparent 14.3%),
    linear-gradient(112deg, transparent 0 13.6%, #f26c0f3d 14.1%, transparent 15.2%),
    /* derecha */
    linear-gradient(112deg, transparent 0 90.3%, #ff9a3c 90.3% 90.45%, transparent 90.45%),
    linear-gradient(112deg, transparent 0 89.4%, #f26c0f55 90.2%, transparent 91.8%),
    linear-gradient(112deg, transparent 0 96.6%, #ffb067 96.6% 96.74%, transparent 96.74%),
    linear-gradient(112deg, transparent 0 95.8%, #f26c0f3d 96.5%, transparent 98.2%);
  filter: drop-shadow(0 0 5px #ff7a1acc); will-change: transform; transform: translateZ(0);
}
/* Luz sobre el metal. Con mouse es un elemento propio (.metal-light, creado por cart.js) que se mueve solo con transform:
   cambiar variables en <body> obligaba a recalcular el estilo de toda la página en cada movimiento del cursor.
   Sin mouse (táctil) queda fija como pseudo-elemento. */
body.metal-bg::after, .metal-light {
  content: ""; position: fixed; left: 0; top: 0; z-index: -1; pointer-events: none; width: 1400px; height: 1400px; margin: -700px 0 0 -700px; border-radius: 50%;
  background: radial-gradient(circle closest-side, #ffffff1c, #ffffff0a 50%, transparent 78%);
  transform: translate3d(50vw, 25vh, 0); will-change: transform; contain: strict;
}
body.metal-bg.has-metal-light::after { display: none; }
/* Las secciones de la portada tenían fondo sólido propio: se liberan para que se vea el metal. */
body.metal-bg .site-frame, body.metal-bg .absa-home { background: transparent; }
/* Secciones sin remaches decorativos en las esquinas. */
body.metal-bg .absa-rubros, body.metal-bg .absa-about, body.metal-bg .absa-contact, body.metal-bg .absa-benefits { position: relative; }
body.metal-bg .absa-rubros::before, body.metal-bg .absa-about::before, body.metal-bg .absa-contact::before {
  content: none;
}
body.metal-bg .absa-contact { border-top-color: #ffffff1f; }
/* Header metalizado: mismo acero cepillado, un tono más oscuro que el lienzo para que el menú destaque,
   con un corte diagonal de luz y un filo naranja abajo. */
body.metal-bg .site-header {
  background-color: #0e0e0f;
  background-image:
    linear-gradient(115deg, transparent 0 14%, #ffffff14 14% 14.15%, #0000003d 14.15% 34%, transparent 52%),
    linear-gradient(115deg, transparent 0 66%, #ffffff1a 66% 66.2%, #00000047 66.2% 100%),
    var(--metal-brushed),
    linear-gradient(90deg, #0c0c0d 0%, #19191a 28%, #262627 46%, #141415 68%, #0b0b0c 100%);
  background-size: 100% 100%;
  border-bottom: 1px solid #f26c0fb3;
  box-shadow: 0 1px 8px #f26c0f55, 0 8px 22px #0008;
}
/* Filo naranja bajo el banner, igual que el del header. */
body.metal-bg .absa-hero { position: relative; border-bottom: 1px solid #f26c0fb3; box-shadow: 0 1px 8px #f26c0f55, 0 8px 22px #0008; }
/* Móvil: el fondo es la imagen vertical de referencia (assets/images/fondo-metal-movil.webp, ~130 KB),
   fija detrás del contenido con un velo oscuro leve para que el texto se lea. Sin remaches ni halo. */
@media (max-width: 700px) {
  body.metal-bg { background-image: none; background-color: #0b0b0c; }
  body.metal-bg .site-frame::before { display: none; }
  body.metal-bg::before {
    display: block; filter: none;
    background: linear-gradient(#0000004d, #0000004d), url("images/fondo-metal-movil.webp") center top / cover no-repeat;
  }
  body.metal-bg::after, .metal-light, body.metal-bg .absa-rubros::before, body.metal-bg .absa-about::before, body.metal-bg .absa-contact::before { display: none; }
  body.metal-bg .site-header { background-image: var(--metal-brushed), linear-gradient(90deg, #0c0c0d, #1c1c1d 50%, #0b0b0c); background-size: 100% 100%; }
}