/* ==========================================================================
   Líneas de producto: tarjeta con plano técnico.
   Se apoya en las variables y clases de plano.css; aquí solo va el encuadre
   de la tarjeta y el disparo del trazado al entrar en pantalla.
   ========================================================================== */

.lineas-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;
  margin-top:22px;
}

.linea-card{
  display:flex;flex-direction:column;
  background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-lg);
  overflow:hidden;text-decoration:none;color:inherit;
  transition:border-color .16s ease, transform .16s ease;
}
.linea-card:hover{border-color:var(--rojo);transform:translateY(-2px)}
.linea-card:focus-visible{outline:2px solid var(--rojo);outline-offset:2px}

/* Lienzo del plano: fondo propio, más oscuro que la tarjeta, como una mesa
   de dibujo embutida. */
.linea-card__plano{
  position:relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 60%),
    var(--carta-2);
  border-bottom:1px solid var(--linea);
  padding:8px 10px 4px;
}
html[data-tema="claro"] .linea-card__plano{
  background:linear-gradient(180deg, rgba(0,0,0,.015), transparent 60%), var(--carta-2);
}
.pl-linea{width:100%;height:auto;display:block}

/* Marca de agua con el nombre técnico, como el rótulo de un plano */
.linea-card__cod{
  position:absolute;right:12px;top:10px;
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--texto-3);opacity:.75;
}

.linea-card__txt{padding:18px 20px 20px}
.linea-card__txt h3{margin:8px 0 7px;font-size:1.06rem}
.linea-card__txt p{font-size:.88rem;color:var(--texto-3);line-height:1.5}
.linea-card__en{
  display:block;margin-top:9px;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.09em;
  color:var(--texto-3);opacity:.8;
}

/* --- Trazado: arranca cuando la tarjeta entra en pantalla ----------------- */
.pl-linea .pl-p path,.pl-linea .pl-p circle,.pl-linea .pl-p ellipse,
.pl-linea .pl-p line,.pl-linea .pl-cota path{
  stroke-dasharray:1;stroke-dashoffset:1;
}
.pl-linea.trazando .pl-p path,.pl-linea.trazando .pl-p circle,
.pl-linea.trazando .pl-p ellipse,.pl-linea.trazando .pl-p line{
  animation:plotea-una 1.5s ease-out forwards;
  animation-delay:calc(var(--i, 0) * .035s);
}
.pl-linea.trazando .pl-cota path{
  animation:plotea-una 1s ease-out forwards;animation-delay:1.1s;
}
/* Ya trazado, sin animación: para quien desactiva el movimiento */
.pl-linea.trazado .pl-p path,.pl-linea.trazado .pl-p circle,
.pl-linea.trazado .pl-p ellipse,.pl-linea.trazado .pl-p line,
.pl-linea.trazado .pl-cota path{stroke-dashoffset:0}

@keyframes plotea-una{
  from{stroke-dashoffset:1}
  to  {stroke-dashoffset:0}
}

@media (prefers-reduced-motion:reduce){
  .pl-linea .pl-p path,.pl-linea .pl-p circle,.pl-linea .pl-p ellipse,
  .pl-linea .pl-p line,.pl-linea .pl-cota path{
    stroke-dasharray:none;stroke-dashoffset:0;animation:none;
  }
  .linea-card:hover{transform:none}
}

@media (max-width:760px){
  .lineas-grid{grid-template-columns:minmax(0,1fr);gap:14px}
}

/* Aviso en las familias que se anuncian pero todavía no tienen piezas
   cargadas: la tarjeta lleva a contacto en vez de a un catálogo vacío. */
.linea-card__aviso{
  display:inline-block;margin-top:11px;
  padding:5px 10px;border-radius:100px;
  background:var(--rojo-tenue);border:1px solid var(--rojo);
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--rojo-claro);
}
html[data-tema="claro"] .linea-card__aviso{color:var(--rojo)}