.lmpl-wrap { 
  --lmpl-panel-space: 0px;
  position: relative;
  width: 100%;
  color: inherit;
  font-family: "Greycliff CF", Sans-serif;
}
.lmpl-wrap * { box-sizing: border-box; }
.lmpl-bg { 
  position:absolute;
  inset:0;
  overflow:hidden;
}
.lmpl-bg-image{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.02);
  transition: background-image 400ms ease-in-out, transform 600ms ease;
}
.lmpl-bg-overlay{ 
  position:absolute;
  inset:0;
  background: radial-gradient(ellipse at 20% 80%, rgba(0,0,0,0.25), transparent 60%), linear-gradient(90deg, rgba(0,0,0,0.35), rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.35));
  pointer-events:none;
}

.lmpl-left-title{
  position:absolute;
  left: clamp(16px, 5vw, 48px);
  top: clamp(16px, 6vh, 64px);
  max-width: min(44vw, 560px);
  color:#fff;
  font-weight:500;
  font-size: clamp(24px, 3.6vw, 46px);
  line-height:1.14;
  text-shadow: 0 2px 12px rgba(0,0,0,0.28);
  z-index: 2;
  pointer-events:none;
}

.lmpl-lines{
  position:absolute;
  inset:0;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1;
}
.lmpl-lines .lmpl-line-img{
  position:absolute;
  top:0;
  left:50%;
  transform: translateX(-50%);
  height:100%;
  width:auto;
  opacity:.95;
}

.lmpl-inner { 
  position:relative;
  display:grid;
  grid-template-columns: 1fr minmax(320px, 480px);
  gap: clamp(16px, 4vw, 40px);
  align-items:center;
  height:100%;
  padding: clamp(16px, 4vw, 40px);
}

.lmpl-line-col { 
  position:relative;
  width:100%;
  height: calc(100% - var(--lmpl-panel-space, 0px));
}
.lmpl-guides { 
  position:absolute;
  left:50%;
  top:0;
  height:100%;
  width:auto;
  transform: translateX(-50%);
  opacity:0;
  pointer-events:none;
}
.lmpl-dots { 
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
}

.lmpl-dot {
  position:absolute;
  width:28px;
  height:28px;
  margin:0;
  border-radius:999px;
  cursor:pointer;
  pointer-events:auto;
  border:0;
  padding:0;
  background-color: transparent;
  color: inherit;
  outline:none;
  -webkit-appearance:none;
  appearance:none;
  box-shadow:none;
  font: inherit;
  line-height:1;
  display:grid;
  place-items:center;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35));
  transition: transform .25s ease, filter .25s ease;
  transform: translate(-50%, -50%);
  transform-origin: center;
}
.lmpl-dot,
.lmpl-dot:focus,
.lmpl-dot:active{
  background-color: transparent !important;
  color: inherit !important;
  border: 0 !important;
  outline:none;
  box-shadow:none;
}
.lmpl-dot::before{
  content:'';
  position:absolute;
  width:28px;
  height:28px;
  border-radius:50%;
  box-shadow:0 0 0 0 var(--lmpl-pulse, #fff);
  animation: lmpl-pulse 2.2s ease-out infinite;
  opacity:.5 }
@keyframes lmpl-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(255,255,255,0.0); transform: scale(1); }
  25%{ box-shadow: 0 0 0 10px rgba(255,255,255,0.12); transform: scale(1.02); }
  90%{ box-shadow: 0 0 0 28px rgba(255,255,255,0); transform: scale(1); }
  100%{ box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.lmpl-dot.is-active{ transform: translate(-50%, -50%) scale(1.35); filter: drop-shadow(0 6px 18px rgba(0,0,0,0.45)); }
.lmpl-dot:hover:not(.is-active),
.lmpl-dot:focus-visible:not(.is-active){
  transform: translate(-50%, -50%) scale(1.35);
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.45));
  background-color: transparent;
}
.lmpl-dot:focus-visible{
  box-shadow: 0 0 0 2px rgba(255,255,255,0.6);
  outline:none;
}

.lmpl-dot .lmpl-fletxa{
  position:absolute;
  inset:-16px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,0.16) 30%, rgba(255,255,255,0.04) 65%, rgba(255,255,255,0));
  border: 1px solid rgba(255,255,255,0.18);
  opacity:.65;
  pointer-events:none;
}

.lmpl-panel { 
  align-self:center;
  justify-self:end;
  max-width: min(90vw, 520px);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  background: var(--lmpl-card-bg, rgba(20,40,60,0.35));
  color:#fff;
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.35);
  box-shadow: 0 18px 36px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.05);
  padding: clamp(16px, 3vw, 26px);
  position:relative;
  z-index:3;
}
.lmpl-panel[data-tone="marro"],
.lmpl-panel[data-tone="marro"] .lmpl-card{
  background: rgba(139,72,49,0.34);
}
.lmpl-panel[data-tone="blau"],
.lmpl-panel[data-tone="blau"] .lmpl-card{
  background: rgba(141,163,166,0.58);
}
.lmpl-panel[data-tone="clar"],
.lmpl-panel[data-tone="clar"] .lmpl-card{
  background: rgba(183,169,159,0.50);
}
.lmpl-title{ 
  font-size: clamp(22px, 2.2vw, 30px);
  margin: 0 0 6px 0;
  font-weight:600;
  line-height:1.2
}
.lmpl-desc{ 
  font-size: clamp(14px, 1.3vw, 16px);
  margin: 0 0 16px 0;
  opacity:.95 }
.lmpl-cards{ 
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 2vw, 18px);
}
.lmpl-card{ 
  border-radius:14px;
  padding:14px;
  background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.28));
  min-height: 120px;
  border:1px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
  font-size: clamp(13px, 1.15vw, 15px);
  white-space: pre-line;
}
.lmpl-animate-in { animation: lmpl-fade-in-up .45s ease both; }
.lmpl-animate-out { animation: lmpl-fade-out-down .35s ease both; }
@keyframes lmpl-fade-in-up { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform: translateY(0); } }
@keyframes lmpl-fade-out-down { from { opacity:1; transform: translateY(0); } to { opacity:0; transform: translateY(12px); } }

@media (max-width: 900px){
  .lmpl-lines{
    transform: translateY(clamp(-60px, -10vw, -24px));
  }
  .lmpl-wrap{
    --lmpl-panel-space: 0px;
    height: auto !important;
    min-height: clamp(520px, 90vh, 980px);
    padding-bottom: clamp(16px, 5vw, 48px);
  }
  .lmpl-inner{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    grid-template-columns: none;
    height:auto;
    gap: clamp(20px, 6vw, 56px);
  }
  .lmpl-lines .lmpl-line-img{
    left:50%;
    transform: translateX(-50%);
    height: calc(100% + clamp(40px, 12vw, 120px));
  }
  .lmpl-line-col{
    flex: 1 1 auto;
    height: auto;
    min-height: clamp(420px, 65vh, 880px);
  }
  .lmpl-panel{
    order:2;
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    width:100%;
    max-width:none;
    margin-top: 0;
  }
  .lmpl-panel::after{
    content:none;
  }
  .lmpl-cards{
    grid-template-columns: 1fr;
  }
}