/* CONEG 2026 — visual do protótipo (Claude Design), mobile-first */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/anton-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/anton-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/montserrat-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/montserrat-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{--accent:#147F38;--accent-soft:#DDEFE2;--laranja:#F28C38;--laranja-esc:#D86A14;--verde-logo:#2DB34A;
  --escuro:#111111;--escuro2:#222222;--claro:#EBEBEB;--borda:#DADADA;--cinza:#5A5E66;--cinza-claro:#D4D7DD}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--escuro);color:#fff;-webkit-font-smoothing:antialiased}
body.claro{background:var(--claro);color:var(--escuro)}
a{color:inherit}
button,input,textarea{font-family:inherit}

.tela{max-width:480px;min-height:100vh;min-height:100dvh;margin:0 auto;padding:24px 24px 28px;display:flex;flex-direction:column;gap:22px}
.escura{background:var(--escuro);color:#fff}
.clara{background:var(--claro);color:var(--escuro)}
.cresce{flex-grow:1}

/* logo */
.logo{display:flex;flex-direction:column;font-weight:700;font-size:26px;line-height:.92;letter-spacing:-.03em}
.logo .co{display:flex;align-items:center}
.logo .bola{width:16px;height:16px;border-radius:999px;background:var(--verde-logo);margin-left:1px;margin-top:-8px}
.logo.peq{font-size:20px}.logo.peq .bola{width:12px;height:12px;margin-top:-6px}

.topo{display:flex;justify-content:space-between;align-items:center}
.data-ev{font-family:Anton,Impact,sans-serif;font-size:18px;color:var(--laranja);letter-spacing:.02em}
.selo{font-size:11px;font-weight:700;letter-spacing:.08em;padding:5px 8px;background:var(--accent);color:#fff}
.sobre{font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--laranja)}
.passo{font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--laranja-esc)}
.escura .passo{color:var(--laranja)}

h1{margin:0;font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:32px;line-height:1.22;letter-spacing:.01em}
h1.grande{font-size:42px}
.lead{margin:0;font-size:16px;line-height:1.5;color:var(--cinza)}
.escura .lead{color:var(--cinza-claro)}

.etapas{display:flex;flex-direction:column;gap:12px}
.etapa{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:14px;background:var(--escuro2);font-size:15px;line-height:1.35}
.etapa b{width:32px;height:32px;flex-shrink:0;border-radius:999px;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:14px}

.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:0 18px;border-radius:14px;border:0;background:var(--accent);color:#fff;font-weight:700;font-size:17px;text-decoration:none;cursor:pointer;width:100%;text-align:center}
.btn:disabled{opacity:.6;cursor:wait}
.btn.branco{background:#fff;color:var(--escuro)}
.btn.contorno{background:#fff;color:var(--accent);border:1px solid var(--accent);min-height:44px;font-size:15px;width:auto}
.link{display:flex;align-items:center;justify-content:center;min-height:44px;font-size:15px;font-weight:500;text-decoration:underline;background:none;border:0;color:inherit;cursor:pointer;width:100%}

.cab{display:flex;align-items:center;gap:12px}
.voltar{width:44px;height:44px;flex-shrink:0;border-radius:12px;background:#fff;border:1px solid var(--borda);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--escuro)}
.escura .voltar{background:var(--escuro2);border:0;color:#fff}

/* formulário */
.campos{display:flex;flex-direction:column;gap:16px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font-size:14px;font-weight:700}
.campo input,.campo textarea,.busca{min-height:52px;padding:0 14px;border-radius:12px;border:1px solid #CFCFCF;background:#fff;font-size:16px;color:var(--escuro);width:100%}
.campo textarea{padding:12px 14px;line-height:1.4;resize:none}
.campo input:focus,.campo textarea:focus,.busca:focus{outline:2px solid var(--accent);outline-offset:1px}
.contador{font-size:12px;color:var(--cinza);align-self:flex-end}
.checks{display:flex;flex-direction:column;gap:12px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.45}
.check input{width:22px;height:22px;margin:0;flex-shrink:0;accent-color:var(--accent)}
.foto-box{display:flex;align-items:center;gap:16px;padding:16px;background:#fff;border:1px solid var(--borda);border-radius:16px}
.foto-prev{width:72px;height:72px;flex-shrink:0;border-radius:999px;border:2px dashed #A9ADB5;display:flex;align-items:center;justify-content:center;overflow:hidden;background-size:cover;background-position:center}
.foto-prev.tem{border:0}
.foto-box .dica{font-size:13px;color:var(--cinza)}
.erro{background:#FDECEA;color:#8A1C12;border:1px solid #F5C2BC;border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.4}
.erro:empty{display:none}

/* mural */
.ola{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500}
.avatar{border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;background-size:cover;background-position:center;overflow:hidden}
.av40{width:40px;height:40px;font-size:14px;background-color:var(--escuro);color:#fff}
.av52{width:52px;height:52px;font-size:17px;background-color:var(--accent-soft);color:var(--accent)}
.av36{width:36px;height:36px;font-size:14px;background-color:var(--accent);color:#fff}
.av48{width:48px;height:48px;font-size:16px}
.av120{width:120px;height:120px;font-family:Anton,Impact,sans-serif;font-size:44px;background-color:var(--accent);color:#fff}
.aviso{display:flex;gap:14px;align-items:center;padding:16px;border-radius:16px;background:var(--escuro);color:#fff;text-decoration:none}
.aviso .ic{width:44px;height:44px;flex-shrink:0;border-radius:12px;background:var(--accent);display:flex;align-items:center;justify-content:center}
.aviso .t1{font-weight:700;font-size:15px}.aviso .t2{font-size:13px;color:#C9CCD3}
.aviso.saiu{background:var(--accent)}.aviso.saiu .ic{background:#fff;color:var(--accent)}
.aviso.saiu .t2{color:#E6F4EA}
.pessoas{display:flex;flex-direction:column;gap:10px}
.pessoa{display:flex;gap:14px;align-items:flex-start;padding:14px;background:#fff;border:1px solid var(--borda);border-radius:16px}
.pessoa .info{display:flex;flex-direction:column;gap:3px;min-width:0}
.pessoa .nm{font-weight:700;font-size:16px}
.pessoa .emp{font-size:14px;font-weight:500;color:var(--accent)}
.pessoa .res{font-size:14px;line-height:1.4;color:var(--cinza);overflow-wrap:anywhere}
.pessoa .ig{font-size:13px;overflow-wrap:anywhere}
.vazio{text-align:center;color:var(--cinza);font-size:14px;padding:18px}
.sub{font-size:15px;color:var(--cinza)}

/* conexão */
.cartao{display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 20px 24px;border-radius:22px;background:#fff;color:var(--escuro);text-align:center}
.cartao .nm{font-family:Anton,Impact,sans-serif;text-transform:uppercase;font-size:24px}
.cartao .emp{font-size:15px;font-weight:700;color:var(--accent)}
.cartao .res{font-size:15px;line-height:1.5;color:var(--cinza);overflow-wrap:anywhere}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--claro);font-size:14px;font-weight:500;text-decoration:none;color:var(--escuro)}
.perg{display:flex;flex-direction:column;gap:10px;padding:18px;background:#fff;border:1px solid var(--borda);border-radius:16px}
.perg .n{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--accent)}
.perg label{font-size:17px;font-weight:700;line-height:1.35}
.perg textarea{padding:12px 14px;border-radius:12px;border:1px solid #CFCFCF;background:#F6F6F6;font-size:16px;line-height:1.4;resize:none;width:100%}
.bonus-linha{display:flex;gap:10px;align-items:center;justify-content:center;font-size:14px;font-weight:600;text-align:center}
.bonus{display:flex;gap:14px;align-items:center;padding:16px;border-radius:16px;background:var(--escuro2);border:1px solid var(--laranja)}
.bonus .ic{width:44px;height:44px;flex-shrink:0;border-radius:12px;background:var(--laranja);display:flex;align-items:center;justify-content:center}
.bonus .t1{font-weight:700;font-size:15px;line-height:1.35}.bonus .t2{font-size:14px;line-height:1.45;color:var(--cinza-claro)}
.check-grande{width:96px;height:96px;border-radius:999px;background:var(--accent);display:flex;align-items:center;justify-content:center}
.centro{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.duo{display:flex;align-items:center;justify-content:center;gap:10px}

/* rodapé */
.siga{display:flex;flex-direction:column;align-items:center;gap:10px}
.siga .t{font-size:13px;font-weight:600;color:var(--cinza-claro)}
.siga .ls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.siga a{display:flex;align-items:center;gap:6px;height:44px;padding:0 14px;border-radius:999px;background:var(--escuro2);color:#fff;font-size:14px;font-weight:600;text-decoration:none}
.credito{text-align:center;font-size:12px;letter-spacing:.04em;color:#B9BDC6}
.credito strong{color:#fff}
.clara .credito{color:var(--cinza)}.clara .credito strong{color:var(--escuro)}
.carregando{display:flex;align-items:center;justify-content:center;min-height:100vh;color:#888;font-size:14px}
body.claro .credito{color:var(--cinza)}body.claro .credito strong{color:var(--escuro)}
.rodape{display:flex;flex-direction:column;align-items:center;gap:8px}
.contato{font-size:13px;font-weight:600;color:var(--cinza-claro);text-decoration:none}
.contato:hover{text-decoration:underline}
.clara .contato{color:var(--cinza)}
/* perguntas: um campo por pessoa (trio) + aviso de salvamento */
.perg .q{font-size:17px;font-weight:700;line-height:1.35}
.quem-resp{display:flex;flex-direction:column;gap:6px}
.quem-resp label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--accent)}
.av24{width:24px;height:24px;font-size:10px;background-color:var(--accent);color:#fff}
.salvo{font-size:13px;color:var(--cinza);text-align:center;min-height:18px}
/* o que a conexão anotou sobre mim */
.sobre-mim{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:16px;background:var(--escuro2);border:1px solid #2E3137}
.sobre-mim .t1{font-weight:700;font-size:15px}
.sobre-mim .bloco{display:flex;flex-direction:column;gap:10px}
.sobre-mim .autor{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--laranja)}
.sobre-mim .q{font-size:13px;color:var(--cinza-claro);line-height:1.4}
.sobre-mim .r{font-size:15px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
/* roda de 3: quem me procura é diferente de quem eu procuro */
.procura{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:16px;background:var(--escuro2);font-size:15px;line-height:1.45;color:var(--cinza-claro)}
.procura b{color:#fff}