/* Zentrix Logistics (/logistics/ y /en/logistics/): piezas propias de la página, sobre bloques.css.
   Prefijo lg-. Mismos colores, esquina cortada y movimiento que el sistema de bloques. */

/* Estado de cada módulo: en producción (lima) o en desarrollo (contorno) */
.lg-estados { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; position: relative; z-index: 1; }
.lg-estado { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; padding: 4px 10px 4px 8px; border-radius: 999px; line-height: 1.3; vertical-align: middle; }
.lg-estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.lg-estado--prod { background: var(--lima); color: var(--negro); }
.lg-estado--dev { background: transparent; color: var(--texto-2); box-shadow: inset 0 0 0 1.5px currentColor; }
.lg-estado--dev::before { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
.oscuro .lg-estado--dev, .bq-tesela--prota .lg-estado--dev { color: var(--texto-osc-2); }

/* Ruta de siete pasos: en escritorio ancho, una sola fila; en tableta, dos filas sin trazo común */
@media (min-width: 900px) and (max-width: 1199px) {
  .lg-ruta { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 48px; }
  .lg-ruta::before { display: none; }
}
@media (min-width: 1200px) {
  .lg-ruta { gap: 20px; }
  .lg-ruta .bq-ruta__n { font-size: 3rem; }
  .lg-ruta h3 { font-size: 1.0625rem; }
  .lg-ruta p { font-size: .9375rem; }
}

/* Héroe: el trazo que sale de los cubos (el almacén) y llega al pin (la puerta) */
.lg-heroe-ruta { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lg-heroe-ruta__t { fill: none; stroke: var(--negro); stroke-width: 6; stroke-linecap: square; stroke-dasharray: 14 12; }
.lg-heroe-ruta__pin path { fill: var(--negro); }
.lg-heroe-ruta__pin circle { fill: var(--lima); }
@media (prefers-reduced-motion: no-preference) {
  .lg-heroe-ruta__t { stroke-dasharray: 360; stroke-dashoffset: 360; animation: lg-dibujar 1.6s var(--facil, ease) 1.1s forwards; }
  .lg-heroe-ruta__pin { opacity: 0; animation: lg-pin .7s var(--rebote, ease) 2.5s forwards; }
}
@keyframes lg-dibujar { to { stroke-dashoffset: 0; } }
@keyframes lg-pin { from { opacity: 0; transform: translate(352px, 30px); } to { opacity: 1; transform: translate(352px, 64px); } }

/* Puesto de control dibujado en la tesela protagonista */
@media (prefers-reduced-motion: no-preference) {
  .lg-monitor__ruta { stroke-dasharray: 520; stroke-dashoffset: 520; animation: lg-dibujar 2.4s var(--facil, ease) .4s forwards; }
  .lg-monitor__moto { animation: lg-moto 6s linear 2.8s infinite; offset-rotate: 0deg; }
}
.lg-monitor__moto { offset-distance: 0%; }
@keyframes lg-moto { 0% { offset-distance: 0%; } 80%, 100% { offset-distance: 100%; } }

/* Integración: tres capas apiladas, unidas por un trazo */
.lg-capas { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; position: relative; }
.lg-capas::before { content: ""; position: absolute; left: 39px; top: 40px; bottom: 40px; width: 3px; background: linear-gradient(var(--azul), var(--lima)); }
.lg-capa { position: relative; display: grid; grid-template-columns: 80px 1fr; gap: 20px; align-items: start; padding: 24px;
  background: rgba(255, 255, 255, .05); clip-path: polygon(0 0, calc(100% - var(--bq-esquina, 28px)) 0, 100% var(--bq-esquina, 28px), 100% 100%, 0 100%); }
.lg-capa--logistica { background: var(--lima); color: var(--negro); }
.lg-capa--logistica .antetitulo { color: var(--negro); }
.lg-capa--logistica p { color: #2A313D !important; }
.lg-capa__marca { position: relative; z-index: 1; width: 80px; height: 80px; display: grid; place-items: center; }
.lg-capa__mono { width: 72px; height: 72px; border-radius: 18px; }
.lg-capa--logistica .lg-capa__mono { box-shadow: 0 0 0 3px var(--negro); }
.lg-capa__logo { width: 72px; height: 72px; padding: 14px; border-radius: 18px; background: var(--blanco); fill: var(--negro); }
.lg-capa h3 { font-size: 1.375rem; font-weight: 800; letter-spacing: -.03em; margin: 2px 0 6px; }
.lg-capa p { margin: 0; color: var(--texto-osc-2); }
.lg-capa__ir { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; font-weight: 600; color: var(--lima); text-decoration: none; }
.lg-capa__ir:hover .bq-flecha { transform: translateX(4px); }
@media (max-width: 479px) { .lg-capa { grid-template-columns: 1fr; } .lg-capas::before { display: none; } }

/* Sectores: tres columnas desde escritorio */
@media (min-width: 768px) and (max-width: 1099px) { .lg-sectores > :last-child { grid-column: 1 / -1; } }

/* Transparencia: en producción y en desarrollo */
.lg-tablero { display: grid; gap: 24px; }
@media (min-width: 900px) { .lg-tablero { grid-template-columns: 1.25fr 1fr; } }
.lg-panel { position: relative; padding: 32px 28px; background: var(--blanco);
  clip-path: polygon(0 0, calc(100% - var(--bq-esquina, 28px)) 0, 100% var(--bq-esquina, 28px), 100% 100%, 0 100%); }
.lg-panel--dev { background: var(--negro); color: var(--blanco); }
.lg-panel .bq-barra { margin-bottom: 20px; }
.lg-panel h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; margin: 0; }
.lg-panel h3 .lg-estado { font-size: .6875rem; }
.lg-panel h4 { font-size: 1rem; margin: 32px 0 6px; color: var(--blanco); }
.lg-panel--dev p { margin: 0; color: var(--texto-osc-2); }
.lg-lista-dev { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.lg-lista-dev li { position: relative; padding-left: 32px; color: var(--texto-osc-2); }
.lg-lista-dev li::before { content: ""; position: absolute; left: 0; top: .3em; width: 18px; height: 18px; border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--lima); background: radial-gradient(circle, var(--lima) 0 3px, transparent 3.5px); }

/* Tesela protagonista: en móvil y tableta el puesto de control va encima del texto, no detrás */
@media (max-width: 899px) {
  .bq-tesela--prota:has(.lg-monitor) { justify-content: flex-start; min-height: 0; }
  .bq-tesela--prota .bq-tesela__arte:has(.lg-monitor) { position: relative; inset: auto; width: 100%; height: auto; margin: 0 0 20px; }
  .bq-tesela--prota .lg-monitor { position: relative; right: auto; top: auto; width: 100%; max-width: 480px; transform: none; }
  .bq-tesela--prota:hover .lg-monitor { transform: translateY(-4px); }
}