/* ===== Página de sector: PROYECTOS INDUSTRIALES (industrial.html) =====
   Se apoya en page-sector.css (hero a sangre, .sector-challenge, CTA +
   formulario) y aquí van solo los bloques propios.
   Orden: hero → ¿todas las áreas avanzan igual? (navy + chips) → implementarlo
   es sencillo (azul) → todo lo que necesitas (6 tarjetas) → de la planeación a
   la ejecución (azul + diagrama) → detecta dónde actuar → documentación
   organizada (navy) → CTA. */

/* Capturas de la app: van sin dispositivo CSS, solo con esquinas y sombra. */
.indus-shot {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 26px 54px rgba(6, 16, 32, 0.28);
}
/* Variante para las capturas que YA traen su tarjeta redondeada y su sombra
   dibujadas con transparencia (la de Documentación): un `border-radius` las
   recortaría en falso y la sombra se duplicaría. Solo se refuerza con un
   drop-shadow, que sigue la silueta del PNG. */
.indus-shot--suelta {
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 22px 44px rgba(6, 16, 32, 0.34));
}

/* ============ 2 · ¿TODAS LAS ÁREAS AVANZAN IGUAL? (navy) ============ */
.indus-areas {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  color: var(--paper);
  background: linear-gradient(100deg, #0A1F44 0%, #0C2248 55%, #0D1C30 100%);
}
/* Cuadrícula tenue, como en el resto de las bandas navy */
.indus-areas::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(250, 248, 243, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250, 248, 243, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}
.indus-areas__inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: center;
}
.indus-areas__title {
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin: 0 0 24px;
  max-width: 18ch;
}
.indus-areas__title em,
.indus-areas__closing em {
  font-style: italic;
  font-weight: 500;
  color: var(--orange-light);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.indus-areas__text p {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.75;
  color: rgba(250, 248, 243, 0.82);
  margin: 0;
  max-width: 42ch;
}
.indus-areas__closing {
  margin-top: 30px !important;
  padding-top: 26px;
  border-top: 1px solid rgba(250, 248, 243, 0.24);
  color: var(--paper) !important;
  font-weight: 600;
}

/* --- Foto con los chips de cada área encima --- */
.indus-areas__media { position: relative; }
.indus-areas__ph {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 52px rgba(4, 14, 44, 0.42);
}
.indus-areas__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Velo para que los chips se lean sobre cualquier zona de la foto */
.indus-areas__ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(10, 31, 68, 0.42) 0%, rgba(10, 31, 68, 0.16) 50%, rgba(10, 31, 68, 0.34) 100%);
}
.indus-chips { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; }
.indus-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 15px;
  border-radius: 12px;
  /* Vidrio oscuro: la foto se transparenta y el texto claro se lee siempre */
  background: rgba(13, 28, 48, 0.62);
  border: 1px solid rgba(250, 248, 243, 0.20);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow: 0 16px 36px rgba(6, 16, 32, 0.34);
  white-space: nowrap;
}
/* En escalera, como el mockup: 3 a la izquierda y 2 a la derecha */
.indus-chip--1 { top: 6%;  left: -8%; }
.indus-chip--2 { top: 34%; left: -12%; }
.indus-chip--3 { top: 62%; left: -6%; }
.indus-chip--4 { top: 14%; right: -6%; }
.indus-chip--5 { top: 72%; right: -8%; }
.indus-chip--wide { min-width: 168px; white-space: normal; }
.indus-chip__ic {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(217, 119, 6, 0.20);
  color: var(--orange-light);
  flex: 0 0 auto;
}
.indus-chip__ic svg { width: 15px; height: 15px; }
.indus-chip__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.indus-chip__body b {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--paper);
}
.indus-chip__body small {
  font-family: var(--sans);
  font-size: 11px;
  color: rgba(250, 248, 243, 0.68);
}
/* Chip de Ejecución: título + porcentaje y barra de avance */
.indus-chip__row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.indus-chip__pct {
  font-family: var(--sans);
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  color: var(--orange-light);
}
.indus-chip__bar {
  display: block;
  margin-top: 8px;
  height: 4px;
  border-radius: 99px;
  background: rgba(250, 248, 243, 0.20);
  overflow: hidden;
}
.indus-chip__bar i { display: block; height: 100%; border-radius: 99px; background: var(--orange); }

