@font-face{font-family:Nunito;font-style:normal;font-weight:200 1000;font-display:swap;src:url(../fonts/hms-display-cyr-ext.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Nunito;font-style:normal;font-weight:200 1000;font-display:swap;src:url(../fonts/hms-display-cyr.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Nunito;font-style:normal;font-weight:200 1000;font-display:swap;src:url(../fonts/hms-display-viet.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Nunito;font-style:normal;font-weight:200 1000;font-display:swap;src:url(../fonts/hms-display-latin-ext.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c4,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Nunito;font-style:normal;font-weight:200 1000;font-display:swap;src:url(../fonts/hms-display-latin.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Nunito Fallback;src:local("Arial");ascent-override:99.71%;descent-override:34.82%;line-gap-override:0.00%;size-adjust:101.39%}.hms-font-display{font-family:Nunito,Nunito Fallback;font-style:normal}:root{--font-nunito:"Nunito","Nunito Fallback"}@font-face{font-family:GeistSans;src:url(../fonts/hms-sans-latin.woff2) format("woff2");font-display:swap;font-weight:100 900}@font-face{font-family:GeistSans Fallback;src:local("Arial");ascent-override:94.56%;descent-override:27.76%;line-gap-override:0.00%;size-adjust:106.28%}.hms-font-sans{font-family:GeistSans,GeistSans Fallback}:root{--font-geist-sans:"GeistSans","GeistSans Fallback"}

/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid}}}@layer theme{:host,:root{--color-black:#000;--color-white:#fff;--spacing:.25rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--font-weight-semibold:600;--font-weight-bold:700;--radius-2xl:1rem;--ease-out:cubic-bezier(0,0,.2,1);--aspect-video:16/9}}.invisible{visibility:hidden}.visible{visibility:visible}.fixed{position:fixed}.static{position:static}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mx-auto{margin-inline:auto}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-2\.5{margin-top:calc(var(--spacing) * 2.5)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-12{margin-top:calc(var(--spacing) * 12)}.mr-1\.5{margin-right:calc(var(--spacing) * 1.5)}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.table{display:table}.aspect-video{aspect-ratio:var(--aspect-video)}.max-w-\[980px\]{max-width:980px}.border-collapse{border-collapse:collapse}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.resize{resize:both}.grid-cols-\[repeat\(auto-fill\,minmax\(270px\,1fr\)\)\]{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}.items-center{align-items:center}.justify-center{justify-content:center}.gap-\[18px\]{gap:18px}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-solid{--tw-border-style:solid;border-style:solid}.border-\[\#ececec\]{border-color:#ececec}.bg-white{background-color:var(--color-white)}.p-3{padding:calc(var(--spacing) * 3)}.px-6{padding-inline:calc(var(--spacing) * 6)}.pt-\[140px\]{padding-top:140px}.pb-24{padding-bottom:calc(var(--spacing) * 24)}.\[font-family\:var\(--display\)\]{font-family:var(--display)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-\[15px\]{font-size:15px}.text-\[22px\]{font-size:22px}.text-\[clamp\(30px\,7vw\,40px\)\]{font-size:clamp(30px,7vw,40px)}.leading-\[1\.1\]{--tw-leading:1.1;line-height:1.1}.leading-\[1\.45\]{--tw-leading:1.45;line-height:1.45}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[-0\.02em\]{--tw-tracking:-.02em;letter-spacing:-.02em}.text-\[\#3d3d3d\]{color:#3d3d3d}.text-black\/40{color:#0006}@supports (color:color-mix(in lab,red,red)){.text-black\/40{color:color-mix(in oklab,var(--color-black) 40%,transparent)}}.text-black\/50{color:#00000080}@supports (color:color-mix(in lab,red,red)){.text-black\/50{color:color-mix(in oklab,var(--color-black) 50%,transparent)}}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}:root{--bg:#ededed;--ink:#000;--game-ink:#17130e;--muted:#00000080;--comb:#cc3f02;--gold:#ffc014;--shell:#fff8ec;--pill-gray:#f3f3f3;--grad:linear-gradient(100deg,#49d8ff 10%,#6726f1 44%,#ff35a7 98%);--display:ui-rounded,"SF Pro Rounded",var(--font-nunito),system-ui,sans-serif;--ease-out:cubic-bezier(.23,1,.32,1)}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}html.lenis{scroll-behavior:auto}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}body{background:var(--bg);color:var(--ink);font-family:var(--font-geist-sans),-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased;font-size:17px;font-weight:500;line-height:1.5;overflow-x:clip}.wrap{max-width:640px;margin:0 auto;padding:0 24px}.wide{max-width:980px}header{z-index:10;background:0 0;position:absolute;top:0;left:0;right:0}.navpill{justify-content:space-between;padding:20px clamp(20px,5.5vw,80px)}.brand,.navpill{align-items:center;display:flex}.brand{text-decoration:none}.brand svg{width:118px;height:30px;display:block}@media (max-width:640px){.navpill{padding-top:14px}.brand svg{width:98px;height:25px}}.nav-app{border:2px solid var(--pill-gray);letter-spacing:-.02em;color:var(--ink);transition:transform .16s var(--ease-out),border-color .15s ease;background:#fff;border-radius:100px;align-items:center;gap:6px;padding:11px 18px;font-size:16px;font-weight:600;line-height:1;text-decoration:none;display:inline-flex}.nav-app svg{width:16px;height:16px;margin-top:-3px}@media (hover:hover) and (pointer:fine){a.nav-app:hover{border-color:#e5e5e5;transform:translateY(-1px)}}a.nav-app:active{transform:scale(.97)}span.nav-app{cursor:default}@media (max-width:640px){.nav-app{padding:9px 14px;font-size:14px}.nav-app svg{width:14px;height:14px}}h1,h2,h3{font-family:var(--display)}h1{letter-spacing:-.03em;font-size:clamp(32px,4.1vw,58px);font-weight:900;line-height:.94}h2{letter-spacing:-.02em;font-size:clamp(23px,2vw,29px);font-weight:600;line-height:1.2}.award-row{flex-wrap:wrap;justify-content:center;gap:8px 36px;margin-top:6px;display:flex}.award-laurel{color:#a9a9a9;transition:color .16s ease,transform .16s var(--ease-out);align-items:center;gap:6px;text-decoration:none;display:inline-flex}.award-laurel:hover{color:#8a8a8a}.award-laurel:active{transform:scale(.97)}.award-branch{fill:currentColor;flex:none;width:20px;height:50px}.award-text{justify-items:center;padding:0 2px;line-height:1.05;display:grid}.award-text span{letter-spacing:-.01em;font-size:13px;font-weight:600}.award-text strong{font-family:var(--display);letter-spacing:-.03em;font-size:22px;font-weight:800}a{color:var(--comb)}.hero{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:100svh;padding:clamp(130px,22svh,180px) 24px 40px;display:flex;position:relative;overflow:hidden}.hero:after{content:"";background:linear-gradient(180deg,#ededed00 0,var(--bg) 100%);pointer-events:none;z-index:2;height:140px;position:absolute;bottom:0;left:0;right:0}.hero-dials{--dial-size:min(70vw,880px);--dial-nudge:66%;--dial-slide:18%;z-index:3;pointer-events:none;opacity:.9;transition:opacity .6s var(--ease-out);position:fixed;inset:0;overflow:hidden;-webkit-mask-image:linear-gradient(#0000,#000 18% 82%,#0000);mask-image:linear-gradient(#0000,#000 18% 82%,#0000)}.hero-dials.is-dim{opacity:.22}.hero-dial{width:var(--dial-size);height:var(--dial-size);position:absolute;top:52%}.hero-dial-left{transform:translate(calc(-1 * var(--dial-nudge) - var(--dial-slide)),-50%);left:0}.hero-dial-right{transform:translate(calc(var(--dial-nudge) + var(--dial-slide)),-50%);right:0}.hero-dial.is-in{transition:transform .58s cubic-bezier(.23,1,.32,1)}.hero-dial-left.is-in{transform:translate(calc(-1 * var(--dial-nudge)),-50%)}.hero-dial-right.is-in{transform:translate(var(--dial-nudge),-50%)}.hero-dial-wheel{width:100%;height:100%;position:relative}.hero-dial-ring{border:calc(var(--dial-size) * .0768) solid #d5d5d5;box-sizing:border-box;border-radius:50%;position:absolute;inset:0}.hero-dial-digit{font-family:var(--display);font-variant-numeric:tabular-nums;white-space:nowrap;-webkit-user-select:none;user-select:none;opacity:var(--digit-opacity);font-weight:800;line-height:1;position:absolute}@media (max-width:1100px){.hero-dials{--dial-nudge:72%;--dial-slide:14%}}@media (max-width:900px){.hero-dials{--dial-size:min(78vw,640px);--dial-nudge:76%;--dial-slide:12%}}@media (max-width:640px){.hero-dials{--dial-size:min(92vw,440px);--dial-nudge:68%;--dial-slide:10%;opacity:.18}.hero-dial-digit.is-active{opacity:calc(var(--digit-opacity) * .4)}}@media (prefers-reduced-motion:reduce){.hero-dial,.hero-dial.is-in{transition:none}}.hero-content{z-index:4;justify-items:center;gap:22px;max-width:680px;display:grid;position:relative}.hero-content .title-block{justify-items:center;gap:12px;display:grid}.hero-rooster-button{width:150px;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform 90ms var(--ease-out);background:0 0;border:0;justify-self:center;justify-items:center;margin:-48px auto -9px;padding:0;line-height:0;display:grid;position:relative;top:-50px}.hero-rooster-art{--rooster-canvas:262px;width:150px;height:146px;display:block;position:relative}.hero-rooster-flipbook,.hero-rooster-poster{width:var(--rooster-canvas);height:var(--rooster-canvas);pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50.7%,-48.9%)}.hero-rooster-flipbook svg{width:100%;height:100%;display:block}.hero-rooster-prompt{pointer-events:none;width:152px;height:auto;margin-top:18px}.hero-rooster-button:active{transform:scale(.94)}.hero-rooster-button:focus-visible{outline:none}.hero-rooster-button:focus-visible .hero-rooster-flipbook,.hero-rooster-button:focus-visible .hero-rooster-poster{filter:drop-shadow(0 0 5px #cc3f0280)}@media (prefers-reduced-motion:reduce){.hero-rooster-button{transition:none}}@media (max-width:480px){h1{font-size:clamp(36px,9.7vw,40px);line-height:.96}.hero-rooster-button{width:126px;top:-38px}.hero-rooster-art{--rooster-canvas:192px;width:110px;height:107px}.hero-rooster-prompt{width:120px;margin-top:14px}}.cta-row{flex-wrap:wrap;gap:12px;display:flex}.cta,.cta-row{justify-content:center;align-items:center}.cta{background:var(--ink);color:#fff;letter-spacing:-.02em;transition:transform .16s var(--ease-out),background-color .15s ease;border-radius:100px;gap:6px;padding:13px 20px;font-size:17px;font-weight:600;line-height:1;text-decoration:none;display:inline-flex}@media (hover:hover) and (pointer:fine){.cta:hover{background:#262626;transform:translateY(-1px)}.cta.cta-ghost:hover{background:#eaeaea;transform:translateY(-1px)}}.cta:active{transform:scale(.97)}.cta svg{width:16px;height:16px;margin-top:-3px}.cta.cta-ghost{background:var(--pill-gray);color:var(--ink)}.waitlist{justify-items:center;gap:10px;width:100%;display:grid}.waitlist-row{gap:8px;width:min(420px,100%);display:flex}.waitlist-row input[type=email]{min-width:0;font:inherit;color:var(--ink);border:2px solid var(--pill-gray);background:#fff;border-radius:100px;outline:none;flex:1;padding:12px 20px;font-size:16px;font-weight:500;transition:border-color .15s}.waitlist-row input[type=email]::placeholder{color:#00000059}.waitlist-row input[type=email]:focus-visible{border-color:#d9d9d9}.waitlist-row input[type=email]:-webkit-autofill,.waitlist-row input[type=email]:-webkit-autofill:hover{-webkit-text-fill-color:var(--ink);caret-color:var(--ink);transition:background-color 600000s;-webkit-box-shadow:inset 0 0 0 1000px #fff}.waitlist-row input[type=email]:-webkit-autofill:focus{-webkit-text-fill-color:var(--ink);caret-color:var(--ink);transition:background-color 600000s;-webkit-box-shadow:inset 0 0 0 1000px #fff}.waitlist-trap{opacity:0;width:1px;height:1px;position:absolute;left:-9999px}.waitlist button{cursor:pointer;white-space:nowrap;border:0;font-family:inherit}.waitlist button:disabled{opacity:.7;cursor:default}.waitlist-note{color:var(--muted);letter-spacing:-.01em;font-size:13px}.waitlist-error{color:var(--comb);font-size:14px;font-weight:600}.waitlist-done{letter-spacing:-.01em;font-size:18px;font-weight:600}.hms-counter{z-index:4;color:#0000008a;min-height:24px;font-family:var(--display);letter-spacing:-.02em;white-space:nowrap;justify-content:center;align-items:center;gap:4px;font-size:16px;font-weight:500;line-height:1;display:flex;position:absolute;top:32px;left:50%;transform:translate(-50%)}.hms-counter-number{color:inherit;font-size:inherit;font-variant-numeric:tabular-nums;font-weight:inherit;letter-spacing:inherit;align-self:center;align-items:center;line-height:1;display:inline-flex}.hms-digit{width:1ch;height:1em;line-height:1;display:inline-block;position:relative;overflow:hidden}.hms-digit-new,.hms-digit-old,.hms-digit-static{place-items:center;display:grid;position:absolute;inset:0}.hms-digit-old{animation:hms-digit-out .36s var(--ease-out) both}.hms-digit-new{animation:hms-digit-in .36s var(--ease-out) both}.hms-counter-separator{text-align:center;width:.24em;display:inline-block}@keyframes hms-digit-out{to{transform:translateY(105%)}}@keyframes hms-digit-in{0%{transform:translateY(-105%)}}@media (max-width:480px){.waitlist-row{flex-direction:column}.waitlist .cta,.waitlist-row input[type=email]{width:100%}}@media (max-width:767px){.hms-counter{display:none}}@media (prefers-reduced-motion:reduce){.hms-digit-old{display:none}.hms-digit-new{animation:none}}.features{background:var(--bg);grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,64px);max-width:1180px;min-height:100svh;margin:0 auto;padding:72px clamp(24px,5.5vw,80px) 0;display:grid;overflow:clip}.mission-copy,.mission-showcase{z-index:4;position:relative}.mission-copy{justify-items:start;gap:14px;display:grid}.mission-copy h2,h2.display{letter-spacing:-.045em;font-size:clamp(48px,6.4vw,92px);font-weight:900;line-height:.9}.mission-copy p{color:var(--muted);letter-spacing:-.02em;font-size:clamp(18px,1.6vw,22px);line-height:1.3}.mission-row{z-index:4;flex-wrap:wrap;grid-column:1/-1;justify-content:center;justify-self:center;gap:14px;width:100%;max-width:522px;margin:-24px 0 72px;list-style:none;display:flex;position:relative}.mission-row .mission-tile{width:calc(25% - 10.5px)}.tour-section{z-index:4;text-align:center;gap:28px;padding:104px 24px 24px;position:relative}.tour,.tour-section{justify-items:center;display:grid}.tour{gap:18px;width:100%}.tour-tabs{background:#fff;border-radius:999px;flex-wrap:wrap;justify-content:center;gap:4px;padding:4px;display:inline-flex}.tour-tab{color:var(--muted);font:inherit;letter-spacing:-.01em;cursor:pointer;background:0 0;border:0;border-radius:999px;padding:10px 18px;font-size:15px;font-weight:600;transition:background .2s,color .2s}.tour-tab[aria-selected=true]{background:var(--ink);color:#fff}.tour-tab:focus-visible{outline:3px solid var(--comb);outline-offset:2px}.tour-line{max-width:34ch;min-height:2.6em;color:var(--muted);letter-spacing:-.02em;font-size:clamp(17px,1.5vw,20px);line-height:1.3}.tour-phone{aspect-ratio:1124/2278;filter:drop-shadow(0 40px 48px #17130e1f)drop-shadow(0 8px 14px #17130e14);width:min(370px,74vw);margin-top:18px;position:relative}.tour-screen{background:#f3f3f3;border-radius:13.722%/6.329%;width:89.472%;height:95.711%;position:absolute;top:2.14%;left:5.312%;overflow:hidden}.tour-screen img{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity .42s cubic-bezier(.22,1,.36,1);position:absolute;inset:0}.tour-screen img.is-active{opacity:1}.tour-frame{pointer-events:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;position:absolute;inset:0}@media (prefers-reduced-motion:reduce){.tour-screen img{transition:none}}@media (max-width:480px){.tour-tabs{flex-wrap:nowrap;gap:2px}.tour-tab{white-space:nowrap;padding:8px 11px;font-size:14px}}.mission-showcase{justify-self:start;width:min(100%,400px);position:relative}.mission-hand{translate:0 calc(var(--p,0) * .06px);aspect-ratio:880/1173;position:relative}.mission-hand img{opacity:0;width:100%;height:100%;transition:opacity .42s var(--ease-out);position:absolute;inset:0}.mission-hand img.is-active{opacity:1}.mission-tile{aspect-ratio:1;-webkit-user-select:none;user-select:none;background:#181617;border-radius:22%;position:relative;overflow:hidden}.mission-tile span{z-index:1;color:#fff;font-family:var(--display);letter-spacing:-.01em;font-size:15px;font-weight:600;line-height:1.1;position:absolute;top:10px;left:12px}.mission-tile img{object-fit:contain;width:115%;max-width:none;height:115%;position:absolute;bottom:0;right:0}.mission-picker{translate:0 calc(var(--p,0) * -.14px);gap:16px;display:grid;position:absolute;top:16%;right:-31%}.mission-float{cursor:pointer;width:clamp(92px,8vw,112px);transition:scale .26s var(--ease-out),box-shadow .2s ease;border:0;padding:0;overflow:hidden}.mission-float[aria-selected=true]{box-shadow:0 0 0 4px var(--bg),0 0 0 7px var(--comb);scale:1.06}.mission-float:focus-visible{outline:3px solid var(--comb);outline-offset:4px}@media (prefers-reduced-motion:reduce){.mission-float,.mission-hand img{transition:none}}@media (max-width:860px){.features{text-align:center;grid-template-columns:1fr;padding-top:56px}.features,.mission-copy{justify-items:center}.mission-row{gap:12px;max-width:420px;margin:-12px 0 56px}.mission-row .mission-tile{width:calc(25% - 9px)}.mission-row .mission-tile span{font-size:13px;top:8px;left:9px}.mission-showcase{justify-self:center;width:min(64vw,320px)}.mission-picker{justify-content:center;gap:12px;margin-top:-14%;display:flex;position:relative;top:auto;right:auto;translate:none}.mission-float{width:min(22vw,92px)}}.story{min-height:88svh;padding-bottom:24px}.story .mission-copy p{max-width:32ch}.story-left .mission-copy{order:2}.story-left .mission-showcase{order:1;justify-self:end}@media (max-width:860px){.story{min-height:0;padding-bottom:32px}.story-left .mission-copy,.story-left .mission-showcase{order:0}.story-left .mission-showcase{justify-self:center}}.showcase-prop{z-index:2;pointer-events:none;height:auto;translate:0 calc(var(--p,0) * var(--depth) * 1px);position:absolute}.recognition{text-align:center;z-index:4;gap:48px;max-width:1180px;margin:0 auto;padding:96px clamp(24px,5.5vw,80px) 72px;position:relative}.recognition,.recognition-head{justify-items:center;display:grid}.recognition-head{gap:18px}.recognition-logo{margin-bottom:4px;transition:opacity .16s;display:block}.recognition-logo:hover{opacity:.8}.recognition-logo img{width:auto;height:clamp(30px,3vw,40px);display:block}.recognition-head p{color:var(--muted);letter-spacing:-.02em;max-width:40ch;font-size:clamp(18px,1.6vw,22px);line-height:1.3}.prints{justify-content:center;align-items:flex-start;width:100%;display:flex}.print{background:#fff;border-radius:6px;width:min(46vw,360px);padding:12px 12px 0;display:grid}.print img{aspect-ratio:3/4;object-fit:cover;background:#d9d9d9;border-radius:2px;width:100%;height:auto;display:block}.print figcaption{color:var(--muted);letter-spacing:-.01em;padding:12px 4px 16px;font-size:14px}.print-left{margin-right:-36px;rotate:-4deg}.print-right{margin-top:40px;rotate:5deg}.press-quotes{justify-items:center;gap:48px;width:100%;display:grid}@media (min-width:900px){.press-quotes{grid-template-columns:1fr 1fr;align-items:start;gap:64px}.press-quotes .press-quote blockquote{font-size:clamp(28px,2.8vw,40px)}}.press-quote{color:var(--ink);justify-items:center;gap:12px;text-decoration:none;display:grid}.press-quote blockquote{font-family:var(--display);letter-spacing:-.035em;text-wrap:balance;max-width:20ch;font-size:clamp(28px,3.4vw,48px);font-weight:900;line-height:1.02}.press-link,.press-quote span{color:var(--muted);letter-spacing:-.01em;font-size:15px;text-decoration:none}.press-link:hover,.press-quote:hover span,.privacy a{color:var(--ink)}.privacy a{text-underline-offset:3px;font-weight:600;-webkit-text-decoration:underline #00000040;text-decoration:underline #00000040}@media (max-width:700px){.recognition{gap:36px;padding:64px 20px 48px}.print-left{margin-right:-18px}.print-right{margin-top:24px}.print{padding:8px 8px 0}.print figcaption{padding:8px 2px 10px;font-size:12px}}.press-logo{width:auto;height:22px;margin-bottom:6px;display:block}.press-logo-9to5mac{height:26px;margin-bottom:4px}.reviews{z-index:4;text-align:center;justify-items:center;gap:44px;padding:72px 0 96px;display:grid;position:relative;overflow:hidden}.review-marquee{width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 8% 92%,#0000);mask-image:linear-gradient(90deg,#0000,#000 8% 92%,#0000)}.review-track{gap:18px;width:max-content;padding:4px 0;list-style:none;animation:review-drift 70s linear infinite;display:flex}.review-marquee:hover .review-track{animation-play-state:paused}.review-card{text-align:left;background:#fff;border-radius:28px;align-content:start;gap:10px;width:340px;padding:24px 24px 22px;display:grid}.review-stars{color:#f6b400;letter-spacing:2px;font-size:18px;line-height:1}.review-card strong{font-family:var(--display);letter-spacing:-.02em;font-size:19px;font-weight:800;line-height:1.2}.review-card p{color:var(--ink);letter-spacing:-.01em;font-size:15px;line-height:1.45}.review-name{color:var(--muted);font-size:13px}@keyframes review-drift{to{transform:translate(calc(-50% - 9px))}}@media (prefers-reduced-motion:reduce){.review-marquee{scroll-snap-type:x mandatory;overflow-x:auto}.review-track{padding:4px 24px;animation:none}.review-card{scroll-snap-align:center}.review-card[aria-hidden=true]{display:none}}@media (max-width:700px){.reviews{gap:32px;padding:48px 0 64px}.review-card{width:280px}}.flight{place-content:center;justify-items:center;gap:20px;min-height:100svh;padding:48px 24px;display:grid}.bento-flight{aspect-ratio:720/1280;border-radius:36px;max-width:88vw;height:min(76svh,860px);overflow:hidden}.bento-flight-video{object-fit:cover;width:100%;height:100%;display:block}.bento-flight-cta{margin-top:4px}.privacy{text-align:center;align-content:center;justify-items:center;gap:14px;min-height:60svh;margin:0 auto;display:grid}.privacy-egg{object-fit:contain;background:0 0;width:84px;height:84px;display:block}.privacy p{color:var(--muted);letter-spacing:-.02em;font-size:16px;line-height:1.6}.privacy strong{color:var(--ink);font-weight:700}.farm-island{justify-items:center;max-width:1180px;margin:32px auto 8px;padding:40px 0 24px;display:grid;position:relative;overflow:clip visible}.farm-island-art{z-index:1;width:min(760px,92vw);height:auto;animation:island-float 7s ease-in-out infinite alternate;position:relative}.farm-cloud{z-index:0;animation:cloud-drift 46s linear infinite;position:absolute;left:0}.farm-cloud-front{z-index:2}.farm-cloud svg{display:block}@keyframes island-float{0%{translate:0}to{translate:0 -12px}}@keyframes cloud-drift{0%{transform:translate(-20vw)}to{transform:translate(110vw)}}@media (prefers-reduced-motion:reduce){.farm-cloud,.farm-island-art{animation:none}.farm-cloud{display:none}}footer{color:var(--muted);padding:0 0 56px;font-size:15px}footer .wrap{grid-template-columns:1fr auto 1fr;align-items:center;gap:18px 28px;display:grid}footer .links{justify-self:center}.foot-note{text-align:right;justify-self:end}@media (max-width:640px){footer .wrap{text-align:center;grid-template-columns:1fr}.foot-brand,footer .wrap{justify-items:center}.foot-note{text-align:center;justify-self:center}}.foot-brand{line-height:1.3;display:grid}.foot-brand strong{color:var(--ink);font-weight:700;font-family:var(--display);letter-spacing:-.02em}.foot-brand span{font-size:13px}footer a{color:var(--muted);font-weight:600;text-decoration:none}footer a:hover{color:var(--ink)}footer .links{gap:22px;display:flex}.foot-note{font-size:13px}.doc{padding:140px clamp(20px,6vw,40px) clamp(72px,8vw,112px)}.doc h1{font-size:clamp(30px,7vw,40px);line-height:1.1}.doc .updated{color:var(--muted);margin-top:10px;font-size:15px}.doc .intro{margin-top:24px}.doc h2{letter-spacing:-.02em;margin:40px 0 10px;font-size:21px}.doc li,.doc p{color:#3d3d3d;font-size:16px}.doc p+p{margin-top:12px}.doc ul{gap:8px;padding-left:22px;display:grid}.doc ul+p{margin-top:12px}.doc a{overflow-wrap:anywhere}@media (max-width:480px){.doc{padding-top:112px;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}

/* ==========================================================================
   hmsgraphics — MODERN HEADER & OUT-OF-THIS-WORLD MOBILE NAVIGATION
   ========================================================================== */

header.hms-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  pointer-events: none;
  padding: 20px clamp(20px, 5.5vw, 80px);
  transition: padding 0.3s var(--ease-out);
}

header.hms-header.is-scrolled {
  padding-top: 12px;
  padding-bottom: 12px;
}

.hms-navpill {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  pointer-events: auto;
}

/* Brand Logo (Left - Con Pill para lectura perfecta en Sticky Scroll) */
.hms-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 2px solid var(--pill-gray);
  padding: 8px 20px 8px 16px;
  border-radius: 100px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s var(--ease-out), border-color 0.2s ease, box-shadow 0.2s ease;
}

.hms-brand:hover {
  transform: translateY(-1px) scale(1.01);
  border-color: #e2e2e2;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.hms-brand:active {
  transform: scale(0.97);
}

.hms-brand-logo {
  height: 44px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.hms-brand-mark {
  width: 30px;
  height: 30px;
  display: block;
  flex-shrink: 0;
}

.hms-brand-text {
  font-family: var(--display);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
}

.hms-brand-text span {
  color: var(--comb);
}

/* Center Desktop Pill Navigation (Navegación Principal hmsgraphics) */
.hms-desktop-nav {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 2px solid var(--pill-gray);
  border-radius: 100px;
  padding: 6px;
  gap: 4px;
  box-shadow: 0 8px 28px rgba(23, 19, 14, 0.06);
}

@media (min-width: 1180px) {
  .hms-desktop-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

.hms-nav-glider {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 6px;
  background: var(--ink);
  border-radius: 100px;
  transition: transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.34s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
  z-index: 0;
  pointer-events: none;
}

.hms-nav-link {
  position: relative;
  z-index: 1;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--muted);
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 100px;
  transition: color 0.2s ease, transform 0.16s var(--ease-out);
  white-space: nowrap;
}

.hms-nav-link:hover {
  color: var(--ink);
}

.hms-nav-link.is-active {
  color: #ffffff;
}

.hms-nav-link:active {
  transform: scale(0.95);
}

/* Right Actions: WhatsApp Button & Mobile Trigger */
.hms-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-whatsapp {
  background: #ffffff;
  border: 2px solid var(--pill-gray);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
  padding: 12px 20px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.nav-whatsapp svg {
  width: 18px;
  height: 18px;
  margin-top: 0;
  color: #16a34a;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .nav-whatsapp:hover {
    background: #16a34a;
    border-color: #16a34a;
    color: #ffffff;
    transform: translateY(-2px) scale(1.03);
  }
  .nav-whatsapp:hover svg {
    color: #ffffff;
    transform: rotate(-10deg) scale(1.15);
  }
}

.nav-whatsapp:active {
  transform: scale(0.95);
}

/* CTA WhatsApp in Hero & Flight */
.cta-whatsapp svg {
  width: 19px;
  height: 19px;
  margin-top: -1px;
  color: #25D366;
}

/* Mobile Trigger Button (Out-of-this-world Bouncy Pill) */
.hms-mobile-trigger {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ink);
  color: #ffffff;
  border: 2px solid var(--ink);
  border-radius: 100px;
  padding: 10px 16px;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.hms-mobile-trigger:active {
  transform: scale(0.92);
}

.hms-mobile-trigger.is-open {
  background: var(--comb);
  border-color: var(--comb);
}

.hms-trigger-dots {
  display: grid;
  grid-template-columns: repeat(2, 6px);
  gap: 3px;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hms-trigger-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease;
}

.hms-trigger-dots span:nth-child(2) {
  background: var(--gold);
}

.hms-mobile-trigger.is-open .hms-trigger-dots {
  transform: rotate(135deg) scale(1.1);
}

/* ==========================================================================
   OUT-OF-THIS-WORLD PLAYFUL MOBILE MENU OVERLAY (BENTO / GAME CARDS)
   ========================================================================== */
.hms-mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(237, 237, 237, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 82px 18px 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.32s var(--ease-out), visibility 0.32s;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hms-mobile-overlay::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.hms-mobile-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.hms-mobile-deck {
  width: min(440px, 100%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  perspective: 900px;
  margin: auto 0;
}

.hms-bento-card {
  position: relative;
  background: #ffffff;
  border: 2px solid #e6e6e6;
  border-radius: 24px;
  padding: 14px 15px;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  min-height: 98px;
  box-shadow: 0 12px 28px rgba(23, 19, 14, 0.06);
  transform: translateY(40px) scale(0.82) rotate(var(--card-rot, 0deg));
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  transition-delay: var(--card-delay, 0ms);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.hms-mobile-overlay.is-open .hms-bento-card {
  transform: translateY(0) scale(1) rotate(var(--card-rot, 0deg));
  opacity: 1;
}

.hms-bento-card:active {
  transform: scale(0.94) rotate(0deg) !important;
}

.hms-bento-card.card-dark {
  background: #181617;
  border-color: #181617;
  color: #ffffff;
}

.hms-bento-card.card-shell {
  background: var(--shell);
  border-color: #f3e5c8;
}

.hms-bento-card.card-comb {
  background: #fff3ee;
  border-color: #ffd6c6;
}

.hms-bento-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hms-bento-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--pill-gray);
  color: var(--ink);
  border: 1.5px solid rgba(23, 19, 14, 0.06);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease, color 0.25s ease;
}

.hms-bento-icon svg {
  width: 21px;
  height: 21px;
  overflow: visible;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hms-bento-icon .svg-fill-soft {
  fill: currentColor;
  fill-opacity: 0.14;
}

.hms-bento-icon .svg-accent-stroke {
  stroke: var(--comb);
}

.hms-bento-icon.icon-tone-amber {
  background: #fff2cc;
  color: #b86e00;
  border-color: rgba(230, 157, 0, 0.22);
}

.hms-bento-icon.icon-tone-amber .svg-fill-soft {
  fill: #ffc014;
  fill-opacity: 0.35;
}

.hms-bento-icon.icon-tone-comb {
  background: #ffe5db;
  color: var(--comb);
  border-color: rgba(204, 63, 2, 0.2);
}

.hms-bento-icon.icon-tone-comb .svg-fill-soft {
  fill: var(--comb);
  fill-opacity: 0.22;
}

.hms-bento-icon.icon-tone-ink {
  background: #f2f2f2;
  color: var(--ink);
}

.card-dark .hms-bento-icon,
.hms-bento-icon.icon-tone-gold {
  background: rgba(255, 192, 20, 0.16);
  color: #ffc014;
  border-color: rgba(255, 192, 20, 0.28);
}

.hms-bento-card:hover .hms-bento-icon,
.hms-bento-card:active .hms-bento-icon {
  transform: scale(1.1) rotate(-6deg);
}

.hms-bento-tag {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 8px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--muted);
}

.card-dark .hms-bento-tag {
  background: var(--gold);
  color: #000000;
}

.hms-bento-title {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.hms-bento-sub {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.2;
  margin-top: 2px;
}

.card-dark .hms-bento-sub {
  color: rgba(255, 255, 255, 0.7);
}

/* Full-width Fun Interactive Mascot & WhatsApp Bar inside Mobile Menu */
.hms-bento-wide {
  grid-column: 1 / -1;
  min-height: auto;
  flex-direction: row;
  align-items: center;
  padding: 16px 20px;
}

.hms-bento-whatsapp {
  grid-column: 1 / -1;
  background: #16a34a;
  border-color: #15803d;
  color: #ffffff;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 16px 22px;
}

.hms-bento-whatsapp .hms-bento-sub {
  color: rgba(255, 255, 255, 0.88);
}

.hms-bento-whatsapp-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ffffff;
  color: #16a34a;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 18px;
  flex-shrink: 0;
}

@media (max-width: 960px) {
  .hms-desktop-nav {
    display: none;
  }
  .hms-mobile-trigger {
    display: inline-flex;
  }
  .nav-whatsapp span.wa-label-long {
    display: none;
  }
}

@media (min-width: 961px) {
  .hms-mobile-overlay {
    display: none !important;
  }
}

/* ==========================================================================
   SCROLL FLUIDITY FIX — PREVENT NESTED VERTICAL SCROLL TRAPS
   ========================================================================== */
html, body {
  overflow-x: clip;
  overflow-y: visible;
  height: auto;
  overscroll-behavior-y: auto;
}

html.hms-menu-lock,
html.hms-menu-lock body {
  overflow: hidden !important;
}

/* Offset anchor scroll for fixed header & ensure Testimonials title is prominent */
#inicio,
#soluciones,
#servicios,
#portales,
#directorio,
#asesoria,
#crecimiento,
#branding,
#talento,
#testimonios {
  scroll-margin-top: 90px;
}

.reviews {
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: 100vw !important;
  padding-top: 108px !important;
  padding-bottom: 96px !important;
}

.reviews .recognition-head {
  position: relative;
  z-index: 6;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  display: grid !important;
  justify-items: center;
  text-align: center;
  gap: 18px;
  padding: 0 24px;
  margin-bottom: 8px;
}

.reviews .recognition-head h2.display {
  display: block !important;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(48px, 6.4vw, 92px);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.045em;
}

.reviews .recognition-head p {
  display: block !important;
  color: var(--muted);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.review-marquee {
  width: 100% !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

@media (max-width: 700px) {
  .reviews {
    padding-top: 88px !important;
    padding-bottom: 64px !important;
  }
}

.hero,
.features,
.reviews,
.farm-island {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

.hero-dials {
  overflow: clip !important;
  pointer-events: none !important;
  user-select: none;
}

.hero-dial-digit {
  top: 0;
  left: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* ==========================================================================
   PLAYFUL BACK TO TOP BUTTON (.hms-back-to-top)
   ========================================================================== */
.hms-back-to-top {
  position: fixed;
  bottom: 26px;
  right: 26px;
  z-index: 92;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(28px) scale(0.75) rotate(12deg);
  transition: opacity 0.32s var(--ease-out), visibility 0.32s, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  -webkit-tap-highlight-color: transparent;
}

.hms-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1) rotate(0deg);
}

.hms-btt-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--shell);
  color: var(--ink);
  border: 2px solid #f0dfbe;
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 900;
  letter-spacing: -0.02em;
  padding: 7px 13px;
  border-radius: 100px;
  box-shadow: 0 8px 22px rgba(23, 19, 14, 0.12);
  opacity: 0;
  transform: translateX(14px) scale(0.85) rotate(-4deg);
  transition: opacity 0.25s ease, transform 0.36s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  white-space: nowrap;
}

.hms-btt-spark {
  width: 13px;
  height: 13px;
  color: var(--comb);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hms-back-to-top:hover .hms-btt-spark {
  transform: rotate(90deg) scale(1.18);
}

.hms-btt-circle {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #181617;
  color: #ffffff;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 28px rgba(23, 19, 14, 0.22), 0 0 0 3px rgba(255, 255, 255, 0.9);
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, box-shadow 0.2s ease;
}

.hms-btt-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}

.hms-btt-ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 3.5;
}

.hms-btt-ring-prog {
  fill: none;
  stroke: var(--gold);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 150.8;
  stroke-dashoffset: 150.8;
  transition: stroke-dashoffset 0.12s linear, stroke 0.2s ease;
}

.hms-btt-icon {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  transition: transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
}

.hms-btt-icon svg {
  width: 22px;
  height: 22px;
  overflow: visible;
}

.hms-btt-icon .btt-chev-top,
.hms-btt-icon .btt-chev-mid,
.hms-btt-icon .btt-dot {
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}

.hms-btt-icon .btt-chev-mid {
  opacity: 0.72;
}

.hms-btt-icon .btt-dot {
  fill: var(--gold);
}

@media (hover: hover) and (pointer: fine) {
  .hms-back-to-top:hover .hms-btt-badge {
    opacity: 1;
    transform: translateX(0) scale(1) rotate(-3deg);
  }
  .hms-back-to-top:hover .hms-btt-circle {
    background: var(--comb);
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 16px 34px rgba(204, 63, 2, 0.34), 0 0 0 3px #ffffff;
  }
  .hms-back-to-top:hover .hms-btt-ring-prog {
    stroke: #ffffff;
  }
  .hms-back-to-top:hover .hms-btt-icon .btt-chev-top {
    transform: translateY(-2.5px);
  }
  .hms-back-to-top:hover .hms-btt-icon .btt-chev-mid {
    transform: translateY(-1px);
    opacity: 1;
  }
  .hms-back-to-top:hover .hms-btt-icon .btt-dot {
    transform: translateY(1.5px) scale(1.2);
    fill: #ffffff;
  }
}

.hms-back-to-top:active .hms-btt-circle {
  transform: scale(0.9);
}

.hms-back-to-top.is-launching .hms-btt-icon {
  transform: translateY(-22px) scale(0.8);
}

@keyframes hms-btt-bounce {
  0% { transform: translateY(2px); }
  100% { transform: translateY(-4px) scale(1.1); }
}

@media (max-width: 640px) {
  .hms-back-to-top {
    bottom: 18px;
    right: 18px;
  }
  .hms-btt-badge {
    display: none;
  }
  .hms-btt-circle {
    width: 50px;
    height: 50px;
  }
}

/* ==========================================================================
   LOGOS DE ALIADOS EN CITAS DESTACADAS (AGENCIA TESLA & PARQUESOFT PASTO)
   ========================================================================== */
.press-quote .press-logo {
  height: clamp(32px, 3.5vw, 38px) !important;
  width: auto !important;
  max-width: min(210px, 72vw);
  object-fit: contain;
  margin-bottom: 6px;
  opacity: 0.94 !important;
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.press-quote .press-logo-tesla {
  height: clamp(34px, 3.6vw, 40px) !important;
}

.press-quote .press-logo-psn {
  height: clamp(30px, 3.2vw, 36px) !important;
  max-width: min(200px, 70vw);
}

.press-quote:hover .press-logo {
  opacity: 1 !important;
  transform: translateY(-2px) scale(1.03);
}

/* ==========================================================================
   OPTIMIZACIÓN INTEGRAL MOBILE & PREVENCIÓN DE DESBORDAMIENTO HORIZONTAL
   ========================================================================== */
main,
footer,
.tour-section,
.tour,
.flight {
  max-width: 100vw;
  box-sizing: border-box;
}

.features,
.recognition {
  width: 100%;
  max-width: 1180px;
  box-sizing: border-box;
}

.privacy.wrap {
  width: 100%;
  max-width: 640px;
  box-sizing: border-box;
}

.privacy p {
  max-width: 54ch;
  margin-inline: auto;
  text-wrap: pretty;
}

.farm-island {
  overflow: visible;
}

.tour-section,
.tour,
.recognition,
.flight,
.privacy {
  grid-template-columns: minmax(0, 1fr);
}

footer {
  overflow-x: clip;
}

footer .links {
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 20px;
  max-width: 100%;
}

@media (min-width: 641px) {
  footer .wrap {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    row-gap: 20px;
    column-gap: 32px;
  }

  footer .links {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    justify-content: center;
    gap: 14px 28px;
    width: 100%;
    padding-bottom: 18px;
    border-bottom: 1.5px solid rgba(0, 0, 0, 0.07);
  }

  footer .foot-brand {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    text-align: left;
  }

  footer .foot-note {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    text-align: right;
  }
}

@media (max-width: 860px) {
  .features {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    max-width: 100vw;
    padding-inline: 20px;
  }

  #servicios .mission-showcase {
    width: 100%;
    max-width: 360px;
  }

  #servicios .mission-hand {
    width: min(64vw, 290px);
    margin-inline: auto;
  }

  #servicios .mission-picker {
    width: 100%;
    max-width: 360px;
    padding-inline: 4px;
    gap: 10px;
    margin-top: 26px !important;
    margin-inline: auto;
    justify-content: center;
  }

  #servicios .mission-picker .mission-float,
  .mission-row .mission-tile {
    width: calc(33.333% - 7px) !important;
    flex: 0 0 calc(33.333% - 7px);
  }

  #servicios .mission-picker .mission-float span,
  .mission-row .mission-tile span {
    font-size: 12.5px;
    top: 9px;
    left: 10px;
    right: 6px;
    line-height: 1.05;
    text-align: left;
  }

  .mission-row {
    width: 100%;
    max-width: 360px;
    padding-inline: 4px;
    gap: 10px;
    margin: -14px auto 56px !important;
  }
}

