/* ======================= Vision Glass — «Blanco Apple» (redesign, phase 1) ===========================================
   The light theme, now Poncheo's default when the person has not chosen one (vg-theme-boot.js): white frosted glass on
   a cool white ground, Apple blue for actions, Apple's system green / orange / red only for states (as fills and dots;
   text uses their darker, readable variants), and the system font (SF on iPhone, Segoe UI / Roboto elsewhere; vg-apple-base.css).
   Loaded last by app.js (after vg-glass-poncheo.css). Light-only rules start with [data-theme="light"]; the parts for
   the new markup of this phase (entry screens, segmented switch, password meter, next steps, running time) use tokens
   both themes define, so the dark theme keeps working. Ids and data-act hooks are untouched.
   The entry screens and the brand intro follow the approved «Entrada» demo (sections 4 and 6).
   Roll back: remove this file's <link> in app.js and vg-theme-boot.js in index.html.
   Sections: 1 tokens · 2 buttons · 3 fields · 4 entry screens · 5 password meter and next steps · 6 brand intro
             · 7 punch card · 8 reduced motion */

/* ---- 1 tokens (light only; :root:root:root[...] outranks the token blocks of styles.css, vg-dash.css and the glass layer) */
:root:root:root[data-theme="light"]{
  --bg:var(--ios-bg); --surface:var(--ios-bg-2); --raised:var(--ios-bg-2); --surface-2:var(--ios-bg-3); --ink:var(--ios-label); --muted:var(--ios-label-2); --line:var(--ios-hairline); --line-2:var(--ios-hairline); --chip:var(--ios-fill);
  --accent:var(--ios-blue); --accent-ink:var(--ios-on-accent); --accent-deep:var(--ios-blue); --accent-soft:var(--ios-blue-tint); --glass:#c6d6ea; --glass-soft:var(--ios-blue-tint);
  --warn:var(--ios-red-text); --warn-soft:var(--ios-red-tint); --ok:var(--ios-green-text); --ok-soft:var(--ios-green-tint); --pv:var(--ios-purple-text); --pv-soft:var(--ios-purple-tint);
  --font-ui:var(--ios-font);
  --font-body:var(--ios-font);
  --sh-1:0 0 0 0 transparent;
  --sh-card:0 0 0 0 transparent;
  --sh-float:var(--ios-shadow-pop);
  --sh-btn:0 0 0 0 transparent;
  --sh-primary:0 0 0 0 transparent;
  /* the dashboard look (vg-dash.css): active controls and the hero glass become Apple blue */
  --vd-card:var(--ios-bg-2);--vd-soft:var(--ios-fill);--vd-act:var(--ios-blue-tint);--vd-act-ink:var(--ios-blue);--vd-hover:var(--ios-fill-4);
  --vd-or1:var(--ios-blue);--vd-or2:var(--ios-blue);
  --vd-glass:var(--ios-blue);--vd-glass-edge:transparent;
  --vd-shadow:0 0 0 0 transparent;--vd-lift:0 0 0 0 transparent;
  /* the Poncheo glass layer */
  --vgp-glow1:transparent;--vgp-glow2:transparent;--vgp-glow3:transparent;
  --vgp-pane:transparent;
  --vgp-in-bg:var(--ios-fill);--vgp-in-edge:transparent;--vgp-in-hi:transparent;--vgp-in-solid:#ffffff;
  --vgp-focus:var(--ios-blue);--vgp-ring:var(--ios-focus-ring);
  --vgp-chip-bg:var(--ios-fill);--vgp-chip-edge:transparent;--vgp-chip-hi:transparent;
  --vgp-row-bg:var(--ios-bg-2);--vgp-row-edge:transparent;--vgp-row-hover:var(--ios-bg-3);
  --vgp-track:var(--ios-fill);--vgp-sel:var(--ios-seg-thumb);--vgp-sel-ink:var(--ios-label);
  --vgp-card-bg:var(--ios-bg-2);--vgp-edge-a:transparent;--vgp-edge-b:transparent;
  --vgp-g1:var(--ios-label);--vgp-g2:var(--ios-label);--vgp-g3:var(--ios-label);
  --vgp-pill:var(--ios-blue);--vgp-pill-edge:transparent;
  --vgp-av-bg:var(--ios-gray);--vgp-av-ink:#ffffff;--vgp-av-edge:transparent;
  --vgp-sheet-bg:var(--ios-bg);
  --vgp-shard:linear-gradient(140deg,rgba(255,255,255,.98),rgba(150,205,250,.45) 58%,rgba(255,255,255,.85));--vgp-shard-edge:rgba(0,113,227,.18);
  --vgp-bad:var(--ios-red-text);
  --vgp-slab:var(--ios-bg-2);--vgp-slab-edge:transparent;--vgp-slab-line:var(--ios-hairline);--vgp-ghost:var(--ios-fill-4);
  color-scheme:light;
}
:root[data-theme="light"] ::selection{background:var(--ios-blue-tint)}