/* ============ 3 · IMPLEMENTARLO ES SENCILLO (azul de marca) ============ */
.indus-easy {
  position: relative;
  overflow: hidden;
  padding: 92px 0;
  color: var(--paper);
  /* Mismo azul que "¿Por qué Teckio?" del index */
  background:
    radial-gradient(42% 46% at 12% 18%, rgba(150, 190, 240, 0.28), transparent 70%),
    radial-gradient(40% 44% at 90% 82%, rgba(0, 28, 90, 0.45), transparent 70%),
    radial-gradient(28% 34% at 62% 8%, rgba(217, 119, 6, 0.16), transparent 70%),
    linear-gradient(150deg, var(--azul-teckio) 0%, #003795 55%, #0045AE 100%);
}
.indus-easy::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(250, 248, 243, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250, 248, 243, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}
.indus-easy__inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1.22fr 0.78fr;
  /* 80px: la etiqueta de Fechas asoma un 8% por la derecha de la captura y con
     52px de gap quedaba pegada al título. */
  gap: 80px;
  align-items: center;
}
.indus-easy__media { position: relative; }
/* Halo claro detrás de la captura, como en la referencia */
.indus-easy__media .indus-shot {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.16),
    0 26px 60px rgba(4, 14, 44, 0.42),
    0 0 70px rgba(180, 210, 255, 0.20);
}
.indus-easy__title {
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin: 0 0 18px;
}
.indus-easy__title em,
.indus-easy__note em {
  font-style: italic;
  font-weight: 500;
  color: var(--orange-light);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.indus-easy__lead {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--paper);
  margin: 0;
  max-width: 30ch;
}
/* Nota en tono menor, con una línea naranja arriba (como la referencia) */
.indus-easy__note {
  margin: 26px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(217, 119, 6, 0.75);
  max-width: 34ch;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(250, 248, 243, 0.68);
}
/* --- Etiquetas sobre la captura, cada una con su guía punteada ---
   Como en la referencia: icono + título en versalitas y una línea debajo, en
   una tarjeta naranja translúcida, unida por un punteado a un punto de la
   captura. */
.indus-tags { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; pointer-events: none; }
.indus-tag {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 230px;
  padding: 12px 16px 13px;
  border-radius: 14px;
  /* Naranja translúcido: sobre el azul da el tono tostado de la referencia y
     deja ver la captura por detrás */
  background: rgba(217, 119, 6, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  box-shadow: 0 16px 34px rgba(6, 16, 32, 0.34);
}
.indus-tag__ic { color: var(--paper); flex: 0 0 auto; margin-top: 1px; }
.indus-tag__ic svg { width: 17px; height: 17px; display: block; }
.indus-tag__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.indus-tag b {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--paper);
}
.indus-tag small {
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
}
/* Posición de cada etiqueta (dos asoman por fuera de la captura) */
.indus-tag--1 { top: 0;      right: -8%; }
.indus-tag--2 { top: 48%;    left: 26%; }
.indus-tag--3 { bottom: -6%; left: -9%; }

/* --- La guía: punteado + punto sobre la captura ---
   El `leader` es un punto de anclaje sin tamaño; su `::before` dibuja la línea
   (rotada desde ese punto) y su `::after`, el círculo del otro extremo. Las
   coordenadas del punto van a mano por etiqueta: con `calc()` trigonométrico
   saldrían solas, pero `sin()`/`cos()` son muy nuevos para darlos por hechos. */
