/* useliderbox.com: página do programa piloto (18/10/2026). Direção B "Quadro de operação". */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500 900; font-stretch: 62% 125%; font-display: swap; src: url(fonts/archivo.woff2) format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/figtree.woff2) format('woff2'); }

:root {
  --verde: #0f3b2c;
  --verde-2: #134836;
  --menta: #6ee7b0;
  --papel: #f3f0e6;
  --papel-2: #e8e3d5;
  --tinta: #1d2320;
  --cinza: #5b625e;
  --suave: #cfe0d7;
  --apagado: #a9c7b9;
  --borda: #4a8f74;
  --alerta: #c2410c;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { font-family: Figtree, system-ui, sans-serif; font-size: 17px; line-height: 1.55; background: var(--verde); color: var(--papel); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.display { font-family: Archivo, sans-serif; font-stretch: 75%; font-weight: 900; text-transform: uppercase; line-height: .92; letter-spacing: -0.005em; }
.label { font-family: Archivo, sans-serif; font-stretch: 100%; font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.menta { color: var(--menta); }
.btn { display: inline-block; font-family: Archivo, sans-serif; font-stretch: 100%; font-weight: 800; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; padding: 18px 28px; border: 0; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.btn-claro { background: var(--papel); color: var(--verde); box-shadow: 5px 5px 0 var(--menta); }
.btn-escuro { background: var(--verde); color: var(--papel); box-shadow: 5px 5px 0 var(--menta); }
@media (hover: hover) {
  .btn-claro:hover, .btn-escuro:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--menta); }
}
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none !important; }
:focus-visible { outline: 3px solid var(--menta); outline-offset: 3px; }
.claro :focus-visible { outline-color: var(--verde); }
/* título recebe foco por código (leitor de tela), sem moldura visível */
[tabindex="-1"]:focus { outline: none; }
section { padding: 96px 0; }
@media (max-width: 700px) { section { padding: 72px 0; } body { font-size: 16px; } }

/* topo */
header { display: flex; justify-content: space-between; align-items: center; padding: 22px 0; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; text-decoration: none; }
.logo img { width: 34px; height: 34px; border-radius: 9px; }
.enter { font-size: 15px; color: var(--apagado); text-decoration: none; border-bottom: 1px solid transparent; padding: 10px 0; }
.enter:hover { border-color: var(--apagado); }

/* hero */
.hero { padding: 48px 0 104px; }
.vagas { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--menta); color: var(--menta); padding: 7px 12px; margin-bottom: 22px; }
.vagas i { display: inline-flex; gap: 4px; } .vagas i b { width: 9px; height: 9px; background: var(--menta); display: block; }
.hero h1 { font-size: clamp(64px, 14vw, 168px); }
.hero .sub { font-size: clamp(20px, 2.6vw, 26px); color: var(--suave); margin: 28px 0 36px; max-width: 720px; }
.hero .sub b { color: var(--papel); }

/* dores */
.dores { background: var(--papel); color: var(--tinta); }
.dores h2 { font-size: clamp(44px, 7vw, 84px); color: var(--verde); }
.dores .hint { color: var(--cinza); margin: 12px 0 30px; font-size: 18px; }
.dlist { display: grid; gap: 12px; }
.dor { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: center; text-align: left; width: 100%; background: #fff; border: 1.5px solid var(--tinta); padding: 18px; font: 500 19px/1.4 Figtree, sans-serif; color: var(--tinta); cursor: pointer; transition: transform .15s, box-shadow .15s, background .2s; }
@media (hover: hover) { .dor:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--verde); } }
.dor .bx { width: 30px; height: 30px; border: 2px solid var(--tinta); display: grid; place-items: center; font-weight: 900; color: transparent; transition: background .2s, border-color .2s; }
.dor.on { background: #e3f3e8; }
.dor.on .bx { background: var(--verde); border-color: var(--verde); color: #fff; }
.placar { font-size: 20px; }
.placar:not(:empty) { position: sticky; bottom: 0; background: var(--papel); border-top: 1.5px solid var(--tinta); padding: 16px 0 18px; margin-top: 18px; z-index: 2; }
.placar b { font-family: Archivo, sans-serif; font-stretch: 75%; font-weight: 900; font-size: 30px; text-transform: uppercase; color: var(--verde); }
.placar .btn { display: block; margin-top: 12px; text-align: center; }
.dores .fecho { margin-top: 30px; padding-top: 26px; border-top: 1.5px solid var(--tinta); font-size: 21px; max-width: 760px; }
.dores .frase { font-family: Archivo, sans-serif; font-stretch: 75%; font-weight: 900; text-transform: uppercase; font-size: clamp(30px, 4.6vw, 48px); line-height: .98; color: var(--verde); margin-top: 22px; }

/* o que muda */
.muda h2 { font-size: clamp(44px, 7.5vw, 88px); max-width: 900px; }
.cenas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--verde); margin-top: 44px; }
@media (max-width: 860px) { .cenas { grid-template-columns: 1fr; } }
.cena { background: var(--verde-2); padding: 28px 24px; }
.cena .label { color: var(--menta); }
.cena p { font-size: 21px; margin-top: 12px; }
.muda .fecho { font-size: 22px; margin-top: 34px; color: var(--suave); }
.muda .fecho b { color: var(--papel); }

