/* pili.ar: the same look as the app's welcome screen (navy, seat logo, Outfit/Figtree; logo letters in Nunito). */
@font-face{font-family:"Outfit";src:url("/fonts/Outfit.ttf") format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:"Figtree";src:url("/fonts/Figtree.ttf") format("truetype");font-weight:300 900;font-display:swap}
@font-face{font-family:"Nunito";src:url("/fonts/Nunito.ttf") format("truetype");font-weight:200 1000;font-display:swap}
:root{--bg:#1c1f3b;--fg:#fffdf8;--muted:#d9d5cc;--ink:#1c1f3b}
@media (prefers-color-scheme:dark){:root{--bg:#161931}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg)}
body{color:var(--fg);font-family:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.hero{min-height:100svh;max-width:30rem;margin:0 auto;padding:2rem 1.5rem;display:flex;flex-direction:column;justify-content:center;text-align:center}
/* The logo: four app seats in a 2x2 grid spelling P I L I. */
.seats{--w:clamp(6rem,30vw,7.4rem);display:grid;grid-template-columns:repeat(2,var(--w));gap:calc(var(--w)*.12);justify-content:center;margin:0 auto 2.2rem}
.seat{width:var(--w);height:calc(var(--w)*1.13);border-radius:calc(var(--w)*.43) calc(var(--w)*.43) calc(var(--w)*.24) calc(var(--w)*.24);display:flex;align-items:center;justify-content:center;font-family:"Nunito",sans-serif;font-weight:1000;font-variation-settings:"wght" 1000;font-size:calc(var(--w)*.46);line-height:1;color:var(--ink)}
.s1{background:#ff7a3d}.s2{background:#a9e0c8}.s3{background:#ffd978}.s4{background:#c9bef5}
h1{font-family:"Outfit",sans-serif;font-weight:700;font-size:clamp(2.2rem,9vw,2.7rem);line-height:1.05;letter-spacing:-.01em;margin:0 0 .9rem}
p{margin:0 0 1rem;font-size:1.06rem;line-height:1.4;color:var(--muted)}
/* "Muy pronto" store buttons: not the official badges, since the app is not published yet. */
.stores{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin:2.2rem 0 0}
.store{min-width:12.6rem;display:inline-flex;align-items:center;gap:.75rem;padding:.75rem 1.35rem .75rem 1.05rem;border-radius:1.1rem;background:#0b0c16;border:1px solid rgba(255,255,255,.2);box-shadow:0 .8rem 2rem rgba(0,0,0,.35);color:var(--fg);text-align:left}
.store svg{width:1.9rem;height:1.9rem;fill:currentColor;flex:none}
.store small{display:block;font-size:.72rem;font-weight:600;letter-spacing:.02em;color:var(--muted);line-height:1.2}
.store b{display:block;font-family:"Outfit",sans-serif;font-size:1.35rem;font-weight:700;line-height:1.1}
/* The app's dark map, very faint, behind everything. */
/* Sized to the large viewport so it does not rescale while iOS Safari's toolbar grows and shrinks. */
body::before{content:"";position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;background:url("/img/map.jpg") center/cover no-repeat;opacity:.14;pointer-events:none;z-index:0}
.hero,.how{position:relative;z-index:1}
.credits{position:fixed;right:.6rem;bottom:.4rem;z-index:1;font-size:.65rem;color:var(--muted);opacity:.55}
.credits a{color:inherit;text-decoration:none}
/* "Cómo funciona": the app's real screens, one step each. */
html{scroll-behavior:smooth}
.next{display:inline-block;margin:1.4rem auto 0;color:var(--fg);font-weight:600;text-decoration:none;opacity:.8}
.how{max-width:62rem;margin:0 auto;padding:4rem 1.5rem 6rem}
h2{font-family:"Outfit",sans-serif;font-weight:700;font-size:clamp(2rem,7vw,2.6rem);text-align:center;margin:0 0 .8rem}
.lead{max-width:34rem;margin:0 auto 3.5rem;text-align:center}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:3.5rem}
.step{display:grid;justify-items:center;gap:1.6rem;text-align:center}
/* An iPhone shell drawn in CSS: dark bezel, metal rim, side buttons and the Dynamic Island. The screen
   area is transparent so stacked phones show the screen underneath while the next one slides in. */
.phone{position:relative;margin:0;width:min(18rem,78vw);border:.6rem solid #0b0c16;border-radius:3.1rem;box-shadow:0 0 0 .16rem #565b72,0 0 0 .32rem #1d1f2e,0 1.6rem 3.5rem rgba(0,0,0,.45)}
.phone::before,.phone::after{content:"";position:absolute;width:.22rem;border-radius:.2rem;background:#565b72}
.phone::before{left:-1.12rem;top:20%;height:3rem;box-shadow:0 4rem 0 #565b72}
.phone::after{right:-1.12rem;top:27%;height:4.6rem}
.screen{display:block;position:relative;overflow:hidden;border-radius:2.5rem}
.screen::after{content:"";position:absolute;top:.6rem;left:50%;translate:-50% 0;width:30%;height:1.55rem;border-radius:1rem;background:#05060c}
.phone img{display:block;width:100%;height:auto}
.copy{max-width:24rem}
.n{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.7rem;border-radius:1rem 1rem .6rem .6rem;font-family:"Nunito",sans-serif;font-weight:1000;font-size:1.2rem;color:var(--ink);margin-bottom:.9rem}
h3{font-family:"Outfit",sans-serif;font-weight:700;font-size:1.6rem;line-height:1.15;margin:0 0 .6rem}
.how .stores{margin-top:4rem}
@media (min-width:52rem){
.step{grid-template-columns:1fr 1fr;align-items:center;text-align:left;gap:4rem}
.step:nth-child(even) .phone{order:2}
.step .phone{justify-self:end}.step:nth-child(even) .phone{justify-self:start}
.step:nth-child(even) .copy{justify-self:end}
}
/* Pinned walkthrough. A small script adds .pin and marks the step for the current scroll position as .on
   (earlier ones .past); each change is a short time-based transition, not tied to every scrolled pixel,
   so iOS Safari does not jitter. Without the script, or with reduced motion, the plain list above shows. */
/* No overflow clipping on any ancestor of the sticky block: in iOS Safari that makes it jump while scrolling. */
.how{max-width:none;padding-inline:max(1.5rem,calc((100% - 59rem) / 2))}
.how.pin .track{height:480svh}
.how.pin .steps{position:sticky;top:0;height:100vh;height:100lvh;display:block;will-change:transform}
.how.pin .step{position:absolute;inset:0}
/* The six shells stack exactly; only the lowest casts the shadow. */
.how.pin .step:not(:first-child) .phone{box-shadow:none}
.how.pin .phone img{translate:100% 0;transition:translate .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1),filter .6s}
.how.pin .on .phone img,.how.pin .past .phone img{translate:0 0}
.how.pin .past .phone img{transform:translateX(-30%);filter:brightness(.55)}
.how.pin .copy{opacity:0;translate:0 .8rem;transition:opacity .25s,translate .25s}
.how.pin .on .copy{opacity:1;translate:0 0;transition:opacity .45s .2s,translate .45s .2s}
/* Mobile: phone over text, centred as one block. The text gets a fixed-height row so every step's phone
   lands on the same spot. Sizes use svh/lvh, never dvh: those stay fixed while Safari's toolbar moves,
   so nothing resizes or jitters mid-scroll. */
@media (max-width:51.99rem){
.how.pin .step{align-content:center;grid-template-rows:auto 9.25rem;padding-block:.75rem;gap:1rem}
.how.pin .phone{width:min(86vw,calc((100svh - 12.95rem) * .462 + 1.2rem))}
.how.pin .copy{align-self:start}
.how.pin .n{width:2rem;height:2.25rem;font-size:1rem}
.how.pin .copy h3{font-size:1.4rem}
.how.pin .copy p{font-size:1rem;margin:0}
}
/* Mobile: step number to the left of the title, centred together; the text below. */
@media (max-width:51.99rem){
.head{display:flex;justify-content:center;align-items:center;gap:.65rem;margin-bottom:.55rem}
.head .n{margin:0;flex:none}
.head h3{margin:0;text-align:left}
}
@media (min-width:52rem){
.how.pin .step{gap:4rem}
.how.pin .step .phone,.how.pin .step:nth-child(even) .phone{order:0;justify-self:end;width:min(18rem,calc((100svh - 6rem) * .462))}
.how.pin .step .copy,.how.pin .step:nth-child(even) .copy{justify-self:start}
}