/*!
 * LD Elementor · módulo "track" (carrusel de tarjetas sobre un Listing Grid de JetEngine)
 * Se activa con la clase `ld-pjs` en un contenedor de Elementor. Estructura esperada:
 *   .ld-pjs > .jet-listing-grid (con tarjetas `.ld-pj` dentro del Listing Item) + .ld-pjs__ctl (controles)
 * Los estilos de bajo nivel usan :where() (especificidad 0) para que los controles nativos de Elementor
 * sigan mandando; solo la geometría del carrusel usa selectores normales.
 */

/* ---- Variables (se pueden sobrescribir desde el contenedor con CSS propio) ---- */
.ld-pjs{
  --ld-pri:#10CFC9; --ld-bg:#141A1F; --ld-sec:#1D252C; --ld-white:#fff; --ld-g1:#DADADA; --ld-g2:#ADADAD;
  --ld-gap:16px; --ld-gut:80px;
  --ld-ease:cubic-bezier(.22,.61,.36,1); --ld-ease-out:cubic-bezier(.16,1,.3,1);
  position:relative; min-width:0; max-width:100%;
}
/* Valores por defecto para tarjetas `.ld-pj` usadas fuera de un carrusel (la variable más cercana, p. ej. en .ld-pjs, manda). */
:root{--ld-pri:#10CFC9;--ld-bg:#141A1F;--ld-sec:#1D252C;--ld-white:#fff;--ld-g1:#DADADA;--ld-g2:#ADADAD;--ld-ease:cubic-bezier(.22,.61,.36,1);--ld-ease-out:cubic-bezier(.16,1,.3,1)}
@media (max-width:1279px){.ld-pjs{--ld-gut:40px}}
@media (max-width:767px){.ld-pjs{--ld-gut:20px;--ld-gap:12px}}

/* ---- Pista (track): Listing Grid convertido en fila con scroll y snap ---- */
.ld-pjs > .elementor-widget-jet-listing-grid{min-width:0;max-width:100%;width:100%}
.ld-pjs .jet-listing-grid{width:100%}
.ld-pjs .jet-listing-grid .jet-listing-grid__items{
  display:flex; flex-wrap:nowrap; gap:var(--ld-gap); margin:0; padding:0; width:100%;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.ld-pjs .jet-listing-grid .jet-listing-grid__items::-webkit-scrollbar{display:none}
.ld-pjs .jet-listing-grid .jet-listing-grid__items > .jet-listing-grid__item{
  flex:0 0 calc((100% - 2 * var(--ld-gap)) / 3); max-width:none; width:auto; min-width:0; padding:0;
  scroll-snap-align:start; display:flex;
}
.ld-pjs .jet-listing-grid__item > .elementor{flex:1 1 auto;min-width:0;display:flex}
.ld-pjs .jet-listing-grid__item .elementor > .ld-pj{flex:1 1 auto;min-width:0}
@media (max-width:1199px){
  .ld-pjs .jet-listing-grid .jet-listing-grid__items > .jet-listing-grid__item{flex-basis:calc((100% - var(--ld-gap)) / 2)}
}
@media (max-width:767px){
  /* A sangre en móvil: la pista ocupa el ancho de pantalla y respeta el margen lateral al inicio y al final */
  .ld-pjs .jet-listing-grid .jet-listing-grid__items{width:auto;margin:0 calc(-1 * var(--ld-gut));padding:0 var(--ld-gut);scroll-padding:0 var(--ld-gut)}
  .ld-pjs .jet-listing-grid .jet-listing-grid__items > .jet-listing-grid__item{flex-basis:86%}
}

/* ---- Tarjeta ---- */
:where(.ld-pj){position:relative;color:var(--ld-white);-webkit-user-select:none;user-select:none}
:where(.ld-pj__img){position:relative;aspect-ratio:800/564;width:100%}
:where(.ld-pj__img)::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,26,31,.55),rgba(20,26,31,0) 34%,rgba(20,26,31,0) 70%,rgba(29,37,44,.9))}
:where(.ld-pj__img > .ld-pj__pic){position:absolute;inset:0;width:100%;height:100%;margin:0}
:where(.ld-pj__pic .elementor-widget-container,.ld-pj__pic .jet-listing-dynamic-image){height:100%}
:where(.ld-pj__pic) img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ld-ease-out);-webkit-user-drag:none}
:where(.ld-pj__top){position:absolute;left:18px;right:18px;top:16px;z-index:2;width:auto}
:where(.ld-pj__cat) .jet-listing-dynamic-terms{display:flex}
:where(.ld-pj__cat) .jet-listing-dynamic-terms__link{
  display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;
  background:rgba(20,26,31,.8);color:var(--ld-pri);font-size:12.5px;font-weight:600;line-height:1.2;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-decoration:none}
:where(.ld-pj__n){font-size:13px;font-weight:500;color:var(--ld-white);font-variant-numeric:tabular-nums;text-shadow:0 1px 8px rgba(0,0,0,.6)}
:where(.ld-pj__bt){flex:1 1 auto}
:where(.ld-pj__info){min-width:0;flex:1 1 auto}
:where(.ld-pj__t) .elementor-heading-title{margin:0;text-wrap:balance}
:where(.ld-pj__t) .elementor-heading-title a{color:inherit;text-decoration:none}
/* Enlace extendido: el título (un <a> real) cubre toda la tarjeta; nada de div con data-url.
   Los contenedores intermedios no deben ser el bloque de posicionamiento del ::after. */
