/* ═══════════════════════════════════════
   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, and the quote printed like a kitchen ticket. */
@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: WoGL | for business (Gera, 19-oct), in English in both languages, as the name. Where the
   bar has room it reads across, after a thin rule; narrower, the tag sits small under WoGL 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 WoGL */
@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; } }
@media (max-width: 380px) { .nav { gap: 10px; } .nav .btn { padding: 0 14px; } .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, big, on two lines; the gold line carries a slow sweep of light, every 9 s. Under it, what we do, one
   sentence at a time (hero.js): the sentences share one place and cross-fade out of a soft blur, the verb in gold. */
.hero h1 { font: 500 clamp(40px, 6.4vw, 96px)/1 var(--sans); letter-spacing: -.03em; }
.hero h1 em { font-style: normal; color: var(--gold);
  background: linear-gradient(100deg, var(--gold) 0 40%, #fff4e2 50%, var(--gold) 60% 100%) 100% 0 / 300% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: hero-sweep 9s 2s infinite cubic-bezier(.45, 0, .55, 1); }
@keyframes hero-sweep { 0% { background-position: 100% 0; } 28%, 100% { background-position: 0 0; } }
.hero-lines { display: grid; margin-top: 26px; font: 300 clamp(22px, 2.5vw, 34px)/1.25 var(--sans); color: var(--soft); }
.hero-lines span { grid-area: 1 / 1; opacity: 0; filter: blur(8px); transform: translateY(10px);
  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); }
.hero-lines span.on { opacity: 1; filter: none; transform: none; }
.hero-lines b { font-weight: 500; color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .hero h1 em { animation: none; } .hero-lines span { transition: none; } }
.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; border-top: 1px solid var(--line); }

/* 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; }

/* Quote */
.q-grid { margin-top: 40px; display: grid; gap: 24px; align-items: start; }
@media (min-width: 1000px) { .q-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; } }
.q-form { display: grid; gap: 16px; min-width: 0; }
.step { min-width: 0; padding: 24px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); }
.step legend { float: left; width: 100%; margin-bottom: 18px; display: flex; align-items: baseline; gap: 10px; font: 600 20px/1.2 var(--sans); }
.step legend b { font: 600 12px/1 var(--mono); letter-spacing: .14em; color: var(--gold); }
.step legend + * { clear: both; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 15px; color: var(--soft); }
.chip:has(input:checked) span { background: var(--gold); border-color: var(--gold); color: var(--espresso); font-weight: 500; }
.chip:has(input:focus-visible) span { outline: 2px solid var(--gold); outline-offset: 3px; }
.giro-kinds { margin-top: 12px; font-size: 14px; color: var(--quiet); }

.fields { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.fields label { display: grid; gap: 6px; font-size: 14px; color: var(--quiet); }
.fields input { min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--ink); font-size: 16px; color: var(--text); }
.fields input::placeholder { color: rgba(244, 236, 225, .38); }
.fields input:focus { border-color: var(--gold); outline: none; }