/* ---- 2 buttons: primary = systemBlue, filled (styles.css); Flow is retired ------------------------------------------- */
:root[data-theme="light"] #app button.link{color:var(--ios-blue)}

/* ---- 3 fields: blue focus ring ------------------------------------------------------------------------------------- */
:root[data-theme="light"] #app input:not([type=checkbox]):not([type=radio]):not([type=file]):focus-visible,
:root[data-theme="light"] #app select:focus-visible,:root[data-theme="light"] #app textarea:focus-visible{border-color:transparent;box-shadow:0 0 0 2px var(--ios-focus-ring)}

/* ---- 4 entry screens (the approved «Entrada» demo): a compact header, the heading and the switch on the page, ONE glass
   card with boxed fields (the icon inside the box). app.js draws header.vb-top (shell, while nobody is signed in) and
   .vb-entry (entryHtml). Touch targets stay at least 44 px tall (the app's rule): where the demo's control is smaller,
   the button keeps 44 px and only its visible pill is small. The entry tokens (--vb-*) are defined for both themes. ---- */
:root:root:root{
  --vb-lang-track:var(--ios-fill);--vb-lang-thumb:var(--ios-seg-thumb);--vb-lang-sh:0 1px 4px rgba(0,0,0,.1);
  --vb-card-bg:var(--ios-bg-2);--vb-card-edge:transparent;--vb-card-sh:0 0 0 0 transparent;
  --vb-in-bg:var(--ios-fill);--vb-in-edge:transparent;--vb-in-icon:#6e6e73;--vb-focus:var(--ios-blue);--vb-ring:var(--ios-focus-ring);
  --vb-info-bg:var(--ios-blue-tint);--vb-info-ic:var(--ios-blue);--vb-link:var(--ios-blue);--vb-meter-off:rgba(0,0,0,.08);--vb-ok:var(--ios-green-text);
  --vb-ray:rgba(110,200,255,.45);--vb-word:var(--ios-label);--vb-seg-track:var(--ios-fill);--vb-seg-thumb:var(--ios-seg-thumb)
}
@media (prefers-color-scheme:dark){:root:root:root:not([data-theme="light"]){--vb-lang-sh:none;--vb-in-icon:#a1a1a6;--vb-meter-off:rgba(255,255,255,.14);
  --vb-ray:rgba(90,170,230,.3)}}
:root:root:root[data-theme="dark"]{--vb-lang-sh:none;--vb-in-icon:#a1a1a6;--vb-meter-off:rgba(255,255,255,.14);
  --vb-ray:rgba(90,170,230,.3)}

/* 4a the header: no bar; the logo's three panes (the intro lands in them: the same masked layers, cropped above the
   lettering), the name; the light / dark button (vg-dash.js, only the other theme's) and ES · EN at the right */
html.vgd #app#app#app header.vb-top{position:relative;top:auto;z-index:2;display:flex;flex-wrap:nowrap;align-items:center;gap:10px;box-sizing:border-box;width:auto;max-width:440px;
  margin:0 auto;padding:calc(14px + env(safe-area-inset-top,0px)) 22px 0!important;border:0!important;border-radius:0;background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none;backdrop-filter:none}
