/* Mentoria Scale: a capa da Scale (paths.css/scale-cover.css) já é a porta de entrada; aqui ficam o popup
   de aplicação e o protótipo editável (botão "Editar página" no rodapé, só para quem abre ?editar=1). */

/* ------------------------------------------------------------------ POPUP */
/* Sistema visual do formulário: carvão (superfícies elevadas, cantos 14–20px, fio de 1px) + laranja Starth como cor
   de ação. A tela de sucesso mantém o verde da Starth (aprovada). */
html:has(dialog.aplicacao[open]) { scrollbar-gutter: stable; }
.aplicacao { --offer-color: #ff6b2c; --offer-strong: #ff8a55; --offer-ink: #1c0c04; --offer-tint: #ff6b2c1a; --offer-ring: #ff6b2c33;
  --application-bg: #1b1d20; --application-panel: #24272b; --application-panel-2: #2b2f34; --application-border: #34383e; --application-border-strong: #4a5058; --application-muted: #a7acb3;
  width: min(620px, calc(100vw - 40px)); }
.aplicacao__head { padding: 28px 32px 0; }
.aplicacao__title { font-family: var(--font-display); font-size: clamp(24px, 4vw, 30px); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; outline: none; }
.aplicacao__intro { margin-top: 12px; color: var(--application-muted); font-size: 14px; line-height: 1.6; }
.aplicacao__progress { margin-top: 22px; color: var(--application-muted); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.aplicacao__bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.aplicacao__bar span { height: 4px; border-radius: 4px; background: var(--application-border); transition: background-color .3s var(--ease-out); }
.aplicacao__bar .is-done, .aplicacao__bar .is-current { background: var(--offer-color); }
.aplicacao__form { padding: 6px 32px 32px; }
.aplicacao__step { display: grid; gap: 28px; min-width: 0; margin: 0; padding: 26px 0 0; border: 0; }
.aplicacao__field { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.aplicacao__label { display: block; padding: 0; color: var(--paper); font-size: 14px; font-weight: 600; line-height: 1.45; letter-spacing: -.005em; }
.aplicacao__input { width: 100%; min-height: 54px; padding: 14px 18px; border: 1px solid var(--application-border); border-radius: 16px; background: var(--application-panel); color: var(--paper);
  font: 400 16px/1.4 var(--font-body); box-shadow: inset 0 1px 0 #ffffff08; transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
.aplicacao__input::placeholder { color: #767c84; }
.aplicacao__input:hover { border-color: var(--application-border-strong); }
.aplicacao__input:focus { outline: none; border-color: var(--offer-color); background: var(--application-panel-2); box-shadow: 0 0 0 4px var(--offer-ring); }
.aplicacao__textarea { min-height: 112px; resize: vertical; }
.aplicacao__meta { display: flex; justify-content: space-between; gap: 12px; }
.aplicacao__counter { margin-left: auto; color: var(--application-muted); font-size: 12px; }
.aplicacao__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.aplicacao__chip { position: relative; display: inline-flex; cursor: pointer; }
.aplicacao__chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.aplicacao__chip span { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; border: 1px solid var(--application-border); border-radius: 999px; background: var(--application-panel);
  color: #dfe2e6; font-size: 14px; font-weight: 500; line-height: 1.3; transition: border-color var(--dur-micro), background-color var(--dur-micro), color var(--dur-micro), box-shadow var(--dur-micro); }
.aplicacao__chip span::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--application-border-strong); transition: background-color var(--dur-micro), box-shadow var(--dur-micro); }
.aplicacao__chip:hover span { border-color: var(--application-border-strong); background: var(--application-panel-2); color: var(--paper); }
.aplicacao__chip input:checked + span { border-color: var(--offer-color); background: var(--offer-tint); color: #fff; font-weight: 600; }
.aplicacao__chip input:checked + span::before { background: var(--offer-color); box-shadow: 0 0 0 3px var(--offer-ring); }
.aplicacao__chip input:focus-visible + span { outline: 2px solid var(--offer-color); outline-offset: 3px; }
.aplicacao__error { color: #ff9b9b; font-size: 13px; line-height: 1.5; }
.aplicacao__field.is-invalid .aplicacao__input { border-color: #ff7a7a; }
.aplicacao__field.is-invalid .aplicacao__chip span { border-color: #ff7a7a80; }
.aplicacao__consent { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--application-border); border-radius: 16px; background: var(--application-panel); color: #dfe2e6; font-size: 14px; line-height: 1.55; cursor: pointer;
  transition: border-color var(--dur-micro), background-color var(--dur-micro); }
.aplicacao__consent:hover { border-color: var(--application-border-strong); }
.aplicacao__consent:has(input:checked) { border-color: #ff6b2c66; }
.aplicacao__consent input { position: relative; flex: none; width: 24px; height: 24px; margin: -1px 0 0; appearance: none; -webkit-appearance: none; border: 1.5px solid var(--application-border-strong); border-radius: 7px; background: var(--application-bg); cursor: pointer;
  transition: border-color var(--dur-micro), background-color var(--dur-micro); }
.aplicacao__consent input::after { content: ''; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid var(--offer-ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); opacity: 0; transition: transform var(--dur-micro) var(--ease-out), opacity var(--dur-micro); }
.aplicacao__consent input:hover { border-color: var(--offer-color); }
.aplicacao__consent input:checked { border-color: var(--offer-color); background: var(--offer-color); }
.aplicacao__consent input:checked::after { transform: rotate(45deg) scale(1); opacity: 1; }
.aplicacao__privacy { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin-top: -10px; color: var(--application-muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #ffffff40; transition: color var(--dur-micro); }
.aplicacao__privacy:hover { color: var(--paper); }
.aplicacao__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.aplicacao__failure { margin-top: 20px; scroll-margin-bottom: 104px; padding: 14px 16px; border: 1px solid #ff7a7a33; border-radius: 14px; background: #ff7a7a12; color: #ffb4b4; font-size: 14px; line-height: 1.55; }
.aplicacao__actions { display: flex; align-items: center; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--application-border); }
.aplicacao__back, .aplicacao__next, .aplicacao__go, .aplicacao__done { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; border-radius: 999px;
  font: 700 12px/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
.aplicacao__back, .aplicacao__done { padding: 0 24px; border: 1px solid var(--application-border-strong); background: transparent; color: var(--application-muted); }
.aplicacao__back:hover, .aplicacao__done:hover { border-color: #5e646d; background: var(--application-panel); color: var(--paper); }
.aplicacao__next { flex: 1; padding: 0 26px; border: 1px solid var(--offer-color); background: var(--offer-color); color: var(--offer-ink); box-shadow: 0 10px 30px -12px #ff6b2c99; }
.aplicacao__next:hover { border-color: var(--offer-strong); background: var(--offer-strong); color: var(--offer-ink); transform: translateY(-2px); box-shadow: 0 14px 34px -12px #ff6b2caa; }
.aplicacao__next .ui-icon { transition: transform var(--dur-micro) var(--ease-out); }
.aplicacao__next:hover .ui-icon { transform: translateX(3px); }
.aplicacao__go { padding: 0 26px; border: 1px solid var(--brand); background: var(--brand); color: var(--on-brand); }
.aplicacao__go:hover { border-color: var(--paper); background: var(--paper); color: var(--ink-deep); transform: translateY(-2px); }
.aplicacao__next:disabled { border-color: var(--application-border); background: var(--application-panel); color: var(--application-muted); box-shadow: none; cursor: progress; transform: none; }
.aplicacao__next:disabled .ui-icon { display: none; }
.aplicacao :is(input, button, a):focus-visible { outline: 2px solid var(--offer-color); outline-offset: 3px; }
/* Sucesso: caixa abre com leve zoom, luzes verdes passam ao fundo em loop e a barra conta 20 s até a Starth. */
.aplicacao__success { position: relative; overflow: hidden; padding: 44px 34px 34px; outline: none; text-align: center; animation: aplicacao-open .7s var(--ease-out) both; }
.aplicacao__lights { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.aplicacao__lights i { position: absolute; display: block; border-radius: 50%; background: radial-gradient(circle, #c5ff0040 0%, #c5ff0014 38%, transparent 68%); will-change: transform; }
.aplicacao__lights i:nth-child(1) { width: 420px; height: 420px; left: -180px; top: -160px; animation: aplicacao-light-a 14s ease-in-out infinite alternate; }
.aplicacao__lights i:nth-child(2) { width: 360px; height: 360px; right: -160px; bottom: -180px; animation: aplicacao-light-b 17s ease-in-out infinite alternate; }
.aplicacao__lights i:nth-child(3) { width: 260px; height: 120px; left: 20%; top: 40%; border-radius: 999px; background: linear-gradient(90deg, transparent, #c5ff0018, transparent); filter: blur(22px); animation: aplicacao-light-c 9s linear infinite; }
.aplicacao__success-body { position: relative; display: grid; justify-items: center; gap: 12px; max-width: 420px; margin: 0 auto; }
.aplicacao__check { position: relative; width: 52px; height: 52px; margin-bottom: 6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 8px #c5ff0014, 0 0 40px #c5ff0033; animation: aplicacao-pop .6s var(--ease-out) .15s both; }
.aplicacao__check::after { content: ''; position: absolute; left: 19px; top: 13px; width: 11px; height: 20px; border: solid var(--on-brand); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.aplicacao__success-message { display: grid; gap: 8px; }
.aplicacao__success-text { margin: 0; font-family: var(--font-display); font-size: clamp(20px, 3.4vw, 24px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.aplicacao__success-note { max-width: 36ch; color: var(--application-muted); font-size: 14px; line-height: 1.6; }
.aplicacao__starth { display: grid; justify-items: center; gap: 10px; width: 100%; margin-top: 14px; padding: 22px 22px 24px; border: 1px solid #c5ff0033; border-radius: 20px; background: #c5ff000a; }
.aplicacao__starth-kicker { color: var(--brand); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.aplicacao__starth-title { font-family: var(--font-display); font-size: 18px; font-weight: 750; line-height: 1.2; letter-spacing: -.01em; }
.aplicacao__starth-text { max-width: 34ch; color: var(--application-muted); font-size: 13px; line-height: 1.55; }
.aplicacao__timer { width: 100%; height: 4px; margin-top: 8px; overflow: hidden; border-radius: 4px; background: var(--application-border); }
.aplicacao__timer-fill { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--brand); transform: scaleX(0); transform-origin: left center; }
.aplicacao__success.is-counting .aplicacao__timer-fill { animation: aplicacao-fill var(--aplicacao-seconds, 20s) linear forwards; }
.aplicacao__timer-text { color: var(--application-muted); font-family: var(--font-mono-ui); font-size: 12px; letter-spacing: .02em; }
.aplicacao__go { width: 100%; max-width: 320px; margin-top: 8px; }
.aplicacao__done { margin-top: 6px; }
@keyframes aplicacao-open { from { opacity: 0; transform: scale(.96) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes aplicacao-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes aplicacao-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes aplicacao-light-a { from { transform: translate(0, 0); } to { transform: translate(180px, 90px); } }
@keyframes aplicacao-light-b { from { transform: translate(0, 0); } to { transform: translate(-200px, -110px); } }
@keyframes aplicacao-light-c { from { transform: translateX(-140%) rotate(-12deg); } to { transform: translateX(240%) rotate(-12deg); } }
@media (max-width: 800px) {
  .aplicacao { width: calc(100vw - 16px); }
  .aplicacao__head { padding: 22px 20px 0; }
  .aplicacao__form { padding: 2px 20px 22px; }
  .aplicacao__step { gap: 26px; padding-top: 24px; }
  .aplicacao__chip span { min-height: 46px; padding: 0 18px; }
  .aplicacao__consent { padding: 14px 16px; }
  .aplicacao__success { padding: 34px 18px 26px; }
  .aplicacao__starth { padding: 20px 16px 22px; }
  .aplicacao__back { padding: 0 20px; }
  .aplicacao__actions { position: sticky; bottom: -22px; margin-inline: -20px; padding: 14px 20px 22px; background: linear-gradient(transparent, var(--application-bg) 22%); }
}
@media (prefers-reduced-motion: reduce) {
  .aplicacao__bar span, .aplicacao__input, .aplicacao__chip span, .aplicacao__chip span::before, .aplicacao__consent, .aplicacao__consent input, .aplicacao__consent input::after, .aplicacao__back, .aplicacao__next, .aplicacao__go, .aplicacao__done, .aplicacao__next .ui-icon { transition: none; }
  .aplicacao__success, .aplicacao__check, .aplicacao__lights i { animation: none; }
  .aplicacao__next:hover, .aplicacao__go:hover { transform: none; } .aplicacao__next:hover .ui-icon { transform: none; }
}

/* ------------------------------------------------------------- PROTÓTIPO */
.proto__entry { display: flex; justify-content: center; padding: 0 var(--pad-x) 28px; }
.proto__toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid currentColor; border-radius: 999px; background: transparent;
  color: var(--ink-deep); font: 600 12px/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; opacity: .75; }
.proto__toggle:hover, .proto__toggle:focus-visible { opacity: 1; outline: none; }
.masogo-closing[data-faq-transition] .proto__toggle { color: var(--faq-ink); }
.proto__bar { position: fixed; left: 50%; bottom: 16px; z-index: 60; display: grid; gap: 10px; width: min(720px, calc(100vw - 24px)); padding: 12px 14px; transform: translateX(-50%);
  border: 1px solid #ff8a4566; border-radius: 18px; background: #100c09f2; color: var(--paper); box-shadow: 0 20px 50px #00000080; backdrop-filter: blur(12px); }
.proto__bar[hidden] { display: none; }
.proto__status { font-size: 13px; line-height: 1.5; color: #d8d2cc; }
.proto__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.proto__btn { min-height: 40px; padding: 0 14px; border: 1px solid #3a302a; border-radius: 999px; background: transparent; color: var(--paper); font: 600 13px/1 var(--font-body); cursor: pointer; }
.proto__btn:hover { background: #ffffff10; }
.proto__btn--main { margin-left: auto; border-color: var(--brand); background: var(--brand); color: var(--on-brand); }
.proto__btn:focus-visible { outline: 2px solid #ff8a45; outline-offset: 3px; }
.proto__out { width: 100%; min-height: 120px; padding: 10px; border: 1px solid #3a302a; border-radius: 12px; background: #000; color: var(--paper); font: 12px/1.5 ui-monospace, monospace; }
html[data-proto-editing] [data-proto] { cursor: text; outline: 1px dashed #ff8a4599; outline-offset: 3px; border-radius: 4px; transition: none; }
html[data-proto-editing] [data-proto]:hover { outline-color: #ff8a45; background: #ff8a4514; }
html[data-proto-editing] [data-proto]:focus { outline: 2px solid #ff8a45; background: #ff8a4520; }
html[data-proto-editing] .scan__headline, html[data-proto-editing] .scan__subline, html[data-proto-editing] .scan__cta,
html[data-proto-editing] .scale-cover__heading { pointer-events: auto; }
html[data-proto-editing] .paths__cover:hover .paths__action i { transform: none; }
@media (max-width: 560px) { .proto__bar { bottom: 8px; padding: 10px 12px; } .proto__btn { flex: 1; } .proto__btn--main { flex-basis: 100%; margin-left: 0; } }