/* ============================================================
   landing-fotomaton.css — /fotomaton/ + /en/photobooth/ landing layout.
   Loaded (render-blocking) only when the hero block has layout 'video'
   (_boot.php → body.lp-landing, _hero_video.php, lp_* blocks,
   _lp_sticky.php). Ported from the Claude Design handoff
   "Fotomaton Landing v3" (landing-fotomaton.css + video-stories.css):
   final rendered values only, dead/superseded rules dropped.

   Scope rules
   - Every section root and overlay root carries class `lp`
     (.hv, .lp-mad, .lp-try, .vst, …, #sim, #zoomBox, #lpSticky). Component rules
     start with an .lp-* / .hv / .vst class; element resets are wrapped in
     :where(.lp) so they stay at specificity 0.
   - Page-level rules start with body.lp-landing or html.lp-lock only.
     Nothing here may restyle the footer, FAB, drawer or dm-sheet modal.
   - The hero keeps the site font ('Plus Jakarta Sans', 400/500/700/800);
     every other .lp root uses the 'Jakarta LP' alias for true 600.

   Breakpoints: mobile first; desktop ≥900px; extra steps at 900–1199 and
   ≥1200. (Self-contained: the site scale is 600/768/1024/1200.)

   z-index map (site: FAB 950, topbar 1100, drawer 1190/1200,
   dm-overlay 1200)
     .lp-sticky 50 · builder sheet backdrop 1101 / sheet 1102 ·
     .lp-sim 1110 · .lp-zoom 1120

   JS hooks (landing-fotomaton.js): html.lp-lock, .is-on/.is-past (stories),
   --k on .lp-dz__card (designs deck depth), .is-playing (hero
   video, real-wedding card), .lp-try--still, .is-sheet/.is-sheet-on (builder), .is-bump,
   .is-done/.go/.pop (simulator), .is-swap/.is-playing (reviews), .is-open
   (FAQ), .is-off/.is-moving/.is-flip/.is-back (stories), .is-on/.is-done +
   .is-start (story bars .vst__bars), .is-on (sticky CTA).
   ============================================================ */


/* ── 1. Fonts ──────────────────────────────────────────────────
   Page-local alias of the self-hosted variable Jakarta: the site declares
   it only at 400/500/700/800, so weight 600 would render as 700. Same
   cached file. Builder print fonts = the client design editor's
   (light copies: /assets/css/design-fonts-lp.css, injected lazily by the JS); the CSS below
   only names them, with fallbacks. */
@font-face{font-family:'Jakarta LP';font-style:normal;font-weight:400 800;font-display:optional;src:url(/assets/fonts/jakarta/jakarta.woff2) format('woff2')}


