/* ═══════════════════════════════════════
   WoGL — World of GL
   wogl.io | worldofgl.com | mundogl.com
   hello@wogl.io | hola@mundogl.com

   Proprietary. All rights reserved.
   ═══════════════════════════════════════ */

/* WoGL services page: dark room, gold light. */
@font-face { font-family: 'Outfit'; src: url('fonts/outfit-latin-ext.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Outfit'; src: url('fonts/outfit-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/jetbrains-mono-latin.woff2') format('woff2'); font-weight: 100 800; font-display: swap; }

:root {
  --ink: #0b0806; --panel: #15100c; --panel-2: #1c1510; --line: rgba(232, 200, 154, .16); --line-2: rgba(232, 200, 154, .3);
  --text: #f4ece1; --soft: rgba(244, 236, 225, .76); --quiet: rgba(244, 236, 225, .58);
  --gold: #e8c89a; --caramel: #c58a4f; --paper: #fbf7f1; --espresso: #24170f; --muted: rgba(36, 23, 15, .66); --go: #6fbf8a;
  --sans: Outfit, system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace;
  --pad: clamp(16px, 5vw, 48px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { background: var(--ink); color: var(--text); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: var(--pad); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.logo { font: 300 21px/1 var(--sans); letter-spacing: .18em; color: var(--gold); text-decoration: none; white-space: nowrap;
  text-shadow: 0 0 40px rgba(232, 200, 154, .45), 0 0 90px rgba(212, 165, 116, .25); }
/* The lockup of this house: ZamaoKE | para negocios, the same in both languages, as the name. Where the bar has room
   it reads across, after a thin rule; narrower, the tag sits small under the name so the bar keeps its buttons. */
.logo-sub { display: block; margin-top: 5px; font: 500 8px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); text-shadow: none; }   /* no wider than the name */
@media (min-width: 1100px) {
  .logo-sub { display: inline-block; margin: 0 0 0 14px; padding-left: 14px; border-left: 1px solid var(--line-2); font: 300 15px/1 var(--sans); letter-spacing: .08em; text-transform: none; vertical-align: 2px; }
}
.kicker { font: 500 12px/1.3 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
h2 { margin-top: 12px; font: 500 clamp(30px, 4.4vw, 48px)/1.08 var(--sans); letter-spacing: -.015em; text-wrap: balance; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 0; cursor: pointer;
  font: 500 16px/1 var(--sans); text-decoration: none; white-space: nowrap; }
.btn-gold { background: var(--gold); color: var(--espresso); }
.btn-gold:hover { background: #f1d7b0; }
.btn-line { border: 1px solid var(--line-2); background: none; color: var(--text); }
.btn-line:hover { border-color: var(--gold); }

/* Nav */
.nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 20px; min-height: 64px; padding: 8px var(--pad);
  background: rgba(11, 8, 6, .78); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.nav-links { margin-left: auto; display: flex; gap: 22px; }
.nav-links a { font-size: 15px; color: var(--soft); text-decoration: none; }
.nav-links a:hover { color: var(--text); }
.nav .btn { min-height: 40px; padding: 0 18px; font-size: 15px; }
.lang-switch { display: flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line-2); }
/* The perf LED sits right before the language switch, like every WoGL bar (rule of 16-oct). */
.nav #woglPerfMount { display: inline-flex; align-items: center; flex: none; }
.nav #woglPerfMount:empty { display: none; }
.nav #woglperf .wp-btn { min-height: 40px; padding: 0 10px; background: transparent; border-color: transparent; }
.lang-switch button { min-width: 40px; min-height: 34px; border: 0; border-radius: 999px; background: none; cursor: pointer; font: 600 12px/1 var(--mono); letter-spacing: .08em; color: var(--quiet); }
.lang-switch button[aria-pressed="true"] { background: rgba(232, 200, 154, .16); color: var(--gold); }
@media (max-width: 760px) { .nav-links { display: none; } .nav .btn { margin-left: auto; } }
/* On a phone the bar keeps the name, the button, the LED and the languages on one line: the name tightens and the
   gaps close as the screen narrows. */
@media (max-width: 480px) { .nav { gap: 12px; } .nav .logo { font-size: 18px; letter-spacing: .08em; } .lang-switch button { min-width: 34px; } }
@media (max-width: 380px) { .nav { gap: 8px; } .nav .logo { font-size: 16px; letter-spacing: .05em; } .nav .logo-sub { letter-spacing: .1em; }
  .nav .btn { padding: 0 12px; font-size: 14px; } .lang-switch button { min-width: 30px; } .nav #woglperf .wp-btn { padding: 0 6px; } }

/* Hero: a warm light from below over the live code, which shows through. */
.hero { min-height: min(88vh, 820px); display: flex; align-items: center; padding: 72px 0 96px; }
.hero-in { width: 100%; }
/* The title turns one phrase at a time, two lines, the second in gold (hero.js): each letter rises out of a blur with a
   flash of light. Its height follows the phrase with a spring, so what sits under it glides when a phrase wraps to one
   more line. Under it the kind of business turns in a gold pill whose width springs to each word, its letters clipped
   by it. */
.hero .rot-title { font: 500 clamp(42px, 14vw, 104px)/1.02 var(--sans); letter-spacing: -.035em; }
.hero .ln { display: block; }
.hero .ln + .ln { color: var(--gold); }
.hero .hw { display: inline-block; white-space: nowrap; }
.hero .hc { display: inline-block; will-change: transform, opacity; }
.hero .rot-for { display: flex; flex-wrap: wrap; align-items: center; gap: .32em; margin-top: clamp(22px, 3.4vh, 36px);
  font: 400 clamp(24px, 3.1vw, 42px)/1.1 var(--sans); letter-spacing: -.015em; color: var(--soft); }
.hero .pill { display: inline-flex; justify-content: center; overflow: hidden; padding: .1em .34em .14em; border-radius: .2em; background: var(--gold); color: var(--espresso); font-weight: 500; }
.hero .pill-in { display: block; flex-shrink: 0; white-space: pre; }
.lead { max-width: 600px; margin-top: 20px; font-size: clamp(17px, 2vw, 20px); font-weight: 300; color: var(--soft); text-wrap: pretty; }
.actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }

.section { padding: clamp(72px, 10vw, 120px) 0; }

/* Packages: three tabs, then the stage of the tab in front, then its card. */
.pk-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 72px; }
.pk-tab { --r: 16px; position: relative; isolation: isolate; display: grid; align-content: start; gap: 6px; min-height: 44px; padding: 16px 18px; border-radius: var(--r); border: 1px solid transparent;
  background: rgba(244, 236, 225, .045); color: var(--text); text-align: left; cursor: pointer; transition: background .3s; }
.pk-tab .n { font: 600 12px/1 var(--mono); letter-spacing: .16em; color: var(--quiet); }
.pk-tab b { font: 600 19px/1.2 var(--sans); }
.pk-tab small { font: 300 15px/1.35 var(--sans); color: var(--soft); }
/* Only the chosen tab has an edge: the beam that runs the chosen kind of business (Gera, 19-oct: «ese me gusta más»),
   no line of its own; the others are clear panels, no line, no beam (each tab carries one, shown only when chosen). */
.pk-tab:hover { background: rgba(244, 236, 225, .07); }
.pk-tab[aria-selected="true"] { background: radial-gradient(120% 140% at 0% 0%, rgba(232, 200, 154, .1), rgba(244, 236, 225, .045) 60%); }
.pk-tab:not([aria-selected="true"]) > .beam { display: none; }
.pk-tab[aria-selected="true"] .n { color: var(--gold); }
/* Packages, a full-screen hero (Gera, 18-oct: "que abarque todo, grandote, full hero"): the stage fills the section
   edge to edge, under the bar, with no box, floating on the ocean; the title and the tabs sit over its top. --top is
   where the tabs end (servicios.js): the stage's montage fits under it. The card follows the hero. */
.pk-sec { padding-top: 0; }
.pk-hero { position: relative; min-height: calc(100svh - 64px); }
.pk-head { position: relative; z-index: 1; padding-top: clamp(32px, 4.5vw, 56px); }
/* A compact head, so the montage under it is as big as the screen allows: a smaller title, and tabs on one line
   (number and name; the montage says the rest). */
.pk-head h2 { font-size: clamp(26px, 2.8vw, 40px); }
.pk-head .pk-tabs { margin-top: 28px; }
.pk-head .pk-tab { display: flex; align-items: baseline; gap: 10px; padding: 14px 18px; }
.pk-head .pk-tab small { display: none; }
/* On a phone the number goes above the name, so the three fit the width. */
@media (max-width: 999px) { .pk-head .pk-tab { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; } }
.pk-stage { position: absolute; inset: 0; }
.pk-panel { margin-top: 24px; }
.pk-slot { position: absolute; inset: 0; opacity: 0; transform: scale(.985); filter: blur(8px); pointer-events: none;
  transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1), filter .6s cubic-bezier(.2, .7, .2, 1); }
.pk-slot.on { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.pk-live { position: absolute; inset: 0; }
/* On a phone the hero is the title, the tabs and the tall montage under them. */
@media (max-width: 640px) { .pk-hero { min-height: calc(var(--top, 0px) + var(--vw, 100vw) * 1.5625 + 24px); } }
/* The card of the tab in front, under the stage, in one place (the tallest card sets the height). The others are
   hidden, so their buttons stay out of the keyboard's way. On a wide screen it lies across: the name, what it
   includes in two columns, and the button. */
.pk-cards { display: grid; }
.pk-cards > .pk { grid-area: 1 / 1; min-width: 0; padding: 22px 24px; opacity: 0; transform: translateY(10px); filter: blur(10px); visibility: hidden;
  transition: opacity .5s cubic-bezier(.2, .7, .2, 1), transform .5s cubic-bezier(.2, .7, .2, 1), filter .5s cubic-bezier(.2, .7, .2, 1), visibility 0s .5s; }
.pk-cards > .pk.on { opacity: 1; transform: none; filter: none; visibility: visible; transition-delay: 0s; }
.pk-cards .pk h3 { margin-top: 6px; font-size: 22px; }
.pk-cards .pk ul { margin-top: 14px; gap: 7px; }
.pk-cards .pk li { font-size: 15px; }
.pk-cards .pk-note { margin-top: 12px; font-size: 13px; }
@media (min-width: 900px) {
  .pk-cards > .pk { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(0, 2fr) auto; grid-template-rows: auto auto 1fr;
    grid-template-areas: 'tag list pick' 'name list pick' 'note list pick'; column-gap: 40px; padding: 28px 32px; }
  .pk-cards .pk-tag { grid-area: tag; }
  .pk-cards .pk h3 { grid-area: name; }
  .pk-cards .pk ul { grid-area: list; display: block; columns: 2; column-gap: 32px; margin: 0; }
  .pk-cards .pk li { break-inside: avoid; margin-bottom: 9px; }
  .pk-cards .pk-note { grid-area: note; align-self: end; }
  .pk-cards .pk-pick { grid-area: pick; align-self: center; margin: 0; }
}
/* On a phone the three tabs share the width: number and name only. */
@media (max-width: 999px) {
  .pk-tabs { gap: 8px; margin-top: 56px; }
  .pk-tab { --r: 14px; padding: 12px; }
  .pk-tab b { font-size: 15px; }
  .pk-tab small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pk-tab, .pk-slot, .pk-cards > .pk { transition: none; } }

.pk { display: flex; flex-direction: column; padding: 28px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); }
.pk.star { background: linear-gradient(180deg, #221810, var(--panel) 60%); border-color: var(--line-2); }
.pk-tag { font: 500 11px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--quiet); }
.pk h3 { margin-top: 10px; font: 600 26px/1.15 var(--sans); }
.pk ul { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; flex: 1; }
.pk li { position: relative; padding-left: 26px; font-size: 16px; color: var(--soft); }
.pk li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 12px; height: 7px; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg); }
.pk-note { margin-top: 18px; font-size: 14px; color: var(--quiet); text-wrap: pretty; }
.pk .btn { margin-top: 22px; }

/* License and how we work */
.lic-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.lic { padding: 28px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); }
.lic h3 { font: 600 20px/1.25 var(--sans); }
.lic ul { margin-top: 16px; padding-left: 20px; display: grid; gap: 8px; color: var(--soft); }
.lic li::marker { color: var(--gold); }
/* What the license pays for, package by package (servicios.js · licCovers). */
.lic-covers ul { padding-left: 0; list-style: none; gap: 16px; }
.lic-covers li b { display: block; margin-bottom: 4px; font-weight: 600; color: var(--text); }
.lic-covers li span { display: block; font-size: 15px; line-height: 1.5; }
.how { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; }
.how div { padding-top: 16px; border-top: 2px solid var(--gold); }
.how b { display: block; font: 600 12px/1 var(--mono); letter-spacing: .14em; color: var(--gold); }
.how h3 { margin-top: 10px; font: 600 20px/1.25 var(--sans); }
.how p { margin-top: 6px; font-size: 16px; color: var(--soft); }