html.vgd #app#app#app .vb-top .brand{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;flex:1 1 auto;min-width:0}
html.vgd #app#app#app .vb-top .brand::before{content:none;display:none}
html.vgd #app#app#app .vb-top .brand>b{flex:0 1 auto;min-width:0;overflow:hidden;font:700 var(--ios-t-body)/1.2 var(--vd-font);letter-spacing:-.02em;color:var(--ink);white-space:nowrap;text-overflow:ellipsis}
html.vgd #app#app#app .vb-top .topr{display:flex;align-items:center;gap:4px;margin-left:auto;order:2}
html.vgd:root #app#app#app .vb-top .vgd-theme{gap:0;margin:0;padding:0;background:transparent!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.vgd:root #app#app#app .vb-top button.vgd-tb{background:transparent!important;border:0!important;box-shadow:none!important;color:var(--muted)!important}
html.vgd:root #app#app#app .vb-top button.vgd-tb[aria-pressed="true"]{display:none!important}
@media (hover:hover){html.vgd:root #app#app#app .vb-top button.vgd-tb:hover{background:var(--vd-hover)!important;color:var(--ink)!important}}
/* ES · EN: the demo's 32 px pill; each button is 44 px tall (it overflows the pill, transparently), its thumb drawn inside */
html.vgd #app#app#app .vb-top .vb-lang{position:relative;display:flex;align-items:center;gap:0;box-sizing:border-box;height:32px;margin:0;padding:0 3px;border:0;border-radius:999px;background:var(--vb-lang-track);box-shadow:none}
html.vgd #app#app#app .vb-top .vb-lang>button{position:relative;z-index:0;display:grid;place-items:center;flex:none;width:auto;min-width:34px;height:44px;min-height:44px;margin:-6px 0;padding:0 10px;border:0!important;border-radius:999px!important;
  background:transparent!important;box-shadow:none!important;color:var(--muted)!important;font:600 var(--ios-t-caption1)/1 var(--vd-font);text-transform:none;cursor:pointer;transition:color .2s}
html.vgd #app#app#app .vb-top .vb-lang>button::before{content:"";position:absolute;z-index:-1;inset:9px 0;border-radius:999px;background:transparent;transition:background-color .2s,box-shadow .2s}
html.vgd #app#app#app .vb-top .vb-lang>button::after{content:none}
html.vgd #app#app#app .vb-top .vb-lang>button[aria-pressed="true"]{color:var(--ink)!important}
html.vgd #app#app#app .vb-top .vb-lang>button[aria-pressed="true"]::before{background:var(--vb-lang-thumb);box-shadow:var(--vb-lang-sh)}
html.vgd #app#app#app .vb-top .vb-lang>button:focus-visible{outline:2px solid var(--vb-focus);outline-offset:-2px}
@media (forced-colors:active){html.vgd #app#app#app .vb-top .vb-lang>button[aria-pressed="true"]::before{border:2px solid CanvasText}}

/* 4b the page: one 440 px column (phones: the demo's 22 px gutters); the recover form and the «request sent» card too */
html.vgd #app#app header.vb-top+main{box-sizing:border-box;width:auto;max-width:440px;margin:0 auto;padding:0 22px calc(28px + env(safe-area-inset-bottom,0px))}
html.vgd #app#app header.vb-top+main>.msg{margin:16px 0 0}
html.vgd #app#app header.vb-top+main>.card:not(.pvcard){margin-top:28px}
html.vgd #app#app header.vb-top+main>.pvcard{margin-top:18px}
/* the heading (one colour) and its line; the demo keeps room for two lines before the switch */
html.vgd #app .vb-head{min-height:96px;margin:30px 0 0}
html.vgd #app#app#app .vb-head .vgp-title{margin:0;font:700 var(--ios-t-large)/1.08 var(--vd-font);letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
html.vgd #app#app#app .vb-head .vgp-sub{margin:8px 0 0;color:var(--muted);font:400 var(--ios-t-subhead)/1.4 var(--vd-font)}
/* «Entrar | Pedir una cuenta»: the iOS segmented control; three ids: the shared «active control» fill of vg-dash.css
   (html.vgd:root :is(#app#app) .vg-control[aria-pressed]) must not paint the segments, the white thumb shows the chosen one */
html.vgd #app .vb-entry .vb-seg{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;box-sizing:border-box;height:36px;margin:18px 0 0;padding:2px;border-radius:var(--ios-r-full);background:var(--ios-fill)}
html.vgd #app#app#app .vb-seg>button{position:relative;z-index:1;height:32px;min-height:32px;margin:0;padding:0 6px;border:0!important;border-radius:var(--ios-r-full)!important;background:transparent!important;box-shadow:none!important;
  font:var(--ios-w-regular) var(--ios-t-footnote)/var(--ios-lh-footnote) var(--ios-font);color:var(--ios-label)!important;cursor:pointer}