@media (max-width: 640px) {
  /* 1. Header compacto y alineado sin desbordar en móviles */
  header.hms-header {
    padding: 12px 14px !important;
  }

  header.hms-header.is-scrolled {
    padding: 10px 14px !important;
  }

  .hms-navpill {
    gap: 8px;
  }

  .hms-brand {
    padding: 6px 14px 6px 12px;
  }

  .hms-brand-logo {
    height: 35px;
  }

  .hms-header-actions {
    gap: 6px;
  }

  .nav-whatsapp {
    padding: 9px 13px;
    font-size: 14px;
    gap: 5px;
  }

  .nav-whatsapp svg {
    width: 16px;
    height: 16px;
  }

  .hms-mobile-trigger {
    padding: 9px 13px;
    font-size: 14px;
    gap: 6px;
  }

  /* 2. Hero en móvil */
  .hero {
    padding: clamp(108px, 17svh, 140px) 18px 36px;
  }

  .hero-content {
    width: 100%;
    max-width: 100%;
  }

  h1 {
    font-size: clamp(32px, 8.8vw, 42px);
    line-height: 0.96;
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .award-row {
    gap: 10px 18px;
  }

  .award-text strong {
    font-size: 18px;
  }

  /* 3. Títulos de sección adaptados a palabras en español */
  .mission-copy h2,
  h2.display,
  .reviews .recognition-head h2.display {
    font-size: clamp(36px, 9.8vw, 50px) !important;
    line-height: 0.94 !important;
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .mission-copy p,
  .recognition-head p,
  .reviews .recognition-head p,
  .tour-line {
    font-size: clamp(16px, 4.4vw, 19px) !important;
    max-width: min(34ch, 100%);
    padding-inline: 4px;
  }

  /* 4. Pestañas de #soluciones (.tour-tabs) con scroll horizontal táctil solo en móvil */
  .tour-section {
    padding: 84px 18px 24px;
    gap: 22px;
  }

  .tour-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: min(100%, 360px);
    max-width: calc(100vw - 32px);
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    border-radius: 999px !important;
    padding: 4px 6px;
    gap: 6px;
    background: #ffffff;
    box-shadow: 0 4px 14px -3px rgba(0, 0, 0, 0.07);
  }

  .tour-tabs::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
    width: 0;
    height: 0;
  }

  .tour-tab {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    text-align: center;
    padding: 9px 16px !important;
    font-size: 14px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    scroll-snap-align: center;
    -webkit-tap-highlight-color: transparent;
  }

  .tour-phone {
    width: min(310px, 78vw);
    margin-top: 10px;
  }

  /* 5. Tarjetas de especialidades (.mission-row) legibles en móvil */
  .mission-row {
    gap: 10px;
    max-width: 360px;
    padding-inline: 4px;
  }

  .mission-row .mission-tile {
    width: calc(33.333% - 7px);
  }

  .mission-row .mission-tile span {
    font-size: 12px;
    top: 8px;
    left: 8px;
    right: 6px;
    line-height: 1.05;
  }

  /* 6. Citas destacadas (#talento) y Footer en móvil */
  .press-quotes {
    gap: 36px;
  }

  .press-quote blockquote {
    font-size: clamp(23px, 6.4vw, 32px);
    max-width: min(20ch, 100%);
    padding-inline: 6px;
  }

  .flight {
    min-height: auto;
    padding: 36px 18px 48px;
  }

  .bento-flight {
    width: min(100%, 340px);
    max-width: 88vw;
    height: auto;
    border-radius: 28px;
  }

  .privacy {
    min-height: auto;
    padding: 40px 20px 56px;
  }

  footer .wrap {
    padding-inline: 18px;
    gap: 16px;
  }
}