.indus-tag__leader { position: absolute; width: 0; height: 0; }
.indus-tag__leader::before {
  content: "";
  position: absolute;
  width: var(--largo, 40px);
  height: 0;
  border-top: 2px dotted rgba(245, 158, 11, 0.9);
  transform-origin: 0 50%;
  transform: rotate(var(--giro, 0deg));
}
.indus-tag__leader::after {
  content: "";
  position: absolute;
  left: var(--punto-x, 0);
  top: var(--punto-y, 0);
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.26);
}
/* 1 · Fechas: del borde izquierdo de la etiqueta, bajando a la izquierda */
.indus-tag--1 .indus-tag__leader { top: 64%; left: 0; }
.indus-tag--1 .indus-tag__leader::before { --largo: 38px; --giro: 160deg; }
.indus-tag--1 .indus-tag__leader::after { --punto-x: -36px; --punto-y: 13px; }
/* 2 · Seguimiento: del borde derecho, subiendo a la derecha */
.indus-tag--2 .indus-tag__leader { top: 18%; left: 100%; }
.indus-tag--2 .indus-tag__leader::before { --largo: 62px; --giro: -38deg; }
.indus-tag--2 .indus-tag__leader::after { --punto-x: 49px; --punto-y: -38px; }
/* 3 · Actividades: recta hacia arriba desde el borde superior */
.indus-tag--3 .indus-tag__leader { top: 0; left: 32%; }
.indus-tag--3 .indus-tag__leader::before { --largo: 30px; --giro: -90deg; }
.indus-tag--3 .indus-tag__leader::after { --punto-x: 0; --punto-y: -30px; }

/* ============ 4 · TODO LO QUE NECESITAS (6 tarjetas de icono) ============ */
.indus-control { padding: 96px 0 100px; }
.indus-control__inner { max-width: 1120px; margin: 0 auto; padding: 0 40px; }
.indus-control__title {
  font-family: var(--serif);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--navy);
  margin: 0 auto 56px;
  max-width: 22ch;
}
.indus-control__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--orange);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.indus-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px 40px;
}
/* Sin caja: icono, título y descripción sueltos sobre el fondo claro, como el
   mockup, y todo centrado en su columna. La jerarquía la da el icono naranja. */
.icard { text-align: center; }
.icard__ic {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  /* `margin auto` centra el chip; `place-items` centra el trazo dentro de él */
  margin: 0 auto 16px;
  border-radius: 11px;
  background: rgba(217, 119, 6, 0.10);
  border: 1px solid rgba(217, 119, 6, 0.26);
  color: var(--orange);
}
.icard__ic svg { width: 21px; height: 21px; }
.icard__title {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
}
.icard__desc {
  margin: 0 auto;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-soft);
  max-width: 26ch;
}

/* ============ 5 · DE LA PLANEACIÓN A LA EJECUCIÓN (azul + diagrama) ============ */
.indus-flow {
  position: relative;
  overflow: hidden;
  padding: 92px 0 96px;
  color: var(--paper);
  background:
    radial-gradient(42% 46% at 12% 18%, rgba(150, 190, 240, 0.26), transparent 70%),
    radial-gradient(40% 44% at 90% 82%, rgba(0, 28, 90, 0.45), transparent 70%),
    linear-gradient(150deg, var(--azul-teckio) 0%, #003795 55%, #0045AE 100%);
}
.indus-flow::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(250, 248, 243, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250, 248, 243, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}
.indus-flow__inner {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
}
.indus-flow__title {
  font-family: var(--serif);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin: 0 0 16px;
}
.indus-flow__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--orange-light);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.indus-flow__lead {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: rgba(250, 248, 243, 0.82);
  margin: 0 auto;
  max-width: 62ch;
}
.indus-flow__diagram { margin-top: 52px; }
/* --- Las dos filas de etapas ---
   Flex con `space-between` en vez de una cuadrícula de 3: las tarjetas se
   quedan en su ancho natural (la primera pegada a la izquierda, la última a la
   derecha) y la flecha se estira en el hueco, como en la referencia. */
.indus-flow__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fnode {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 20px 12px 15px;
  border-radius: 12px;
  /* Tarjeta clara sobre el azul, como la referencia */
  background: rgba(250, 248, 243, 0.92);
  box-shadow: 0 14px 32px rgba(4, 14, 44, 0.26);
}
.fnode__ic { color: var(--orange); flex: 0 0 auto; }
.fnode__ic svg { width: 20px; height: 20px; display: block; }
.fnode__txt { display: flex; flex-direction: column; gap: 3px; }
.fnode__num {
  font-family: 'JetBrains Mono', monospace;
  font-style: normal;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1;
  color: rgba(20, 42, 71, 0.42);
}
.fnode__label {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--text-soft);
}
/* --- Flecha horizontal entre etapas --- */
.farrow {
  position: relative;
  flex: 1 1 auto;
  /* Tope para que no se vuelva una raya infinita en pantallas anchas; el resto
     del hueco lo reparte el `space-between` de la fila. */
  max-width: 170px;
  height: 1.5px;
  margin: 0 30px;
  background: rgba(255, 255, 255, 0.85);
}
.farrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -1px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  border-left: 7px solid rgba(255, 255, 255, 0.85);
}
/* --- Bajadas a la barra central: solo en las etapas de los extremos, con su
   puntita, como en la referencia (↓ arriba, ↑ abajo) --- */
