#b2 { --ink: #ffffff; --muted: #b8c1cf; --line: #646e80; background: radial-gradient(55% 30% at 50% 0%, #0068ff1c 0%, transparent 70%), #05070b; color: #fff; padding-top: 0; border-bottom: 1px solid #2b3445; font-family: "Sora", Arial, Helvetica, sans-serif; }
#b2 .vpanel { max-width: 880px; margin: 0 auto; overflow: hidden; padding: clamp(36px, 5cqw, 56px) clamp(18px, 4.5cqw, 56px) 0; border-radius: 12px; border: 1px solid #4a566e; background: linear-gradient(180deg, #ffffff14 0%, #ffffff0a 100%), #0e131c; box-shadow: 0 40px 90px -50px #0068ffaa, inset 0 1px 0 #3a455c; }
#b2 .verify h2, #b2.verify h2, #b2 h2 { font-family: "Sora", Arial, Helvetica, sans-serif; font-weight: 600; font-size: clamp(1.45rem, 2.9cqw, 2.05rem); line-height: 1.15; letter-spacing: -.025em; max-width: 24em; margin: 0 auto; color: #fff; }
#b2 .sub { color: #b8c1cf; margin-top: 14px; font-size: 1rem; }
#b2 .finder { display: flex; align-items: center; gap: 8px; max-width: 660px; margin: 30px auto 0; padding: 6px; background: #0e1118; border: 1.5px solid #646e80; border-radius: 12px; }
#b2 .finder:focus-within { outline: 2px solid #78b6ff; outline-offset: 2px; }
#b2 .finder input { flex: 1; min-width: 0; height: 52px; padding: 0 22px; background: transparent; color: #fff; border: 0; border-radius: 8px; outline: none; font: 500 1rem "Sora", Arial, sans-serif; }
#b2 .finder input::placeholder { color: #b8c1cf; }
#b2 .btn { background: #06af41; color: #fff; border-radius: 8px; height: 52px; padding: 0 34px; font: 700 1rem "Sora", Arial, sans-serif; }
#b2 .btn:focus-visible { outline: 2px solid #78b6ff; outline-offset: 2px; }
#b2 .result { max-width: 600px; }
#b2 .btn { margin-top: 32px; background: #06af41; color: #fff; border-radius: 8px; height: 54px; padding: 0 36px; font: 700 1rem "Sora", Arial, sans-serif; }
#b2 .btn:focus-visible { outline: 2px solid #5fd987; outline-offset: 3px; }
#b2 .btn .dot { opacity: .6; }
#b2 .assure { list-style: none; margin: 22px auto 0; padding: 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px 28px; color: #b8c1cf; font-size: .9rem; line-height: 1.3; }
#b2 .assure li { display: flex; align-items: center; gap: 8px; }
#b2 .assure li > span { position: relative; top: .07em; }
#b2 .assure svg { flex: none; width: 20px; height: 20px; fill: none; stroke: #06af41; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#b2 .assure { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px; margin-top: 20px; font-size: .78rem; }
#b2 .assure li { gap: 5px; white-space: nowrap; }
#b2 .assure svg { width: 16px; height: 16px; }
#b2 .assure { gap: 6px 10px; font-size: .7rem; }
#b2 .assure li { gap: 4px; }
#b2 .assure svg { width: 14px; height: 14px; }
#b2 .btn { width: 100%; padding: 0 12px; white-space: nowrap; font-size: .95rem; gap: 8px; }
#b2 .vpanel { border-radius: 12px; }
#b2 .finder { flex-direction: column; align-items: stretch; gap: 10px; padding: 0; background: none; border: 0; border-radius: 0; }
#b2 .finder:focus-within { outline: 0; }
#b2 .finder input { flex: none; width: 100%; height: 54px; background: #0e1118; border: 1.5px solid #646e80; border-radius: 8px; padding: 0 18px; }
#b2 .finder input:focus-visible { outline: 2px solid #78b6ff; outline-offset: 2px; }
#b2 .btn { flex: none; height: 54px; }
#b2 { padding-top: clamp(56px, 8cqw, 96px); }
#b2 .finder .btn { margin-top: 0; } /* sobra antiga desta página: #b2 .btn tinha margin-top 32px */
#b2 .pick { max-width: 660px; margin: 26px auto 0; text-align: left; }
#b2 .pick-h { font: 600 .95rem "Sora", Arial, sans-serif; color: #fff; text-align: center; margin-bottom: 14px; }
#b2 .doc { position: relative; margin-top: 16px; background: #f7f5ef; color: #22262e; border-radius: 6px; padding: 18px 20px 0; max-height: 230px; overflow: hidden; box-shadow: 0 1px 0 #ffffff22, 0 18px 40px -20px #000; font: 400 .82rem/1.55 Georgia, "Times New Roman", serif; }
#b2 .doc-h { display: flex; justify-content: space-between; border-bottom: 2px solid #22262e; padding-bottom: 6px; font: 700 .68rem "Sora", Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
#b2 .doc-car { margin-top: 10px; font: 600 .78rem "Sora", Arial, sans-serif; color: #5a6270; }
#b2 .doc-t { margin: 4px 0 8px; font: 700 1rem Georgia, serif; }
#b2 .fres .doc-b p { margin: 0 0 8px; color: #2b2f36; font: inherit; }
#b2 .doc-b b { font-weight: 700; color: #22262e; }
#b2 .doc-f { position: absolute; left: 0; right: 0; bottom: 0; padding: 50px 0 12px; text-align: center; background: linear-gradient(180deg, #f7f5ef00, #f7f5ef 60%); font: 600 .78rem "Sora", Arial, sans-serif; color: #0b4fd6; }
#b2 .fres .trecho { margin-top: 10px; font-size: .85rem; line-height: 1.5; color: #9aa6b8; }
#b2 .fres .trecho b { color: #dfe5ee; font-weight: 600; }
#b2 .fres h3 .ok { color: #3ddc84; margin-right: 8px; }
#b2 .amostras { display: grid; gap: 12px; margin-top: 14px; }
#b2 .am { position: relative; margin: 0; background: #f7f5ef; border-radius: 8px; overflow: hidden; box-shadow: 0 18px 40px -20px #000; }
#b2 .am figcaption { display: flex; justify-content: space-between; padding: 8px 12px; background: #0e1118; color: #9aa6b8; font: 600 .7rem "Sora", Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
#b2 .am-wiring figcaption span:first-child { color: #19c58b; }
#b2 .am-img { height: 340px; overflow: hidden; background: #fff; }
#b2 .am-img img { display: block; width: 100%; height: auto; transform: scale(1.35); transform-origin: 50% 22%; }
#b2 .am-t { position: absolute; left: 12px; right: 12px; bottom: 40px; z-index: 1; font: 600 .74rem "Sora", Arial, sans-serif; color: #5a6270; }
#b2 .am .doc-f { padding-top: 90px; }
#b2 .fres .yhint { margin-top: 6px; font-size: .82rem; }
#b2 .fres h3 .faixa { color: #9aa6b8; font-weight: 500; }
#b2 .am-sk { position: relative; height: 340px; padding: 16px 18px; border-radius: 8px; background: #f7f5ef; overflow: hidden; box-shadow: 0 18px 40px -20px #000; }
#b2 .am-sk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, #fff0 30%, #ffffffb3 50%, #fff0 70%); background-size: 220% 100%; animation: sk 1.3s linear infinite; }
#b2 .am-sk .sk-h { display: flex; justify-content: space-between; padding-bottom: 8px; border-bottom: 2px solid #d9d5ca; margin-bottom: 12px; }
#b2 .am-sk .sk-h i { display: block; width: 34%; height: 9px; border-radius: 4px; background: #d9d5ca; }
#b2 .am-sk .sk-h i + i { width: 14%; }
#b2 .am-sk .sk-t { width: 58%; height: 13px; border-radius: 4px; background: #cfcabd; margin-bottom: 12px; }
#b2 .am-sk .sk-l { height: 8px; border-radius: 4px; background: #e2ded3; margin-bottom: 8px; }
#b2 .am-sk .sk-l.s { width: 66%; }
#b2 .am-sk .sk-d { position: relative; height: 104px; margin: 12px 0; border: 2px solid #d9d5ca; border-radius: 4px; }
#b2 .am-sk .sk-d span { position: absolute; width: 26px; height: 20px; border: 2px solid #cfcabd; border-radius: 3px; }
#b2 .am-sk .sk-d span:nth-child(1) { left: 10%; top: 18px; } #b2 .am-sk .sk-d span:nth-child(2) { left: 46%; top: 54px; } #b2 .am-sk .sk-d span:nth-child(3) { right: 10%; top: 24px; }
#b2 .am-sk .sk-d::before { content: ""; position: absolute; left: calc(10% + 28px); right: calc(10% + 28px); top: 30px; height: 36px; border: 2px solid #e2ded3; border-left: 0; border-bottom: 0; }
@media (prefers-reduced-motion: reduce) { #b2 .am-sk::after { animation: none; } }
#b2 .sels { margin: 6px 0 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#b2 .sels select { min-height: 52px; padding: 0 14px; border-radius: 12px; border: 1px solid #4a566e; background: #0e1118; color: #e3e8f0; font: 500 1rem "Sora", Arial, sans-serif; cursor: pointer; width: 100%; }
#b2 .mk { position: relative; }
#b2 #mkBtn { width: 100%; min-height: 52px; padding: 0 34px 0 14px; border-radius: 12px; border: 1px solid #4a566e; background: #0e1118; color: #e3e8f0; font: 500 1rem "Sora", Arial, sans-serif; cursor: pointer; text-align: left; display: flex; align-items: center; gap: 10px; position: relative; }
#b2 #mkBtn::after { content: "▾"; position: absolute; right: 14px; color: #9aa6b8; }
#mkList .lg, #b2 .lg { width: 28px !important; height: 28px !important; max-width: none; flex: none; border-radius: 7px; background: #fff; padding: 3px; object-fit: contain; }
#mkList { position: fixed; z-index: 9999; overflow-x: hidden; box-sizing: border-box; top: calc(100% + 6px); left: 0; right: 0; max-height: 320px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: #0e1118; border: 1px solid #4a566e; border-radius: 12px; box-shadow: 0 20px 50px -20px #000; }
#mkList li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: #e3e8f0; font: 500 .95rem "Sora", Arial, sans-serif; }
#mkList li:hover, #mkList li[aria-selected="true"] { background: #0068ff33; }
#b2 .sels select:disabled { opacity: .45; cursor: not-allowed; }
#b2 .sels select:focus { outline: 2px solid #78b6ff; outline-offset: 1px; }
@media (max-width: 600px) { #b2 .sels { grid-template-columns: minmax(0, 1fr); } }
#b2 .sels select, #b2 #mkBtn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#b2 .pick-step { margin-top: 14px; }
#b2 .pick-l { display: flex; align-items: center; gap: 10px; font: 600 .74rem "Sora", Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #9aa6b8; margin-bottom: 10px; }
#b2 .chg { border: 0; background: none; color: #78b6ff; font: 600 .74rem "Sora", Arial, sans-serif; cursor: pointer; text-transform: none; letter-spacing: 0; padding: 4px; }
#b2 .chips { display: flex; flex-wrap: wrap; gap: 8px; }
#b2 .chips button, #b2 .years button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid #4a566e; background: #0e1118; color: #e3e8f0; font: 500 .92rem "Sora", Arial, sans-serif; cursor: pointer; transition: border-color .15s, background .15s; }
#b2 .chips button:hover, #b2 .years button:hover { border-color: #78b6ff; }
#b2 .chips button[aria-pressed="true"] { background: #0068ff; border-color: #0068ff; color: #fff; }
#b2 .more { margin-top: 10px; border: 0; background: none; color: #78b6ff; font: 600 .85rem "Sora", Arial, sans-serif; cursor: pointer; padding: 6px 0; }
#b2 .legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 400 .78rem "Sora", Arial, sans-serif; color: #b8c1cf; margin-bottom: 10px; }
#b2 .legend span { display: inline-flex; align-items: center; gap: 6px; }
#b2 .legend i, #b2 .years i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
#b2 .l3 { background: #19c58b; box-shadow: 0 0 8px #19c58b99; } #b2 .l2 { background: #3a95ff; } #b2 .l1 { background: #5b6575; }
#b2 .years { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 8px; }
#b2 .years button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 10px; border-radius: 12px; }
#b2 .years button.y1 { color: #8f99aa; }
#b2 .sugg { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 6; list-style: none; margin: 0; padding: 6px; border: 1px solid #4a566e; border-radius: 16px; background: #0b1017; box-shadow: 0 24px 50px #000a; text-align: left; }
#b2 .sugg li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 8px 12px; border-radius: 10px; cursor: pointer; color: #e3e8f0; font: 500 .95rem "Sora", Arial, sans-serif; }
#b2 .sugg li > span { display: flex; align-items: center; gap: 10px; }
#b2 .sugg li[aria-selected="true"], #b2 .sugg li:hover { background: #172131; }
#b2 .sugg small { display: inline-flex; align-items: center; gap: 6px; color: #9aa6b8; font-size: .74rem; white-space: nowrap; }
#b2 .finder { position: relative; }
#b2 .fres { max-width: 660px; margin: 22px auto 28px; padding: 20px; border: 1px solid #4a566e; border-radius: 18px; background: #0b0f16; text-align: left; }
#b2 .fres h3 { display: flex; gap: 10px; align-items: flex-start; font: 600 1.05rem/1.4 "Sora", Arial, sans-serif; color: #fff; }
#b2 .fres h3 i { margin-top: 7px; }
#b2 .fres .rc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
#b2 .fres .rc span { border: 1px solid #3a455c; border-radius: 999px; padding: 6px 12px; font: 500 .8rem "Sora", Arial, sans-serif; color: #dfe5ee; }
#b2 .fres .rc span b { color: #19c58b; }
#b2 .fres p { margin-top: 12px; font: 400 .9rem/1.6 "Sora", Arial, sans-serif; color: #b8c1cf; }
#b2 .fres .btn { margin-top: 16px; width: 100%; height: 54px; padding: 0 12px; white-space: nowrap; font-size: .92rem; letter-spacing: .02em; gap: 8px; }
@media (max-width: 400px) { #b2 .fres .btn { font-size: .82rem; } }
#b2 .fres form { display: flex; gap: 8px; margin-top: 14px; }
#b2 .fres form input { flex: 1; min-width: 0; height: 46px; border-radius: 999px; border: 1px solid #4a566e; background: #0e1118; color: #fff; padding: 0 16px; font: 400 16px "Sora", Arial, sans-serif; }
#b2 .fres form button { border: 0; border-radius: 999px; background: #0068ff; color: #fff; font: 600 .88rem "Sora", Arial, sans-serif; padding: 0 18px; cursor: pointer; }
#b2 .fres .alt { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
#b2 .fres .alt button { border: 1px solid #19c58b66; background: #19c58b14; color: #c9f5e4; border-radius: 999px; padding: 6px 12px; font: 500 .8rem "Sora", Arial, sans-serif; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { #b2 .am-sk::after { animation: none; } }
@media (max-width: 600px) { #b2 .sels { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 400px) { #b2 .fres .btn { font-size: .82rem; } }