/* Live preview of the client's home page. */
.pv-label { margin-top: 20px; font: 500 11px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--quiet); }
.pv { margin-top: 10px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2); background: #07050b; box-shadow: 0 24px 50px rgba(0, 0, 0, .45); }
.pv-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #1d1813; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.pv-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.pv-bar span { margin-left: 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 11px/1 var(--mono); color: rgba(255, 255, 255, .55); }
.pv-screen { position: relative; height: clamp(230px, 34vw, 300px); padding: 16px 20px 22px; display: flex; flex-direction: column; color: var(--text);
  background: radial-gradient(90% 70% at 60% 100%, #2a1a10, #07050b 72%); }
.pv-nav { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.pv-nav b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; letter-spacing: .01em; }
.pv-nav span { margin-left: auto; display: flex; gap: 10px; }
.pv-nav span i { width: 34px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .22); }
.pv-hero { margin-top: auto; max-width: 30ch; }
.pv-hero p { font: 500 clamp(21px, 3vw, 30px)/1.1 var(--sans); letter-spacing: -.01em; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pv-btn { margin-top: 14px; display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 999px; background: var(--gold); color: var(--espresso); font: 500 13px/1 var(--sans); }

.pkg-opts { display: grid; gap: 10px; }
.pkg-opt { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line-2); cursor: pointer; }
.pkg-opt:has(input:checked) { border-color: var(--gold); background: rgba(232, 200, 154, .07); }
.pkg-opt input, .ex input { flex: none; width: 20px; height: 20px; accent-color: var(--gold); }
.po-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.po-txt b { font: 600 17px/1.25 var(--sans); }
.po-txt small { font-size: 14px; color: var(--quiet); }
.po-price { text-align: right; font: 600 15px/1.3 var(--mono); color: var(--gold); white-space: nowrap; }
.po-price small { display: block; font: 500 11px/1.3 var(--mono); color: var(--quiet); }

.lock { margin-bottom: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(232, 200, 154, .08); font-size: 14px; color: var(--soft); }
/* The extras as a catalog (servicios.js · renderExtras): the ones suggested for the chosen kind on top, inside a gold
   edge with its star feature first; then one tab per group and its cards, two across when there is room. A card:
   the box, its name, what it does, which kinds it suits best, and at its foot the price and the effort. */
.ex-sug { padding: 16px; border-radius: 18px; border: 1px solid rgba(232, 200, 154, .35); background: rgba(232, 200, 154, .04); }
.ex-sug h3, .ex-cat { margin-bottom: 12px; font: 500 12px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.ex-cat { margin-top: 28px; color: var(--quiet); }
.ex-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ex-tab .ex-n { margin-left: 8px; font: 500 12px/1 var(--mono); color: var(--quiet); }
.ex-tab .ex-on { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--gold); color: var(--espresso); font: 600 12px/1 var(--mono); }
.ex-list { display: grid; gap: 8px; }
@media (min-width: 640px) { .ex-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ex-grid { margin-top: 14px; }
.ex { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 10px 12px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: rgba(244, 236, 225, .02); cursor: pointer; }
.ex:hover { background: var(--panel-2); }
.ex:has(input:checked) { border-color: var(--gold); background: var(--panel-2); }
.ex.star { border-color: rgba(232, 200, 154, .5); }
.ex:has(input:disabled) { cursor: default; }
.ex:has(input:disabled:not(:checked)) { opacity: .45; }
.ex-txt { display: grid; gap: 3px; }
.ex-txt em { font: 600 10px/1.2 var(--mono); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.ex-txt b { font: 500 16px/1.3 var(--sans); }
.ex-txt small { font-size: 14px; line-height: 1.4; color: var(--quiet); }
.ex-txt i { margin-top: 4px; font: 400 12px/1.35 var(--sans); font-style: normal; color: var(--soft); }
.ex-side { grid-column: 2; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; }
.ex-price { font: 600 14px/1.2 var(--mono); color: var(--gold); white-space: nowrap; }
.ex-price.inc { color: var(--go); }
.ex-eff { display: inline-flex; align-items: center; gap: 4px; font: 500 11px/1 var(--mono); color: var(--quiet); white-space: nowrap; }
.ex-eff svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The quote, printed like a kitchen ticket. */
.ticket-col { min-width: 0; }
@media (min-width: 1000px) { .ticket-col { position: sticky; top: 84px; } }
.ticket { position: relative; padding: 24px 22px 30px; background: var(--paper); color: var(--espresso); font: 400 13px/1.5 var(--mono);
  border-radius: 6px 6px 0 0; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }
.ticket::after { content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px;
  background: linear-gradient(-45deg, transparent 7px, var(--paper) 0) 0 0 / 14px 14px repeat-x, linear-gradient(45deg, transparent 7px, var(--paper) 0) 0 0 / 14px 14px repeat-x; }
.tk-head { text-align: center; padding-bottom: 14px; border-bottom: 1px dashed rgba(36, 23, 15, .35); }
.tk-head b { display: block; font: 300 20px/1 var(--sans); letter-spacing: .18em; color: var(--espresso); }
.tk-head span { display: block; margin-top: 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tk-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; padding: 14px 0; border-bottom: 1px dashed rgba(36, 23, 15, .35); }
.tk-meta dt { color: var(--muted); }
.tk-meta dd { text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.tk-lines { list-style: none; padding: 12px 0; display: grid; gap: 8px; border-bottom: 1px dashed rgba(36, 23, 15, .35); }
.tk-lines li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; }
.tk-lines li small { display: block; font-size: 11px; color: var(--muted); }
.tk-lines li b { font-weight: 600; white-space: nowrap; }
.tk-lines li.inc b { color: #2f7a4b; }
.tk-lines li.off { color: var(--muted); text-decoration: line-through; }
.tk-lines li.off small { text-decoration: none; }
.tk-sum { padding-top: 14px; display: grid; gap: 6px; }
.tk-sum div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; }
.tk-sum .big b { font: 600 22px/1.1 var(--sans); }
.tk-sum .round { color: #2f7a4b; }
.tk-sum b { white-space: nowrap; }
.tk-actions { margin-top: 18px; display: grid; gap: 8px; }
.tk-actions .btn { width: 100%; }
.btn-dark { background: var(--espresso); color: var(--paper); }
.btn-dark:hover { background: #3a2619; }
.btn-ghost { background: none; border: 1px solid rgba(36, 23, 15, .3); color: var(--espresso); }

/* 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); }
.lic-prices { margin-top: 20px; font: 500 14px/1.6 var(--mono); color: var(--gold); text-wrap: pretty; }
.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; } }

/* Phone: the total follows you until the ticket is on screen. */
.mbar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 15; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 18px; border-radius: 999px;
  background: rgba(21, 16, 12, .94); border: 1px solid var(--line-2); box-shadow: 0 14px 34px rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: opacity .3s, transform .3s; }
.mbar span { flex: 1; min-width: 0; font: 600 14px/1.3 var(--mono); color: var(--gold); }
.mbar a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--gold); color: var(--espresso); font: 500 14px/1 var(--sans); text-decoration: none; }
.mbar.away { opacity: 0; transform: translateY(12px); pointer-events: none; }
@media (min-width: 1000px) { .mbar { display: none; } }

.toast { position: fixed; left: 50%; top: 80px; z-index: 30; transform: translate(-50%, -8px); opacity: 0; pointer-events: none; padding: 10px 18px; border-radius: 999px;
  background: var(--paper); color: var(--espresso); font: 500 14px/1 var(--sans); box-shadow: 0 14px 30px rgba(0, 0, 0, .45); transition: opacity .25s, transform .25s; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .mbar, .toast { transition: none; } }

/* ── 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 extra: a gold-edged card; a tap puts it in the quote (aria-pressed) and takes it back out. */
.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);
  text-align: left; cursor: pointer; color: var(--text); transition: box-shadow .25s, background .25s; }
.giro-extra:hover, .giro-extra[aria-pressed="true"] { 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 and once the extra is in the quote. 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, .giro-extra[aria-pressed="true"] .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, .giro-extra.no-glass[aria-pressed="true"] { 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); }
.gx em { margin-top: 4px; font: 600 14px/1 var(--sans); font-style: normal; color: var(--gold); }
.gx.in em::before { content: '✓ '; }
@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); } }
.rl-slot { position: absolute; inset: 0; opacity: 0; filter: blur(8px); pointer-events: none; transition: opacity .6s cubic-bezier(.2, .7, .2, 1), filter .6s cubic-bezier(.2, .7, .2, 1); }
.rl-slot.on { opacity: 1; filter: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .rl-slot { transition: 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); }