.indus-flow__row .fnode:first-child::before,
.indus-flow__row .fnode:last-child::before {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -0.75px;
  width: 0;
  height: 20px;
  border-left: 1.5px solid rgba(255, 255, 255, 0.85);
}
.indus-flow__row .fnode:first-child::after,
.indus-flow__row .fnode:last-child::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
/* Fila de arriba: la línea baja y la punta mira hacia la barra */
.indus-flow__row--arriba .fnode:first-child::before,
.indus-flow__row--arriba .fnode:last-child::before { top: calc(100% + 8px); }
.indus-flow__row--arriba .fnode:first-child::after,
.indus-flow__row--arriba .fnode:last-child::after {
  top: calc(100% + 28px);
  border-top: 6px solid rgba(255, 255, 255, 0.85);
}
/* Fila de abajo: al revés */
.indus-flow__row--abajo .fnode:first-child::before,
.indus-flow__row--abajo .fnode:last-child::before { bottom: calc(100% + 8px); }
.indus-flow__row--abajo .fnode:first-child::after,
.indus-flow__row--abajo .fnode:last-child::after {
  bottom: calc(100% + 28px);
  border-bottom: 6px solid rgba(255, 255, 255, 0.85);
}
/* --- Barra central con la marca --- */
.indus-flow__hub {
  position: relative;
  margin: 42px 0;
  padding: 30px 30px 32px;
  border-radius: 16px;
  /* Azul grisáceo claro de la referencia */
  background: rgba(198, 212, 233, 0.90);
}
.indus-flow__hub-tags {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 0;
}
.indus-flow__hub-tags li {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(20, 42, 71, 0.62);
}
/* Punto naranja como separador entre etiquetas */
.indus-flow__hub-tags li + li::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 18px;
  border-radius: 50%;
  background: var(--orange);
  vertical-align: 1px;
}
.indus-flow__hub-brand { display: inline-flex; align-items: center; gap: 10px; }
.indus-flow__hub-brand img { width: 30px; height: auto; }
.indus-flow__hub-brand b {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--azul-teckio);
}

/* ============ 6 · DETECTA DÓNDE ACTUAR ============ */
.indus-detect__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 56px;
  align-items: center;
}
.indus-detect__title { text-align: left; margin-bottom: 20px; max-width: 20ch; }
/* `.sector-challenge__title` no define el énfasis: se pinta aquí */
.indus-detect__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--orange);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.indus-detect__text p {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-soft);
  margin: 0;
  max-width: 40ch;
}
.indus-detect__closing {
  margin-top: 28px !important;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-style: italic;
  color: var(--navy) !important;
}
.indus-detect__media .indus-shot { box-shadow: 0 26px 54px rgba(20, 42, 71, 0.22); }