html.vgd #app#app#app .vb-seg>button::after{content:"";position:absolute;inset:-6px 0}
html.vgd #app#app#app .vb-seg>button[aria-pressed="true"]{color:var(--ios-label)!important;font-weight:var(--ios-w-semibold)}
html.vgd #app#app#app .vb-seg>button:focus-visible{outline:2px solid var(--vb-focus);outline-offset:-2px}
@media (max-width:360px){html.vgd #app#app#app .vb-seg>button{padding:0 4px}}
@media (forced-colors:active){html.vgd #app#app#app .vb-seg>button[aria-pressed="true"]{outline:2px solid CanvasText;outline-offset:-4px}}
html.vgd #app .vb-seg-thumb{position:absolute;z-index:0;top:2px;bottom:2px;left:2px;width:calc(50% - 4px);border-radius:var(--ios-r-full);background:var(--vb-seg-thumb);
  box-shadow:0 3px 8px rgba(0,0,0,.08),0 1px 1px rgba(0,0,0,.05)}
html.vgd #app .vb-seg[data-m="request"] .vb-seg-thumb{transform:translateX(100%)}
/* the card: frosted white (no live blur: the page behind is flat), 24 px corners; the form sits on it */
html.vgd #app#app#app .vb-card{position:relative;box-sizing:border-box;margin:16px 0 0;padding:18px 18px 16px;border:1px solid var(--vb-card-edge);border-radius:var(--ios-r);background:var(--vb-card-bg);box-shadow:var(--vb-card-sh);overflow:hidden}
html.vgd #app#app#app .vb-card::before,html.vgd #app#app#app .vb-card::after{content:none;display:none}
/* one column that may shrink below the fields' own width (an <input> asks for ~20 characters: at 320 px the boxes
   would otherwise be wider than the card and get cut by its rounded edge) */
html.vgd #app#app#app .vb-card form.card{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
/* boxed fields: the label above, the icon inside the box; the box shows the focus (its border passes 3:1 in both themes) */
html.vgd #app#app#app .vb-card .vgp-field{display:grid;gap:6px;min-width:0;margin:0;font:var(--ios-w-regular) var(--ios-t-footnote)/var(--ios-lh-footnote) var(--ios-font);letter-spacing:0;color:var(--ios-label-2)}
html.vgd #app#app#app .vb-card .vgp-lab{padding-left:4px}
html.vgd #app#app#app .vb-card .vgp-inp{position:relative;display:flex;align-items:center;gap:10px;box-sizing:border-box;height:50px;padding:0 0 0 14px;border:1px solid var(--vb-in-edge);border-radius:var(--ios-r-s);background:var(--vb-in-bg);transition:border-color .2s,box-shadow .2s}
html.vgd #app#app#app .vb-card .vgp-inp:has(> .vgp-eye){padding-right:2px}
html.vgd #app#app#app .vb-card .vgp-inp:focus-within{border-color:var(--vb-focus);box-shadow:0 0 0 4px var(--vb-ring)}
html.vgd #app#app#app .vb-card .vgp-inp>.vgp-g{position:static;flex:none;width:18px;height:18px;transform:none;color:var(--vb-in-icon)}
html.vgd #app#app#app .vb-card .vgp-inp:focus-within>.vgp-g{color:var(--ink)}
html.vgd #app#app#app .vb-card .vgp-inp>input{flex:1 1 0;min-width:0;width:0;height:48px;min-height:48px;margin:0!important;padding:0 14px 0 0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
  outline:none;color:var(--ink)!important;font:400 var(--ios-t-callout)/1.2 var(--vd-font)!important}
