:root{
  --lr-black:#111; --lr-gray:#444; --lr-white:#fff;
  --lr-glass-brd: rgba(17,17,17,.08);
  --lr-shadow: 0 14px 44px rgba(0,0,0,.10);
  --lr-safe-top: env(safe-area-inset-top, 0px);
  --lr-header-h: 64px;            /* el header fijo mide esto por defecto */
}

.lr-spot{ margin: 18px auto 60px; }

/* --- contenedor --- */
.lr-spot-inner{
  position: relative;
  max-width: 1150px;
  margin: 0 auto;
  border-radius: var(--spot-radius, 0)px;
  overflow: hidden;
  box-shadow: var(--lr-shadow);
  min-height: var(--spot-h-min, 420px);
  height: var(--spot-h, 56vh);
}

/* full-bleed opcional */
.lr-spot.is-full .lr-spot-inner{
  max-width: none;
  margin-left: 0; margin-right: 0;
  border-radius: 0;
}

/* meter el hero bajo el header fijo (sin franja arriba) */
.lr-spot.is-overlap{ margin-top: 0; }
.lr-spot.is-overlap .lr-spot-inner{ border-top-left-radius: 0; border-top-right-radius: 0; }

/* --- media --- */
.lr-spot-media{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position: var(--spot-obj, center center);
  display:block;
  filter: saturate(105%) contrast(102%);
  border-radius: var(--spot-radius, 0)px;
}

/* --- tarjeta --- */
.lr-spot-card{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom: 28px;
  width: min(var(--spot-card-max, 720px), calc(100% - 36px));
  padding: 28px 24px; border-radius: 18px;
  background: linear-gradient(180deg,
    rgba(255,255,255, var(--spot-card-top, .74)),
    rgba(255,255,255, var(--spot-card-bot, .58)));
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--lr-glass-brd);
  box-shadow: var(--lr-shadow);
  z-index: 1;
}
.lr-spot.is-center .lr-spot-card{
  top: 50%; bottom: auto; transform: translate(-50%, -50%);
}

.lr-spot-title{ margin:0 0 8px; font-size:clamp(26px,4vw,40px); color:var(--lr-black); }
.lr-spot-sub{ margin:0 0 16px; color:#333; }

/* --- móvil: pantalla completa real y sin franja --- */
@media (max-width:920px){
  .lr-spot{ margin: 0 0 28px; } /* pegado arriba */
  .lr-spot-inner{
    /* 100svh = small viewport; restamos header + safe area */
    height: calc(100svh - var(--lr-header-h) - var(--lr-safe-top));
    min-height: 520px;
    border-radius: 0;
  }
  .lr-spot-card{ left:18px; right:18px; transform:none; }
  .lr-spot.is-center .lr-spot-card{ top:auto; bottom: 28px; transform:none; }
}

/* desktop: borde redondeado (si no es full-bleed/overlap) */
@media (min-width: 960px){
  .lr-spot:not(.is-full) .lr-spot-inner{
    border-radius: var(--spot-radius, 18px);
  }
}