/* ============ 7 · DOCUMENTACIÓN ORGANIZADA (navy) ============ */
.indus-docs {
  position: relative;
  overflow: hidden;
  padding: 96px 0 104px;
  color: var(--paper);
  background: linear-gradient(100deg, #0A1F44 0%, #0C2248 55%, #0D1C30 100%);
}
.indus-docs::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(250, 248, 243, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250, 248, 243, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}
.indus-docs__inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  /* La captura de Documentación es 2.75:1: necesita más ancho que las demás
     para no quedarse como una franja en medio de la sección. */
  grid-template-columns: 0.76fr 1.24fr;
  gap: 56px;
  align-items: center;
}
.indus-docs__title {
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin: 0 0 20px;
}
.indus-docs__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--orange-light);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.indus-docs__text p {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.75;
  color: rgba(250, 248, 243, 0.82);
  margin: 0;
  max-width: 40ch;
}
.indus-docs__checks { list-style: none; margin: 28px 0 0; padding: 0; }
.indus-docs__checks li {
  position: relative;
  padding-left: 28px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(250, 248, 243, 0.92);
}
.indus-docs__checks li + li { margin-top: 12px; }
/* Check verde en círculo, igual que en supervisión */
.indus-docs__checks li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0.05em;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--green);
  color: var(--green);
  font-size: 9px;
  font-weight: 700;
}
/* --- Tarjetas de versión sobre la captura --- */
.indus-docs__media { position: relative; }
.vcard {
  position: absolute;
  width: 178px;
  padding: 12px 14px 14px;
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 20px 44px rgba(4, 14, 44, 0.44);
}
/* La captura es ancha y baja (1252 × 488 → ~2.6:1), así que en porcentajes hay
   poco alto que repartir: las tarjetas se separan mucho para no encimarse, una
   asomando por arriba y otra por abajo. El desplazamiento a la derecha se queda
   dentro del gap de 56px de la columna para no pisar el texto. */
