/* ==========================================================================
   Héroe: plano técnico que se traza solo.
   Puro alambre. Sin rellenos ni degradados: la profundidad la da la densidad
   de línea, como en un plano de ingeniería.
   ========================================================================== */
:root{
  --pl-tinta:#C7D3DD;              /* trazo principal */
  --pl-fina:rgba(199,211,221,.42); /* construcción */
  --pl-papel:rgba(199,211,221,.055);
  --pl-papel-g:rgba(199,211,221,.10);
  --pl-marco:rgba(199,211,221,.30);
}
html[data-tema="claro"]{
  --pl-tinta:#3E4A57;
  --pl-fina:rgba(62,74,87,.40);
  --pl-papel:rgba(62,74,87,.055);
  --pl-papel-g:rgba(62,74,87,.11);
  --pl-marco:rgba(62,74,87,.32);
}

.hero-plano{position:relative;width:100%;max-width:560px;margin-inline:auto}
.pl{width:100%;height:auto;display:block;overflow:hidden}

/* Todo es trazo: nada se rellena */
.pl path,.pl circle,.pl ellipse,.pl line,.pl rect{fill:none}

/* Papel milimétrico */
.pl-papel line{stroke:var(--pl-papel);stroke-width:.5}
.pl-papel-g line{stroke:var(--pl-papel-g);stroke-width:.7}
.pl-marco rect,.pl-marco line{stroke:var(--pl-marco);stroke-width:.9}
.pl-eje line{stroke:var(--rojo);stroke-width:.8;opacity:.35;stroke-dasharray:14 4 3 4}

/* Piezas: trazo uniforme y delgado */
.pl-p path,.pl-p circle,.pl-p ellipse,.pl-p line{
  stroke:var(--pl-tinta);stroke-width:1.45;
  stroke-linecap:round;stroke-linejoin:round;
}
.pl-p .pl-fino{stroke:var(--pl-fina);stroke-width:.85}
.pl-p .pl-fondo{stroke:var(--pl-fina);stroke-width:.9;stroke-dasharray:3 3}

/* --- El trazado: las líneas se dibujan solas, en bucle --- */
@keyframes plotea{
  0%   {stroke-dashoffset:1}
  26%  {stroke-dashoffset:0}
  86%  {stroke-dashoffset:0}
  96%  {stroke-dashoffset:-1}
  100% {stroke-dashoffset:-1}
}
#plTrazo path,#plTrazo circle,#plTrazo ellipse,#plTrazo line,
#plCotas path{
  stroke-dasharray:1;
  animation:plotea 11s ease-in-out infinite;
}
/* Cada pieza entra un poco después que la anterior */
.pl-p{animation-delay:0s}
#plTrazo .pl-p path,#plTrazo .pl-p circle,#plTrazo .pl-p ellipse,#plTrazo .pl-p line{
  animation-delay:calc(var(--i) * .22s);
}
#plCotas path{animation-delay:2.4s}

/* Cotas */
.pl-cota path{stroke:var(--rojo);stroke-width:.9;opacity:.9}
.pl-cota text{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;
  fill:var(--rojo);stroke:none;opacity:.95;
}

/* Rótulo de plano */
.pl-rotulo rect,.pl-rotulo line{stroke:var(--pl-marco);stroke-width:.9}
.pl-rotulo text{font-family:var(--font-mono);font-size:8px;letter-spacing:.13em;fill:var(--pl-tinta);stroke:none}
.pl-rotulo .pl-rot-k{font-size:7px;fill:var(--pl-fina);letter-spacing:.18em}
.pl-rotulo .pl-rot-v{font-size:7.6px;fill:var(--pl-tinta);letter-spacing:.1em}

/* Señalar: la pieza pasa a tinta roja y el resto se atenúa */
.pl-p{transition:opacity .16s ease}
.pl.aisla .pl-p:not(.sel){opacity:.16}
.pl-p.sel path,.pl-p.sel circle,.pl-p.sel ellipse,.pl-p.sel line{
  stroke:var(--rojo);stroke-width:1.7;
}
.pl-p.sel .pl-fino,.pl-p.sel .pl-fondo{stroke:var(--rojo);opacity:.6}
.pl-p:focus{outline:none}

/* Cota emergente */
.pl-etiq{opacity:0;transition:opacity .15s ease;pointer-events:none}
.pl-etiq.on{opacity:1}
.pl-etiq line{stroke:var(--rojo);stroke-width:.9;stroke-dasharray:3 3}
.pl-etiq rect{fill:var(--carta);stroke:var(--rojo);stroke-width:1}
.pl-e-n{font-family:var(--font-body);font-size:12px;font-weight:700;fill:var(--texto);stroke:none}
.pl-e-p{font-family:var(--font-mono);font-size:11px;fill:var(--rojo);stroke:none}

/* Héroe en dos columnas */
.hero__cols{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.hero__cols > *{min-width:0}
@media (max-width:960px){
  .hero__cols{grid-template-columns:minmax(0,1fr);gap:26px}
  .hero-plano{max-width:460px}
}
.hero{overflow:hidden}

/* Sin animación para quien la desactiva: el plano ya trazado */
@media (prefers-reduced-motion:reduce){
  #plTrazo path,#plTrazo circle,#plTrazo ellipse,#plTrazo line,#plCotas path{
    animation:none;stroke-dasharray:none;
  }
}