html.vgd #app#app#app .vb-card .vgp-inp:has(> .vgp-eye)>input{padding-right:0!important}
html.vgd #app#app#app .vb-card .vgp-inp>input:focus{outline:none;box-shadow:none!important}
html.vgd #app#app#app .vb-card .vgp-inp>input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px var(--vb-in-bg) inset!important;border-radius:0!important;-webkit-text-fill-color:var(--ink)!important}
html.vgd #app#app#app .vb-card .vgp-inp>button.vgp-eye{position:static;flex:none;width:44px;min-width:44px;height:44px;min-height:44px;transform:none;color:var(--vb-in-icon)!important}
html.vgd #app#app#app .vb-card .vgp-inp>button.vgp-eye:focus-visible{outline:2px solid var(--vb-focus);outline-offset:-2px}
html.vgd #app .vb-card .vgp-eye svg{width:18px;height:18px}
html.vgd #app .vgp-inp>input[type=password]::-ms-reveal{display:none}   /* Edge's own reveal eye: the app's eye button does it */
@media (forced-colors:active){html.vgd #app#app#app .vb-card .vgp-inp:focus-within{outline:2px solid Highlight;outline-offset:1px}}
/* the note of the request form, in a tinted box */
html.vgd #app#app#app .vb-card .vb-info{display:flex;align-items:flex-start;gap:10px;margin:0;padding:10px 12px;border-radius:var(--ios-r);background:var(--vb-info-bg);color:var(--muted);font:400 var(--ios-t-footnote)/1.4 var(--vd-font)}
html.vgd #app#app#app .vb-card .vb-info>.ic{flex:none;width:16px;height:16px;margin-top:1px;color:var(--vb-info-ic)}
/* the main action: full width, Apple blue in both themes (white on #0071e3 → #0062c9 passes 4.5:1); no flow arrows */
html.vgd #app#app#app .vb-entry .vb-card button.primary{--fl-ink:#ffffff;--fl-fill:#0058b8;--fl-on-ink:#ffffff;width:100%;height:52px;min-height:52px;margin:4px 0 0!important;border:0!important;border-radius:999px!important;
  background:var(--ios-blue)!important;color:var(--ios-on-accent)!important;font:600 var(--ios-t-body)/1.2 var(--vd-font)!important;box-shadow:none!important}
html.vgd #app#app#app .vb-entry .vb-card button.primary :is(span,svg,.fl-txt){color:#fff!important}
html.vgd #app#app#app .vb-entry .vb-card button.primary .fl-arr{display:none!important}
html.vgd #app#app#app .vb-entry .vb-card button.primary:disabled{background:linear-gradient(180deg,#8fbdf0,#7fb2ea)!important;box-shadow:none!important;opacity:1}
html.vgd #app#app#app .vb-entry .vb-card button.primary:focus-visible{outline:3px solid var(--vb-focus)!important;outline-offset:3px}
/* «¿Olvidaste tu contraseña?»: a blue text link, 44 px tall, centred under the button */
html.vgd #app#app#app .vb-entry .vb-card button.link{display:block;justify-self:center;width:auto;min-height:44px;margin:-10px auto -8px!important;padding:0 10px!important;border:0!important;background:transparent!important;box-shadow:none!important;
  color:var(--vb-link)!important;font:400 var(--ios-t-subhead)/1.2 var(--vd-font)!important;text-decoration:none}