.vcard--old { top: -14%; right: -4%; }
.vcard--new { top: 52%; right: -8%; }
.vcard__rev {
  display: block;
  margin-bottom: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-soft);
}
.vcard__file {
  display: block;
  margin-bottom: 8px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
}
.vcard__state {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(20, 42, 71, 0.08);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-soft);
}
/* La vigente en verde: es el estado que importa */
.vcard__state--ok { background: rgba(22, 163, 74, 0.16); color: #15803D; }
.vcard--new .vcard__rev { color: var(--azul-teckio); }

/* ============ ALTO MÍNIMO DE SECCIÓN ============
   Varias secciones se quedaban entre 500 y 660px de alto y la página se sentía
   entrecortada. Con `min-height: 720px` y centrado vertical el aire de más se
   reparte arriba y abajo, y las imágenes crecen un poco para llenarlo.
   OJO con el `width: 100%` de los `__inner`: al volverse ítems de un flex, sus
   `margin: 0 auto` harían que el ancho pasara a fit-content, y las fotos que
   sacan su alto de `aspect-ratio` se colapsarían. Con el ancho explícito el
   margen automático no tiene nada que absorber y todo se queda en su sitio. */
.indus-areas,
.indus-easy,
.indus-control,
.indus-flow,
.indus-detect,
.indus-docs {
  min-height: 720px;
  display: flex;
  align-items: center;
}
.indus-areas__inner,
.indus-easy__inner,
.indus-control__inner,
.indus-flow__inner,
.indus-detect__inner,
.indus-docs__inner { width: 100%; }

/* En móvil el contenido apilado ya pasa de 720px, así que el mínimo sobra */
@media (max-width: 1100px) {
  .indus-areas,
  .indus-easy,
  .indus-control,
  .indus-flow,
  .indus-detect,
  .indus-docs { min-height: 0; }
}

/* ============================ RESPONSIVE ============================ */
/* Corte principal en 1100px, el mismo ancho en el que el nav pasa a
   hamburguesa: así toda la página cambia de registro de golpe. */
@media (max-width: 1100px) {
  /* --- Hero: trato vertical, como en las demás páginas de sector --- */
  .sector-hero--photo { min-height: 0; padding: 264px 0 80px; }
  .sector-hero--photo .sector-hero__inner { padding: 0 24px; }
  .sector-hero--photo .sector-hero__copy { max-width: 620px; }
  .sector-hero--photo .sector-hero__subtitle { max-width: 46ch; }
  .sector-hero__bg img { object-position: 72% center; }
  .sector-hero__bg::after {
    background: linear-gradient(180deg, rgba(12, 26, 46, 0.92) 0%, rgba(12, 26, 46, 0.86) 50%, rgba(12, 26, 46, 0.56) 100%);
  }

  .indus-areas__inner,
  .indus-easy__inner,
  .indus-detect__inner,
  .indus-docs__inner {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 0 24px;
  }
  .indus-areas__title,
  .indus-detect__title { max-width: none; }

  /* §2 · Los chips se quedan SOBRE la foto, como en escritorio, pero metidos
     dentro de sus bordes: en una sola columna, colgando por fuera se saldrían
     del viewport. Van más compactos y el velo de la foto sube un poco para que
     se sigan leyendo. */
  .indus-areas__media { width: min(100%, 560px); margin: 0 auto; }
  .indus-areas__ph::after {
    background: linear-gradient(120deg, rgba(10, 31, 68, 0.52) 0%, rgba(10, 31, 68, 0.30) 50%, rgba(10, 31, 68, 0.46) 100%);
  }
  .indus-chip { padding: 9px 12px; gap: 9px; }
  .indus-chip__ic { width: 22px; height: 22px; border-radius: 7px; }
  .indus-chip__ic svg { width: 13px; height: 13px; }
  .indus-chip__body b { font-size: 12px; }
  .indus-chip__body small { font-size: 10.5px; }
  .indus-chip--wide { min-width: 150px; }
  .indus-chip--1 { top: 4%;  left: 3%;  right: auto; }
  .indus-chip--2 { top: 36%; left: 5%;  right: auto; }
  .indus-chip--3 { top: 68%; left: 3%;  right: auto; }
  .indus-chip--4 { top: 9%;  right: 3%; left: auto; }
  .indus-chip--5 { top: 72%; right: 3%; left: auto; }

  /* §3 · Primero el texto (título, subtítulo y nota) y después la captura con
     sus gráficos. En el HTML la captura va primero —así queda a la izquierda en
     escritorio—, así que aquí se manda al final con `order`. */
  .indus-easy__media { order: 2; width: min(100%, 620px); margin: 0 auto; }
  .indus-easy__text { width: min(100%, 560px); margin: 0 auto; }
  .indus-easy__lead,
  .indus-easy__note { max-width: none; }
  /* Las etiquetas ya no cuelgan por fuera: se meten dentro de la captura, y con
     ellas las guías, que se acortan para no salirse. */
  .indus-tag { max-width: 200px; padding: 10px 13px 11px; }
  .indus-tag--1 { top: 2%;    right: 2%; }
  .indus-tag--2 { top: 46%;   left: 20%; }
  .indus-tag--3 { bottom: 2%; left: 2%; }
  .indus-tag--2 .indus-tag__leader::before { --largo: 44px; }
  .indus-tag--2 .indus-tag__leader::after { --punto-x: 35px; --punto-y: -27px; }

  /* §4 · Dos columnas de tarjetas */
  .indus-control__inner { padding: 0 24px; }
  .indus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px; }

  /* §5 · En tablet el diagrama de escritorio SÍ cabe: las tarjetas son estrechas
     y lo único que estorbaba era el aire de las flechas. Se aprietan las
     tarjetas y se acorta la flecha; así las 3 etapas + 2 flechas entran hasta
     los ~640px, que es donde toma el relevo la línea de tiempo vertical. */
  .indus-flow__inner { padding: 0 24px; }
  .fnode { padding: 10px 15px 10px 12px; gap: 9px; }
  .fnode__ic svg { width: 18px; height: 18px; }
  .fnode__label { font-size: 11px; letter-spacing: 0.1em; }
  .farrow { max-width: 90px; margin: 0 16px; }
  .indus-flow__hub { padding: 26px 20px 28px; }
  .indus-flow__hub-tags li + li::before { margin: 0 12px; }

  /* §6 · La captura arriba */
  .indus-detect__media { order: -1; width: min(100%, 620px); margin: 0 auto; }
  .indus-detect__text p { max-width: none; }

  /* §7 · Las tarjetas de versión dejan de flotar y se acomodan bajo la captura */
  .indus-docs__media { width: min(100%, 620px); margin: 0 auto; }
  .indus-docs__text p { max-width: none; }
  .vcard { position: static; width: auto; }
  .indus-docs__media {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .indus-docs__media .indus-shot { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  /* §5 · El diagrama pasa a LÍNEA DE TIEMPO vertical.
     Apilado en una columna, las tarjetas se estiraban a todo el ancho con el
     contenido pegado a la izquierda —se leían como píldoras vacías— y encima se
     perdía la secuencia, porque las flechas horizontales no aplican. Ahora un
     punteado naranja baja por la izquierda, cada etapa se cuelga de él con un
     tramito, y la barra de Teckio va a todo el ancho en medio: es opaca y está
     por encima, así que la línea parece atravesarla. */
  .indus-flow__inner { padding: 0 24px; }
  .indus-flow__diagram { position: relative; margin-top: 40px; text-align: left; }
  /* Las etapas se centran como GRUPO, no una por una: la fila se encoge al
     ancho de su etapa más larga (`fit-content`) y se centra completa, así todos
     los iconos comparten el mismo eje y la línea no serpentea. */
  .indus-flow__row {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    width: fit-content;
    margin: 0 auto;
    padding-left: 38px;
  }
  /* La línea va en cada fila (no en el diagrama) porque ahora el eje depende de
     dónde quedó centrada la fila. Se estira hasta la barra para que se lea como
     una sola línea continua que la atraviesa. */
  .indus-flow__row::before {
    content: "";
    position: absolute;
    left: 16px;
    width: 0;
    border-left: 1.5px dotted rgba(245, 158, 11, 0.85);
  }
  .indus-flow__row--arriba::before { top: 6px;   bottom: -26px; }
  .indus-flow__row--abajo::before  { top: -26px; bottom: 6px; }
  .farrow { display: none; }
  /* La tarjeta clara desaparece: sobre el azul quedan el chip del icono y el
     rótulo, así que el rótulo y el número tienen que ir en claro. */
  .fnode {
    flex: 0 0 auto;
    padding: 0;
    gap: 13px;
    background: none;
    box-shadow: none;
  }
  .fnode__ic {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(250, 248, 243, 0.94);
    box-shadow: 0 8px 18px rgba(4, 14, 44, 0.30);
  }
  .fnode__txt { flex-direction: row; align-items: baseline; gap: 9px; }
  .fnode__num { color: rgba(250, 248, 243, 0.55); }
  .fnode__label { color: var(--paper); }
  /* Tramito punteado de la línea al icono. Los `:first-child`/`:last-child` van
     explícitos para pisar las bajadas a la barra del escritorio, que tienen esa
     misma especificidad. */
  .indus-flow__row .fnode::before,
  .indus-flow__row .fnode:first-child::before,
  .indus-flow__row .fnode:last-child::before {
    content: "";
    position: absolute;
    top: 50%;
    bottom: auto;
    left: -22px;
    margin-left: 0;
    width: 16px;
    height: 0;
    border-left: 0;
    border-top: 1.5px dotted rgba(245, 158, 11, 0.85);
  }
  .indus-flow__row .fnode:first-child::after,
  .indus-flow__row .fnode:last-child::after { display: none; }
  /* La barra se queda a todo el ancho y tapa los extremos de las dos líneas */
  .indus-flow__hub {
    position: relative;
    z-index: 1;
    margin: 26px 0;
    padding: 24px 20px 26px;
    text-align: center;
  }
  .indus-flow__hub-tags li + li::before { margin: 0 12px; }

  /* En teléfono el texto del hero baja un poco más: la foto es más alta */
  .sector-hero--photo { padding: 300px 0 84px; }
  .indus-areas,
  .indus-easy,
  .indus-flow,
  .indus-docs { padding: 72px 0; }
  .indus-control { padding: 72px 0 76px; }
  /* En teléfono los 5 chips encima de una foto de ~330px no se leen: bajan a
     lista, en una columna y con la foto sin velo extra. */
  .indus-chips {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 16px;
  }
  .indus-chip {
    position: static;
    top: auto; left: auto; right: auto;
    white-space: normal;
  }
  .indus-grid { grid-template-columns: 1fr; gap: 30px; }
  .indus-docs__media { grid-template-columns: 1fr; }
  /* §3 · Tres etiquetas de ~200px no caben sobre una captura de ~330px: se
     encimaban entre ellas y tapaban la programación. Bajan a lista debajo de la
     captura (mismo recurso que los chips de la §2) y las guías punteadas se
     ocultan, porque ya no apuntan a ningún punto de la imagen. */
  .indus-tags {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 16px;
  }
  .indus-tag {
    position: static;
    top: auto; bottom: auto; left: auto; right: auto;
    max-width: none;
    padding: 10px 13px;
  }
  .indus-tag__leader { display: none; }
}