/* Lodestar v2 · Resultados: deslizable de logros por sector, sin nombres de clientes.
   Sin JS: la pista se desliza sola con el dedo o la rueda; botones, barra y cuenta solo con JS. */

#lp .res-cab { margin-bottom: clamp(32px, 5vw, 56px) }
#lp .res-cab .cab { margin-bottom: 0 }
@media (min-width: 760px) {
  #lp .res-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px }
}

/* ---------- Controles ---------- */
#lp .res-ctrl { display: none; gap: 10px; flex: none }
@media (min-width: 760px) { #lp.js .res-ctrl { display: flex } }
#lp .res-btn {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--filo-2); background: rgba(9, 11, 17, .6); color: var(--txt);
  transition: border-color .35s var(--ease), color .35s var(--ease), opacity .35s var(--ease), transform .35s var(--ease);
}
#lp .res-btn svg { width: 16px; height: 16px }
#lp .res-btn:hover:not(:disabled) { border-color: var(--oro); color: var(--oro-2) }
#lp .res-btn:active:not(:disabled) { transform: scale(.96) }
#lp .res-btn:disabled { opacity: .3; cursor: default }

/* ---------- Pista ---------- */
#lp .res-pista {
  position: relative; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  margin-inline: calc(-1 * var(--gutter)); padding: 6px var(--gutter) 10px;
  scrollbar-width: none;
}
#lp .res-pista::-webkit-scrollbar { display: none }
#lp .res-pista:focus-visible { outline-offset: -2px }
/* En escritorio la pista sale hasta el borde derecho de la pantalla y se funde */
@media (min-width: 1000px) {
  #lp .res-pista {
    margin-right: calc((100% - 100vw) / 2);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 120px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 120px), transparent);
  }
  #lp.js .res-pista { cursor: grab }
  #lp .res-pista.arrastrando { cursor: grabbing; scroll-snap-type: none; user-select: none }
}
#lp .res-lista { display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; width: max-content }
#lp .res-lista::after { content: ""; flex: none; width: 1px } /* el último no se pega al borde */
@media (min-width: 1000px) { #lp .res-lista::after { width: 120px } }

/* ---------- Tarjeta ---------- */
#lp .res {
  --mx: 80%; --my: 0%;
  position: relative; flex: none; width: min(82vw, 340px);
  display: flex; flex-direction: column; padding: 24px 24px 22px; scroll-snap-align: start;
  border: 1px solid var(--filo); border-radius: var(--radio); overflow: hidden;
  background:
    radial-gradient(ellipse 90% 55% at 100% 0%, rgba(232, 180, 100, .09), transparent 65%),
    linear-gradient(180deg, rgba(255, 240, 215, .025), transparent 70%),
    var(--noche-2);
  transition: border-color .5s var(--ease), opacity .6s var(--ease), transform .8s var(--ease);
}
@media (min-width: 760px) { #lp .res { width: 360px; padding: 28px 28px 24px } }
#lp .res::before { /* luz que sigue al cursor */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle 260px at var(--mx) var(--my), rgba(247, 217, 162, .10), transparent 70%);
  transition: opacity .5s var(--ease);
}
#lp .res:hover { border-color: rgba(232, 180, 100, .38) }
#lp .res:hover::before { opacity: 1 }
#lp .res > * { position: relative }

#lp .res-sector { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0; font-size: 14px; color: var(--txt-2); line-height: 1.4 }
#lp .res-sector > span:first-child { display: inline-flex; align-items: center; gap: 9px }
#lp .res-sector > span:first-child::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--oro); box-shadow: 0 0 10px rgba(232, 180, 100, .8) }
#lp .res-tipo { font-size: 13px; color: var(--oro-2); padding: 4px 11px; border: 1px solid rgba(232, 180, 100, .28); border-radius: 999px; white-space: nowrap }

#lp .res-cifra {
  margin: 0; padding-top: clamp(40px, 6vw, 52px);
  font-family: var(--f-titulo); font-weight: 300; letter-spacing: -.035em; line-height: 1;
  font-size: clamp(2.3rem, 9.5vw, 2.8rem); color: var(--oro-2);
  text-shadow: 0 0 36px rgba(232, 180, 100, .32);
  white-space: nowrap;
}
#lp .res-cifra .u {
  font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: 0;
  font-size: .5em; color: var(--oro); margin-left: .22em; text-shadow: none;
}
#lp .res-que { margin: 12px 0 26px; font-size: 15px; color: var(--txt); line-height: 1.45 }
#lp .res-txt { margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--filo); font-size: 14px; color: var(--txt-2); line-height: 1.55 }

/* Con JS: las que no se ven enteras quedan en penumbra, y entran escalonadas la primera vez */
#lp .res-pista.vivo .res:not(.ve) { opacity: .42 }
#lp .res-pista.espera .res { opacity: 0; transform: translateY(18px) }
#lp .res-pista.espera.dentro .res { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 70ms) }
#lp .res-pista.espera.dentro .res:not(.ve) { opacity: .42 }

/* ---------- Barra y cuenta ---------- */
#lp .res-pie { display: none; align-items: center; gap: 18px; margin-top: 22px }
#lp.js .res-pie { display: flex }
#lp .res-barra { position: relative; flex: 1; height: 1px; background: var(--filo-2); border-radius: 2px }
#lp .res-barra span {
  position: absolute; top: -1px; left: 0; height: 3px; width: 30%; border-radius: 2px;
  background: linear-gradient(90deg, var(--oro-3), var(--oro-2)); box-shadow: 0 0 12px rgba(232, 180, 100, .6);
  transition: left .25s linear, width .25s linear;
}
#lp .res-cuenta { font-family: var(--f-mono); font-size: 13px; color: var(--txt-3); white-space: nowrap }
#lp .res-cuenta b { font-weight: 400; color: var(--oro-2) }