@media (hover:hover){html.vgd #app#app#app .vb-entry .vb-card button.link:hover{text-decoration:underline;text-underline-offset:3px}}
html.vgd #app#app#app .vb-entry .vb-card button.link:focus-visible{outline:2px solid var(--vb-focus);outline-offset:0;border-radius:var(--ios-r-s)!important}

/* ---- 5 password meter (length only) and the «what happens next» steps --------------------------------------------- */
html.vgd #app .vb-meter{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;margin:2px 4px 0}
html.vgd #app .vb-meter i{height:4px;border-radius:2px;background:var(--vb-meter-off);transition:background-color .25s ease}
html.vgd #app .vb-meter[data-n="1"] i:nth-child(-n+1),html.vgd #app .vb-meter[data-n="2"] i:nth-child(-n+2),html.vgd #app .vb-meter[data-n="3"] i:nth-child(-n+3),
html.vgd #app .vb-meter[data-n="4"] i:nth-child(-n+4),html.vgd #app .vb-meter[data-n="5"] i:nth-child(-n+5),html.vgd #app .vb-meter[data-n="6"] i:nth-child(-n+6),
html.vgd #app .vb-meter[data-n="7"] i:nth-child(-n+7),html.vgd #app .vb-meter[data-n="8"] i:nth-child(-n+8),html.vgd #app .vb-meter[data-n="9"] i:nth-child(-n+9){background:#ff9f0a}
html.vgd #app .vb-meter[data-n="10"] i{background:#34c759}
html.vgd #app#app#app .vb-card #rq-pw-hint{padding-left:4px;color:var(--muted);font:400 var(--ios-t-caption1)/1.3 var(--vd-font)}
html.vgd #app#app#app .vb-card .vb-meter[data-n="10"]+#rq-pw-hint{color:var(--vb-ok);font-weight:600}
html.vgd #app .vb-steps{list-style:none;margin:16px auto 8px;padding:0;display:grid;gap:10px;max-width:360px;text-align:left}
html.vgd #app .vb-steps li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:center;font-size:var(--ios-t-subhead);line-height:1.35;color:var(--muted)}
html.vgd #app .vb-steps li.now,html.vgd #app .vb-steps li.done{color:var(--ink)}
html.vgd #app .vb-steps em{font-style:normal;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:700 var(--ios-t-footnote) var(--vd-font);background:var(--vgp-track);color:var(--muted)}
html.vgd #app .vb-steps li.done em{background:var(--ios-green-text);color:#fff}
html.vgd #app .vb-steps li.now em{background:var(--accent-soft);color:var(--accent);box-shadow:0 0 0 0 var(--vgp-ring)}

/* ---- 6 brand intro («Entrada»): on white (charcoal in the dark theme) a blue glow opens, the three real panes arrive
   from different sides turning and settle (0–0.65 s), one light sweep crosses them (0.42–0.99 s), the name appears,
   VISION then GLASS COMPANY (0.56–1 s); at 1.25 s (app.js playIntro) the panes glide into the sign-in header's logo while
   the name, the glow and the ground fade. The logo group (panes + name) is the overlay's only grid item: centred. ---- */
#vg-intro{--vgi-w:170px;--vgi-h:234px}
#vg-intro .vgi-bg::after{display:none}
#vg-intro .vgi-ray{position:absolute;left:50%;top:calc(50% - 36px);width:360px;height:360px;margin:-180px 0 0 -180px;border-radius:50%;
  background:radial-gradient(closest-side,var(--vb-ray),transparent);opacity:.45;transform:scale(1.08);pointer-events:none}
#vg-intro .intro-stage{position:relative;display:block;width:var(--vgi-w);height:var(--vgi-h)}
#vg-intro .vgi-brand{position:absolute;left:0;top:0;width:var(--vgi-w);margin:0}
#vg-intro .vgi-brand .bm-mark{display:none}   /* the name is drawn apart (.vgi-word) */
#vg-intro .vgi-pane{opacity:1}
#vg-intro .vgi-pane.p-left{transform-origin:33.6% 37.7%}
#vg-intro .vgi-pane.p-centre{transform-origin:50.3% 38.2%}
#vg-intro .vgi-pane.p-right{transform-origin:66.8% 39.3%}
#vg-intro .vgi-glint::before{width:32%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.9) 50%,rgba(255,255,255,0));transform:translateX(-120%) skewX(-18deg)}
/* the name: two bands of the logo's own lettering mask (on the 360 × 450 logo: VISION rows 342–409, GLASS COMPANY
   413–441), at half size, in the theme's ink */
#vg-intro .vgi-word{position:absolute;left:50%;width:180px;margin-left:-90px;background:var(--vb-word);
  -webkit-mask:var(--vg-mark) no-repeat;mask:var(--vg-mark) no-repeat;-webkit-mask-size:180px 225px;mask-size:180px 225px}