.ld-pj .ld-pj__bt,.ld-pj .ld-pj__info,.ld-pj .ld-pj__t{position:static}
.ld-pj .ld-pj__t .elementor-heading-title a::after{content:"";position:absolute;inset:0;z-index:1}
.ld-pj:focus-within{outline:2px solid var(--ld-pri);outline-offset:-3px}
.ld-pj:has(a:focus:not(:focus-visible)){outline:0}
:where(.ld-pj__sv) .jet-listing-dynamic-terms{display:flex;flex-wrap:wrap;gap:6px}
:where(.ld-pj__sv) .jet-listing-dynamic-terms__link{
  display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);color:var(--ld-g1);font-size:12.5px;font-weight:400;line-height:1.2;text-decoration:none}
/* Botón de flecha (decorativo: la acción es el enlace del título). El ::before de .e-con lo usa Elementor
   para el overlay, por eso la flecha va en ::after. Geometría con especificidad normal para ganar a .e-con. */
.ld-pj .ld-pj__go{position:relative;flex:none;width:52px;min-width:52px;height:52px;min-height:52px;align-self:flex-end;
  border-radius:999px;background:var(--ld-pri);transition:transform .45s var(--ld-ease-out)}
.ld-pj .ld-pj__go::before{content:none}
.ld-pj .ld-pj__go::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;background:var(--ld-bg);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat}
@media (hover:hover){
  .ld-pj:hover .ld-pj__pic img{transform:scale(1.06)}
  .ld-pj:hover .ld-pj__go{transform:rotate(45deg)}
}

/* ---- Controles ---- */
.ld-pjs__ctl{width:100%}
.ld-pjs .ld-pjs__prog,.ld-pjs .ld-pjs__hint,.ld-pjs .ld-pjs__r{width:auto;min-width:0;flex:0 1 auto}
.ld-pjs .ld-pjs__help{width:auto;flex:0 1 auto;white-space:nowrap}
.ld-pjs__bars{display:flex;gap:6px;align-items:center}
.ld-pjs__bars i{display:block;width:24px;height:3px;border-radius:3px;background:rgba(255,255,255,.18);transition:width .45s var(--ld-ease),background .2s}
.ld-pjs__bars i.on{width:48px;background:var(--ld-pri)}
.ld-pjs__count{color:var(--ld-g1);font-size:14px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Botones de flecha. `button.` + clase gana a los estilos de botón del Kit/tema sin usar !important */
.ld-pjs button.ld-pjs__circ{width:52px;height:52px;flex:none;padding:0;border:1px solid rgba(255,255,255,.25);border-radius:999px;
  background:transparent;color:var(--ld-white);box-shadow:none;font:inherit;line-height:1;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.ld-pjs button.ld-pjs__circ--pri{background:var(--ld-pri);border-color:var(--ld-pri);color:var(--ld-bg)}
.ld-pjs button.ld-pjs__circ svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ld-pjs button.ld-pjs__circ:focus-visible{outline:2px solid var(--ld-pri);outline-offset:3px}
@media (hover:hover){
  .ld-pjs button.ld-pjs__circ:hover,.ld-pjs button.ld-pjs__circ:focus{background:transparent;border-color:var(--ld-pri);color:var(--ld-pri)}
  .ld-pjs button.ld-pjs__circ--pri:hover,.ld-pjs button.ld-pjs__circ--pri:focus{background:#3ADCD7;border-color:#3ADCD7;color:var(--ld-bg)}
}
/* Sin JS no hay barras, contador ni flechas: se oculta lo que depende de JS (el editor lo muestra todo) */
.ld-pjs:not(.is-ready):not(.is-edit) .ld-pjs__prog{display:none}
@media (max-width:1199px){.ld-pjs__help{display:none}}
/* Dos filas (≤1023): 1.ª barras ← → contador; 2.ª flechas ← → «Ver todos los proyectos» (el botón vive en .ld-pjs__r).
   Si el botón no cabe junto a las flechas (≤379) pasa a una 3.ª fila a todo el ancho. */
@media (max-width:1023px){
  .ld-pjs__ctl{flex-wrap:wrap;row-gap:14px}
  .ld-pjs .ld-pjs__prog,.ld-pjs .ld-pjs__r{width:100%;flex:1 1 100%}
  .ld-pjs .ld-pjs__prog{justify-content:space-between;flex-wrap:nowrap}
  .ld-pjs .ld-pjs__r{justify-content:flex-start}
  .ld-pjs .ld-pjs__all{margin-left:auto}
  .ld-pjs__bars{min-width:0;flex:0 1 auto}
  .ld-pjs__bars i{flex:0 1 auto;min-width:6px}
}
@media (max-width:767px){
  .ld-pjs__bars i{width:14px}.ld-pjs__bars i.on{width:30px}
}
@media (max-width:379px){
  .ld-pjs .ld-pjs__all{width:100%;margin-left:0}
  .ld-pjs .ld-pjs__all .elementor-button{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .ld-pjs *,.ld-pjs *::before,.ld-pjs *::after{transition-duration:.01ms!important}
}