@media (max-width: 380px) {
  header.hms-header {
    padding: 10px 10px !important;
  }

  .hms-brand {
    padding: 5px 11px 5px 9px;
  }

  .hms-brand-logo {
    height: 30px;
  }

  .nav-whatsapp {
    padding: 8px 11px;
    font-size: 13px;
  }

  .hms-mobile-trigger {
    padding: 8px 11px;
    font-size: 13px;
  }
}

/* ==========================================================================
   SELECTOR DE IDIOMA DIVERTIDO (ES / EN) — DESKTOP PILL & MOBILE BENTO
   ========================================================================== */
.hms-lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 5px 4px 10px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 2px solid var(--pill-gray);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}

.hms-lang-switch:hover {
  border-color: rgba(232, 65, 24, 0.25);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07);
}

.hms-lang-globe {
  width: 17px;
  height: 17px;
  color: var(--comb);
  flex-shrink: 0;
  margin-right: 2px;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hms-lang-switch:hover .hms-lang-globe {
  transform: rotate(18deg) scale(1.1);
}

.hms-lang-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--display);
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  line-height: 1;
  padding: 7px 11px;
  border-radius: 100px;
  cursor: pointer;
  transition:
    transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease;
}

.hms-lang-btn:hover:not(.is-active) {
  color: var(--ink);
  background: rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

.hms-lang-btn:active {
  transform: scale(0.93);
}

.hms-lang-btn.is-active {
  background: var(--ink);
  color: var(--gold);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
  transform: scale(1.03);
}

/* Tarjeta Bento de Idioma dentro de la navegación móvil */
.hms-bento-card.hms-bento-lang {
  grid-column: 1 / -1;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  background: #ffffff;
  color: var(--ink);
  border: 2px solid #e6e6e6;
}

.hms-bento-card.hms-bento-lang:hover {
  border-color: var(--gold);
}

.hms-bento-lang-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.hms-bento-lang-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.hms-bento-lang-info .hms-bento-icon {
  flex-shrink: 0;
}

.hms-bento-lang-copy {
  min-width: 0;
  flex: 1;
}

.hms-bento-lang-copy .hms-bento-title {
  font-size: 17.5px;
  line-height: 1.1;
}

.hms-bento-lang-copy .hms-bento-sub {
  font-size: 13px;
  margin-top: 3px;
}

.hms-bento-lang-badge {
  flex-shrink: 0;
  background: rgba(255, 192, 20, 0.22);
  color: #8a5a00;
}

.hms-mobile-lang-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
  background: #f3f2f1;
  padding: 5px;
  border-radius: 100px;
}

