/* Lodestar v2 · escena "porque" (.pq-): la pantalla que encienden las estrellas.
   Un monitor de línea fina se queda pegado (sticky) mientras bajas. Al llegar, la estrella del hero cae sobre la
   pantalla apagada y la enciende; cada uno de los otros tres puntos llega con otra estrella. Cuatro en total.
   El monitor y las diapositivas son HTML (el texto es el de las cuatro tarjetas, movidas dentro de la pantalla);
   las estrellas, el destello y las chispas van en un canvas 2D transparente que cubre el escenario.
   Sin JS (o si falla antes de arrancar) no existe .pq-vivo: las cuatro tarjetas se leen en su rejilla de siempre. */

/* El escenario mide lo que el monitor (sin aire alrededor) y se pega centrado en el hueco libre: el JS calcula su
   top. Detrás va .pq-pista, el recorrido de scroll de los cuatro puntos. */
#lp .porque.pq-vivo {
  --pq-top: 112px;                       /* barra de navegación con su tira (móvil y hasta 999 px) */
  --pq-paso: 42vh; --pq-paso: 42svh;     /* scroll que dura cada punto */
  display: block; position: relative;
}
@media (min-width: 1000px) { #lp .porque.pq-vivo { --pq-top: var(--nav-alto); --pq-paso: 52vh; --pq-paso: 52svh } }
#lp .pq-pista { height: calc(var(--pq-paso) * 3.7) }

#lp .pq-escenario { position: sticky; top: var(--pq-top); padding: 8px 0 }
/* El lienzo sale del contenedor hasta los bordes de la ventana y sube por encima: la estrella entra desde lejos */
#lp .pq-lienzo { position: absolute; top: -45vh; left: calc(50% - 50vw); width: 100vw; height: calc(100% + 45vh); pointer-events: none; z-index: 3 }

/* ---------- El monitor ---------- */
#lp .pq-monitor { position: relative; width: min(100%, 700px); margin: 0 auto; z-index: 1 }
/* La luz que se derrama alrededor del monitor al encenderse (opacidad desde el JS) */
#lp .pq-halo {
  position: absolute; left: -18%; right: -18%; top: -30%; bottom: -10%; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(232, 180, 100, .2), rgba(232, 180, 100, .06) 55%, transparent);
}
#lp .pq-marco {
  position: relative; padding: 6px; border: 1px solid var(--filo-2); border-radius: 14px;
  background: linear-gradient(180deg, var(--panel-2), var(--noche-2));
}
@media (min-width: 640px) { #lp .pq-marco { padding: 10px 10px 18px; border-radius: 16px } }
/* Filo dorado del marco: se enciende con cada estrella y se enfría (opacidad desde el JS) */
#lp .pq-filo { position: absolute; inset: -1px; border: 1px solid var(--oro); border-radius: inherit; opacity: 0; pointer-events: none }
/* Piloto de encendido */
#lp .pq-piloto { display: none }
@media (min-width: 640px) {
  #lp .pq-piloto {
    display: block; position: absolute; left: 50%; bottom: 6px; width: 5px; height: 5px; margin-left: -2px; border-radius: 50%;
    background: var(--frio-2); transition: background-color .6s var(--ease), box-shadow .6s var(--ease);
  }
  #lp .pq-monitor.encendido .pq-piloto { background: var(--oro); box-shadow: 0 0 8px rgba(232, 180, 100, .85) }
}

#lp .pq-pantalla {
  position: relative; overflow: hidden; border: 1px solid var(--filo); border-radius: 8px;
  background: #07080d; display: grid; grid-template-rows: auto 1fr;
}
/* Cristal: un reflejo diagonal muy tenue, encendida o no */
#lp .pq-pantalla::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: linear-gradient(118deg, rgba(255, 255, 255, .035) 0 22%, transparent 22.2% 100%);
}
/* Fondo de la pantalla encendida: calor arriba, donde cae la estrella */
#lp .pq-fondo {
  position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease); pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, rgba(232, 180, 100, .1), transparent 60%), linear-gradient(180deg, #0f0d0b, #0a0a0e);
}
#lp .pq-monitor.encendido .pq-fondo { opacity: 1 }
/* La luz de la estrella que baña la pantalla (opacidad desde el JS) */
#lp .pq-luz {
  position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(90% 75% at var(--lx, 50%) var(--ly, 32%), rgba(255, 236, 200, .62), rgba(247, 217, 162, .2) 42%, rgba(232, 180, 100, .05) 70%, transparent);
}