#vg-intro .vgi-vision{top:184.5px;height:33.5px;-webkit-mask-position:0 -171px;mask-position:0 -171px}
#vg-intro .vgi-glass{top:220px;height:14px;-webkit-mask-position:0 -206.5px;mask-position:0 -206.5px;opacity:.85}
@media (forced-colors:active){#vg-intro .vgi-word{forced-color-adjust:none;background:CanvasText}}   /* a masked fill would be painted away */
/* «Omitir»: a small pill centred at the bottom (44 px tall) */
#vg-intro .intro-skip{left:0;right:0;bottom:calc(32px + env(safe-area-inset-bottom,0px));width:max-content;min-width:96px;min-height:44px;margin:0 auto;padding:0 18px;border-radius:999px;font:600 14px/1 var(--vd-font,system-ui,sans-serif)}
:root[data-theme="light"] .vgi-bg{background:radial-gradient(80% 50% at 50% 42%,#ffffff 0%,#f3f6fa 55%,#e9eef5 100%)}
:root[data-theme="light"] .vgi-brand{color:#1d1d1f}
:root[data-theme="light"] #vg-intro .intro-skip{color:#5c5c61;background:rgba(255,255,255,.72);border-color:rgba(0,0,0,.08);box-shadow:0 6px 16px -10px rgba(30,60,110,.3)}
:root[data-theme="light"] #vg-intro .intro-skip:focus-visible{outline-color:#0071e3}
/* the exit: the panes glide (transform set by app.js), the name leaves first, the glow and the ground clear */
#vg-intro.leaving .vgi-brand{transition:transform 600ms cubic-bezier(.65,0,.25,1),opacity 600ms ease}
#vg-intro:not(.still).leaving .vgi-word{opacity:0;transform:translateY(-6px);transition:opacity .22s ease,transform .22s ease}
#vg-intro:not(.still).leaving .vgi-ray{opacity:0;transition:opacity .4s ease}
#vg-intro:not(.still).leaving .vgi-bg{transition:opacity .52s cubic-bezier(.4,0,.2,1) .12s}
/* riseEntry() takes over the sign-in screen animation during the fade. */
body.vg-intro-on.vb-arrive #app#app>:not(main),body.vg-intro-on.vb-arrive #app#app main>*{opacity:1;transition:none}

/* ---- 7 punch card: the flat card and disc live in vg-remake.css; here only the elapsed time and the location ring --- */
html.vgd[data-theme="light"] #app#app section.card.clock .fine{opacity:1}
html.vgd #app section.card.clock .vb-elapsed{display:block;margin-top:3px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
@media (prefers-reduced-motion:no-preference){
  /* reading the location: a soft ring breathes around the button (outline: the button's own shadow is !important) */
  html.vgd #app#app section.card.clock.vb-checking button.huge{animation:vbBreathe 1.25s ease-in-out infinite}
}
@keyframes vbBreathe{0%{outline:2px solid var(--ios-focus-ring);outline-offset:0}100%{outline:2px solid transparent;outline-offset:12px}}

/* ---- motion that only plays when the person allows it ---------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  html.vgd #app#app .vb-seg>button{transition:color .25s ease}
  /* switching modes (the render where it changed, .vb-swap): the thumb slides with a small overshoot, the new form comes
     in from the side of the chosen segment, the heading settles; app.js growEntryCard eases the card's height */
  html.vgd #app .vb-swap[data-mode="request"] .vb-seg-thumb{animation:vbThumbR .38s cubic-bezier(.3,1.3,.5,1) both}
  html.vgd #app .vb-swap[data-mode="signin"] .vb-seg-thumb{animation:vbThumbL .38s cubic-bezier(.3,1.3,.5,1) both}
  html.vgd #app .vb-swap[data-mode="request"] form{animation:vbInR .42s cubic-bezier(.16,1,.3,1) both}
  html.vgd #app .vb-swap[data-mode="signin"] form{animation:vbInL .42s cubic-bezier(.16,1,.3,1) both}
  html.vgd #app .vb-swap .vb-head{animation:vbHead .36s cubic-bezier(.16,1,.3,1) both}
  html.vgd #app .vb-steps li.now em{animation:vbStep 1.8s ease-in-out 3}
  /* the intro (section 6): the glow opens; the centre pane rises with a small spring while the side panes come in from
     the left and the right, turning; the logo breathes once; the sweep crosses the panes one after another; the name
     is wiped in from the top (VISION) and settles (GLASS COMPANY); «Omitir» fades in. Backwards fills only: once each
     animation ends the element's own style (the same values) holds, so the exit transitions can take over. */
  #vg-intro:not(.still) .vgi-ray{animation:vbRay .9s cubic-bezier(.16,1,.3,1) backwards}
  #vg-intro:not(.still) .vgi-brand{animation:vbBreathe .8s cubic-bezier(.16,1,.3,1) backwards}
  #vg-intro:not(.still) .vgi-pane.p-centre{animation:vbPaneC .62s cubic-bezier(.34,1.4,.64,1) backwards}
  #vg-intro:not(.still) .vgi-pane.p-left{animation:vbPaneL .6s cubic-bezier(.16,1,.3,1) .04s backwards}
  #vg-intro:not(.still) .vgi-pane.p-right{animation:vbPaneR .6s cubic-bezier(.16,1,.3,1) .11s backwards}
  #vg-intro:not(.still) .vgi-brand :is(.bm-depth,.bm-rim){animation:vgiShow .25s ease-out .6s forwards}
  #vg-intro:not(.still) .p-left .vgi-glint::before{animation:vbSweep .45s cubic-bezier(.45,0,.2,1) .42s forwards}
  #vg-intro:not(.still) .p-centre .vgi-glint::before{animation:vbSweep .45s cubic-bezier(.45,0,.2,1) .48s forwards}
  #vg-intro:not(.still) .p-right .vgi-glint::before{animation:vbSweep .45s cubic-bezier(.45,0,.2,1) .54s forwards}
  #vg-intro:not(.still) .vgi-vision{animation:vbWordIn .4s cubic-bezier(.16,1,.3,1) .56s backwards}
  #vg-intro:not(.still) .vgi-glass{animation:vbWordIn2 .34s cubic-bezier(.16,1,.3,1) .66s backwards}
  #vg-intro:not(.still) .intro-skip{animation:vbSkipIn .3s ease .2s backwards}
}
@keyframes vbThumbR{from{transform:translateX(0)}to{transform:translateX(100%)}}
@keyframes vbThumbL{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes vbInR{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes vbInL{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes vbHead{from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes vbStep{0%,100%{box-shadow:0 0 0 0 var(--vgp-ring)}50%{box-shadow:0 0 0 7px var(--vgp-ring)}}
@keyframes vbRay{0%{opacity:0;transform:scale(.5)}60%{opacity:.9;transform:scale(1)}100%{opacity:.45;transform:scale(1.08)}}
@keyframes vbBreathe{0%{scale:.96}75%{scale:1.03}100%{scale:1}}
@keyframes vbPaneL{0%{opacity:0;transform:translate(-120px,40px) rotate(-18deg) scale(.7)}100%{opacity:1;transform:none}}
@keyframes vbPaneR{0%{opacity:0;transform:translate(120px,-40px) rotate(18deg) scale(.7)}100%{opacity:1;transform:none}}
@keyframes vbPaneC{0%{opacity:0;transform:translateY(90px) scale(.55)}100%{opacity:1;transform:none}}
@keyframes vbSweep{0%{opacity:.9;transform:translateX(-120%) skewX(-18deg)}100%{opacity:.9;transform:translateX(420%) skewX(-18deg)}}
@keyframes vbWordIn{0%{opacity:0;transform:translateY(14px);clip-path:inset(0 0 100% 0)}100%{opacity:1;transform:none;clip-path:inset(0)}}
@keyframes vbWordIn2{0%{opacity:0;transform:translateY(8px) scaleX(1.12)}100%{opacity:.85;transform:none}}
@keyframes vbSkipIn{from{opacity:0}}

/* ---- 8 reduced motion: states change at once; the intro shows the finished logo, still ---------------------------- */
@media (prefers-reduced-motion:reduce){
  html.vgd #app .vb-meter i,html.vgd #app#app .vb-seg>button,html.vgd #app#app#app .vb-card .vgp-inp{transition:none}
}