/* Landing Mobil-home Paradís — versión 2: el vídeo es el fondo de la página.
   Se carga DESPUÉS de landing-paradis.css y solo cambia lo necesario.
   El vídeo va "pegado" (sticky) detrás del contenido desde el título azul
   hasta el pie; la información y la galería pasan por encima en paneles. */

/* la ola del título azul desemboca en el azul oscuro del fondo, no en crema */
.ph-hero{background:#001c40}
.ph-hero__wave-front{fill:#001c40}

.lpb{position:relative;background:#001c40}

/* ---------- capa del vídeo ---------- */
.lpb-bg{position:sticky;top:0;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;overflow:hidden;z-index:0}
.lpb-bg .lp-video__media{display:block;width:100%;height:100%;object-fit:cover}
.lpb-bg__veil{position:absolute;inset:0;background:rgba(0,28,64,.52)}
.lpb-content{position:relative;z-index:1}

/* el título azul termina en una ola sobre el vídeo, no en una línea recta */
.lpb-wave{position:absolute;top:-1px;left:0;width:100%;height:120px;z-index:1;display:block;fill:#001c40;pointer-events:none}

/* ---------- intro sobre el vídeo ---------- */
.lpb-intro{min-height:calc(100svh - 126px);display:flex;align-items:flex-end;padding:96px 0 80px;color:#fff}
.lpb-eyebrow{color:#ffb67a}
.lpb-intro__title{font-size:72px;line-height:1;font-weight:700;color:#fff;max-width:760px;text-shadow:0 2px 24px rgba(0,20,48,.45)}
.lpb-intro__lead{font-size:20px;line-height:28px;max-width:600px;margin-top:24px;color:rgba(255,255,255,.92);text-shadow:0 1px 12px rgba(0,20,48,.5)}
.lpb-intro__actions{display:flex;align-items:center;gap:16px;margin-top:32px}
.lpb-toggle{position:static;width:56px;height:56px}

/* ---------- datos rápidos: tarjetas blancas directamente sobre el vídeo ---------- */
.lpb .lp-facts{padding:0 48px}

/* ---------- paneles de información y galería ---------- */
.lpb-sec{padding:48px 0}
.lpb-panel{background:rgba(251,248,242,.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-radius:32px;padding-top:64px;padding-bottom:64px;box-shadow:0 32px 64px -32px rgba(0,20,48,.6)}
.lpb .lp-info{max-width:1200px}
.lpb .lp-card{top:150px}

/* ---------- cierre sobre el vídeo ---------- */
.lpb-outro{min-height:70svh;display:flex;align-items:center;text-align:center;color:#fff;padding:96px 0}
.lpb-outro .lp-wrap{display:flex;flex-direction:column;align-items:center;gap:32px}
.lpb-outro__title{font-size:60px;line-height:1;font-weight:700;color:#fff;text-shadow:0 2px 24px rgba(0,20,48,.45)}

/* cierre con solo el botón de reservar: no necesita tanta altura */
.lpb-outro--boton{min-height:40svh}

/* otros mobil-homes dentro del panel: los cinco en una fila */
.lpb .mh-others-title{margin-top:0}
.lpb .mh-others a{width:190px}

/* ---------- contenido centrado ---------- */
.lpb-intro .lp-wrap{width:100%;text-align:center}
.lpb-intro__title{max-width:960px}
.lpb .lpb-intro__title,.lpb .lpb-intro__lead{margin-left:auto;margin-right:auto}
.lpb-intro__actions{justify-content:center}
.lpb .lp-head{text-align:center}
.lpb .lp-h2,.lpb .lp-lead{margin-left:auto;margin-right:auto}
.lpb .lp-facts__list li{align-items:center;text-align:center}
.lpb .lp-room{text-align:center}
.lpb .lp-room:last-child:nth-child(odd){grid-column:1/-1}
.lpb .lp-room .lp-ico{display:block;margin-left:auto;margin-right:auto}
.lpb .lp-card h3{text-align:center}

/* ---------- tablet ---------- */
@media (max-width:1024px){
  .lpb-intro__title{font-size:60px}
  .lpb-outro__title{font-size:48px}
}

/* ---------- móvil ---------- */
@media (max-width:640px){
  .lpb-intro{min-height:calc(100svh - 90px);padding:64px 0 48px}
  .lpb-intro__title{font-size:36px;line-height:40px}
  .lpb-intro__title br{display:none}
  .lpb-intro__lead{font-size:18px;line-height:28px}
  .lpb-intro__actions .lp-btn{flex:1}
  .lpb-intro__actions{padding-right:72px}
  .lpb-toggle{width:48px;height:48px;flex-shrink:0;order:-1}
  .lpb-wave{height:64px}
  .lpb .lp-facts{padding:0 16px}
  .lpb-sec{padding:32px 0}
  .lpb-panel{border-radius:24px;padding:40px 16px;margin:0 8px}
  .lpb-outro__title{font-size:36px;line-height:40px}
  .lpb .mh-others a{width:calc(50% - .55rem)}
}

/* ---------- movimiento reducido: el vídeo queda en pausa en la primera imagen ---------- */

/* Volver a la zona de mobil-homes */
.ph-volver{position:absolute;z-index:2;top:16px;left:24px;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 8px;color:#fff;font-weight:700;text-decoration:none}
.ph-volver:hover{text-decoration:underline}
@media (max-width:640px){.ph-volver{top:4px;left:8px;font-size:.92rem}}