body {
 font-family: Arial, sans-serif;
 margin: 0;
 background: #f5f7fa;
}

/* TRANSIÇÕES DE PÁGINA */
.page-enter {
 opacity: 0;
 transform: translateY(12px);
}

.page-enter-active {
 opacity: 1;
 transform: translateY(0);
 transition: opacity 0.35s ease, transform 0.35s ease;
}

.page-exit {
 opacity: 0;
 transform: translateY(-12px);
 transition: opacity 0.3s ease, transform 0.3s ease;
 pointer-events: none;
}

html {
 scroll-behavior: smooth;
}

/* HEADER */
header {
 background: linear-gradient(135deg, #1e3a8a, #2563eb);
 color: white;
 text-align: center;
 padding: 90px 20px;
 position: relative;
 overflow: hidden;
}

header::before {
 content:"";
 position: absolute;
 width: 500px;
 height: 500px;
 background: rgba(255,255,255,0.08);
 border-radius: 50%;
 top: -150px;
 left: -150px;
}

header::after {
 content:"";
 position: absolute;
 width: 400px;
 height: 400px;
 background: rgba(255,255,255,0.05);
 border-radius: 50%;
 bottom: -150px;
 right: -150px;
}

header h1 {
 font-size: 72px;
 font-weight: 700;
 letter-spacing: 2px;
 margin: 0;
}

header p {
 font-size: 20px;
 margin-top: 15px;
 opacity: 0.9;
}

/* NAV */
nav {
 display: grid;
 grid-template-columns: 1fr auto 1fr;
 align-items: center;
 padding: 15px 30px;
 background: white;
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
 position: sticky;
 top: 0;
 z-index: 1000;
}

.nav-links {
 display: flex;
 gap: 20px;
 justify-content: center;
}

.nav-links a {
 text-decoration: none;
 color: #4b5563;
 font-weight: 500;
 font-size: 15px;
 transition: color 0.3s ease;
}

.nav-links a:hover {
 color: #2563eb;
}

.nav-right {
 display: flex;
 justify-content: flex-end;
 align-items: center;
 gap: 20px;
}

/* BARRA DE BUSCA */
.search-bar {
 display: flex;
 align-items: center;
 border: 1.5px solid #e5e7eb;
 border-radius: 10px;
 background: #f9fafb;
 overflow: hidden;
 transition: border-color 0.25s, box-shadow 0.25s;
 height: 38px;
}

.search-bar:focus-within {
 border-color: #2563eb;
 box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
 background: #fff;
}

.search-category {
 display: none;
}

.search-bar input {
 border: none;
 background: transparent;
 padding: 0 14px;
 outline: none;
 font-size: 14px;
 color: #374151;
 width: 160px;
 height: 100%;
}

.search-bar input::placeholder {
 color: #9ca3af;
}

.search-btn {
 background: transparent;
 border: none;
 border-left: 1.5px solid #e5e7eb;
 padding: 0 12px;
 cursor: pointer;
 color: #9ca3af;
 transition: color 0.2s, background 0.2s;
 height: 100%;
 display: flex;
 align-items: center;
 font-size: 15px;
}


.search-btn:hover {
 color: #2563eb;
 background: #eff6ff;
}

/* ÁREA DE USUÁRIO */
#userArea {
 display: flex;
 gap: 10px;
 align-items: center;
}

.btn-login {
 text-decoration: none;
 color: #2563eb;
 background: transparent;
 padding: 8px 18px;
 border-radius: 20px;
 font-weight: 600;
 font-size: 14px;
 transition: 0.3s;
 border: 1px solid transparent;
}

.btn-login:hover {
 background: #eff6ff;
 border-color: #bfdbfe;
}