.foot { padding: 32px 0 110px; border-top: 1px solid var(--line); font-size: 14px; color: var(--quiet); }
.foot .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.foot .logo { font-size: 17px; }
@media (min-width: 1000px) { .foot { padding-bottom: 40px; } }


@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── Live demo window ─────────────────────────────────────────────────────────────────────────────── */
html.demo-open { overflow: hidden; }
/* The window takes the demo's color template (demo-modal.js sets the colors on #demo): its ground with the template's
   glow rising from the bottom, as in the app; the page's colors until it opens. */
.demo { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; color: var(--text); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  background: radial-gradient(90% 60% at 50% 100%, var(--vapor, rgba(58, 42, 28, .6)), transparent 70%), var(--demo-bg, rgba(8, 6, 4, .97)); }
.demo .btn-gold { background: var(--cta, var(--gold)); color: var(--cta-ink, var(--espresso)); }
.demo .btn-gold:hover { background: var(--cta, var(--gold)); filter: brightness(1.08); }
.demo[hidden] { display: none; }
.demo-head { flex: none; display: flex; align-items: center; gap: 16px; padding: 14px max(var(--pad), calc((100% - 1380px) / 2)); border-bottom: 1px solid var(--line); }
.live-dot { display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--go); box-shadow: 0 0 0 0 rgba(111, 191, 138, .6); animation: live 2s ease-out infinite; vertical-align: 1px; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(111, 191, 138, .55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(111, 191, 138, 0); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.demo-head h2 { margin-top: 4px; font-size: clamp(22px, 3vw, 30px); }
.demo-x { margin-left: auto; width: 46px; height: 46px; flex: none; border-radius: 50%; border: 1px solid var(--line-2); background: none; display: grid; place-items: center; cursor: pointer; }
.demo-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.demo-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr) 290px; gap: 28px; padding: 18px max(var(--pad), calc((100% - 1380px) / 2)); }

