/* Lodestar v2 · escena "funnel" (.fu-)
   Evergreen = órbita: seis estaciones en un anillo que la luz recorre sin parar.
   Lanzamiento = curva de atención sobre una línea de tiempo que una sola ola recorre.
   Las líneas, la luz y el calor van en canvas 2D; botones, frases y etiquetas en DOM. */

#lp .fu { display: grid; grid-template-rows: auto 1fr; padding: 14px 14px 10px; min-height: 420px }
@media (min-width: 760px) { #lp .fu { padding: 18px 22px 14px } }

/* ---------- Selector: Evergreen | Lanzamiento ---------- */
#lp .fu-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap }
#lp .fu-seg {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; width: max-content;
  padding: 3px; border: 1px solid var(--filo-2); border-radius: 999px;
  background: color-mix(in srgb, var(--noche) 55%, transparent);
}
#lp .fu-seg-luz {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px;
  background: color-mix(in srgb, var(--oro) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--oro) 50%, transparent);
  transition: transform .55s var(--ease);
}
#lp .fu.modo-la .fu-seg-luz { transform: translateX(100%) }
#lp .fu-btn {
  position: relative; z-index: 1; min-height: 44px; padding: 0 18px; border: 0; background: none; border-radius: 999px;
  font-size: 14px; font-weight: 400; letter-spacing: .01em; color: var(--txt-3); white-space: nowrap;
  transition: color .35s var(--ease);
}
#lp .fu-btn:hover { color: var(--txt-2) }
#lp .fu-btn[aria-pressed="true"] { color: var(--oro-2) }
#lp .fu-btn:focus-visible { outline-offset: -3px }
#lp .fu-modo { margin: 0; font-family: var(--f-mono); font-size: 12px; letter-spacing: .03em; color: var(--txt-3); display: none }
@media (min-width: 760px) { #lp .fu-modo { display: block } }

/* ---------- Lienzo ---------- */
#lp .fu-lienzo { position: relative; height: 336px; margin-top: 8px; overflow: hidden }
@media (min-width: 760px) { #lp .fu-lienzo { height: 392px; margin-top: 6px } }
#lp .fu-canvas { position: absolute; inset: 0; width: 100%; height: 100% }

/* Etiquetas de estación / fase: el JS las coloca con transform; cada una lleva su texto evergreen y su texto lanzamiento */
#lp .fu-etq { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform }
#lp .fu-etq > span {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font-size: 12px; line-height: 1.25; letter-spacing: .01em; color: var(--txt-3);
  transition: opacity .5s var(--ease), color .45s var(--ease);
}
@media (min-width: 760px) { #lp .fu-etq > span { font-size: 13px } }
#lp .fu-etq small { display: block; margin-top: 2px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .03em; color: var(--txt-3) }
#lp .fu-etq.fu-on > span { color: var(--txt) }
#lp .fu.modo-ev .fu-etq-la, #lp .fu.modo-la .fu-etq-ev { opacity: 0 }

/* Frases: una en el centro del anillo, otra en la esquina del lanzamiento. Se cruzan al cambiar. */
#lp .fu-centro { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; transition: opacity .55s var(--ease) }
#lp .fu-centro-ev { text-align: center; max-width: 150px }
#lp .fu-centro-la { max-width: 236px }
@media (min-width: 760px) { #lp .fu-centro-ev { max-width: 210px } #lp .fu-centro-la { max-width: 280px } }
#lp .fu-frase { margin: 0; font-family: var(--f-titulo); font-weight: 300; font-size: 16px; line-height: 1.22; letter-spacing: -.01em; color: var(--txt); text-wrap: balance }
@media (min-width: 760px) { #lp .fu-frase { font-size: 19px } }
#lp .fu-frase em { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: 1.14em; line-height: 1; color: var(--oro-2) }
#lp .fu-sub { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--txt-3); text-wrap: balance }
#lp .fu.modo-la .fu-centro-ev, #lp .fu.modo-ev .fu-centro-la { opacity: 0 }