.hms-mobile-lang-pills .hms-lang-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 800;
}

.hms-lang-pill-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.03em;
  padding: 2px 6px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.08);
  color: currentColor;
}

.hms-mobile-lang-pills .hms-lang-btn.is-active .hms-lang-pill-code {
  background: rgba(255, 192, 20, 0.22);
  color: var(--gold);
}

/* En móvil y tablet (<= 960px), las pills de idioma viven exclusivamente dentro del menú Bento */
@media (max-width: 960px) {
  .hms-header-actions .hms-lang-switch {
    display: none !important;
  }
}

/* ==========================================================================
   MASCOTA OFICIAL MAPACHE DISEÑADOR WEB (HERO & SECCIÓN COMPROMISO)
   ========================================================================== */
.hero {
  padding: clamp(104px, 14svh, 136px) 24px 40px;
}

.hero-rooster-button {
  width: auto !important;
  top: 0 !important;
  margin: 0 auto 2px !important;
  position: relative;
  display: grid;
  justify-items: center;
}

.hero-rooster-art {
  width: clamp(175px, 19vw, 225px) !important;
  height: auto !important;
  aspect-ratio: 1161 / 1354;
  position: relative;
  display: block;
}

.hero-rooster-poster {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: 100% !important;
  height: auto !important;
  display: block;
  filter: drop-shadow(0 16px 28px rgba(23, 19, 14, 0.14));
  transform-origin: 50% 85%;
  animation: hms-raccoon-idle 4.2s ease-in-out infinite;
  transition: filter 0.25s ease;
}