.demo-side { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; }
.demo-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.demo-roles button { min-height: 66px; padding: 10px 12px; border: 0; border-radius: 14px; background: none; cursor: pointer; display: grid; align-content: center; gap: 3px; text-align: left; }
.demo-roles button b { font: 600 15px/1.2 var(--sans); }
.demo-roles button small { font-size: 12px; line-height: 1.3; color: var(--quiet); }
.demo-roles button:hover:not([aria-pressed="true"]) { background: var(--panel-2); }
.demo-roles button[aria-pressed="true"] { background: var(--cta, var(--gold)); color: var(--cta-ink, var(--espresso)); box-shadow: 0 6px 18px color-mix(in srgb, var(--cta, var(--gold)) 18%, transparent); }
.demo-roles button[aria-pressed="true"] small { color: color-mix(in srgb, var(--cta-ink, var(--espresso)) 72%, transparent); }
.demo-steps-title, .demo-rail-title { font: 500 11px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--quiet); }
.demo-steps { list-style: none; display: grid; gap: 4px; }
.demo-steps button { width: 100%; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid transparent; background: none; cursor: pointer; text-align: left; }
.demo-steps button:hover { background: var(--panel); }
.demo-steps button[aria-current] { background: var(--panel-2); border-color: var(--line-2); }
.demo-steps b { font: 600 12px/1.6 var(--mono); color: var(--gold); }
.demo-steps span { font: 500 15px/1.35 var(--sans); }
.demo-steps small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--quiet); }
.demo-steps button:not([aria-current]) small { display: none; }
.demo-note { font-size: 13px; color: var(--quiet); text-wrap: pretty; }
.demo-actions { display: grid; gap: 4px; margin-top: auto; }
.demo-reset { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 0; background: none; cursor: pointer; font: 500 14px/1 var(--sans); color: var(--quiet); }
.demo-reset:hover { color: var(--text); }
.demo-reset svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.demo-stage { position: relative; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.demo-stage::before { content: ''; position: absolute; left: 50%; top: 46%; width: min(760px, 120%); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--gold) 15%, transparent), color-mix(in srgb, var(--gold) 6%, transparent) 55%, transparent); }
.demo-stage > * { position: relative; }
.demo-nav { display: flex; align-items: center; gap: 14px; }
.demo-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--ink) 70%, transparent); display: grid; place-items: center; cursor: pointer; color: var(--text); }
.demo-nav button:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.demo-nav button:disabled { opacity: .3; cursor: default; }
.demo-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.demo-nav span { min-width: 84px; text-align: center; font: 600 13px/1 var(--mono); letter-spacing: .14em; color: var(--soft); }
.demo-caption { display: none; max-width: 360px; text-align: center; font-size: 14px; color: var(--quiet); text-wrap: pretty; }
/* The iPhone: the app is 390 x 844, scaled by --k to the room the stage has. */
.demo-phone { --bz: 10px; --sw: calc(390px * var(--k, .8)); --sh: calc(844px * var(--k, .8)); position: relative; padding: var(--bz);
  width: calc(var(--sw) + 2 * var(--bz)); height: calc(var(--sh) + 2 * var(--bz)); border-radius: calc(var(--sw) * .15 + var(--bz));
  background: linear-gradient(145deg, #4a4950 0%, #17171b 16%, #0c0c0f 60%, #2c2c32 100%);
  box-shadow: 0 0 0 1px #54535a, inset 0 0 0 1.5px #050506, 0 40px 80px rgba(0, 0, 0, .6), 0 0 90px color-mix(in srgb, var(--gold) 8%, transparent); }
.demo-phone::before, .demo-phone::after { content: ''; position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #26262b, #5a5960); }
.demo-phone::before { left: -3px; top: 20%; height: 9%; box-shadow: 0 calc(var(--sh) * .12) 0 #3c3b41; }
.demo-phone::after { right: -3px; top: 25%; height: 14%; }
.demo-phone .screen, .mini .screen { position: relative; width: var(--sw); height: var(--sh); overflow: hidden; border-radius: calc(var(--sw) * .15); background: var(--ink); }
.demo-phone .island { position: absolute; z-index: 3; top: calc(var(--sw) * .03); left: 50%; width: calc(var(--sw) * .31); height: calc(var(--sw) * .09); transform: translateX(-50%); border-radius: 999px; background: #000; }
.demo-phone iframe, .mini iframe { position: absolute; left: 0; top: 0; width: 390px; height: 844px; border: 0; transform: scale(var(--k, .8)); transform-origin: 0 0; }

.demo-rail { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; }
.demo-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.thumb { display: grid; justify-items: center; gap: 6px; padding: 8px 4px; border-radius: 16px; border: 1px solid transparent; background: none; cursor: pointer; }
.thumb:hover { background: var(--panel); }
.thumb[aria-current] { border-color: var(--gold); background: var(--panel-2); }
.thumb small { font-size: 12px; line-height: 1.3; text-align: center; color: var(--soft); }
.thumb small b { display: block; font: 600 10px/1.4 var(--mono); letter-spacing: .12em; color: var(--gold); }
.mini { --k: .29; --sw: calc(390px * var(--k)); --sh: calc(844px * var(--k)); display: block; width: calc(var(--sw) + 8px); height: calc(var(--sh) + 8px); padding: 4px; border-radius: calc(var(--sw) * .15 + 4px); background: #0c0c0f; box-shadow: 0 0 0 1px #3a3940, 0 10px 24px rgba(0, 0, 0, .45); pointer-events: none; }
.mini .screen { display: block; }

/* Narrower screens: steps on top, the phone, then the rail sideways. */
@media (max-width: 1099px) {
  .demo-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; padding: 12px var(--pad); }
  .demo-side { overflow: visible; gap: 10px; }
  .demo-roles { grid-template-columns: 1fr 1fr; }
  .demo-roles button { min-height: 46px; padding: 0 12px; font-size: 14px; text-align: center; }
  .demo-steps-title, .demo-note, .demo-reset { display: none; }
  .demo-caption { display: block; }
  .demo-stage { gap: 8px; }
  .demo-roles button { min-height: 52px; }
  .demo-roles button small { display: none; }
  .demo-steps { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .demo-steps li { flex: none; }
  .demo-steps button { grid-template-columns: auto auto; padding: 8px 12px; border-color: var(--line); }
  .demo-steps small { display: none !important; }
  .demo-actions { margin-top: 0; }
  .demo-actions .btn { min-height: 44px; }
  .demo-rail { overflow: visible; }
  .demo-rail-title { display: none; }
  .demo-thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
  .thumb { flex: none; padding: 6px 2px; }
  .mini { --k: .17; }
  .thumb small { max-width: 84px; font-size: 11px; }
}
@media (max-width: 1099px) and (max-height: 760px) { .demo-actions { display: none; } }
/* Stacked and not tall (an iPad on its side): the screens rail steps aside so the phone has its room and never climbs
   over the buttons above it (the steps list already moves through the tour). */
@media (max-width: 1099px) and (max-height: 900px) { .demo-rail { display: none; } }
/* On a phone the step strip and the arrows are the carousel; the phone gets the room. */
@media (max-width: 599px) { .demo-rail { display: none; } }

/* ── Motion (17-oct) ──────────────────────────────────────────────────────────────────────────────────
   The ocean behind the page (ocean.js), sections that resolve from blur as they scroll in, titles that land
   word by word, a gold outline and inner light that follow the cursor, and a beam of light that runs the
   border of the star cards. Only opacity, transform and filter move; reduced motion shows everything still. */

.js .rv { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(10px);
  transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1), filter .9s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 70ms); }
.js .in .rv { opacity: 1; transform: none; filter: none; }
.js .words .w { display: inline-block; opacity: 0; transform: translateY(.3em); filter: blur(12px);
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1), filter .8s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(80ms + var(--i, 0) * 55ms); }
.js .in .words .w { opacity: 1; transform: none; filter: none; }

/* The gold outline, brightest where the cursor is, and a soft light inside the card. */
.glow { position: relative; isolation: isolate; }
.glow::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .45s;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, -60%), rgba(232, 200, 154, .1), rgba(232, 200, 154, 0) 45%); }
.glow::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .45s;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, -60%), rgba(255, 228, 186, .95), rgba(232, 200, 154, .28) 40%, rgba(232, 200, 154, 0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.glow-zone:hover .glow::before, .glow-zone:hover .glow::after { opacity: 1; }

/* A beam of light that runs the border of the star cards, with its own soft halo. */
@property --beam { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.beam { position: absolute; inset: -1px; z-index: 1; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--beam), rgba(232, 200, 154, 0) 0deg 250deg, rgba(232, 200, 154, .15) 290deg, rgba(255, 232, 196, .95) 335deg, rgba(232, 200, 154, 0) 352deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: beam 6s linear infinite; }
.beam::after { content: ''; position: absolute; inset: -3px; border-radius: inherit; background: inherit; filter: blur(7px); opacity: .7;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 4px; }
@keyframes beam { to { --beam: 360deg; } }


/* Giros (Gera, 18-oct: "quitar eso de selecciona un giro, es muchísimo texto"; 19-oct: the phone large, on the right,
   floating, and the kind beside it): a row of kinds of business and, under it, the chosen kind beside its phone. On a
   wide screen the kind sits on the left (its name, three lines of what its screen does, its suggested extra, the
   button to try it) and the phone on the right, floating in 3D (float.js); on a phone, the phone comes first, right
   under the row. The selected kind carries the beam. */
.giro-tabs { display: flex; gap: 8px; margin-top: 36px; padding: 3px; overflow-x: auto; scrollbar-width: none; }
.giro-tabs::-webkit-scrollbar { display: none; }
.giro-tab { position: relative; flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: rgba(244, 236, 225, .02);
  color: var(--soft); font: 500 15px/1 var(--sans); white-space: nowrap; cursor: pointer; transition: border-color .3s, color .3s, background .3s; }
.giro-tab:hover { border-color: var(--line-2); color: var(--text); }
.giro-tab[aria-selected="true"] { border-color: transparent; background: rgba(232, 200, 154, .08); color: var(--text); }
/* A jump here (the hero's «Pruébalo», the bar's «Giros») lands on the title, just under the bar, not on the section's
   top padding, so the kind and its button come in view with the phone. */
#giros { scroll-margin-top: calc(16px - clamp(72px, 10vw, 120px)); }
.giro-show { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 28px; margin-top: 28px; }
.giro-viewer { order: -1; }
@media (min-width: 900px) {
  .giro-show { grid-template-columns: minmax(0, 520px) auto; justify-content: center; justify-items: stretch; align-items: start; gap: clamp(40px, 6vw, 110px); margin-top: 40px; }
  .giro-viewer { order: 0; }
  /* The kind lines up near the top of the phone, so its button is in view with the phone's first half. */
  .giro-copy { margin-top: 24px; }
}
.giro-copy { display: grid; justify-items: start; width: 100%; max-width: 520px; }
.giro-name { font: 600 clamp(34px, 4vw, 54px)/1.04 var(--sans); letter-spacing: -.02em; color: var(--text); }
.giro-for { margin-top: 10px; font: 400 17px/1.4 var(--sans); color: var(--quiet); }
.giro-points { list-style: none; display: grid; gap: 14px; margin: 26px 0 0; padding: 0; }
.giro-points li { display: flex; align-items: center; gap: 14px; font: 400 clamp(17px, 1.6vw, 21px)/1.3 var(--sans); color: var(--text); }
.giro-points li i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(232, 200, 154, .16); border: 1px solid rgba(232, 200, 154, .45); }
.giro-points li svg { width: 13px; height: 13px; fill: none; stroke: var(--gold); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* The suggested extras: a gold-edged card. */
.giro-extra { position: relative; display: grid; gap: 6px; width: 100%; margin-top: 26px; padding: 17px 19px; border-radius: 16px; border: 0;
  background: rgba(255, 255, 255, .03); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
  color: var(--text); transition: box-shadow .25s, background .25s; }
.giro-extra:hover { background: rgba(232, 200, 154, .08); }
/* Its edge in glass (glass.js, Gera, 19-oct): a clear bevel that gathers the page smoke's light into caustics, laid on
   with a screen blend so it only adds light; brighter under the cursor. It lies
   within the card's own box. Without a GPU, the gold hairline it had (drawn inside, so the card keeps its size). */
.glass-edge { position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; background: center / 100% 100% no-repeat; mix-blend-mode: screen; transition: filter .3s; }
.giro-extra:hover .glass-edge { filter: brightness(1.35); }
.giro-extra.no-glass { box-shadow: inset 0 0 0 1px rgba(232, 200, 154, .45); }
.giro-extra.no-glass:hover { box-shadow: inset 0 0 0 1px var(--gold); }
.giro-extra small { display: flex; align-items: center; gap: 10px; font: 600 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
/* The suggested extras take turns (servicios.js · giroExtras): stacked in one place, so the card keeps its height;
   the one in view comes in out of a soft blur while the last one leaves into it. The dots say how many there are. */
.gx-dots { display: inline-flex; gap: 5px; margin-left: auto; }
.gx-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(232, 200, 154, .28); transition: background .6s; }
.gx-dots i.on { background: var(--gold); }
.gx-stack { display: grid; }
.gx { grid-area: 1 / 1; display: grid; align-content: start; gap: 6px; opacity: 0; filter: blur(8px); transform: scale(.98);
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1), filter .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); }
.gx.on { opacity: 1; filter: none; transform: none; }
.gx b { font: 600 18px/1.25 var(--sans); }
.gx > span { font: 400 15px/1.35 var(--sans); color: var(--soft); }
@media (prefers-reduced-motion: reduce) { .gx { transition: none; } }
.giro-copy .viewer-open { margin-top: 24px; }
/* Each kind comes in: its lines one after another out of a soft blur, and its screen. */
.giro-name, .giro-for, .giro-points li, .giro-extra { animation: giro-in .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes giro-in { from { opacity: 0; transform: translateY(12px); filter: blur(6px); } }
/* The phone in 3D (float.js): the float (up and down), then the slab (the metal edge, layers in 3D) and the face,
   turned alike, each with its own perspective; no shared 3D scene, so the demo's frame takes clicks. */
.gv-rig { position: relative; }
.gv-bob { position: relative; animation: gv-bob 6.5s ease-in-out infinite; }
@keyframes gv-bob { 0%, 100% { transform: translateY(-8px); } 50% { transform: translateY(8px); } }
.gv-slab, .gv-face { transform-origin: 50% 50%; will-change: transform; }
.gv-slab { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.gv-slab i { position: absolute; inset: 0; border-radius: calc(390px * var(--k, .8) * .15 + 10px); background: linear-gradient(90deg, #2a2a30, #4a4950 50%, #2a2a30); }
.gv-face { position: relative; }
@media (prefers-reduced-motion: reduce) { .gv-bob, .giro-name, .giro-for, .giro-points li, .giro-extra { animation: none; } }
/* On a computer the whole row shows: a little tighter below 1280 px, and on two centered lines if it still does not
   fit, so no kind hides past the edge (on a phone it slides). */
@media (min-width: 900px) { .giro-tabs { justify-content: safe center; flex-wrap: wrap; } }
@media (min-width: 900px) and (max-width: 1279px) { .giro-tabs { gap: 6px; } .giro-tab { padding: 0 12px; font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .giro-tab { transition: none; } }
.giro-viewer { display: grid; justify-items: center; gap: 14px; }
.viewer-label { font: 500 11px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.viewer-phone { position: relative; }
.viewer-tap { position: absolute; inset: 0; z-index: 5; border: 0; border-radius: inherit; cursor: pointer; display: none; align-items: flex-end; justify-content: center; padding-bottom: 22%;
  background: linear-gradient(180deg, rgba(11, 8, 6, 0) 55%, rgba(11, 8, 6, .55)); color: var(--text); font: 600 15px/1 var(--sans); }
.viewer-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); }
.viewer-roles button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: none; cursor: pointer; font: 500 14px/1 var(--sans); color: var(--soft); }
.viewer-roles button[aria-pressed="true"] { background: var(--gold); color: var(--espresso); }
.viewer-open { min-height: 48px; }
.viewer-roles[hidden] { display: none; }
/* Color templates for the demos (demo/palettes.js): a two-color swatch each, the chosen one ringed in gold; under the
   phone and in the demo window. Bigger to the finger. */
.palettes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.palettes small { flex-basis: 100%; text-align: center; font: 500 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--quiet); }
.swatch { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: linear-gradient(135deg, var(--a) 0 50%, var(--b) 50% 100%);
  box-shadow: 0 0 0 1px rgba(244, 236, 225, .28); transition: box-shadow .2s, transform .2s; }
.swatch:hover { transform: scale(1.08); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--gold); }
@media (pointer: coarse) { .swatch { width: 38px; height: 38px; } }
/* Under the phone the row takes the phone's width and never sets it: a longer palette name («Azul noche y coral»)
   would widen the column and slide the whole centered section sideways (Gera, 19-oct). */
.giro-viewer .palettes { justify-self: stretch; contain: inline-size; }
@media (prefers-reduced-motion: reduce) { .swatch { transition: none; } }
/* On a touch screen the phone is a picture with a door: a tap opens the full demo. */
@media (hover: none) {
  .viewer-phone iframe { pointer-events: none; }
  .viewer-tap { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .words .w { opacity: 1; transform: none; filter: none; transition: none; }
  .beam { animation: none; }
}

/* The ocean (ocean.js): the living FBM the whole page floats on, fixed behind everything. */
.ocean { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }

/* The card's call: a gold button like the bar's «Cotiza», so it reads as the thing to press. */
.pk-pick { align-self: flex-start; }

.viewer-open { min-height: 38px; padding: 0 16px; font-size: 14px; }


/* Questions before starting: one line each, the answer opens under it. */
.faq { max-width: 880px; margin-top: 36px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 18px 4px;
  font: 500 clamp(18px, 2vw, 22px)/1.3 var(--sans); color: var(--text); transition: color .25s; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--gold); }
.faq-item summary i { position: relative; flex: none; width: 14px; height: 14px; margin-left: auto; }
.faq-item summary i::before, .faq-item summary i::after { content: ''; position: absolute; left: 0; top: 6px; width: 14px; height: 1.5px; border-radius: 1px; background: var(--gold); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.faq-item summary i::after { transform: rotate(90deg); }
.faq-item[open] summary i::after { transform: rotate(0deg); }
.faq-a { max-width: 64ch; padding: 0 4px 26px; font-size: 17px; line-height: 1.6; color: var(--soft); }
.faq-a ul { padding-left: 20px; display: grid; gap: 6px; }
.faq-a li::marker { color: var(--gold); }
.faq-a p + p { margin-top: 6px; }
.faq-go { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }
.faq-go .btn { min-height: 42px; font-size: 15px; }
.faq-item[open] .faq-a { animation: faqIn .45s cubic-bezier(.2, .7, .2, 1); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { .faq-item[open] .faq-a { animation: none; } .faq-item summary i::after { transition: none; } }

/* What we make, on video: one button per service and one player, 16:9 like the videos. */
.reel-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.reel-tabs button { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-2); background: none; color: var(--soft);
  font: 500 15px/1 var(--sans); cursor: pointer; }
.reel-tabs button:hover { border-color: var(--gold); color: var(--text); }
.reel-tabs button[aria-selected="true"] { background: var(--gold); border-color: var(--gold); color: var(--espresso); }
/* The apps' stage runs the window's width, edge to edge, like the packages (a 2:1 band for the wide montage; the tall
   one on a phone). */
.reel-stage { position: relative; width: var(--vw, 100vw); margin-left: calc(50% - var(--vw, 100vw) / 2); margin-top: 18px; height: min(calc(var(--vw, 100vw) * .5), calc(100svh - 64px)); }
@media (max-width: 640px) { .reel-stage { height: calc(var(--vw, 100vw) * 1.5625); } }
/* Pinned, as wogl.io's showcase: the section is a screen plus a stretch of scroll per beat (--steps, set by
   servicios.js), and its stage stays under the bar while the beats go by. */
/* The pin carries its own room for the bar, so the section adds none above it and little below. */
#apps.section { padding-top: 0; padding-bottom: clamp(24px, 4vw, 48px); }
.reel-scroll { position: relative; height: calc(100svh + var(--steps, 12) * 58svh); }
.reel-pin { position: sticky; top: 0; height: 100svh; padding: calc(64px + clamp(10px, 2.6vh, 28px)) 0 clamp(12px, 2.6vh, 28px); }
.reel-pin > .wrap { height: 100%; display: flex; flex-direction: column; }
.reel-pin h2 { font-size: clamp(30px, 3.2vw, 46px); }
.reel-pin .reel-tabs { margin-top: clamp(12px, 2vh, 22px); }
.reel-pin .reel-stage { flex: 1 1 auto; min-height: 0; height: auto; margin-top: 10px; }
.reel-pin .reel-foot { margin-top: 10px; }
@media (max-width: 640px) { .reel-pin .kicker, .reel-pin h2 { display: none; } .reel-pin .reel-stage { height: auto; } }
@media (max-height: 640px) { .reel-pin .kicker, .reel-pin h2, .reel-pin .reel-foot p { display: none; } }
.reel-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 18px; }
.reel-foot p { max-width: 640px; font: 400 18px/1.4 var(--sans); color: var(--soft); }