/* Lupo Rooms — movimiento al hacer scroll + bloque "4 pasos" (home y cómo funciona).
 *
 * Regla de oro: el estado BASE es el final (todo visible). Los estados "antes de
 * animar" solo existen bajo html.lj-js, que se pone en el <head> cuando hay
 * IntersectionObserver y el usuario NO pide reducir movimiento. Sin JS, o con
 * "reducir movimiento", la página se ve completa y quieta.
 */

:root {
  --lj-red:#b81f22; --lj-dred:#781c1c; --lj-ink:#070a12; --lj-mute:#5c5550;
  --lj-cream:#f3e8d6; --lj-cream-2:#fbf5ea; --lj-cream-3:#fefbf5; --lj-line:#eee3d1;
  --lj-ok:#16804a; --lj-ok-soft:#e7f5ec;
  --lj-ease:cubic-bezier(.22,1,.36,1);
}

/* ── Barra de progreso de lectura (solo navegadores con scroll-timeline) ── */
.lj-progress { display:none; }
@supports (animation-timeline: scroll()) {
  .lj-progress {
    display:block; position:fixed; left:0; right:0; top:0; height:3px; z-index:10001;
    background:linear-gradient(90deg,var(--lj-red),#e84040); transform-origin:0 50%;
    transform:scaleX(0); pointer-events:none;
    animation:lj-progress linear both; animation-timeline:scroll(root);
  }
  @keyframes lj-progress { to { transform:scaleX(1); } }
}

/* ── Aparición genérica ───────────────────────────────────────────────── */
html.lj-js [data-rv] {
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--lj-ease), transform .8s var(--lj-ease);
  transition-delay:calc(var(--rv-d, 0) * 90ms);
}
html.lj-js [data-rv].rv-in { opacity:1; transform:none; }

/* Contenedores cuyos hijos entran uno detrás de otro (data-stagger="selector"). */
html.lj-js [data-stagger] > * { transition:opacity .7s var(--lj-ease), transform .7s var(--lj-ease); transition-delay:calc(var(--i, 0) * 80ms); }
html.lj-js [data-stagger]:not(.rv-in) > * { opacity:0; transform:translateX(70px) rotate(1.5deg); }
html.lj-js [data-stagger].rv-done > * { transition-delay:0s; transition-duration:.4s; }

