/**
 * Archivo: izajes-diseno2.css
 * Tipo: hoja de estilos
 * Pagina relacionada: Vistas/izajes-categoria-diseno2.html
 * Script relacionado: Recursos/Scripts/izajes-categoria-diseno2-vue.js
 * Funcion general: define la identidad visual y componentes de la categoria de izajes en diseno 2.
 */
/* Seccion: Tokens de color para la familia visual del diseno 2. */
:root {
  --d2-blue: #1c2b7a;
  --d2-blue-strong: #10245f;
  --d2-black: #090f1f;
}

/* Seccion: Contenedor principal de la categoria diseno 2. */
.izajes-d2-page {
  padding-top: var(--header-height);
  background: #f4f6fb;
}

/* Seccion: Hero con video y overlay de contraste. */
.izajes-d2-hero {
  position: relative;
  min-height: calc(100vh - var(--header-height));
  overflow: hidden;
  background:
    linear-gradient(115deg, rgba(16, 36, 95, 0.64) 0%, rgba(28, 43, 122, 0.4) 48%, rgba(9, 15, 31, 0.66) 100%),
    linear-gradient(135deg, #243258 0%, #15203b 52%, #090f1f 100%);
}

.izajes-d2-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.izajes-d2-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(16, 36, 95, 0.64) 0%, rgba(28, 43, 122, 0.4) 48%, rgba(9, 15, 31, 0.66) 100%);
}

/* Seccion: Contenido textual y acciones del hero. */
.izajes-d2-content {
  position: relative;
  z-index: 2;
  padding-top: 56px;
  padding-bottom: 64px;
  color: #fff;
  min-height: calc(100vh - var(--header-height));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
}

.izajes-d2-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.izajes-d2-copy {
  align-self: flex-end;
  max-width: min(760px, 92%);
  text-align: right;
  margin-left: auto;
}

.izajes-d2-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 12px 18px;
}

.izajes-d2-back::before {
  content: "←";
}

.izajes-d2-content h1 {
  margin: 0 0 12px;
  font-size: clamp(40px, 5.1vw, 64px);
  color: #fff;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.34);
}

.izajes-d2-content p {
  margin: 0;
  max-width: 720px;
  font-size: clamp(18px, 1.9vw, 30px);
  line-height: 1.3;
  color: #f4f7ff;
  text-wrap: pretty;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  margin-left: auto;
}

.izajes-d2-scroll-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-top: 16px;
  margin-left: auto;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.44);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08));
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.izajes-d2-scroll-icon::before {
  content: "\2193";
  font-size: 20px;
  line-height: 1;
  color: #fff;
}

.izajes-d2-scroll-icon:hover {
  transform: translateY(2px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.11));
  border-color: rgba(255, 255, 255, 0.6);
}

/* Seccion: Bloques alternos de subcategorias. */
.izajes-d2-sections {
  padding: 76px 0 92px;
  scroll-margin-top: calc(var(--header-height) + 20px);
  position: relative;
  overflow: hidden;
}

.izajes-d2-sections::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 18%, rgba(38, 66, 146, 0.07), transparent 42%),
    radial-gradient(circle at 84% 72%, rgba(12, 24, 64, 0.06), transparent 46%);
}

/* Seccion: Tarjetas/bloques de categoria con media y CTA. */
.izajes-d2-block {
  display: grid;
  grid-template-columns: minmax(360px, 520px) 1fr;
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 34px;
  border: 1px solid #d8e1f3;
  box-shadow: 0 18px 36px rgba(7, 16, 43, 0.14);
  transition: transform 0.24s ease, box-shadow 0.24s ease;
  position: relative;
}

.izajes-d2-block:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 44px rgba(7, 16, 43, 0.2);
}

.izajes-d2-block.reverse {
  grid-template-columns: 1fr minmax(360px, 520px);
}

.izajes-d2-block.reverse .izajes-d2-media {
  order: 2;
}

