:root{
  --lr-w-bg: rgba(255,255,255,.66);
  --lr-w-brd: rgba(17,17,17,.10);
  --lr-w-shadow: 0 30px 80px rgba(0,0,0,.20);
  --lr-w-text:#111;
  --lr-w-muted:#4a4a4a;
}

.lr-welcome[aria-hidden="true"]{ display:none; }

.lr-welcome{
  position: fixed; inset: 0; z-index: 99990;
}

.lr-welcome__scrim{
  position:absolute; inset:0;
  background: rgba(0,0,0,.30);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0; animation: lr-w-fade .18s ease forwards;
}

.lr-welcome__dialog{
  position: relative;
  margin: 10vh auto 0;
  width: min(92vw, 680px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.56));
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--lr-w-brd);
  border-radius: 20px;
  box-shadow: var(--lr-w-shadow);
  color: var(--lr-w-text);
  overflow: hidden;
  transform: translateY(10px);
  opacity: 0;
  animation: lr-w-pop .22s ease forwards;
}

.lr-welcome__close{
  position:absolute; top:10px; right:10px;
  background:transparent; border:0; padding:8px; cursor:pointer; color:#222;
  border-radius:12px;
}
.lr-welcome__close:hover{ background: rgba(0,0,0,.06); }

.lr-welcome__media{
  margin:0; max-height: 220px; overflow: hidden;
}
.lr-welcome__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter: saturate(105%) contrast(102%);
}

.lr-welcome__body{
  padding: 22px 22px 18px;
}
.lr-welcome__title{
  margin:0 0 8px; font-size: 22px; font-weight: 700; font-family: "Playfair Display", serif;
}
.lr-welcome__text{
  margin:0 0 16px; color: var(--lr-w-muted); line-height: 1.5;
}

.lr-welcome__actions{
  display:flex; gap:10px; align-items:center; flex-wrap: wrap;
}
.lr-welcome__dismiss{
  background:transparent; border:0; color:#333; padding:8px 6px; cursor:pointer;
  border-radius:10px;
}
.lr-welcome__dismiss:hover{ background: rgba(0,0,0,.06); }

/* Desktop: media a la izquierda */
@media (min-width: 860px){
  .lr-welcome__dialog{
    grid-template-columns: 44% 56%;
  }
  .lr-welcome__media{ max-height: none; }
  .lr-welcome__body{ padding: 26px 26px; }
}

/* Animaciones discretas */
@keyframes lr-w-fade{ to{ opacity:1; } }
@keyframes lr-w-pop{ to{ opacity:1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce){
  .lr-welcome__scrim,
  .lr-welcome__dialog{ animation: none; opacity: 1; transform: none; }
}