/* Barra de la pantalla */
#lp .pq-barra {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px; border-bottom: 1px solid var(--filo);
  font-family: var(--f-mono); font-size: 12px; color: var(--txt-3); letter-spacing: .02em;
  opacity: 0; transition: opacity .6s var(--ease);
}
@media (min-width: 640px) { #lp .pq-barra { padding: 10px 18px; font-size: 13px } }
#lp .pq-monitor.encendido .pq-barra { opacity: 1 }
#lp .pq-estrellas { display: flex; align-items: center; gap: 8px }
#lp .pq-estrellas svg { width: 11px; height: 11px; color: var(--frio-2); transition: color .5s var(--ease), filter .5s var(--ease) }
#lp .pq-estrellas svg.viva { color: var(--oro); filter: drop-shadow(0 0 4px rgba(232, 180, 100, .8)) }
#lp .pq-cuenta { min-width: 4.2em; text-align: right; color: var(--txt-2) }

/* Diapositivas: las cuatro en la misma celda, la pantalla mide lo que la más alta */
#lp .pq-diapos { position: relative; z-index: 1; display: grid; align-items: center }
#lp .pq-diapo {
  grid-area: 1 / 1; padding: 16px 16px 18px; opacity: 0; transform: translateY(12px);
  transition: opacity .45s var(--ease), transform .8s var(--ease); pointer-events: none;
}
#lp .pq-diapo.activa { opacity: 1; transform: none; transition-duration: .9s, 1s; pointer-events: auto }
@media (min-width: 640px) { #lp .pq-diapo { padding: 28px 36px 30px } }
#lp .pq-diapo .sub { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; font-size: 14px; color: var(--oro) }
#lp .pq-num { font-family: var(--f-serif); font-style: italic; font-size: 1.4rem; line-height: 1; color: var(--oro-2) }
#lp .pq-diapo h3 { font-size: clamp(1.2rem, 2.4vw, 1.75rem); line-height: 1.15; letter-spacing: -.02em }
#lp .pq-diapo p { margin: 8px 0 0; max-width: 56ch; color: var(--txt-2); font-size: 15px; line-height: 1.5 }
@media (min-width: 640px) {
  #lp .pq-num { font-size: 1.8rem }
  #lp .pq-diapo p { margin-top: 12px; font-size: 16px }
}
/* Escritorio: monitor más cuadrado (4:3, Luis 27/10), el texto un punto más grande para llenarlo. En móvil, ajustado al texto */
@media (min-width: 900px) {
  #lp .pq-monitor { width: min(100%, 600px) }
  #lp .pq-pantalla { aspect-ratio: 4 / 3 }
  #lp .pq-diapo { padding: 32px 44px 40px }
  #lp .pq-num { font-size: 2.2rem }
  #lp .pq-diapo .sub { margin-bottom: 12px }
  #lp .pq-diapo h3 { font-size: 2rem }
  #lp .pq-diapo p { margin-top: 16px; font-size: 17px; line-height: 1.6 }
  #lp .pq-pie { width: 30% }
}

/* Pie del monitor: cuello y base en línea fina */
#lp .pq-pie { display: block; width: 36%; max-width: 220px; height: auto; margin: -1px auto 0; overflow: visible }
#lp .pq-pie path { fill: none; stroke: var(--filo-2); stroke-width: 1; vector-effect: non-scaling-stroke }
#lp .pq-pie .pq-sombra { fill: rgba(232, 180, 100, .07); stroke: none; opacity: 0; transition: opacity 1s var(--ease) }
#lp .pq-monitor.encendido .pq-pie .pq-sombra { opacity: 1 }