/* Lodestar v2 · escena "patron" (.pt-): el embudo que se rompe.
   La escena no lleva caja, borde ni fondo: el canvas es transparente y el embudo flota sobre el cielo.
   Móvil: embudo pegado arriba (bajo la barra de navegación, que con su tira mide 112 px) y las averías
   pasan por debajo de una en una. Escritorio: averías a la izquierda, embudo pegado a la derecha.
   Sin JS (o si la escena falla antes de arrancar) no existe .pt-vivo: la lista se lee normal y el hueco
   de la escena no ocupa sitio. */

/* ---------- Escena ---------- */
#lp .patron { position: relative }
#lp .patron-escena { display: none }
#lp .patron.pt-vivo .patron-escena {
  display: block; position: sticky; z-index: 2; pointer-events: none;
  top: 112px; height: 40vh; height: clamp(240px, 40svh, 380px);
}
#lp .pt-canvas { position: absolute; inset: 0; width: 100%; height: 100% }

/* ---------- Las seis averías: número, título y una línea; sin recuadros ---------- */
#lp .patron-lista { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1 }
#lp .averia {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; align-items: start;
  padding: 20px 0; border-top: 1px solid var(--filo);
  transition: border-color .6s var(--ease);
}
#lp .averia:last-child { border-bottom: 1px solid var(--filo) }
#lp .averia .n {
  grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 6px; padding-top: 5px;
  font-family: var(--f-mono); font-size: 13px; line-height: 1; letter-spacing: .02em; color: var(--frio);
  transition: color .5s var(--ease);
}
/* La marca del impacto: un píxel de oro que se queda pegado al número */
#lp .averia .n::after {
  content: ""; width: 5px; height: 5px; background: var(--oro); opacity: 0; transform: scale(.3);
  transition: opacity .35s var(--ease), transform .55s var(--ease), box-shadow .5s var(--ease);
}
#lp .averia h3 { grid-column: 2; font-size: clamp(1.05rem, 1.5vw, 1.25rem) }
#lp .averia p { grid-column: 2; margin: 5px 0 0; color: var(--txt-2); font-size: 15px; line-height: 1.5 }
#lp .averia.pt-impactado { border-top-color: rgba(232, 180, 100, .32) }
#lp .averia.pt-impactado .n { color: var(--oro) }
#lp .averia.pt-impactado .n::after { opacity: 1; transform: none; box-shadow: 0 0 8px rgba(232, 180, 100, .75) }

/* ---------- Escritorio: dos columnas, el embudo pegado y centrado en su hueco ---------- */
@media (min-width: 900px) {
  #lp .patron.pt-vivo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(40px, 5vw, 72px); align-items: start }
  #lp .patron.pt-vivo .patron-escena {
    order: 2;
    top: calc(var(--nav-alto) + (100vh - var(--nav-alto)) * .1);
    height: calc((100vh - var(--nav-alto)) * .8);
  }
  /* aire bajo la lista: el embudo sigue entero y fijo durante el impacto del cuello y la fuga */
  #lp .patron.pt-vivo .patron-lista { order: 1; padding-bottom: 24vh }
  #lp .averia { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding: 38px 0 }
  #lp .averia p { margin-top: 8px }
}
/* Entre 900 y 999 px la barra todavía lleva la tira: 112 px */
@media (min-width: 900px) and (max-width: 999px) {
  #lp .patron.pt-vivo .patron-escena { top: calc(112px + (100vh - 112px) * .1); height: calc((100vh - 112px) * .8) }
}