html{line-height:1.5;-webkit-text-size-adjust:100%}body{margin:0}h1,h2,h3,p{margin:0}a{color:inherit}button{font:inherit}svg{vertical-align:middle}summary{display:list-item}
.page{background:#f6f7f2;color:#122c38;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6}
.page *{box-sizing:border-box}
.page a{text-decoration:none}
.page a:focus-visible,.page button:focus-visible,.page summary:focus-visible{outline:3px solid #478720;outline-offset:5px}
.header,.hero,.section,.journey,.faq,.footer{max-width:1200px;margin:auto;padding-left:32px;padding-right:32px}
.header{display:flex;align-items:center;justify-content:space-between;padding-top:24px;padding-bottom:24px;gap:24px}
.brand{display:flex;align-items:center;gap:9px;font-size:25px;font-weight:800;letter-spacing:-1px;color:#122c38}
.brandIcon{color:#548331;font-size:32px}
.brandBy{font-size:11px;letter-spacing:0;font-weight:400;color:#5b6f76;margin-left:4px}
.header nav{display:flex;align-items:center;flex-wrap:wrap;gap:28px;font-size:13px}
.header nav a{color:#29424b}
.login{border:1px solid #bac6bf;padding:10px 16px;border-radius:6px}
.hero{display:grid;grid-template-columns:1.08fr 1fr;align-items:center;gap:55px;padding-top:64px;padding-bottom:74px}
.eyebrow{font-size:11px!important;font-weight:700;letter-spacing:1.8px;display:flex;align-items:center;gap:9px;color:#54723b}
.eyebrow>span{width:7px;height:7px;border-radius:50%;background:#679536}
.hero h1{font-size:clamp(40px,4.5vw,62px);line-height:1.08;letter-spacing:-2.8px;font-weight:600;margin:26px 0}
.hero h1 em{font-style:normal;color:#5a7e36}
.intro{font-size:21px;line-height:1.45;max-width:440px}
.description{color:#5b6d73;font-size:15px;max-width:460px;margin-top:18px}
.actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:30px}
.primary{display:inline-flex;justify-content:center;align-items:center;gap:25px;background:#b4f16a;color:#142d1e;border:1px solid #a1dc59;border-radius:6px;padding:15px 21px;font-weight:700;font-size:14px;transition:background .2s}
.primary:hover{background:#c8ff88}
.secondary{font-size:13px;color:#29424b}
.note{font-size:11px;color:#66777a;margin-top:18px}
.demo{background:#0c2330;color:#e4edf0;border:1px solid #294651;border-radius:12px;overflow-x:auto;overflow-y:hidden;box-shadow:0 24px 55px #16313b20;scroll-margin-top:24px;max-width:100%}
.demoTop{display:flex;justify-content:space-between;gap:10px;padding:16px 20px;border-bottom:1px solid #29424c;font-size:8px;letter-spacing:1px;color:#a4bbc4}
.demoTop i,.status i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#b4f16a;margin-right:6px}
.demoTitle{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:25px 24px 0}
.demoTitle h2{font-size:19px;font-weight:500;margin:0}
.live{font-size:9px;color:#b4f16a;border:1px solid #547440;border-radius:4px;padding:2px 6px;letter-spacing:1px}
.demoHint{font-size:12px;color:#9bb3bd;margin:6px 24px 10px}
.net{width:100%;height:auto;display:block}
.controls{display:flex;gap:16px;padding:18px 24px;flex-wrap:wrap;align-items:center}
.control-group{display:flex;flex-direction:column;gap:8px}
.group-label{font-size:11px;font-weight:700;letter-spacing:1px;color:#7495a3;text-transform:uppercase}
.controls .transition{cursor:pointer;font:inherit;font-size:12px;font-weight:600;border-radius:4px;padding:8px 15px;border:1px solid transparent;transition:all .2s}
.controls .transition.enabled{background:#b4f16a;color:#142d1e}
.controls .transition.enabled:hover{background:#c8ff88;box-shadow:0 0 8px #b4f16a40}
.controls .transition.disabled{background:#477340;color:#9bb3bd;cursor:not-allowed;opacity:.6}
.controls .reset{margin-left:auto;background:transparent;color:#c5d6dd;border-color:#39525f;cursor:pointer}
.status{display:flex;justify-content:space-between;padding:13px 24px;background:#132e3b;border-top:1px solid #29424c;font:11px monospace;color:#c6d7de}
.caption{font-size:10px;color:#9bb3bd;padding:10px 24px;margin:0}
.disciplines{border-top:1px solid #d9dfd5;border-bottom:1px solid #d9dfd5;display:flex;justify-content:center;align-items:center;gap:35px;padding:23px 32px;flex-wrap:wrap;font-size:13px}
.disciplines span{font-size:9px;letter-spacing:1.5px;color:#687b70}
.disciplines p{margin:0}
.disciplines b{color:#9aad96;font-weight:400}
.section{padding-top:85px;padding-bottom:85px}
.sectionHeading{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:35px}
.section h2,.journey h2,.cta h2{font-size:clamp(30px,3.5vw,44px);letter-spacing:-1.6px;line-height:1.18;font-weight:500;margin:15px 0}
.sectionHeading>p{max-width:360px;font-size:14px;color:#5b6d73}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cards article{border:1px solid #d5ded0;border-radius:8px;padding:26px;background:#fcfdf9}
.number{display:flex;justify-content:space-between;color:#667f52;font:12px monospace}
.number span{font-size:20px}
.cards h3{font-size:19px;line-height:1.3;font-weight:500;margin:38px 0 12px}
.cards p{font-size:14px;color:#5b6d73;margin:0}
.journey{display:grid;grid-template-columns:1fr 1fr;gap:90px;padding-top:65px;padding-bottom:65px;border-top:1px solid #d9dfd5}
.journey>div>p:not(.eyebrow){max-width:370px;font-size:15px;color:#5b6d73}
.textLink{display:inline-block;margin-top:22px;color:#35581d;font-size:14px;font-weight:600}
.journey ol{list-style:none;margin:0;padding:0}
.journey li{display:flex;gap:24px;padding:20px 0;border-bottom:1px solid #d9dfd5}
.journey li>span{font:12px monospace;color:#65824f;padding-top:4px}
.journey h3{font-size:19px;margin:0;font-weight:500}
.journey li p{font-size:14px;color:#5b6d73;margin:5px 0 0}
.faq{padding-top:35px;padding-bottom:75px;display:grid;grid-template-columns:1fr 1.4fr;gap:40px}
.faq h2{font-size:27px;font-weight:500;letter-spacing:-1px}
.faq details{border-bottom:1px solid #d9dfd5;padding:19px 0}
.faq summary{cursor:pointer;font-weight:500;font-size:15px}
.faq details p{font-size:14px;color:#5b6d73}
.cta{text-align:center;background:#102d38;color:#f3f7ec;padding:65px 24px}
.cta .eyebrow{justify-content:center;color:#b4f16a}
.cta h2{font-size:clamp(36px,4vw,52px);margin:20px 0}
.cta>p:not(.eyebrow){font-size:15px;color:#b3c7ce;margin-bottom:28px}
.footer{padding-top:30px;padding-bottom:30px;display:flex;justify-content:space-between;gap:20px;align-items:center}
.footer p,.footer>a:last-child{font-size:11px;color:#607478}
.footer .brand{font-size:20px}
@media(max-width:900px){.hero{gap:28px}
.header nav{gap:16px}
.hero h1{font-size:44px}
.actions{gap:12px}
.journey{gap:40px}
.disciplines{gap:20px}
}
@media(max-width:700px){.header,.hero,.section,.journey,.faq,.footer{padding-left:22px;padding-right:22px}
.header{flex-wrap:wrap;gap:12px}
.header nav{width:100%;justify-content:space-between;gap:10px;font-size:12px}
.login{padding:8px 10px}
.hero{grid-template-columns:1fr;padding-top:35px;padding-bottom:45px;gap:35px}
.hero h1{font-size:46px;letter-spacing:-2px}
.eyebrow{font-size:9px!important}
.intro{font-size:20px}
.demoTop{font-size:7px;padding:15px}
.disciplines{gap:12px;font-size:11px}
.disciplines>span{width:100%;text-align:center}
.disciplines b{display:none}
.section{padding-top:50px;padding-bottom:50px}
.sectionHeading{display:block}
.cards{grid-template-columns:1fr}
.cards h3{margin-top:20px}
.journey,.faq{grid-template-columns:1fr;gap:20px;padding-top:35px;padding-bottom:40px}
.footer{flex-wrap:wrap}
.demoTitle{padding-left:18px;padding-right:18px}
.demoTitle h2{font-size:18px}
.controls{padding-left:18px;padding-right:18px}
.status{padding-left:18px;padding-right:18px;font-size:10px}
}

.language-picker:not([hidden]) { display: inline-flex; align-items: center; gap: 6px; }
.language-picker select { max-width: 120px; padding: 7px; border: 1px solid #7495a3; border-radius: 6px; color: #dce7eb; background: #102c38; font: inherit; }
.language-picker select:focus-visible { outline: 2px solid #b4f16a; outline-offset: 3px; }
/* Translations can be longer than the Portuguese fallback. */
.hero > *, .journey > *, .faq > *, .sectionHeading > * { min-width: 0; }
.hero h1, .section h2, .journey h2, .cta h2 { overflow-wrap: anywhere; }
.eyebrow > span[data-i18n] { width: auto; height: auto; border-radius: 0; background: none; }
.status { flex-wrap: wrap; gap: 8px; }
@media (max-width: 700px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { font-size: clamp(34px, 10vw, 46px); }
}

/* Zoom fullscreen mode - 60% area útil */
.demo-zoom-container { display: flex; gap: 12px; padding: 12px 24px; }
.zoom-btn { cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; border-radius: 4px; padding: 8px 15px; background: #478720; color: #f3f7ec; border: 1px solid #5a9a2c; transition: all 0.2s; }
.zoom-btn:hover { background: #5a9a2c; box-shadow: 0 0 8px #b4f16a40; }

body.demo-fullscreen { overflow: hidden; }
body.demo-fullscreen .page { display: none; }
body.demo-fullscreen .demo-fullscreen-overlay { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #0c1e26; z-index: 10000; padding: 20px; }
.demo-fullscreen-overlay .demo { flex: 1; margin: 0; max-width: 100%; display: flex; flex-direction: column; border: none; border-radius: 0; }
.demo-fullscreen-overlay .demo svg { flex: 1; width: 60%; max-width: 800px; height: auto; margin: 0 auto; }
.demo-fullscreen-overlay .demo .controls { flex-wrap: wrap; gap: 8px; padding: 12px 16px; font-size: 12px; justify-content: center; }
.demo-fullscreen-overlay .demo .status { font-size: 10px; padding: 8px 16px; text-align: center; }
.demo-fullscreen-overlay .demo .demoTop { padding: 10px 16px; font-size: 7px; }
.demo-fullscreen-overlay .demo .demoTitle { padding: 12px 16px 8px; }
.demo-fullscreen-overlay .demo .demoTitle h2 { font-size: 16px; }
.demo-fullscreen-overlay .demo .demoHint { display: none; }
.demo-fullscreen-overlay .demo .caption { display: none; }

/* Efeito visual nas transições ao hover dos botões */
.controls button:not(.reset) {
  cursor: pointer;
  transition: all 0.2s ease;
}

.controls button:not(.reset):hover {
  transform: scale(1.05);
  filter: brightness(1.15);
  box-shadow: 0 0 10px rgba(180, 241, 106, 0.5);
}

/* Highlight nas transições correspondentes */
svg rect[id^="transition-"]:hover {
  filter: brightness(1.4) drop-shadow(0 0 12px rgba(243, 247, 236, 0.8));
  cursor: pointer;
}

/* Transições ativas (amarelas) - sem animação contínua */
svg rect[fill="#fbbf24"] {
  stroke: #fbbf24;
  stroke-width: 2;
}