/* Video placement. Background stays #F2F2EF. Amber is only the buy control.
   Guides link this file in the document head. chrome.css, which also colours
   the language link, is injected only after load, so the rule has to live here
   or the inactive EN/ES link paints in the browser default blue or lavender. */
.sx-lang a,.sx-lang a:link,.sx-lang a:visited,.sx-lang a:hover,.sx-lang a:active{color:var(--ink,#18181a)}
.vm-hero{margin:18px 0 8px}
.vm-hero-frame{position:relative;background:#f2f2ef;overflow:hidden;width:100%}
.vm-hero:not([data-base]){width:100%;max-width:none}
.vm-hero-frame{aspect-ratio:16/9}
.vm-hero[data-base]{max-width:400px}
.vm-hero[data-base] .vm-hero-frame{aspect-ratio:9/16}
.vm-hero[data-base] .vm-hero-frame img,.vm-hero[data-base] .vm-hero-frame video{object-fit:contain}
.vm-promo .vm-controls{position:static;margin-top:8px}
.vm-hero-frame img,.vm-hero-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#f2f2ef}
.vm-hero-frame video{opacity:0;transition:opacity .45s ease}
.vm-hero-frame.is-playing video{opacity:1}
/* Home hero: the first decoded frame replaces the poster in the same paint.
   A 450ms fade hid the poster while the video was still transparent. */
.vm-hero:not([data-base]) .vm-hero-frame video{transition:none}
@media (orientation:portrait) and (max-width:1024px){
  .vm-hero:not([data-base]) .vm-hero-frame{aspect-ratio:9/16}
  .vm-hero:not([data-base]) .vm-hero-frame img,.vm-hero:not([data-base]) .vm-hero-frame video{object-fit:cover}
}
.vm-hero-frame .vm-shade{position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(transparent,rgba(26,25,23,.45));pointer-events:none}
.vm-hero-frame:not(.is-playing) .vm-shade{opacity:0}
.vm-hero:not([data-base]) .vm-line{position:static;left:auto;right:auto;bottom:auto;display:block;max-width:68ch;width:auto;margin:12px 0 0;padding:0;color:#18181a;background:transparent;font:500 16px/1.4 "Inter Tight",sans-serif;text-shadow:none}
.vm-hero[data-base] .vm-line{position:absolute;left:16px;bottom:72px;margin:0;max-width:36ch;width:fit-content;color:#fff;background:#1a1917;padding:8px 12px;font:500 15px/1.35 "Inter Tight",sans-serif;text-shadow:none}
.vm-cta{position:absolute;left:16px;bottom:16px;z-index:2}
.vm-controls{display:flex;position:static;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 0;padding:0;background:transparent;z-index:2;scroll-margin-top:120px}
.vm-controls [data-act="pause"]{scroll-margin-top:120px}
.vm-play-block{display:block}
.vm-guide .vm-controls{position:sticky;top:80px;z-index:20;padding-top:8px;background:#f2f2ef}
body.iso[data-theme="dark"] .vm-guide .vm-controls{background:#0b0b0b}
.vm-guide .vm-controls.is-under-header{visibility:hidden}
.vm-controls button,.vm-ghost{box-sizing:border-box;min-width:44px;min-height:44px;padding:10px 16px;border-radius:3px;border:1px solid #18181a;background:#f2f2ef;color:#18181a;font:600 16px/1.2 "Inter Tight",sans-serif;cursor:pointer}
.vm-controls button,.vm-ghost[data-act=promo]{display:inline-grid;place-items:center;white-space:nowrap}
.vm-controls button .vm-face,.vm-ghost[data-act=promo] .vm-face{grid-area:1/1;display:grid}
.vm-controls button .vm-face>span,.vm-ghost[data-act=promo] .vm-face>span{grid-area:1/1}
.vm-face .is-off{visibility:hidden}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.vm-controls button:focus-visible,.vm-ghost:focus-visible,.vm-buy:focus-visible,.vloop:focus-visible{outline:2px solid #e9b75c;outline-offset:3px;box-shadow:0 0 0 2px #18181a}
.vm-ghost{color:var(--ink,#18181a);border-color:var(--line-strong,#b9b7af);background:transparent}
.vm-ghost:focus-visible{outline:2px solid #e9b75c;outline-offset:3px;box-shadow:0 0 0 2px #18181a}
.vm-buy{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 18px;border-radius:999px;background:var(--amber,#e9b75c);color:#18181a;border:1px solid #18181a;text-decoration:none;font:600 15px/1 "Inter Tight",sans-serif}
.vm-buy:hover{background:#d9a548;color:#18181a}
.vm-buy:focus-visible{outline:2px solid #18181a;outline-offset:3px}
/* Portrait phones: the ended controls ("Reproducir" / "Volver a reproducir")
   share the bottom edge with the buy button. Stack them so they cannot overlap
   from 320px through 430px. Scoped to the hero; the shop promo controls are static. */
@media (max-width:430px){
  .vm-hero-frame .vm-cta{left:12px;right:12px;bottom:12px}
  .vm-hero-frame .vm-buy{display:flex;box-sizing:border-box;text-align:center}
}
.og-steps{margin:16px 0 28px;padding:16px;background:#f2f2ef;border:1px solid #b9b7af;position:relative;z-index:1;clear:both;color:#18181a;scroll-margin-top:120px}
/* Floating guide header is 60px at top:0 (measured 320–1440). 72px is that
   height plus a 12px gap, so a chip/anchor jump leaves the top row clear.
   The rail sticks there: a jump to a lower step otherwise parks the first
   row under the header once the page cannot scroll any further. */
.og-steps{padding-top:16px}
.og-rail,.og-chips,.og-chip,.og-panel,.og-title,.og-head,.og-nav,.iso-figure,.og-stick{scroll-margin-top:72px}
.og-rail{position:static;top:auto;background:#f2f2ef}
.vm-hero:not([data-base]){position:relative}
.vm-hero:not([data-base]) .vm-controls [data-act="sound"]{position:absolute;top:16px;right:16px;z-index:6;min-height:48px;min-width:44px;padding:12px 16px;background:#f2f2ef;color:#18181a;border:1px solid #18181a}
.og-steps .og-panel{position:static;min-height:0;margin-top:12px}
.og-steps .og-title,.og-steps .og-lead,.og-steps .og-count,.og-steps .og-check,.og-steps .og-check span,.og-steps .og-cols,.og-steps .og-cols h3,.og-steps .og-cols li,.og-steps .og-chapter-name,.og-steps .og-chip,.og-steps .og-nav button{opacity:1!important;animation:none!important;color:#18181a!important}
.og-steps .og-chip[data-on],.og-steps .og-chip[data-on] .om-num,.og-steps .og-chip:hover,.og-steps .og-chip:focus-visible,.og-steps .og-nav button:hover:not(:disabled),.og-steps .og-nav button:focus-visible{color:#f4f3ef!important;background:#18181a!important}
.og-steps .og-title{font-family:"Inter Tight",sans-serif!important;font-weight:700!important;font-size:22px!important;line-height:1.25!important;text-transform:uppercase;letter-spacing:.01em}
.og-steps .og-nav button:disabled{opacity:1!important;color:#3a3936!important}
h1.vm-line{font:500 16px/1.4 "Inter Tight",sans-serif;text-transform:none;letter-spacing:0;margin:12px 0 0;color:#18181a}
.vm-note{margin:8px 0 0;font:14px/1.4 "Inter Tight",sans-serif;color:var(--text,#47464a)}
.vm-gridbar{display:flex;justify-content:flex-end;margin:0 0 12px}
.vloop{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;margin:-16px -16px 8px}
.vloop-frame{position:relative;display:block;aspect-ratio:4/5;background:#f2f2ef;border-radius:10px;overflow:hidden}
.vloop-frame img,.vloop-frame video{width:100%;height:100%;object-fit:cover;display:block;background:#f2f2ef}
.vloop-frame img{position:relative;z-index:1}
.vloop-frame video{position:absolute;inset:0;z-index:2;background:transparent;opacity:0;pointer-events:none;transition:opacity .35s ease}
.vloop-frame.is-playing video{opacity:1}
.vfig{font:500 11px/1.3 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.04em;color:var(--muted,#666461)}
body.iso[data-theme="dark"] .vfig{color:#eceae4}
.vm-guide{margin:28px auto;max-width:720px}
/* Every guide loop is 1080×1350 (ffprobe: loops/ and loops-es/, all 50+50).
   The box uses that 4/5 frame. cover fills it, so the burned-in step on the
   bottom edge of the picture is the bottom edge of the box. */
.vm-feature .vm-stage{position:relative;aspect-ratio:4/5;max-width:540px;background:#f2f2ef;border:1px solid var(--line,#dcdbd5);border-radius:10px;overflow:hidden}
body.iso[data-theme="dark"] .vm-stage,body.iso[data-theme="dark"] .vm-reel-frame{border-color:#3a3936}
.vm-reel{margin-top:22px}
.vm-reel-frame{position:relative;aspect-ratio:4/5;width:100%;max-width:400px;margin:0 auto;background:#f2f2ef;border:1px solid var(--line,#dcdbd5);border-radius:10px;overflow:hidden}
.vm-reel-frame img,.vm-reel-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#f2f2ef}
.vm-stage img,.vm-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#f2f2ef}
.vm-stage video[hidden],.vm-reel-frame video[hidden]{display:none}
/* The poster <img> is the first paint; the video only covers it once Play runs. */
.vm-stage img,.vm-reel-frame img{z-index:1}
.vm-stage video,.vm-reel-frame video{z-index:0;background:transparent}
.vm-stage img[hidden],.vm-reel-frame img[hidden]{display:none}
.vm-stage .vm-ghost{position:absolute;left:12px;bottom:12px;background:#f2f2ef;color:#1a1917}
/* Machine 51: the poster is its own layer, not inside an opacity or object-fit overlay.
   The empty video stays hidden so it cannot paint a placeholder over the plate.
   The plate stays up until the first presented frame. */
.vm-reel-media{display:grid;position:relative;width:100%;max-width:400px;margin:0 auto;background:#f2f2ef}
.vm-reel-media img,.vm-reel-media video{grid-area:1/1;width:100%;height:auto;background:#f2f2ef}
.vm-reel-media img{position:relative;z-index:1}
.vm-reel-media video{z-index:0;visibility:hidden}
.vm-reel-media.is-playing video{visibility:visible}
.vm-reel-media.is-playing img{visibility:hidden}
.vm-reel-media .vm-ghost{position:absolute;left:12px;bottom:12px;z-index:2;background:#f2f2ef;color:#1a1917}
.vm-reel-media .vm-ghost[hidden]{display:none}
.vm-epilogue{margin-top:0}
.vm-ep-k{margin:64px 0 0;font:400 28px/1 Anton,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--ink,#18181a);border-top:1px solid var(--line,#dcdbd5);padding-top:16px}
.vm-ep-card{display:flex;flex-direction:column;align-items:flex-start;gap:14px;width:100%;margin-top:64px;padding:28px;border:1px dotted var(--line-strong,#b9b7af);background:#f2f2ef;text-decoration:none;color:inherit;box-sizing:border-box}
.vm-pill{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line-strong,#b9b7af);border-radius:999px;background:transparent;color:var(--ink,#18181a);font:500 14px/1 "Inter Tight",sans-serif}
.vm-ep-frame{font:400 22px/1.35 "Source Serif 4",serif;color:var(--ink,#18181a)}
.vm-promo{margin-top:36px;max-width:720px}
.vm-promo-frame{position:relative;aspect-ratio:16/9;background:#f2f2ef;border:1px solid var(--line,#dcdbd5);overflow:hidden}
.vm-promo-frame img,.vm-promo-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vm-promo-frame img{z-index:1;background:#f2f2ef}
.vm-promo-frame video{z-index:0;background:transparent}
.vm-promo-frame img[hidden]{display:none}
.vm-promo-frame > .vm-ghost{display:none}
.vm-promo-frame .vm-ghost[hidden]{display:none}
.shop-gallery .cover,.shop-gallery .thumbs img,.shop-gallery .thumbs button{background:#f2f2ef}
.shop-gallery .cover img{width:100%;height:auto;aspect-ratio:1000/1414;object-fit:contain;display:block;background:#f2f2ef}
.shop-gallery .thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.shop-gallery .thumbs button{display:block;width:100%;min-height:44px;padding:0;border:1px solid var(--line,#dcdbd5);background:#f2f2ef;cursor:pointer;height:auto}
.shop-gallery .thumbs img{width:100%;height:auto;display:block;background:#f2f2ef}
.shop-gallery .thumbs button[aria-current="true"]{outline:2px solid #1a1917;outline-offset:2px}
.vm-slot{position:relative;background:#f2f2ef}
.vm-slot video{width:100%;height:auto;display:block;background:#f2f2ef}
.flipbook .page{background:#f2f2ef}
.copy-mark{font:500 12px/1 "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:#94620c}
.about-col{max-width:min(680px,100%);margin:28px auto 0;min-width:0;overflow-wrap:anywhere}
.about-col h1,.about-col h2{font-family:Anton,sans-serif;font-weight:400;letter-spacing:.02em;text-transform:uppercase;color:var(--ink,#18181a);max-width:100%;overflow-wrap:anywhere}
.about-col h1{font-size:clamp(40px,6vw,64px);line-height:1.05;margin:8px 0 20px}
.about-col h2{font-size:32px;line-height:1.05;margin:36px 0 12px}
.about-col p,.about-col li{font-family:"Source Serif 4",serif;font-size:19px;line-height:1.6;color:var(--ink,#18181a)}
.about-col p.vfig{font:500 11px/1.3 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.04em;color:var(--muted,#666461)}
.about-col img{width:100%;max-width:100%;height:auto;display:block;background:#f2f2ef;margin:28px 0}
.m51{max-width:760px;margin:24px auto}
.m51 h1{font-family:Anton,sans-serif;font-weight:400;font-size:clamp(42px,7vw,72px);line-height:1.05;text-transform:uppercase;margin:12px 0}html[lang=es] .about-col h1,html[lang=es] .m51 h1{line-height:1.1}
.m51 p{font-family:"Source Serif 4",serif;font-size:19px;line-height:1.6}
.m51 p.vm-pill{font:500 14px/1 "Inter Tight",sans-serif;line-height:1}
.m51 p.m51-eye{font:500 12px/1.3 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#666461);margin:18px 0 0}
.m51 p.m51-sub{font-size:22px;line-height:1.35}
.m51 .vm-reel-media{max-width:400px}