.hero-rooster-button:hover .hero-rooster-poster {
  filter: drop-shadow(0 20px 34px rgba(232, 65, 24, 0.2));
}

.hero-rooster-button.is-excited .hero-rooster-poster {
  animation: hms-raccoon-excited 0.78s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-rooster-prompt.hero-mascot-caption {
  width: auto !important;
  margin-top: 8px !important;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: "Caveat", "Segoe Print", "Bradley Hand", "Chalkboard SE", cursive;
  font-size: clamp(22px, 2.1vw, 25px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #9b9b9b;
  line-height: 1;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
}

.hero-mascot-arrow {
  width: 21px;
  height: 21px;
  color: #9b9b9b;
  flex-shrink: 0;
  transform: translateY(-3px);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
}

.hero-rooster-button:hover .hero-rooster-prompt.hero-mascot-caption {
  color: #7a7a7a;
  transform: scale(1.04);
}

.hero-rooster-button:hover .hero-mascot-arrow {
  color: #7a7a7a;
  transform: translateY(-5px) rotate(-6deg);
}

/* Chispas interactivas de código y diseño al hacer clic en el mapache */
.hms-mascot-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hms-spark {
  position: absolute;
  font-family: var(--display);
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 99px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
}

.hms-spark.spark-1 {
  top: 14%;
  left: -4%;
  background: #181617;
  color: var(--gold);
}

.hms-spark.spark-2 {
  top: 6%;
  left: 96%;
  background: var(--gold);
  color: #181617;
}

.hms-spark.spark-3 {
  top: 52%;
  left: -8%;
  background: #ff1f8e;
  color: #ffffff;
}

.hms-spark.spark-4 {
  top: 46%;
  left: 104%;
  background: #88d613;
  color: #181617;
}

.hero-rooster-button.is-excited .hms-spark {
  animation: hms-spark-pop 0.82s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-rooster-button.is-excited .hms-spark.spark-2 {
  animation-delay: 45ms;
}

.hero-rooster-button.is-excited .hms-spark.spark-3 {
  animation-delay: 90ms;
}

.hero-rooster-button.is-excited .hms-spark.spark-4 {
  animation-delay: 135ms;
}

@keyframes hms-raccoon-idle {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-6px) rotate(1.2deg);
  }
}

@keyframes hms-raccoon-excited {
  0% {
    transform: scale(1) translateY(0) rotate(0deg);
  }
  28% {
    transform: scale(1.1, 0.92) translateY(4px) rotate(-4deg);
  }
  58% {
    transform: scale(1.08) translateY(-16px) rotate(5deg);
  }
  80% {
    transform: scale(0.98) translateY(2px) rotate(-2deg);
  }
  100% {
    transform: scale(1) translateY(0) rotate(0deg);
  }
}

@keyframes hms-spark-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3) rotate(-15deg);
  }
  35% {
    opacity: 1;
    transform: translate(-50%, -85%) scale(1.12) rotate(8deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -135%) scale(0.85) rotate(0deg);
  }
}

/* Mapache 2 en su escritorio (.privacy-mascot) */
.privacy-egg.privacy-mascot {
  width: clamp(190px, 25vw, 248px) !important;
  height: auto !important;
  filter: drop-shadow(0 16px 28px rgba(23, 19, 14, 0.12));
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.privacy-egg.privacy-mascot:hover {
  transform: translateY(-5px) scale(1.03);
}

@media (max-width: 640px) {
  .hero {
    padding: clamp(96px, 14svh, 120px) 18px 36px !important;
  }

  .hero-rooster-art {
    width: clamp(148px, 40vw, 176px) !important;
  }

  .hero-rooster-prompt.hero-mascot-caption {
    width: auto !important;
    font-size: 20px;
    margin-top: 6px !important;
  }

  .privacy-egg.privacy-mascot {
    width: clamp(175px, 50vw, 215px) !important;
  }
}

/* ==========================================================================
   ISLA ESTUDIO FOOTER — ENTRADA DIVERTIDA Y FLOTACIÓN DINÁMICA
   ========================================================================== */
.farm-island-art {
  opacity: 0;
  transform: translateY(48px) scale(0.92);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.34, 1.45, 0.64, 1);
  will-change: transform, opacity;
}

.farm-island-art.is-in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: island-float 6.5s ease-in-out infinite alternate;
  animation-delay: 0.9s;
}

.farm-island-art:hover {
  filter: drop-shadow(0 20px 32px rgba(23, 19, 14, 0.16));
}

@media (prefers-reduced-motion: reduce) {
  .farm-island-art {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   ENLACE LIMPIO (SIN BOTÓN) PARA HISTORIAS DESTACADAS (ACCESIUM SUITE, ETC.)
   ========================================================================== */
.story-clean-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 16px;
  font-weight: 600;
  color: var(--muted, rgba(0, 0, 0, 0.55));
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.2s ease, transform 0.2s ease;
}

.story-clean-link:hover {
  color: var(--ink, #000);
  transform: translateX(3px);
}

.story-clean-link:focus-visible {
  outline: 2px solid var(--ink, #000);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
   TALENTO HUMANO — ENTRADA Y HOVER DIFERENCIADO EN TARJETAS POLAROID (.prints)
   ========================================================================== */
.prints {
  perspective: 1200px;
  margin-top: 50px;
}

.prints .print {
  position: relative;
  cursor: pointer;
  transform-style: preserve-3d;
  will-change: transform;
  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.06);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              z-index 0s;
}

.prints .print img {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 0.35s ease;
}

.prints .print figcaption {
  transition: color 0.3s ease, transform 0.3s ease;
}

/* Estado de preparación antes de entrar (solo si JS activó la animación) */
.prints.is-ready .print-left,
.prints.is-ready .print-right {
  opacity: 0;
}

/* --------------------------------------------------------------------------
   1. TARJETA IZQUIERDA (Hugo Morán Silva · +15 Años)
   -------------------------------------------------------------------------- */
.prints .print-left {
  z-index: 1;
  transform: rotate(-4deg);
  transform-origin: 25% 75%;
}

.prints.is-in-view .print-left {
  animation: hms-polaroid-enter-left 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes hms-polaroid-enter-left {
  0% {
    opacity: 0;
    transform: translate3d(-75px, 50px, 0) rotate(-16deg) scale(0.9);
  }
  65% {
    transform: translate3d(5px, -6px, 0) rotate(-2deg) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(-4deg) scale(1);
  }
}

/* Hover Tarjeta Izquierda: Enderezamiento sutil + elevación limpia */
.prints .print-left:hover {
  z-index: 10;
  transform: translate3d(-6px, -18px, 0) rotate(-0.5deg) scale(1.06);
}

.prints .print-left:hover img {
  transform: scale(1.035);
  filter: contrast(1.03) brightness(1.02);
}

.prints .print-left:hover figcaption {
  color: var(--ink, #111);
  font-weight: 700;
  transform: translateY(1px);
}

/* --------------------------------------------------------------------------
   2. TARJETA DERECHA (Andrés, Robert & Jhon Edwar)
   -------------------------------------------------------------------------- */
.prints .print-right {
  z-index: 2;
  transform: rotate(5deg);
  transform-origin: 75% 75%;
}

.prints.is-in-view .print-right {
  animation: hms-polaroid-enter-right 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.18s forwards;
}

@keyframes hms-polaroid-enter-right {
  0% {
    opacity: 0;
    transform: translate3d(75px, 60px, 0) rotate(18deg) scale(0.88);
  }
  65% {
    transform: translate3d(-5px, -8px, 0) rotate(3.5deg) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(5deg) scale(1);
  }
}

/* Hover Tarjeta Derecha: Inclinación dinámica + despegue limpio */
.prints .print-right:hover {
  z-index: 10;
  transform: translate3d(8px, -20px, 0) rotate(8deg) scale(1.06);
}

.prints .print-right:hover img {
  transform: scale(1.035) rotate(-0.5deg);
  filter: contrast(1.04) saturate(1.04);
}

.prints .print-right:hover figcaption {
  color: var(--ink, #111);
  font-weight: 700;
  transform: translateY(1px);
}

/* Reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  .prints.is-ready .print-left,
  .prints.is-ready .print-right {
    opacity: 1;
  }
  .prints.is-in-view .print-left,
  .prints.is-in-view .print-right {
    animation: none;
    opacity: 1;
  }
  .prints .print-left:hover,
  .prints .print-right:hover {
    transform: none;
  }
}

/* ==========================================================================
   OPTIMIZACIÓN DE MARQUEE DE TESTIMONIOS (GPU + TOUCH PAUSE EN MÓVIL)
   ========================================================================== */
.review-track {
  will-change: transform;
  transform: translateZ(0);
}

.review-marquee:hover .review-track,
.review-marquee:active .review-track,
.review-marquee:focus-within .review-track {
  animation-play-state: paused;
}

@media (max-width: 640px) {
  .review-card {
    width: 290px !important;
    padding: 20px 20px 18px !important;
    border-radius: 24px !important;
  }
}