/* ============================================================
   GRUPO COPRINCI — naves.css
   Componentes propios de /naves-industriales (carga DESPUÉS de landing.css):
   ensamblaje SVG al scroll, toggle Construcción/Mantenimiento, stepper
   "llave en mano", materiales con hover, mapa de cobertura.
   ============================================================ */

/* ---------- Ensamblaje SVG (scrollytelling) ---------- */
.nave {
  position: relative; background: var(--grad-hero); border-radius: var(--r-lg);
  padding: 1.2rem; box-shadow: var(--shadow-md); overflow: hidden;
}
.nave::before {            /* blueprint sutil */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 35%, transparent 80%);
  mask-image: radial-gradient(ellipse at 50% 45%, #000 35%, transparent 80%);
}
.nave__svg { position: relative; width: 100%; height: auto; display: block; }
.nave__tag { position: absolute; top: 1rem; left: 1rem; z-index: 2; font: 700 .8rem var(--font-display); color: #fff; background: rgba(16,52,97,.6); padding: .3rem .7rem; border-radius: var(--r-pill); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
/* las partes aparecen acumulativamente según la etapa activa */
/* gateado con .js -> sin JS la nave se ve completa (PE); con JS, se ensambla por etapa */
.js .nave-part { opacity: 0; transform: translateY(12px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.nave[data-stage="0"] [data-i="0"],
.nave[data-stage="1"] [data-i="0"], .nave[data-stage="1"] [data-i="1"],
.nave[data-stage="2"] [data-i="0"], .nave[data-stage="2"] [data-i="1"], .nave[data-stage="2"] [data-i="2"],
.nave[data-stage="3"] [data-i="0"], .nave[data-stage="3"] [data-i="1"], .nave[data-stage="3"] [data-i="2"], .nave[data-stage="3"] [data-i="3"],
.nave[data-stage="4"] [data-i="0"], .nave[data-stage="4"] [data-i="1"], .nave[data-stage="4"] [data-i="2"], .nave[data-stage="4"] [data-i="3"], .nave[data-stage="4"] [data-i="4"]
{ opacity: 1; transform: none; }
.nave-part .stroke { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.nave-part .accent { fill: none; stroke: var(--energia); stroke-width: 2.4; }
.nave-part .panel  { fill: rgba(47,134,255,.38); stroke: rgba(255,255,255,.5); stroke-width: 1; }
.nave-part .slab   { fill: rgba(255,255,255,.10); stroke: #fff; stroke-width: 2; }

/* (Toggle Construcción/Mantenimiento movido a landing.css como componente compartido.) */

/* (.tag-grid / .tag movidos a landing.css como componente compartido —los usan naves, cuadrillas y mantenimiento.) */

/* (El .stepper se movió a landing.css como componente compartido —lo usan naves y cuadrillas.) */

/* ---------- Materiales (cards con hover) ---------- */
.materials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.material { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: 1.4rem; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s; }
.material:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--azul); }
/* el ícono ahora es un badge hex de marca (.ibadge--hex); solo conserva el margen inferior
   y anula las medidas/fondo heredados de la regla base .material__ico */
.material__ico { width: 2.6rem; height: 2.9rem; background: var(--azul); margin-bottom: .8rem; }
.material h4 { color: var(--marino); margin-bottom: .25rem; }
.material p { color: var(--text-soft); font-size: .95rem; }
@media (max-width: 760px) { .materials { grid-template-columns: 1fr; } }

/* ---------- Cobertura (pines sobre fondo blueprint) ---------- */
.coverage { position: relative; }
/* El mapa de cobertura (.covmap / .covpin / .covzone + pulseDot) vive en styles.css
   porque lo usan naves Y la home. */

/* ---------- Placeholder de hero (mientras llega el set gpt-image-1) ---------- */
.ph-nave {
  background:
    radial-gradient(120% 90% at 70% 12%, rgba(255,255,255,.14), transparent 50%),
    linear-gradient(160deg, #2a3b4a 0%, #16232b 58%, #0a1a33 100%);
}
.ph-nave::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 70px),
              repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 70px);
  -webkit-mask-image: linear-gradient(180deg, transparent 30%, #000); mask-image: linear-gradient(180deg, transparent 30%, #000);
}

/* ---------- Sectores: tags con ícono Lucide en vez del hex genérico ---------- */
/* anula el ::before hexagonal de .tag (landing.css) cuando el tag lleva su propio ícono */
.tag--ico::before { content: none; }
.tag--ico .licon { color: var(--azul); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .nave-part { opacity: 1; transform: none; }
  .covpin--base { animation: none; }
}