:root{ --lhsv-bg:#0F0F0F; }

#lhsv.lhsv-wrap{
  position:relative;
  width:100%;
  height:200vh;
  background:var(--lhsv-bg);
  margin-top:-2px;
  margin-bottom:-2px;
  padding-top:2px;
  padding-bottom:2px;
  isolation:isolate;
}
#lhsv.lhsv-wrap::before,
#lhsv.lhsv-wrap::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:140px;
  background:var(--lhsv-bg);
  z-index:-1;
}
#lhsv.lhsv-wrap::before{ top:-140px; }
#lhsv.lhsv-wrap::after{ bottom:-140px; }

.lhsv-sticky{
  position:sticky;
  top:0;
  height:100vh;
  width:100%;
  overflow:hidden;
  background:var(--lhsv-bg);
}

.lhsv-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:1;
}

.lhsv-mobile-fade{
  position:absolute;
  inset:0;
  background:var(--lhsv-bg);
  opacity:0;
  pointer-events:none;
  z-index:5;
  transition: opacity .18s linear;
}

.lhsv-textlayer{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  padding:clamp(18px,3vw,60px);
  z-index:10;
}

.lhsv-step{
  position:absolute;
  max-width:min(var(--lhsv-step-maxw,560px),92vw);
  opacity:0;
  text-align:left;
  /* Positioning of the step elements is controlled by CSS variables
     populated per preset.  If unset, they fall back to auto and none. */
  top: var(--lhsv-step-top, auto);
  bottom: var(--lhsv-step-bottom, auto);
  transform: var(--lhsv-step-transform, none);
  transition:none;
  will-change: opacity;
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.35));
}
.lhsv-step.is-active{ opacity:1; }

.lhsv-step.left{ left: var(--lhsv-left-inset,120px); max-width:min(var(--lhsv-step-left-maxw, var(--lhsv-step-maxw,560px)),92vw); }
.lhsv-step.right{ right: calc(var(--lhsv-right-inset,220px) + var(--lhsv-right-extra,0px)); max-width:min(var(--lhsv-step-right-maxw, var(--lhsv-step-maxw,560px)),92vw); }

.lhsv-step h2,
.lhsv-step p{
  opacity:0;
  transform:translate3d(0,0,0);
  transition: opacity .38s ease, transform var(--lhsv-h2dur,620ms) cubic-bezier(.16,.88,.18,1);
  will-change: transform, opacity;
}

.lhsv-step.left h2,
.lhsv-step.left p{ transform:translate3d(calc(var(--lhsv-enter,42px) * -1),0,0); }
.lhsv-step.right h2,
.lhsv-step.right p{ transform:translate3d(var(--lhsv-enter,42px),0,0); }

.lhsv-step.is-active h2{
  opacity:1;
  transform:translate3d(0,0,0);
  transition-delay:0ms;
}
.lhsv-step.is-active p{
  opacity:1;
  transform:translate3d(0,0,0);
  transition-delay:var(--lhsv-pdelay,160ms);
}

.lhsv-step h2{
  margin:0 0 var(--lhsv-h2-gap,10px);
  font-family: var(--lhsv-h2-font, Inter,system-ui,-apple-system);
  font-weight: var(--lhsv-h2-weight,400);
  font-size: var(--lhsv-h2-size, clamp(34px,2.1vw,44px));
  line-height:1.08;
  color:transparent;
  -webkit-text-fill-color: transparent;
  text-rendering: geometricPrecision;
  background: linear-gradient(var(--lhsv-h2-grad-angle,90deg), rgba(255,255,255,1) 0%, rgba(255,255,255,var(--lhsv-h2-grad-mid,.55)) 65%, rgba(255,255,255,var(--lhsv-h2-grad-end,.18)) 100%);
  -webkit-background-clip:text;
  background-clip:text;
}

.lhsv-step p{
  margin:0;
  font-family: var(--lhsv-p-font, Inter,system-ui,-apple-system);
  font-weight: var(--lhsv-p-weight,300);
  font-size: var(--lhsv-p-size, clamp(16px,1.05vw,18px));
  line-height:1.55;
  color:rgba(255,255,255,.88);
}

/* overrides per side */
.lhsv-step.left h2{
  font-family: var(--lhsv-h2-left-font, var(--lhsv-h2-font, Inter,system-ui,-apple-system));
  font-size: var(--lhsv-h2-left-size, var(--lhsv-h2-size, clamp(34px,2.1vw,44px)));
  font-weight: var(--lhsv-h2-left-weight, var(--lhsv-h2-weight,400));
  max-width: var(--lhsv-h2-left-w, none);
  background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,var(--lhsv-h2-left-grad-mid,var(--lhsv-h2-grad-mid,.55))) 65%, rgba(255,255,255,var(--lhsv-h2-left-grad-end,var(--lhsv-h2-grad-end,.18))) 100%);
  -webkit-background-clip:text;
  background-clip:text;
}
.lhsv-step.right h2{
  font-family: var(--lhsv-h2-right-font, var(--lhsv-h2-font, Inter,system-ui,-apple-system));
  font-size: var(--lhsv-h2-right-size, var(--lhsv-h2-size, clamp(34px,2.1vw,44px)));
  font-weight: var(--lhsv-h2-right-weight, var(--lhsv-h2-weight,400));
  max-width: var(--lhsv-h2-right-w, none);
  background: linear-gradient(var(--lhsv-h2-right-grad-angle,90deg), rgba(255,255,255,1) 0%, rgba(255,255,255,var(--lhsv-h2-right-grad-mid,var(--lhsv-h2-grad-mid,.55))) 65%, rgba(255,255,255,var(--lhsv-h2-right-grad-end,var(--lhsv-h2-grad-end,.18))) 100%);
  -webkit-background-clip:text;
  background-clip:text;
}
.lhsv-step.left p{
  font-family: var(--lhsv-p-left-font, var(--lhsv-p-font, Inter,system-ui,-apple-system));
  font-size: var(--lhsv-p-left-size, var(--lhsv-p-size, clamp(16px,1.05vw,18px)));
  font-weight: var(--lhsv-p-left-weight, var(--lhsv-p-weight,300));
  width: var(--lhsv-p-left-w, var(--lhsv-p-w,380px));
  max-width: var(--lhsv-p-left-w, var(--lhsv-p-w,380px));
}
.lhsv-step.right p{
  font-family: var(--lhsv-p-right-font, var(--lhsv-p-font, Inter,system-ui,-apple-system));
  font-size: var(--lhsv-p-right-size, var(--lhsv-p-size, clamp(16px,1.05vw,18px)));
  font-weight: var(--lhsv-p-right-weight, var(--lhsv-p-weight,300));
  width: var(--lhsv-p-right-w, var(--lhsv-p-w,380px));
  max-width: var(--lhsv-p-right-w, var(--lhsv-p-w,380px));
}