/* para quem */
.quem { background: var(--verde-2); }
.quem h2 { font-size: clamp(44px, 7vw, 80px); margin-bottom: 36px; }
.quem .in { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--verde); }
@media (max-width: 800px) { .quem .in { grid-template-columns: 1fr; } }
.quem .col { background: var(--verde-2); padding: 28px 24px; }
.quem ul { list-style: none; padding: 0; display: grid; gap: 14px; margin-top: 16px; font-size: 18px; }
.quem li { padding-left: 32px; position: relative; }
.quem .sim li::before { content: "✓"; position: absolute; left: 0; color: var(--menta); font-weight: 800; }
.quem .nao li { color: var(--apagado); } .quem .nao li::before { content: "—"; position: absolute; left: 0; }
.quem .sim .label { color: var(--menta); } .quem .nao .label { color: var(--apagado); }
.quem .cta { margin-top: 36px; }

/* convite */
.piloto { background: var(--papel); color: var(--tinta); }
.piloto .in { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
@media (max-width: 900px) { .piloto .in { grid-template-columns: 1fr; gap: 36px; } }
.piloto h2 { font-size: clamp(56px, 10vw, 120px); color: var(--verde); }
.piloto .lead { font-size: 20px; color: var(--cinza); margin: 18px 0 28px; }
.piloto .label { color: var(--verde); }
.vagas3 { display: flex; gap: 10px; margin-bottom: 30px; }
.vagas3 span { flex: 1; border: 2px dashed var(--verde); height: 74px; display: grid; place-items: center; font-family: Archivo, sans-serif; font-stretch: 75%; font-weight: 900; font-size: 28px; color: var(--verde); }
.lista { list-style: none; padding: 0; border-top: 1.5px solid var(--tinta); margin-top: 14px; }
.lista li { padding: 16px 0; border-bottom: 1px solid #cfc8b6; display: grid; grid-template-columns: 30px 1fr; font-size: 18px; }
.lista li::before { content: "✓"; color: var(--verde); font-weight: 800; }
.lista small { display: block; color: var(--cinza); font-size: 15px; }
.selecao { margin-top: 34px; }
.sel { display: grid; grid-template-columns: 46px 1fr; gap: 6px 14px; margin-top: 14px; align-items: start; }
.sel .n { font-family: Archivo, sans-serif; font-stretch: 75%; font-weight: 900; font-size: 34px; line-height: 1; color: var(--verde); }
.sel p { padding-bottom: 14px; }
.piloto .btn { margin-top: 26px; }

footer { padding: 30px 0 46px; font-size: 15px; color: var(--apagado); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
footer nav { display: flex; gap: 18px; flex-wrap: wrap; }

/* questionário */
.quiz { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100dvh; background: var(--verde); display: none; flex-direction: column; z-index: 10; }
.quiz.open { display: flex; }
.qbar { height: 5px; background: var(--verde-2); } .qbar i { display: block; height: 100%; width: 0; background: var(--menta); transition: width .35s; }
.qtop { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 6px 20px; }
.qtop .label { color: var(--apagado); font-size: 14px; }
.qtop button { background: none; border: 0; color: var(--papel); font-size: 30px; cursor: pointer; line-height: 1; width: 48px; height: 48px; }
.qbody { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.qbody .wrap { max-width: 640px; padding-top: 16px; padding-bottom: 40px; }
.qbody h2 { font-family: Archivo, sans-serif; font-stretch: 85%; font-weight: 900; font-size: clamp(30px, 6vw, 46px); line-height: 1.02; text-transform: uppercase; }
.qhint { color: var(--suave); margin: 12px 0 0; }
.opts { display: grid; gap: 10px; margin-top: 26px; }
.opt { text-align: left; background: transparent; border: 1.5px solid var(--borda); color: var(--papel); padding: 16px 18px; font: 600 17px Figtree, sans-serif; cursor: pointer; transition: border-color .15s, background .15s; }
@media (hover: hover) { .opt:hover { border-color: var(--menta); } }
.opt[aria-pressed="true"] { border-color: var(--menta); background: rgba(110,231,176,.14); }
.opt[aria-pressed="true"]::after { content: " ✓"; color: var(--menta); }
textarea, .qbody input[type=text], .qbody input[type=tel] { width: 100%; background: var(--verde-2); border: 1.5px solid var(--borda); color: var(--papel); padding: 15px 16px; font: 17px Figtree, sans-serif; scroll-margin-bottom: 140px; }
::placeholder { color: #8fb0a1; opacity: 1; }
textarea:focus, .qbody input:focus { outline: 2px solid var(--menta); outline-offset: 0; border-color: var(--menta); }
textarea { min-height: 130px; resize: vertical; margin-top: 24px; }
.f { display: block; font-size: 16px; color: var(--suave); margin: 18px 0 6px; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--suave); margin-top: 22px; cursor: pointer; padding: 6px 0; }
.consent input { margin-top: 2px; accent-color: var(--menta); width: 24px; height: 24px; flex: none; }
.consent a { color: var(--menta); }
.falta { color: #ffd4bf; font-size: 15px; margin-top: 16px; min-height: 1.4em; }
.qnav { background: var(--verde); border-top: 1px solid var(--verde-2); padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); }
.qnav .wrap { max-width: 640px; display: flex; gap: 12px; padding: 0; }
.qnav .btn { flex: 1; text-align: center; }
.qnav .voltar { flex: none; background: transparent; color: var(--papel); border: 1.5px solid var(--borda); box-shadow: none; }
.fimq .selo { display: inline-block; border: 2px solid var(--menta); color: var(--menta); padding: 8px 14px; margin-bottom: 22px; transform: rotate(-3deg); }
.fimq p { color: var(--suave); font-size: 19px; margin-top: 16px; }
.prox { margin-top: 30px; border-top: 1px solid var(--borda); }
.prox div { display: grid; grid-template-columns: 40px 1fr; padding: 16px 0; border-bottom: 1px solid var(--borda); }
.prox b { font-family: Archivo, sans-serif; font-stretch: 75%; font-weight: 900; font-size: 26px; color: var(--menta); line-height: 1; }
.fimq .btn { margin-top: 28px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }