/* Product pages retain their original content and layout with the Ellos Dev identity. */
:root{--bg:#11120f;--surface:#1b1d16;--line:#3b3e30;--line-strong:#565b46;--blue:#d4fb5b;--cyan:#d4fb5b;--green:#d4fb5b;--text:#f3f4ee;--muted:#c5c9ba;--subtle:#aeb39f;--grad:linear-gradient(90deg,#d4fb5b,#d4fb5b)}
body{background:var(--bg);color:var(--muted)}
.site-header,.site-header.scrolled{background:rgba(17,18,15,.94)}
.btn{color:#11120f;border-radius:6px;background:#d4fb5b;min-height:44px}
.btn-ghost{color:#f3f4ee;background:transparent;border-color:#747a61}
.btn:hover{box-shadow:none;background:#e1ff89}.btn-ghost:hover{background:#24291b}
.menu-btn{color:#f3f4ee;background:#1b1d16;border-color:#747a61}
.logo img{width:36px;height:36px;object-fit:contain}.cta>img{width:56px;height:56px;object-fit:contain}
.grad-text{color:#d4fb5b;background:none;-webkit-text-fill-color:currentColor}
.tag{border-color:#596636;color:#d4fb5b}.live{background:#1b1d16;border-color:#747a61}
:focus-visible{outline:3px solid #d4fb5b;outline-offset:5px}
nav a,.more a{min-height:44px;display:inline-flex;align-items:center}
footer{padding-bottom:48px}.legal-links,.legal-empresa,.legal-modelo{width:min(100% - 32px,1200px);margin:16px auto 0}
.legal-links{display:flex;flex-wrap:wrap;gap:8px 24px}.legal-links a{min-height:44px;color:#f3f4ee;text-decoration:underline;text-underline-offset:4px}
.legal-empresa,.legal-modelo{color:#c5c9ba;font-size:.8125rem;line-height:1.8}.legal-empresa a{color:inherit;text-decoration:underline}
.aviso-armazenamento{position:fixed;bottom:16px;left:16px;right:16px;z-index:200;max-width:720px;margin:auto;display:flex;align-items:center;gap:20px;padding:18px 24px;background:#20231a;border:1px solid #747a61;border-radius:8px;box-shadow:0 8px 32px #0008;color:#f3f4ee;font:400 .8125rem/1.6 Poppins,system-ui,sans-serif}
.aviso-armazenamento p{margin:0}.aviso-armazenamento a{color:#d4fb5b;text-decoration:underline}.aviso-armazenamento button{flex:none;background:#d4fb5b;color:#11120f;border:0;border-radius:4px;padding:0 18px;min-height:44px;font:600 .875rem Poppins,system-ui,sans-serif;cursor:pointer}
.demo-caption{font-size:.8125rem;line-height:1.6;color:#c5c9ba;margin-bottom:16px}
@media(max-width:860px){nav ul{background:#11120f}.site-header{background:rgba(17,18,15,.96)}}
@media(max-width:540px){.aviso-armazenamento{padding:16px;gap:16px;align-items:flex-start;flex-direction:column}.aviso-armazenamento button{align-self:flex-end}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.js .reveal,.js .up,.js .fade{opacity:1!important;transform:none!important}}
html.motion-paused{scroll-behavior:auto}.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation:none!important;transition:none!important}.motion-paused.js .reveal,.motion-paused.js .up,.motion-paused.js .fade{opacity:1!important;transform:none!important}

/* Editorial scale and finish, shared by both product pages. */
:root{--surface:#1b1e17;--line:#373d2d;--line-strong:#697254;--subtle:#b1b8a1;--r:6px;--r-lg:10px;--wrap:1320px;--head:80px}
body{font-size:1rem;line-height:1.75}
::selection{background:#d4fb5b;color:#11120f}
.wrap{width:min(100% - 80px,var(--wrap))}
h1,h2,h3{font-weight:500}
h1{font-size:clamp(2.5rem,5.25vw,4.75rem);line-height:1.05;letter-spacing:-.065em}
h2{font-size:clamp(2rem,3.8vw,3.25rem);line-height:1.12;letter-spacing:-.05em;max-width:24ch}
h3{font-size:1.125rem;line-height:1.3;letter-spacing:-.035em}
.lead{font-size:1.0625rem;line-height:1.75;color:var(--muted)}
.eyebrow,.crumb,.tag,.demo-caption{font-size:.75rem;line-height:1.6}
.eyebrow{font-family:'Courier New',monospace;font-weight:400;letter-spacing:.12em;margin-bottom:20px}
.crumb{color:var(--subtle);margin-bottom:28px}
.crumb a{color:var(--subtle);text-underline-offset:5px;text-decoration-color:#697254}
.crumb a:hover{color:var(--text)}
.tag{border:1px solid #596636;border-radius:4px;padding:6px 10px;letter-spacing:.02em;font-weight:500}
.section{padding-block:clamp(72px,8vw,112px)}
.lp-hero{padding-top:calc(var(--head) + clamp(56px,6vw,88px))}
.lp-hero .case{gap:clamp(40px,6vw,88px);align-items:center}
.lp-hero .lead{margin-top:24px}
.lp-hero .hero-actions{margin-top:32px;gap:12px}
.demo-caption{color:var(--muted);padding-left:14px;border-left:2px solid #697254;margin-bottom:20px;max-width:60ch}
.site-header,.site-header.scrolled{border-bottom:1px solid var(--line);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.site-header .wrap{gap:24px}
.logo{font-size:1.5rem;font-weight:500;letter-spacing:-.06em;gap:9px}
.logo img{width:32px;height:32px}
.head-right{gap:32px}
nav a{font-size:.8125rem;color:var(--muted)}
nav a:hover,nav a[aria-current="true"]{color:#d4fb5b}
nav a[aria-current="true"]::after{height:1px;bottom:1px}
.menu-btn{border-color:#697254;border-radius:4px}
.btn{border:1px solid #d4fb5b;border-radius:5px;min-height:52px;padding:12px 22px;font-size:.8125rem;line-height:1.4;font-weight:500;transition:background-color .18s,color .18s,border-color .18s,transform .25s var(--ease)}
.btn-sm{min-height:44px;padding:10px 16px;font-size:.75rem}
.btn .i{width:20px;height:20px;transition:transform .25s var(--ease)}
.btn-ghost{border-color:#697254}
.btn:hover{border-color:#e1ff89;transform:translateY(-2px)}
.btn:hover .i{transform:translateY(-1px)}
.btn-ghost:hover{color:#f3f4ee;border-color:#a5b389}
.btn:active{transform:translateY(0)}
.feats{gap:20px;margin-top:48px}
.card{padding:32px;background:#1b1e17;border-color:#373d2d;border-radius:8px;box-shadow:none}
.card:hover,.card:focus-within{border-color:#8a9a60;transform:translateY(-4px)}
.card::before{background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),#d4fb5b0d,transparent 70%)}
.card .ico{width:48px;height:48px;border:1px solid #4c5932;border-radius:50%;background:#252d1a;color:#d4fb5b;margin-bottom:40px}
.card h3{margin-bottom:12px}
.card p{color:#c5c9ba;font-size:.9375rem;line-height:1.75}
.shot{border:1px solid #5f6948;border-radius:8px;box-shadow:0 20px 60px -34px #000c}
.shot-link{border-radius:8px}
.shot-link:focus-visible{outline-offset:8px}
.shots .shot.top{right:-16px;border-color:#869467;box-shadow:0 16px 40px -20px #000b}
.live{background:#171c11;border-color:#7b8a54;color:#f3f4ee;border-radius:4px;font-size:.6875rem;font-weight:500;padding:7px 10px}
.live::before{width:6px;height:6px;box-shadow:0 0 0 3px #d4fb5b18}
.case-title{font-size:clamp(1.5rem,2.8vw,2.25rem);line-height:1.2;letter-spacing:-.045em}
.checks li{padding-block:16px;font-size:.9375rem;line-height:1.7;color:#dce1d0}
.checks .i{margin-top:5px}
.steps{gap:40px}
.steps .num{font-size:3.5rem;letter-spacing:-.07em;font-weight:400;margin-bottom:26px}
.steps h3{font-size:1.25rem;margin-bottom:12px}
.steps p{font-size:.9375rem;line-height:1.75}
.steps li::before{width:100%;transform:scaleX(0);transform-origin:left;transition:transform .85s var(--ease)}
.steps.in li::before{width:100%;transform:scaleX(1)}
.cta{background:#d4fb5b;color:#171b0e;border-color:#d4fb5b;border-radius:10px;padding-block:clamp(56px,7vw,88px)}
.cta::before{inset:-70% 30%;border:1px solid #829f35;border-radius:50%;background:none;animation:none;transform:rotate(35deg);opacity:.3}
.cta::after{content:'';position:absolute;inset:-55% 8%;border:1px solid #829f35;border-radius:50%;transform:rotate(-24deg);opacity:.25;z-index:-1;pointer-events:none}
.cta h2{color:#171b0e;max-width:26ch;margin-inline:auto;font-size:clamp(2rem,4.2vw,3.75rem)}
.cta .lead{color:#39461d;font-size:1rem;max-width:52ch;margin-top:24px}
.cta>img{width:48px;height:48px;object-fit:contain;margin-bottom:28px}
.cta .btn{background:#171b0e;color:#f3f4ee;border-color:#171b0e}
.cta .btn:hover{background:#303c14;border-color:#303c14}
.cta :focus-visible{outline-color:#171b0e}
footer{padding:40px 0 44px;border-top-color:#373d2d;background:#0d0f0b}
footer .wrap{font-size:.75rem;gap:24px;color:#bfc6b1;padding-bottom:24px}
footer .logo{font-size:1.375rem}
.legal-links,.legal-empresa,.legal-modelo{width:min(100% - 80px,var(--wrap));margin-top:16px}
.legal-links{border-top:1px solid #373d2d;padding-top:12px;gap:4px 28px}
.legal-links a{color:#e1e6d8;text-decoration:none;font-size:.75rem}
.legal-links a:hover{color:#d4fb5b;text-decoration:underline;text-underline-offset:5px}
.legal-empresa,.legal-modelo{color:#bfc6b1;font-size:.75rem;line-height:1.8}
.legal-empresa a{text-underline-offset:4px}
@media(max-width:1024px){
  .wrap,.legal-links,.legal-empresa,.legal-modelo{width:min(100% - 48px,var(--wrap))}
  .feats{gap:16px}.card{padding:28px}.head-right{gap:24px}
}
@media(max-width:860px){
  nav ul{padding-inline:24px}nav ul a{display:flex;font-size:.9375rem;min-height:52px}
  .lp-hero{padding-top:calc(var(--head) + 44px)}
  .lp-hero .case{gap:40px}.lp-hero h1{max-width:17ch;font-size:clamp(2.5rem,7vw,4.25rem)}
  .lp-hero .media{max-width:760px;width:100%;margin-inline:auto}
  .shots .shot.top{position:static;width:100%;margin-top:16px}
  .case .media{min-width:0}.live{top:12px;right:12px}
  .steps{gap:32px}.steps .num{font-size:3rem}
}
@media(max-width:560px){
  :root{--head:76px}
  .wrap,.legal-links,.legal-empresa,.legal-modelo{width:calc(100% - 40px)}
  .site-header .wrap{gap:12px}.logo{font-size:1.375rem}.logo img{width:30px;height:30px}
  .section{padding-block:64px}.lp-hero{padding-top:calc(var(--head) + 32px)}
  .lp-hero h1{font-size:clamp(2.25rem,9.7vw,3.25rem);max-width:16ch}
  .lp-hero .tag{font-size:.6875rem;max-width:100%;text-wrap:balance}
  .lead,.lp-hero .lead{font-size:1rem;line-height:1.75}.crumb{font-size:.75rem;margin-bottom:24px}
  .hero-actions .btn{width:100%;white-space:normal;text-align:center;min-height:54px}
  .feats{margin-top:32px;gap:14px}.card{padding:26px}.card .ico{margin-bottom:28px}
  h2{font-size:2rem}.case-title{font-size:1.75rem}
  .demo-caption{font-size:.75rem;line-height:1.7;padding-left:10px}
  .live{position:static;margin-top:12px;max-width:100%;width:max-content}
  .shot-link{padding-bottom:2px}.cta{padding-inline:22px;border-radius:8px}
  .cta h2{font-size:2rem}.cta .lead{font-size:.9375rem}.cta .hero-actions{margin-top:28px}
  footer .wrap{align-items:flex-start;flex-direction:column;gap:12px}
  .legal-links{gap:0 22px}.legal-links a{font-size:.75rem}
}
@media(prefers-reduced-motion:reduce){
  .card:hover,.shot-link:hover,.btn:hover,.btn:hover .i{transform:none}
  .steps li::before{transform:scaleX(1)}
}
.motion-paused .card:hover,.motion-paused .shot-link:hover,.motion-paused .btn:hover,.motion-paused .btn:hover .i{transform:none}
.motion-paused .steps li::before{transform:scaleX(1)}
