@font-face{font-family:"Fredoka";font-style:normal;font-weight:600;font-display:swap;src:url(/s/fonts/fredoka-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Fredoka";font-style:normal;font-weight:700;font-display:swap;src:url(/s/fonts/fredoka-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(/s/fonts/hanken-grotesk-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(/s/fonts/hanken-grotesk-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url(/s/fonts/hanken-grotesk-latin-600-normal.woff2) format("woff2")}

/*! Devices.css v0.2.0 | MIT License | github.com/picturepan2/devices.css
 *
 * Only the iPhone 14 Pro, vendored by hand from node_modules/devices.css/dist/devices.css
 * (the devDependency pins the exact source; devices.test.ts checks every rule below still
 * matches it). One change: each px length N became calc(N * var(--u)), so the phone scales
 * with the box it sits in. --u is one device pixel: the phone is 428 of them wide, and
 * .phone (site.css) is the size container they are measured against.
 *
 * MIT License
 *
 * Copyright (c) 2017 Yan Zhu
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */
.device,
.device::before,
.device::after,
.device *,
.device *::before,
.device *::after {
  box-sizing: border-box;
  display: block;
}

.device {
  position: relative;
  transform: scale(1);
  z-index: 1;
}

.device .device-frame {
  z-index: 1;
}

.device .device-screen {
  background-color: #000;
  background-position: center center;
  background-size: cover;
  object-fit: cover;
  position: relative;
}

.device-iphone-14-pro {
  height: calc(868 * var(--u));
  width: calc(428 * var(--u));
}

.device-iphone-14-pro .device-frame {
  background: #010101;
  border: calc(1 * var(--u)) solid #1b1721;
  border-radius: calc(68 * var(--u));
  box-shadow: inset 0 0 calc(4 * var(--u)) calc(2 * var(--u)) #c0b7cd, inset 0 0 0 calc(6 * var(--u)) #342c3f;
  height: calc(868 * var(--u));
  padding: calc(19 * var(--u));
  width: calc(428 * var(--u));
}

.device-iphone-14-pro .device-screen {
  border-radius: calc(49 * var(--u));
  height: calc(830 * var(--u));
  width: calc(390 * var(--u));
}

.device-iphone-14-pro .device-stripe::after,
.device-iphone-14-pro .device-stripe::before {
  border: solid rgba(1, 1, 1, .25);
  border-width: 0 calc(7 * var(--u));
  content: "";
  height: calc(7 * var(--u));
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 9;
}

.device-iphone-14-pro .device-stripe::after {
  top: calc(85 * var(--u));
}

.device-iphone-14-pro .device-stripe::before {
  bottom: calc(85 * var(--u));
}

.device-iphone-14-pro .device-header {
  background: #010101;
  border-radius: calc(20 * var(--u));
  height: calc(35 * var(--u));
  left: 50%;
  margin-left: calc(-60 * var(--u));
  position: absolute;
  top: calc(29 * var(--u));
  width: calc(120 * var(--u));
}

.device-iphone-14-pro .device-sensors::after,
.device-iphone-14-pro .device-sensors::before {
  content: "";
  position: absolute;
}

.device-iphone-14-pro .device-sensors::after {
  background: #010101;
  border-radius: calc(17 * var(--u));
  height: calc(33 * var(--u));
  left: 50%;
  margin-left: calc(-60 * var(--u));
  top: calc(30 * var(--u));
  width: calc(74 * var(--u));
}

.device-iphone-14-pro .device-sensors::before {
  background: radial-gradient(farthest-corner at 20% 20%, #6074bf 0, transparent 40%), radial-gradient(farthest-corner at 80% 80%, #513785 0, #24555e 20%, transparent 50%);
  border-radius: 50%;
  box-shadow: 0 0 calc(1 * var(--u)) calc(1 * var(--u)) rgba(255, 255, 255, .05);
  height: calc(9 * var(--u));
  left: 50%;
  margin-left: calc(36 * var(--u));
  top: calc(42 * var(--u));
  width: calc(9 * var(--u));
}

.device-iphone-14-pro .device-btns {
  background: #1b1721;
  border-radius: calc(2 * var(--u));
  height: calc(32 * var(--u));
  left: calc(-2 * var(--u));
  position: absolute;
  top: calc(115 * var(--u));
  width: calc(3 * var(--u));
}

.device-iphone-14-pro .device-btns::after,
.device-iphone-14-pro .device-btns::before {
  background: #1b1721;
  border-radius: calc(2 * var(--u));
  content: "";
  height: calc(62 * var(--u));
  left: 0;
  position: absolute;
  width: calc(3 * var(--u));
}

.device-iphone-14-pro .device-btns::after {
  top: calc(60 * var(--u));
}

.device-iphone-14-pro .device-btns::before {
  top: calc(140 * var(--u));
}

.device-iphone-14-pro .device-power {
  background: #1b1721;
  border-radius: calc(2 * var(--u));
  height: calc(100 * var(--u));
  position: absolute;
  right: calc(-2 * var(--u));
  top: calc(200 * var(--u));
  width: calc(3 * var(--u));
}

.device-iphone-14-pro .device-home::after,
.device-iphone-14-pro .device-home::before {
  border: solid rgba(1, 1, 1, .25);
  border-width: calc(6 * var(--u)) 0;
  content: "";
  height: calc(6 * var(--u));
  position: absolute;
  width: calc(6 * var(--u));
  z-index: 9;
}

.device-iphone-14-pro .device-home::after {
  right: calc(86 * var(--u));
  top: 0;
}

.device-iphone-14-pro .device-home::before {
  bottom: 0;
  left: calc(86 * var(--u));
}

/* The dressed phone: sizing units, status bar, Safari bar, per-shot colours. Shared by the
   site (assets.ts bundles it after devices.css) and the share image (scripts/og.mjs). */
/* The phone (devices.css, vendored). .phone is the size container: its width is the phone's
   width, and --u, one of the phone's 428 device pixels, is measured against it. Nothing here
   uses --u on .phone itself, where it would resolve against the viewport instead. */
.phone{container-type:inline-size;--u:calc(100cqw / 428);--screen-top:#fff;--screen-ink:#1c1c1e;--screen-bottom:#fff}
.phone .device-frame{box-shadow:inset 0 0 calc(4 * var(--u)) calc(2 * var(--u)) #c0b7cd,inset 0 0 0 calc(6 * var(--u)) #342c3f,0 calc(70 * var(--u)) calc(120 * var(--u)) calc(-40 * var(--u)) rgba(44,30,63,.5)}
.phone .device-screen{overflow:hidden;display:flex;flex-direction:column;background:var(--screen-bottom)}
.phone .device-screen img{width:100%;height:auto;flex:none}
.sbar{flex:none;height:calc(54 * var(--u));display:flex;align-items:center;justify-content:space-between;background:var(--screen-top);color:var(--screen-ink)}
.sbar .clock,.sbar .icons{width:calc(135 * var(--u));display:flex;align-items:center;justify-content:center;gap:calc(6 * var(--u))}
.sbar .clock{padding-left:calc(8 * var(--u));font:600 calc(17 * var(--u))/1 -apple-system,system-ui,sans-serif;letter-spacing:-.01em}
.sbar .icons{padding-right:calc(8 * var(--u))}
.sbar svg{fill:currentColor}
.sbar .sig{width:calc(18 * var(--u))}
.sbar .wifi{width:calc(16 * var(--u))}
.sbar .bat{width:calc(28 * var(--u))}
.safari{position:relative;flex:1;background:rgba(248,247,250,.92);border-top:calc(1 * var(--u)) solid rgba(44,30,63,.1)}
.safari .url{margin:calc(10 * var(--u)) calc(12 * var(--u)) 0;height:calc(48 * var(--u));border-radius:calc(14 * var(--u));background:#fff;box-shadow:0 calc(1 * var(--u)) calc(6 * var(--u)) rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;gap:calc(6 * var(--u));font:500 calc(16 * var(--u))/1 -apple-system,system-ui,sans-serif;color:#1c1c1e}
.safari .lock{width:calc(10 * var(--u));fill:#8e8e93;color:#8e8e93}
.safari .homebar{position:absolute;left:50%;bottom:calc(8 * var(--u));width:calc(134 * var(--u));height:calc(5 * var(--u));margin-left:calc(-67 * var(--u));border-radius:calc(3 * var(--u));background:#111}
/* Each shot's own colours (defaults on .phone above, for a shot without a class here): the status bar continues the page's top edge, and the strip
   behind Safari's translucent bar continues its bottom edge (sampled from the images). */
.s-hub,.s-trivia{--screen-top:linear-gradient(90deg,#FFE9BD,#EAE9CB 50%,#D4EBDB);--screen-ink:#1c1c1e;--screen-bottom:#F2E5E2}
.s-conga{--screen-top:#D7263D;--screen-ink:#fff;--screen-bottom:#B21C32}

/* Ported from docs/design-explorations/33-landing.html. */
:root{
  --paper:#F6F5F9; --card:#FFFFFF; --line:#E4E0EC; --ink:#2C1E3F; --ink-2:#5A4B70; --ink-3:#8A7FA0;
  --coral:#FF6B5C; --coral-deep:#E8503F; --sun:#FFC23C; --sky:#CFEAF6; --asphalt:#3B3350;
  --f-display:"Fredoka",system-ui,sans-serif; --f-body:"Hanken Grotesk",system-ui,sans-serif;
  --wrap:1120px;
}
*{box-sizing:border-box;margin:0}
html{background:var(--paper);scroll-behavior:smooth}
body{font-family:var(--f-body);color:var(--ink);background:var(--paper);overflow-x:hidden;-webkit-font-smoothing:antialiased;font-size:17px;line-height:1.55}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
picture{display:contents}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
h2{font:700 clamp(30px,5vw,44px)/1.05 var(--f-display);letter-spacing:-.01em;max-width:18ch}
.sub{margin-top:12px;color:var(--ink-2);max-width:52ch}
section{padding:88px 0}
section.no-top{padding-top:0}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:6px}

/* nav */
.nav{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.nav.scrolled{border-color:var(--line)}
.nav .wrap{display:flex;align-items:center;gap:24px;height:64px}
.brand{display:flex;align-items:center;gap:8px;font:700 21px/1 var(--f-display);text-decoration:none;margin-right:auto}
.brand svg{height:34px;width:auto;margin:0 -6px 0 -6px} /* the viewBox carries margin around the mark */
.nav nav{display:none;gap:22px}
.nav nav a{text-decoration:none;font:500 15px/1 var(--f-body);color:var(--ink-2)}
.nav nav a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px;border-radius:999px;text-decoration:none;font:600 16px/1 var(--f-display);white-space:nowrap}
.btn-ink{background:var(--ink);color:#fff}
.btn-coral{background:var(--coral);color:#fff;box-shadow:0 3px 0 var(--coral-deep)}
.btn-ghost{border:1.5px solid var(--ink);color:var(--ink)}
.btn-sm{padding:10px 16px;font-size:15px}
@media (min-width:860px){.nav nav{display:flex}}

/* hero */
.hero{padding:40px 0 56px}
.hero .wrap{display:grid;gap:40px;align-items:center}
.hero h1{font:700 clamp(44px,8.4vw,80px)/.96 var(--f-display);letter-spacing:-.02em;max-width:10ch}
.hero .def{margin-top:20px;font-size:19px;color:var(--ink-2);max-width:40ch}
.hero .def strong{color:var(--ink)}
.hero .ctas{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
.hero .facts{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px 20px;padding:0;list-style:none;font:500 15px/1.3 var(--f-body);color:var(--ink-2)}
.hero .facts li{display:flex;align-items:center;gap:8px}
.hero .facts svg{width:18px;height:18px;flex:none}
.phones{position:relative;height:420px;max-width:360px;width:100%;margin:0 auto}
/* .pw wraps a phone and its tag: the parallax moves .pw, the load animation moves .phone */
.pw{position:absolute;width:min(164px,calc((100% - 20px) / 2))}
.pw.a{left:0;top:40px;z-index:2}
.pw.b{right:0;top:0;z-index:1}
.tag{position:absolute;z-index:3;padding:8px 12px;border-radius:12px;font:600 14px/1.2 var(--f-display);box-shadow:0 8px 20px -8px rgba(44,30,63,.35)}
.tag small{display:block;font:500 12px/1.2 var(--f-body);opacity:.8}
/* Both tags sit on the bottom bezel and Safari's bar, never on the app's own screen. */
.tag.a{left:-6px;bottom:-14px;background:var(--coral);color:#fff}
.tag.b{right:-6px;bottom:-14px;background:var(--ink);color:#fff}
@media (min-width:860px){
  .hero{padding:64px 0 88px}
  .hero .wrap{grid-template-columns:1.05fr 1fr}
  .phones{height:550px;max-width:480px}
  .pw{width:min(224px,calc((100% - 28px) / 2))}
}

/* the bus strip */
.strip{position:relative;height:260px;overflow:hidden;background:var(--sky);padding:0}
.strip .city{position:absolute;left:0;bottom:62px;height:150px;width:2400px}
.strip .city svg{height:100%;width:auto}
.strip .road{position:absolute;left:0;right:0;bottom:0;height:62px;background:var(--asphalt)}
.strip .road::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:#8C83A0}
.strip .lanes{position:absolute;left:0;top:30px;height:4px;width:3000px;background:repeating-linear-gradient(90deg,#F4EFFA 0 36px,transparent 36px 90px)}
.strip .bus{position:absolute;left:50%;bottom:22px;width:min(78vw,420px);margin-left:calc(min(78vw,420px) / -2);z-index:2}
.strip .bus svg{width:100%;height:auto;overflow:visible;display:block}
.strip .caption{position:absolute;left:16px;top:18px;z-index:3;max-width:min(92vw,560px);font:600 clamp(19px,3.2vw,26px)/1.2 var(--f-display);color:var(--ink)}
@media (min-width:860px){.strip{height:320px}.strip .city{height:190px}.strip .bus{width:460px;margin-left:-230px}.strip .caption{left:calc(50% - 544px)}}

/* how it works */
.steps{margin-top:40px;display:grid;gap:18px;padding:0;list-style:none;counter-reset:s}
.step{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:22px;display:grid;grid-template-columns:1fr;align-content:start;gap:18px;counter-increment:s}
.step .n{font:600 14px/1 var(--f-display);color:var(--coral)}
.step .n::before{content:"Paso " counter(s)}
.step h3{margin-top:8px;font:600 22px/1.15 var(--f-display)}
.step p{margin-top:8px;color:var(--ink-2);font-size:16px}
/* The phone rises from the card's bottom edge: its top part shows, the rest is cropped. */
.step .shot{height:230px;border-radius:16px;background:#EFEBF5;overflow:hidden;display:flex;align-items:flex-start;justify-content:center;padding-top:22px}
.step .shot .phone{width:min(62%,200px)}
.step .shot.qr{flex-direction:column;align-items:center;justify-content:center;gap:12px;padding-top:0}
.step .shot.qr svg{height:172px;width:auto;display:block}
.step .shot.qr .qr-cap{margin:0;font:600 17px/1 var(--f-display);color:var(--ink)}
@media (min-width:860px){.steps{grid-template-columns:repeat(3,1fr)}}

/* games */
.games{margin-top:36px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:0;list-style:none}
.game{border-radius:18px;padding:18px;color:#fff;min-height:118px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.game b{font:700 22px/1.05 var(--f-display)}
.game span{font:500 14px/1.3 var(--f-body);opacity:.92}
@media (min-width:860px){.games{grid-template-columns:repeat(3,1fr)}}

/* empresas block */
.biz{background:var(--ink);color:#fff}
.biz h2{color:#fff}
.biz .sub{color:#CFC6DD}
.cols{margin-top:40px;display:grid;gap:18px}
.col{border:1px solid #4A3B66;border-radius:22px;padding:24px}
.col h3{font:600 22px/1.15 var(--f-display)}
.col ul{margin-top:14px;padding:0;list-style:none;display:grid;gap:10px}
.col li{display:flex;gap:10px;color:#E6E0EF;font-size:16px}
.col li::before{content:"";flex:none;width:8px;height:8px;margin-top:9px;border-radius:50%;background:var(--coral)}
.measure{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.measure span{padding:8px 12px;border-radius:999px;background:#3A2C52;font:500 14px/1 var(--f-body);color:#fff}
.privacy{margin-top:18px;font-size:15px;color:#CFC6DD}
.contact{margin-top:36px;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.contact .mail{color:#fff;font:500 16px/1 var(--f-body)}
.btn-wa{background:#fff;color:var(--ink)}
.btn-wa svg{width:20px;height:20px}
@media (min-width:860px){.cols{grid-template-columns:1fr 1fr}}

/* faq */
.faq{margin-top:36px;display:grid;gap:14px}
.faq div{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px 22px}
.faq h3{font:600 19px/1.25 var(--f-display)}
.faq p{margin-top:6px;color:var(--ink-2);font-size:16px}
@media (min-width:860px){.faq{grid-template-columns:1fr 1fr}}

/* stop */
.stop{position:relative;padding:72px 0 0;overflow:hidden;background:linear-gradient(var(--paper),#FFE3CF)}
.stop .wrap{position:relative;z-index:3}
.stop .cta-row{margin-top:22px}
.scene{position:relative;height:230px;margin-top:24px}
.scene .road{position:absolute;left:0;right:0;bottom:0;height:56px;background:var(--asphalt)}
.scene .curb{position:absolute;left:0;right:0;bottom:56px;height:10px;background:#D9CBE3}
.scene .rig{--bw:min(70vw,340px);position:absolute;top:0;bottom:0;width:var(--bw);left:clamp(0px,calc(50% - var(--bw) * .4),calc(100% - var(--bw) - 60px))}
.scene .bus{position:absolute;left:0;bottom:28px;width:100%}
.scene .bus svg{width:100%;height:auto;display:block;overflow:visible}
.sign{position:absolute;bottom:66px;left:calc(100% * 474 / 600 - 5px);width:10px;height:190px;z-index:0}
.scene .bus{z-index:2}
.sign .pole{position:absolute;z-index:-1;left:3px;bottom:0;width:4px;height:100%;background:var(--ink);border-radius:3px}
.sign .plate{position:absolute;left:-34px;top:0;width:78px;padding:7px 0;border-radius:9px;background:var(--ink);color:#fff;text-align:center;font:700 13px/1 var(--f-display);letter-spacing:.06em}
.sign .plate b{display:block;margin-top:5px;font:600 11px/1.1 var(--f-body);letter-spacing:0;color:var(--sun)}

/* the home's link into /empresas, and the /empresas page */
.biz .more{margin-top:18px;font:600 16px/1.2 var(--f-display)}
.biz .more a{color:#fff;text-underline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.page-head{padding:40px 0 0}
.page-head .wrap{display:grid;gap:8px;align-items:center}
.page-head h1{font:700 clamp(34px,6.4vw,56px)/1 var(--f-display);letter-spacing:-.015em;max-width:16ch}
.page-head .def{margin-top:18px;font-size:18px;color:var(--ink-2);max-width:46ch}
.page-head .def strong{color:var(--ink)}
.page-head .scene{height:262px;margin:8px 0 40px;background:linear-gradient(var(--paper),#FFE3CF);border-radius:22px;overflow:hidden}
section.plain{padding:56px 0}
section.plain.no-top{padding-top:0}
.plain .cols{margin-top:0}
.cols.light .col{background:var(--card);border-color:var(--line)}
.cols.light .col li{color:var(--ink-2)}
.measure.light{margin-top:20px}
.measure.light span{background:#EFEBF5;color:var(--ink)}
.plain .steps{margin-top:28px}
@media (min-width:860px){
  .page-head{padding:56px 0 24px}
  .page-head .wrap{grid-template-columns:1.1fr 1fr;gap:48px}
}
footer{background:var(--asphalt);color:#D9D2E4;padding:28px 0 40px;font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between}
footer a{color:#fff}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .strip .bus{transform:none}
}