:root{--bg:#070707;--ink:#f7f7f6;--muted:#b4b4bc;--line:#37373e;--blue:#d3cdf9}
body{background:#070707}
.top.wrap:first-child{background:#080808ee;min-height:64px}
.opening{height:176svh}
.opening .hero.wrap{position:sticky;top:64px;height:calc(100svh - 64px);min-height:0;display:block;padding:0;overflow:hidden;background:radial-gradient(ellipse at 50% 50%,#242035,transparent 68%),#080808;isolation:isolate}
.hero .metal-stage{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;perspective:1000px}
.metal-stage::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#d9d7ee70 .65px,transparent 1px);background-size:17px 17px;mask-image:radial-gradient(ellipse,#000,transparent 70%)}
.metal-word{font:900 clamp(60px,20vw,360px)/.78 "Arial Black",Arial,sans-serif;letter-spacing:-.11em;padding:.1em .13em .1em .04em;position:relative;color:transparent;background:linear-gradient(171deg,#fff 5%,#8792b8 17%,#252638 28%,#fdf9ff 39%,#a4a9cd 49%,#27232f 50%,#7877a2 58%,#fefbff 72%,#494263 85%,#c5c4e6 94%);background-clip:text;-webkit-background-clip:text;filter:drop-shadow(0 14px 22px #8670d65e);-webkit-text-stroke:1px #c1b8f189;transform:translate3d(0,var(--metal-y,0px),0) rotateX(12deg) scale(var(--metal-scale,1));opacity:var(--metal-opacity,1)}
.spark{position:absolute;color:#eae8ff;text-shadow:0 0 15px #975bff;font-size:clamp(18px,3vw,40px)}
.spark-one{top:28%;left:12%}.spark-two{top:26%;right:17%}.spark-three{bottom:23%;right:10%}
.hero .hero-copy{position:absolute;inset:auto auto 5% 5%;text-align:left;max-width:34rem}
.hero .hero-copy h1{font-size:clamp(28px,4.8vw,72px);max-width:10ch}
.hero .hero-copy p:not(.eyebrow){margin:.65rem 0 1rem;font-size:clamp(14px,1.4vw,18px)}
.hero .hero-visual{position:absolute;z-index:1;width:min(52vw,830px);right:6%;bottom:14%;margin:0;opacity:var(--tv-opacity,1);transform:translate3d(0,var(--tv-y,0px),0) scale(var(--tv-scale,1))}
.hero .tv{transform:rotateX(8deg) rotateY(-9deg)}
.motion-toggle{position:absolute;z-index:3;top:18px;right:5%;border:1px solid var(--line);border-radius:999px;background:#15151a;color:#fff;padding:7px 13px;cursor:pointer;font-size:.82rem}
.provider,.pricing.wrap,.contact{background:radial-gradient(ellipse at 67% 39%,#20182e,#080808 72%)}
.contact{overflow:hidden}
.mail-stage{position:relative;perspective:850px}
.envelope{position:absolute;inset:8% 0 0;border-radius:24px;border:1px solid #9691a6;background:linear-gradient(155deg,#dcd5f3,#4f4961 48%,#b8a7da);display:grid;place-items:center;color:#15121e;font-size:4rem;transform:rotate(-6deg)}
#contact-form{position:relative;transform-origin:50% 100%;background:#141319f5}
.mail-stage.is-sending #contact-form{animation:fold-letter 480ms var(--ease) both}
@keyframes fold-letter{to{opacity:0;transform:translateY(65px) rotateX(70deg) scale(.72)}}
html.still .opening{height:auto}html.still .opening .hero.wrap{position:relative;top:auto}html.still .metal-word,html.still .hero .hero-visual{transform:none;opacity:1}
html.still .hero .tv{transform:none;translate:none}
@media(max-width:700px){.hero .hero-copy{left:6%;right:6%;bottom:6%}.hero .hero-visual{width:88vw;right:6%;bottom:38%}.hero .metal-stage{align-items:start;padding-top:20vh}.hero .metal-word{font-size:21vw}.hero .tv{transform:none}.opening{height:149svh}.hero-copy .eyebrow{margin-bottom:.4rem}}
@media(max-height:590px) and (min-width:701px){.hero .hero-copy{bottom:4%}.hero .hero-copy h1{font-size:clamp(28px,4.8vw,52px)}.hero .hero-visual{width:min(48vw,65vh)}}
@media(prefers-reduced-motion:reduce){.opening{height:auto}.opening .hero.wrap{position:relative;top:auto}.metal-word,.hero .hero-visual,.hero .tv{transform:none!important;opacity:1}.mail-stage.is-sending #contact-form{animation:none}}
:root{color-scheme:light;--bg:#fff;--ink:#17171a;--muted:#606068;--line:#e3e3e7;--blue:#254edb}
body{background:#fff}
body>.top.wrap:first-child{position:relative;background:#fff;color:#17171a;min-height:69px;backdrop-filter:none}
body>.top.wrap:first-child .brand i{background:#222}
.primary{background:#141416;color:#fff}
.opening{height:176svh;background:#000;color:#fff}
.opening .hero.wrap{top:0;height:100svh;background:#000;overflow:hidden}
.hero .metal-stage{align-items:center;padding:0}
.metal-stage::before{display:none}
.mark-stack{width:min(80vw,535px);margin-top:-5vh;text-align:center;line-height:.76;font:900 clamp(70px,17vw,224px)/.78 "Arial Black",Arial,sans-serif;letter-spacing:-.12em}
.mark-top{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:.045em;transform:translateY(var(--metal-y,0px)) scale(var(--metal-scale,1));opacity:var(--metal-opacity,1)}
.pixel-play{color:transparent;background:repeating-conic-gradient(#ffffff16 0 25%,transparent 0 50%) 0 0/12px 12px,linear-gradient(140deg,#869bc8 4%,#eeedce 25%,#e9b12a 39%,#f4eadb 51%,#68deaa 60%,#2d67df 72%,#e6d4f6 88%);background-clip:text;padding-right:.09em}
.vector-play{position:relative;color:#fcfcfd;-webkit-text-stroke:1px #4aa8ff;padding:0 .08em 0 0}
.vector-play i{position:absolute;width:10px;height:10px;border-radius:50%;border:2px solid #5eb3ff;background:#fff}
.vector-play i:nth-child(1){top:0;left:4%}.vector-play i:nth-child(2){top:0;right:0}.vector-play i:nth-child(3){bottom:0;left:4%}.vector-play i:nth-child(4){bottom:0;right:0}
.hero .metal-word{font:inherit;letter-spacing:-.095em;margin:.07em auto 0;padding:.1em .15em .1em 0;background-image:linear-gradient(156deg,#d0d5de 3%,#969ba4 17%,#252630 25%,#fefefe 36%,#727787 44%,#14161f 52%,#505363 62%,#f2f5ff 75%,#262832 92%);filter:drop-shadow(0 7px 0 #8c91a9) drop-shadow(0 16px 12px #4c506774)}
.motion-toggle{border-color:#444;background:#111;right:4%;top:18px}
.scroll-cue{position:absolute;bottom:5%;left:50%;translate:-50% 0;color:#b4b4b4;font-size:.85rem;white-space:nowrap;opacity:var(--metal-opacity,1)}
.hero .hero-copy,.hero .hero-visual{opacity:var(--reveal,0);visibility:var(--hero-visibility,hidden)}
.hero .hero-copy{bottom:11%;left:6%;right:auto;color:#fff;max-width:35vw;transform:translateY(var(--tv-y,20px))}
.hero .hero-copy p:not(.eyebrow){color:#ceced4}.hero .hero-copy .eyebrow{color:#bebdf4}
.hero .hero-copy .primary{background:#fff;color:#111}
.hero .hero-visual{right:5%;bottom:12%;width:49vw}
.hero .tv{box-shadow:0 25px 80px #4447666b;transform:rotateX(5deg) rotateY(-7deg)}
.experience.wrap{padding-block:clamp(70px,12vw,170px);width:min(1260px,calc(100% - 72px))}
.experience h2,.provider h2,.pricing h2,.contact h2,.faq h2{color:#17171a;letter-spacing:-.07em}
.story{grid-template-columns:minmax(220px,.65fr) minmax(0,1fr);gap:clamp(24px,6vw,90px)}
.story-display{grid-column:2;grid-row:1;background:#f2f2f5;border:1px solid #e6e6eb;border-radius:21px;padding:10px 12px;box-shadow:0 26px 54px #17172219;color:#222}
.steps{grid-column:1;grid-row:1}
.steps article{border-color:#e9e9ed;background:transparent;color:#17171a}
.window-bar{display:flex;gap:12px;align-items:center;margin-bottom:9px}
.window-dots{display:flex;gap:6px;flex:none}.window-dots i{width:9px;height:9px;border-radius:50%;background:#ff5b59}.window-dots i:nth-child(2){background:#f4ba3d}.window-dots i:nth-child(3){background:#2bc75b}
.story-display .tabs{display:flex;flex-wrap:wrap;gap:3px;background:#e7e7ea;border-radius:9px;margin:0;padding:3px;justify-content:flex-start}
.story-display .tabs a{padding:4px 8px;color:#45454b;font-size:12px;border-radius:7px;border:0}
.story-display .tabs a[aria-current=true]{background:white;color:#17171a;box-shadow:0 1px 3px #0002}
.story-display .tv{border:0;border-radius:12px;background:#fff;box-shadow:none}
.story-display .screen-note{margin:.55rem 0 .15rem;color:#5e5e68}
.provider,.pricing.wrap,.contact{background:#fafafa;border-top:1px solid #ededf0;min-height:0;padding-block:clamp(65px,10vw,145px)}
.provider .brand-demo,.plans article,#contact-form{background:#fff;color:#17171a;border-color:#e4e4e9}
.plans .plus{background:#f2f1fb;color:#17171a}
.provider .brand-demo>input,#contact-form :is(input,select,textarea){background:#f2f2f4;color:#17171a;border-color:transparent}
.brand-screen{color:#fff}
.contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4vw}
.mail-stage{display:contents}.contact-grid>div:first-child{grid-column:1}.mail-stage form{grid-column:1;grid-row:2;border:0;padding:0;background:transparent}
.mailbox{position:relative;grid-column:2;grid-row:1/span 2;height:clamp(270px,43vw,550px);align-self:center;perspective:800px;isolation:isolate}
.mail-box{position:absolute;top:13%;left:13%;width:78%;height:48%;border-radius:35% 39% 9% 9%;background:linear-gradient(150deg,#fbfcff,#d5dae6 66%,#a1a8b8);border-bottom:clamp(12px,3vw,32px) solid #3279ff;transform:rotateY(-25deg) rotateZ(4deg);box-shadow:20px 30px 50px #24283821}
.mail-door{position:absolute;inset:0 auto 0 0;width:48%;border-radius:47% 47% 2% 8%;background:linear-gradient(150deg,#eff1f7,#aab1be);border-right:5px solid #c4cad5}
.mail-flag{position:absolute;right:17%;bottom:20%;width:4%;height:92%;border-radius:4px;background:#ed242b;box-shadow:5px 0 #b61929}.mail-flag::before{content:"";position:absolute;top:0;left:0;width:260%;height:30%;background:#fa4247}
.mail-post{position:absolute;top:52%;left:49%;width:12%;height:34%;background:linear-gradient(90deg,#aeb5c3,#e6eaf3)}
.mail-foot{position:absolute;top:80%;left:29%;width:50%;height:13%;background:#dce1eb;transform:rotate(-7deg) skewX(22deg);box-shadow:5px 10px #b8c0d2}
.mail-letter{position:absolute;left:22%;top:29%;display:grid;place-items:center;width:22%;aspect-ratio:1.4;border-radius:7px;background:#fff;color:#254edb;box-shadow:0 5px 18px #0002;opacity:0}
.mail-stage.is-sending .mail-letter{animation:mail-flight .56s var(--ease) both}
.mail-stage.is-sending #contact-form{animation:none}
@keyframes mail-flight{0%{opacity:0;transform:translate(-90%,40%) rotate(-19deg)}35%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translate(100%,0) rotateY(-72deg) scale(.45)}}
html.still .opening{height:auto}html.still .opening .hero.wrap{position:relative;top:auto}
html.still .mark-top{transform:none;opacity:1}
html.still .hero .hero-copy,html.still .hero .hero-visual{visibility:visible;opacity:1;transform:none}
html.still .scroll-cue{display:none}
@media(max-width:740px){body>.top.wrap:first-child{min-height:60px}.opening{height:158svh}.hero .metal-stage{padding:0}.mark-stack{width:82vw;font-size:22vw}.hero .hero-copy{max-width:none;left:6%;right:6%;bottom:9%}.hero .hero-copy h1{max-width:none;font-size:clamp(27px,9vw,49px)}.hero .hero-visual{width:88vw;right:6%;bottom:40%}.experience.wrap{width:calc(100% - 36px)}.story{display:flex;flex-direction:column}.story-display{order:-1;top:0}.window-bar{gap:6px}.story-display .tabs a{font-size:11px;padding-inline:5px}.contact-grid{grid-template-columns:1fr}.mailbox{grid-column:1;grid-row:2;height:260px}.mail-stage form{grid-row:3}.hero .scroll-cue{bottom:6%}}
@media(prefers-reduced-motion:reduce){.mark-top{transform:none}.hero .hero-copy,.hero .hero-visual{visibility:visible;opacity:1;transform:none}.mail-stage.is-sending .mail-letter{animation:none}}
body>.top.wrap:first-child{position:absolute;top:0;left:0;z-index:5;background:transparent;color:white;border:0;pointer-events:none}
body>.top.wrap:first-child a{pointer-events:auto}
body>.top.wrap:first-child .brand,body>.top.wrap:first-child nav{opacity:.75}
body>.top.wrap:first-child .brand i{background:white}
body>.top.wrap:first-child .pill{visibility:hidden}
.hero .motion-toggle{top:78px}
.contact-grid{row-gap:24px}
#contact-form :is(input,select,textarea):focus-visible{outline:2px solid #254edb;outline-offset:2px}
html.still .hero .metal-stage{opacity:.22}
@media(prefers-reduced-motion:reduce){.hero .metal-stage{opacity:.22}}
body>.top.wrap:first-child nav,body>.top.wrap:first-child nav a[aria-current="location"]{color:#dedee4}
/* The product gallery follows the portfolio's light canvas. */
.experience.wrap{width:min(1100px,calc(100% - 12vw));padding:clamp(80px,12vw,155px) 0}
.experience .section-head{display:flex;justify-content:space-between;align-items:end;border-bottom:1px solid #e9e9eb;padding-bottom:25px;margin-bottom:clamp(36px,7vw,92px)}
.experience .section-head h2{margin:0;font-size:clamp(50px,9.2vw,140px);line-height:.8;letter-spacing:-.09em}
.experience .section-head>span{font-size:clamp(26px,4vw,60px);line-height:1}
.experience .story{align-items:center}
.experience .story-display{position:relative;top:auto;margin:0;padding:11px;background:#f3f3f5}
.experience .steps{display:block}
.experience .steps article{min-height:0;margin:0;padding:0;border:0}
.experience .steps article[hidden]{display:none}
.experience .steps article>span{display:inline-flex;align-items:center;gap:8px;border-radius:100px;background:#f3f3f4;padding:6px 16px 6px 6px;color:#19191b;font-size:19px;letter-spacing:-.04em;text-transform:none}
.experience .steps article>span::before{content:"";width:29px;height:29px;background:#fff;border-radius:50%;box-shadow:0 1px 4px #0001}
.experience .steps h3{font-size:clamp(28px,3.5vw,51px);line-height:.96;letter-spacing:-.065em;margin:20px 0 13px}
.experience .steps p{font-size:17px;line-height:1.45;max-width:32ch}
.experience .scene-tv:has(img[src$="hubpass.png"]) img{object-fit:contain;padding:12%;background:#fdfbff}
.experience .story-display .tabs a{white-space:nowrap}
.provider .chapter-type,.pricing .chapter-type,.contact .chapter-type{display:none}
.provider,.pricing.wrap,.contact{background:#fff}
.provider-grid,.contact-grid{width:min(1100px,calc(100% - 12vw))}
.pricing.wrap{padding-inline:max(6vw,calc((100% - 1100px)/2))}
.plans article{border-radius:20px;padding:clamp(22px,4vw,44px);box-shadow:none}
.plans .plus{background:#f4f4f6}
.plan-action{display:inline-block;margin-top:16px;padding:8px 15px;border-radius:100px;background:#ededf0;color:#17171a;font-weight:650}
.plan-action:hover{background:#dfdfe5}
.faq.wrap{width:min(1100px,calc(100% - 12vw));padding-block:clamp(52px,8vw,100px)}
.provider h2,.pricing h2,.contact h2,.faq h2{font-size:clamp(36px,6vw,84px);line-height:.92}
@media(max-width:740px){.experience .story{align-items:stretch}.experience .story-display{order:0}.experience .steps{order:1}.experience .section-head{padding-bottom:16px}.experience .steps h3{margin-top:12px}}

/* Product presentation */
.experience.wrap{width:100%;padding:clamp(64px,9vw,120px) max(6vw,calc((100% - 1110px)/2));background:radial-gradient(ellipse at 78% 47%,#bbdbff 0,transparent 53%),linear-gradient(162deg,#0b101b 0%,#263e62 22%,#e9f3ff 78%,#fff 100%)}
.experience .section-head{border-color:#fff4;margin-bottom:38px;align-items:center}
.experience .section-head h2,.experience .section-head>span{color:#f7faff}
.experience .section-head h2{font-size:clamp(45px,7.6vw,104px)}
.experience .story{align-items:center;gap:clamp(15px,3.6vw,52px);border:1px solid #fff8;border-radius:28px;background:#f8fbfff5;padding:clamp(16px,3.2vw,44px);box-shadow:0 24px 60px #182e5628}
.experience .story-display{background:#e6effb;border-color:#fff;border-radius:18px;box-shadow:0 8px 22px #0f326029}
.experience .steps article>span{background:#e7eef9}
.demo-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;padding-top:6px}
.demo-footer .screen-note{margin:0}
#demo-play{border:1px solid #b8cce6;border-radius:999px;background:#f7fbff;color:#1c3556;cursor:pointer;padding:5px 10px;font-size:12px;font-weight:630}
#demo-play[aria-pressed=true]{background:#25466e;color:white}
.pricing.wrap{background:linear-gradient(180deg,#fff,#eff5ff);border-top:0}
.plans article{background:#fff;border-color:#d9e4f4}
.plans .plus{background:#e4efff;border-color:#c8daf4}
#uso-autorizado{margin:0 0 28px;padding:18px 22px;background:#f6f9ff;border-radius:16px;border:1px solid #dae6f5}
#uso-autorizado h3{margin-bottom:6px}
#uso-autorizado p:last-child{margin-bottom:0}
.contact{background:radial-gradient(ellipse at 78% 42%,#d9e9ff,transparent 59%),#f8fbff;border-color:#e1ebf9}
@media(max-width:740px){.experience.wrap{padding-inline:5vw}.experience .section-head{margin-bottom:24px}.experience .story{border-radius:20px}.experience .story-display{padding:8px}.experience .steps{padding:3px 6px}}