/* ── 2. Tokens (site tokens --text/--muted/--teal/--bg-alt are reused) ── */
.lp{
  --lp-teal-d:#2f7a80;
  --lp-brown:#8B6755;
  --lp-line:#ececef;
  --lp-ink:#0d0d0f;
  --lp-rule:#dedee3;          /* included-list rules */
  --lp-cream:#f7f5f1;         /* builder section */
  --lp-sand:#f6f1ea;          /* stories section */
  --lp-warm-line:#e3dfd7;     /* builder inputs + summary rule */
  --lp-seg:#ebe7df;           /* segmented-control track */
  -webkit-font-smoothing:antialiased;
}
.lp:not(.hv){font-family:'Jakarta LP','Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Arial,sans-serif}


/* ── 3. Page shell + scoped resets ───────────────────────────── */
/* Blocks render inside <main class="container stack">, which is 430px /
   1200px / 900px wide, padded, gapped and overflow-x:hidden below 768px
   (that last one would stop the pinned stages from sticking). Beats
   main.css (0,5,1) and hero-svc.css .container. */
body.lp-landing:not(.page-home):not(.cfg-page):not(.order-page) main.container.stack{max-width:none!important;padding:0;margin:0;display:block;gap:0;overflow:visible}
/* dm-sheet locks with body.tile-lock{overflow:hidden} + body position:fixed;
   an overflow on <body> makes it the sticky scroller and un-pins the
   stages. The viewport stays locked through html.tile-lock / html.lp-lock. */
body.lp-landing.tile-lock{overflow:visible}
html.lp-lock{overflow:hidden}
html.lp-lock body.lp-landing{overflow:visible}
/* No site scroll-to-top button on the landing (not in the design): on mobile
   it sits on the sticky CTA pill, at 900–1300px it covers builder/FAQ/play
   controls that reach the right edge. */
body.lp-landing .scroll-fab{display:none}

:where(.lp) :where(h1,h2,h3,p,figure,blockquote,ul){margin:0}
:where(.lp) :where(img,video){display:block;max-width:100%}
/* Templates emit width/height attributes; keep the prototype's auto
   heights (aspect-ratio rules below) unless a rule sets a height. */
:where(.lp) :where(img){height:auto}
/* <picture> wrappers must not add boxes: the prototype styles bare <img>.
   Once the picture is display:contents its <source> children would render
   as (empty) flex items and eat a gap — hide them. */
:where(.lp) picture{display:contents}
:where(.lp) picture > source{display:none}


/* ── 4. Primitives ───────────────────────────────────────────── */
.lp-wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.lp-sec{padding:72px 0}
.lp-eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:12px}
.lp-h2{font-size:clamp(32px,7.5vw,56px);font-weight:500;letter-spacing:-.035em;line-height:1.04;text-wrap:balance}
.lp-lead{font-size:16px;line-height:1.65;color:var(--muted);max-width:520px;text-wrap:pretty}
.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 30px;border-radius:999px;background:var(--teal);color:#fff;font-size:16px;font-weight:600;text-decoration:none;border:0;cursor:pointer;font-family:inherit;transition:transform .2s ease,background .2s ease}
.lp-btn:hover{color:#fff;background:var(--lp-teal-d)}
.lp-btn--ghost{background:transparent;color:var(--text);border:1.5px solid var(--text)}
.lp-btn--ghost:hover{background:var(--text);color:#fff}
.lp-btn--light{background:#fff;color:var(--text)}
.lp-btn--light:hover{background:#eee;color:var(--text)}
.lp-btn:disabled{opacity:.5;cursor:default;pointer-events:none}
@media (min-width:900px){
  .lp-wrap{padding:0 48px}
  .lp-sec{padding:120px 0}
  .lp-lead{font-size:18px}
}


/* ── 5. Hero (.hv) — full-screen video, above the fold ──────── */
/* The poster <img> (LCP) and the <video> fill the frame; the video stays
   transparent until JS marks it .is-playing, so the poster never blinks. */
.hv{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;background:#111}
.hv__media{position:absolute;inset:0}
.hv__media img,.hv__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hv__video{opacity:0;transition:opacity .4s ease}
.hv__video.is-playing{opacity:1}
.hv__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.06) 36%,rgba(0,0,0,.78) 100%)}
/* z 3: above .hv__body (z 2), which becomes a full-height column from 900px and
   would otherwise swallow clicks on the reviews link. */
.hv__badges{position:absolute;left:0;right:0;top:22px;z-index:3;display:flex;justify-content:center;gap:8px}
.hv__badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;padding:6px 14px;border-radius:999px;color:#fff;text-decoration:none;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
a.hv__badge:hover{background:rgba(255,255,255,.28);color:#fff}
.hv__body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 26px 40px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;color:#fff}
.hv__title{font-size:clamp(34px,9vw,42px);font-weight:500;line-height:1.05;letter-spacing:-.03em;margin:0;text-wrap:pretty}
.hv__sub{font-size:15px;line-height:1.55;color:rgba(255,255,255,.82);max-width:300px;margin:0;text-wrap:pretty}
.hv__btns{display:flex;flex-direction:column;gap:10px;width:100%;max-width:300px;margin-top:6px}
/* Site CTAs (.hero-svc__cta*, .laser-border live in _head.php critical
   CSS); on the video the WhatsApp outline turns white. */
.hv__btns .hero-svc__cta{width:100%}
.hv__btns .hero-svc__cta--wa{color:#fff;border-color:rgba(255,255,255,.7)}
@media (min-width:900px){
  .hv__scrim{background:linear-gradient(90deg,rgba(0,0,0,.76) 0%,rgba(0,0,0,.46) 46%,rgba(0,0,0,0) 80%)}
  .hv__badges{left:70px;right:auto;top:50%;transform:translateY(-200px);justify-content:flex-start}
  .hv__body{top:0;bottom:0;right:auto;width:600px;padding:0 0 0 70px;justify-content:center;align-items:flex-start;text-align:left;gap:18px}
  .hv__title{font-size:clamp(48px,4.4vw,62px)}
  /* Two lines at most: the badge sits at a fixed offset above the centred
     body, so a third subtitle line pushes the H1 up under it. */
  .hv__sub{font-size:17px;max-width:520px}
  .hv__btns{flex-direction:row;max-width:none;width:auto}
  .hv__btns .hero-svc__cta{width:210px}
}


/* ── 6. Madera (.lp-mad) + Prueba (.lp-try) ─────────────────────
   Claude Design "new blocks" handoff (2026-09-27). The .lp-mad rules are the
   handoff's own cascade, kept in source order (later mobile blocks override
   earlier ones on purpose); only --line → --lp-line. Pins: % of the photo,
   the labels must never cover the flash. */
.lp-mad{background:#fff}
.lp-mad__grid{display:grid;gap:28px}
.lp-mad__media{position:relative;margin:0 -24px;background:#efeeec}
.lp-mad__media picture,.lp-mad__detail picture{display:block}
.lp-mad__full{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.lp-mad__pin{position:absolute;left:var(--x);top:var(--y);display:flex;align-items:center;gap:8px;transform:translate(-7px,-50%);pointer-events:none}
.lp-mad__pin i{width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.45),0 2px 8px rgba(0,0,0,.25);flex:none;animation:lp-madPulse 2.4s ease-in-out infinite}
.lp-mad__pin b{font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--text);background:rgba(255,255,255,.92);padding:6px 10px;border-radius:999px;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.08)}
@keyframes lp-madPulse{50%{box-shadow:0 0 0 8px rgba(255,255,255,.15),0 2px 8px rgba(0,0,0,.25)}}
.lp-mad__detail{position:absolute;right:16px;bottom:-40px;width:46%;margin:0;background:#fff;padding:6px 6px 10px;border-radius:14px;box-shadow:0 18px 40px rgba(92,64,48,.18)}
.lp-mad__detail img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 45%;border-radius:9px}
.lp-mad__detail span{display:block;font-size:11px;font-weight:600;color:var(--muted);padding:8px 4px 0}
.lp-mad__body{padding-top:36px}
.lp-mad__facts{display:grid;gap:0;margin-top:24px;border-top:1px solid var(--lp-line)}
.lp-mad__facts div{display:grid;gap:2px;padding:14px 0;border-bottom:1px solid var(--lp-line)}
.lp-mad__facts b{font-size:16px;font-weight:700}
.lp-mad__facts span{font-size:14px;color:var(--muted)}
@media (min-width:900px){
  .lp-mad__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:72px;row-gap:0;align-items:start}
  .lp-mad__media{grid-column:1;grid-row:1/3;margin:0;border-radius:24px;overflow:visible}
  .lp-mad__full{border-radius:24px}
  .lp-mad__hd{grid-column:2;padding-top:40px}
  .lp-mad__body{grid-column:2;padding-top:24px}
  .lp-mad__detail{right:-40px;bottom:-48px;width:42%}
  .lp-mad__pin b{font-size:13px}
}
.lp-mad__screen{position:absolute;left:16px;bottom:-40px;width:34%;background:#fff;padding:6px 6px 10px;border-radius:14px;box-shadow:0 18px 40px rgba(92,64,48,.18);z-index:2}
.lp-mad__screen video{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:9px;background:#111}
.lp-mad__screen span{display:block;font-size:11px;font-weight:600;color:var(--muted);padding:8px 4px 0}
/* Mobile: the rear screen is its own large block under the photo (scale) */
@media (max-width:899px){
  .lp-mad__detail{bottom:auto;top:calc(100vw - 24vw)}
  .lp-mad__screen{position:relative;left:auto;bottom:auto;width:auto;margin:calc(12vw + 64px) 24px 0;padding:0;background:none;box-shadow:none;border-radius:0}
  .lp-mad__screen video{aspect-ratio:4/5;border-radius:20px;box-shadow:0 24px 50px rgba(0,0,0,.18)}
  .lp-mad__screen span{font-size:14px;font-weight:700;color:var(--text);padding:12px 2px 0}
  .lp-mad__body{padding-top:28px}
}
@media (max-width:899px){
  .lp-mad__media{background:none}
  .lp-mad__full{background:#efeeec}
  .lp-mad__detail{top:auto;bottom:-56px;right:16px;width:44%}
  .lp-mad__screen{margin:84px 0 0;padding:0;background:#e8e8e8;border-radius:22px;overflow:hidden;box-shadow:none}
  .lp-mad__screen video{aspect-ratio:3/4;object-fit:contain;border-radius:0;box-shadow:none;background:#e8e8e8}
  .lp-mad__screen span{padding:0 20px 18px;font-size:15px;background:#e8e8e8}
  .lp-mad__body{padding-top:8px}
}
@media (min-width:900px){.lp-mad__screen{position:relative;left:auto;bottom:auto;grid-column:1;grid-row:1/3;align-self:end;justify-self:start;width:170px;margin:0 0 -48px -40px;z-index:3}}
@media (max-width:899px){
  .lp-mad__screen{position:relative}
  .lp-mad__screen video{aspect-ratio:3/4;object-fit:cover;object-position:50% 100%;transform:scale(1.02);transform-origin:50% 100%}
  .lp-mad__screen span{position:absolute;left:20px;top:18px;padding:0;background:none;font-size:14px}
}
.lp-mad__screen span b{display:block;color:var(--text);font-weight:700}
@media (max-width:899px){
  .lp-mad__screen{overflow:visible;background:none}
  .lp-mad__screen video{border-radius:22px}
  .lp-mad__screen span{position:static;display:block;padding:14px 2px 0;font-size:14px;font-weight:400;line-height:1.45;color:var(--muted);background:none}
  .lp-mad__screen span b{font-size:16px;margin-bottom:2px}
}
@media (min-width:900px){.lp-mad__screen span{font-size:11px;line-height:1.35}.lp-mad__screen span b{font-size:12px;margin-bottom:2px}}
@media (max-width:899px){
  .lp-mad__screen .lp-mad__cap{display:none}
  .lp-mad__screen .lp-mad__pin--scr{position:absolute;display:flex;padding:0;background:none;font-size:inherit;line-height:1}
  .lp-mad__screen .lp-mad__pin--scr b{display:inline-block;white-space:normal;max-width:150px;line-height:1.25;font-size:12px;font-weight:600;margin:0;color:var(--text)}
  .lp-mad__screen .lp-mad__pin--scr{left:var(--x)!important;top:var(--y)!important;transform:translate(-7px,-50%)!important}
  .lp-mad__screen .lp-mad__pin--scr b{border-radius:10px;padding:7px 10px}
}
@media (min-width:900px){.lp-mad__screen .lp-mad__pin--scr{display:none}}
/* The flash pin (first in the photo) keeps its dot on the dish, but its label
   is nudged right so it never covers the dish rim once the photo is wider than
   ~520px (tablet full-bleed up to 899px; ≥900 the photo is ~541px). */
.lp-mad__media > .lp-mad__pin:first-of-type b{margin-left:clamp(0px,calc(2.9vw - 7px),16px)}
@media (min-width:900px){.lp-mad__media > .lp-mad__pin:first-of-type b{margin-left:6px}}
/* Narrow phones: 2px less padding lets "Pantalla trasera:" fit on one line. */
@media (max-width:374px){.lp-mad__screen .lp-mad__pin--scr b{padding:7px 8px}}

/* Prueba: simulator teaser. The model sits in a 3:5 frame; .lp-try__scr (a
   button) covers exactly the model's screen — same numbers as .lp-sim__screen.
   Slideshow = 6 × 3 s pure CSS (--i per slide). */
.lp-try{background:#f6f1ea}
.lp-try__grid{display:grid;gap:36px;align-items:center}
.lp-try__txt{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.lp-try__btn{display:inline-flex;align-items:center;gap:10px;margin-top:8px}
.lp-try__note{font-size:13px;color:var(--muted)}
.lp-try__booth{position:relative;justify-self:center;width:min(100%,440px);aspect-ratio:3/5;overflow:hidden;container-type:inline-size;-webkit-mask-image:linear-gradient(180deg,#000 92%,transparent 100%);mask-image:linear-gradient(180deg,#000 92%,transparent 100%)}
.lp-try__layer{position:absolute;width:96cqw;aspect-ratio:1080/1920;left:50%;top:-2cqw;transform:translateX(-50%)}
.lp-try__img{position:absolute;inset:0;width:100%;height:100%;display:block;filter:drop-shadow(0 30px 40px rgba(92,64,48,.3))}
.lp-try__scr{position:absolute;left:35.9%;top:63.3%;width:28.9%;height:21.9%;padding:0;border:0;overflow:hidden;background:#111;border-radius:3px;cursor:pointer;display:block}
.lp-try__scr:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.lp-try__scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:lp-tryShow 18s infinite;animation-delay:calc(var(--i)*3s)}
@keyframes lp-tryShow{0%{opacity:0;transform:scale(1.08)}3%{opacity:1}17%{opacity:1}20%{opacity:0;transform:scale(1)}100%{opacity:0}}
.lp-try__scr::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.55));z-index:1}
.lp-try__tap{position:absolute;left:0;right:0;bottom:10%;display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff;font-size:clamp(10px,2.8cqw,13px);font-weight:700;line-height:1.25;text-align:center;letter-spacing:.02em;text-shadow:0 2px 10px rgba(0,0,0,.6);z-index:2}
.lp-try__tap i{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:lp-tryTap 1.8s ease-out infinite}
@keyframes lp-tryTap{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6);transform:scale(.9)}50%{transform:scale(1)}100%{box-shadow:0 0 0 22px rgba(255,255,255,0);transform:scale(.9)}}
.lp-try__scr:hover .lp-try__tap i{background:#fff}
@media (min-width:900px){
  .lp-try__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px}
  .lp-try__booth{width:100%;max-width:min(540px,54vh);max-width:min(540px,54svh)}
}
/* Still slideshow (reduced motion, or .lp-try--still = save-data/2G from JS): only
   the first print shows, and display:none keeps the lazy others from loading. */
.lp-try--still .lp-try__scr img{animation:none}
.lp-try--still .lp-try__scr img:first-child{opacity:1}
.lp-try--still .lp-try__scr img:not(:first-child){display:none}
@media (prefers-reduced-motion:reduce){
  .lp-mad__pin i,.lp-try__tap i{animation:none}
  .lp-try__scr img{animation:none}
  .lp-try__scr img:first-child{opacity:1}
  .lp-try__scr img:not(:first-child){display:none}
}


/* ── 7. Video stories (.vst) ──────────────────────────────────
   Light transitions only (transform/opacity), no blurred backdrop.
   <900px  pinned stage too: one screen of scroll per clip; one swipe = one
           clip (landing-fotomaton.js Pin). The clip slides through the full
           screen the same way (8px seam); the section title shows on clip 1,
           the story bars (beside the menu button) from clip 2 on.
   ≥900px  pinned stage: one scroll step (70vh) per clip. The card frame
           (.vst__stage::before) stays put and the clips slide through it like
           a Stories feed: the next one rises from below, going back it comes
           down from above (.is-past); a 14px seam keeps the two clips apart
           mid-slide. Story bars sit on the frame; the caption travels the
           same way.
   Both: .vst__bars = one segment per clip (JS): .is-on fills, .is-done stays
   full but dimmed, so the current clip is the only bright segment.
   --vt = the slide duration; the delayed hide of the clip leaving and the
   bar fill read it too, so they cannot drift apart. */
.vst{position:relative;background:var(--lp-ink);--vt:.55s}
.vst__amb,.vst__n,.vst__bars{display:none}
.vst__layer video{width:100%;height:100%;object-fit:cover}
/* The section H2, dressed as the eyebrow. */
.vst__eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;line-height:normal;text-transform:uppercase;color:#fff}
.vst__idx{flex:none;white-space:nowrap;font-size:11px;font-weight:700;letter-spacing:.14em;color:rgba(255,255,255,.7)}
.vst__title{font-size:32px;font-weight:500;letter-spacing:-.03em;line-height:1.06;margin:0 0 10px;color:#fff;text-wrap:pretty}
.vst__txt{font-size:15px;line-height:1.6;color:rgba(255,255,255,.84);margin:0;max-width:340px}
/* "Keep scrolling" cue — mouse icon above the label. */
.vst__scroll{display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;transition:opacity .4s}
.vst__scroll i{position:relative;width:22px;height:34px;border:2px solid rgba(255,255,255,.85);border-radius:12px}
.vst__scroll i::after{content:"";position:absolute;left:50%;top:6px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:lp-vstWheel 1.5s ease-in-out infinite}
.vst__scroll.is-off{opacity:0;pointer-events:none}
/* Story bars (placed by the layouts below). The fill is a scaleX'd
   pseudo-element, so filling / draining is a compositor transform. */
/* Slide markers (.vst__bars): phones = a row at the top, beside the menu button; desktop =
   a vertical rail at the screen's right edge, clear of the clip. One segment per slide:
   .is-on fills, .is-done stays full but dimmed. */
.lp-bars{display:flex;gap:4px;pointer-events:none}
.lp-bars i{flex:1;height:3px;border-radius:2px;overflow:hidden;background:rgba(255,255,255,.34)}
.lp-bars i::after{content:"";display:block;width:100%;height:100%;background:#fff;transform:scaleX(0);transform-origin:0 50%;transition:transform var(--vt,.55s) cubic-bezier(.4,0,.2,1),opacity .3s ease}
.lp-bars i.is-on::after{transform:none}
.lp-bars i.is-done::after{transform:none;opacity:.5}
@media (max-width:899px){
  .lp-bars i{background:rgba(255,255,255,.38);box-shadow:0 0 4px rgba(0,0,0,.3)}
}
@media (min-width:900px){
  .lp-bars{position:absolute;z-index:7;right:max(22px,2vw);top:50%;transform:translateY(-50%);flex-direction:column;gap:6px;width:3px;height:min(44vh,300px)}
  .lp-bars i{width:3px;height:auto}
  .lp-bars i::after{transform:scaleY(0);transform-origin:50% 0}
}
@media (max-width:899px){
  .vst{height:calc(var(--n,6) * 100vh + 100vh);height:calc(var(--n,6) * 100svh + 100svh)}
  .vst__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
  /* One gradient over the whole stage (per-layer ones doubled up mid-slide). */
  .vst__stage::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.2) 50%,rgba(0,0,0,.85) 100%)}
  .vst__layer{position:absolute;inset:0;overflow:hidden;visibility:hidden;transition:visibility 0s linear var(--vt)}
  .vst__layer.is-on{visibility:visible;transition:none}
  .vst__layer video{display:block;transform:translateY(calc(100% + 8px));transition:transform var(--vt) cubic-bezier(.4,0,.2,1)}
  .vst__layer.is-past video{transform:translateY(calc(-100% - 8px))}
  .vst__layer.is-on video{transform:none}
  .vst__scrim,.vst__idx{display:none}
  .vst__panel{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;color:#fff}
  /* The section title, clear of the fixed menu button; clip 1 only (the bars take its place). */
  .vst__meta{padding:34px 74px 0 80px;transition:opacity .3s ease}
  .vst__bars:not(.is-start) ~ .vst__panel .vst__meta{opacity:0}
  .vst__slides{position:relative;display:grid}
  .vst__slide{grid-area:1 / 1;align-self:end;padding:0 24px calc(96px + env(safe-area-inset-bottom,0px));opacity:0;transform:translateY(40px);transition:opacity .2s ease,transform var(--vt) cubic-bezier(.4,0,.2,1)}
  .vst__slide.is-on{opacity:1;transform:none;transition:opacity .35s ease .12s,transform var(--vt) cubic-bezier(.2,.75,.15,1) .05s}
  .vst__slide.is-past{transform:translateY(-40px)}
  .vst__n{display:block;margin-bottom:10px;font-size:11px;font-weight:700;letter-spacing:.14em;color:rgba(255,255,255,.7)}
  .vst__scroll{display:none}   /* its spot is under the sticky CTA pill */
  .vst__bars{display:flex;position:absolute;top:39px;left:84px;right:76px;z-index:7;height:3px;transition:opacity .3s ease}
  .vst__bars.is-start{opacity:0}
}
@media (min-width:900px){
  .vst{height:calc(var(--n,6) * 70vh + 100vh);--fh:min(84svh,calc((100vw - 160px) * .5 * 16 / 9));--fw:calc(var(--fh) * 9 / 16);--fy:calc((100svh - var(--fh)) / 2);--fx:max(6vw,calc(25% - var(--fw) / 2))}
  .vst__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
  .vst__stage::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(80% 90% at 70% 50%,rgba(40,36,34,.55) 0%,rgba(13,13,15,.6) 70%,rgba(13,13,15,.9) 100%);pointer-events:none}
  /* The frame stays put (it carries the shadow); every layer is a clip
     window of the same size stacked on it and its video slides inside. Only
     the active layer and, for the length of its slide, the one leaving
     (visibility hidden after --vt) are visible, so clips skipped by a fast
     scroll never flash through. Transform-only, compositor animated. */
  .vst__stage::before{content:"";position:absolute;top:var(--fy);right:var(--fx);width:var(--fw);height:var(--fh);z-index:2;border-radius:28px;background:#1d1c1f;box-shadow:0 40px 90px rgba(0,0,0,.55)}
  .vst__layer{position:absolute;top:var(--fy);right:var(--fx);width:var(--fw);height:var(--fh);border-radius:28px;overflow:hidden;z-index:2;visibility:hidden;transition:visibility 0s linear var(--vt)}
  .vst__layer.is-on{visibility:visible;transition:none}
  .vst__layer video{display:block;border-radius:28px;transform:translateY(calc(100% + 14px));transition:transform var(--vt) cubic-bezier(.4,0,.2,1)}
  .vst__layer.is-past video{transform:translateY(calc(-100% - 14px))}
  .vst__layer.is-on video{transform:none}
  /* Story bars over the top of the frame (stage-anchored: they stay put
     while the clips slide underneath). */
  .vst__bars{display:flex}   /* the vertical rail at the right edge (.lp-bars) */
  .vst__scrim{display:none}
  .vst__panel{position:absolute;top:0;bottom:0;left:0;width:50%;z-index:6;display:flex;flex-direction:column;justify-content:center;padding:0 4vw 0 max(6vw,calc((100vw - 1240px) / 2));color:#fff}
  .vst__meta{display:flex;align-items:center;gap:12px;margin-bottom:22px}
  .vst__idx{font-variant-numeric:tabular-nums}
  .vst.is-flip .vst__idx{animation:lp-vstIdx .5s cubic-bezier(.2,.7,.2,1)}
  .vst.is-back.is-flip .vst__idx{animation-name:lp-vstIdxB}
  /* Captions share one grid cell: the box is as tall as the longest caption. */
  .vst__slides{position:relative;display:grid;min-height:250px;overflow:hidden}
  /* The caption travels with the clip: next from below, back from above. */
  .vst__slide{grid-area:1 / 1;opacity:0;transform:translateY(64px);transition:opacity .2s ease,transform var(--vt) cubic-bezier(.4,0,.2,1);pointer-events:none}
  .vst__slide.is-on{opacity:1;transform:none;pointer-events:auto;transition:opacity .35s ease .12s,transform var(--vt) cubic-bezier(.2,.75,.15,1) .05s}
  .vst__slide.is-past{transform:translateY(-64px)}
  .vst__title{font-size:clamp(40px,3.8vw,60px);margin-bottom:16px}
  .vst__txt{font-size:17px;line-height:1.7;max-width:440px}
  .vst__scroll{position:absolute;z-index:7;left:max(6vw,calc((100vw - 1240px) / 2));bottom:6vh;bottom:6svh;align-items:center;gap:12px;color:rgba(255,255,255,.85);font-size:13px;font-weight:600;letter-spacing:.08em;transition:opacity .3s}
  .vst__scroll i{border-color:rgba(255,255,255,.8)}
  .vst__scroll i::after{height:7px;animation:lp-vstWheelD 1.6s ease-in-out infinite}
  .vst.is-moving .vst__scroll i::after{animation-duration:.6s}
}


/* ── 8. Studio-quality photos: 13-tile mosaic ───────────────────
   t2 = 2 rows tall (the 9:16 portraits), w2 = 2 cols wide from 900px,
   wm = 2 cols wide on mobile too. The media order in content.php is chosen
   so both the 2-col and the 4-col grid close without gaps. */
.lp-photos__hd{display:flex;flex-direction:column;gap:14px;margin-bottom:32px}
.lp-mosaic{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:160px;gap:8px}
.lp-mosaic figure{border-radius:14px;overflow:hidden}
.lp-mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.lp-mosaic .t2{grid-row:span 2}
.lp-mosaic .wm{grid-column:span 2}
@media (min-width:900px){
  .lp-photos__hd{flex-direction:row;justify-content:space-between;align-items:flex-end;margin-bottom:44px}
  .lp-mosaic{grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:12px}
  .lp-mosaic figure{border-radius:18px}
  .lp-mosaic .w2{grid-column:span 2}
}


/* ── 9. Designs (.lp-dz) — a deck of sticky cards ────────────
   Native scroll, no stepping: every card sticks at its own top (--i steps
   further down), so the next card slides up over the previous one and the
   covered cards peek out above it as a stack. Heights shrink by the same step,
   so all bottoms line up and the deck leaves the screen in one piece. JS sets
   --k (0..3: how many cards lie on top) → the covered card narrows and darkens.
   Card colour = the design's bg (--bg). */
.lp-dz{--dz-top:72px;--dz-step:9px;--dz-h:min(680px,calc(100vh - 72px - 104px));--dz-h:min(680px,calc(100svh - 72px - 104px - env(safe-area-inset-bottom,0px)))}
.lp-dz__hd{margin-bottom:28px}
.lp-dz__deck{position:relative}
.lp-dz__card{--k:0;position:sticky;top:calc(var(--dz-top) + var(--i,0) * var(--dz-step));height:calc(var(--dz-h) - var(--i,0) * var(--dz-step));margin:0 0 18px;border-radius:26px;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;background:var(--bg,#8a3b2e);color:#fff;box-shadow:0 -10px 30px rgba(0,0,0,.14),0 18px 40px rgba(0,0,0,.12);transform-origin:50% 0;transform:scale(calc(1 - var(--k) * .045));will-change:transform}
.lp-dz__card:last-child{margin-bottom:0}
/* soft light + a shade that deepens as the card is covered */
.lp-dz__card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(70% 50% at 50% 62%,rgba(255,255,255,.16),rgba(255,255,255,0) 70%),linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.24))}
.lp-dz__card::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:#000;opacity:calc(var(--k) * .16)}
.lp-dz__cap{position:relative;z-index:2;padding:20px 22px 0}
.lp-dz__n{margin-right:8px;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.6)}
.lp-dz__cap span{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.lp-dz__cap b{display:block;font-size:19px;font-weight:600;letter-spacing:-.01em;margin-top:5px}
.lp-dz__cap p{display:none;margin:8px 0 0;font-size:15px;line-height:1.6;color:rgba(255,255,255,.75)}
.lp-dz__img{position:relative;flex:1;min-height:0;margin:6px 14px 14px}
.lp-dz__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 22px 26px rgba(0,0,0,.3))}
/* The design images carry a transparent margin around the print (~10-19%): scale into it. */
.lp-dz__img img{transform:scale(1.12)}
@media (min-width:900px){
  .lp-dz{--dz-top:88px;--dz-step:14px;--dz-h:min(640px,calc(100vh - 88px - 56px))}
  .lp-dz__hd{margin-bottom:44px}
  .lp-dz__card{flex-direction:row;align-items:stretch;margin-bottom:28px;border-radius:32px}
  .lp-dz__cap{flex:0 0 44%;display:flex;flex-direction:column;justify-content:center;padding:56px 24px 56px 64px}
  .lp-dz__n{display:block;margin:0 0 22px;font-size:12px}
  .lp-dz__cap b{font-size:clamp(28px,2.6vw,36px);font-weight:500;letter-spacing:-.025em;line-height:1.1;margin-top:10px}
  .lp-dz__cap p{display:block;font-size:17px;margin-top:14px;max-width:400px}
  .lp-dz__img{margin:28px 40px 28px 0}
}
@media (prefers-reduced-motion:reduce){.lp-dz__card{transform:none;will-change:auto}}

/* Pinned on a middle step (JS .is-hold): no native pan at all, so a swipe is
   always the stepper's (landing-fotomaton.js Pin); at the first/last step the
   page may still scroll on natively. */
@media (max-width:899px){.vst.is-hold .vst__stage{touch-action:none}}
/* × on a pinned section (both widths, JS .is-pin): skip it; the steps stay off until the
   page has passed the section the other way. Same button as the simulator's. */
.lp-sim__x--pin{z-index:8;visibility:hidden;opacity:0;transition:opacity .25s ease,visibility 0s linear .25s}
.vst.is-pin .lp-sim__x--pin{visibility:visible;opacity:1;transition:opacity .25s ease}
/* ⚠ Never make <html> a scroll-snap container on this page: iOS Safari then
   gives the WHOLE page its fast deceleration (any root snap point, even
   proximity — WebKit bug 243582), i.e. no momentum anywhere. The pinned
   sections step with JS instead (landing-fotomaton.js Pin). */


/* ── 10. Builder (.lp-fmt) — live print preview ───────────────
   Desktop: stage + controls side by side. Below 900px the grid is a
   bottom sheet opened from #fmtOpen (see 10.8). The stage is also cloned
   into the simulator (.lp-sim__print) and the zoom (.lp-zoom__print), so
   stage rules are not scoped to the section. */

/* 10.1 Section, header, mobile teaser + open button */
.lp-fmt{background:var(--lp-cream)}
.lp-fmt__hd{display:flex;flex-direction:column;gap:14px;margin-bottom:34px;max-width:640px}
.lp-fmt__teaser,.lp-fmt__open,.lp-fmt__bar,.lp-fmt__back{display:none}

/* 10.2 Grid */
.lp-fmt__grid{display:grid;gap:28px}

/* 10.3 Stage + papers. Strip (5×15) and photo (10×15) share the same
   15 cm height; sizes are container units of the stage width. */
.lp-fmt__stage{position:relative;height:460px;border-radius:26px;background:radial-gradient(120% 90% at 50% 40%,#fff 0%,#efece6 100%);overflow:hidden;display:flex;align-items:center;justify-content:center;container-type:inline-size;cursor:zoom-in}
.lp-fmt__badge{position:absolute;left:16px;top:16px;z-index:3;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);background:#fff;padding:7px 12px;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.06);transition:opacity .3s}
.lp-fmt__stage:not([data-format="both"]) .lp-fmt__badge{opacity:0}
.lp-fmt__paper{position:absolute;background:#fff;box-shadow:0 2px 3px rgba(0,0,0,.06),0 18px 40px rgba(0,0,0,.16);display:flex;flex-direction:column;padding:5%;gap:4%;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .35s ease,left .55s cubic-bezier(.2,.8,.2,1)}
.lp-fmt__strip{transform:rotate(-5deg)}
.lp-fmt__photo{transform:rotate(4deg)}
.lp-fmt__stage .lp-fmt__strip{width:22cqw;height:66cqw;left:calc(50% - 27cqw);padding:.9cqw;gap:.9cqw}
.lp-fmt__stage .lp-fmt__photo{width:44cqw;height:66cqw;left:calc(50% - 4cqw);padding:1.4cqw;gap:1.2cqw}
.lp-fmt__stage[data-format="strip"] .lp-fmt__strip{left:calc(50% - 11cqw);transform:rotate(-2deg) scale(1.2)}
.lp-fmt__stage[data-format="strip"] .lp-fmt__photo{opacity:0;transform:rotate(12deg) translate(120px,40px);pointer-events:none}
.lp-fmt__stage[data-format="photo"] .lp-fmt__photo{left:calc(50% - 22cqw);transform:rotate(2deg) scale(1.2)}
.lp-fmt__stage[data-format="photo"] .lp-fmt__strip{opacity:0;transform:rotate(-14deg) translate(-120px,40px);pointer-events:none}
.lp-fmt__stage.is-bump .lp-fmt__paper{animation:lp-fmtBump .45s ease}

/* 10.4 Frames, caption foot, logo, size tag */
.lp-fmt__frames{flex:1;display:flex;flex-direction:column;gap:inherit;min-height:0}
.lp-fmt__fr{flex:1;min-height:0;overflow:hidden;background:#ddd;transition:flex .45s ease,opacity .3s}
.lp-fmt__fr img{width:100%;height:100%;object-fit:cover;transition:filter .5s ease}
.lp-fmt__stage[data-color="bw"] .lp-fmt__fr img{filter:grayscale(1) contrast(1.08) brightness(1.03)}
.lp-fmt__foot{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:'Abramo Script',cursive;color:#222;--nm:1.7;transition:min-height .35s,opacity .3s}
/* One line, never clipped: JS (fitDates) sizes it and makes its line box the glyphs' real ink box. */
.lp-fmt__foot b{display:block;font-weight:400;line-height:1.15;white-space:nowrap}
/* Names: the design editor's fonts (design-fonts-lp.css; Abramo Script default), sized by JS to
   ~65% of the print width like the editor; "&" in the editor's amp font; the date: Montserrat,
   upright, fitted to 30% of the names' width (fitDates). */
.lp-fmt__foot small{font-family:'Montserrat',sans-serif;font-style:normal;font-weight:400;letter-spacing:.06em}
.lp-fmt__amp{font-style:normal}
.lp-fmt__stage[data-font="abramo"] .lp-fmt__foot b{font-family:'Abramo',cursive}
.lp-fmt__stage[data-font="roche-script"] .lp-fmt__foot b{font-family:'Roche Script',cursive}
.lp-fmt__stage[data-font="reey"] .lp-fmt__foot b{font-family:'Reey',cursive}
.lp-fmt__stage[data-font="lamonte"] .lp-fmt__foot b{font-family:'Lamonte',cursive}
.lp-fmt__stage[data-font="yummy"] .lp-fmt__foot b{font-family:'Yummy',cursive}
.lp-fmt__stage[data-font="mistrully"] .lp-fmt__foot b{font-family:'Mistrully',cursive}
.lp-fmt__stage[data-font="trajan"] .lp-fmt__foot b{font-family:'Trajan',cursive}
.lp-fmt__stage[data-font="amsterdam"] .lp-fmt__foot b{font-family:'Amsterdam',cursive}
.lp-fmt__stage[data-font="moura"] .lp-fmt__foot b{font-family:'Moura',cursive}
.lp-fmt__stage[data-font="dita-sweet"] .lp-fmt__foot b{font-family:'Dita Sweet',cursive}
.lp-fmt__stage[data-font="glacial"] .lp-fmt__foot b{font-family:'Glacial Indifference',cursive}
.lp-fmt__stage[data-font="soul-and-mate"] .lp-fmt__foot b{font-family:'Soul and Mate',cursive}
.lp-fmt__stage[data-font="montserrat"] .lp-fmt__foot b{font-family:'Montserrat',cursive}
.lp-fmt__stage[data-font="stephen-type"] .lp-fmt__foot b{font-family:'StephenType',cursive}
.lp-fmt__stage[data-font="abramo-script"] .lp-fmt__amp{font-family:'Lamonte',cursive;font-size:.5em}
.lp-fmt__stage[data-font="abramo"] .lp-fmt__amp,.lp-fmt__stage[data-font="moura"] .lp-fmt__amp{font-family:'StephenType',cursive;font-size:.75em}
.lp-fmt__stage[data-font="mistrully"] .lp-fmt__amp{font-family:'Amsterdam',cursive;font-size:.75em}
.lp-fmt__stage .lp-fmt__strip .lp-fmt__foot{min-height:6.5cqw}
.lp-fmt__stage .lp-fmt__photo .lp-fmt__foot{min-height:7cqw}
.lp-fmt__stage .lp-fmt__strip .lp-fmt__foot b{font-size:calc(clamp(7px,1.6cqw,10px) * var(--nm))}
.lp-fmt__stage .lp-fmt__strip .lp-fmt__foot small{font-size:clamp(6px,1.4cqw,9px);margin-top:1px}
.lp-fmt__stage .lp-fmt__photo .lp-fmt__foot b{font-size:calc(clamp(9px,2.4cqw,15px) * var(--nm))}
.lp-fmt__stage .lp-fmt__photo .lp-fmt__foot small{font-size:clamp(8px,1.8cqw,11px);margin-top:1px}
.lp-fmt__logo{display:none;font-family:'Jakarta LP','Plus Jakarta Sans',sans-serif;font-weight:800;letter-spacing:.2em;border:1px solid #222}
.lp-fmt__stage .lp-fmt__logo{font-size:clamp(6px,1.3cqw,8px);padding:2px 5px;border-radius:3px}
.lp-fmt__size{position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--muted);white-space:nowrap}

/* 10.5 Stage states set by the controls (data-* on the stage and on its
   simulator / zoom clones). Hidden shots and captions leave no gap. */
.lp-fmt__stage[data-n="2"] .lp-fmt__strip .lp-fmt__fr[data-i="2"],
.lp-fmt__stage[data-n="2"] .lp-fmt__strip .lp-fmt__fr[data-i="3"],
.lp-fmt__stage[data-n="3"] .lp-fmt__strip .lp-fmt__fr[data-i="3"]{display:none}
.lp-fmt__stage[data-n="4"] .lp-fmt__strip .lp-fmt__foot{display:none}
.lp-fmt__stage[data-design="none"] .lp-fmt__foot{display:none}
.lp-fmt__stage[data-design="logo"] .lp-fmt__foot b,
.lp-fmt__stage[data-design="logo"] .lp-fmt__foot small{display:none}
.lp-fmt__stage[data-design="logo"] .lp-fmt__logo{display:block}

/* 10.6 Zoom button. Base = pill (only reached by a simulator clone that
   still carries it); on the builder stage (inside the grid/sheet) it is an
   icon circle. Scoped to .lp-fmt__grid, not the section, so the overlays
   look the same whether or not the JS has portalled them to <body>. */
.lp-fmt__zoom{position:absolute;right:12px;top:12px;z-index:6;display:flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:0;border-radius:999px;background:rgba(255,255,255,.95);color:var(--text);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.08);transition:transform .2s}
.lp-fmt__grid .lp-fmt__zoom{top:auto;bottom:14px;right:14px;width:44px;height:44px;padding:0;justify-content:center;border-radius:50%;background:rgba(255,255,255,.96);box-shadow:0 2px 6px rgba(0,0,0,.08),0 8px 20px rgba(0,0,0,.08)}
.lp-fmt__grid .lp-fmt__zoom:hover{background:var(--text);color:#fff}

/* 10.7 Controls — label on top, full-width segmented controls */
/* min-width:0 — the sideways font row (15 fonts) must scroll, not widen the column. */
.lp-fmt__ctrl{display:flex;flex-direction:column;gap:12px;min-width:0}
.lp-fmt__row{display:flex;flex-direction:column;align-items:stretch;gap:6px}
.lp-fmt__lbl{font-size:12.5px;font-weight:600;line-height:1.2;color:var(--muted)}
.lp-fmt__seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;padding:3px;border-radius:12px;background:var(--lp-seg)}
.lp-fmt__seg button{height:38px;padding:0 8px;border:0;border-radius:9px;background:transparent;color:#4a4744;font-family:inherit;font-size:13.5px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.lp-fmt__seg button:hover{color:var(--text)}
.lp-fmt__seg button.is-on{background:#fff;color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.06)}
.lp-fmt__note{font-size:12px;line-height:1.35;color:var(--muted)}
.lp-fmt__note::before{content:"✓ ";color:var(--teal);font-weight:700}
.lp-fmt__inputs{display:grid;grid-template-columns:1.4fr 1fr;gap:8px}
.lp-fmt__inputs input{min-width:0;height:40px;padding:0 14px;border:1px solid var(--lp-warm-line);border-radius:12px;background:#fff;font-family:inherit;font-size:15px;outline:none}
.lp-fmt__inputs input:focus-visible{border-color:var(--teal);box-shadow:0 0 0 3px rgba(81,171,178,.22)}
/* Every font of the client design editor in one row that scrolls sideways; each button
   draws "Aa" from a tiny preview font ("<family> Aa", design-fonts-lp.css). */
.lp-fmt__fonts{display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding:2px 1px 4px;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.lp-fmt__fonts::-webkit-scrollbar{display:none}
.lp-fmt__fonts button{flex:0 0 64px;scroll-snap-align:start;display:flex;align-items:center;justify-content:center;overflow:hidden;height:40px;padding:0;border:1px solid rgba(0,0,0,.14);border-radius:10px;background:#fff;color:#1a1a1a;font-size:22px;line-height:1;cursor:pointer;transition:border-color .2s,background .2s}
/* Each font's "Aa" is scaled and centred by its real ink box (JS fitPicker): the fonts differ wildly. */
.lp-fmt__fonts button span{display:block;white-space:nowrap;line-height:1}
.lp-fmt__fonts button[aria-checked="true"]{border-color:#1a1a1a;background:#f3f1ee}
.lp-fmt__fonts [data-f="abramo-script"]{font-family:'Abramo Script Aa',cursive}
.lp-fmt__fonts [data-f="abramo"]{font-family:'Abramo Aa',cursive}
.lp-fmt__fonts [data-f="roche-script"]{font-family:'Roche Script Aa',cursive}
.lp-fmt__fonts [data-f="reey"]{font-family:'Reey Aa',cursive}
.lp-fmt__fonts [data-f="lamonte"]{font-family:'Lamonte Aa',cursive}
.lp-fmt__fonts [data-f="yummy"]{font-family:'Yummy Aa',cursive}
.lp-fmt__fonts [data-f="mistrully"]{font-family:'Mistrully Aa',cursive}
.lp-fmt__fonts [data-f="trajan"]{font-family:'Trajan Aa',cursive}
.lp-fmt__fonts [data-f="amsterdam"]{font-family:'Amsterdam Aa',cursive}
.lp-fmt__fonts [data-f="moura"]{font-family:'Moura Aa',cursive}
.lp-fmt__fonts [data-f="dita-sweet"]{font-family:'Dita Sweet Aa',cursive}
.lp-fmt__fonts [data-f="glacial"]{font-family:'Glacial Indifference Aa',cursive}
.lp-fmt__fonts [data-f="soul-and-mate"]{font-family:'Soul and Mate Aa',cursive}
.lp-fmt__fonts [data-f="montserrat"]{font-family:'Montserrat Aa',cursive}
.lp-fmt__fonts [data-f="stephen-type"]{font-family:'StephenType Aa',cursive}
.lp-fmt__fonts [data-f="abramo"],.lp-fmt__fonts [data-f="trajan"],.lp-fmt__fonts [data-f="glacial"],.lp-fmt__fonts [data-f="montserrat"]{font-size:16px;letter-spacing:.04em}
.lp-fmt__cam{display:flex;align-items:center;gap:12px;width:100%;margin-top:4px;padding:10px 14px;border:1.5px dashed #cfc9bf;border-radius:16px;background:#fff;cursor:pointer;font-family:inherit;text-align:left;color:var(--text);transition:border-color .2s,background .2s}
.lp-fmt__cam:hover{border-color:var(--teal);background:#fbfffe}
.lp-fmt__cam svg{flex:0 0 34px;width:34px;height:34px;padding:8px;border-radius:50%;background:var(--teal);color:#fff}
.lp-fmt__cam b{display:block;font-size:14px}
.lp-fmt__cam small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.lp-fmt__sum{display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid var(--lp-warm-line)}
.lp-fmt__sum span{font-size:14px;color:var(--muted)}
.lp-fmt__sum .lp-btn{width:100%;white-space:nowrap}
/* Keyboard focus on the builder controls (teal, not the UA ring). */
.lp-fmt__seg button:focus-visible,.lp-fmt__fonts button:focus-visible,.lp-fmt__cam:focus-visible,
.lp-fmt__zoom:focus-visible,.lp-fmt__x:focus-visible,.lp-fmt__open:focus-visible,.lp-fmt__sum .lp-btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

@media (max-width:899px){
  .lp-fmt__hd{margin-bottom:22px}
  .lp-fmt__stage{height:310px;border-radius:22px}
  .lp-fmt__stage .lp-fmt__strip{width:19cqw;height:57cqw;left:calc(50% - 24cqw)}
  .lp-fmt__stage .lp-fmt__photo{width:38cqw;height:57cqw;left:calc(50% - 3cqw)}
  .lp-fmt__stage[data-format="strip"] .lp-fmt__strip{left:calc(50% - 9.5cqw)}
  .lp-fmt__stage[data-format="photo"] .lp-fmt__photo{left:calc(50% - 19cqw)}
  .lp-fmt__badge{left:12px;top:12px;font-size:10px;padding:5px 10px}
  .lp-fmt__size{bottom:-20px;font-size:10px}
  .lp-fmt__zoom{width:40px;height:40px;padding:0;justify-content:center}
  .lp-fmt__seg button{height:40px;padding:0 4px;font-size:13px}
  /* 16px: iOS Safari zooms the page into any focused field under 16px. */
  .lp-fmt__inputs input{font-size:16px}

  /* Two finished designs as a teaser above the open button. */
  .lp-fmt__teaser{display:flex;justify-content:center;align-items:center;margin:-6px 0 22px;padding:22px 0 16px;border-radius:20px;overflow:hidden;background:radial-gradient(120% 90% at 50% 110%,#e9d6c6 0%,rgba(233,214,198,0) 60%),linear-gradient(160deg,#f5ede4 0%,#e6d3c2 100%)}
  .lp-fmt__teaser img{height:min(62vw,280px);width:auto;max-width:48%;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(92,64,48,.28))}
  .lp-fmt__teaser img:first-child{transform:rotate(-6deg) translateX(10px)}
  .lp-fmt__teaser img:last-child{transform:rotate(5deg) translate(-10px,8px)}
  .lp-fmt__open{display:flex;width:100%}

  /* 10.8 Full-screen sheet on phones (.is-sheet = mounted, .is-sheet-on = slid in) — the owner
     wanted no page peeking above it: the whole screen goes to the print and the controls. */
  .lp-fmt .lp-fmt__grid{display:none}
  .lp-fmt.is-sheet .lp-fmt__back{display:block;position:fixed;inset:0;z-index:1101;background:rgba(13,13,15,.55);opacity:0;transition:opacity .3s;touch-action:none}
  .lp-fmt.is-sheet-on .lp-fmt__back{opacity:1}
  .lp-fmt.is-sheet .lp-fmt__grid{display:flex;flex-direction:column;gap:0;position:fixed;left:0;right:0;top:0;bottom:0;z-index:1102;padding-top:env(safe-area-inset-top,0px);background:#fff;color:var(--text);border-radius:0;overflow:hidden;transform:translateY(100%);transition:transform .34s cubic-bezier(.2,.7,.2,1)}
  .lp-fmt.is-sheet-on .lp-fmt__grid{transform:none}
  .lp-fmt.is-sheet .lp-fmt__bar{display:flex;align-items:center;justify-content:space-between;position:relative;flex:none;padding:14px 16px 10px 20px}
  .lp-fmt__bar b{font-size:17px;font-weight:600}
  .lp-fmt__grab{display:none}
  .lp-fmt__x{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:0;background:#f1efeb;color:var(--text);cursor:pointer}
  .lp-fmt.is-sheet .lp-fmt__grid .lp-fmt__stage{flex:none;height:min(46vh,380px);height:min(46svh,380px);margin:0 16px;border-radius:16px}
  /* Room for the size label under the print (the stage is short here). */
  .lp-fmt.is-sheet .lp-fmt__stage .lp-fmt__paper{margin-top:-24px}
  .lp-fmt.is-sheet .lp-fmt__stage[data-format="strip"] .lp-fmt__strip{transform:rotate(-2deg) scale(1.06)}
  .lp-fmt.is-sheet .lp-fmt__stage[data-format="photo"] .lp-fmt__photo{transform:rotate(2deg) scale(1.06)}
  .lp-fmt.is-sheet .lp-fmt__ctrl{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 16px calc(16px + env(safe-area-inset-bottom,0px))}
}
@media (min-width:900px){
  .lp-fmt__hd{margin-bottom:48px}
  .lp-fmt__grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:64px;align-items:center}
  .lp-fmt__stage{height:600px;border-radius:32px}
}
@media (min-width:1200px){
  .lp-fmt__sum{flex-direction:row;align-items:center}
  .lp-fmt__sum .lp-btn{width:auto;flex-shrink:0}
}
/* Browsers without container-query units (Safari < 16): the cqw sizes
   above are dropped, so give the papers the same geometry in px, computed
   for the usual stage widths (≈343px in the mobile sheet, ≈600px desktop). */
@supports not (width:1cqw){
  .lp-fmt__stage .lp-fmt__strip{width:65px;height:196px;left:calc(50% - 82px);padding:3px;gap:3px}
  .lp-fmt__stage .lp-fmt__photo{width:130px;height:196px;left:calc(50% - 10px);padding:5px;gap:4px}
  .lp-fmt__stage[data-format="strip"] .lp-fmt__strip{left:calc(50% - 33px)}
  .lp-fmt__stage[data-format="photo"] .lp-fmt__photo{left:calc(50% - 65px)}
  .lp-fmt__stage .lp-fmt__strip .lp-fmt__foot{min-height:22px}
  .lp-fmt__stage .lp-fmt__photo .lp-fmt__foot{min-height:24px}
  .lp-fmt__stage .lp-fmt__strip .lp-fmt__foot b{font-size:calc(7px * var(--nm))}
  .lp-fmt__stage .lp-fmt__strip .lp-fmt__foot small{font-size:6px}
  .lp-fmt__stage .lp-fmt__photo .lp-fmt__foot b{font-size:calc(9px * var(--nm))}
  .lp-fmt__stage .lp-fmt__photo .lp-fmt__foot small{font-size:8px}
  .lp-fmt__stage .lp-fmt__logo{font-size:6px}
  @media (min-width:900px){
    .lp-fmt__stage .lp-fmt__strip{width:132px;height:397px;left:calc(50% - 163px);padding:5px;gap:5px}
    .lp-fmt__stage .lp-fmt__photo{width:265px;height:397px;left:calc(50% - 24px);padding:8px;gap:7px}
    .lp-fmt__stage[data-format="strip"] .lp-fmt__strip{left:calc(50% - 66px)}
    .lp-fmt__stage[data-format="photo"] .lp-fmt__photo{left:calc(50% - 132px)}
    .lp-fmt__stage .lp-fmt__strip .lp-fmt__foot{min-height:39px}
    .lp-fmt__stage .lp-fmt__photo .lp-fmt__foot{min-height:42px}
    .lp-fmt__stage .lp-fmt__strip .lp-fmt__foot b{font-size:calc(10px * var(--nm))}
    .lp-fmt__stage .lp-fmt__strip .lp-fmt__foot small{font-size:8px}
    .lp-fmt__stage .lp-fmt__photo .lp-fmt__foot b{font-size:calc(14px * var(--nm))}
    .lp-fmt__stage .lp-fmt__photo .lp-fmt__foot small{font-size:11px}
    .lp-fmt__stage .lp-fmt__logo{font-size:8px}
  }
}


/* ── 11. Camera simulator (#sim) — live camera on the booth screen ── */
.lp-sim{position:fixed;inset:0;z-index:1110;display:flex;flex-direction:column;background:radial-gradient(90% 70% at 50% 40%,#2a2622 0%,var(--lp-ink) 70%);color:#fff}
/* .lp-sim__x also closes the zoom box. */
.lp-sim__x{position:absolute;right:16px;top:16px;z-index:5;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer}
.lp-sim__x:hover{background:rgba(255,255,255,.22)}
.lp-sim__x:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.lp-sim__flash{position:absolute;inset:0;z-index:10;background:#fff;opacity:0;pointer-events:none}
.lp-sim__flash.go{animation:lp-simFlash .5s ease-out}
.lp-sim__body{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:40px;padding:20px;overflow:hidden}
.lp-sim__booth{position:relative;height:100%;aspect-ratio:9/16;max-width:100%;transform-origin:50.35% 74.25%;transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .4s}
/* Shooting (JS .is-shooting): the booth zooms onto its screen (origin = the screen's centre,
   moved up to the booth's centre) so the live camera, the countdown and the flash read big. */
.lp-sim.is-shooting .lp-sim__booth{transform:translateY(-24.25%) scale(2.3)}
.lp-sim__booth picture{display:block;width:100%;height:100%}
.lp-sim__booth img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 30px 50px rgba(0,0,0,.5))}
/* Screen area of the booth model — same numbers as .lp-try__scr. */
.lp-sim__screen{position:absolute;left:35.9%;top:63.3%;width:28.9%;height:21.9%;overflow:hidden;background:#111;border-radius:3px}
.lp-sim__screen video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.lp-sim__msg{position:absolute;left:0;right:0;bottom:8%;text-align:center;font-size:clamp(8px,1.2vh,12px);font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px 4px rgba(0,0,0,.6);transition:opacity .3s}
.lp-sim__count{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(40px,8vh,90px);font-weight:700;text-shadow:0 4px 18px rgba(0,0,0,.5)}
.lp-sim__count.pop{animation:lp-simPop .8s ease-out}
.lp-sim__out{display:none;height:100%;aspect-ratio:3/4;max-width:100%;cursor:zoom-in}
.lp-sim.is-done .lp-sim__out{display:block}
/* The finished print: a clone of the builder stage. */
.lp-sim__print{height:100%!important;width:100%;border-radius:22px;animation:lp-simOut .9s cubic-bezier(.2,.8,.2,1)}
.lp-sim__print .lp-fmt__badge{display:none}
.lp-sim__bar{display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 20px 28px;text-align:center}
.lp-sim__bar p{font-size:15px;color:rgba(255,255,255,.8)}
.lp-sim__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
/* "Borrar mis fotos": a quiet text link in the simulator, a round red trash icon on
   the builder stage (shown only while the visitor's own photos are in the design). */
.lp-sim__del{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:rgba(255,255,255,.75);font:inherit;font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:8px 4px}
.lp-sim__del:hover{color:#fff}
.lp-fmt__del{position:absolute;left:14px;bottom:14px;z-index:6;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.96);color:#d23b3b;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.08),0 8px 20px rgba(0,0,0,.08)}
.lp-fmt__del:hover{background:#fff}
.lp-sim__del[hidden],.lp-fmt__del[hidden]{display:none!important}
@media (max-width:899px){
  .lp-sim.is-done .lp-sim__booth{display:none}
  .lp-sim__body{padding:70px 16px 16px}
}


/* ── 12. Zoom (#zoomBox) — the client's design, prints only ────
   --h = paper height; widths follow the real 5×15 / 10×15 proportions.
   !important: the clone still carries the stage's (and, when zooming the
   simulator print, .lp-sim__print's) size/position rules. */
.lp-zoom{position:fixed;inset:0;z-index:1120;display:flex;align-items:center;justify-content:center;padding:0;background:#1d1c1b;animation:lp-zoomIn .3s ease}
.lp-zoom__in{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}   /* the Colour / B&W bar */
.lp-zoom__print{cursor:default;animation:lp-zoomPop .4s cubic-bezier(.2,.8,.2,1)}
.lp-zoom__print .lp-fmt__badge,.lp-zoom__print .lp-fmt__zoom,.lp-zoom__print .lp-fmt__size,.lp-zoom__print .lp-fmt__del{display:none}
/* Phones: the names / date are typed on a screen of their own (#fmtEdit, JS keeps it to the
   visible area above the keyboard): the field, big and centred, and OK. */
.lp-fmt__edit{position:fixed;left:0;right:0;top:0;height:100%;z-index:1130;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:24px;background:#fff;color:#111}
.lp-fmt__edit[hidden]{display:none}
.lp-fmt__edit label{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center}
.lp-fmt__edit input{height:62px;border:1px solid rgba(0,0,0,.18);border-radius:16px;padding:0 18px;font:inherit;font-size:22px;text-align:center;color:#111;background:#fff}
.lp-fmt__edit input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(81,171,178,.22)}
.lp-fmt__edit .lp-btn{align-self:center;min-width:180px}
@media (min-width:900px){.lp-fmt__edit{display:none!important}}
/* Colour / B&W switch in the zoom: at the booth the guests pick it right before printing. */
.lp-zoom__bar{position:absolute;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:8px;width:max-content;max-width:calc(100vw - 32px)}
.lp-zoom__seg{display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.14)}
.lp-zoom__seg button{height:40px;padding:0 18px;border:0;border-radius:999px;background:transparent;color:#fff;font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s,color .2s}
.lp-zoom__seg button[aria-checked="true"]{background:#fff;color:#111}
.lp-zoom__seg button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.lp-zoom__bar small{font-size:12px;color:rgba(255,255,255,.7);text-align:center}
.lp-zoom .lp-zoom__print{--h:min(72svh,calc(92vw - 20px));container-type:normal;position:relative;display:flex!important;align-items:center;justify-content:center;gap:20px;width:auto!important;height:auto!important;max-width:none;margin:0!important;padding:0;aspect-ratio:auto;background:none!important;box-shadow:none!important;border-radius:0!important;overflow:visible}
.lp-zoom .lp-zoom__print[data-format="strip"]{--h:72svh}
.lp-zoom .lp-zoom__print[data-format="photo"]{--h:min(72svh,calc(138vw - 30px))}
.lp-zoom .lp-zoom__print[data-format="both"]{height:min(80vh,110vw)!important;height:min(80svh,110vw)!important}
.lp-zoom .lp-zoom__print .lp-fmt__paper{position:relative!important;left:auto!important;top:auto!important;transform:none!important;opacity:1;height:var(--h)!important;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.lp-zoom .lp-zoom__print .lp-fmt__strip{width:calc(var(--h) / 3)!important;padding:calc(var(--h) * .013)!important;gap:calc(var(--h) * .013)!important}
.lp-zoom .lp-zoom__print .lp-fmt__photo{width:calc(var(--h) * 2 / 3)!important;padding:calc(var(--h) * .021)!important;gap:calc(var(--h) * .018)!important}
.lp-zoom .lp-zoom__print[data-format="strip"] .lp-fmt__photo,
.lp-zoom .lp-zoom__print[data-format="photo"] .lp-fmt__strip{display:none}
.lp-zoom .lp-zoom__print .lp-fmt__strip .lp-fmt__foot{min-height:calc(var(--h) * .08)}
.lp-zoom .lp-zoom__print .lp-fmt__photo .lp-fmt__foot{min-height:calc(var(--h) * .087)}
.lp-zoom .lp-zoom__print .lp-fmt__strip .lp-fmt__foot b{font-size:calc(var(--h) * .02 * var(--nm))}
.lp-zoom .lp-zoom__print .lp-fmt__strip .lp-fmt__foot small{font-size:calc(var(--h) * .016)}
.lp-zoom .lp-zoom__print .lp-fmt__photo .lp-fmt__foot b{font-size:calc(var(--h) * .03 * var(--nm))}
.lp-zoom .lp-zoom__print .lp-fmt__photo .lp-fmt__foot small{font-size:calc(var(--h) * .02)}
.lp-zoom .lp-zoom__print .lp-fmt__logo{font-size:calc(var(--h) * .014);padding:calc(var(--h) * .004) calc(var(--h) * .01)}
@media (max-width:899px){
  .lp-zoom .lp-zoom__print{gap:12px;--h:min(78svh,calc(92vw - 12px))}
}


/* ── 13. Real weddings (.lp-real) — square clips, tap to play ── */
.lp-real{background:var(--lp-ink);color:#fff}
.lp-real .lp-lead{color:rgba(255,255,255,.7)}
.lp-real__hd{display:flex;flex-direction:column;gap:14px;margin-bottom:34px}
.lp-real__grid{display:grid;gap:14px}
.lp-real__card{position:relative;aspect-ratio:1 / 1;border-radius:18px;overflow:hidden;background:#222}
.lp-real__card video{width:100%;height:100%;object-fit:cover}
.lp-real__card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.75) 100%);pointer-events:none}
.lp-real__cap{position:absolute;left:18px;right:72px;bottom:16px;z-index:2;display:flex;flex-direction:column;gap:4px}
.lp-real__cap span{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.lp-real__cap b{font-size:20px;font-weight:500;letter-spacing:-.02em;line-height:1.15;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
/* Caption linked to the event report of the same wedding (lp_real item href). */
.lp-real__link{display:flex;flex-direction:column;gap:4px;color:inherit;text-decoration:none}
.lp-real__link b{text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:4px;text-decoration-thickness:1px}
.lp-real__link:hover b,.lp-real__link:focus-visible b{text-decoration-color:#fff}
.lp-real__card .lp-play{position:absolute;right:14px;bottom:14px;z-index:2;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;border-radius:50%;border:0;background:rgba(255,255,255,.92);box-shadow:0 10px 30px rgba(0,0,0,.25);cursor:pointer;transition:transform .2s}
.lp-real__card .lp-play svg{width:18px;height:18px}
/* While a clip plays the button is invisible but still pauses it. */
.lp-real__card.is-playing .lp-play{opacity:0}
.lp-real__card.is-playing .lp-play:focus-visible{opacity:1}
@media (min-width:900px){
  .lp-real__hd{flex-direction:row;justify-content:space-between;align-items:flex-end;margin-bottom:48px}
  .lp-real__grid{grid-template-columns:repeat(3,1fr);gap:18px}
}
@media (min-width:900px) and (max-width:1199px){
  .lp-real__cap span{display:none}
  .lp-real__cap b{font-size:17px}
}


/* ── 14. All-included CTA (.lp-price — class names kept, no price) ── */
.lp-price{background:var(--bg-alt)}
.lp-price__grid{display:grid;gap:36px}
.lp-price__lead{font-size:17px;line-height:1.5;color:var(--muted);margin:16px 0 24px;max-width:420px;text-wrap:pretty}
.lp-price__btns{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.lp-price__wa{font-size:15px;font-weight:600;color:var(--text);text-decoration:underline;text-underline-offset:4px}
.lp-price__wa:hover{color:var(--teal)}
.lp-price__trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:20px;font-size:13px;color:var(--muted)}
.lp-price__trust span::before{content:"✓ ";color:var(--teal);font-weight:700}
.lp-price__inc{margin-top:14px;font-size:13px;line-height:1.5;color:var(--muted)}
/* Compact variant (no checklist — "Qué incluye" is shown higher up): one
   centred column, a transactional CTA band. */
.lp-price--compact .lp-price__grid{max-width:720px;margin-left:auto;margin-right:auto;text-align:center}
.lp-price--compact .lp-price__lead{margin-left:auto;margin-right:auto;max-width:520px}
.lp-price--compact .lp-price__btns,.lp-price--compact .lp-price__trust{justify-content:center}
.lp-inc{display:grid;grid-template-columns:1fr;gap:0;list-style:none;padding:0;margin:0}
.lp-inc li{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--lp-rule)}
.lp-inc li:last-child{border-bottom:1px solid var(--lp-rule)}
.lp-inc svg{flex:0 0 22px;color:var(--teal);margin-top:1px}
.lp-inc b{display:block;font-size:15px}
.lp-inc span{font-size:14px;color:var(--muted);line-height:1.5}
@media (max-width:899px){
  .lp-price__btns{justify-content:center}
  .lp-price__btns .lp-btn{width:100%}
}
@media (min-width:900px){
  .lp-price__grid{grid-template-columns:minmax(340px,.8fr) 1.2fr;gap:clamp(40px,6vw,90px);align-items:start}
  .lp-price--compact .lp-price__grid{grid-template-columns:1fr}
  .lp-inc{grid-template-columns:1fr 1fr;column-gap:36px}
  .lp-inc li:nth-last-child(2){border-bottom:1px solid var(--lp-rule)}
}


/* ── 15. Video reviews (.lp-vr) — one big clip + thumbs ───────
   Our own 9:16 clips (inline <video> with sound, created on play). Phones:
   9:16 stage (at most ~78% of the screen tall), thumbs in a sideways row;
   desktop: stage left, thumbs + button right. */
.lp-vr__hd{display:flex;flex-direction:column;gap:14px;margin-bottom:28px}
.lp-rev__score{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;text-decoration:none;color:var(--text)}
.lp-rev__score i{font-style:normal;color:#f5a623;letter-spacing:2px}
.lp-rev__score:hover{color:var(--teal)}
.lp-vr__stage{position:relative;aspect-ratio:9 / 16;width:min(100%,calc(78vh * 9 / 16));width:min(100%,calc(78svh * 9 / 16));margin:0 auto;border-radius:26px;overflow:hidden;background:#111;isolation:isolate}
.lp-vr__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:opacity .22s ease,transform 6s ease}
.lp-vr__stage.is-swap .lp-vr__poster,.lp-vr__stage.is-swap .lp-vr__quote{opacity:0}
.lp-vr__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.82) 100%)}
.lp-vr__play{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px;background:none;border:0;cursor:pointer;color:#fff;font-family:inherit}
.lp-vr__play span{position:relative;display:flex;align-items:center;justify-content:center;width:88px;height:88px;border-radius:50%;background:#fff;transition:transform .25s}
.lp-vr__play span::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(255,255,255,.6);animation:lp-vrPulse 2.2s ease-out infinite}
.lp-vr__play em{font-style:normal;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.lp-vr__quote{position:absolute;left:24px;right:24px;bottom:26px;z-index:2;margin:0;color:#fff;transition:opacity .22s}
.lp-vr__quote p{font-size:clamp(21px,5.6vw,26px);font-weight:500;letter-spacing:-.025em;line-height:1.12;text-wrap:balance;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lp-vr__quote cite{display:block;margin-top:12px;font-style:normal;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.lp-vr__stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:5;background:#000}
.lp-vr__stage.is-playing .lp-vr__play,.lp-vr__stage.is-playing .lp-vr__quote{opacity:0;pointer-events:none}
.lp-vr__bar{display:flex;flex-direction:column;gap:18px;margin-top:18px}
.lp-vr__thumbs{display:flex;gap:10px;overflow-x:auto;margin:0 -24px;padding:5px 24px;scrollbar-width:none}
.lp-vr__thumbs::-webkit-scrollbar{display:none}
.lp-vr__th{position:relative;flex:0 0 64px;padding:0;border:0;background:#111;cursor:pointer;border-radius:12px;overflow:hidden;aspect-ratio:9 / 16;outline:2px solid transparent;outline-offset:3px;transition:outline-color .2s,opacity .2s;opacity:.55}
.lp-vr__th img{width:100%;height:100%;object-fit:cover}
.lp-vr__th:hover{opacity:.85}
.lp-vr__th.is-on{opacity:1;outline-color:var(--teal)}
/* The design uses the outline as the "active" mark; keyboard focus needs
   its own (darker) ring or it would be invisible. */
.lp-vr__th:focus-visible{opacity:1;outline-color:var(--lp-teal-d)}
.lp-vr__bar .lp-btn{width:100%}
@media (min-width:900px){
  .lp-vr .lp-wrap{display:grid;grid-template-columns:minmax(0,min(440px,34vw,calc(82vh * 9 / 16))) minmax(0,1fr);grid-template-columns:minmax(0,min(440px,34vw,calc(82svh * 9 / 16))) minmax(0,1fr);column-gap:56px;align-items:start}
  .lp-vr__hd{grid-column:1 / -1;flex-direction:row;justify-content:space-between;align-items:flex-end;margin-bottom:40px}
  .lp-vr__stage{grid-column:1;width:100%;margin:0}
  .lp-vr__play{top:40%}
  .lp-vr__quote{left:28px;right:28px;bottom:30px}
  .lp-vr__quote p{font-size:clamp(22px,1.8vw,28px)}
  .lp-vr__bar{grid-column:2;align-self:start;align-items:flex-start;justify-content:flex-start;gap:24px;margin:0}
  .lp-vr__thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;width:100%;max-width:560px;margin:0;padding:0;overflow:visible}
  .lp-vr__th{border-radius:16px}
  .lp-vr__bar .lp-btn{width:auto}
}


/* ── 16. FAQ (.lp-faq) ───────────────────────────────────────── */
.lp-faq{display:grid;gap:28px}
.lp-faq__list{border-top:1px solid var(--lp-line)}
.lp-faq__item{border-bottom:1px solid var(--lp-line)}
.lp-faq__h{margin:0;font:inherit}
.lp-faq__q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;background:none;border:0;font-family:inherit;font-size:17px;font-weight:600;text-align:left;color:var(--text);cursor:pointer}
.lp-faq__q i{position:relative;flex:0 0 28px;height:28px;border-radius:50%;background:var(--bg-alt);transition:transform .25s}
.lp-faq__q i::before,.lp-faq__q i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;margin:-1px 0 0 -5.5px;background:var(--text);border-radius:2px}
.lp-faq__q i::after{transform:rotate(90deg);transition:transform .25s}
.lp-faq__item.is-open .lp-faq__q i::after{transform:rotate(0)}
/* Collapsed answers stay in the DOM (schema/SEO) but leave the a11y tree
   and tab order once the collapse finishes. */
.lp-faq__a{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .3s ease,visibility 0s linear .3s}
.lp-faq__a>div{overflow:hidden;font-size:15px;line-height:1.65;color:var(--muted)}
.lp-faq__a a{color:var(--teal)}
.lp-faq__item.is-open .lp-faq__a{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .3s ease,visibility 0s}
.lp-faq__item.is-open .lp-faq__a>div{padding-bottom:22px}
@media (min-width:900px){
  .lp-faq{grid-template-columns:.8fr 1.2fr;gap:90px}
}


/* ── 17. Other services (.lp-os) + cities (.lp-os.lp-ct) ─────── */
.lp-os{border-top:1px solid var(--lp-line)}
.lp-os .lp-h2{font-size:clamp(26px,5vw,36px)}
.lp-os__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.lp-os__card{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--text)}
.lp-os__card img{width:100%;aspect-ratio:1 / 1;object-fit:cover;border-radius:16px;transition:transform .4s}
.lp-os__card:hover{color:var(--teal)}
.lp-os__card b{font-size:15px}
/* Cities: same cards, header with eyebrow + lead, a small "Photo booth in"
   caption above each city name (styled like .lp-real__cap span). */
.lp-ct__hd .lp-lead{margin-top:14px}
.lp-os__grid--cities .lp-os__card img{object-position:50% 30%}
.lp-os__pre{margin-bottom:-6px;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media (min-width:900px){
  .lp-os__grid{grid-template-columns:repeat(4,1fr);gap:18px}
  .lp-os__grid--cities{grid-template-columns:repeat(5,1fr)}
}


/* ── 18. House Party Stories (.lp-st) — editorial cards ─────── */
.lp-st{background:var(--lp-sand)}
.lp-st__hd{display:flex;flex-direction:column;gap:18px;margin-bottom:28px}
.lp-st__hd .lp-lead{margin-top:10px}
.lp-st__all{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-size:15px;font-weight:600;color:var(--text);text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:3px}
.lp-st__all:hover{color:var(--teal)}
.lp-st__grid{display:grid;gap:14px}
.lp-st__card{position:relative;display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;align-items:center;padding:10px;background:#fff;border-radius:18px;color:var(--text);text-decoration:none;transition:transform .25s,box-shadow .25s}
.lp-st__img{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#e6ddd2}
.lp-st__img img{width:100%;height:100%;object-fit:cover;object-position:var(--cf,50% 22%);transition:transform .5s}
.lp-st__chip{position:absolute;left:10px;top:10px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.92);font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--text)}
.lp-st__card:not(.lp-st__card--lead) .lp-st__chip{display:none}
.lp-st__body{display:flex;flex-direction:column;gap:6px;min-width:0;padding-right:44px}
.lp-st__t{margin:0;font-size:16px;line-height:1.25;font-weight:700;letter-spacing:-.01em;text-wrap:pretty}
.lp-st__ex{margin:0;font-size:14.5px;line-height:1.5;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lp-st__meta{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12.5px;color:var(--muted)}
.lp-st__meta strong{color:var(--text);font-weight:600}
.lp-st__go{position:absolute;right:14px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#f1ebe3;color:var(--text);transition:background .2s,color .2s}
.lp-st__card:hover .lp-st__go{background:var(--teal);color:#fff}
.lp-st__card:not(.lp-st__card--lead):hover .lp-st__t{color:var(--text)}
/* Lead story: big cover, text on the image. */
.lp-st__card--lead{display:block;padding:0;overflow:hidden;color:#fff;aspect-ratio:4 / 5}
.lp-st__card--lead:hover,.lp-st__card--lead:hover .lp-st__t{color:#fff}
.lp-st__card--lead:hover .lp-st__t{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.lp-st__card--lead .lp-st__img{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
.lp-st__card--lead .lp-st__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.78) 100%)}
.lp-st__card--lead .lp-st__chip{left:16px;top:16px;z-index:1}
.lp-st__card--lead .lp-st__body{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:22px 20px 20px;gap:10px}
.lp-st__card--lead .lp-st__t{font-size:clamp(22px,6vw,30px);line-height:1.15}
.lp-st__card--lead .lp-st__ex{color:rgba(255,255,255,.86);-webkit-line-clamp:2}
.lp-st__card--lead .lp-st__meta,.lp-st__card--lead .lp-st__meta strong{color:rgba(255,255,255,.92)}
.lp-st__card--lead .lp-st__go{top:16px;right:16px;z-index:1;width:40px;height:40px;transform:none;background:rgba(255,255,255,.92)}
@media (min-width:900px){
  .lp-st__hd{flex-direction:row;justify-content:space-between;align-items:flex-end;margin-bottom:40px}
  .lp-st__all{align-self:auto;flex:none;white-space:nowrap}
  .lp-st__grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-rows:1fr 1fr;gap:20px}
  .lp-st__card--lead{grid-row:1 / 3;aspect-ratio:auto;min-height:560px}
  .lp-st__card--lead .lp-st__body{max-width:620px;padding:32px 32px 30px}
  .lp-st__card--lead .lp-st__t{font-size:clamp(28px,2.6vw,38px)}
  .lp-st__card:not(.lp-st__card--lead){grid-template-columns:minmax(0,1fr);align-content:start;gap:14px;padding:12px 12px 18px}
  .lp-st__card:not(.lp-st__card--lead) .lp-st__img{aspect-ratio:16 / 9}
  .lp-st__card:not(.lp-st__card--lead) .lp-st__chip{display:inline-block}
  .lp-st__card:not(.lp-st__card--lead) .lp-st__body{padding:0 52px 0 6px}
  .lp-st__card:not(.lp-st__card--lead) .lp-st__t{font-size:19px}
  .lp-st__card:not(.lp-st__card--lead) .lp-st__go{top:auto;right:16px;bottom:18px;transform:none}
}


/* ── 19. Sticky CTA pill (#lpSticky, mobile only) ──────────────
   Rendered after the footer, starts off-screen + inert; JS adds .is-on
   once the hero leaves the viewport. */
.lp-sticky{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:50;display:flex;gap:8px;padding:8px;border-radius:999px;background:#fff;box-shadow:0 12px 34px rgba(0,0,0,.2);transform:translateY(140%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.lp-sticky.is-on{transform:none}
/* Keep keyboard focus clear of the fixed pill (WCAG 2.4.11). Not via root
   scroll-padding: that shrinks the snap area and every feed stop would land up
   to 96px off; scroll-margin on the focusable elements does the same job.
   Pill = 12px gap + 64px + safe area. */
@media (max-width:899px){
  .lp a[href],.lp button,.lp input,.lp textarea,.lp select,.lp [tabindex]{scroll-margin-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}
.lp-sticky .lp-btn{flex:1;height:48px}
.lp-sticky__wa{flex:0 0 48px;display:flex;align-items:center;justify-content:center;height:48px;border-radius:50%;border:1.5px solid var(--lp-brown);color:var(--lp-brown)}
.lp-sticky__wa:hover{color:#fff;background:var(--lp-brown)}
@media (min-width:900px){
  .lp-sticky{display:none}
}


/* ── 20. Hover lifts — real pointers only, motion allowed ─────
   (colour-only hovers stay in their components; scales/lifts would
   stick after a tap on touch screens.) */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .lp-btn:not(:disabled):hover{transform:scale(1.03)}
  .lp-mosaic figure:hover img{transform:scale(1.04)}
  .lp-fmt__zoom:hover{transform:scale(1.05)}
  .lp-fmt__grid .lp-fmt__zoom:hover{transform:scale(1.06)}
  .lp-real__card .lp-play:hover{transform:scale(1.08)}
  .lp-vr__stage:hover .lp-vr__poster{transform:scale(1.07)}
  .lp-vr__play:hover span{transform:scale(1.08)}
  .lp-os__card:hover img{transform:scale(1.03)}
  .lp-st__card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(92,64,48,.14)}
  .lp-st__card:hover .lp-st__img img{transform:scale(1.05)}
}


/* ── 21. Fallbacks for browsers without small-viewport units ── */
@supports not (height:100svh){
  .lp-zoom .lp-zoom__print{--h:min(72vh,calc(92vw - 20px))}
  .lp-zoom .lp-zoom__print[data-format="strip"]{--h:72vh}
  .lp-zoom .lp-zoom__print[data-format="photo"]{--h:min(72vh,calc(138vw - 30px))}
  @media (max-width:899px){
    .lp-zoom .lp-zoom__print{--h:min(70vh,calc(92vw - 12px))}
  }
  @media (min-width:900px){
    .vst{--fh:min(84vh,calc((100vw - 160px) * .5 * 16 / 9));--fy:calc((100vh - var(--fh)) / 2)}
  }
}


/* ── 22. Keyframes ─────────────────────────────────────────── */
@keyframes lp-vrPulse{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.35);opacity:0}}
@keyframes lp-fmtBump{40%{translate:0 -6px}}
@keyframes lp-simFlash{0%{opacity:.95}100%{opacity:0}}
@keyframes lp-simPop{0%{transform:scale(1.6);opacity:0}25%{transform:scale(1);opacity:1}100%{opacity:.6}}
@keyframes lp-simOut{0%{transform:translateY(40px) scale(.9);opacity:0}100%{transform:none;opacity:1}}
@keyframes lp-zoomIn{from{opacity:0}}
@keyframes lp-zoomPop{from{transform:scale(.9);opacity:0}}
@keyframes lp-vstWheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}
@keyframes lp-vstWheelD{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
@keyframes lp-vstIdx{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
@keyframes lp-vstIdxB{0%{opacity:0;transform:translateY(-10px)}100%{opacity:1;transform:none}}


/* ── 23. Reduced motion ─────────────────────────────────────────
   No animations or transitions inside the landing (state changes become
   instant; the hero CTA laser stops too). Hover scales are already gated
   by §20; the site's own hero-CTA hover scale is neutralised here. JS
   drops the scroll-hijack, scroll zoom/peek and autoplay (posters only). */
@media (prefers-reduced-motion:reduce){
  .lp,.lp *,.lp *::before,.lp *::after{animation:none!important;transition:none!important}
  .hv .hero-svc__cta:hover,.hv .hero-svc__cta:active{transform:none}
}