@font-face{font-family:Exo;src:url("/assets/exo2-latin.woff2") format("woff2");font-weight:600 700;font-display:swap}
:root{color-scheme:dark;--fg:#f4f4f4;--muted:#a0a0a0;--line:#262626;--surface:#111;--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}
html{background:#000;color:var(--fg);font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;scroll-padding-top:24px}
body{margin:0}
::selection{background:#e4e4e4;color:#000}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:5px}
a:hover{color:#fff}
a:focus-visible,summary:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:4px}
img{display:block;max-width:100%;height:auto}
p,h1,h2,h3{margin:0}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.wrap{width:min(1040px,100% - 48px);margin-inline:auto}
.skip{position:absolute;left:24px;top:12px;background:#fff;color:#000;padding:8px 16px;transform:translateY(-180%);z-index:2}
.skip:focus{transform:none}
.skip:hover{color:#000}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:88px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 25px/1 Exo,sans-serif;letter-spacing:-.02em}
.brand img{width:30px;height:24px;object-fit:contain}
.nav-links{display:flex;align-items:center;gap:26px;font-size:14px}
.nav-links a{color:var(--muted);text-decoration:none;padding-block:12px}
.nav-links a:hover,.nav-links a[aria-current=page]{color:var(--fg)}
.nav-links .nav-open{color:var(--fg)}
.hero{display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:24px;text-align:left;padding:64px 0 0}
.hero h1{font-size:clamp(42px,5.6vw,62px);font-weight:650;line-height:1.08;letter-spacing:-.04em}
.hero h1 span{display:block;color:#b8b8b8}
.hero .intro{margin-inline:0}
.hero .actions,.hero .platforms{justify-content:flex-start}
.mascot{width:min(280px,100%);min-width:0;margin:0;justify-self:center;text-align:center}
.mascot-stage{position:relative;aspect-ratio:8/7;width:100%;isolation:isolate}
.mascot-poster{width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.mascot-stage model-viewer{position:absolute;inset:0;width:100%;height:100%;visibility:hidden;background:transparent;--poster-color:transparent;--progress-bar-color:#aaa;touch-action:pan-y}
.mascot.is-ready model-viewer{visibility:visible}
.mascot.is-ready .mascot-poster{visibility:hidden}
.mascot-stage model-viewer:focus-visible{outline:2px solid var(--fg);outline-offset:4px;border-radius:20px}
.mascot-caption{min-height:80px;display:flex;flex-direction:column;align-items:center;gap:4px}
.mascot-hint{color:var(--muted);font-size:13px}
.mascot-controls{display:flex;justify-content:center;gap:4px}
.mascot [hidden]{display:none}
.mascot-button{font:inherit;font-size:13px;min-height:44px;padding:8px 16px;border:1px solid transparent;border-radius:100px;background:transparent;color:var(--fg);cursor:pointer;touch-action:manipulation;user-select:none;-webkit-tap-highlight-color:transparent;transition:background .2s var(--ease)}
.mascot-button:hover{background:#191919}
.mascot-button:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.mascot-button[aria-pressed=true]{background:var(--surface);border-color:var(--line)}
.mascot-button:disabled{cursor:progress;color:var(--muted)}
@media(max-width:760px){
  .hero{display:flex;flex-direction:column-reverse;align-items:center;gap:20px;text-align:center;padding-top:12px}
  .hero .intro{margin-inline:auto}
  .hero .actions,.hero .platforms{justify-content:center}
  .mascot{width:min(180px,50vw)}
  .mascot-caption{min-height:72px}
}
@media(prefers-reduced-motion:reduce){
  .mascot-button{transition:none}
}
.intro{color:var(--muted);max-width:560px;font-size:19px;line-height:1.65;margin:24px auto 0}
.actions{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:30px}
.button{display:inline-flex;justify-content:center;align-items:center;min-height:48px;padding:10px 24px;border:1px solid var(--line);border-radius:100px;text-decoration:none;font-size:15px;font-weight:600;transition:background .25s var(--ease),transform .25s var(--ease);-webkit-tap-highlight-color:transparent}
.button:hover{background:#191919}
.button:active{transform:scale(.98)}
.button-primary{background:var(--fg);color:#000;border-color:var(--fg)}
.button-primary:hover{background:#d8d8d8;color:#000}
.platforms{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 22px;list-style:none;padding:0;margin:28px 0 0;color:var(--muted);font-size:13px}
.platforms a{text-decoration:none}
.platforms .whatsapp{color:var(--fg);text-decoration:underline;text-decoration-color:#555}
.gallery{margin:64px 0 0}
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;padding:0;margin:0 auto;list-style:none;max-width:850px}
.shots img{width:100%;border:1px solid var(--line);border-radius:28px}
.gallery figcaption{margin-top:20px;text-align:center;font-size:13px;color:var(--muted)}
.section{border-top:1px solid var(--line);padding:64px 0;margin-top:64px}
.split{display:grid;grid-template-columns:1fr 1.35fr;gap:64px}
.section h2{font-size:32px;line-height:1.2;letter-spacing:-.03em;font-weight:600}
.section h2 span{display:block;color:var(--muted)}
.section p{color:var(--muted)}
.section p+p{margin-top:16px}
.text-link{display:inline-block;margin-top:20px;font-size:15px}
.read-more{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:22px;font-size:15px}
.faq{max-width:660px}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:20px;font-weight:550;cursor:pointer}
summary::-webkit-details-marker{display:none}
summary::after{content:"";width:8px;height:8px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);transition:transform .25s var(--ease);flex-shrink:0;margin-right:4px}
details[open] summary::after{transform:rotate(225deg)}
details p{padding:0 28px 22px 0;font-size:15px}
.closing{text-align:center;padding:64px 0 80px;border-top:1px solid var(--line)}
.closing h2{font-size:34px;line-height:1.2;letter-spacing:-.03em;font-weight:600}
.closing p{margin-top:12px;color:var(--muted)}
.footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;border-top:1px solid var(--line);padding-block:28px 40px;color:var(--muted);font-size:13px}
.footer-links{display:flex;flex-wrap:wrap;gap:12px 24px}
.footer-legal{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:0 0 34px;color:var(--muted);font-size:11px}
.inception-badge{width:96px;height:auto;opacity:.9}
.footer-legal p{margin:0}
.footer-legal .legal-line{flex-basis:100%;opacity:.6;font-size:10px}
.footer a{text-decoration:none}
.footer a:hover{text-decoration:underline}
.article{max-width:700px;margin:64px auto 80px}
.breadcrumb{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px;color:var(--muted);font-size:14px}
.breadcrumb a{text-decoration:none}
.article h1{font-size:clamp(38px,5vw,56px);line-height:1.12;letter-spacing:-.035em;font-weight:650}
.article .lead{font-size:20px;color:var(--muted);margin-top:24px}
.article .actions{justify-content:flex-start;margin-bottom:52px}
.article h2{font-size:28px;font-weight:600;line-height:1.25;letter-spacing:-.025em;margin:48px 0 16px}
.article p{color:#bababa}
.article p+p{margin-top:16px}
.article ol,.article ul{padding-left:24px;color:#bababa}
.article li{margin-block:14px;padding-left:6px}
.article li strong{color:var(--fg)}
.article code{font:14px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--fg);background:var(--surface);border-radius:4px;padding:3px 6px}
.example{border-block:1px solid var(--line);padding:24px 0;margin:24px 0;font-size:19px;color:var(--fg)}
.article .related{border-top:1px solid var(--line);margin-top:52px;padding-top:24px}
@media(prefers-reduced-motion:no-preference){
  .hero h1{animation:settle .8s var(--ease) both}
  @keyframes settle{from{transform:translateY(10px)}to{transform:translateY(0)}}
}
@media(max-width:820px){
  .hero{padding-top:20px}
  .split{grid-template-columns:1fr;gap:28px}
  .section{padding:48px 0;margin-top:48px}
  .shots{gap:16px}
  .shots img{border-radius:22px}
}
@media(max-width:600px){
  .wrap{width:calc(100% - 40px)}
  .nav{min-height:76px;gap:12px}
  .nav-links{gap:18px}
  .nav-links .guide-nav{display:none}
  .hero{padding-top:12px}
  .hero h1{font-size:clamp(34px,9.5vw,48px)}
  .intro{font-size:17px;margin-top:22px;max-width:360px}
  .actions{gap:10px;margin-top:26px}
  .button{padding-inline:20px;font-size:14px}
  .platforms{gap:10px 18px}
  .gallery{margin-top:44px}
  .shots{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#333 #000;gap:16px;margin-inline:-20px;padding:0 20px 16px;max-width:none}
  .shots li{flex:0 0 72%;scroll-snap-align:center}
  .shots img{border-radius:28px}
  .gallery figcaption{font-size:12px;margin-top:12px}
  .section h2{font-size:29px}
  .closing{padding-block:44px 56px}
  .closing h2{font-size:30px}
  .footer{align-items:flex-start;flex-direction:column}
  .footer-links{gap:12px 20px}
  .article{margin-block:40px 56px}
  .article .lead{font-size:18px}
}