.btn-cadastro {
 text-decoration: none;
 background: #1e3a8a;
 color: white;
 padding: 8px 20px;
 border-radius: 20px;
 font-weight: 600;
 font-size: 14px;
 transition: 0.3s;
 box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.btn-cadastro:hover {
 background: #2563eb;
 transform: translateY(-2px);
}

/* BOTÕES DE AÇÃO */
.botoes-acao {
 display: flex;
 justify-content: center;
 gap: 25px;
 margin: 50px 0;
}

.btn-primary {
 background: linear-gradient(135deg, #1e3a8a, #2563eb);
 color: white;
 padding: 16px 35px;
 border-radius: 12px;
 text-decoration: none;
 font-weight: 600;
 font-size: 16px;
 letter-spacing: 0.5px;
 box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4);
 transition: all 0.3s ease;
}

.btn-primary:hover {
 transform: translateY(-4px) scale(1.03);
 box-shadow: 0 12px 30px rgba(37, 99, 235, 0.6);
}

.btn-outline {
 border: 2px solid #cbd5f5;
 color: #1e3a8a;
 padding: 16px 35px;
 border-radius: 12px;
 text-decoration: none;
 font-weight: 600;
 font-size: 16px;
 background: white;
 transition: all 0.3s ease;
}

.btn-outline:hover {
 background: #1e3a8a;
 color: white;
 border-color: #1e3a8a;
 transform: translateY(-4px);
 box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* SEÇÕES */
section {
 padding: 40px;
 max-width: 900px;
 margin: auto;
}

section h2 {
 color: #1e3a8a;
 border-bottom: 2px solid #e5e7eb;
 padding-bottom: 10px;
}

.card {
 background: white;
 padding: 20px;
 margin: 10px 0;
 border-radius: 8px;
 box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.destaque-termos {
 color: #2563eb;
 font-weight: bold;
 display: flex;
 align-items: center;
}

/* MODAL */
.modal {
 display: none;
 position: fixed;
 width: 100%;
 height: 100%;
 background: rgba(0,0,0,0.5);
 justify-content: center;
 align-items: center;
 z-index: 2000;
}

.modal-box {
 background: white;
 padding: 30px;
 border-radius: 10px;
 width: 320px;
 text-align: center;
 box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.modal-box h3 {
 margin-top: 0;
 color: #1e3a8a;
}

.modal-box input {
 width: 90%;
 margin: 10px 0;
 padding: 10px;
 border: 1px solid #d1d5db;
 border-radius: 5px;
 outline: none;
}

.modal-box input:focus {
 border-color: #2563eb;
}

.modal-box button {
 width: 96%;
 padding: 10px;
 background: #1e3a8a;
 color: white;
 border: none;
 border-radius: 5px;
 font-weight: bold;
 cursor: pointer;
 margin-top: 10px;
 transition: 0.3s;
}

.modal-box button:hover {
 background: #2563eb;
}

/* COMO FUNCIONA */
#como-funciona {
 padding: 60px 20px;
 text-align: center;
 background: #f9fafb;
 max-width: 100%;
}

#como-funciona h2 {
 font-size: 32px;
 border: none;
}

.subtitulo {
 margin-bottom: 40px;
 color: #555;
 font-size: 18px;
}

.passos {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: 20px;
 max-width: 1000px;
 margin: auto;
}

.passo {
 background: white;
 padding: 30px 20px;
 border-radius: 10px;
 box-shadow: 0 4px 10px rgba(0,0,0,0.08);
 transition: 0.3s;
}

.passo:hover {
 transform: translateY(-5px);
 box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

.passo h3 {
 color: #2563eb;
 margin-bottom: 10px;
}

/* INSTAGRAM */
.btn-instagram {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
 color: white;
 padding: 12px 20px;
 border-radius: 25px;
 text-decoration: none;
 font-weight: bold;
 font-size: 15px;
 box-shadow: 0 4px 10px rgba(0,0,0,0.2);
 transition: 0.3s;
}

.btn-instagram:hover {
 transform: translateY(-3px);
 box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

/* TERMOS DE USO */
.card-termos {
 background: white;
 max-width: 800px;
 margin: 50px auto;
 padding: 40px;
 border-radius: 10px;
 box-shadow: 0 4px 15px rgba(0,0,0,0.05);
 color: #333;
 line-height: 1.6;
}

.card-termos h2 {
 color: #1e3a8a;
 border-bottom: 2px solid #e5e7eb;
 padding-bottom: 10px;
 margin-top: 30px;
 font-size: 28px;
}

.card-termos h2:first-child {
 margin-top: 0;
}

.card-termos h3 {
 color: #2563eb;
 font-size: 20px;
 margin-top: 25px;
}

.card-termos p, .card-termos li {
 font-size: 16px;
 color: #4b5563;
}

.card-termos ul {
 margin-top: 10px;
 padding-left: 20px;
}

.card-termos li {
 margin-bottom: 8px;
}

.termos-acao {
 text-align: center;
 margin-top: 30px;
}

.btn-concordo {
 padding: 12px 25px;
 background: linear-gradient(90deg, #1e3a8a, #2563eb);
 color: white;
 border: none;
 border-radius: 10px;
 font-size: 16px;
 cursor: pointer;
 transition: 0.3s;
}

.btn-concordo:hover {
 transform: translateY(-2px);
 box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.pub-wrap {
 max-width: 700px;
 margin: 2.5rem auto;
 padding: 0 20px 60px;
 font-family: Arial, sans-serif;
}

.pub-header { margin-bottom: 1.5rem; }
.pub-header h2 { font-size: 28px; color: #1e3a8a; margin: 0; }
.pub-header p { font-size: 15px; color: #6b7280; margin-top: 5px; }

.steps {
 display: flex;
 align-items: center;
 gap: 8px;
 margin-bottom: 2rem;
}

.step {
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: 13px;
 color: #9ca3af;
}

.step.active { color: #1e3a8a; font-weight: 600; }

.step-num {
 width: 24px;
 height: 24px;
 border-radius: 50%;
 border: 1px solid #d1d5db;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 12px;
 background: white;
 color: #9ca3af;
 flex-shrink: 0;
}

.step.active .step-num {
 background: #1e3a8a;
 color: white;
 border-color: #1e3a8a;
}

.step-div {
 flex: 1;
 height: 1px;
 background: #e5e7eb;
 max-width: 48px;
}

.preview-bar {
 background: #eff6ff;
 border: 1px solid #bfdbfe;
 border-radius: 10px;
 padding: 12px 18px;
 display: none;
 gap: 20px;
 margin-bottom: 1.5rem;
 flex-wrap: wrap;
}

.preview-item span { font-size: 11px; color: #6b7280; display: block; }
.preview-item strong { font-size: 13px; color: #1e3a8a; font-weight: 600; }

.form-card {
 background: white;
 border-radius: 12px;
 box-shadow: 0 2px 10px rgba(0,0,0,0.06);
 padding: 2rem;
}

.section-label {
 font-size: 11px;
 font-weight: 700;
 color: #9ca3af;
 text-transform: uppercase;
 letter-spacing: 0.08em;
 margin-bottom: 1.2rem;
}

.campo {
 display: flex;
 flex-direction: column;
 gap: 6px;
 margin-bottom: 1.2rem;
}

.campo label { font-size: 14px; font-weight: 600; color: #374151; }
.campo .hint { font-size: 12px; color: #9ca3af; margin: -2px 0 2px; }

.campo input,
.campo textarea,
.campo select {
 width: 100%;
 padding: 10px 14px;
 border: 1px solid #d1d5db;
 border-radius: 8px;
 font-size: 14px;
 background: white;
 color: #374151;
 outline: none;
 transition: border-color 0.2s, box-shadow 0.2s;
 font-family: Arial, sans-serif;
 box-sizing: border-box;
}

.campo input:focus,
.campo textarea:focus,
.campo select:focus {
 border-color: #2563eb;
 box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.campo textarea {
 resize: vertical;
 min-height: 110px;
 line-height: 1.6;
}

.char-count { font-size: 11px; color: #9ca3af; text-align: right; }
.char-count.warn { color: #d97706; }
.char-count.err { color: #dc2626; }

.tags-wrap { display: flex; flex-wrap: wrap; gap: 8px; }

.tag {
 padding: 6px 14px;
 border-radius: 20px;
 border: 1px solid #d1d5db;
 font-size: 13px;
 cursor: pointer;
 background: white;
 color: #6b7280;
 transition: all 0.15s;
 user-select: none;
}

.tag:hover { border-color: #2563eb; color: #2563eb; }
.tag.selected { background: #1e3a8a; border-color: #1e3a8a; color: white; }

.grid-2 {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 1rem;
}

.orcamento-wrap { position: relative; }

.orcamento-wrap .prefix {
 position: absolute;
 left: 14px;
 top: 50%;
 transform: translateY(-50%);
 font-size: 14px;
 color: #9ca3af;
 pointer-events: none;
}

.orcamento-wrap input { padding-left: 36px !important; }

.prazo-opcoes {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 8px;
}

.prazo-btn {
 padding: 10px 4px;
 border: 1px solid #d1d5db;
 border-radius: 8px;
 font-size: 12px;
 cursor: pointer;
 background: white;
 color: #6b7280;
 text-align: center;
 transition: all 0.15s;
 user-select: none;
}

.prazo-btn:hover { border-color: #2563eb; color: #2563eb; }
.prazo-btn.selected { background: #1e3a8a; border-color: #1e3a8a; color: white; }

.urgencia-wrap { display: flex; gap: 10px; }

.urgencia-opt {
 flex: 1;
 border: 1px solid #d1d5db;
 border-radius: 8px;
 padding: 12px 10px;
 cursor: pointer;
 text-align: center;
 transition: all 0.15s;
 user-select: none;
}

.urgencia-opt:hover { border-color: #2563eb; }
.urgencia-opt.selected { border-color: #1e3a8a; background: #eff6ff; }
.urgencia-opt .urg-icon { font-size: 18px; display: block; margin-bottom: 5px; }
.urgencia-opt .urg-label { font-size: 13px; font-weight: 600; color: #374151; }
.urgencia-opt .urg-sub { font-size: 11px; color: #9ca3af; }

hr.divider { border: none; border-top: 1px solid #f3f4f6; margin: 1.5rem 0; }

.footer-actions {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-top: 1.5rem;
}

.btn-cancelar {
 font-size: 14px;
 color: #9ca3af;
 background: none;
 border: none;
 cursor: pointer;
 font-family: Arial, sans-serif;
}

.btn-cancelar:hover { color: #374151; }

.btn-publicar-main {
 background: linear-gradient(135deg, #1e3a8a, #2563eb);
 color: white;
 border: none;
 padding: 12px 32px;
 border-radius: 10px;
 font-size: 15px;
 font-weight: 600;
 cursor: pointer;
 font-family: Arial, sans-serif;
 transition: all 0.3s;
 box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.btn-publicar-main:hover {
 transform: translateY(-2px);
 box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4);
}

@media (max-width: 600px) {
 .grid-2 { grid-template-columns: 1fr; }
 .prazo-opcoes { grid-template-columns: repeat(2, 1fr); }
 .urgencia-wrap { flex-direction: column; }
}

/* FOOTER */
footer {
 background: #1e3a8a;
 color: white;
 text-align: center;
 padding: 20px;
 margin-top: 20px;
}

/* RESPONSIVIDADE */
@media (max-width: 1150px) {
 nav {
 grid-template-columns: 1fr;
 gap: 15px;
 padding: 15px;
 }
 .nav-links, .nav-right {
 justify-content: center;
 flex-wrap: wrap;
 }
}

.cadastro-wrap {
 max-width: 600px;
 margin: 50px auto 70px;
 padding: 0 20px;
}
 
/* CABEÇALHO — igual às seções do site */
.cadastro-wrap > h2 {
 color: #1e3a8a;
 border-bottom: 2px solid #e5e7eb;
 padding-bottom: 10px;
 font-size: 24px;
 margin-bottom: 20px;
}
 
/* CARD — igual ao .card do site */
.cadastro-card {
 background: white;
 padding: 30px;
 border-radius: 8px;
 box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
 
/* TIPO DE PERFIL */
.tipo-perfil {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 12px;
 margin-bottom: 24px;
}
 
.tipo-btn {
 border: 2px solid #cbd5f5;
 border-radius: 8px;
 padding: 16px 12px;
 text-align: center;
 cursor: pointer;
 transition: all 0.3s ease;
 background: white;
 user-select: none;
}
 
.tipo-btn:hover {
 background: #eff6ff;
 border-color: #bfdbfe;
 transform: translateY(-2px);
 box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
 
.tipo-btn.ativo {
 background: #1e3a8a;
 border-color: #1e3a8a;
 box-shadow: 0 4px 10px rgba(30,58,138,0.25);
}
 
.tipo-btn .tipo-icone {
 font-size: 24px;
 margin-bottom: 6px;
}
 
.tipo-btn .tipo-nome {
 font-size: 15px;
 font-weight: 600;
 color: #1e3a8a;
}
 
.tipo-btn.ativo .tipo-nome {
 color: white;
}
 
.tipo-btn .tipo-sub {
 font-size: 12px;
 color: #6b7280;
 margin-top: 3px;
}
 
.tipo-btn.ativo .tipo-sub {
 color: rgba(255,255,255,0.8);
}
 
/* SEPARADOR */
.sep {
 border: none;
 border-top: 2px solid #e5e7eb;
 margin: 20px 0;
}
 
/* CAMPO */
.campo {
 display: flex;
 flex-direction: column;
 gap: 6px;
 margin-bottom: 16px;
}
 
.campo label {
 font-size: 14px;
 font-weight: 600;
 color: #374151;
 display: flex;
 align-items: center;
 gap: 5px;
}
 
.campo label .obrig {
 color: #2563eb;
 font-weight: 700;
}
 
.campo input,
.campo select {
 width: 100%;
 padding: 10px 14px;
 border: 1px solid #d1d5db;
 border-radius: 5px;
 font-size: 14px;
 color: #374151;
 background: white;
 outline: none;
 transition: border-color 0.3s;
 box-sizing: border-box;
 font-family: Arial, sans-serif;
}
 
.campo input:focus,
.campo select:focus {
 border-color: #2563eb;
 box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
}
 
.campo input.erro { border-color: #ef4444; }
.campo input.ok { border-color: #22c55e; }
 
/* MENSAGEM ABAIXO DO CAMPO */
.campo .msg {
 font-size: 12px;
 min-height: 15px;
}
 
.campo .msg.erro { color: #dc2626; }
.campo .msg.ok { color: #16a34a; }
.campo .msg.dica { color: #9ca3af; }
 
/* GRID 2 COLUNAS */
.grid-2 {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 14px;
}
 
/* CAMPO SENHA COM ÍCONE OLHO */
.senha-wrap {
 position: relative;
}
 
.senha-wrap input {
 padding-right: 44px;
}
 
.btn-olho {
 position: absolute;
 right: 10px;
 top: 50%;
 transform: translateY(-50%);
 background: none;
 border: none;
 cursor: pointer;
 font-size: 16px;
 color: #9ca3af;
 padding: 0;
 line-height: 1;
 transition: color 0.3s;
}
 
.btn-olho:hover { color: #2563eb; }
 
/* FORÇA DA SENHA */
.forca-wrap { margin-top: 6px; }
 
.forca-barras {
 display: flex;
 gap: 4px;
 margin-bottom: 4px;
}
 
.forca-barra {
 flex: 1;
 height: 4px;
 border-radius: 2px;
 background: #e5e7eb;
 transition: background 0.3s;
}
 
.forca-barra.fraca { background: #ef4444; }
.forca-barra.media { background: #f59e0b; }
.forca-barra.forte { background: #22c55e; }
 
.forca-label {
 font-size: 12px;
 color: #6b7280;
}
 
/* CHECKBOX TERMOS */
.campo-check {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 margin-bottom: 20px;
}
 
.campo-check input[type="checkbox"] {
 width: 16px;
 height: 16px;
 margin-top: 3px;
 cursor: pointer;
 accent-color: #1e3a8a;
 flex-shrink: 0;
}
 
.campo-check span {
 font-size: 14px;
 color: #4b5563;
 line-height: 1.5;
}
 
.campo-check span a {
 color: #2563eb;
 font-weight: 600;
 text-decoration: none;
}
 
.campo-check span a:hover { text-decoration: underline; }
 
/* BOTÃO PRINCIPAL — mesmo padrão do .btn-primary do site */
.btn-cadastrar {
 width: 100%;
 padding: 16px;
 background: linear-gradient(135deg, #1e3a8a, #2563eb);
 color: white;
 border: none;
 border-radius: 12px;
 font-size: 16px;
 font-weight: 600;
 letter-spacing: 0.5px;
 cursor: pointer;
 transition: all 0.3s ease;
 box-shadow: 0 8px 20px rgba(37,99,235,0.4);
 font-family: Arial, sans-serif;
}
 
.btn-cadastrar:hover {
 transform: translateY(-4px) scale(1.02);
 box-shadow: 0 12px 30px rgba(37,99,235,0.6);
}
 
/* LINK LOGIN */
.link-login {
 text-align: center;
 margin-top: 16px;
 font-size: 14px;
 color: #6b7280;
}
 
.link-login a {
 color: #2563eb;
 font-weight: 600;
 text-decoration: none;
}
 
.link-login a:hover { text-decoration: underline; }
 
/* TOOLTIP */
.label-info {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 16px;
 height: 16px;
 background: #eff6ff;
 color: #2563eb;
 border-radius: 50%;
 font-size: 10px;
 font-weight: 700;
 cursor: default;
 border: 1px solid #bfdbfe;
 position: relative;
}
 
.label-info:hover::after {
 content: attr(data-tip);
 position: absolute;
 left: 22px;
 top: -4px;
 background: #1e3a8a;
 color: white;
 font-size: 11px;
 padding: 5px 10px;
 border-radius: 5px;
 white-space: nowrap;
 font-weight: 400;
 z-index: 10;
 pointer-events: none;
}
 
/* TELA DE SUCESSO */
.sucesso-box {
 display: none;
}
 
.sucesso-box.ativo { display: block; }
 
.sucesso-card {
 background: white;
 padding: 40px 30px;
 border-radius: 8px;
 box-shadow: 0 2px 4px rgba(0,0,0,0.05);
 text-align: center;
}
 
.sucesso-icone {
 font-size: 50px;
 margin-bottom: 16px;
}
 
.sucesso-card h3 {
 font-size: 24px;
 color: #1e3a8a;
 margin: 0 0 10px;
 border-bottom: 2px solid #e5e7eb;
 padding-bottom: 10px;
}
 
.sucesso-card p {
 color: #4b5563;
 font-size: 16px;
 margin: 0 0 28px;
 line-height: 1.6;
}
 
/* RESPONSIVIDADE */
@media (max-width: 540px) {
 .grid-2 { grid-template-columns: 1fr; }
 .tipo-perfil { grid-template-columns: 1fr 1fr; }
 .cadastro-card { padding: 20px; }
}

/* WRAPPER */
.login-wrap {
 max-width: 480px;
 margin: 50px auto 70px;
 padding: 0 20px;
}
 
/* TÍTULO — igual às seções do site */
.login-wrap > h2 {
 color: #1e3a8a;
 border-bottom: 2px solid #e5e7eb;
 padding-bottom: 10px;
 font-size: 24px;
 margin-bottom: 20px;
}
 
/* CARD — igual ao .card do site */
.login-card {
 background: white;
 padding: 30px;
 border-radius: 8px;
 box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
 
/* CAMPO */
.campo {
 display: flex;
 flex-direction: column;
 gap: 6px;
 margin-bottom: 18px;
}
 
.campo label {
 font-size: 14px;
 font-weight: 600;
 color: #374151;
 display: flex;
 align-items: center;
 justify-content: space-between;
}
 
.campo label a {
 font-size: 12px;
 font-weight: 500;
 color: #2563eb;
 text-decoration: none;
}
 
.campo label a:hover { text-decoration: underline; }
 
.campo input {
 width: 100%;
 padding: 10px 14px;
 border: 1px solid #d1d5db;
 border-radius: 5px;
 font-size: 14px;
 color: #374151;
 background: white;
 outline: none;
 transition: border-color 0.3s;
 box-sizing: border-box;
 font-family: Arial, sans-serif;
}
 
.campo input:focus {
 border-color: #2563eb;
 box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
}
 
.campo input.erro { border-color: #ef4444; }
 
/* MENSAGEM DE ERRO */
.campo .msg {
 font-size: 12px;
 min-height: 15px;
}
 
.campo .msg.erro { color: #dc2626; }
.campo .msg.ok { color: #16a34a; }
 
/* CAMPO SENHA COM OLHO */
.senha-wrap { position: relative; }
 
.senha-wrap input { padding-right: 44px; }
 
.btn-olho {
 position: absolute;
 right: 10px;
 top: 50%;
 transform: translateY(-50%);
 background: none;
 border: none;
 cursor: pointer;
 font-size: 16px;
 color: #9ca3af;
 padding: 0;
 line-height: 1;
 transition: color 0.3s;
}
 
.btn-olho:hover { color: #2563eb; }
 
/* SEPARADOR */
.sep {
 border: none;
 border-top: 2px solid #e5e7eb;
 margin: 20px 0;
}
 
/* LEMBRAR */
.campo-check {
 display: flex;
 align-items: center;
 gap: 8px;
 margin-bottom: 20px;
}
 
.campo-check input[type="checkbox"] {
 width: 15px;
 height: 15px;
 cursor: pointer;
 accent-color: #1e3a8a;
 flex-shrink: 0;
}
 
.campo-check span {
 font-size: 14px;
 color: #4b5563;
}
 
/* BOTÃO ENTRAR — igual ao .btn-primary do site */
.btn-entrar {
 width: 100%;
 padding: 16px;
 background: linear-gradient(135deg, #1e3a8a, #2563eb);
 color: white;
 border: none;
 border-radius: 12px;
 font-size: 16px;
 font-weight: 600;
 letter-spacing: 0.5px;
 cursor: pointer;
 transition: all 0.3s ease;
 box-shadow: 0 8px 20px rgba(37,99,235,0.4);
 font-family: Arial, sans-serif;
}
 
.btn-entrar:hover {
 transform: translateY(-4px) scale(1.02);
 box-shadow: 0 12px 30px rgba(37,99,235,0.6);
}
 
/* ALERTA DE ERRO DE LOGIN */
.alerta-erro {
 background: #fef2f2;
 border: 1px solid #fecaca;
 border-radius: 5px;
 padding: 10px 14px;
 font-size: 14px;
 color: #dc2626;
 margin-bottom: 18px;
 display: none;
}
 
.alerta-erro.visivel { display: block; }
 
/* LINKS RODAPÉ DO CARD */
.link-cadastro {
 text-align: center;
 margin-top: 16px;
 font-size: 14px;
 color: #6b7280;
}
 
.link-cadastro a {
 color: #2563eb;
 font-weight: 600;
 text-decoration: none;
}
 
.link-cadastro a:hover { text-decoration: underline; }
 
/* TELA DE SUCESSO */
.sucesso-box { display: none; }
.sucesso-box.ativo { display: block; }
 
.sucesso-card {
 background: white;
 padding: 40px 30px;
 border-radius: 8px;
 box-shadow: 0 2px 4px rgba(0,0,0,0.05);
 text-align: center;
}
 
.sucesso-icone { font-size: 50px; margin-bottom: 16px; }
 
.sucesso-card h3 {
 font-size: 24px;
 color: #1e3a8a;
 margin: 0 0 10px;
 border-bottom: 2px solid #e5e7eb;
 padding-bottom: 10px;
}
 
.sucesso-card p {
 color: #4b5563;
 font-size: 16px;
 margin: 0 0 28px;
 line-height: 1.6;
}
 
/* RESPONSIVIDADE */
@media (max-width: 540px) {
 .login-card { padding: 20px; }
}

/* HERO */
.trabalhos-hero {
 background: linear-gradient(135deg, #1e3a8a, #2563eb);
 color: white;
 text-align: center;
 padding: 50px 20px 40px;
 position: relative;
 overflow: hidden;
}

.trabalhos-hero::before {
 content:"";
 position: absolute;
 width: 350px; height: 350px;
 background: rgba(255,255,255,0.05);
 border-radius: 50%;
 top: -120px; left: -80px;
}

.trabalhos-hero h2 {
 font-size: 32px;
 font-weight: 700;
 margin: 0 0 8px;
 position: relative;
 z-index: 1;
}

.trabalhos-hero > p {
 font-size: 16px;
 opacity: 0.88;
 margin: 0 0 24px;
 position: relative;
 z-index: 1;
}

.hero-busca {
 display: flex;
 max-width: 600px;
 margin: 0 auto 20px;
 border-radius: 8px;
 overflow: hidden;
 box-shadow: 0 4px 16px rgba(0,0,0,0.2);
 position: relative;
 z-index: 1;
}

.hero-busca input {
 flex: 1;
 padding: 14px 18px;
 border: none;
 font-size: 15px;
 outline: none;
 font-family: Arial, sans-serif;
 color: #111827;
}

.hero-busca button {
 padding: 14px 24px;
 background: #111827;
 color: white;
 border: none;
 font-size: 15px;
 font-weight: 600;
 cursor: pointer;
 font-family: Arial, sans-serif;
 transition: 0.2s;
}

.hero-busca button:hover { background: #374151; }

.hero-stats {
 display: flex;
 justify-content: center;
 gap: 28px;
 font-size: 14px;
 opacity: 0.9;
 flex-wrap: wrap;
 position: relative;
 z-index: 1;
}

.hero-stats strong { color: white; }

/* LAYOUT PRINCIPAL */
.trabalhos-wrap {
 display: grid;
 grid-template-columns: 240px 1fr;
 gap: 24px;
 max-width: 1100px;
 margin: 36px auto 60px;
 padding: 0 20px;
 align-items: start;
}

/* FILTROS */
.filtros-lateral {
 background: white;
 border-radius: 8px;
 box-shadow: 0 2px 4px rgba(0,0,0,0.05);
 padding: 20px;
 position: sticky;
 top: 80px;
}

.filtros-lateral h3 {
 color: #1e3a8a;
 font-size: 16px;
 margin: 0 0 16px;
 border-bottom: 2px solid #e5e7eb;
 padding-bottom: 10px;
}

.filtro-grupo {
 margin-bottom: 20px;
}

.filtro-titulo {
 font-size: 13px;
 font-weight: 700;
 color: #374151;
 display: block;
 margin-bottom: 10px;
 text-transform: uppercase;
 letter-spacing: 0.05em;
}

.filtro-opcoes {
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.filtro-opcoes label {
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: 14px;
 color: #4b5563;
 cursor: pointer;
 transition: color 0.2s;
}

.filtro-opcoes label:hover { color: #1e3a8a; }

.filtro-opcoes input[type=checkbox],
.filtro-opcoes input[type=radio] {
 accent-color: #1e3a8a;
 width: 15px;
 height: 15px;
 cursor: pointer;
 flex-shrink: 0;
}

.btn-limpar {
 width: 100%;
 padding: 9px;
 background: white;
 border: 1.5px solid #d1d5db;
 border-radius: 8px;
 color: #4b5563;
 font-size: 13px;
 font-weight: 600;
 cursor: pointer;
 transition: 0.2s;
 font-family: Arial, sans-serif;
 margin-top: 4px;
}

.btn-limpar:hover {
 border-color: #1e3a8a;
 color: #1e3a8a;
}

/* ÁREA DE PROJETOS */
.projetos-area { min-width: 0; }

.projetos-topo {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 16px;
 font-size: 14px;
 color: #6b7280;
}

.projetos-topo select {
 padding: 7px 12px;
 border: 1px solid #d1d5db;
 border-radius: 6px;
 font-size: 14px;
 color: #374151;
 outline: none;
 cursor: pointer;
 background: white;
 font-family: Arial, sans-serif;
}

/* CARD DE PROJETO */
.projeto-card {
 background: white;
 border-radius: 8px;
 box-shadow: 0 2px 4px rgba(0,0,0,0.05);
 padding: 20px;
 margin-bottom: 14px;
 cursor: pointer;
 transition: all 0.25s ease;
 border: 1.5px solid transparent;
}

.projeto-card:hover {
 transform: translateY(-3px);
 box-shadow: 0 6px 16px rgba(0,0,0,0.08);
 border-color: #bfdbfe;
}

.projeto-topo {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 10px;
}

.projeto-categoria {
 font-size: 12px;
 font-weight: 700;
 color: #2563eb;
 background: #eff6ff;
 padding: 4px 10px;
 border-radius: 20px;
 border: 1px solid #bfdbfe;
}

.projeto-urg {
 font-size: 12px;
 font-weight: 600;
 padding: 4px 10px;
 border-radius: 20px;
}

.urg-alta { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.urg-normal{ background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.urg-baixa { background: #f9fafb; color: #6b7280; border: 1px solid #e5e7eb; }

.projeto-titulo {
 font-size: 16px;
 font-weight: 700;
 color: #111827;
 margin: 0 0 8px;
 line-height: 1.4;
}

.projeto-desc {
 font-size: 14px;
 color: #6b7280;
 margin: 0 0 14px;
 line-height: 1.55;
}

.projeto-info {
 display: flex;
 flex-wrap: wrap;
 gap: 14px;
 margin-bottom: 14px;
}

.info-item {
 font-size: 13px;
 color: #4b5563;
 font-weight: 500;
}

.projeto-rodape {
 display: flex;
 justify-content: space-between;
 align-items: center;
 border-top: 1px solid #f3f4f6;
 padding-top: 12px;
}

.contratante {
 font-size: 13px;
 color: #6b7280;
}

.btn-ver {
 background: linear-gradient(135deg, #1e3a8a, #2563eb);
 color: white;
 border: none;
 padding: 8px 20px;
 border-radius: 20px;
 font-size: 13px;
 font-weight: 600;
 cursor: pointer;
 transition: 0.3s;
 font-family: Arial, sans-serif;
 box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}

.btn-ver:hover {
 transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(37,99,235,0.45);
}

/* SEM RESULTADOS */
.sem-resultados {
 text-align: center;
 padding: 60px 20px;
 color: #6b7280;
 background: white;
 border-radius: 8px;
 box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.sem-resultados h3 { color: #1e3a8a; margin: 0 0 8px; }
.sem-resultados p { margin: 0 0 20px; }

/* MODAL CANDIDATURA */
.modal-overlay {
 display: none;
 position: fixed;
 inset: 0;
 background: rgba(0,0,0,0.5);
 z-index: 2000;
 justify-content: center;
 align-items: center;
 padding: 20px;
}

.modal-candidatura {
 background: white;
 border-radius: 12px;
 padding: 32px;
 width: 100%;
 max-width: 560px;
 max-height: 90vh;
 overflow-y: auto;
 position: relative;
 box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.modal-fechar {
 position: absolute;
 top: 16px;
 right: 16px;
 background: #f3f4f6;
 border: none;
 width: 32px;
 height: 32px;
 border-radius: 50%;
 font-size: 14px;
 cursor: pointer;
 color: #4b5563;
 transition: 0.2s;
}

.modal-fechar:hover { background: #e5e7eb; color: #111827; }

.modal-cat {
 font-size: 13px;
 font-weight: 600;
 color: #2563eb;
 margin-bottom: 8px;
}

.modal-titulo {
 font-size: 20px;
 font-weight: 700;
 color: #111827;
 margin: 0 0 12px;
 line-height: 1.4;
}

.modal-desc {
 font-size: 14px;
 color: #4b5563;
 line-height: 1.6;
 margin: 0 0 16px;
}

.modal-detalhes {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 10px;
 margin-bottom: 4px;
}

.detalhe-item {
 background: #f9fafb;
 border: 1px solid #e5e7eb;
 border-radius: 6px;
 padding: 10px 12px;
}

.detalhe-item span {
 display: block;
 font-size: 11px;
 color: #9ca3af;
 margin-bottom: 3px;
}

.detalhe-item strong {
 font-size: 14px;
 color: #111827;
}

.sep {
 border: none;
 border-top: 2px solid #e5e7eb;
 margin: 20px 0;
}

.modal-candidatura h4 {
 font-size: 16px;
 color: #1e3a8a;
 margin: 0 0 16px;
}

.campo-modal {
 display: flex;
 flex-direction: column;
 gap: 6px;
 margin-bottom: 14px;
}

.campo-modal label {
 font-size: 13px;
 font-weight: 600;
 color: #374151;
}

.campo-modal input,
.campo-modal textarea {
 padding: 10px 14px;
 border: 1px solid #d1d5db;
 border-radius: 5px;
 font-size: 14px;
 outline: none;
 transition: border-color 0.2s;
 font-family: Arial, sans-serif;
 color: #374151;
}

.campo-modal input:focus,
.campo-modal textarea:focus {
 border-color: #2563eb;
 box-shadow: 0 0 0 2px rgba(37,99,235,0.1);
}

.campo-modal textarea {
 min-height: 100px;
 resize: vertical;
}

.btn-candidatar-enviar {
 width: 100%;
 padding: 14px;
 background: linear-gradient(135deg, #1e3a8a, #2563eb);
 color: white;
 border: none;
 border-radius: 10px;
 font-size: 15px;
 font-weight: 700;
 cursor: pointer;
 transition: 0.3s;
 box-shadow: 0 4px 14px rgba(37,99,235,0.35);
 font-family: Arial, sans-serif;
 margin-top: 4px;
}

.btn-candidatar-enviar:hover {
 transform: translateY(-2px);
 box-shadow: 0 8px 20px rgba(37,99,235,0.5);
}

/* RESPONSIVIDADE */
@media (max-width: 768px) {
 .trabalhos-wrap {
 grid-template-columns: 1fr;
 }

 .filtros-lateral {
 position: static;
 }

 .modal-detalhes {
 grid-template-columns: 1fr;
 }

 .hero-stats {
 gap: 14px;
 font-size: 13px;
 }
}

/* WRAPPER */
.recuperar-wrap {
 max-width: 480px;
 margin: 50px auto 70px;
 padding: 0 20px;
}

.recuperar-wrap > div > h2 {
 color: #1e3a8a;
 border-bottom: 2px solid #e5e7eb;
 padding-bottom: 10px;
 font-size: 24px;
 margin-bottom: 20px;
}

/* CARD */
.recuperar-card {
 background: white;
 padding: 32px 30px;
 border-radius: 8px;
 box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.recuperar-icone {
 font-size: 44px;
 text-align: center;
 margin-bottom: 16px;
}

.recuperar-desc {
 font-size: 15px;
 color: #4b5563;
 text-align: center;
 line-height: 1.6;
 margin: 0 0 24px;
}

.email-mascarado {
 text-align: center;
 font-size: 15px;
 font-weight: 700;
 color: #1e3a8a;
 background: #eff6ff;
 border: 1px solid #bfdbfe;
 border-radius: 6px;
 padding: 10px;
 margin-bottom: 20px;
}

/* CAMPOS */
.campo {
 display: flex;
 flex-direction: column;
 gap: 6px;
 margin-bottom: 18px;
}

.campo label {
 font-size: 14px;
 font-weight: 600;
 color: #374151;
}

.campo input {
 width: 100%;
 padding: 10px 14px;
 border: 1px solid #d1d5db;
 border-radius: 5px;
 font-size: 14px;
 color: #374151;
 outline: none;
 transition: border-color 0.3s;
 box-sizing: border-box;
 font-family: Arial, sans-serif;
}

.campo input:focus {
 border-color: #2563eb;
 box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
}

.campo input.erro { border-color: #ef4444; }
.campo input.ok { border-color: #22c55e; }

.campo .msg { font-size: 12px; min-height: 15px; }
.campo .msg.erro { color: #dc2626; }
.campo .msg.ok { color: #16a34a; }
.campo .msg.dica { color: #9ca3af; }

/* CÓDIGO 6 DÍGITOS */
.codigo-wrap {
 display: flex;
 gap: 10px;
 justify-content: center;
 margin: 8px 0;
}

.cod-input {
 width: 46px !important;
 height: 54px;
 text-align: center;
 font-size: 22px;
 font-weight: 700;
 border: 1.5px solid #d1d5db !important;
 border-radius: 8px !important;
 padding: 0 !important;
 color: #1e3a8a;
 transition: border-color 0.2s;
}

.cod-input:focus {
 border-color: #2563eb !important;
 box-shadow: 0 0 0 3px rgba(37,99,235,0.15) !important;
}

/* SENHA COM OLHO */
.senha-wrap { position: relative; }
.senha-wrap input { padding-right: 44px; }

.btn-olho {
 position: absolute;
 right: 10px;
 top: 50%;
 transform: translateY(-50%);
 background: none;
 border: none;
 cursor: pointer;
 font-size: 16px;
 color: #9ca3af;
 padding: 0;
 line-height: 1;
 transition: color 0.3s;
}

.btn-olho:hover { color: #2563eb; }

/* FORÇA DA SENHA */
.forca-wrap { margin-top: 6px; }

.forca-barras {
 display: flex;
 gap: 4px;
 margin-bottom: 4px;
}

.forca-barra {
 flex: 1;
 height: 4px;
 border-radius: 2px;
 background: #e5e7eb;
 transition: background 0.3s;
}

.forca-barra.fraca { background: #ef4444; }
.forca-barra.media { background: #f59e0b; }
.forca-barra.forte { background: #22c55e; }

.forca-label { font-size: 12px; color: #6b7280; }

/* REENVIAR */
.reenviar {
 text-align: center;
 font-size: 13px;
 color: #6b7280;
 margin-bottom: 16px;
}

.reenviar a {
 color: #2563eb;
 font-weight: 600;
 text-decoration: none;
}

.reenviar a:hover { text-decoration: underline; }

/* BOTÃO PRINCIPAL */
.btn-recuperar {
 width: 100%;
 padding: 14px;
 background: linear-gradient(135deg, #1e3a8a, #2563eb);
 color: white;
 border: none;
 border-radius: 12px;
 font-size: 16px;
 font-weight: 600;
 letter-spacing: 0.5px;
 cursor: pointer;
 transition: all 0.3s ease;
 box-shadow: 0 8px 20px rgba(37,99,235,0.4);
 font-family: Arial, sans-serif;
 box-sizing: border-box;
 text-align: center;
}

.btn-recuperar:hover {
 transform: translateY(-3px) scale(1.02);
 box-shadow: 0 12px 28px rgba(37,99,235,0.55);
}

/* VOLTAR */
.link-voltar {
 text-align: center;
 margin-top: 14px;
 font-size: 14px;
}

.link-voltar a {
 color: #6b7280;
 text-decoration: none;
 font-weight: 500;
}

.link-voltar a:hover { color: #1e3a8a; text-decoration: underline; }

{ box-sizing: border-box; }

.match-page {
 min-height: 100vh;
 background: #f5f7fa;
 padding: 40px 20px 80px;
}

.match-header {
 text-align: center;
 margin-bottom: 36px;
}

.match-header h2 {
 font-size: 32px;
 color: #1e3a8a;
 margin: 0 0 8px;
 font-weight: 700;
}

.match-header p {
 color: #6b7280;
 font-size: 16px;
 margin: 0;
}

.mode-toggle {
 display: flex;
 justify-content: center;
 gap: 0;
 margin-bottom: 40px;
}

.mode-btn {
 padding: 12px 32px;
 border: 2px solid #2563eb;
 background: white;
 color: #2563eb;
 font-size: 15px;
 font-weight: 600;
 cursor: pointer;
 transition: all 0.2s;
}

.mode-btn:first-child { border-radius: 25px 0 0 25px; }
.mode-btn:last-child { border-radius: 0 25px 25px 0; border-left: none; }

.mode-btn.active {
 background: #2563eb;
 color: white;
}

/* CARD STACK */
.card-arena {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 24px;
}

.stack-wrap {
 position: relative;
 width: 380px;
 height: 520px;
}

.match-card {
 position: absolute;
 width: 380px;
 background: white;
 border-radius: 20px;
 box-shadow: 0 8px 32px rgba(30,58,138,0.12);
 overflow: hidden;
 cursor: grab;
 user-select: none;
 transition: transform 0.15s ease, box-shadow 0.15s ease;
 top: 0; left: 0;
}

.match-card:active { cursor: grabbing; }

.match-card.card-back-1 {
 transform: rotate(2deg) translateY(6px) scale(0.97);
 z-index: 1;
}

.match-card.card-back-2 {
 transform: rotate(-1.5deg) translateY(12px) scale(0.94);
 z-index: 0;
}

.match-card.card-top {
 z-index: 2;
 transform: rotate(0deg) translateY(0px) scale(1);
}

.match-card.flying-right {
 transition: transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.45s;
 transform: translateX(130%) rotate(20deg) !important;
 opacity: 0;
}

.match-card.flying-left {
 transition: transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.45s;
 transform: translateX(-130%) rotate(-20deg) !important;
 opacity: 0;
}

/* STAMP */
.stamp {
 position: absolute;
 top: 28px;
 font-size: 26px;
 font-weight: 900;
 letter-spacing: 2px;
 padding: 6px 18px;
 border-radius: 8px;
 border-width: 4px;
 border-style: solid;
 opacity: 0;
 z-index: 10;
 pointer-events: none;
 transition: opacity 0.1s;
 transform: rotate(-15deg);
}

.stamp.aceitar {
 left: 18px;
 color: #16a34a;
 border-color: #16a34a;
 background: rgba(22,163,74,0.07);
}

.stamp.recusar {
 right: 18px;
 color: #dc2626;
 border-color: #dc2626;
 background: rgba(220,38,38,0.07);
 transform: rotate(15deg);
}

/* CARD CONTENT */
.card-banner {
 height: 140px;
 background: linear-gradient(135deg, #1e3a8a, #2563eb);
 position: relative;
 display: flex;
 align-items: flex-end;
 padding: 16px;
}

.card-banner .category-badge {
 background: rgba(255,255,255,0.2);
 color: white;
 font-size: 12px;
 font-weight: 600;
 padding: 4px 12px;
 border-radius: 20px;
 text-transform: uppercase;
 letter-spacing: 1px;
}

.card-avatar {
 position: absolute;
 right: 20px;
 bottom: -28px;
 width: 60px;
 height: 60px;
 border-radius: 50%;
 background: white;
 border: 3px solid white;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 24px;
 box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.card-body {
 padding: 36px 20px 20px;
}

.card-title {
 font-size: 20px;
 font-weight: 700;
 color: #1e3a8a;
 margin: 0 0 4px;
}

.card-sub {
 font-size: 13px;
 color: #6b7280;
 margin: 0 0 16px;
}

.card-desc {
 font-size: 14px;
 color: #374151;
 line-height: 1.6;
 margin: 0 0 16px;
}

.card-tags {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
 margin-bottom: 16px;
}

.ctag {
 background: #eff6ff;
 color: #2563eb;
 font-size: 12px;
 font-weight: 600;
 padding: 4px 10px;
 border-radius: 20px;
}

.card-meta {
 display: flex;
 justify-content: space-between;
 border-top: 1px solid #f3f4f6;
 padding-top: 14px;
}

.meta-item {
 text-align: center;
}

.meta-label {
 font-size: 11px;
 color: #9ca3af;
 text-transform: uppercase;
 letter-spacing: 0.5px;
}

.meta-val {
 font-size: 15px;
 font-weight: 700;
 color: #1e3a8a;
}

/* MATCH SCORE BAR */
.match-score {
 display: flex;
 align-items: center;
 gap: 10px;
 margin-bottom: 14px;
}

.match-score-label {
 font-size: 12px;
 color: #6b7280;
 white-space: nowrap;
}

.match-bar {
 flex: 1;
 height: 6px;
 background: #e5e7eb;
 border-radius: 3px;
 overflow: hidden;
}

.match-fill {
 height: 100%;
 border-radius: 3px;
 background: linear-gradient(90deg, #2563eb, #16a34a);
 transition: width 0.5s;
}

.match-pct {
 font-size: 13px;
 font-weight: 700;
 color: #16a34a;
}

/* BUTTONS */
.action-btns {
 display: flex;
 gap: 20px;
 align-items: center;
}

.btn-recusar {
 width: 62px;
 height: 62px;
 border-radius: 50%;
 border: 2.5px solid #fca5a5;
 background: white;
 color: #dc2626;
 font-size: 28px;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all 0.2s;
 box-shadow: 0 4px 16px rgba(220,38,38,0.15);
}

.btn-recusar:hover {
 background: #dc2626;
 color: white;
 border-color: #dc2626;
 transform: scale(1.08);
}

.btn-aceitar {
 width: 72px;
 height: 72px;
 border-radius: 50%;
 border: 2.5px solid #86efac;
 background: white;
 color: #16a34a;
 font-size: 34px;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all 0.2s;
 box-shadow: 0 4px 16px rgba(22,163,74,0.15);
}

.btn-aceitar:hover {
 background: #16a34a;
 color: white;
 border-color: #16a34a;
 transform: scale(1.08);
}

.btn-info {
 width: 48px;
 height: 48px;
 border-radius: 50%;
 border: 2px solid #e5e7eb;
 background: white;
 color: #6b7280;
 font-size: 20px;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: all 0.2s;
}

.btn-info:hover {
 border-color: #2563eb;
 color: #2563eb;
}

/* MATCH OVERLAY */
.match-overlay {
 position: fixed;
 inset: 0;
 background: rgba(30,58,138,0.92);
 display: none;
 align-items: center;
 justify-content: center;
 z-index: 9999;
 animation: overlayIn 0.3s ease;
}

.match-overlay.show {
 display: flex;
}

@keyframes overlayIn {
 from { opacity: 0; transform: scale(1.05); }
 to { opacity: 1; transform: scale(1); }
}

.match-popup {
 background: white;
 border-radius: 24px;
 padding: 48px 40px;
 text-align: center;
 max-width: 420px;
 width: 90%;
 box-shadow: 0 24px 80px rgba(0,0,0,0.3);
 animation: popIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
}

@keyframes popIn {
 from { transform: scale(0.7); opacity: 0; }
 to { transform: scale(1); opacity: 1; }
}

.match-popup .hearts {
 font-size: 52px;
 margin-bottom: 16px;
 animation: pulse 0.6s ease infinite alternate;
}

@keyframes pulse {
 from { transform: scale(1); }
 to { transform: scale(1.1); }
}

.match-popup h3 {
 font-size: 30px;
 font-weight: 800;
 color: #1e3a8a;
 margin: 0 0 8px;
}

.match-popup .match-desc {
 color: #6b7280;
 font-size: 15px;
 margin: 0 0 28px;
 line-height: 1.6;
}

.match-avatars {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 0;
 margin-bottom: 28px;
}

.match-avatars .av {
 width: 70px;
 height: 70px;
 border-radius: 50%;
 border: 4px solid white;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 28px;
 box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.match-avatars .av:first-child {
 background: linear-gradient(135deg, #1e3a8a, #2563eb);
 margin-right: -12px;
 z-index: 1;
}

.match-avatars .av:last-child {
 background: linear-gradient(135deg, #16a34a, #22c55e);
}

.match-popup .btn-chat {
 display: block;
 width: 100%;
 background: linear-gradient(135deg, #1e3a8a, #2563eb);
 color: white;
 border: none;
 border-radius: 14px;
 padding: 16px;
 font-size: 16px;
 font-weight: 700;
 cursor: pointer;
 margin-bottom: 12px;
 transition: opacity 0.2s, transform 0.1s;
}

.match-popup .btn-chat:hover {
 opacity: 0.9;
 transform: translateY(-1px);
}

.match-popup .btn-continuar {
 display: block;
 width: 100%;
 background: none;
 color: #6b7280;
 border: 1.5px solid #e5e7eb;
 border-radius: 14px;
 padding: 14px;
 font-size: 15px;
 cursor: pointer;
 transition: all 0.2s;
}

.match-popup .btn-continuar:hover {
 border-color: #2563eb;
 color: #2563eb;
}

/* MATCHES LIST */
.matches-panel {
 width: 100%;
 max-width: 800px;
}

.matches-panel h3 {
 font-size: 20px;
 font-weight: 700;
 color: #1e3a8a;
 margin: 0 0 16px;
}

.matches-list {
 display: flex;
 flex-direction: column;
 gap: 12px;
}

.match-row {
 background: white;
 border-radius: 14px;
 padding: 16px 20px;
 display: flex;
 align-items: center;
 gap: 16px;
 box-shadow: 0 2px 8px rgba(30,58,138,0.07);
 transition: box-shadow 0.2s;
}

.match-row:hover {
 box-shadow: 0 4px 20px rgba(30,58,138,0.13);
}

.match-row .av-sm {
 width: 48px;
 height: 48px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 20px;
 flex-shrink: 0;
}

.match-row .info { flex: 1; }

.match-row .info strong {
 display: block;
 color: #1e3a8a;
 font-size: 15px;
 margin-bottom: 2px;
}

.match-row .info span {
 color: #6b7280;
 font-size: 13px;
}

.match-row .badge-match {
 background: #dcfce7;
 color: #16a34a;
 font-size: 12px;
 font-weight: 700;
 padding: 4px 12px;
 border-radius: 20px;
}

.btn-contato {
 background: #2563eb;
 color: white;
 border: none;
 border-radius: 10px;
 padding: 8px 18px;
 font-size: 13px;
 font-weight: 600;
 cursor: pointer;
 transition: background 0.2s;
}

.btn-contato:hover { background: #1e3a8a; }

/* EMPTY */
.empty-state {
 text-align: center;
 padding: 60px 20px;
 color: #9ca3af;
}

.empty-state .icon { font-size: 56px; margin-bottom: 16px; }
.empty-state h4 { font-size: 20px; color: #4b5563; margin: 0 0 8px; }
.empty-state p { font-size: 14px; margin: 0; }

/* CONTAGEM */
.counter-wrap {
 display: flex;
 gap: 24px;
 margin-bottom: 16px;
}

.counter-pill {
 background: white;
 border-radius: 20px;
 padding: 6px 18px;
 font-size: 13px;
 font-weight: 600;
 color: #4b5563;
 box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

.counter-pill span {
 color: #2563eb;
 font-size: 16px;
}

/* DRAGGING highlight */
.match-card.dragging {
 box-shadow: 0 20px 60px rgba(30,58,138,0.25);
}

@media (max-width: 480px) {
 .stack-wrap, .match-card { width: 92vw; }
}

/* 
 MENSAGENS — CHAT
 */

* { box-sizing: border-box; }

/* LAYOUT GERAL */
.chat-page {
 display: flex;
 height: calc(100vh - 130px);
 background: #f5f7fa;
 overflow: hidden;
}

/* SIDEBAR (lista de conversas) */
.sidebar {
 width: 340px;
 min-width: 280px;
 background: white;
 border-right: 1px solid #e5e7eb;
 display: flex;
 flex-direction: column;
 flex-shrink: 0;
}

.sidebar-header {
 padding: 18px 20px 14px;
 border-bottom: 1px solid #e5e7eb;
 background: white;
}

.sidebar-header h3 {
 margin: 0 0 12px;
 font-size: 20px;
 color: #1e3a8a;
 font-weight: 700;
}

.sidebar-search {
 display: flex;
 align-items: center;
 background: #f3f4f6;
 border-radius: 10px;
 padding: 8px 12px;
 gap: 8px;
}

.sidebar-search input {
 border: none;
 background: transparent;
 outline: none;
 font-size: 14px;
 color: #374151;
 width: 100%;
}

.sidebar-search input::placeholder { color: #9ca3af; }

.sidebar-search .icon-busca {
 font-size: 14px;
 color: #9ca3af;
}

/* Abas */
.sidebar-tabs {
 display: flex;
 border-bottom: 1px solid #e5e7eb;
}

.sidebar-tab {
 flex: 1;
 padding: 10px;
 text-align: center;
 font-size: 13px;
 font-weight: 600;
 color: #6b7280;
 cursor: pointer;
 border-bottom: 2px solid transparent;
 transition: 0.2s;
}

.sidebar-tab.ativo {
 color: #2563eb;
 border-bottom-color: #2563eb;
}

/* Lista de conversas */
.conversa-lista {
 flex: 1;
 overflow-y: auto;
}

.conversa-lista::-webkit-scrollbar { width: 4px; }
.conversa-lista::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }

.conversa-item {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 14px 18px;
 cursor: pointer;
 border-bottom: 1px solid #f3f4f6;
 transition: background 0.15s;
 position: relative;
}

.conversa-item:hover { background: #f9fafb; }
.conversa-item.ativa { background: #eff6ff; border-left: 3px solid #2563eb; }

.avatar {
 width: 46px;
 height: 46px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 18px;
 font-weight: 700;
 color: white;
 flex-shrink: 0;
 position: relative;
}

.avatar-online::after {
 content: '';
 position: absolute;
 bottom: 2px;
 right: 2px;
 width: 10px;
 height: 10px;
 background: #22c55e;
 border-radius: 50%;
 border: 2px solid white;
}

.conversa-info { flex: 1; min-width: 0; }

.conversa-nome {
 font-size: 14px;
 font-weight: 600;
 color: #111827;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.conversa-preview {
 font-size: 12px;
 color: #6b7280;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 margin-top: 2px;
}

.conversa-meta {
 display: flex;
 flex-direction: column;
 align-items: flex-end;
 gap: 4px;
 flex-shrink: 0;
}

.conversa-hora {
 font-size: 11px;
 color: #9ca3af;
}

.badge-nao-lido {
 background: #2563eb;
 color: white;
 border-radius: 50%;
 font-size: 11px;
 font-weight: 700;
 width: 18px;
 height: 18px;
 display: flex;
 align-items: center;
 justify-content: center;
}

.projeto-tag {
 font-size: 10px;
 color: #2563eb;
 background: #eff6ff;
 border: 1px solid #bfdbfe;
 border-radius: 4px;
 padding: 1px 5px;
 white-space: nowrap;
}

/* ÁREA DE CHAT */
.chat-area {
 flex: 1;
 display: flex;
 flex-direction: column;
 background: #f0f4f8;
 min-width: 0;
}

/* Header do chat */
.chat-header {
 background: white;
 border-bottom: 1px solid #e5e7eb;
 padding: 14px 20px;
 display: flex;
 align-items: center;
 gap: 14px;
 box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.chat-header-info { flex: 1; }

.chat-nome {
 font-size: 16px;
 font-weight: 700;
 color: #111827;
}

.chat-status {
 font-size: 12px;
 color: #22c55e;
 font-weight: 500;
}

.chat-status.offline { color: #9ca3af; }

.chat-projeto {
 background: #eff6ff;
 border: 1px solid #bfdbfe;
 border-radius: 6px;
 padding: 4px 10px;
 font-size: 12px;
 color: #1e3a8a;
 font-weight: 600;
}

.chat-acoes {
 display: flex;
 gap: 8px;
}

.btn-acao-chat {
 background: #f3f4f6;
 border: none;
 border-radius: 8px;
 padding: 8px 10px;
 cursor: pointer;
 font-size: 15px;
 color: #4b5563;
 transition: 0.2s;
}

.btn-acao-chat:hover {
 background: #eff6ff;
 color: #2563eb;
}

/* Mensagens */
.mensagens-wrap {
 flex: 1;
 overflow-y: auto;
 padding: 20px 24px;
 display: flex;
 flex-direction: column;
 gap: 6px;
}

.mensagens-wrap::-webkit-scrollbar { width: 4px; }
.mensagens-wrap::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }

/* Separador de data */
.data-sep {
 text-align: center;
 margin: 10px 0;
}

.data-sep span {
 background: rgba(255,255,255,0.85);
 color: #6b7280;
 font-size: 11px;
 font-weight: 600;
 padding: 4px 12px;
 border-radius: 12px;
 box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Balões */
.msg-row {
 display: flex;
 align-items: flex-end;
 gap: 8px;
}

.msg-row.enviada { flex-direction: row-reverse; }

.msg-avatar {
 width: 28px;
 height: 28px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 11px;
 font-weight: 700;
 color: white;
 flex-shrink: 0;
 margin-bottom: 2px;
}

.balao {
 max-width: 65%;
 padding: 10px 14px;
 border-radius: 16px;
 font-size: 14px;
 line-height: 1.55;
 color: #111827;
 position: relative;
 box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.msg-row.recebida .balao {
 background: white;
 border-bottom-left-radius: 4px;
}

.msg-row.enviada .balao {
 background: #1e3a8a;
 color: white;
 border-bottom-right-radius: 4px;
}

.balao-hora {
 font-size: 10px;
 margin-top: 4px;
 text-align: right;
 display: flex;
 align-items: center;
 justify-content: flex-end;
 gap: 3px;
}

.msg-row.recebida .balao-hora { color: #9ca3af; }
.msg-row.enviada .balao-hora { color: rgba(255,255,255,0.6); }

/* Check de entrega */
.check { font-size: 11px; }
.check.lido { color: #60a5fa; }

/* Balão de sistema */
.msg-sistema {
 text-align: center;
 margin: 6px 0;
}

.msg-sistema span {
 background: #fef3c7;
 border: 1px solid #fde68a;
 color: #92400e;
 font-size: 12px;
 padding: 5px 14px;
 border-radius: 12px;
}

/* Proposta */
.balao-proposta {
 background: white;
 border: 2px solid #bfdbfe;
 border-radius: 12px;
 padding: 14px 16px;
 max-width: 320px;
 box-shadow: 0 2px 8px rgba(37,99,235,0.1);
}

.msg-row.enviada .balao-proposta {
 background: #1e40af;
 border-color: rgba(255,255,255,0.2);
}

.proposta-titulo {
 font-size: 11px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.5px;
 color: #2563eb;
 margin-bottom: 8px;
}

.msg-row.enviada .proposta-titulo { color: #93c5fd; }

.proposta-valor {
 font-size: 22px;
 font-weight: 800;
 color: #1e3a8a;
 margin-bottom: 4px;
}

.msg-row.enviada .proposta-valor { color: white; }

.proposta-prazo {
 font-size: 12px;
 color: #6b7280;
 margin-bottom: 12px;
}

.msg-row.enviada .proposta-prazo { color: rgba(255,255,255,0.7); }

.proposta-btns {
 display: flex;
 gap: 8px;
}

.btn-aceitar {
 flex: 1;
 background: #22c55e;
 color: white;
 border: none;
 border-radius: 8px;
 padding: 8px;
 font-size: 13px;
 font-weight: 600;
 cursor: pointer;
 transition: 0.2s;
}

.btn-aceitar:hover { background: #16a34a; }

.btn-recusar {
 flex: 1;
 background: #f3f4f6;
 color: #374151;
 border: none;
 border-radius: 8px;
 padding: 8px;
 font-size: 13px;
 font-weight: 600;
 cursor: pointer;
 transition: 0.2s;
}

.btn-recusar:hover { background: #e5e7eb; }

/* INPUT DE MENSAGEM */
.chat-input-area {
 background: white;
 border-top: 1px solid #e5e7eb;
 padding: 14px 20px;
}

.input-row {
 display: flex;
 align-items: flex-end;
 gap: 10px;
}

.btn-anexo {
 background: none;
 border: none;
 font-size: 20px;
 cursor: pointer;
 color: #6b7280;
 padding: 6px;
 border-radius: 8px;
 transition: 0.2s;
 flex-shrink: 0;
}

.btn-anexo:hover { background: #f3f4f6; color: #2563eb; }

.input-msg-wrap {
 flex: 1;
 background: #f3f4f6;
 border-radius: 12px;
 display: flex;
 align-items: flex-end;
 gap: 8px;
 padding: 10px 14px;
}

#campoMensagem {
 flex: 1;
 border: none;
 background: transparent;
 outline: none;
 font-size: 14px;
 color: #111827;
 resize: none;
 max-height: 120px;
 min-height: 20px;
 font-family: Arial, sans-serif;
 line-height: 1.5;
}

#campoMensagem::placeholder { color: #9ca3af; }

.btn-emoji {
 background: none;
 border: none;
 font-size: 18px;
 cursor: pointer;
 padding: 2px;
 border-radius: 4px;
 flex-shrink: 0;
}

.btn-enviar {
 width: 44px;
 height: 44px;
 background: linear-gradient(135deg, #1e3a8a, #2563eb);
 border: none;
 border-radius: 50%;
 color: white;
 font-size: 18px;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: 0.2s;
 box-shadow: 0 4px 12px rgba(37,99,235,0.35);
 flex-shrink: 0;
}

.btn-enviar:hover {
 transform: scale(1.08);
 box-shadow: 0 6px 16px rgba(37,99,235,0.5);
}

/* Proposta rápida */
.atalhos-rapidos {
 display: flex;
 gap: 8px;
 margin-bottom: 10px;
 flex-wrap: wrap;
}

.atalho-btn {
 background: #eff6ff;
 border: 1px solid #bfdbfe;
 color: #1e3a8a;
 border-radius: 20px;
 padding: 5px 12px;
 font-size: 12px;
 font-weight: 600;
 cursor: pointer;
 transition: 0.2s;
}

.atalho-btn:hover { background: #dbeafe; }

/* PAINEL DIREITO (info do projeto) */
.painel-info {
 width: 280px;
 background: white;
 border-left: 1px solid #e5e7eb;
 display: flex;
 flex-direction: column;
 overflow-y: auto;
 flex-shrink: 0;
}

.painel-info::-webkit-scrollbar { width: 4px; }
.painel-info::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }

.painel-titulo {
 padding: 18px 18px 14px;
 font-size: 14px;
 font-weight: 700;
 color: #1e3a8a;
 border-bottom: 1px solid #e5e7eb;
}

.painel-secao {
 padding: 14px 18px;
 border-bottom: 1px solid #f3f4f6;
}

.painel-secao h4 {
 font-size: 11px;
 text-transform: uppercase;
 letter-spacing: 0.7px;
 color: #9ca3af;
 margin: 0 0 10px;
 font-weight: 700;
}

.info-row {
 display: flex;
 justify-content: space-between;
 align-items: center;
 font-size: 13px;
 margin-bottom: 8px;
}

.info-row span:first-child { color: #6b7280; }
.info-row span:last-child { color: #111827; font-weight: 600; }

.status-pill {
 padding: 3px 10px;
 border-radius: 12px;
 font-size: 11px;
 font-weight: 700;
}

.status-em-andamento { background: #fef3c7; color: #92400e; }
.status-aberto { background: #d1fae5; color: #065f46; }
.status-fechado { background: #fee2e2; color: #991b1b; }

.perfil-mini {
 display: flex;
 align-items: center;
 gap: 10px;
}

.mini-nome { font-size: 13px; font-weight: 600; color: #111827; }
.mini-tipo { font-size: 11px; color: #6b7280; }

.btn-ver-perfil {
 display: block;
 margin-top: 12px;
 text-align: center;
 background: #f3f4f6;
 color: #374151;
 border: none;
 border-radius: 8px;
 padding: 8px;
 font-size: 13px;
 font-weight: 600;
 cursor: pointer;
 text-decoration: none;
 transition: 0.2s;
}

.btn-ver-perfil:hover { background: #e5e7eb; }

.btn-encerrar {
 display: block;
 margin: 0 18px 18px;
 text-align: center;
 background: linear-gradient(135deg, #1e3a8a, #2563eb);
 color: white;
 border: none;
 border-radius: 10px;
 padding: 12px;
 font-size: 14px;
 font-weight: 700;
 cursor: pointer;
 transition: 0.2s;
 box-shadow: 0 4px 12px rgba(37,99,235,0.3);
}

.btn-encerrar:hover {
 transform: translateY(-2px);
 box-shadow: 0 6px 16px rgba(37,99,235,0.45);
}

/* TELA VAZIA */
.chat-vazio {
 flex: 1;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 background: #f0f4f8;
 color: #9ca3af;
 gap: 12px;
}

.chat-vazio .icone-vazio { font-size: 64px; }
.chat-vazio h3 { font-size: 18px; color: #4b5563; margin: 0; }
.chat-vazio p { font-size: 14px; margin: 0; }

/* MODAL PROPOSTA */
.modal-proposta {
 display: none;
 position: fixed;
 inset: 0;
 background: rgba(0,0,0,0.5);
 z-index: 3000;
 justify-content: center;
 align-items: center;
 padding: 20px;
}

.modal-proposta.aberta { display: flex; }

.modal-prop-box {
 background: white;
 border-radius: 14px;
 padding: 30px;
 width: 100%;
 max-width: 400px;
 box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

.modal-prop-box h3 {
 margin: 0 0 20px;
 color: #1e3a8a;
 font-size: 20px;
}

.mp-campo { margin-bottom: 16px; }
.mp-campo label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 6px; }

.mp-campo input,
.mp-campo select,
.mp-campo textarea {
 width: 100%;
 padding: 10px 14px;
 border: 1px solid #d1d5db;
 border-radius: 8px;
 font-size: 14px;
 outline: none;
 color: #374151;
 font-family: Arial, sans-serif;
 box-sizing: border-box;
 transition: border-color 0.2s;
}

.mp-campo input:focus,
.mp-campo select:focus,
.mp-campo textarea:focus {
 border-color: #2563eb;
 box-shadow: 0 0 0 2px rgba(37,99,235,0.1);
}

.mp-campo textarea { min-height: 70px; resize: vertical; }

.mp-btns { display: flex; gap: 10px; margin-top: 20px; }

.mp-btns .btn-cancelar-mp {
 flex: 1;
 padding: 12px;
 background: #f3f4f6;
 border: none;
 border-radius: 10px;
 font-size: 14px;
 font-weight: 600;
 cursor: pointer;
 color: #374151;
 transition: 0.2s;
}

.mp-btns .btn-cancelar-mp:hover { background: #e5e7eb; }

.mp-btns .btn-enviar-prop {
 flex: 2;
 padding: 12px;
 background: linear-gradient(135deg, #1e3a8a, #2563eb);
 color: white;
 border: none;
 border-radius: 10px;
 font-size: 14px;
 font-weight: 700;
 cursor: pointer;
 transition: 0.2s;
 box-shadow: 0 4px 12px rgba(37,99,235,0.3);
}

.mp-btns .btn-enviar-prop:hover { transform: translateY(-2px); }

/* RESPONSIVIDADE */
@media (max-width: 900px) {
 .painel-info { display: none; }
}

@media (max-width: 640px) {
 .sidebar { width: 100%; display: none; }
 .sidebar.aberta { display: flex; }
 .chat-area { display: none; }
 .chat-area.aberta { display: flex; }
 .chat-page { height: calc(100vh - 120px); }
}

/* 
 RESPONSIVIDADE GLOBAL — FreelaFree
 */

/* HAMBÚRGUER */
.nav-hamburger {
 display: none;
 background: none;
 border: 1.5px solid #d1d5db;
 font-size: 20px;
 cursor: pointer;
 color: #1e3a8a;
 padding: 5px 10px;
 border-radius: 8px;
 line-height: 1;
 transition: background 0.2s, border-color 0.2s;
 z-index: 1001;
}

.nav-hamburger:hover {
 background: #eff6ff;
 border-color: #2563eb;
 color: #2563eb;
}

/* HEADER */
@media (max-width: 900px) {
 header { padding: 60px 24px 48px; }
 header h1 { font-size: 52px; letter-spacing: 1px; }
 header p { font-size: 17px; }
}

@media (max-width: 600px) {
 header { padding: 44px 16px 36px; }
 header h1 { font-size: 38px; letter-spacing: 0.5px; }
 header p { font-size: 15px; margin-top: 8px; }
}

@media (max-width: 400px) {
 header h1 { font-size: 30px; }
 header p { font-size: 14px; }
}

/* NAV MOBILE */
@media (max-width: 900px) {
 nav {
 display: flex !important;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 padding: 12px 18px;
 gap: 0;
 grid-template-columns: unset !important;
 }

 .nav-left {
 font-size: 17px;
 font-weight: 700;
 color: #1e3a8a;
 }

 .nav-left::before { content:"FreelaFree"; }

 .nav-hamburger {
 display: flex;
 align-items: center;
 justify-content: center;
 }

 .nav-links {
 display: none !important;
 flex-direction: column;
 width: 100%;
 gap: 0;
 padding: 6px 0 10px;
 border-top: 1px solid #e5e7eb;
 margin-top: 10px;
 order: 10;
 }

 nav.nav-aberto .nav-links {
 display: flex !important;
 }

 .nav-links a {
 padding: 12px 6px;
 border-bottom: 1px solid #f3f4f6;
 font-size: 15px;
 width: 100%;
 display: block;
 }

 .nav-links a:last-child { border-bottom: none; }

 .nav-right {
 display: none !important;
 width: 100%;
 flex-direction: column;
 gap: 12px;
 padding: 12px 0 6px;
 border-top: 1px solid #f3f4f6;
 order: 11;
 }

 nav.nav-aberto .nav-right {
 display: flex !important;
 }

 .search-bar { width: 100%; border-radius: 8px; }
 .search-bar input { width: 100% !important; flex: 1; min-width: 0; }
 #userArea { justify-content: center; gap: 12px; }
 .btn-login, .btn-cadastro { flex: 1; text-align: center; }
}

/* SEÇÕES */
@media (max-width: 768px) {
 section { padding: 28px 16px; }
 section h2 { font-size: 22px; }
 #como-funciona { padding: 40px 16px; }
 #como-funciona h2 { font-size: 24px; }
 .subtitulo { font-size: 15px; margin-bottom: 24px; }
 .passos { grid-template-columns: 1fr; gap: 14px; }
}

/* BOTÕES DE AÇÃO */
@media (max-width: 600px) {
 .botoes-acao {
 flex-direction: column;
 align-items: center;
 gap: 14px;
 margin: 36px 0;
 padding: 0 20px;
 }

 .btn-primary,
 .btn-outline {
 width: 100%;
 max-width: 340px;
 text-align: center;
 box-sizing: border-box;
 display: block;
 }
}

/* TERMOS */
@media (max-width: 700px) {
 .card-termos { padding: 22px 16px; margin: 16px 12px; border-radius: 8px; }
 .card-termos h2 { font-size: 22px; }
 .card-termos h3 { font-size: 17px; }
 .card-termos p, .card-termos li { font-size: 15px; }
}

/* LOGIN */
@media (max-width: 600px) {
 .login-wrap { margin: 20px auto 44px; padding: 0 14px; }
 .login-card { padding: 20px 16px; }
 #formBox h2 { font-size: 22px; }
}

/* CADASTRO */
@media (max-width: 600px) {
 .cadastro-wrap { margin: 20px auto 44px; padding: 0 14px; }
 .cadastro-card { padding: 20px 16px; }
}

/* PUBLICAR */
@media (max-width: 700px) {
 .pub-wrap { padding: 0 14px 40px; margin: 1.2rem auto; }
 .pub-header h2 { font-size: 22px; }
 .form-card { padding: 1.2rem 1rem; }
 .footer-actions { flex-direction: column-reverse; gap: 10px; }
 .btn-publicar-main { width: 100%; text-align: center; }
 .steps { gap: 4px; }
 .step span { font-size: 11px; }
 .preview-bar { gap: 12px; }
}

@media (max-width: 400px) {
 .step span { display: none; }
}

/* RECUPERAR */
@media (max-width: 600px) {
 .recuperar-wrap { padding: 0 14px; margin: 20px auto 44px; max-width: 100%; }
 .recuperar-card { padding: 20px 16px !important; }
 .recuperar-card h2 { font-size: 22px !important; }
 .codigo-wrap { gap: 6px !important; }
 .cod-input { width: 40px !important; height: 48px !important; font-size: 20px !important; }
}

/* MODAL */
@media (max-width: 480px) {
 .modal-box { width: calc(100% - 32px); padding: 24px 16px; }
}

/* FOOTER */
@media (max-width: 600px) {
 footer { padding: 18px 16px; }
 .footer-contato { flex-direction: column; align-items: center; gap: 10px; margin-bottom: 8px; }
}

/* TRABALHOS — sidebar filtros */
@media (max-width: 860px) {
 .trabalhos-wrap { flex-direction: column !important; }
 .filtros-lateral {
 width: 100% !important;
 min-width: unset !important;
 max-width: unset !important;
 border-right: none !important;
 border-bottom: 1px solid #e5e7eb;
 }
}

/* MENSAGENS — chat mobile */
@media (max-width: 640px) {
 .chat-page { height: calc(100vh - 60px) !important; }
}

/* MATCH — mobile */
@media (max-width: 600px) {
 .match-page { padding: 16px !important; }
 .match-header h2 { font-size: 22px !important; }
 .match-header p { font-size: 14px !important; }
 .counter-wrap { flex-wrap: wrap; gap: 6px !important; }
}

/* 
 MODAL DE PAGAMENTO — FreelaFree
 */

.modal-pagamento {
 display: none;
 position: fixed;
 inset: 0;
 background: rgba(0,0,0,0.5);
 z-index: 3000;
 justify-content: center;
 align-items: center;
 padding: 20px;
}

.modal-pagamento.aberta { display: flex; }

.modal-pag-box {
 background: white;
 border-radius: 16px;
 padding: 28px;
 width: 100%;
 max-width: 440px;
 box-shadow: 0 24px 60px rgba(0,0,0,0.25);
 max-height: 90vh;
 overflow-y: auto;
}

.pag-header {
 display: flex;
 align-items: flex-start;
 gap: 14px;
 margin-bottom: 22px;
}

.pag-icone {
 font-size: 28px;
 flex-shrink: 0;
 margin-top: 2px;
}

.pag-header h3 {
 margin: 0 0 4px;
 color: #1e3a8a;
 font-size: 18px;
}

.pag-subtitulo {
 margin: 0;
 font-size: 13px;
 color: #6b7280;
}

.pag-fechar {
 margin-left: auto;
 background: none;
 border: none;
 font-size: 18px;
 color: #9ca3af;
 cursor: pointer;
 padding: 0 4px;
 line-height: 1;
 flex-shrink: 0;
}

.pag-fechar:hover { color: #374151; }

/* Resumo */
.pag-resumo {
 background: #f0f4ff;
 border: 1px solid #c7d2fe;
 border-radius: 10px;
 padding: 14px 16px;
 margin-bottom: 18px;
}

.pag-resumo-titulo {
 font-size: 11px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.8px;
 color: #6366f1;
 margin-bottom: 10px;
}

.pag-resumo-row {
 display: flex;
 justify-content: space-between;
 align-items: center;
 font-size: 13px;
 color: #4b5563;
 padding: 4px 0;
}

.pag-resumo-row strong { color: #1e3a8a; font-weight: 600; }

.pag-total {
 border-top: 1px solid #c7d2fe;
 margin-top: 6px;
 padding-top: 10px;
 font-size: 14px;
 font-weight: 700;
 color: #1e3a8a;
}

.pag-total strong { font-size: 16px; color: #1e3a8a; }

.pag-hint {
 font-size: 12px;
 color: #9ca3af;
 margin-top: 4px;
 display: block;
}

/* Métodos */
.pag-metodos {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 8px;
 margin-top: 6px;
}

.pag-metodo {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 5px;
 padding: 12px 6px;
 border: 2px solid #e5e7eb;
 border-radius: 10px;
 cursor: pointer;
 font-size: 12px;
 color: #6b7280;
 transition: all 0.2s;
 text-align: center;
}

.pag-metodo-icon { font-size: 20px; }

.pag-metodo:hover {
 border-color: #2563eb;
 color: #2563eb;
 background: #eff6ff;
}

.pag-metodo.selected {
 border-color: #2563eb;
 background: #eff6ff;
 color: #1e3a8a;
 font-weight: 700;
}

/* Aviso */
.pag-aviso {
 background: #fef9c3;
 border: 1px solid #fde68a;
 border-radius: 8px;
 padding: 10px 14px;
 font-size: 13px;
 color: #92400e;
 margin: 14px 0;
 line-height: 1.5;
}

/* Botão confirmar */
.btn-confirmar-pag {
 flex: 2;
 padding: 13px;
 background: linear-gradient(135deg, #059669, #10b981);
 color: white;
 border: none;
 border-radius: 10px;
 font-size: 14px;
 font-weight: 700;
 cursor: pointer;
 transition: 0.2s;
 box-shadow: 0 4px 12px rgba(5,150,105,0.35);
}

.btn-confirmar-pag:hover {
 transform: translateY(-2px);
 box-shadow: 0 6px 18px rgba(5,150,105,0.45);
}

/* Tela de sucesso */
.pag-sucesso {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 padding: 20px 0 8px;
 gap: 10px;
}

.pag-sucesso-icone { font-size: 52px; }

.pag-sucesso h4 {
 margin: 0;
 font-size: 20px;
 color: #059669;
}

.pag-sucesso p {
 margin: 0;
 font-size: 14px;
 color: #4b5563;
 line-height: 1.5;
}

/* Botão atalho pagar */
.atalho-pagar {
 background: linear-gradient(135deg, #059669, #10b981) !important;
 color: white !important;
 border-color: transparent !important;
 font-weight: 700 !important;
}

.atalho-pagar:hover {
 opacity: 0.9;
 transform: translateY(-1px);
}

.btn-pagar-header { color: #059669 !important; }

/* Balão de pagamento no chat */
.balao-pagamento {
 background: linear-gradient(135deg, #059669, #10b981);
 color: white;
 border-radius: 14px 14px 4px 14px;
 padding: 14px 18px;
 max-width: 280px;
 box-shadow: 0 4px 14px rgba(5,150,105,0.3);
}

.pag-msg-header {
 display: flex;
 align-items: center;
 gap: 6px;
 font-size: 12px;
 font-weight: 600;
 opacity: 0.85;
 margin-bottom: 6px;
 text-transform: uppercase;
 letter-spacing: 0.5px;
}

.pag-msg-icone { font-size: 14px; }

.pag-msg-valor {
 font-size: 22px;
 font-weight: 800;
 margin-bottom: 2px;
}

.pag-msg-metodo {
 font-size: 12px;
 opacity: 0.8;
 margin-bottom: 4px;
}

.pag-msg-obs {
 font-size: 12px;
 opacity: 0.85;
 border-top: 1px solid rgba(255,255,255,0.3);
 padding-top: 6px;
 margin-top: 6px;
 font-style: italic;
}

@media (max-width: 480px) {
 .modal-pag-box { padding: 20px 16px; }
 .pag-metodos { grid-template-columns: repeat(2, 1fr); }
}