/* ════════════════════════════ Bloque 4 pasos ════════════════════════════ */
.lj + .v4-contact-strip { margin-top:0; }
.lj { padding:88px 0 96px; background:linear-gradient(180deg,var(--lj-cream-3) 0%,#f8f0e3 100%); position:relative; }
.lj-wrap { width:100%; max-width:1180px; margin:0 auto; padding:0 24px; box-sizing:border-box; }
.lj-head { text-align:center; max-width:760px; margin:0 auto 44px; }
.lj-head h2 { font-size:clamp(28px,4vw,44px); font-weight:900; letter-spacing:-.02em; line-height:1.1; color:var(--lj-ink); margin:0 0 14px; }
.lj-hl { color:var(--lj-red); position:relative; display:inline-block; z-index:0; }
.lj-hl::after { content:""; position:absolute; left:0; right:0; bottom:3px; height:10px; background:rgba(184,31,34,.16); border-radius:5px; z-index:-1;
  transform-origin:0 50%; transition:transform .9s .35s var(--lj-ease); }
html.lj-js .lj-head:not(.rv-in) .lj-hl::after { transform:scaleX(0); }
.lj-head p { font-size:16px; color:#666; line-height:1.55; margin:0; }

.lj-steps { list-style:none; margin:0; padding:0; display:grid; gap:22px; }
.lj-card {
  display:grid; grid-template-columns:1fr; gap:18px; background:#fff; border:1px solid var(--lj-line);
  border-radius:26px; padding:14px 14px 22px; box-shadow:0 26px 50px -32px rgba(120,60,30,.35);
  transform-origin:50% 0; transition:transform .6s var(--lj-ease), opacity .6s var(--lj-ease), filter .6s;
}
html.lj-js .lj-step:not(.is-seen) .lj-card { opacity:0; transform:translateY(44px) scale(.98); }

/* Copia */
.lj-copy { padding:0 8px; }
.lj-tag { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:800; color:var(--lj-red); text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; }
.lj-tag .material-icons-round { font-size:18px; }
.lj-num { width:28px; height:28px; border-radius:50%; background:var(--lj-red); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; letter-spacing:0; }
.lj-copy h3 { font-size:clamp(21px,2.4vw,30px); font-weight:800; letter-spacing:-.015em; line-height:1.18; color:var(--lj-ink); margin:0 0 10px; }
.lj-copy p { font-size:16px; line-height:1.6; color:var(--lj-mute); margin:0; }
.lj-copy p.lj-us { display:flex; align-items:flex-start; gap:8px; margin-top:16px; padding:11px 14px; background:var(--lj-cream-2); border-radius:12px; font-size:14px; font-weight:700; color:var(--lj-ink); line-height:1.4; }
.lj-us .material-icons-round { font-size:18px; color:var(--lj-red); flex-shrink:0; }

/* Escenario visual */
.lj-visual {
  position:relative; overflow:hidden; border-radius:18px; min-height:270px; padding:26px 18px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; box-sizing:border-box;
  background:
    radial-gradient(circle at 1px 1px, rgba(120,80,40,.10) 1px, transparent 0) 0 0/18px 18px,
    linear-gradient(135deg,#f6ecdc,#fbf5ea);
  font-size:14px; color:var(--lj-ink);
}
.lj-card--2 .lj-visual { background:radial-gradient(circle at 1px 1px, rgba(184,31,34,.10) 1px, transparent 0) 0 0/18px 18px, linear-gradient(135deg,#fbe9e5,#fdf5f1); }
.lj-card--3 .lj-visual { background:radial-gradient(circle at 1px 1px, rgba(22,128,74,.10) 1px, transparent 0) 0 0/18px 18px, linear-gradient(135deg,#eef6ee,#fbf8f0); }
.lj-card--4 .lj-visual { background:radial-gradient(circle at 1px 1px, rgba(120,80,40,.10) 1px, transparent 0) 0 0/18px 18px, linear-gradient(135deg,#f3e8d6,#fdf3ee); }
.lj-visual .material-icons-round { font-size:20px; }
.lj-visual img { width:100%; height:100%; object-fit:cover; display:block; }
.lj-visual > * { transition:opacity .55s var(--lj-ease), transform .55s var(--lj-ease); }

/* 1 · buscador */
.ljv-search { width:min(340px,100%); display:flex; align-items:center; gap:10px; background:#fff; border-radius:999px; padding:8px 8px 8px 16px; box-shadow:0 14px 30px -14px rgba(7,10,18,.25); font-weight:700; font-size:16px; box-sizing:border-box; }
.ljv-search > .material-icons-round { color:var(--lj-red); }
.ljv-type { white-space:nowrap; }
.ljv-caret { width:2px; height:18px; background:var(--lj-red); margin-left:-6px; animation:lj-blink 1s steps(1) infinite; }
@keyframes lj-blink { 50% { opacity:0; } }
.ljv-go { margin-left:auto; width:38px; height:38px; border-radius:50%; background:var(--lj-red); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ljv-results { width:min(340px,100%); display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.ljv-thumb { position:relative; background:#fff; border-radius:14px; padding:5px; box-shadow:0 10px 24px -14px rgba(7,10,18,.3);
  transition:opacity .6s var(--lj-ease), transform .6s var(--lj-ease); transition-delay:calc(.45s + var(--d) * .14s); }
.ljv-thumb-img { aspect-ratio:1/1; border-radius:10px; overflow:hidden; background:var(--lj-cream); }
.ljv-chip { position:absolute; top:9px; left:9px; display:inline-flex; align-items:center; gap:2px; background:var(--lj-red); color:#fff; border-radius:999px; padding:2px 6px 2px 3px; font-size:9px; font-weight:800; }
.ljv-chip .material-icons-round { font-size:11px; }
.ljv-price { display:block; padding:5px 3px 1px; font-size:13px; font-weight:800; }
html.lj-js .lj-step:not(.is-on) .ljv-thumb { opacity:0; transform:translateY(18px) scale(.9); }

/* 2 · solicitud */
.ljv-room { width:min(290px,100%); background:#fff; border-radius:18px; padding:9px 9px 11px; box-shadow:0 18px 36px -18px rgba(7,10,18,.32); box-sizing:border-box; }
.ljv-room-img { aspect-ratio:16/10; border-radius:12px; overflow:hidden; background:var(--lj-cream); }
.ljv-room-row { display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:9px 3px 0; font-size:14px; }
.ljv-room-row > span { white-space:nowrap; }
.ljv-room-row small { color:#888; font-weight:500; }
.ljv-room-city { padding:2px 3px 0; font-size:12.5px; color:#888; }
.ljv-btn { position:relative; display:grid; place-items:center; height:42px; margin-top:10px; border-radius:12px; background:var(--lj-ok); color:#fff; font-weight:800; font-size:14px; overflow:hidden; transition:background .35s 1.15s; }
.ljv-btn > span { grid-area:1/1; display:inline-flex; align-items:center; gap:6px; transition:opacity .35s, transform .35s var(--lj-ease); }
.ljv-btn-a { opacity:0; transform:translateY(-120%); transition-delay:1.15s !important; }
.ljv-btn-b { transition-delay:1.25s !important; }
.ljv-btn-b .material-icons-round { font-size:18px; }
html.lj-js .lj-step.is-on .ljv-btn { animation:lj-press .3s .85s both; }
@keyframes lj-press { 50% { transform:scale(.95); } }
html.lj-js .lj-step:not(.is-on) .ljv-btn { background:var(--lj-red); }
html.lj-js .lj-step:not(.is-on) .ljv-btn-a { opacity:1; transform:none; }
html.lj-js .lj-step:not(.is-on) .ljv-btn-b { opacity:0; transform:translateY(120%); }
.ljv-zero { display:inline-flex; align-items:center; gap:8px; background:#fff; border-radius:999px; padding:8px 14px; font-weight:800; font-size:13.5px; box-shadow:0 10px 24px -14px rgba(7,10,18,.3); transition-delay:1.6s !important; }
.ljv-zero .material-icons-round { color:var(--lj-ok); }
html.lj-js .lj-step:not(.is-on) .ljv-zero { opacity:0; transform:translateY(16px); }

/* 3 · aceptada + pago protegido */
.ljv-notif { width:min(320px,100%); display:flex; align-items:center; gap:12px; background:#fff; border-radius:16px; padding:12px 14px; box-shadow:0 18px 36px -18px rgba(7,10,18,.32); box-sizing:border-box; transition-delay:.25s !important; }
.ljv-notif strong { display:block; font-size:14.5px; }
.ljv-notif small { display:block; font-size:12px; color:#777; margin-top:2px; }
.ljv-notif-ic { width:38px; height:38px; border-radius:12px; background:var(--lj-ok-soft); color:var(--lj-ok); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
html.lj-js .lj-step.is-on .ljv-notif-ic .material-icons-round { animation:lj-ring .9s .7s both; }
@keyframes lj-ring { 20% { transform:rotate(16deg); } 40% { transform:rotate(-14deg); } 60% { transform:rotate(9deg); } 80% { transform:rotate(-5deg); } }
html.lj-js .lj-step:not(.is-on) .ljv-notif { opacity:0; transform:translateY(-34px) scale(.96); }
.ljv-pay { width:min(320px,100%); background:#fff; border-radius:16px; padding:14px; box-shadow:0 18px 36px -18px rgba(7,10,18,.32); box-sizing:border-box; transition-delay:.75s !important; }
.ljv-pay-top { display:flex; align-items:center; gap:12px; }
.ljv-pay-top small { display:block; font-size:12px; color:#777; }
.ljv-pay-top strong { display:block; font-size:22px; font-weight:900; letter-spacing:-.01em; }
.ljv-pay-ic { width:38px; height:38px; border-radius:12px; background:var(--lj-cream); color:var(--lj-red); display:flex; align-items:center; justify-content:center; }
.ljv-shield { margin-top:12px; display:flex; align-items:center; gap:7px; padding:8px 11px; border-radius:10px; background:rgba(184,31,34,.08); color:var(--lj-red); font-weight:800; font-size:13px; }
html.lj-js .lj-step.is-on .ljv-shield .material-icons-round { animation:lj-pop .6s 1.3s both; }
@keyframes lj-pop { 0% { transform:scale(.4); opacity:0; } 70% { transform:scale(1.25); } 100% { transform:scale(1); opacity:1; } }
html.lj-js .lj-step:not(.is-on) .ljv-pay { opacity:0; transform:translateY(24px); }

/* 4 · contrato + llaves */
.ljv-doc { position:relative; width:min(270px,100%); background:#fff; border-radius:14px; padding:16px 16px 14px; box-shadow:0 18px 36px -18px rgba(7,10,18,.32); display:flex; flex-direction:column; gap:8px; box-sizing:border-box; }
.ljv-doc-title { display:flex; align-items:center; gap:7px; font-weight:800; font-size:13.5px; margin-bottom:4px; }
.ljv-doc-title .material-icons-round { color:var(--lj-red); }
.ljv-line { display:block; height:7px; width:var(--w); border-radius:4px; background:#efe7da; }
.ljv-sign { width:150px; height:42px; margin-top:4px; }
.ljv-sign path { fill:none; stroke:var(--lj-red); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:420; stroke-dashoffset:0; transition:stroke-dashoffset 1.3s .45s ease-in-out; }
html.lj-js .lj-step:not(.is-on) .ljv-sign path { stroke-dashoffset:420; }
.ljv-signed { position:absolute; right:12px; bottom:14px; display:inline-flex; align-items:center; gap:3px; padding:3px 8px; border-radius:999px; background:var(--lj-ok-soft); color:var(--lj-ok); font-size:11.5px; font-weight:800; transition:opacity .4s 1.75s, transform .4s 1.75s var(--lj-ease); }
.ljv-signed .material-icons-round { font-size:14px; }
html.lj-js .lj-step:not(.is-on) .ljv-signed { opacity:0; transform:scale(.6); }
.ljv-key { position:absolute; top:22px; right:22px; width:52px; height:52px; border-radius:16px; background:var(--lj-red); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 14px 26px -12px rgba(184,31,34,.6); transform:rotate(-12deg); transition-delay:1.1s !important; }
.ljv-key .material-icons-round { font-size:26px; }
html.lj-js .lj-step:not(.is-on) .ljv-key { opacity:0; transform:translateY(-40px) rotate(-60deg); }
.ljv-in { display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:999px; background:var(--lj-ok); color:#fff; font-weight:800; font-size:13.5px; box-shadow:0 12px 24px -12px rgba(22,128,74,.6); transition-delay:2s !important; }
html.lj-js .lj-step:not(.is-on) .ljv-in { opacity:0; transform:translateY(18px) scale(.95); }

/* Pie */
.lj-foot { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:40px; }
.lj-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:50px; padding:0 26px; border-radius:999px; font-weight:700; font-size:15px; text-decoration:none; transition:transform .25s var(--lj-ease), background .25s, color .25s, box-shadow .25s; white-space:nowrap; }
.lj-btn .material-icons-round { font-size:19px; }
.lj-btn--red { background:var(--lj-red); color:#fff; box-shadow:0 12px 28px -12px rgba(184,31,34,.6); }
.lj-btn--red:hover { background:var(--lj-dred); transform:translateY(-2px); }
.lj-btn--ghost { border:2px solid var(--lj-ink); color:var(--lj-ink); background:#fff; }
.lj-btn--ghost:hover { background:var(--lj-ink); color:#fff; transform:translateY(-2px); }
.lj-btn:active { transform:scale(.98); }
a.lj-btn--ghost:link, a.lj-btn--ghost:visited { color:var(--lj-ink); }
a.lj-btn--ghost:hover { color:#fff; }

/* ── Ordenador: tarjetas que se apilan al hacer scroll ───────────────── */
@media (min-width:900px) {
  .lj-steps { gap:7vh; padding-bottom:4vh; }
  .lj-step { position:sticky; top:calc(var(--lj-top, 96px) + var(--n) * 18px); }
  .lj-card { grid-template-columns:1.05fr 1fr; gap:44px; align-items:center; padding:20px 40px 20px 20px; }
  .lj-visual { min-height:0; aspect-ratio:4/3.1; }
  .lj-copy { padding:0; }
  /* La de debajo se encoge y se apaga con un velo opaco (con opacity se transparentaría y se mezclarían los textos). */
  .lj-card { position:relative; }
  .lj-card::after { content:""; position:absolute; inset:-1px; border-radius:inherit; background:rgba(248,240,227,.72); opacity:0; transition:opacity .6s var(--lj-ease); pointer-events:none; }
  .lj-step.is-past .lj-card { transform:scale(.95); }
  .lj-step.is-past .lj-card::after { opacity:1; }
}
@media (max-width:480px) {
  .lj { padding:60px 0 64px; }
  .lj-wrap { padding:0 16px; }
  .lj-head { margin-bottom:30px; }
  .lj-head p { font-size:15px; }
  .lj-visual { min-height:250px; padding:22px 14px; }
  .ljv-room-img { aspect-ratio:16/8; }
  .lj-copy p { font-size:15px; }
  .lj-foot .lj-btn { width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  .lj-card, .lj-visual > *, .ljv-thumb, .ljv-sign path { transition:none !important; animation:none !important; }
  .ljv-caret { animation:none; }
}