/* ===== Logo Wall PRO ===== */
.lhsv-logo-wall{
  margin-top:18px;
  display:grid;
  gap:14px;
  width:100%;
  max-width: var(--lhsv-logos-maxw,520px);
  position:relative;
}
.lhsv-logo-wall.has-fade{
  /* Fade controlable desde backend: --lhsv-logo-fade-edge (%) */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,1) var(--lhsv-logo-fade-edge, 10%),
    rgba(0,0,0,1) calc(100% - var(--lhsv-logo-fade-edge, 10%)),
    transparent 100%
  );
  mask-image: linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,1) var(--lhsv-logo-fade-edge, 10%),
    rgba(0,0,0,1) calc(100% - var(--lhsv-logo-fade-edge, 10%)),
    transparent 100%
  );
}

.lhsv-logo-row{
  position:relative;
  overflow:hidden;
  height: var(--lhsv-card-h,62px);
  border-radius: var(--lhsv-card-r,14px);
}

.lhsv-logo-track{
  display:inline-flex;
  align-items:center;
  gap: var(--lhsv-gap,14px);
  will-change: transform;
  white-space: nowrap;
}

.lhsv-logo-card{
  width: var(--lhsv-card-w,150px);
  height: var(--lhsv-card-h,62px);
  border-radius: var(--lhsv-card-r,14px);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  box-sizing:border-box;
}

.lhsv-logo-card img{
  max-height: var(--lhsv-logo-h,22px);
  max-width:100%;
  opacity:.95;
  display:block;
}

/* ===== Móvil ===== */
@media (max-width:767px){
  /* Variables móviles (si no se setean desde backend, heredan las de PC) */
  #lhsv.lhsv-wrap{
    --lhsv-m-layer-pad-x: var(--lhsv-layer-pad-x, 12px);
    --lhsv-m-layer-pad-y: var(--lhsv-layer-pad-y, 18px);

    --lhsv-m-step-w: var(--lhsv-step-w, 92vw);
    --lhsv-m-step-maxw: var(--lhsv-step-maxw, 92vw);

    --lhsv-m-top-left: var(--lhsv-top-left, 6vh);
    --lhsv-m-bottom-right: var(--lhsv-bottom-right, 6vh);

    --lhsv-m-in-x: var(--lhsv-in-x, 12px);
  }

  .lhsv-textlayer{
    align-items:stretch;
    justify-content:stretch;
    padding-left:var(--lhsv-m-layer-pad-x) !important;
    padding-right:var(--lhsv-m-layer-pad-x) !important;
    padding-top:var(--lhsv-m-layer-pad-y) !important;
    padding-bottom:var(--lhsv-m-layer-pad-y) !important;
  }

  .lhsv-step{
    left:auto !important;
    right:auto !important;
    width:var(--lhsv-m-step-w) !important;
    /* max-width se controla por lado */
    transform:none !important;
    top:auto !important;
    bottom:auto !important;
  }

  .lhsv-step.left{
    left: var(--lhsv-m-left-inset, 12px) !important;
    top:var(--lhsv-m-top-left) !important;
  }
  .lhsv-step.right{
    right: calc(var(--lhsv-m-right-inset, 12px) + var(--lhsv-m-right-extra, 0px)) !important;
    bottom:var(--lhsv-m-bottom-right) !important;
  }

  .lhsv-step.left{ max-width: var(--lhsv-m-step-left-maxw, var(--lhsv-m-step-maxw)) !important; }
  .lhsv-step.right{ max-width: var(--lhsv-m-step-right-maxw, var(--lhsv-m-step-maxw)) !important; }

  /* direcciones más suaves en móvil */
  .lhsv-step.left h2, .lhsv-step.left p{ transform:translate3d(calc(var(--lhsv-m-in-x) * -1),0,0); }
  .lhsv-step.right h2, .lhsv-step.right p{ transform:translate3d(var(--lhsv-m-in-x),0,0); }

  /* Logos: solo una fila */
  .lhsv-logo-wall{ gap:0; max-width:100%; }
  .lhsv-logo-wall .lhsv-logo-row:nth-child(2),
  .lhsv-logo-wall .lhsv-logo-row:nth-child(3){ display:none; }
}