/* Template: Anuncie seu Imóvel */
.anuncie-hero { color:#fff; position:relative; overflow:visible; background: var(--serv-title-solid, #0b3a5a); }
.anuncie-hero .container { padding:24px 20px; text-align:center; position:relative; max-width:1180px; margin:0 auto; z-index: 2; }
.anuncie-hero::after { content:""; position:absolute; right:0; top:0; width:min(12vw, 200px); height:100%; background:#29a9ff; clip-path: polygon(45% 0, 100% 0, 100% 100%, 0 100%); z-index: 1; }
.anuncie-hero::before { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(20,127,208,0.35) 55%, rgba(41,169,255,0.65) 100%); pointer-events:none; }
.anuncie-title { margin:0; font-family:'Poppins', Arial, sans-serif; font-weight:900; font-size:36px; letter-spacing:1px; text-transform:uppercase; }
.anuncie-lead { max-width:980px; margin:8px auto 0; color:#dff3ff; font-size:14px; line-height:1.7; }
.anuncie-hero-bottom { height:8px; background: rgba(6,34,58,.5); }

.anuncie-como { padding:28px 0 40px; position:relative; overflow:hidden; background:none; }
/* Mantém um detalhe diagonal sutil, inspirado na arte */
/* detalhe diagonal lateral (direita) */
.anuncie-como::after { content:none; }
.como-grid { display:block; }
.como-texto h2 { margin:0 0 12px; color:#0e3b62; font-size:24px; font-weight:900; letter-spacing:.6px; text-transform:uppercase; }
.como-lista { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:22px; counter-reset: passos; }
.como-lista li { position:relative; counter-increment: passos; }
/* número centralizado acima do ícone */
.como-lista li::before { content:none; }
.como-item { display:grid; grid-template-columns: 68px 1fr; gap:18px; align-items:flex-start; padding:18px 8px 12px; }
.como-ico { width:68px; height:68px; display:flex; align-items:center; justify-content:center; border:2px solid #5aa6e0; color:#2e6fb1; border-radius:12px; background:#f4fbff; font-size:26px; box-sizing:border-box; position:relative; }
.como-ico::before { content: counter(passos); position:absolute; top:-26px; left:50%; transform:translateX(-50%); width:36px; height:36px; border-radius:50%; background:#2e6fb1; color:#0e3b62; font-weight:900; font-size:18px; line-height:34px; text-align:center; border:3px solid #ffffff; box-shadow:0 1px 0 rgba(0,0,0,.06); z-index:3; }
.como-info h3 { margin:0 0 6px; font-size:20px; color:#2e6fb1; font-weight:900; }
.como-info p { margin:0; color:#2f4d64; font-size:14px; line-height:1.6; }
.como-dica { color:#2e6fb1; font-weight:900; text-transform:uppercase; margin:22px 0 10px; text-align:center; }
.como-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
  height: 48px;
  border-radius: 0;
  text-decoration: none;
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 400;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(90deg,
    var(--brandBlueDark, #0e3b62) 0%,
    var(--brandBlueMid, #0c619a) 50%,
    var(--brandBlueLight, #069cf1) 100%);
  border: 0;
  line-height: 1;
  width: fit-content;
}
.como-btn:hover { filter: brightness(1.05); }

/* arte lateral removida conforme layout aprovado */
.como-arte, .como-arte-box { display:none; }

.anuncie-faixa { position:relative; background: linear-gradient(90deg,#0b3a5a 0%, #2d7cc3 50%, #2d7cc3 70%, #0b3a5a 100%); padding:26px 0; text-align:center; color:#fff; }
.anuncie-faixa h2 { margin:0; font-family:'Poppins', Arial, sans-serif; font-weight:900; font-size:28px; letter-spacing:.8px; text-transform:uppercase; }

/* Cadastro (card branco sobre imagem de fundo) */
.anuncie-cadastro { position:relative; padding:24px 0 34px; background:none; background-repeat:no-repeat; background-size:cover; background-position:center top; background-color:#0f2d44; height:clamp(360px, 40vw, 640px); }
.cadastro-wrap { max-width:1200px; margin:0 auto; padding:0 20px; position:relative; display:flex; align-items:flex-start; justify-content:flex-start; }
.anuncie-card { width:360px; background:#fff; border:1.5px solid #2e6fb1; box-shadow:0 10px 24px rgba(0,0,0,.15); border-radius:2px; padding:18px 18px 20px; margin-left:20px; margin-top:clamp(28px, 7vw, 90px); }
.anuncie-field { margin-bottom:14px; }
.anuncie-field label { display:block; font-size:12px; font-weight:700; color:#0f2d44; margin-bottom:6px; }
.anuncie-input { width:100%; height:38px; border:2px solid #224b69; border-radius:3px; padding:8px 10px; font-size:13px; color:#0f2d44; box-sizing:border-box; }
.anuncie-input::placeholder { color:#8aa9c1; }
.anuncie-btn { display:block; width:100%; height:40px; background:#2e6fb1; color:#fff; border:2px solid #224b69; border-radius:3px; font-weight:900; letter-spacing:.5px; }
.anuncie-btn:hover { filter:brightness(1.05); }

/* Mensagens de feedback (sucesso/erro) */
.anuncie-mensagem {
  padding: 16px 18px;
  border-radius: 6px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.anuncie-mensagem i {
  font-size: 20px;
  margin-bottom: 4px;
}
.anuncie-mensagem strong {
  display: block;
  font-size: 15px;
  margin-bottom: 2px;
}
.anuncie-mensagem p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}
.anuncie-mensagem--sucesso {
  background-color: #e8f5e9;
  border: 1px solid #81c784;
  color: #2e7d32;
}
.anuncie-mensagem--sucesso i {
  color: #43a047;
}
.anuncie-mensagem--erro {
  background-color: #ffebee;
  border: 1px solid #e57373;
  color: #c62828;
}
.anuncie-mensagem--erro i {
  color: #e53935;
}

@media (min-width: 1280px) {
  .cadastro-wrap { max-width:1480px; }
  .anuncie-card { margin-left:-12px; }
}

@media (max-width: 920px) {
  .anuncie-como {
    position: relative;
    z-index: 10;
  }
  
  .anuncie-faixa {
    position: relative;
    z-index: 10;
  }
  
  .anuncie-card { 
    width:100%; 
    max-width:420px; 
    margin-left: 0;
    margin-top: 20px;
    position: relative;
    z-index: 1;
  }
  .anuncie-cadastro { 
    background-position:center top; 
    height:auto; 
    padding: 20px 0 30px;
    position: relative;
    z-index: -1 !important;
  }
  .cadastro-wrap {
    justify-content: center;
    padding: 0 15px;
  }
}

@media (max-width: 980px) {
  .como-grid { grid-template-columns: 1fr; }
  .como-arte { order:2; }
}

/* MOBILE PEQUENO - CORREÇÃO DE SOBREPOSIÇÃO */
@media (max-width: 768px) {
  .anuncie-como {
    padding: 20px 0 30px;
    position: relative;
    z-index: 10;
  }
  
  .anuncie-faixa {
    position: relative;
    z-index: 10;
  }
  
  .anuncie-cadastro {
    position: relative;
    z-index: -1 !important;
    margin-top: 0;
  }
  
  .anuncie-card {
    position: relative;
    z-index: -1 !important;
    margin-top: 0;
  }
  
  .cadastro-wrap {
    padding: 0 10px;
  }
}