/* =========================================================
   Página "Anuncie seu imóvel" (app/views/site/anuncie.php) — v3
   Tudo escopado em .anx (não conflita com lista.css / extra.css).
   Ritmo de espaçamento: 8 · 16 · 24 · 32 · 48 · 64 · 96
   ========================================================= */
html{scroll-behavior:smooth}

.anx{
  --red:#b5191e; --red-d:#8e1216; --red-soft:#fbeeee;
  --ink:#1c1c1e; --muted:#5f5f64; --line:#e7e4e0; --soft:#f6f4f1;
  --r:20px; --max:1160px;
  color:var(--ink); line-height:1.6;
}
.anx *{box-sizing:border-box}
.anx :where(h1,h2,h3,p,ul,ol){margin:0}
.anx :where(ul,ol){padding:0;list-style:none}
.anx-w{width:min(var(--max),100% - 48px);margin-inline:auto}
.anx-sec{padding:96px 0}
.anx-sec.soft{background:var(--soft)}
.anx-sec.lg{padding:152px 0}
.anx-sec.lg .anx-head{margin-bottom:96px}

/* ---- tipografia: 4 níveis claros ---- */
.anx-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.anx-eyebrow::before{content:"";width:24px;height:2px;background:currentColor}
.anx-h2,.anx-head h2,.anx-docs h2,.anx-gar h2{font-size:clamp(28px,3.2vw,40px);line-height:1.15;font-weight:600;letter-spacing:-.015em;margin-top:16px}
.anx h1 em,.anx h2 em{font-style:normal;font-weight:inherit}
.anx-lead{font-size:18px;color:var(--muted);max-width:56ch;margin-top:16px}
.anx-head{max-width:640px;margin-bottom:64px}
.anx-head.center{margin-inline:auto;text-align:center}
.anx-head.center .anx-lead{margin-inline:auto}