.izajes-d2-block.reverse .izajes-d2-info {
  order: 1;
}

.izajes-d2-media {
  min-height: 380px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.izajes-d2-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 21, 58, 0.08), rgba(10, 21, 58, 0.15));
  opacity: 0.45;
}

.izajes-d2-media.no-image {
  background:
    radial-gradient(circle at 75% 22%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 42%),
    linear-gradient(125deg, #8995ad 0%, #76829d 52%, #5f6d8f 100%);
}

.izajes-d2-info {
  padding: 44px 42px;
  display: grid;
  align-content: center;
  gap: 16px;
}

.izajes-d2-info h2 {
  margin: 0;
  font-size: clamp(38px, 4.2vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.izajes-d2-copy h1 {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.izajes-d2-info p {
  margin: 0;
  line-height: 1.7;
  font-size: clamp(18px, 1.25vw, 22px);
  max-width: 760px;
}

.izajes-d2-cta {
  justify-self: start;
  text-decoration: none;
  border-radius: 999px;
  padding: 13px 22px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 20px rgba(8, 19, 50, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.izajes-d2-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(8, 19, 50, 0.32);
}

.izajes-d2-block.tone-white {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(249, 251, 255, 0.97));
}

.izajes-d2-block.tone-white h2 {
  color: var(--d2-blue);
}

.izajes-d2-block.tone-white p {
  color: #36415d;
}

.izajes-d2-block.tone-white .izajes-d2-cta {
  color: #fff;
  background: linear-gradient(135deg, #173785, #2d4aa8);
  border-color: rgba(23, 55, 133, 0.5);
}

.izajes-d2-block.tone-blue {
  background: linear-gradient(125deg, #0f2359 0%, #183a8e 55%, #1d46ac 100%);
}

.izajes-d2-block.tone-blue h2,
.izajes-d2-block.tone-blue p {
  color: #fff;
}

.izajes-d2-block.tone-blue .izajes-d2-cta {
  color: #0d255f;
  background: #ffffff;
  border-color: rgba(255, 255, 255, 0.5);
}

.izajes-d2-block.tone-black {
  background: linear-gradient(130deg, #060b1b 0%, #0a1532 56%, #112451 100%);
}

.izajes-d2-block.tone-black h2,
.izajes-d2-block.tone-black p {
  color: #fff;
}

.izajes-d2-block.tone-black .izajes-d2-cta {
  color: #fff;
  background: linear-gradient(135deg, #1f3a94, #2f52ba);
  border-color: rgba(57, 90, 191, 0.5);
}

/* Seccion: Breakpoint principal del diseno 2. */
@media (max-width: 980px) {
  .izajes-d2-hero {
    min-height: calc(86vh - var(--header-height));
  }

  .izajes-d2-content {
    padding-top: 24px;
    padding-bottom: 28px;
  }

  .izajes-d2-copy {
    align-self: flex-start;
    margin-left: 0;
    text-align: left;
    max-width: 100%;
  }

  .izajes-d2-content h1 {
    font-size: clamp(36px, 10vw, 54px);
  }

  .izajes-d2-content p {
    font-size: clamp(18px, 5vw, 24px);
    margin-left: 0;
  }

  .izajes-d2-scroll-icon {
    width: 46px;
    height: 46px;
    margin-left: 0;
  }

  .izajes-d2-block,
  .izajes-d2-block.reverse {
    grid-template-columns: 1fr;
  }

  .izajes-d2-block.reverse .izajes-d2-media,
  .izajes-d2-block.reverse .izajes-d2-info {
    order: initial;
  }

  .izajes-d2-media {
    min-height: 260px;
  }

  .izajes-d2-info {
    padding: 24px;
    gap: 10px;
  }

  .izajes-d2-info h2 {
    font-size: clamp(30px, 8vw, 42px);
  }

  .izajes-d2-info p {
    font-size: 17px;
    line-height: 1.55;
  }
}

/* Seccion: Constructor de estrobo simplificado del diseno 2. */
.sling-builder {
  padding: 0 0 90px;
}

.sling-builder-card {
  border: 1px solid #d7e1f3;
  border-radius: 22px;
  padding: 28px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(246, 250, 255, 0.97));
  box-shadow: 0 18px 34px rgba(8, 18, 45, 0.12);
}

.sling-builder-head h2 {
  margin: 0 0 8px;
  font-size: clamp(30px, 3.6vw, 46px);
  color: #182d78;
}

.sling-builder-head p {
  margin: 0 0 18px;
  font-size: 18px;
  color: #3a4666;
}

.sling-builder-layout {
  display: grid;
  grid-template-columns: minmax(420px, 1.2fr) 1fr;
  gap: 18px;
}

.sling-builder-preview-wrap {
  border: 1px solid #ccdaff;
  border-radius: 18px;
  background: #f6f9ff;
  padding: 12px;
}

#slingBuilderCanvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 50%, rgba(125, 154, 228, 0.12), rgba(125, 154, 228, 0.03) 56%),
    #ffffff;
}

.sling-builder-form {
  border: 1px solid #d5dff5;
  border-radius: 18px;
  background: #ffffff;
  padding: 16px;
  display: grid;
  gap: 14px;
}

.sling-field-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sling-field {
  display: grid;
  gap: 6px;
}

.sling-field span {
  font-weight: 700;
  color: #1b306f;
  font-size: 14px;
}

.sling-field input,
.sling-field select {
  height: 42px;
  border: 1px solid #c6d4f6;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 15px;
  color: #1e2d52;
  background: #f7faff;
}

.sling-accessories {
  margin: 0;
  border: 1px solid #c9d8f8;
  border-radius: 12px;
  padding: 10px 12px 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sling-accessories legend {
  font-weight: 700;
  color: #1b306f;
  padding: 0 6px;
}

.sling-accessories label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #2a3b67;
}

.sling-builder-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.sling-btn {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 11px 18px;
  font-weight: 700;
  cursor: pointer;
}

.sling-btn-primary {
  background: linear-gradient(135deg, #143a97, #1f52c4);
  color: #fff;
  box-shadow: 0 10px 18px rgba(18, 49, 130, 0.24);
}

.sling-btn-secondary {
  background: #fff;
  color: #193273;
  border-color: #c8d8ff;
}

body.dark .sling-builder-card {
  border-color: #2f4167;
  background: linear-gradient(160deg, rgba(18, 30, 57, 0.94), rgba(14, 23, 45, 0.96));
}

body.dark .sling-builder-head h2 {
  color: #e8efff;
}

body.dark .sling-builder-head p {
  color: #c6d4f8;
}

body.dark .sling-builder-preview-wrap,
body.dark .sling-builder-form {
  border-color: #365289;
  background: #101c37;
}

body.dark #slingBuilderCanvas {
  background:
    radial-gradient(circle at 50% 50%, rgba(125, 154, 228, 0.18), rgba(125, 154, 228, 0.04) 56%),
    #0e1931;
}

body.dark .sling-field span,
body.dark .sling-accessories legend {
  color: #d4e1ff;
}

body.dark .sling-field input,
body.dark .sling-field select {
  background: #0d1a34;
  color: #e2ebff;
  border-color: #375389;
}

body.dark .sling-accessories {
  border-color: #355285;
}

body.dark .sling-accessories label {
  color: #d2defa;
}

body.dark .sling-btn-secondary {
  background: #0f1b35;
  color: #e4edff;
  border-color: #3a568d;
}

@media (max-width: 1024px) {
  .sling-builder-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .sling-builder-card {
    padding: 16px;
    border-radius: 16px;
  }

  .sling-builder-head p {
    font-size: 16px;
  }

  .sling-field-grid {
    grid-template-columns: 1fr;
  }

  .sling-accessories {
    grid-template-columns: 1fr;
  }
}

/* Modo nocturno */
/* Seccion: Variante completa del diseno 2 en modo oscuro. */
body.dark .izajes-d2-page {
  background: #070c18;
}

body.dark .izajes-d2-overlay {
  background: linear-gradient(115deg, rgba(3, 8, 22, 0.78) 0%, rgba(9, 24, 64, 0.58) 48%, rgba(2, 7, 20, 0.82) 100%);
}

body.dark .izajes-d2-back {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.32);
  color: #f2f6ff;
}

body.dark .izajes-d2-scroll-icon {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
  border-color: rgba(255, 255, 255, 0.36);
}

body.dark .izajes-d2-scroll-icon::before {
  color: #fff;
}

body.dark .izajes-d2-sections {
  background: #070c18;
}

body.dark .izajes-d2-sections::before {
  background:
    radial-gradient(circle at 18% 14%, rgba(65, 103, 212, 0.12), transparent 45%),
    radial-gradient(circle at 82% 78%, rgba(26, 43, 98, 0.16), transparent 48%);
}

body.dark .izajes-d2-block {
  border-color: #27334f;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.38);
}

body.dark .izajes-d2-block.tone-white {
  background: #111a2d;
}

body.dark .izajes-d2-block.tone-white h2 {
  color: #d6e2ff;
}

body.dark .izajes-d2-block.tone-white p {
  color: #c0cce7;
}

body.dark .izajes-d2-block.tone-white .izajes-d2-cta {
  background: linear-gradient(135deg, #2646b3, #3a5ed2);
  color: #ffffff;
}

body.dark .izajes-d2-block.tone-blue {
  background: linear-gradient(125deg, #0b1a44 0%, #123172 56%, #1d4398 100%);
}

body.dark .izajes-d2-block.tone-black {
  background: linear-gradient(130deg, #050913 0%, #0a1430 56%, #132a5a 100%);
}

/* Seccion: Armonizacion visual de diseno 2 para menor ruido y mejor densidad. */
.izajes-d2-sections {
  padding-top: 62px;
  padding-bottom: 72px;
}

.izajes-d2-block {
  border-radius: var(--radius-xl, 24px);
  box-shadow: var(--shadow-card, 0 12px 28px rgba(16, 24, 40, 0.12));
}

.izajes-d2-block:hover {
  box-shadow: var(--shadow-card-hover, 0 18px 34px rgba(16, 24, 40, 0.16));
}

.izajes-d2-block.tone-white {
  background: #ffffff;
}

.izajes-d2-block.tone-blue {
  background: linear-gradient(140deg, #112d73 0%, #1a428f 60%, #2754a8 100%);
}

.izajes-d2-block.tone-black {
  background: linear-gradient(145deg, #0a1227 0%, #101f42 60%, #18315f 100%);
}

.izajes-d2-info {
  padding: 34px;
  gap: 12px;
}

.izajes-d2-cta,
.sling-btn {
  min-height: var(--btn-height, 44px);
  padding-left: var(--btn-px, 18px);
  padding-right: var(--btn-px, 18px);
  border-radius: var(--radius-md, 14px);
}

.sling-builder-card {
  border-radius: var(--radius-xl, 24px);
  box-shadow: var(--shadow-card, 0 12px 28px rgba(16, 24, 40, 0.12));
}

/* Seccion: Refinado minimal del diseno 2 de izajes. */
.izajes-d2-overlay {
  background: linear-gradient(115deg, rgba(15, 28, 70, 0.56) 0%, rgba(23, 45, 110, 0.34) 48%, rgba(10, 18, 38, 0.58) 100%);
}

.izajes-d2-content h1 {
  font-size: clamp(36px, 4.4vw, 56px);
}

.izajes-d2-content p {
  font-size: clamp(17px, 1.5vw, 24px);
  line-height: 1.38;
}

.izajes-d2-media {
  min-height: 340px;
}

.izajes-d2-info h2 {
  font-size: clamp(30px, 3.3vw, 46px);
}

.izajes-d2-info p {
  font-size: clamp(16px, 1.05vw, 19px);
  line-height: 1.6;
}

.izajes-d2-cta {
  background: #1f4ec4;
  border-color: rgba(31, 78, 196, 0.36);
  box-shadow: 0 8px 18px rgba(18, 49, 130, 0.2);
}

.sling-builder-card {
  background: #ffffff;
}

.sling-builder-head h2 {
  font-size: clamp(28px, 3vw, 40px);
}

.sling-builder-head p {
  font-size: 17px;
}

body.dark .sling-builder-card {
  background: #111d39;
}

/* Seccion: Ajustes multi-pantalla de izajes diseno 2. */
@media (min-width: 768px) and (max-width: 1024px) {
  .izajes-d2-content {
    padding-top: 34px;
    padding-bottom: 38px;
  }

  .izajes-d2-block {
    grid-template-columns: minmax(280px, 360px) 1fr;
  }

  .izajes-d2-info {
    padding: 24px;
  }

  .sling-builder-layout {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1025px) and (max-width: 1366px) {
  .izajes-d2-block {
    grid-template-columns: minmax(320px, 460px) 1fr;
  }

  .izajes-d2-info h2 {
    font-size: clamp(28px, 3vw, 40px);
  }

  .sling-builder-layout {
    grid-template-columns: minmax(380px, 1fr) minmax(300px, 0.9fr);
  }
}

@media (min-width: 1600px) {
  .izajes-d2-content {
    padding-top: 62px;
    padding-bottom: 72px;
  }

  .izajes-d2-block {
    grid-template-columns: minmax(420px, 560px) 1fr;
  }

  .izajes-d2-info {
    padding: 42px;
  }

  .sling-builder-layout {
    grid-template-columns: minmax(520px, 1.25fr) minmax(360px, 0.9fr);
  }
}

@media (max-height: 760px) and (min-width: 901px) {
  .izajes-d2-hero {
    min-height: calc(90vh - var(--header-height));
  }

  .izajes-d2-content h1 {
    font-size: clamp(32px, 3.6vw, 48px);
  }
}












/* Override final: dark mode industrial unificado. */
body.dark .izajes-d2-page {
  background: linear-gradient(180deg, #17191c 0%, #121416 100%);
}
body.dark .izajes-d2-overlay,
body.dark .izajes-d2-sections::before {
  background: linear-gradient(180deg, rgba(20,22,24,0.08), rgba(20,22,24,0.24));
}
body.dark .izajes-d2-block,
body.dark .sling-builder-card,
body.dark .sling-builder-preview-wrap,
body.dark .sling-builder-form,
body.dark .sling-accessories {
  background: linear-gradient(180deg, #24272b 0%, #1c1f23 100%);
  border-color: rgba(155, 166, 178, 0.18);
  box-shadow: 0 18px 38px rgba(0,0,0,0.22);
}
body.dark .izajes-d2-block.tone-white,
body.dark .izajes-d2-block.tone-blue,
body.dark .izajes-d2-block.tone-black,
body.dark .sling-builder-head h2,
body.dark .sling-builder-head p,
body.dark .sling-field span,
body.dark .sling-accessories legend,
body.dark .sling-accessories label {
  color: #e7e0d2;
}
body.dark .sling-field input,
body.dark .sling-field select,
body.dark .sling-btn-secondary {
  background: #2a2e33;
  border-color: rgba(155, 166, 178, 0.18);
  color: #ece6d8;
}

/* Override final: dark mode en negro/grafito, sin acentos azules. */
body.dark {
  --dark-ink: #0f1012;
  --dark-panel: #1a1c1f;
  --dark-panel-2: #23262a;
  --dark-border: rgba(180, 186, 194, 0.16);
  --dark-text: #ece6db;
  --dark-muted: #c5bfb3;
  --dark-accent: #7d848d;
}

body.dark .site-header,
body.dark .site-header.scrolled,
body.dark .nav-dropdown-menu,
body.dark .site-header.scrolled .nav-dropdown-menu,
body.dark .mobile-nav,
body.dark .site-header.scrolled .mobile-nav,
body.dark .site-footer,
body.dark .product-detail-card,
body.dark .product-meta-group,
body.dark .product-detail-copy.product-detail-copy-top,
body.dark #detalleTablaWrap,
body.dark .catalogo-head,
body.dark .catalog-card,
body.dark .catalog-modal-dialog,
body.dark .contact-form,
body.dark .contact-side,
body.dark .timeline-step,
body.dark .timeline-panel,
body.dark .projects-collage-shell,
body.dark .project-modal-card,
body.dark .service-box,
body.dark .service-subtopic,
body.dark .izajes-d2-block,
body.dark .sling-builder-card,
body.dark .sling-builder-preview-wrap,
body.dark .sling-builder-form,
body.dark .sling-accessories,
body.dark .d2-detail-card,
body.dark .d2-detail-extra,
body.dark .d2-tech-summary,
body.dark .d2-rigging-modes,
body.dark .d2-capacity-table-wrap,
body.dark .d2-builder,
body.dark .d2-builder-preview,
body.dark .d2-builder-form,
body.dark .d2-builder-extended,
body.dark .d2-simple-quote {
  background: linear-gradient(180deg, var(--dark-panel-2) 0%, var(--dark-panel) 100%) !important;
  border-color: var(--dark-border) !important;
}

body.dark .main-nav a,
body.dark .nav-dropdown-toggle,
body.dark .menu-toggle,
body.dark .theme-toggle,
body.dark .site-footer a,
body.dark .site-footer p,
body.dark .site-footer h3,
body.dark .site-footer h4,
body.dark .site-footer .footer-toggle,
body.dark .site-footer .material-symbols-outlined,
body.dark .catalogo-head h1,
body.dark .catalogo-head p,
body.dark .catalog-card-head h3,
body.dark .catalog-card-head p,
body.dark .catalogo-page-readout,
body.dark .catalogo-link,
body.dark .catalog-modal-head h2,
body.dark .catalog-modal-head p,
body.dark .catalogo-picker label,
body.dark .contact-side h2,
body.dark .contact-side p,
body.dark .contact-chip,
body.dark .field span,
body.dark .optional-hint,
body.dark .submit-note,
body.dark .timeline-head h2,
body.dark .timeline-panel h3,
body.dark .projects-head h2,
body.dark .project-modal-card h3,
body.dark .timeline-projects-panel .projects-head h3,
body.dark .timeline-head p,
body.dark .timeline-panel p,
body.dark .projects-head p,
body.dark .project-modal-card p,
body.dark .projects-pill,
body.dark .services-eyebrow,
body.dark .services-head h2,
body.dark .services-intro,
body.dark .service-box h3,
body.dark .service-box p,
body.dark .cables-board-head h2,
body.dark .cables-board-head p,
body.dark .cables-status,
body.dark .product-detail-content h2,
body.dark .product-detail-copy.product-detail-copy-top p,
body.dark .product-tag-value,
body.dark .product-meta-group-title,
body.dark .d2-tech-summary h3,
body.dark .d2-rigging-modes h3,
body.dark .d2-tech-chip-label,
body.dark .d2-tech-chip-value,
body.dark .d2-tech-paragraph,
body.dark .d2-rigging-subtitle,
body.dark .d2-rigging-content h4,
body.dark .d2-rigging-content p,
body.dark .d2-builder h3,
body.dark .d2-builder-subtitle,
body.dark .d2-builder-extended h4,
body.dark .d2-builder-extended p,
body.dark #d2ModelName,
body.dark #d2ModelMeasure,
body.dark .d2-simple-quote h3,
body.dark .d2-simple-quote-subtitle,
body.dark .d2-simple-quote-form label span {
  color: var(--dark-text) !important;
}

body.dark .product-tag,
body.dark .cables-filter-btn,
body.dark .service-quote-btn,
body.dark .service-subtoggle,
body.dark .d2-rigging-tab,
body.dark .d2-capacity-figure-tab,
body.dark .d2-model-btn,
body.dark .catalogo-picker,
body.dark .catalog-card-preview,
body.dark .catalog-card-loading,
body.dark .field input,
body.dark .field select,
body.dark .field textarea,
body.dark .suggestion-btn,
body.dark .submit-btn,
body.dark .contact-chip,
body.dark .sling-field input,
body.dark .sling-field select,
body.dark .sling-btn-secondary,
body.dark .d2-builder-fields input,
body.dark .d2-builder-fields select,
body.dark .d2-builder-extra-fields input,
body.dark .d2-builder-extra-fields select,
body.dark .d2-builder-extra-fields textarea,
body.dark .d2-builder-usage textarea,
body.dark .d2-builder-usage input,
body.dark .d2-simple-quote-form input,
body.dark .d2-simple-quote-form textarea,
body.dark .product-detail-action-secondary {
  background: #2a2d31 !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}

body.dark .cables-filter-btn.is-active,
body.dark .service-quote-btn:hover,
body.dark .d2-rigging-tab.is-active,
body.dark .d2-capacity-figure-tab.is-active,
body.dark .d2-model-btn.is-active,
body.dark .product-detail-action-primary,
body.dark .submit-btn {
  background: linear-gradient(180deg, #4a4f56 0%, #34383e 100%) !important;
  border-color: rgba(211, 216, 223, 0.16) !important;
  color: #f4efe6 !important;
  box-shadow: 0 12px 24px rgba(0,0,0,0.18) !important;
}

body.dark.cables-page #detalle,
body.dark .contact-page,
body.dark .about-page,
body.dark .about-section,
body.dark .services-pillar-section,
body.dark .izajes-d2-page,
body.dark .d2-detail-page,
body.dark.catalogo-page,
body.dark .product-page,
body.dark .product-section,
body.dark .experience,
body.dark .product-strip,
body.dark .product-card {
  background: linear-gradient(180deg, #151719 0%, #101113 100%) !important;
}

body.dark.cables-page .cables-board,
body.dark .product-detail-card,
body.dark #detalleTablaWrap,
body.dark .d2-capacity-table-wrap {
  box-shadow: 0 18px 34px rgba(0,0,0,0.22) !important;
}

body.dark.cables-page #cablesProducts .product-card-tile,
body.dark .product-card-tile,
body.dark .catalog-card,
body.dark .counter-card,
body.dark .safety-card {
  background: linear-gradient(180deg, #25282d 0%, #1b1e22 100%) !important;
  border-color: var(--dark-border) !important;
  box-shadow: 0 18px 32px rgba(0,0,0,0.22) !important;
}

body.dark .product-detail-table thead th,
body.dark .d2-capacity-table thead th,
body.dark .measure-table th {
  background: #26292e !important;
  color: var(--dark-text) !important;
  border-color: rgba(201, 208, 216, 0.18) !important;
}

body.dark .product-detail-table tbody td,
body.dark .d2-capacity-table tbody td,
body.dark .measure-table td {
  background: #1c1f23 !important;
  color: var(--dark-text) !important;
  border-color: rgba(201, 208, 216, 0.10) !important;
}

/* Override final absoluto: izajes diseno 2 en blanco y negro puro. */
body.dark .izajes-d2-page,
body.dark .izajes-d2-overlay,
body.dark .izajes-d2-sections,
body.dark .izajes-d2-sections::before {
  background: linear-gradient(180deg, #141414 0%, #0d0d0d 100%) !important;
}

body.dark .izajes-d2-block,
body.dark .sling-builder-card,
body.dark .sling-builder-preview-wrap,
body.dark .sling-builder-form,
body.dark .sling-accessories,
body.dark #slingBuilderCanvas {
  background: linear-gradient(180deg, #222222 0%, #171717 100%) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22) !important;
}

body.dark .izajes-d2-block h2,
body.dark .izajes-d2-block p,
body.dark .sling-builder-head h2,
body.dark .sling-builder-head p,
body.dark .sling-field span,
body.dark .sling-accessories legend,
body.dark .sling-accessories label {
  color: #f3f3f3 !important;
}

body.dark .sling-field input,
body.dark .sling-field select,
body.dark .sling-btn-secondary {
  background: #2a2a2a !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #f4f4f4 !important;
}

/* Override final absoluto 2: diseno 2 totalmente monocromo. */
body.dark .izajes-d2-page,
body.dark .izajes-d2-overlay,
body.dark .izajes-d2-sections,
body.dark .izajes-d2-sections::before,
body.dark .izajes-d2-page::before,
body.dark .izajes-d2-page::after {
  background: #0a0a0a !important;
  background-image: none !important;
}

body.dark .izajes-d2-block,
body.dark .izajes-d2-block.tone-white,
body.dark .izajes-d2-block.tone-blue,
body.dark .izajes-d2-block.tone-black,
body.dark .sling-builder-card,
body.dark .sling-builder-preview-wrap,
body.dark .sling-builder-form,
body.dark .sling-accessories,
body.dark #slingBuilderCanvas {
  background: linear-gradient(180deg, #1a1a1a 0%, #111111 100%) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: none !important;
}

body.dark .izajes-d2-block h2,
body.dark .izajes-d2-block p,
body.dark .izajes-d2-cta,
body.dark .sling-builder-head h2,
body.dark .sling-builder-head p,
body.dark .sling-field span,
body.dark .sling-accessories legend,
body.dark .sling-accessories label {
  color: #f3f3f3 !important;
}

body.dark .sling-field input,
body.dark .sling-field select,
body.dark .sling-btn-secondary,
body.dark .izajes-d2-cta,
body.dark .izajes-d2-back {
  background: #1b1b1b !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: none !important;
}

body.dark .sling-field input:focus,
body.dark .sling-field select:focus,
body.dark .sling-btn-secondary:hover,
body.dark .izajes-d2-cta:hover,
body.dark .izajes-d2-back:hover {
  background: #262626 !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
}

body.dark .izajes-d2-overlay {
  background: linear-gradient(115deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.34) 48%, rgba(0, 0, 0, 0.62) 100%) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

body.dark .izajes-d2-sections {
  background: rgba(8, 8, 8, 0.82) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.dark .izajes-d2-block,
body.dark .sling-builder-card,
body.dark .sling-builder-preview-wrap,
body.dark .sling-builder-form,
body.dark .sling-accessories {
  background: rgba(18, 18, 18, 0.74) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Remate final: categoria diseno 2 en monocromo con blur */
body.dark .izajes-d2-page,
body.dark .izajes-d2-sections,
body.dark .izajes-d2-sections::before {
  background: #0a0a0a !important;
  background-image: none !important;
}

body.dark .izajes-d2-overlay {
  background: linear-gradient(115deg, rgba(0, 0, 0, 0.56) 0%, rgba(0, 0, 0, 0.28) 48%, rgba(0, 0, 0, 0.6) 100%) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

body.dark .izajes-d2-block,
body.dark .izajes-d2-block.tone-white,
body.dark .izajes-d2-block.tone-blue,
body.dark .izajes-d2-block.tone-black,
body.dark .sling-builder-card,
body.dark .sling-builder-preview-wrap,
body.dark .sling-builder-form,
body.dark .sling-accessories {
  background: rgba(18, 18, 18, 0.72) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}