/* ---- botões ---- */
.anx-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 32px;border-radius:999px;border:1.5px solid transparent;font:600 14px/1 Montserrat,sans-serif;letter-spacing:.04em;text-decoration:none;cursor:pointer;transition:.2s}
.anx-btn.red{background:var(--red);color:#fff}
.anx-btn.red:hover{background:var(--red-d);transform:translateY(-1px)}
.anx-btn.ghost{border-color:currentColor;color:inherit;background:transparent}
.anx-btn.ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.anx-btn.white{background:#fff;color:var(--red-d)}
.anx-btn.white:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(0,0,0,.2)}
.anx-btn.block{width:100%}

/* =========================================================
   1. HERO  (texto + formulário já na primeira dobra)
   ========================================================= */
.anx-hero{position:relative;padding:72px 0 96px;background:#fff;overflow:hidden}
.anx-hero::after{content:"";position:absolute;top:0;right:0;bottom:0;width:50%;background:linear-gradient(rgba(20,16,14,.18),rgba(20,16,14,.32)),var(--anx-hero-img,none) center/cover no-repeat #3a3a3d}
.anx-hero .anx-w{position:relative;z-index:1}
.anx-hero-grid>div:first-child{max-width:560px}
.anx-hero-grid{display:grid;grid-template-columns:1fr 460px;gap:64px;align-items:center}
.anx-crumb{font-size:12px;color:var(--muted);margin-bottom:40px}
.anx-crumb a{color:inherit;text-decoration:none}
.anx-hero h1{font-size:clamp(36px,4.6vw,58px);line-height:1.06;font-weight:600;letter-spacing:-.025em;margin-top:20px}
.anx-hero h1 em{display:block;color:#6b6a6f;margin-top:4px}
.anx-hero .anx-lead{margin-top:24px}
.anx-proof{display:flex;gap:0;margin-top:48px;padding-top:32px;border-top:1px solid var(--line)}
.anx-proof li{padding-right:32px;margin-right:32px;border-right:1px solid var(--line)}
.anx-proof li:last-child{border:0;margin:0;padding:0}
.anx-proof strong{display:block;font-size:34px;line-height:1;font-weight:600;letter-spacing:-.02em}
.anx-proof strong sup{font-size:.55em;color:var(--red);vertical-align:top;margin-left:2px}
.anx-proof span{display:block;margin-top:8px;font-size:13px;color:var(--muted);line-height:1.4}

/* cartão do formulário */
.anx-form{background:#fff;border-radius:24px;padding:36px;box-shadow:0 30px 80px rgba(0,0,0,.25)}
.anx-form h2{font-size:24px;font-weight:600;letter-spacing:-.01em}
.anx-form .sub{font-size:14px;color:var(--muted);margin-top:8px}
.anx-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.anx-fields .full{grid-column:1/-1}
.anx-f label,.anx-seg-l{display:block;font-size:12px;font-weight:600;color:var(--ink);margin-bottom:8px}
.anx-f input,.anx-f select{width:100%;height:50px;padding:0 16px;border:1.5px solid var(--line);border-radius:12px;font:400 15px Montserrat,sans-serif;color:var(--ink);background:#fff;transition:.15s}
.anx-f input::placeholder{color:#a3a09b}
.anx-f input:focus,.anx-f select:focus{outline:0;border-color:var(--ink)}
.anx-seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.anx-seg input{position:absolute;opacity:0;pointer-events:none}
.anx-seg label{display:flex;align-items:center;justify-content:center;gap:8px;height:50px;border:1.5px solid var(--line);border-radius:12px;font-size:14px;font-weight:500;cursor:pointer;margin:0;transition:.15s}
.anx-seg input:checked+label{border-color:var(--ink);background:var(--soft);color:var(--ink);font-weight:600}
.anx-seg input:focus-visible+label{outline:2px solid var(--ink);outline-offset:2px}
.anx-consent{display:flex;gap:12px;align-items:flex-start;font-size:12px;color:var(--muted);line-height:1.5;margin:24px 0}
.anx-consent input{margin-top:2px;accent-color:var(--ink);width:16px;height:16px;flex:none}
.anx-or{display:block;text-align:center;margin-top:16px;font-size:13px;color:var(--muted)}
.anx-or a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1.5px solid currentColor}
.anx-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* =========================================================
   2. POR QUE — 3 colunas separadas por fios (sem cards)
   ========================================================= */
.anx-why{display:grid;grid-template-columns:repeat(3,1fr)}
.anx-why li{padding:0 40px;border-left:1px solid var(--line)}
.anx-why li:first-child{padding-left:0;border:0}
.anx-why li:last-child{padding-right:0}
.anx-ico{width:56px;height:56px;border-radius:50%;background:#fff;border:1.5px solid var(--ink);color:var(--red);display:grid;place-items:center;margin-bottom:24px}
.anx-ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.anx-why h3{font-size:20px;font-weight:600;letter-spacing:-.01em}
.anx-why p{margin-top:12px;font-size:15px;color:var(--muted)}

/* =========================================================
   3. COMO FUNCIONA — linha do tempo horizontal
   ========================================================= */
.anx-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;position:relative;counter-reset:s}
.anx-steps::before{content:"";position:absolute;top:27px;left:27px;right:calc(20% - 27px);height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 16px)}
.anx-steps li{position:relative;counter-increment:s}
.anx-steps li::before{content:counter(s);position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#fff;border:2px solid var(--line);font-weight:600;font-size:18px;color:var(--muted);margin-bottom:24px}
.anx-steps li:first-child::before,.anx-steps li:last-child::before{background:var(--red);border-color:var(--red);color:#fff}
.anx-steps h3{font-size:16px;font-weight:600;line-height:1.35}
.anx-steps p{margin-top:8px;font-size:14px;color:var(--muted)}

/* =========================================================
   4. MODALIDADE — digital x presencial (2 cards com foto)
   ========================================================= */
.anx-mode{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.anx-card{background:#fff;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.anx-ph{position:relative;margin:0;aspect-ratio:16/10;background:repeating-linear-gradient(135deg,#efece8 0 12px,#f6f4f1 12px 24px)}
.anx-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.anx-ph::after{content:"espaço para foto";position:absolute;inset:0;display:grid;place-items:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#aaa6a0;z-index:0}
.anx-ph img{z-index:1}
.anx-card-b{padding:32px 40px 40px}
.anx-tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.anx-tag svg{width:18px;height:18px;fill:none;stroke:var(--red);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.anx-card h3{font-size:24px;font-weight:600;margin-top:12px;letter-spacing:-.01em}
.anx-card p{margin-top:12px;font-size:15px;color:var(--muted)}

/* =========================================================
   5. ALUGUEL GARANTIDO — foto + texto
   ========================================================= */
.anx-gar{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:center}
.anx-gar .anx-ph{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3}
.anx-gar .anx-ph img{object-position:46% 50%}
.anx-gar .anx-lead{margin-bottom:0}
.anx-note{margin-top:16px;font-size:13px;color:var(--muted)}
.anx-gar .anx-btn{margin-top:40px}

/* =========================================================
   6. DOCUMENTOS — acordeão (some a lista longa)
   ========================================================= */
.anx-docs-sec{min-height:900px;display:flex;align-items:center}
.anx-docs{display:grid;grid-template-columns:.8fr 1.2fr;gap:96px;align-items:center}
.anx-acc details{border-bottom:1px solid var(--line)}
.anx-acc details:first-child{border-top:1px solid var(--line)}
.anx-acc summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:40px 0;cursor:pointer;list-style:none;font-size:20px;font-weight:600}
.anx-acc summary::-webkit-details-marker{display:none}
.anx-acc summary::after{content:"+";flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);font-size:20px;font-weight:400;color:var(--red);transition:.2s}
.anx-acc details[open] summary::after{content:"–";border-color:var(--ink)}
.anx-acc ul{padding:0 0 40px}
.anx-acc li{position:relative;padding:9px 0 9px 32px;font-size:16px;color:var(--muted)}
.anx-acc li::before{content:"";position:absolute;left:0;top:18px;width:14px;height:8px;border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg) scale(.75);transform-origin:left top}

/* =========================================================
   7. CTA FINAL
   ========================================================= */
.anx-cta{background:var(--soft);color:var(--ink);text-align:center;padding:112px 0}
.anx-cta h2{font-size:clamp(28px,3.4vw,44px);line-height:1.12;font-weight:600;letter-spacing:-.02em;max-width:18ch;margin-inline:auto}
.anx-cta h2 em{font-style:normal;font-weight:300}
.anx-cta p{margin:20px auto 0;max-width:46ch;color:var(--muted);font-size:17px}
.anx-cta .row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:40px}

/* =========================================================
   Responsivo
   ========================================================= */
@media (max-width:1024px){
  .anx-hero::after{top:auto;width:100%;height:60%}
  .anx-hero-grid{grid-template-columns:1fr;gap:56px}
  .anx-docs{grid-template-columns:1fr;gap:48px}
  .anx-docs-sec{min-height:0;display:block}
  .anx-gar{grid-template-columns:1fr;gap:48px}
  .anx-steps{grid-template-columns:1fr;gap:0}
  .anx-steps::before{top:28px;bottom:28px;left:27px;right:auto;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--line) 0 8px,transparent 8px 16px)}
  .anx-steps li{padding:0 0 40px 80px;min-height:56px}
  .anx-steps li:last-child{padding-bottom:0}
  .anx-steps li::before{position:absolute;left:0;top:0;margin:0}
}
@media (max-width:760px){
  .anx-sec{padding:64px 0}
  .anx-head{margin-bottom:40px}
  .anx-hero{padding:40px 0 64px}
  .anx-proof{flex-wrap:wrap;gap:24px 0}
  .anx-proof li{padding-right:20px;margin-right:20px}
  .anx-proof strong{font-size:28px}
  .anx-form{padding:28px 22px}
  .anx-fields{grid-template-columns:1fr}
  .anx-why{grid-template-columns:1fr;gap:40px}
  .anx-why li{padding:0;border:0}
  .anx-mode{grid-template-columns:1fr}
  .anx-card-b{padding:24px 24px 32px}
  .anx-sec.lg{padding:80px 0}
  .anx-sec.lg .anx-head{margin-bottom:48px}
  .anx-acc summary{padding:28px 0}
  .anx-cta{padding:72px 0}
  .anx-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.anx *{transition:none!important}html{scroll-behavior:auto}}

/* mensagens do formulário (sem fundo vermelho) */
.anx-msg{margin-top:24px;padding:16px 18px;border-radius:12px;border:1.5px solid var(--line);background:var(--soft);font-size:14px;line-height:1.5}
.anx-msg.err{border-color:var(--ink)}
.anx-msg.ok{border-color:var(--ink)}
.anx-form-ok h2{margin-bottom:8px}

/* =========================================================
   v3.1 — rótulo dentro do campo + hero inteiro em uma dobra
   ========================================================= */
.anx-f{position:relative}
.anx-f label{position:absolute;z-index:1;top:9px;left:17px;margin:0;font-size:10.5px;font-weight:600;letter-spacing:.02em;line-height:1;color:var(--muted);pointer-events:none}
.anx-f input,.anx-f select{height:52px;padding:17px 16px 0}
.anx-fields{gap:10px 12px;margin-top:20px}
.anx-seg-l{margin-bottom:6px;font-size:11px}
.anx-seg label{height:44px}
.anx-consent{margin:14px 0}
.anx-form .sub{margin-top:6px}

@media (min-width:1025px){
  .anx-hero{min-height:calc(100vh - 88px);min-height:calc(100svh - 88px);display:flex;align-items:center;padding:14px 0 18px}
  .anx-hero>.anx-w{width:min(var(--max),100% - 48px)}
  .anx-crumb{margin-bottom:clamp(14px,3vh,32px)}
  .anx-hero h1{font-size:clamp(32px,min(3.5vw,6.4vh),54px);margin-top:14px}
  .anx-hero .anx-lead{font-size:clamp(15px,2.6vh,18px);margin-top:clamp(12px,2.6vh,22px)}
  .anx-proof{margin-top:clamp(20px,4vh,44px);padding-top:clamp(16px,3vh,28px)}
  .anx-proof strong{font-size:clamp(26px,4.4vh,34px)}
  .anx-form{padding:clamp(20px,3.2vh,34px) 32px}
  .anx-form h2{font-size:clamp(20px,3.4vh,24px)}
  .anx-fields{margin-top:clamp(12px,2.4vh,22px);gap:clamp(8px,1.5vh,12px) 12px}
  .anx-f input,.anx-f select{height:clamp(46px,6.6vh,54px)}
  .anx-seg label{height:clamp(40px,5.8vh,48px)}
  .anx-btn.block{height:clamp(46px,6.4vh,54px)}
}

/* telas baixas (notebooks com barra do navegador): tudo continua na primeira dobra */
@media (min-width:1025px) and (max-height:780px){
  .anx-form .sub{display:none}
  .anx-form{padding:20px 30px}
  .anx-fields{margin-top:14px;gap:8px 12px}
  .anx-f input,.anx-f select{height:46px;padding-top:16px}
  .anx-f label{top:7px}
  .anx-seg-l{margin-bottom:5px}
  .anx-seg label{height:40px}
  .anx-consent{margin:10px 0 12px;font-size:11px;line-height:1.4}
  .anx-btn.block{height:46px}
  .anx-or{margin-top:8px}
}