:root{
  --navy:#00843d;
  --navy-2:#046b31;
  --gold:#f0b429;
  --gold-dark:#c98f12;
  --ink:#111111;
  --cream:#f7f5ef;
  --white:#ffffff;
  --text:#222222;
  --muted:#6b7280;
  --line:#e7e4db;
  --green:#1f9d55;
  --radius:14px;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--cream);
  line-height:1.5;
}
a{text-decoration:none; color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}

.header-bar{background:#f5f6f5; border-bottom:1px solid var(--line);}
.header-bar-inner{display:flex; align-items:center; justify-content:flex-end; gap:20px; padding:9px 24px;}
.header-bar-link{font-size:13px; font-weight:600; color:var(--ink);}
.header-bar-link:hover{color:var(--navy-2);}

header{background:var(--white); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20;}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:1180px; margin:0 auto; position:relative;}
.logo{display:flex; align-items:center; flex-shrink:0;}
.logo img{height:40px; width:auto; max-width:none; display:block; object-fit:contain; flex-shrink:0;}
.nav-toggle{display:none; background:none; border:none; padding:6px; color:var(--ink); cursor:pointer; flex-shrink:0;}
.nav-toggle svg{width:26px; height:26px; display:block;}
nav{display:flex; gap:28px; font-weight:600; font-size:14.5px; color:var(--ink);}
.header-actions{display:flex; align-items:center; gap:14px;}
.btn{
  display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding:11px 22px;
  font-weight:700; font-size:14px; cursor:pointer; border:none; white-space:nowrap;
}
.btn-gold{background:var(--gold); color:var(--ink);}
.btn-navy{background:var(--navy); color:var(--white);}
.btn-ghost{background:transparent; color:var(--navy); font-weight:600;}
.btn-sm{padding:8px 18px; font-size:13px;}
.btn-text-short{display:none;}
.nav-mobile-only{display:none;}
.header-actions-cta{display:none;}

.subhero{background:var(--navy); padding:32px 0;}
.subhero .searchbar{margin-top:0; max-width:100%; box-shadow:0 12px 28px rgba(0,0,0,0.3);}
.subhero .searchbar-narrow{max-width:780px; margin-left:auto; margin-right:auto;}

.hero{background:var(--navy); position:relative; padding:110px 0 110px; overflow:hidden;}
.hero::before{
  content:""; position:absolute; right:-120px; top:-120px; width:420px; height:420px;
  background:radial-gradient(circle, rgba(240,180,41,0.18), transparent 70%);
}
.hero-inner{max-width:1400px; margin:0 auto; padding:0 24px; position:relative;}
.eyebrow{
  display:inline-block; background:rgba(240,180,41,0.15); color:var(--gold);
  font-size:12.5px; font-weight:700; letter-spacing:.04em; padding:6px 14px; border-radius:999px; margin-bottom:18px;
}
h1{color:var(--white); font-size:54px; font-weight:800; max-width:640px; line-height:1.1; letter-spacing:-.01em; position:relative;}
h1 em{color:var(--gold); font-style:normal;}
.hero p{color:#c7cee0; font-size:17px; max-width:480px; margin-top:18px;}
.hero-arrow{position:absolute; right:-18px; top:38px; width:44px; height:auto; opacity:.9; z-index:4; pointer-events:none;}

.searchbar{
  margin-top:36px; background:var(--white); border-radius:16px; padding:10px;
  display:flex; gap:8px; max-width:820px; box-shadow:0 18px 40px rgba(0,0,0,0.25);
  position:relative; z-index:6;
}
.search-field{
  flex:1; display:flex; flex-direction:column; padding:8px 16px; border-right:1px solid var(--line);
}
.search-field:last-of-type{border-right:none;}
.search-field label{font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.03em;}
.search-field select, .search-field input{
  border:none; outline:none; font-size:14.5px; font-weight:600; color:var(--text); background:transparent; margin-top:2px; width:100%;
}
.search-field-row{display:flex; align-items:center; gap:7px; margin-top:2px;}
.search-field-row .icn{width:15px; height:15px; color:var(--muted); flex-shrink:0;}
.search-field-row input{border:none; outline:none; font-size:14.5px; font-weight:600; color:var(--text); background:transparent; width:100%; margin-top:0; padding:0;}
.search-btn{
  background:var(--gold); color:var(--ink); border:none; border-radius:10px; padding:0 26px;
  font-weight:800; font-size:14.5px; cursor:pointer; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
}
.popular{margin-top:18px; font-size:13px; color:#9aa4c2;}
.popular b{color:#dfe4f2; font-weight:600;}

/* HERO CLARO — variante inspirada no Listivo/lisboananet.pt (experimental, fácil reverter tirando a classe) */
.hero--light{background:#cfe0ff; min-height:820px;}
.hero--light::before{display:none;}
.hero--light .eyebrow{background:#E6F0FA; color:#4F76DF;}
.hero--light h1{color:#283948;}
.hero--light h1 em{color:var(--navy);}
.hero--light .hero-arrow path{stroke:var(--navy) !important;}
.hero--light .hero-text p{color:var(--text);}
.hero--light .popular{color:#556E82;}
.hero--light .popular a, .hero--light .popular b{color:#283948;}

/* Card de busca com selo de ícone colorido, no padrão do .listivo-search do lisboananet.pt */
.searchbar--badged{padding:16px; border-radius:20px; box-shadow:0 24px 50px rgba(40,57,72,0.14);}
.searchbar--badged .search-field{flex-direction:row; align-items:center; gap:12px; padding:6px 14px;}
.search-field-badge{
  width:40px; height:40px; border-radius:10px; background:#E6F0FA; color:#4F76DF;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.search-field-badge svg{width:20px; height:20px;}
.search-field-text{display:flex; flex-direction:column; flex:1; min-width:0;}
.popular a{color:#dfe4f2; font-weight:600;}
.popular a:hover{text-decoration:underline;}

/* padding-top/bottom (não o shorthand `padding`) de propósito — um elemento com
   classe "wrap section" junta as duas regras; o shorthand aqui zerava esquerda/
   direita por cima do padding lateral que .wrap já tinha posto. */
.section{padding-top:64px; padding-bottom:64px;}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:32px; gap:24px; flex-wrap:wrap;}
.section-tag{display:inline-block; background:#eef1fb; color:var(--ink); font-size:12px; font-weight:700; padding:5px 12px; border-radius:999px; margin-bottom:10px;}
.section-head h2{font-size:26px; font-weight:800; color:var(--ink);}
.see-all{font-weight:700; color:var(--navy-2); font-size:14px; display:flex; align-items:center; gap:6px;}

.pillrow{display:flex; gap:10px; margin-bottom:28px; flex-wrap:wrap;}
.pill{padding:9px 18px; border-radius:999px; font-size:13.5px; font-weight:600; border:1px solid var(--line); background:var(--white); color:var(--navy);}
.pill.active{background:var(--navy); color:var(--white); border-color:var(--navy);}

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

/* BUSCA — sidebar de categorias */
.search-layout{display:flex; align-items:flex-start; gap:32px;}
.search-sidebar{width:250px; flex-shrink:0;}
.refine-toggle{display:none; border:1px solid var(--line);}
.search-sidebar h4{font-size:13px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); font-weight:700; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--line);}
.filter-list{list-style:none; display:flex; flex-direction:column;}
.filter-link{display:flex; align-items:center; gap:9px; padding:7px 0; font-size:13.5px; color:var(--text);}
.filter-link:hover{color:var(--navy-2);}
.filter-link.active{color:var(--navy-2); font-weight:700;}
.filter-dot{width:9px; height:9px; border-radius:50%; border:1.5px solid var(--line); flex-shrink:0;}
.filter-link.active .filter-dot{background:var(--navy-2); border-color:var(--navy-2);}
.filter-count{margin-left:auto; color:var(--muted); font-size:12px; font-weight:600;}
.filter-list-more{list-style:none; display:none; flex-direction:column;}
.filter-list-more.expanded{display:flex;}
.filter-toggle{
  display:flex; align-items:center; gap:6px; margin-top:10px; padding:7px 0; border:none; background:none;
  font-size:13px; font-weight:700; color:var(--navy-2); cursor:pointer;
}
.filter-toggle .icn{width:14px; height:14px; transition:transform .15s ease;}
.filter-toggle.expanded .icn{transform:rotate(45deg);}
.search-results{flex:1; min-width:0;}
.search-results .grid{grid-template-columns:repeat(3,1fr);}

.card{
  background:var(--white); border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  position:relative;
}
.card-media{height:132px; background:linear-gradient(135deg,#eef1fb,#e3e8f7); display:flex; align-items:center; justify-content:center; position:relative;}
.card-media .noimg{color:#a9b1cf; font-size:12.5px; font-weight:700;}
.tier{
  position:absolute; top:10px; left:10px; font-size:10.5px; font-weight:800; padding:4px 10px; border-radius:999px;
  text-transform:uppercase; letter-spacing:.03em;
}
/* Só existe um selo: "Destaque" (Tráfego Pago e Essencial). Os demais planos não
   recebem selo, e o nome do plano nunca aparece no card do anúncio. */
.tier-destaque{background:var(--gold); color:var(--ink);}
.card-body{padding:16px;}
.card-body h3{font-size:15px; font-weight:700; color:var(--ink); margin-bottom:4px;}
.card-loc{font-size:12.5px; color:var(--muted); margin-bottom:10px; display:flex; align-items:center; gap:5px;}
.card-phone{
  display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:700;
  background:#f7f8fc; border:1px dashed #c9cfe6; border-radius:9px; padding:8px 10px; color:var(--navy-2);
  cursor:pointer; width:100%; text-align:left;
}
.card-phone small{font-weight:600; color:var(--muted); font-size:11px;}
.card-stats{display:flex; gap:12px; margin-top:10px; font-size:11.5px; color:var(--muted); align-items:center;}
.icn{width:13px; height:13px; flex-shrink:0; vertical-align:-2px; margin-right:4px;}
.card-stats span{display:flex; align-items:center;}

/* IMÓVEIS — card de propriedade (mesmo esqueleto do .card, com preço + specs) */
.property-media{color:#a9b1cf;}
.property-noimg-icon{width:34px; height:34px;}
.property-type-badge{
  position:absolute; top:10px; right:10px; font-size:10.5px; font-weight:800; padding:4px 10px; border-radius:999px;
  text-transform:uppercase; letter-spacing:.03em; background:var(--white); color:var(--navy); box-shadow:0 2px 8px rgba(0,0,0,0.12);
}
.property-type-badge--static{position:static; display:inline-block; margin-bottom:8px; background:#eef1fb; color:var(--navy-2); box-shadow:none;}
.property-price{font-size:18px; font-weight:800; color:var(--navy-2); margin-bottom:4px;}
.property-price--lg{font-size:30px;}
.property-price--lg span{font-size:15px; font-weight:600; color:var(--muted);}
.property-specs{display:flex; flex-wrap:wrap; gap:10px 14px; margin-top:10px; font-size:12.5px; color:var(--text); font-weight:600;}
.property-specs span{display:flex; align-items:center;}
.property-specs--lg{font-size:14px; gap:12px 20px;}
.property-specs--lg .icn{width:16px; height:16px; margin-right:6px;}
.property-detail-bar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:20px 24px; margin-bottom:28px;
}

.catgrid{display:grid; grid-template-columns:repeat(6,1fr); gap:16px;}
.catcard{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:22px 16px; text-align:center; display:block;}
.catcard .icon{width:46px; height:46px; border-radius:12px; background:#eef1fb; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; color:var(--navy-2); transition:background .15s ease, color .15s ease;}
.catcard .icon svg{width:24px; height:24px;}
.catcard:hover .icon{background:var(--navy); color:var(--gold);}
.catcard h4{font-size:14px; font-weight:700; color:var(--ink);}
.catcard p{font-size:11.5px; color:var(--muted); margin-top:2px;}
.catcard--empty{opacity:.55;}
.catcard--empty:hover{opacity:1;}

.import-banner{
  background:linear-gradient(120deg, var(--navy), var(--navy-2)); border-radius:20px; padding:40px; display:flex;
  align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; color:var(--white);
}
.import-banner h3{font-size:22px; font-weight:800; max-width:420px;}
.import-banner p{color:#c7cee0; font-size:14.5px; margin-top:8px; max-width:420px;}
.import-mock{
  background:var(--white); border-radius:12px; padding:14px 16px; display:flex; align-items:center; gap:12px;
  min-width:300px; box-shadow:0 12px 30px rgba(0,0,0,0.25);
}
.g-icon{width:32px; height:32px; border-radius:8px; background:#eef1fb; display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--ink); font-size:14px;}
.import-mock span{font-size:12px; font-weight:700; color:var(--muted);}

.plans{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:stretch;}
.plan{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:26px; position:relative; display:flex; flex-direction:column;}
.plan .ptype{display:block; font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--navy-2); margin-bottom:6px;}
.plan ul{flex:1;}
.plan li.plus::before{content:"+"; color:var(--navy-2);}
.btn-wa-plan{background:#25D366; color:#fff;}
.btn-wa-plan svg{width:18px; height:18px; flex-shrink:0;}
@media (max-width:1100px){.plans{grid-template-columns:repeat(2,1fr);}}
.plan.featured{border:2px solid var(--gold); box-shadow:0 18px 40px rgba(240,180,41,0.18);}
.plan .badge{position:absolute; top:-12px; right:22px; background:var(--gold); color:var(--ink); font-size:11px; font-weight:800; padding:5px 12px; border-radius:999px;}
.plan h4{font-size:15px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.02em;}
.plan .price{font-size:30px; font-weight:800; color:var(--ink); margin:10px 0 16px;}
.plan .price span{font-size:13px; font-weight:600; color:var(--muted);}
.plan .price--text{font-size:22px;}
/* Linha do preço anual, logo abaixo do mensal. Só aparece se o plano tiver anual. */
.plan .price-anual{
  margin:-10px 0 16px; font-size:13.5px; font-weight:700; color:var(--ink); line-height:1.4;
}
.plan .price-anual span{display:block; font-size:12px; font-weight:600; color:var(--muted);}
.plan .price--text span{display:block; margin-top:2px;}
.plan .compare-price{font-size:15px; font-weight:600; color:var(--muted); text-decoration:line-through; margin-top:10px; display:block;}
.plan ul{list-style:none; display:flex; flex-direction:column; gap:9px; margin-bottom:20px;}
.plan li{font-size:13.5px; color:var(--text); display:flex; gap:8px;}
.plan li::before{content:"✓"; color:var(--green); font-weight:800;}

.empty-state{background:var(--white); border:1px dashed var(--line); border-radius:var(--radius); padding:40px; text-align:center; color:var(--muted);}

/* CONTA DO VISITANTE — cadastro/login/perfil */
.form-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:32px;}
.form-section-title{font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); font-weight:700; margin:22px 0 12px; padding-top:14px; border-top:1px solid var(--line);}
.form-section-title:first-of-type{margin-top:0; padding-top:0; border-top:none;}
.form-row{display:flex; gap:14px;}
.form-row .form-group{flex:1;}
.form-group{margin-bottom:16px;}
.form-label{display:block; font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:6px;}
.form-input{
  width:100%; border:1px solid var(--line); border-radius:9px; padding:11px 14px;
  font-size:14.5px; font-family:inherit; color:var(--text); background:var(--white);
}
.form-input:focus{outline:none; border-color:var(--navy);}
textarea.form-input{resize:vertical;}
.form-checkbox{display:flex; align-items:flex-start; gap:9px; font-size:13px; color:var(--muted); line-height:1.5; cursor:pointer;}
.form-checkbox input{margin-top:3px; flex-shrink:0;}
.form-errors{background:#fdeceb; border:1px solid #f3b7b2; border-radius:9px; padding:12px 16px; margin-bottom:18px;}
.form-errors p{color:#a52016; font-size:13.5px; margin:0;}
.form-errors p + p{margin-top:4px;}
.form-success{background:#e9f7ee; border:1px solid #a9dfbb; border-radius:9px; padding:12px 16px; margin-bottom:18px;}
.form-success p{color:#1f7a3d; font-size:13.5px; margin:0;}
.form-hint{display:block; margin-top:6px; font-size:12.5px; color:var(--muted);}
.form-footnote{margin-top:18px; font-size:13.5px; color:var(--muted); text-align:center;}
.form-footnote a{color:var(--navy-2); font-weight:600;}

@media (max-width:600px){
  .form-card{padding:22px;}
  .form-row{flex-direction:column; gap:0;}
}

/* ESPAÇOS DE BANNER — tamanhos padrão (BannerLevel do eDirectory) */
.ad-slot{display:flex; flex-direction:column; align-items:center; gap:6px; margin:0 auto;}
.ad-slot img{border-radius:8px; display:block;}
.ad-slot-label{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em;}
.ad-slot-leaderboard{width:728px; max-width:100%;}
.ad-slot-large_mobile{width:320px; max-width:100%;}
.ad-slot-square{width:250px; max-width:100%;}
.ad-slot-wide_skyscraper{width:160px; max-width:100%;}
.ad-slot-billboard{width:970px; max-width:100%;}
.ad-slot-half_page{width:300px; max-width:100%;}
.ad-slot-sponsored_links{width:320px; max-width:100%;}
/* Faixa no topo dos resultados de busca. A view só emite esta div quando há
   banner de verdade, então aqui não precisa de guarda contra vazio. */
.ad-topo{margin:0 0 18px;}

/* banner em formato texto (content_line1/2 + display_url) — estilo "link patrocinado" clássico */
.ad-slot-texto{display:block; width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; text-decoration:none;}
.ad-slot-texto-titulo{display:block; color:#1a0dab; font-size:15px; font-weight:600; line-height:1.3;}
.ad-slot-texto-desc{display:block; color:var(--text); font-size:13px; margin-top:2px;}
.ad-slot-texto-url{display:block; color:#006621; font-size:12px; margin-top:2px;}

/* troca leaderboard (desktop) <-> large mobile banner (celular) no mesmo slot */
.ad-slot-responsive{display:flex; justify-content:center;}
.ad-slot-responsive .ad-slot-large_mobile{display:none;}
@media (max-width:600px){
  .ad-slot-responsive .ad-slot-leaderboard{display:none;}
  .ad-slot-responsive .ad-slot-large_mobile{display:flex;}
}



/* Link do painel na barra do topo, pra quem é anunciante ou admin. Destacado
   porque "Meu perfil" ao lado leva pra área do VISITANTE — sem distinção visual
   o anunciante clicava no errado, que foi o que aconteceu. */
.header-bar-link--painel{ font-weight:700; }
.header-bar-link--painel::before{ content:'‚2'; margin-right:5px; opacity:.55; }


/* ------------------------------------------------------------- entrar sem sair
   Reusa `.modal-overlay` / `.modal-box` do formulário de contato: mesmo desenho,
   mesmo comportamento de Esc e clique fora. */
.login-modal{max-width:400px;}
.login-modal-sub{font-size:13.5px; color:var(--muted); line-height:1.55; margin:0 0 18px;}
.login-modal-erro{background:#fdf2f2; border:1px solid #f0c4c4; color:#a03030;
  border-radius:9px; padding:10px 14px; font-size:13.5px; margin-bottom:14px;}
.login-modal-campo{display:block; margin-bottom:14px;}
.login-modal-campo span{display:block; font-size:12.5px; font-weight:700; color:var(--ink);
  margin-bottom:5px;}
.login-modal-campo input{width:100%; padding:11px 13px; border:1px solid var(--line);
  border-radius:9px; font-size:15px; font-family:inherit; background:var(--white);
  color:var(--text);}
.login-modal-campo input:focus{outline:2px solid var(--navy); outline-offset:1px;
  border-color:var(--navy);}
.login-modal-enviar{width:100%; justify-content:center; margin-top:4px;}
.login-modal-rodape{margin:16px 0 0; font-size:13px; color:var(--muted); text-align:center;}
.login-modal-rodape a{color:var(--navy-2); font-weight:600;}
/* ------------------------------------------------------------------ perguntas frequentes
   A view usava `var(--border)` no estilo inline, variável que não existe aqui — o
   resultado era caixa sem borda. Agora é classe, com a `--line` de verdade. */
.faq-list{display:grid; gap:10px;}
.faq-item{background:var(--white); border:1px solid var(--line); border-radius:12px;
  padding:0; overflow:hidden; transition:border-color .15s;}
.faq-item[open]{border-color:var(--navy);}
.faq-item summary{display:flex; align-items:center; justify-content:space-between; gap:14px;
  cursor:pointer; padding:15px 18px; font-size:15px; font-weight:700; color:var(--ink);
  list-style:none;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::marker{content:'';}
.faq-item summary:hover{color:var(--navy);}
.faq-seta{width:18px; height:18px; flex-shrink:0; color:var(--navy); transition:transform .18s;}
.faq-item[open] .faq-seta{transform:rotate(180deg);}
.faq-resposta{padding:0 18px 18px; font-size:14.5px;}
.faq-resposta > :first-child{margin-top:0;}
.faq-rodape{margin-top:22px; font-size:13.5px; color:var(--muted); text-align:center;}
.faq-rodape a{color:var(--navy); font-weight:600;}

/* ============================================== QUEM SOMOS — resumo no rodapé
   A primeira versão era uma faixa inteira acima do rodapé, em toda página. O Luiz
   cortou: rouba a atenção do guia, que é o produto. Sobrou duas linhas e um botão;
   a história completa mora em /quem-somos. */
.foot-sobre{font-size:13px; max-width:280px; color:#a8b0cc; line-height:1.6; margin-bottom:10px;}
.foot-sobre strong{color:var(--white); font-weight:700;}
.foot-vermais{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700;
  color:var(--white); background:rgba(255,255,255,.12); border-radius:999px; padding:8px 15px;
  transition:background .15s;}
.foot-vermais:hover{background:rgba(255,255,255,.22);}
.foot-vermais .icn{width:14px; height:14px; margin:0;}

/* ------------------------------------------------------------ página /quem-somos */
.qs-hero{background:var(--navy); color:#dcefe3; padding:52px 0 44px;}
.qs-tag{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; background:rgba(255,255,255,.16); color:var(--white);
  padding:5px 11px; border-radius:999px; margin-bottom:14px;}
.qs-hero h1{font-size:31px; line-height:1.2; color:var(--white); font-weight:800; margin-bottom:12px;}
.qs-hero p{font-size:15px; line-height:1.7; max-width:66ch;}
.qs-hero p strong{color:var(--white);}
.qs-numeros{list-style:none; display:flex; flex-wrap:wrap; gap:12px; margin-top:26px;}
.qs-numeros li{background:rgba(255,255,255,.11); border-radius:12px; padding:14px 20px; min-width:150px;}
.qs-numeros strong{display:block; font-size:23px; font-weight:800; color:var(--gold); line-height:1.1;}
.qs-numeros span{display:block; font-size:11.5px; margin-top:4px;}

.qs-texto{max-width:70ch; margin-bottom:8px;}
.qs-texto h2{font-size:21px; font-weight:800; color:var(--ink); margin-bottom:12px;}
.qs-texto p{font-size:14.5px; line-height:1.75; color:var(--text); margin-bottom:12px;}

.qs-bloco{padding-top:34px; margin-top:26px; border-top:1px solid var(--line);}
.qs-bloco h2{font-size:19px; font-weight:800; color:var(--ink); margin-bottom:4px;}
.qs-sub{font-size:13.5px; color:var(--muted); margin-bottom:16px;}

.qs-guias{list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(172px,1fr)); gap:10px;}
.qs-guia{display:block; height:100%; background:var(--white); border:1px solid var(--line);
  border-radius:12px; padding:14px 15px; transition:border-color .15s, transform .15s;}
a.qs-guia:hover{border-color:var(--navy); transform:translateY(-2px);}
.qs-guia strong{display:block; font-size:15px; color:var(--ink); font-weight:700;}
.qs-uf{display:block; font-size:11.5px; color:var(--muted); margin-top:1px;}
.qs-dom{display:block; font-size:11px; color:var(--navy); margin-top:7px; font-weight:600; word-break:break-all;}
.qs-guias li.is-atual .qs-guia{background:#eaf5ee; border-color:var(--navy);}
.qs-aqui{display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:var(--white); background:var(--navy); padding:3px 8px;
  border-radius:999px; margin-top:7px;}

.qs-clientes{list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(226px,1fr)); gap:10px;}
.qs-clientes li{background:var(--white); border:1px solid var(--line); border-radius:12px; padding:14px 15px;}
.qs-clientes strong{display:block; font-size:14px; color:var(--ink); font-weight:700;}
.qs-cliente-onde{display:block; font-size:11px; color:var(--muted); margin-top:2px;}
.qs-cliente-oque{display:block; font-size:12px; color:var(--navy); margin-top:7px; line-height:1.45; font-weight:600;}

.qs-servicos{list-style:none; display:flex; flex-wrap:wrap; gap:8px;}
.qs-servicos a{display:block; font-size:13px; font-weight:600; color:var(--text);
  background:var(--white); border:1px solid var(--line); border-radius:999px; padding:8px 15px;
  transition:background .15s, color .15s, border-color .15s;}
.qs-servicos a:hover{background:var(--navy); border-color:var(--navy); color:var(--white);}

.qs-link{display:inline-flex; align-items:center; gap:6px; margin-top:16px;
  font-size:13.5px; font-weight:700; color:var(--navy);}
.qs-link:hover{color:var(--navy-2); text-decoration:underline;}
.qs-link .icn{width:15px; height:15px; margin:0;}

.qs-cta{display:grid; grid-template-columns:1.5fr 1fr; gap:28px; align-items:center;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 30px; margin-top:34px;}
.qs-cta h2{font-size:20px; font-weight:800; color:var(--ink); margin-bottom:8px;}
.qs-cta p{font-size:14px; line-height:1.65; color:var(--text); max-width:58ch;}
.qs-cta-botoes{display:flex; flex-direction:column; gap:10px;}
.qs-cta-botoes .btn{justify-content:center;}

@media (max-width:860px){
  .qs-hero h1{font-size:25px;}
  .qs-numeros li{flex:1 1 calc(50% - 6px); min-width:0;}
  .qs-cta{grid-template-columns:1fr;}
}

/* ------------------------------------------------------------ página /servicos */
.srv-hero{background:var(--navy); color:#eaf5ee; padding:52px 0 44px;}
.srv-tag{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; background:rgba(255,255,255,.16); color:var(--white);
  padding:5px 11px; border-radius:999px; margin-bottom:14px;}
.srv-hero h1{font-size:32px; line-height:1.2; color:var(--white); font-weight:800; margin-bottom:12px;}
.srv-hero p{font-size:15px; line-height:1.7; max-width:70ch; color:#dcefe3;}
.srv-hero p strong{color:var(--white);}
.srv-hero-numeros{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:22px;
  font-size:13px; color:#dcefe3;}
.srv-hero-numeros strong{color:var(--gold); font-size:17px; font-weight:800; margin-right:3px;}

.srv-grade{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px;}
.srv-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 22px 20px; scroll-margin-top:90px;}
.srv-card:target{border-color:var(--navy); box-shadow:0 0 0 3px #eaf5ee;}
.srv-card h2{font-size:17.5px; font-weight:800; color:var(--ink); margin-bottom:6px;}
.srv-chamada{font-size:13.5px; font-weight:600; color:var(--navy); margin-bottom:10px; line-height:1.45;}
.srv-texto{font-size:13.5px; line-height:1.65; color:var(--text); margin-bottom:14px;}
.srv-saiba{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; color:var(--navy);}
.srv-saiba:hover{text-decoration:underline;}
.srv-saiba .icn{width:13px; height:13px; margin:0;}

.srv-cta{display:grid; grid-template-columns:1.6fr 1fr; gap:28px; align-items:center;
  background:var(--cream); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 30px; margin-top:28px;}
.srv-cta h2{font-size:20px; font-weight:800; color:var(--ink); margin-bottom:8px;}
.srv-cta p{font-size:14px; line-height:1.65; color:var(--text); max-width:60ch;}
.srv-cta-botoes{display:flex; flex-direction:column; gap:10px;}
.srv-cta-botoes .btn{justify-content:center;}

@media (max-width:860px){
  .srv-cta{grid-template-columns:1fr;}
  .srv-hero h1{font-size:26px;}
}

footer{background:var(--navy); color:#c7cee0; padding:48px 0 24px; margin-top:20px;}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,0.1);}
footer h5{color:var(--white); font-size:13px; font-weight:700; margin-bottom:14px;}
footer .flogo-img{height:76px; width:auto; margin-bottom:14px; background:var(--white); padding:8px; border-radius:10px;}
footer li{list-style:none; font-size:13px; margin-bottom:9px; color:#a8b0cc;}
footer li a{color:#a8b0cc;}
footer li a:hover{color:var(--white);}
.foot-info{display:flex; align-items:flex-start; gap:8px; line-height:1.5;}
.foot-info .icn{margin-top:2px; flex-shrink:0; color:var(--gold);}
.foot-social{display:flex; gap:10px; margin-bottom:18px;}
.foot-social a{
  width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center; color:#c7cee0;
}
.foot-social a:hover{background:var(--gold); color:var(--ink);}
.foot-social a svg{width:16px; height:16px;}
.app-download-btn{
  display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15); border-radius:10px; padding:10px 16px;
  font-size:12.5px; font-weight:700; color:var(--white);
}
.app-download-btn:hover{background:rgba(255,255,255,0.15);}
.app-download-btn svg{width:18px; height:18px; flex-shrink:0;}
.foot-bottom-bar{border-top:1px solid rgba(255,255,255,0.1); margin-top:32px; padding-top:20px;}
.foot-bottom-bar p{font-size:11.5px; color:#8891b3; line-height:1.6; margin-bottom:8px; text-align:center;}
.foot-bottom-bar p:last-child{margin-bottom:0;}
.foot-bottom-bar a{color:#c7cee0; font-weight:600;}
.foot-bottom-bar a:hover{color:var(--gold);}

.hero-inner{position:relative;}
.hero-text{position:relative; z-index:5;}
.hero-text .searchbar{max-width:clamp(560px, 68vw, 880px); position:relative; top:-38px; margin-bottom:-38px;}
.hero-text .popular{max-width:clamp(560px, 68vw, 880px);}
.mosaic-wrap{
  position:absolute; top:-10px; right:-40px; width:clamp(420px, 40vw, 780px);
  aspect-ratio:883/765; z-index:2; pointer-events:none;
}
.mosaic-img{position:absolute; border-radius:6px; overflow:hidden; box-shadow:0 12px 24px rgba(0,0,0,0.25);}
.mosaic-img img{width:100%; height:100%; object-fit:cover; display:block;}
.m1{left:13.59%; top:0%; width:32.5%; height:23.46%;}
.m2{left:47.9%; top:0%; width:35.33%; height:23.46%;}
.m3{left:0%; top:25.06%; width:20.72%; height:29.01%;}
.m4{left:22.2%; top:25.06%; width:30.24%; height:20.62%;}
.m5{left:53.9%; top:25.06%; width:19.93%; height:13.46%;}
.m6{left:75.31%; top:25.06%; width:15.18%; height:22.72%;}
.m7{left:3.28%; top:55.93%; width:17.21%; height:13.33%;}
.m8{left:22.2%; top:47.41%; width:30.35%; height:21.73%;}
.m9{left:54.02%; top:40.37%; width:19.93%; height:28.77%;}
.m10{left:77.01%; top:49.38%; width:24.58%; height:19.63%;}
.m11{left:13.93%; top:70.74%; width:25.94%; height:20.86%;}
.m12{left:41.34%; top:70.74%; width:20.84%; height:27.16%;}
.m13{left:63.65%; top:70.74%; width:19.03%; height:20.12%;}

@media (max-width:980px){
  .wrap, .header-inner, .hero-inner{padding-left:20px; padding-right:20px;}
  .grid{grid-template-columns:repeat(2,1fr); gap:16px;}
  .catgrid{grid-template-columns:repeat(3,1fr);}
  .search-layout{flex-direction:column;}
  .search-sidebar{width:100%; max-height:none; display:none;}
  .search-sidebar.filters-open{display:block;}
  .filter-list{max-height:320px;}
  .refine-toggle{display:inline-flex;}
  .search-results .grid{grid-template-columns:repeat(2,1fr);}
  .plans{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .nav-toggle{display:block;}
  header nav{
    display:none; position:absolute; top:100%; left:0; right:0; background:var(--white);
    flex-direction:column; gap:0; padding:8px 20px 16px; box-shadow:0 12px 24px rgba(0,0,0,0.12);
    border-top:1px solid var(--line);
  }
  header nav.nav-open{display:flex;}
  header nav a{padding:12px 0; border-bottom:1px solid var(--line);}
  header nav a:last-child{border-bottom:none;}
  .nav-mobile-only{display:block;}
  .header-bar{display:none;}
  .header-actions{gap:8px;}
  .header-actions .btn{padding:9px 14px; font-size:12.5px;}
  .header-actions-cta{display:inline-flex;}
  .btn-text-full{display:none;}
  .btn-text-short{display:inline;}
  .searchbar{flex-direction:column;}
  .search-field{border-right:none; border-bottom:1px solid var(--line);}
  h1{font-size:34px;}
  .hero-arrow{display:none;}

  .hero{padding:36px 0 32px; overflow:hidden;}
  .mosaic-wrap{
    position:absolute; top:-30px; right:-30%; width:105%; max-width:none;
    opacity:.55; transform:scale(0.72); transform-origin:top right; z-index:1;
  }
  .hero-text{max-width:100%;}
  .eyebrow, h1, .hero > .hero-inner > .hero-text > p{position:relative; z-index:5;}
  .searchbar{background:var(--white); box-shadow:0 18px 40px rgba(0,0,0,0.35);}
}

/* HERO no celular: mosaico atrás do card de busca (igual ao lisboananet.pt no mobile — imagem
   position:absolute com z-index baixo, o card do formulário (opaco, z-index mais alto) por cima,
   e "buscas populares" depois, em fluxo normal, fora da área do mosaico. Texto de apoio some. */
@media (max-width:600px){
  .hero--light{background:#f2f2f2; min-height:0;}
  .hero-text > p:not(.popular){display:none;}
  .mosaic-wrap{
    position:absolute; top:30px; left:50%; right:auto; width:100vw; max-width:100vw; height:100%;
    margin-left:-45vw; margin-top:0; opacity:.3; transform:none; z-index:1; aspect-ratio:auto;
  }
}

@media (max-width:600px){
  .wrap, .header-inner, .hero-inner{padding-left:20px; padding-right:20px;}
  .grid{grid-template-columns:1fr;}
  .catgrid{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:1fr;}
  h1{font-size:28px;}
  .section{padding-top:15px; padding-bottom:36px;}
  .import-banner{padding:28px 20px;}

  .detail-head h1{font-size:23px; line-height:1.25;}
  .detail-media{height:180px; margin-bottom:22px; margin-top:18px;}
  .detail-main h2{margin-top:8px;}
  .detail-main .content{font-size:14px; line-height:1.75;}
  .breadcrumb{margin-top:6px; line-height:1.6;}
  .sidebar-card{padding:18px;}
}

/* PÁGINA DE DETALHE DO ANÚNCIO */
.breadcrumb{font-size:12.5px; color:var(--muted); margin-bottom:18px;}
.breadcrumb a{color:var(--navy-2); font-weight:600;}
.detail-head{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:18px;}
.detail-head h1{color:var(--ink); font-size:30px; max-width:none;}
.detail-cats{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
.detail-cats a{background:#eef1fb; color:var(--navy-2); font-size:12.5px; font-weight:700; padding:5px 12px; border-radius:999px;}
.rating-badge{display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:700; color:var(--ink);}
.stars{color:var(--gold-dark); font-size:15px; letter-spacing:1px;}
.detail-media{height:280px; border-radius:var(--radius); background:linear-gradient(135deg,#eef1fb,#e3e8f7); display:flex; align-items:center; justify-content:center; color:#a9b1cf; font-weight:700; margin-bottom:12px;}
.detail-logo{width:64px; height:64px; object-fit:contain; border-radius:10px; border:1px solid var(--line); background:var(--white); flex-shrink:0;}
.detail-gallery-strip{display:flex; gap:10px; overflow-x:auto; margin-bottom:28px; padding-bottom:2px;}
.detail-gallery-strip img{width:100px; height:72px; object-fit:cover; border-radius:8px; border:1px solid var(--line); flex-shrink:0;}
.detail-grid{display:grid; grid-template-columns:2fr 1fr; gap:32px; align-items:start;}
.detail-main h2{font-size:18px; color:var(--ink); margin-bottom:12px;}
.detail-main .content{color:var(--text); font-size:14.5px; line-height:1.7; margin-bottom:32px;}
.feature-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px;}
.feature-chip{background:#eef1fb; color:var(--navy-2); font-size:12.5px; font-weight:600; padding:6px 13px; border-radius:999px;}
.sidebar-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:20px;}
.sidebar-card h4{font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); font-weight:700; margin-bottom:14px;}
.hours-table{width:100%; font-size:13px; border-collapse:collapse;}
.hours-table td{padding:4px 0; color:var(--text);}
.hours-table td:first-child{font-weight:600; color:var(--ink);}
.hours-table td:last-child{text-align:right; color:var(--muted);}
.hours-tz{font-size:11.5px; color:var(--muted); margin-top:8px;}
/* Botões de contato do anúncio — telefone, WhatsApp, site e e-mail.
   Todos passam por click_logs: o telefone via /api/telefone (clique pra ver) e os
   demais via /ir/{id}/{canal}, que registra e só então redireciona. */
.contact-actions{display:flex; flex-direction:column; gap:10px;}
.contact-btn{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--white);
  color:var(--ink); font-family:inherit; font-size:14px; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.contact-btn:hover{transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,0.08);}
.contact-btn svg{width:20px; height:20px; flex-shrink:0;}
.contact-btn-text{display:flex; flex-direction:column; min-width:0; gap:1px;}
.contact-btn-text b{font-size:14.5px; font-weight:700; line-height:1.25;}
.contact-btn-text small{font-size:11.5px; color:var(--muted); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.contact-btn--phone{border-color:#cfe0ff; background:#f5f9ff; color:var(--navy);}
.contact-btn--phone.is-revealed .contact-btn-text b{letter-spacing:.02em;}
.contact-btn--wa{border-color:#25D366; background:#25D366; color:#fff;}
.contact-btn--wa .contact-btn-text small{color:rgba(255,255,255,.85);}
.contact-btn--site{border-color:var(--line);}
.contact-btn--site svg{color:var(--navy-2);}
.contact-btn--mail{border-color:var(--line);}
.contact-btn--mail svg{color:var(--gold-dark);}

/* VITRINE (social commerce) — o mesmo componente serve pra cardápio, catálogo de
   produtos, procedimentos de saúde e cursos. O que muda é só o rótulo, que vem do
   template do anúncio (listing_showcase_config). */
.showcase-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:32px;}
.showcase-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column;}
.showcase-media{
  height:150px; background:#f5f6f8; display:flex; align-items:center; justify-content:center;
  color:#c2c8d6; overflow:hidden;
}
.showcase-media img{width:100%; height:100%; object-fit:cover;}
.showcase-media svg{width:34px; height:34px;}
.showcase-body{padding:14px; display:flex; flex-direction:column; flex:1; gap:5px;}
.showcase-price{font-size:15px; font-weight:800; color:var(--navy-2);}
.showcase-body h4{font-size:14.5px; font-weight:700; color:var(--ink); line-height:1.35;}
.showcase-body p{font-size:12.5px; color:var(--muted); line-height:1.5; flex:1;}
.showcase-btn{
  display:block; text-align:center; margin-top:8px; padding:9px 12px; border-radius:9px;
  background:var(--navy); color:var(--white); font-size:13px; font-weight:700;
}
.showcase-btn:hover{background:var(--navy-2);}
@media (max-width:860px){.showcase-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.showcase-grid{grid-template-columns:1fr;}}

/* Banner de consentimento de cookies (LGPD).
   "Recusar" tem o mesmo peso visual de "Aceitar" — esconder a recusa descaracteriza
   o consentimento livre que a lei exige. */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  background:var(--white); border-top:1px solid var(--line); box-shadow:0 -8px 30px rgba(0,0,0,.12);
  padding:16px 20px;
}
.cookie-banner-inner{
  max-width:1180px; margin:0 auto; display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.cookie-banner-text{flex:1; min-width:260px;}
.cookie-banner-text strong{display:block; font-size:14.5px; color:var(--ink); margin-bottom:3px;}
.cookie-banner-text p{font-size:12.5px; color:var(--muted); line-height:1.55;}
.cookie-banner-text a{color:var(--navy-2); font-weight:600; text-decoration:underline;}
.cookie-banner-actions{display:flex; gap:10px; flex-shrink:0;}
.cookie-banner-actions .btn{padding:10px 24px; font-size:13.5px;}
.cookie-btn-recusar{border:1px solid var(--line);}
@media (max-width:600px){
  .cookie-banner-inner{gap:14px;}
  .cookie-banner-actions{width:100%;}
  .cookie-banner-actions .btn{flex:1; justify-content:center;}
}

/* Mapa do anúncio (só nos planos que liberam o recurso "mapa") */
.listing-map{width:100%; height:210px; border-radius:10px; overflow:hidden; background:#eef1fb;}
.map-directions{
  display:flex; align-items:center; justify-content:center; gap:7px; margin-top:10px;
  padding:9px 12px; border:1px solid var(--line); border-radius:10px;
  font-size:13.5px; font-weight:700; color:var(--navy-2); background:var(--white);
}
.map-directions:hover{background:var(--navy); color:var(--white); border-color:var(--navy);}
.map-directions .icn{width:15px; height:15px; margin:0;}

/* Redes sociais — ícone da marca + nome, cada uma na sua cor. O clique passa por
   /ir/{id}/{rede}, então cai no relatório de tráfego do anunciante. */
.social-grid{display:flex; flex-direction:column; gap:8px;}
.social-btn{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px;
  border:1px solid var(--line); background:var(--white); color:var(--ink);
  font-size:13.5px; font-weight:600; transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.social-btn svg{width:18px; height:18px; flex-shrink:0; transition:color .12s ease;}
.social-btn span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.social-btn--facebook svg{color:#1877F2;}
.social-btn--instagram svg{color:#E4405F;}
.social-btn--x svg{color:#111111;}
.social-btn--tiktok svg{color:#010101;}
.social-btn--telegram svg{color:#26A5E4;}
.social-btn:hover{color:var(--white); border-color:transparent;}
.social-btn:hover svg{color:currentColor;}
.social-btn--facebook:hover{background:#1877F2;}
.social-btn--instagram:hover{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF);}
.social-btn--x:hover{background:#111111;}
.social-btn--tiktok:hover{background:#010101;}
.social-btn--telegram:hover{background:#26A5E4;}

/* Modal de contato — o formulário só existe na tela depois do clique em "Enviar e-mail"
   (mesmo padrão do modal-send-email do eDirectory). */
.modal-overlay{
  position:fixed; inset:0; z-index:100; background:rgba(17,17,17,.55);
  display:flex; align-items:center; justify-content:center; padding:20px; overflow-y:auto;
}
.modal-overlay[hidden]{display:none;}
.modal-box{
  background:var(--white); border-radius:16px; padding:26px; width:100%; max-width:440px;
  position:relative; box-shadow:0 24px 60px rgba(0,0,0,.3); margin:auto;
}
.modal-close{
  position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--line); background:var(--white); color:var(--muted);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.modal-close:hover{background:#f5f6f7; color:var(--ink);}
.modal-close svg{width:16px; height:16px;}
.modal-eyebrow{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted);}
.modal-box h3{font-size:20px; font-weight:800; color:var(--ink); margin:4px 0 16px;}

/* Campo isca do anti-spam: invisível pro humano, mas não com display:none —
   vários robôs ignoram campos assim. Fica fora da tela. */
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

.lead-form-nota{font-size:11.5px; color:var(--muted); margin-top:2px; line-height:1.5;}
.lead-form-nota a{color:var(--navy-2); font-weight:600; text-decoration:underline;}
.lead-consent{display:flex; align-items:flex-start; gap:9px; font-size:12px; color:var(--text); line-height:1.5; cursor:pointer; margin-top:2px;}
/* `min-width:0` porque item de flex tem piso de largura no conteúdo: sem isto,
   uma palavra longa empurra o texto pra fora da caixa em vez de quebrar. */
.lead-consent span{flex:1; min-width:0;}

/* Formulário interno de leads, aberto pelo botão de e-mail */
.lead-form{display:flex; flex-direction:column; gap:8px; margin-top:4px;}
/*
 * O `:not()` não é enfeite. Sem ele esta regra pega TAMBÉM o checkbox do
 * consentimento e, por vir depois de `.lead-consent input` com a mesma
 * especificidade, ganhava dela: o checkbox virava uma caixa de 283px e jogava
 * a frase inteira pra fora da tela. O Luiz achou isso no celular.
 */
.lead-form input:not([type="checkbox"]), .lead-form textarea{
  width:100%; border:1px solid var(--line); border-radius:9px; padding:10px 12px;
  font-family:inherit; font-size:13.5px; color:var(--text); background:var(--white); resize:vertical;
}
.lead-form input:focus, .lead-form textarea:focus{outline:2px solid var(--navy-2); outline-offset:-1px;}
.lead-consent input[type="checkbox"]{
  width:17px; height:17px; flex:0 0 17px; margin:1px 0 0; accent-color:var(--navy);
}

/*
 * O aviso depois de enviar. Era uma linha de 12,5px que sumia no meio do
 * formulário — quem enviava não tinha certeza de que foi. Agora é uma faixa:
 * a confirmação é o único momento em que a pessoa precisa ler alguma coisa.
 */
.lead-form-msg{
  font-size:15.5px; font-weight:700; line-height:1.45; margin-top:6px;
  padding:14px 16px; border-radius:10px; text-align:center;
}
.lead-form-msg.is-ok{color:#0b6b3a; background:#e6f7ec; border:1px solid #bfe3cd;}
.lead-form-msg.is-erro{color:#c0392b; background:#fdecea; border:1px solid #f3c8c2;}

/* Bloco de imóveis dentro da busca de empresas — separado e identificado, porque
   imóvel não entra no resultado de empresas (têm vitrine própria em /imoveis). */
.result-group{margin-top:36px; padding-top:28px; border-top:1px solid var(--line);}
.result-group-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px;}
.result-group-head h3{font-size:19px; font-weight:800; color:var(--ink); margin-top:6px;}

.contact-row{display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--text); margin-bottom:12px;}
.contact-row .icn{width:16px; height:16px; color:var(--navy-2); flex-shrink:0;}
.contact-row a{color:var(--navy-2); font-weight:600;}
.review{border-bottom:1px solid var(--line); padding:18px 0;}
.review:last-child{border-bottom:none;}
.review-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;}
.review-author{font-weight:700; color:var(--ink); font-size:13.5px;}
.review-date{font-size:11.5px; color:var(--muted);}
.review h5{font-size:14px; color:var(--ink); margin:4px 0;}
.review p{font-size:13.5px; color:var(--text);}

/* OFERTAS/CUPONS */
.offer-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.offer-media{height:120px; background:linear-gradient(135deg,#fff4e0,#ffe6c9); background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; color:var(--gold-dark); font-weight:800; font-size:13px; position:relative;}
.discount-badge{position:absolute; top:10px; left:10px; background:var(--navy); color:var(--gold); font-size:11px; font-weight:800; padding:4px 10px; border-radius:999px; text-transform:uppercase; letter-spacing:.02em;}
.offer-body{padding:18px;}
.offer-body h3{font-size:15.5px; color:var(--ink); font-weight:700; margin-bottom:6px;}
.offer-shop{font-size:12.5px; color:var(--navy-2); font-weight:600; margin-bottom:8px;}
.offer-price{display:flex; align-items:baseline; gap:8px; margin-top:10px;}
.offer-price .now{font-size:20px; font-weight:800; color:var(--green);}
.offer-price .was{font-size:13px; color:var(--muted); text-decoration:line-through;}
.offer-countdown{font-size:11.5px; color:var(--gold-dark); font-weight:700; margin-top:8px;}
.offer-redeem-btn{width:100%; justify-content:center; margin-top:14px;}
.offer-expires{font-size:11.5px; color:var(--muted); margin-top:8px;}

/* Tipografia de texto corrido (.content) — usada nas páginas legais, na descrição
   do anúncio e nos artigos. Sem isso o reset global (*{margin:0;padding:0}) deixa
   parágrafos colados e listas sem recuo/marcador. */
.content{color:var(--text); font-size:15px; line-height:1.7;}
.content p{margin-bottom:14px;}
.content p:last-child{margin-bottom:0;}
.content h2{font-size:18px; font-weight:800; color:var(--ink); margin:28px 0 10px;}
.content h3{font-size:16px; font-weight:700; color:var(--ink); margin:22px 0 8px;}
.content h4{font-size:14.5px; font-weight:700; color:var(--ink); margin:18px 0 7px;}
.content ul, .content ol{margin:0 0 14px 22px;}
.content li{margin-bottom:7px;}
.content a{color:var(--navy-2); font-weight:600; text-decoration:underline;}
.content strong{color:var(--ink); font-weight:700;}

.content-meta{font-size:12px; color:var(--ink); font-weight:700; margin-bottom:6px;}
.content-media-event{background:linear-gradient(135deg,#e6f0ff,#cfe0ff); color:var(--ink);}
.content-media-classified{background:linear-gradient(135deg,#e6f7ec,#c9ecd6); color:#1f9d55;}
.content-media-article{background:linear-gradient(135deg,#f3e8ff,#e3cbff); color:#7c3aed;}
.content-media-blog{background:linear-gradient(135deg,#eef1fb,#d9e0f7); color:var(--ink);}
.classified-price{font-size:20px; font-weight:800; color:var(--ink); margin-top:8px;}
.author-row{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); margin-bottom:24px;}
.author-row b{color:var(--ink);}

/* EVENTOS EM DESTAQUE */
.event-featured-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:20px; align-items:start;}
.event-hero-card{display:block; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.event-hero-media{height:260px; background:linear-gradient(135deg,#e6f0ff,#cfe0ff); background-size:cover; background-position:center; position:relative; display:flex; align-items:center; justify-content:center;}
.event-hero-media .noimg{color:var(--muted); font-size:12.5px; font-weight:700;}
.event-hero-body{padding:20px;}
.event-hero-body h3{font-size:19px; color:var(--ink); font-weight:800; margin-bottom:8px;}
.event-hero-body p{font-size:13.5px; color:var(--muted); margin-bottom:8px;}
.event-list-stack{display:flex; flex-direction:column; gap:14px;}
.event-list-card{display:flex; gap:12px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; padding:10px;}
.event-list-media{width:96px; height:96px; flex-shrink:0; border-radius:10px; background:linear-gradient(135deg,#e6f0ff,#cfe0ff); background-size:cover; background-position:center; position:relative;}
.event-list-body{padding:2px 4px;}
.event-list-body h4{font-size:14.5px; color:var(--ink); font-weight:700; margin-bottom:4px;}
.event-list-body p{font-size:12.5px; color:var(--muted); margin-bottom:4px;}

.date-badge{
  position:absolute; top:10px; left:10px; background:var(--white); border-radius:8px; padding:6px 10px;
  text-align:center; box-shadow:0 6px 14px rgba(0,0,0,0.18); line-height:1.15;
}
.date-badge-month{display:block; font-size:10px; font-weight:800; color:var(--gold-dark); text-transform:uppercase; letter-spacing:.03em;}
.date-badge-day{display:block; font-size:17px; font-weight:800; color:var(--ink);}
.date-badge-weekday{display:block; font-size:10px; color:var(--muted); font-weight:600;}
.date-badge-sm{padding:4px 7px; top:6px; left:6px;}
.date-badge-sm .date-badge-day{font-size:14px;}

/* PRÓXIMOS EVENTOS — carrossel de datas */
.dates-carousel-wrap{display:flex; align-items:center; gap:10px;}
.dates-carousel{display:flex; gap:10px; overflow-x:auto; scroll-behavior:smooth; padding:4px 2px; scrollbar-width:none;}
.dates-carousel::-webkit-scrollbar{display:none;}
.date-pill{
  flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:74px; padding:10px 6px; border-radius:12px; border:1px solid var(--line); background:var(--white);
  color:var(--ink); font-weight:700;
}
.date-pill.active{background:var(--navy); border-color:var(--navy); color:var(--white);}
.date-pill-month{font-size:11px; text-transform:uppercase; letter-spacing:.02em;}
.date-pill-day{font-size:20px; font-weight:800; margin:2px 0;}
.date-pill-weekday{font-size:11px; font-weight:600; opacity:.8;}
.carousel-arrow{
  flex-shrink:0; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--white);
  color:var(--ink); font-size:20px; line-height:1; cursor:pointer;
}
.carousel-arrow:hover{background:var(--navy); color:var(--white); border-color:var(--navy);}

/* EXPLORE MAIS LOCAIS */
.locations-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px 24px;}
.location-item{font-size:14px; color:var(--navy-2); font-weight:600;}
.location-item:hover{text-decoration:underline;}
.location-item .count{color:var(--muted); font-weight:600;}

@media (max-width:980px){
  .detail-grid{grid-template-columns:1fr;}
  .event-featured-grid{grid-template-columns:1fr;}
  .locations-grid{grid-template-columns:repeat(2,1fr);}
}

/* Reivindicação de anúncio ("este anúncio é seu?") */
.claim-form fieldset{border:1px solid var(--line); border-radius:12px; padding:18px; margin-bottom:18px;}
.claim-form legend{font-size:13px; font-weight:800; color:var(--ink); padding:0 8px;}
.claim-form label{display:block; font-size:13px; font-weight:600; color:var(--text); margin-bottom:12px;}
.claim-form input, .claim-form textarea{width:100%; margin-top:5px; border:1px solid var(--line);
  border-radius:9px; padding:9px 12px; font-family:inherit; font-size:13.5px; color:var(--text); background:var(--white);}
.claim-form input:focus, .claim-form textarea:focus{outline:2px solid var(--navy-2); outline-offset:-1px;}
.claim-dica{font-size:12px; color:var(--muted); margin-bottom:14px;}
.claim-erro{background:#fdecea; color:#c0392b; border-radius:10px; padding:12px 16px; font-size:13.5px; font-weight:600; margin-bottom:18px;}
.claim-aviso{background:#eef1fb; color:var(--ink); border-radius:10px; padding:16px; font-size:14px;}
.claim-aviso a{color:var(--navy-2); font-weight:700; text-decoration:underline;}
.claim-ok{background:#e6f7ec; border-radius:12px; padding:26px; text-align:center;}
.claim-ok h1{font-size:22px; color:#12703c; margin-bottom:8px;}
.claim-ok p{color:var(--text); margin-bottom:18px;}
.claim-cta{display:block; text-align:center; margin-top:12px; padding:10px; border:1px dashed var(--line);
  border-radius:10px; font-size:13px; font-weight:600; color:var(--navy-2); background:#fafbfc;}
.claim-cta:hover{border-color:var(--navy); background:#f2f6ff;}
/* A mesma peça no topo da ficha, abaixo da categoria: mais presente, porque ali
   ela é a única chance de o dono da empresa se reconhecer. */
.claim-cta--topo{display:inline-flex; align-items:center; gap:8px; text-align:left;
  margin:12px 0 0; padding:11px 18px; border-style:solid; border-color:var(--navy);
  background:#eaf5ee; color:var(--navy-2); font-size:13.5px;}
.claim-cta--topo strong{color:var(--ink); font-weight:800;}
.claim-cta--topo:hover{background:var(--navy); color:var(--white); border-color:var(--navy);}
.claim-cta--topo:hover strong{color:var(--white);}
.claim-cta--topo .icn{width:15px; height:15px; margin:0;}

/* ---- Fluxo de contratação (anuncie → plano → check-out → concluído) ---- */
.anuncie-titulo{font-size:27px; font-weight:800; color:var(--ink); text-align:center; margin-bottom:6px;}
.anuncie-sub{text-align:center; color:var(--muted); font-size:14px; margin-bottom:26px;}
.anuncie-h2{font-size:18px; font-weight:800; color:var(--ink); margin:18px 0 6px;}
.anuncie-h3{font-size:14px; font-weight:800; color:var(--ink); margin:20px 0 8px; text-transform:uppercase; letter-spacing:.04em;}
.anuncie-texto{font-size:14px; color:var(--muted); line-height:1.6;}
.anuncie-nota{font-size:12px; color:var(--muted); background:#fafbfc; border:1px solid var(--line); border-radius:9px; padding:10px 12px; margin:12px 0;}
.passos{display:flex; list-style:none; gap:4px; margin:0 auto 24px; justify-content:center; flex-wrap:wrap;}
.passo{background:#eef1f6; color:var(--muted); font-size:12.5px; font-weight:700; padding:10px 20px; border-radius:8px;}
.passo--atual{background:var(--navy); color:#fff;}
.passo--feito{background:#d8ece0; color:var(--navy-2);}
.anuncie-card{background:var(--white); border:1px solid var(--line); border-radius:14px; padding:26px;}
.anuncie-abas{display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:20px;}
.anuncie-aba{background:none; border:none; padding:10px 18px; font-family:inherit; font-size:14px; font-weight:700; color:var(--muted); cursor:pointer; border-bottom:3px solid transparent;}
.anuncie-aba--ativa{color:var(--ink); border-bottom-color:var(--navy);}
.anuncie-form label{display:block; font-size:13px; font-weight:600; color:var(--text); margin-bottom:12px;}
.anuncie-form input{width:100%; margin-top:5px; border:1px solid var(--line); border-radius:9px; padding:10px 12px; font-family:inherit; font-size:14px;}
.anuncie-form input:focus{outline:2px solid var(--navy-2); outline-offset:-1px;}
.anuncie-claim-aviso{background:#eef7f1; border:1px solid #cfe6da; border-radius:10px; padding:12px 16px; font-size:13.5px; margin-bottom:18px;}
.anuncie-resumo{border:1px solid var(--line); border-radius:11px; padding:16px; margin-bottom:20px;}
.anuncie-resumo-linha{display:flex; justify-content:space-between; gap:16px; font-size:13.5px; padding:6px 0; color:var(--muted);}
.anuncie-resumo-linha strong{color:var(--ink);}
.anuncie-resumo-total{border-top:1px solid var(--line); margin-top:6px; padding-top:12px; font-size:15px;}
.anuncie-metodo{display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:10px; cursor:pointer;}
.anuncie-metodo input{width:17px; height:17px; accent-color:var(--navy);}
.anuncie-metodo span{display:flex; flex-direction:column;}
.anuncie-metodo small{color:var(--muted); font-size:12px;}
.anuncie-confirma{display:grid; grid-template-columns:1.05fr .95fr; gap:30px; background:var(--white); border:1px solid var(--line); border-left:4px solid var(--green); border-radius:14px; padding:28px;}
.anuncie-ok{width:42px; height:42px; color:var(--green); margin-bottom:8px;}
.anuncie-ok svg{width:100%; height:100%;}
.anuncie-parabens{font-size:13px; font-weight:700; color:var(--muted);}
.anuncie-tag{background:#e6f7ec; color:#12703c; border-radius:99px; padding:2px 10px; font-size:12px; font-weight:700;}
.anuncie-pedido{border:1px solid var(--line); border-radius:11px; padding:16px;}
.anuncie-pedido-valor{font-size:24px; font-weight:800; color:var(--navy-2); margin:4px 0 12px;}
.anuncie-pedido dl{display:grid; grid-template-columns:1fr auto; gap:6px 16px; font-size:13px;}
.anuncie-pedido dt{color:var(--muted);} .anuncie-pedido dd{text-align:right; color:var(--ink); font-weight:600;}
.anuncie-pedido-total{display:flex; justify-content:space-between; border-top:1px solid var(--line); margin-top:12px; padding-top:12px; font-size:15px; font-weight:800;}
.anuncie-proximo{display:flex; align-items:center; gap:10px; background:#f5f9ff; border:1px solid #cfe0ff; border-radius:10px; padding:12px 14px; margin:12px 0 20px; font-size:13.5px;}
.anuncie-proximo-icone svg{width:20px; height:20px; color:var(--navy-2);}
.anuncie-proximo-txt{flex:1; font-weight:600;}
.anuncie-proximo-link{color:var(--navy-2); font-weight:700; text-decoration:underline;}
.anuncie-proximo-cont{background:var(--white); border:1px solid var(--line); border-radius:6px; padding:1px 7px; font-size:12px; font-weight:700; color:var(--muted);}
.anuncie-confirma-acoes{display:flex; gap:10px; flex-wrap:wrap;}
.anuncie-confirma-acoes .btn{flex:1; justify-content:center; min-width:150px;}
.modal-box--largo{max-width:720px;}
.modelo-grade{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:18px 0;}
.modelo-opcao{display:block; border:1px solid var(--line); border-radius:10px; padding:14px 12px; text-align:center; font-size:13px; font-weight:600; cursor:pointer;}
.modelo-item{position:relative;}
.modelo-item .modelo-opcao{padding-right:32px;}
.modelo-ver{position:absolute; right:7px; top:50%; transform:translateY(-50%); display:inline-flex;
  width:26px; height:26px; align-items:center; justify-content:center; border-radius:7px; color:#6b7280;}
.modelo-ver:hover{color:var(--navy); background:#eef4f0;}
.modelo-ver svg{width:17px; height:17px;}
.modelo-opcao input{position:absolute; opacity:0;}
.modelo-opcao:has(input:checked){border-color:var(--navy); background:#f2f8f5; color:var(--navy-2);}
.modelo-acoes{display:flex; gap:10px; justify-content:flex-end;}
/* Página inicial da reivindicação */
.claim-hero{background:var(--white); border-bottom:1px solid var(--line); padding:44px 0 34px; text-align:center;}
.claim-hero h1{font-size:32px; color:var(--ink); margin-bottom:12px;}
.claim-hero p{max-width:720px; margin:0 auto; color:var(--muted); font-size:14.5px; line-height:1.65;}
.claim-passos{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:34px;}
.claim-passo{background:var(--white); border:1px solid var(--line); border-radius:14px; padding:24px; text-align:center;}
.claim-passo h3{font-size:17px; color:var(--navy-2); margin-bottom:16px;}
.claim-passo-ilustra{position:relative; height:110px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--navy);}
.claim-passo-ilustra svg{width:74px; height:74px; opacity:.55;}
.claim-passo-num{position:absolute; left:14px; top:6px; font-size:52px; font-weight:800; color:var(--navy); opacity:.16;}
.claim-passo p{font-size:13.5px; color:var(--muted); line-height:1.6;}
.claim-cta-linha{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.claim-btn-principal{background:var(--navy); color:#fff; padding:15px 34px; font-size:15px;}
.claim-btn-membro{background:var(--gold); color:var(--ink); padding:15px 34px; font-size:15px;}
@media (max-width:860px){
  .claim-passos, .modelo-grade{grid-template-columns:1fr;}
  .anuncie-confirma{grid-template-columns:1fr;}
}

/* Convite pra anunciar, no perfil do visitante (o /profile do eDirectory). */
.perfil-anuncie{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:space-between;
  background:#f7f8fa; border:1px solid var(--line); border-radius:12px;
  padding:16px; margin-bottom:22px;
}
.perfil-anuncie strong{ display:block; font-size:15px; color:var(--ink); }
.perfil-anuncie p{ margin:4px 0 0; font-size:13px; color:var(--muted); max-width:40ch; }
.perfil-anuncie .btn{ white-space:nowrap; letter-spacing:.03em; }
.perfil-anuncie--painel{ background:#e9f5ee; border-color:#c6e3d3; }
@media (max-width:560px){
  .perfil-anuncie{ flex-direction:column; align-items:stretch; }
  .perfil-anuncie .btn{ justify-content:center; }
}

/* ------------------------------------------------------------------
   Busca: barra de modos + ordenação, lista, mapa e paginação.
   Espelha o results.html.twig do eDirectory (list-view / grid-view /
   map-view e os quatro Sorters).
   ------------------------------------------------------------------ */
.result-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; padding:10px 0 16px; border-bottom:1px solid var(--line); margin-bottom:20px;
}
.view-modes{ display:flex; gap:6px; }
.view-mode{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; font-weight:600; color:var(--muted); text-decoration:none;
  padding:8px 13px; border:1px solid var(--line); border-radius:9px; background:var(--white);
}
.view-mode svg{ width:17px; height:17px; }
.view-mode:hover{ color:var(--ink); border-color:#cfcabb; }
.view-mode.is-selected{ color:var(--navy); border-color:var(--navy); background:rgba(0,132,61,.07); }

.order-field{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted); }
.order-field select{
  font:inherit; font-size:13.5px; color:var(--ink); background:var(--white);
  border:1px solid var(--line); border-radius:9px; padding:8px 11px; cursor:pointer;
}
.order-field select:disabled{ opacity:.6; cursor:progress; }

.result-range{ font-size:13px; color:var(--muted); margin:4px 0 0; }
.result-nota{ font-size:13px; color:var(--muted); margin:0 0 16px; }

/* ---- modo lista ---- */
.result-list{ list-style:none; margin:0 0 8px; padding:0; }
.result-row{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:space-between;
  padding:16px 0; border-bottom:1px solid var(--line);
}
.result-row:last-child{ border-bottom:0; }
.result-row-foto{
  flex:none; width:104px; height:78px; border-radius:9px; background:var(--cream);
  background-size:cover; background-position:center; border:1px solid var(--line);
}
.result-row-foto.is-vazia{ background-image:none; }
.result-row-main{ flex:1 1 320px; min-width:0; }
@media (max-width:560px){
  .result-row-foto{ width:72px; height:56px; }
}
.result-row h3{ font-size:17px; margin:0 0 5px; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.result-row h3 a{ color:var(--ink); text-decoration:none; }
.result-row h3 a:hover{ color:var(--navy); }
.result-row h3 .tier{ position:static; font-size:11px; }
.result-row-sub{ font-size:13.5px; color:var(--text); margin:0 0 6px; line-height:1.5; }
.result-row-loc{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-size:12.5px; color:var(--muted); margin:0;
}
.result-row-loc .icn{ width:15px; height:15px; flex:none; }
.result-dist{ background:#f1f2f4; color:var(--ink); font-weight:600; padding:1px 8px; border-radius:999px; }
.result-row-acoes .btn{ border:1px solid var(--line); white-space:nowrap; }

/* ---- modo mapa ---- */
.search-map{
  height:520px; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; margin-bottom:16px; background:#eef0f2;
}

/* ---- paginação ---- */
.paginacao{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:26px 0 8px; }
.pag-link{
  min-width:38px; text-align:center; font-size:14px; font-weight:600;
  color:var(--ink); text-decoration:none;
  padding:8px 11px; border:1px solid var(--line); border-radius:9px; background:var(--white);
}
.pag-link:hover{ border-color:var(--navy); color:var(--navy); }
.pag-link.is-current{ background:var(--navy); border-color:var(--navy); color:#fff; }
.pag-link.is-off{ color:#b9b9b9; background:#f7f7f5; cursor:default; }
.pag-link.is-off:hover{ border-color:var(--line); color:#b9b9b9; }
.pag-reticencias{ color:var(--muted); padding:0 2px; }

@media (max-width:760px){
  .result-toolbar{ align-items:stretch; flex-direction:column; gap:12px; }
  .view-modes{ justify-content:stretch; }
  .view-mode{ flex:1; justify-content:center; padding:9px 8px; }
  .view-mode span{ display:none; }
  .order-field{ justify-content:space-between; }
  .order-field select{ flex:1; margin-left:10px; }
  .search-map{ height:400px; }
  .result-row-acoes{ width:100%; }
  .result-row-acoes .btn{ width:100%; justify-content:center; }
}

/* ------------------------------------------------------------------
   Cards de plano em destaque, e formulário de avaliação.
   ------------------------------------------------------------------ */

/* Essencial e Tráfego Pago (recurso `destaque`) se distinguem dos demais:
   fundo levemente esverdeado, borda da marca e um filete no topo. O verde
   fica na superfície; texto e título continuam grafite. */
.card--destaque{
  border-color:var(--navy);
  background:linear-gradient(180deg,#f2faf5 0%,var(--white) 120px);
  box-shadow:0 2px 10px rgba(0,132,61,.09);
}
.card--destaque::before{
  content:''; display:block; height:3px; background:var(--navy);
  border-radius:var(--radius) var(--radius) 0 0;
}
.card--destaque .card-media{ border-radius:0; }
.card--destaque:hover{ box-shadow:0 6px 18px rgba(0,132,61,.16); }

/* ---- formulário de avaliação ---- */
.reviews-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.reviews-head h2{ margin:0; }
.reviews-head .btn{ border:1px solid var(--line); }
.reviews-head .btn .icn{ width:17px; height:17px; margin-right:6px; }

/* O formulário vive dentro do modal (mesma sobreposição do "Enviar e-mail"),
   então não leva moldura própria — a caixa do modal já é a moldura. */
.review-form{ margin:0; }
.review-form-intro{ font-size:13.5px; color:var(--muted); margin:0 0 14px; line-height:1.5; }
.review-form input[type="text"], .review-form input[type="email"], .review-form textarea{
  width:100%; font:inherit; font-size:14px; color:var(--text); box-sizing:border-box;
  padding:10px 12px; border:1px solid var(--line); border-radius:9px; background:var(--white);
  margin-bottom:10px;
}
.review-form textarea{ resize:vertical; line-height:1.55; }
.review-form input:focus, .review-form textarea:focus{
  outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(0,132,61,.14);
}
.review-form-linha{ display:flex; gap:10px; flex-wrap:wrap; }
.review-form-linha > *{ flex:1 1 200px; }
.review-form-nota{ font-size:12px; color:var(--muted); margin:-4px 0 12px; }
.review-form-acoes{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; margin-top:6px; }
.review-form-acoes .btn-ghost{ border:1px solid var(--line); }

/* Estrelas clicáveis. Os inputs vêm de 5 para 1 no HTML, então o irmão seguinte
   (~) pinta as estrelas de nota menor — é o truque que faz o hover acender da
   esquerda para a direita sem JavaScript. */
.stars-picker{ border:0; padding:0; margin:0 0 12px; }
.stars-picker legend{ font-size:13px; font-weight:700; color:var(--ink); padding:0; margin-bottom:6px; }
/* Os inputs vêm de 5 para 1 no HTML; row-reverse os exibe de 1 a 5 da esquerda
   para a direita, e é isso que faz o seletor `~` acender as estrelas certas. */
.stars-picker-linha{ display:flex; flex-direction:row-reverse; justify-content:flex-end; align-items:center; }
.stars-picker input{ position:absolute; opacity:0; width:0; height:0; }
.stars-picker label{ cursor:pointer; padding:2px; line-height:0; }
.stars-picker svg{ width:30px; height:30px; fill:#dcdfe3; transition:fill .12s; }
/* O `~` sozinho já resolveria, mas ele depende da ordem invertida no DOM e quebra
   silencioso se alguém reordenar o HTML. A classe .is-acesa, posta pelo JS, é a
   fonte de verdade; o `~` fica como reserva pra quem estiver sem JavaScript. */
.stars-picker label.is-acesa svg,
.stars-picker input:checked ~ label svg,
.stars-picker label:hover svg,
.stars-picker label:hover ~ label svg{ fill:var(--gold); }
.stars-picker input:focus-visible + label svg{ outline:2px solid var(--navy); outline-offset:2px; }

@media (max-width:560px){
  .reviews-head{ align-items:stretch; }
  .reviews-head .btn{ justify-content:center; }
  .review-form-acoes .btn{ flex:1; justify-content:center; }
}

/* ------------------------------------------------------------------
   Editor de HTML (descrição do anúncio) — CKEditor 4 de verdade (ver site.js).
   O resto do visual vem do skin dele (moono-lisa); só o encaixe no layout é nosso.
   ------------------------------------------------------------------ */
.cke{ width:100% !important; border-radius:9px !important; overflow:hidden; }
.cke_top{ border-radius:9px 9px 0 0 !important; }
.cke_bottom{ border-radius:0 0 9px 9px !important; }

/* aviso fixo enquanto um admin está "entrando como" um visitante/anunciante */
.impersonate-bar{
  position:sticky; top:0; z-index:999; background:#7a1f1f; color:#fff;
  text-align:center; font-size:13px; padding:8px 14px;
}
.impersonate-bar a{ color:#fff; text-decoration:underline; font-weight:600; margin-left:8px; }

/* ---------------------------------------------------------------- ÍNDICE DE
   CATEGORIAS EM ÁRVORE (/categorias)
   Mesmo desenho do eDirectory (blocks/all-categories.html.twig): colunas com
   a categoria-mãe em destaque e as filhas indentadas embaixo, cada uma com a
   contagem. Substituiu o mosaico plano, que passou a misturar mãe e filha. */
.catindex {
  columns: 3;
  column-gap: 28px;
}
.catindex-grupo {
  break-inside: avoid;
  margin-bottom: 26px;
}
.catindex-mae {
  font-size: 15px;
  margin: 0 0 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--linha, #e6e8ef);
}
.catindex-mae a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--grafite, #1c2331);
  text-decoration: none;
  font-weight: 700;
}
.catindex-mae a:hover { color: var(--verde, #0f9d58); }
.catindex-icone { display: inline-flex; width: 18px; height: 18px; color: var(--verde, #0f9d58); }
.catindex-icone svg { width: 18px; height: 18px; }
.catindex-n {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: #8b93a7;
}
.catindex-filhas { list-style: none; margin: 0; padding: 0 0 0 26px; }
.catindex-filhas li { margin: 0 0 3px; }
.catindex-filhas a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 14px;
  color: #4a5266;
  text-decoration: none;
}
.catindex-filhas a:hover { color: var(--verde, #0f9d58); }
.catindex-filhas .is-vazia a { color: #a6adbd; }

@media (max-width: 900px) { .catindex { columns: 2; } }
@media (max-width: 620px) { .catindex { columns: 1; } }

/* ------------------------------------------- LANDING DE CATEGORIA (/busca?categoria=)
   Título, texto e atalhos das especialidades. Antes disso a página de categoria
   não tinha nem H1 nem texto próprio — só a lista de resultados. */
.cat-h1 {
  color: #fff;
  font-size: 26px;
  line-height: 1.25;
  margin: 0 0 16px;
}
.cat-intro {
  margin: 26px 0 -18px;
  padding: 18px 20px;
  background: var(--cinza-claro, #f6f7f9);
  border: 1px solid var(--linha, #e6e8ef);
  border-radius: 10px;
}
.cat-intro-texto p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #4a5266;
}
.cat-filhas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--linha, #e6e8ef);
}
.cat-filhas a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--linha, #e6e8ef);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  color: var(--grafite, #1c2331);
  text-decoration: none;
}
.cat-filhas a:hover { border-color: var(--verde, #0f9d58); color: var(--verde, #0f9d58); }
.cat-filhas a span { font-size: 11px; font-weight: 700; color: #8b93a7; }

@media (max-width: 620px) {
  .cat-h1 { font-size: 21px; }
  .cat-intro { padding: 14px 15px; }
}

/* ==================================================== TELA DE PAGAMENTO
   PIX copia-e-cola e boleto da cobrança emitida na Cora. O campo do código é
   um <textarea> readonly de propósito: dá pra selecionar e copiar à mão quando
   a área de transferência do navegador falha (acontece em webview de app). */
.pagar-caixa{ max-width:560px; margin:0 auto; }
.pagar-titulo{ font-size:26px; line-height:1.25; margin-bottom:6px; color:var(--grafite,#1c2331); }
.pagar-sub{ font-size:15px; color:#4a5266; margin-bottom:22px; }
.pagar-erro{ padding:12px 14px; border-radius:8px; margin-bottom:18px;
  background:#fdecea; border:1px solid #f3b8b1; color:#9c2c20; font-size:14px; }
.pagar-bloco{ padding:20px; margin-bottom:16px; background:#fff;
  border:1px solid var(--linha,#e6e8ef); border-radius:12px; }
.pagar-bloco h2{ font-size:17px; margin-bottom:6px; color:var(--grafite,#1c2331); }
.pagar-nota{ font-size:13px; color:#6b7280; margin-bottom:12px; }
.pagar-qr{ display:block; width:200px; height:200px; margin:0 auto 14px;
  border:1px solid var(--linha,#e6e8ef); border-radius:8px; background:#fff; }
.pagar-codigo{ width:100%; padding:11px 12px; margin-bottom:10px;
  border:1.5px solid #b3bfd0; border-radius:8px; background:#f8fafc;
  font-family:ui-monospace,"SF Mono",Consolas,monospace; font-size:12.5px;
  line-height:1.5; resize:vertical; word-break:break-all; }
.pagar-bloco .btn{ width:100%; justify-content:center; margin-bottom:8px; }
.pagar-rodape{ font-size:13px; color:#6b7280; text-align:center; margin-top:18px; }

.pagar-ok{ text-align:center; padding:34px 20px; background:#fff;
  border:1px solid var(--linha,#e6e8ef); border-radius:12px; }
.pagar-ok svg{ width:56px; height:56px; margin:0 auto 14px; display:block;
  color:#fff; background:var(--verde,#0f9d58); border-radius:50%; padding:12px; }
.pagar-ok h1{ font-size:24px; margin-bottom:8px; color:var(--grafite,#1c2331); }
.pagar-ok p{ font-size:15px; color:#4a5266; margin-bottom:20px; }

/* campo de CPF/CNPJ no checkout */
.anuncie-campo{ margin-bottom:16px; }
.anuncie-campo label{ display:block; font-size:13.5px; font-weight:700;
  margin-bottom:5px; color:var(--grafite,#1c2331); }
.anuncie-campo input{ width:100%; padding:11px 12px; font:inherit; font-size:15px;
  border:1.5px solid #b3bfd0; border-radius:8px; background:#fff; }
.anuncie-campo input:focus{ outline:none; border-color:var(--verde,#0f9d58);
  box-shadow:0 0 0 3px rgba(15,157,88,.16); }
.anuncie-campo small{ display:block; font-size:12px; color:#6b7280; margin-top:4px; }

@media (max-width:620px){
  .pagar-titulo{ font-size:21px; }
  .pagar-bloco{ padding:16px; }
}

/* Cartão com imagem de verdade. Antes o `.card-media` só existia pra segurar o
   texto "Foto do anúncio" fixo no HTML — nem quem pagava via foto na busca. */
.card-media.tem-imagem{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
/* Sem imagem nenhuma (nem a padrão do portal): o nome da empresa no lugar,
   que comunica melhor que um retângulo vazio. */
.card-media .noimg{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; padding:14px;
  text-align:center; font-size:13px; font-weight:600; line-height:1.35;
  color:#8b93a7;
}
.detail-media--padrao{ opacity:.92; }

/* Índice de bairros — 3 colunas, o desenho do browse-by-location do eDirectory */
.bairro-indice{list-style:none; margin:0; padding:0; columns:3; column-gap:28px;}
.bairro-indice li{break-inside:avoid; margin-bottom:8px;}
.bairro-indice a{display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:7px 10px; border-radius:8px; color:var(--ink); font-size:14.5px;}
.bairro-indice a:hover{background:var(--cream); color:var(--navy-2);}
.bairro-n{flex:none; font-size:12px; font-weight:700; color:var(--muted);
  background:var(--cream); border-radius:20px; padding:1px 8px;}
.bairro-indice a:hover .bairro-n{background:#fff;}
@media (max-width:900px){ .bairro-indice{columns:2;} }
@media (max-width:560px){ .bairro-indice{columns:1;} }

/* Lightbox da galeria — o papel do Fancybox no eDirectory */
.lightbox{
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center;
  justify-content:center; gap:8px; padding:20px;
  background:rgba(14,18,26,.92); backdrop-filter:blur(2px);
}
.lightbox[hidden]{ display:none !important; }
body.tem-lightbox{ overflow:hidden; }
.lightbox-palco{
  margin:0; display:flex; flex-direction:column; align-items:center; gap:12px;
  max-width:min(1100px, 100%); max-height:100%;
}
.lightbox-img{
  max-width:100%; max-height:calc(100vh - 130px); width:auto; height:auto;
  border-radius:10px; box-shadow:0 18px 50px rgba(0,0,0,.5); background:#fff;
}
.lightbox-legenda{ color:#e8ecf3; font-size:13.5px; text-align:center; }
.lightbox-fechar{
  position:absolute; top:14px; right:16px; width:42px; height:42px; line-height:1;
  font-size:30px; color:#fff; background:rgba(255,255,255,.12); border:0;
  border-radius:50%; cursor:pointer;
}
.lightbox-nav{
  flex:none; width:48px; height:48px; font-size:32px; line-height:1; color:#fff;
  background:rgba(255,255,255,.12); border:0; border-radius:50%; cursor:pointer;
}
.lightbox-fechar:hover,.lightbox-nav:hover{ background:rgba(255,255,255,.24); }
.lightbox-nav[hidden]{ display:none !important; }

/* A foto grande do anúncio agora abre a galeria */
.detail-media--zoom{ display:block; cursor:zoom-in; }

/*
 * Em tela estreita as setas SAEM do fluxo e ficam por cima da foto. Enquanto
 * elas ocupavam espaço no flex, sobravam 259px de 375 pra imagem — o que o
 * visitante queria ver virava miniatura. É o que o Fancybox faz no mobile.
 */
@media (max-width:640px){
  .lightbox{ padding:10px; }
  .lightbox-palco{ width:100%; }
  .lightbox-nav{
    position:absolute; top:50%; transform:translateY(-50%);
    width:40px; height:40px; font-size:26px; z-index:2;
  }
  .lightbox-ant{ left:8px; }
  .lightbox-prox{ right:8px; }
  .lightbox-img{ max-height:calc(100vh - 150px); }
  .lightbox-legenda{ padding:0 52px; }
}
.migalha-bairro{font-size:13px; margin:0 0 4px;}
.migalha-bairro a{color:rgba(255,255,255,.82); font-weight:600;}
.migalha-bairro a:hover{color:#fff;}

/* Favoritos, cupons e a área do visitante */
.fav-botao{display:inline-flex; align-items:center; gap:7px; padding:8px 14px;
  border:1px solid var(--line); border-radius:22px; background:#fff; cursor:pointer;
  font:inherit; font-size:13.5px; font-weight:600; color:var(--text);}
.fav-botao svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8;}
.fav-botao:hover{border-color:#e0708a; color:#c2415f;}
.fav-botao.is-on{border-color:#e0708a; color:#c2415f;}
.fav-botao.is-on svg{fill:#e0708a; stroke:#c2415f;}

.visit-abas{display:flex; gap:4px; flex-wrap:wrap; margin-bottom:18px;
  border-bottom:1px solid var(--line);}
.visit-abas a{padding:9px 16px; font-size:14px; font-weight:600; color:var(--muted);
  border-bottom:2px solid transparent; margin-bottom:-1px;}
.visit-abas a:hover{color:var(--navy-2);}
.visit-abas a.is-ativa{color:var(--navy-2); border-bottom-color:var(--green);}

.visit-lista{list-style:none; margin:0; padding:0;}
.visit-lista li{display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:13px 0; border-bottom:1px solid var(--line);}
.visit-lista li:last-child{border-bottom:0;}
.visit-lista-titulo{font-weight:600; color:var(--ink);}
.visit-lista-titulo:hover{color:var(--navy-2);}
.visit-lista-tipo{display:block; font-size:12px; color:var(--muted); margin-top:2px;}
.visit-remover{border:0; background:none; font:inherit; font-size:13px; color:#c0392b;
  cursor:pointer; flex:none;}

.visit-tempo{list-style:none; margin:0; padding:0;}
.visit-tempo li{display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line);
  font-size:14.5px;}
.visit-tempo li:last-child{border-bottom:0;}
.visit-tempo-data{flex:none; width:82px; font-size:12.5px; color:var(--muted); padding-top:2px;}
.visit-tempo-texto{margin:5px 0 0; font-size:13.5px; color:var(--muted);}
.visit-estrelas{color:#e8a33d; letter-spacing:1px;}
.visit-obs{font-size:12.5px; color:var(--muted);}

.cupom{display:flex; align-items:center; justify-content:space-between; gap:18px;
  flex-wrap:wrap; padding:16px 0; border-bottom:1px solid var(--line);}
.cupom:last-child{border-bottom:0;}
.cupom--off{opacity:.55;}
.cupom-info h3{margin:0 0 3px; font-size:16px;}
.cupom-onde,.cupom-validade{margin:0; font-size:13px; color:var(--muted);}
.cupom-codigo{flex:none; text-align:center; background:var(--cream); border:1px dashed var(--line);
  border-radius:10px; padding:10px 18px;}
.cupom-codigo-rot{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted);}
.cupom-codigo strong{display:block; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:19px; letter-spacing:1px; margin:3px 0 5px;}
.cupom-copiar{border:0; background:none; font:inherit; font-size:12.5px; color:var(--navy-2);
  cursor:pointer; font-weight:600;}
.cupom-codigo-grande{display:block; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:22px; letter-spacing:1px; text-align:center; margin:8px 0;}
.cupom-ja{margin:0; font-size:13px; color:var(--muted); text-align:center;}
.sidebar-card--destaque{border-color:var(--green);}

@media (max-width:560px){
  .cupom{flex-direction:column; align-items:stretch;}
  .cupom-codigo{text-align:left;}
  .visit-tempo li{flex-direction:column; gap:4px;}
  .visit-tempo-data{width:auto;}
}

/* Perfil público do membro */
.membro-topo{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.membro-foto{flex:none; width:96px; height:96px; border-radius:50%; object-fit:cover;
  border:1px solid var(--line);}
.membro-foto--vazia{display:flex; align-items:center; justify-content:center;
  background:var(--cream); color:var(--navy-2); font-size:34px; font-weight:800;}
/* `color` explícito: existe um h1 global branco (ele mora no hero verde),
   e aqui o h1 fica sobre card branco — sem isto o nome some. */
.membro-dados h1{margin:0 0 6px; font-size:24px; color:var(--ink);}
.membro-meta{margin:0 0 3px; font-size:13.5px; color:var(--muted);}
.membro-meta strong{color:var(--text);}
.membro-h2{font-size:16px; margin:0 0 12px;}
.membro-bio{margin:0; font-size:14.5px; line-height:1.6;}
.membro-vazio{margin:0; font-size:13.5px; color:var(--muted);}
.membro-avaliacoes{list-style:none; margin:0; padding:0;}
.membro-avaliacoes li{padding:14px 0; border-bottom:1px solid var(--line);}
.membro-avaliacoes li:last-child{border-bottom:0; padding-bottom:0;}
.membro-av-topo{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.membro-av-titulo{margin:6px 0 0; font-weight:600; font-size:14.5px;}
.membro-av-texto{margin:5px 0 0; font-size:14px; line-height:1.55;}
.membro-av-data{margin:6px 0 0; font-size:12.5px; color:var(--muted);}
.perfil-link-publico{margin:0 0 18px; font-size:13.5px; color:var(--muted);
  background:var(--cream); border-radius:8px; padding:10px 14px;}
@media (max-width:520px){ .membro-topo{flex-direction:column; text-align:center;} }

/* ============================================================== A NATTY (chat)
   Canto inferior direito, como botão de WhatsApp de site — foi o desenho que o
   Luiz pediu. `z-index` alto porque ela flutua sobre tudo, mas abaixo dos modais
   de login e contato, que exigem decisão. */
.natty{position:fixed; right:18px; bottom:18px; z-index:60;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}

/* 60px era pequeno demais nos dois — o Luiz reclamou de PC e celular. 82px é o
   tamanho de um botão flutuante de app, que é o vocabulário que a pessoa conhece. */
.natty-bolha{position:relative; width:82px; height:82px; border-radius:50%; border:3px solid #fff;
  padding:0; overflow:hidden; cursor:pointer; background:var(--navy);
  box-shadow:0 6px 22px rgba(0,0,0,.24); transition:transform .18s;}
.natty-bolha:hover{transform:scale(1.06);}
.natty-bolha img{width:100%; height:100%; object-fit:cover; display:block;}
.natty-bolha-ponto{position:absolute; right:5px; bottom:5px; width:16px; height:16px;
  border-radius:50%; background:#2ecc71; border:3px solid #fff;}

/* Atalhos que ela devolve no meio da conversa, e os botões de link do fim do
   funil de anunciar. */
.natty-atalhos--resposta{margin-top:4px;}
.natty-acoes{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 4px;}
.natty-acao{display:inline-block; padding:9px 16px; border-radius:999px;
  border:1.5px solid var(--navy); color:var(--navy); background:#fff;
  font-size:13px; font-weight:700; text-decoration:none;}
.natty-acao:hover{background:#f2f7f4;}
.natty-acao--forte{background:var(--gold); border-color:var(--gold); color:var(--ink);}
.natty-acao--forte:hover{background:var(--gold-dark); border-color:var(--gold-dark);}

@media (max-width:640px){
  .natty{right:14px; bottom:14px;}
  .natty-bolha{width:74px; height:74px;}
}

/* Convite: aparece sozinho depois de 6s, uma vez por visita. */
.natty-convite{position:absolute; right:0; bottom:74px; width:252px; background:#fff;
  border:1px solid var(--line); border-radius:14px; padding:15px 16px 14px;
  box-shadow:0 10px 30px rgba(0,0,0,.16); animation:nattySobe .3s ease-out;}
@keyframes nattySobe{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){ .natty-convite{animation:none;} }
.natty-convite p{margin:0 0 11px; font-size:13.5px; line-height:1.5; color:var(--text);}
.natty-convite strong{color:var(--ink);}
.natty-convite-x{position:absolute; top:7px; right:7px; width:24px; height:24px; border:0;
  background:transparent; color:var(--muted); cursor:pointer; padding:4px;}
.natty-convite-x svg{width:100%; height:100%;}
.natty-convite-abrir{width:100%; border:0; border-radius:9px; padding:9px; cursor:pointer;
  background:var(--navy); color:#fff; font-family:inherit; font-size:13.5px; font-weight:700;}
.natty-convite-abrir:hover{background:var(--navy-2);}

/* Painel da conversa. */
.natty-painel{position:absolute; right:0; bottom:74px; width:352px; max-width:calc(100vw - 36px);
  background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow:0 14px 40px rgba(0,0,0,.2); display:flex; flex-direction:column;
  max-height:min(560px, calc(100vh - 120px));}
.natty-painel[hidden]{display:none;}

.natty-topo{display:flex; align-items:center; gap:11px; padding:13px 14px;
  background:var(--navy); color:#fff; flex:none;}
.natty-topo-foto{width:38px; height:38px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(255,255,255,.35); flex:none;}
.natty-topo-nome{flex:1; min-width:0; line-height:1.25;}
.natty-topo-nome strong{display:block; font-size:15px;}
.natty-topo-nome span{display:block; font-size:11px; color:rgba(255,255,255,.8);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.natty-fechar{border:0; background:rgba(255,255,255,.15); color:#fff; width:30px; height:30px;
  border-radius:8px; cursor:pointer; padding:6px; flex:none;}
.natty-fechar:hover{background:rgba(255,255,255,.28);}
.natty-fechar svg{width:100%; height:100%;}

.natty-conversa{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column;
  gap:10px; background:#f7f8fa;}
.natty-fala{max-width:86%; padding:10px 13px; border-radius:14px; font-size:13.5px;
  line-height:1.55;}
.natty-fala p{margin:0 0 7px;}
.natty-fala p:last-child{margin:0;}
.natty-fala--dela{align-self:flex-start; background:#fff; border:1px solid var(--line);
  border-bottom-left-radius:5px; color:var(--text);}
.natty-fala--sua{align-self:flex-end; background:var(--navy); color:#fff;
  border-bottom-right-radius:5px;}
.natty-pensando{color:var(--muted); letter-spacing:3px;}

.natty-atalhos{display:flex; flex-direction:column; gap:6px; align-items:flex-start;}
.natty-atalhos button{border:1px solid var(--navy); background:#fff; color:var(--navy-2);
  border-radius:999px; padding:7px 14px; font-family:inherit; font-size:12.5px;
  font-weight:600; cursor:pointer; text-align:left;}
.natty-atalhos button:hover{background:var(--navy); color:#fff;}

/* Cartões: sempre para a FICHA, nunca telefone no chat. */
.natty-cartoes{display:flex; flex-direction:column; gap:7px; align-self:stretch;}
.natty-cartao{display:block; background:#fff; border:1px solid var(--line); border-radius:11px;
  padding:10px 12px; transition:border-color .15s;}
.natty-cartao:hover{border-color:var(--navy);}
/* Empresa em destaque na conversa da Natty — mesmo fundo do card--destaque da busca. */
.natty-cartao--destaque{
  position:relative; padding-right:40px;
  border-color:var(--navy);
  background:linear-gradient(180deg,#f2faf5 0%,#fff 100%);
  box-shadow:0 2px 8px rgba(0,132,61,.10);
}
.natty-cartao-estrela{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; fill:var(--gold); stroke:var(--gold-dark); stroke-width:1.2;
  stroke-linejoin:round;
}
.natty-cartao-tipo{display:block; font-size:10px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--navy); margin-bottom:2px;}
.natty-cartao strong{display:block; font-size:13.5px; color:var(--ink); line-height:1.35;}
.natty-cartao small{display:block; font-size:11.5px; color:var(--muted); margin-top:3px;
  line-height:1.4;}
.natty-ver-tudo{font-size:12.5px; font-weight:700; color:var(--navy); padding:5px 2px;}
.natty-ver-tudo:hover{text-decoration:underline;}

.natty-entrada{display:flex; gap:8px; padding:11px 12px; border-top:1px solid var(--line);
  background:#fff; flex:none;}
.natty-entrada input{flex:1; min-width:0; border:1px solid var(--line); border-radius:999px;
  padding:10px 15px; font-family:inherit; font-size:14px; background:#fff; color:var(--text);}
.natty-entrada input:focus{outline:2px solid var(--navy); outline-offset:1px;}
.natty-entrada button{flex:none; width:40px; height:40px; border:0; border-radius:50%;
  background:var(--navy); color:#fff; cursor:pointer; padding:10px;}
.natty-entrada button:hover{background:var(--navy-2);}
.natty-entrada button:disabled{opacity:.5; cursor:default;}
.natty-entrada button svg{width:100%; height:100%;}

.natty-rodape{margin:0; padding:0 14px 10px; font-size:10.5px; color:var(--muted);
  text-align:center; background:#fff; flex:none;}

@media (max-width:480px){
  .natty{right:12px; bottom:12px;}
  .natty-painel{width:calc(100vw - 24px); max-height:calc(100vh - 96px);}
  .natty-convite{width:224px;}
}


/* ---------------------------------------------------------------------------
   Tarja do anúncio-modelo.

   Âmbar, não verde: é aviso ("isto é um exemplo"), e o verde da marca fica
   reservado pra CTA e superfície. Precisa ser impossível de ignorar — o pior
   desfecho aqui seria alguém achar que a empresa fictícia existe e tentar ligar.
--------------------------------------------------------------------------- */
.modelo-tarja{display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  margin:0 0 22px; padding:15px 18px; border-radius:12px;
  background:#fdf6e3; border:1px solid #e8d4a0;}
.modelo-tarja-txt{flex:1 1 320px; font-size:13.5px; line-height:1.6; color:#6b4e00;}
.modelo-tarja-txt strong{color:#4a3600;}
.modelo-tarja-btn{flex:0 0 auto; white-space:nowrap;}

@media (max-width:560px){
  .modelo-tarja{gap:12px;}
  .modelo-tarja-btn{width:100%; text-align:center;}
}


/* Fecho da página /anuncie: convite pra ver os anúncios-modelo antes de decidir. */
.anuncie-fecho{padding-top:0;}
.anuncie-fecho-caixa{max-width:720px; margin:0 auto; text-align:center;
  padding:34px 28px; border-radius:16px;
  background:var(--surface, #f7f9f7); border:1px solid var(--line);}
.anuncie-fecho-caixa h2{font-size:23px; color:var(--ink); margin:0 0 12px;}
.anuncie-fecho-caixa p{font-size:14.5px; line-height:1.65; color:var(--muted);
  margin:0 auto 20px; max-width:600px;}


/* ---------------------------------------------------------------------------
   Imóveis vinculados à imobiliária / corretor.

   No eDirectory a corretora e os imóveis dela são anúncios da MESMA CONTA — não
   existe tabela ligando anúncio a anúncio. Por isso aqui reusamos o cartão do
   /imoveis: cada um é um anúncio inteiro, com página e ficha próprias.
--------------------------------------------------------------------------- */
.imoveis-vinculados{margin:6px 0 30px;}

/* "Solicite uma visita" — o botão da ficha do imóvel. */
.property-visita{margin-left:auto; align-self:center;}

/* "Outras localidades": filial ou segunda unidade do mesmo anunciante. */
.local-extra{padding:10px 0; border-bottom:1px solid var(--line); font-size:13.5px;
  line-height:1.55;}
.local-extra:last-child{border-bottom:0; padding-bottom:0;}
.local-extra strong{display:block; color:var(--ink); font-size:13px; margin-bottom:2px;}
.local-extra span{display:block; color:var(--muted);}
.local-extra .map-directions{margin-top:6px;}

@media (max-width:640px){
  .property-visita{margin-left:0; width:100%; justify-content:center;}
}


/* ---------------------------------------------------------------------------
   Cupons, agenda e artigos DO ANUNCIANTE, dentro da ficha.

   Um cartao so para os tres: o que muda e o selo sobre a imagem (% de desconto
   no cupom, dia/mes no evento, nada no artigo). Mesma grade da vitrine, pra
   pagina nao virar tres linguagens visuais empilhadas.
--------------------------------------------------------------------------- */
.conteudo-grade{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  margin:6px 0 30px;}
.conteudo-cartao{display:flex; flex-direction:column; border:1px solid var(--line);
  border-radius:12px; overflow:hidden; background:#fff; text-decoration:none;
  color:inherit; transition:transform .15s, box-shadow .15s;}
.conteudo-cartao:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.09);}

.conteudo-media{position:relative; aspect-ratio:16/10; background:#f2f4f2;
  overflow:hidden;}
.conteudo-media img{width:100%; height:100%; object-fit:cover; display:block;}

.conteudo-selo{position:absolute; top:10px; left:10px; padding:4px 10px;
  border-radius:999px; background:var(--gold); color:var(--ink);
  font-size:11.5px; font-weight:800;}

.conteudo-data{position:absolute; top:10px; left:10px; width:46px; padding:5px 0;
  border-radius:9px; background:#fff; text-align:center; line-height:1.1;
  font-size:11px; font-weight:700; color:var(--muted);
  box-shadow:0 3px 10px rgba(0,0,0,.16);}
.conteudo-data strong{display:block; font-size:18px; color:var(--ink);}

.conteudo-corpo{padding:13px 15px 15px; display:flex; flex-direction:column; gap:5px;}
.conteudo-corpo h4{font-size:14.5px; line-height:1.35; color:var(--ink); margin:0;}
.conteudo-corpo p{font-size:12.5px; line-height:1.5; color:var(--muted); margin:0;}
.conteudo-corpo small{font-size:11.5px; color:var(--muted);}
.conteudo-preco{font-size:15px; font-weight:800; color:var(--navy);}
.conteudo-preco s{font-size:12.5px; font-weight:600; color:var(--muted);
  margin-right:6px;}

@media (max-width:860px){ .conteudo-grade{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .conteudo-grade{grid-template-columns:1fr;} }


/* ---------------------------------------------------------------------------
   Aviso de anúncio-modelo.

   z-index acima da Natty (60) porque, numa página de exemplo, o primeiro recado
   tem que ser "isto não é uma empresa de verdade". Fecha no clique, no Esc, no
   fundo, ou sozinho em 9 segundos — quem entendeu não fica preso.
--------------------------------------------------------------------------- */
/* `display:flex` numa classe vence o `[hidden]` do navegador (especificidade), e
   sem esta linha o aviso NUNCA some: os botoes de fechar parecem quebrados. */
.modelo-aviso[hidden]{display:none;}
.modelo-aviso{position:fixed; inset:0; z-index:90; display:flex;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(15,25,20,.55); backdrop-filter:blur(2px);
  animation:modeloEntra .18s ease-out;}
@keyframes modeloEntra{from{opacity:0} to{opacity:1}}

.modelo-aviso-caixa{position:relative; width:100%; max-width:470px;
  background:#fff; border-radius:16px; padding:30px 28px 26px;
  box-shadow:0 24px 60px rgba(0,0,0,.30); text-align:center;}

.modelo-aviso-x{position:absolute; top:12px; right:12px; width:32px; height:32px;
  display:flex; align-items:center; justify-content:center; padding:0;
  border:0; border-radius:50%; background:#f1f3f1; color:var(--muted);
  cursor:pointer;}
.modelo-aviso-x:hover{background:#e6e9e6; color:var(--ink);}
.modelo-aviso-x svg{width:15px; height:15px;}

.modelo-aviso-tag{display:inline-block; padding:4px 13px; border-radius:999px;
  background:#fdf0d5; color:#8a5a00; font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:12px;}

.modelo-aviso-caixa h3{font-size:20px; line-height:1.3; color:var(--ink);
  margin:0 0 10px;}
.modelo-aviso-caixa p{font-size:14px; line-height:1.6; color:var(--muted);
  margin:0 0 10px;}
.modelo-aviso-nota{font-size:13px !important; color:var(--ink) !important;
  background:#f6f8f6; border-radius:9px; padding:10px 13px; margin:14px 0 18px !important;}

.modelo-aviso-acoes{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}

@media (max-width:520px){
  .modelo-aviso-caixa{padding:26px 20px 22px;}
  .modelo-aviso-caixa h3{font-size:18px;}
  .modelo-aviso-acoes .btn{width:100%; justify-content:center;}
}

/* ---------------------------------------------------------------- Entrar com o Google
   O botão segue o desenho que o Google publica pra login social: fundo branco,
   borda cinza, o "G" colorido à esquerda. Sair disso é o tipo de coisa que faz a
   pessoa desconfiar do botão justo na hora de entregar a conta dela. */
.btn-google{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:11px 16px; margin-bottom:16px;
  border:1px solid #dadce0; border-radius:9px; background:var(--white);
  font-family:inherit; font-size:14.5px; font-weight:600; color:#3c4043;
  text-decoration:none; cursor:pointer;
}
.btn-google:hover{ background:#f7f8f8; border-color:#c6cace; }
.btn-google svg{ flex-shrink:0; }

/* "ou" entre o botão social e o formulário de senha */
.login-modal-ou{
  display:flex; align-items:center; gap:12px; margin:2px 0 14px;
  color:var(--muted); font-size:12px;
}
.login-modal-ou::before, .login-modal-ou::after{
  content:''; flex:1; height:1px; background:var(--line);
}

/* ---------------------------------------------------------------- Teste grátis no plano
   Quando o plano tem `trial_days`, o cartão inteiro muda de tom: o que vende ali
   deixa de ser o preço e passa a ser o zero. */
.plan.tem-trial{ border:2px solid var(--green); box-shadow:0 18px 40px rgba(0,132,61,.16); }
.plan .badge--trial{
  left:22px; right:auto; background:var(--green); color:#fff;
  display:flex; align-items:center; gap:5px;
}
.plan .badge--trial::before{ content:"★"; font-size:10px; }

.plan .price--trial{ color:var(--green); }
.plan .price--trial span{ color:var(--muted); }
.plan .trial-depois{
  font-size:13.5px; color:var(--muted); margin:-10px 0 16px;
}
/*
 * A nota embaixo do botão.
 *
 * Era 12px cinza e passou batido — o próprio Luiz não a viu ("eu não vi em
 * baixo"). Virou uma faixa verde-clara: continua discreta perto do botão, mas
 * agora tem contorno e se lê. É a promessa que derruba a última objeção, não
 * letra miúda de contrato.
 */
/*
 * A nota embaixo do botão é onde o destaque ficou.
 *
 * O selo voltou a ser uma linha só (o de duas não agradou), então é aqui que a
 * objeção do cartão é respondida — e em tamanho que se lê, porque na primeira
 * versão, 12px cinza, o próprio Luiz não a viu.
 */
.plan .trial-nota{
  font-size:12.5px; line-height:1.5; color:#14532d; text-align:center;
  margin-top:12px; padding:11px 12px; border-radius:9px;
  background:#eaf7f0; border:1px solid #cfeadc;
}
.plan .trial-nota-forte{
  display:block; font-size:14.5px; font-weight:800; color:#0b6b3a;
  margin-bottom:3px; letter-spacing:-.01em;
}
.plan .trial-nota b{ color:#0b6b3a; font-weight:700; }
.btn-trial{ background:var(--green); color:#fff; }
.btn-trial:hover{ background:#188044; }  /* `--green-2` só existe no CSS do admin */

/* Cartão estreito: os dois selos lado a lado se tocariam. */
@media (max-width:420px){
  .plan .badge, .plan .badge--trial{
    position:static; display:inline-flex; margin:0 6px 8px 0; vertical-align:top;
  }
  .plan .badge--trial{ margin-top:0; }
}

/* ------------------------------------------------- Escolha de nível (classificado / evento)
   Três cartões lado a lado. O <label> inteiro é clicável: pedir pra acertar um
   radio de 16px no celular é perder envio. */
.niveis{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:6px 0 18px; }
@media (max-width:720px){ .niveis{ grid-template-columns:1fr; } }

.nivel{
  display:block; border:1.5px solid var(--line); border-radius:12px; padding:14px 15px;
  cursor:pointer; background:var(--white); position:relative;
}
.nivel:hover{ border-color:var(--navy-2); }
.nivel.is-marcado{ border-color:var(--green); background:#f4fbf7; box-shadow:0 6px 18px rgba(0,132,61,.12); }
.nivel input{ position:absolute; opacity:0; pointer-events:none; }

.nivel-topo{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:9px; }
.nivel-topo strong{ font-size:15px; font-weight:800; color:var(--ink); }
.nivel-preco{ font-size:14px; font-weight:800; color:var(--green); white-space:nowrap; }

.nivel-lista{ list-style:none; display:flex; flex-direction:column; gap:5px; margin:0; }
.nivel-lista li{ font-size:12.5px; line-height:1.4; color:var(--text); display:flex; gap:6px; }
.nivel-lista li.sim::before{ content:"✓"; color:var(--green); font-weight:800; flex-shrink:0; }
.nivel-lista li.nao{ color:#9aa3ad; }
.nivel-lista li.nao::before{ content:"—"; flex-shrink:0; }

/* ------------------------------------------------------------ /anuncie: OS TRÊS MÓDULOS
   O visitante não achava onde escolher entre empresa, classificado e evento — a
   página só falava de empresa. Estes três botões são a primeira coisa depois do
   hero, com o subtítulo dizendo pra que serve cada um: "Classificado" sozinho
   não diz nada a quem nunca usou um guia. */
.mod-abas{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:4px;}
.mod-aba{
  display:flex; flex-direction:column; gap:4px; text-align:left; cursor:pointer;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; font:inherit; color:var(--ink);
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.mod-aba:hover{border-color:var(--green); }
.mod-aba strong{font-size:16px; font-weight:700; line-height:1.25;}
.mod-aba small{font-size:12.5px; color:var(--muted); line-height:1.35;}
/* A aba escolhida fica verde de verdade, não só "um pouco diferente": três
   caixas quase iguais deixam a pessoa sem saber qual está valendo. */
.mod-aba.is-ativa{
  border-color:var(--green); background:var(--green); box-shadow:0 4px 14px rgba(0,0,0,.10);
}
.mod-aba.is-ativa strong, .mod-aba.is-ativa small{color:#fff;}
.mod-aba.is-ativa small{opacity:.92;}

.mod-intro{max-width:720px; color:var(--muted); font-size:15px; line-height:1.55; margin:-6px 0 26px;}
.mod-intro strong{color:var(--ink);}
.mod-nota{text-align:center; color:var(--muted); font-size:13px; line-height:1.5; margin-top:22px;}
.mod-nota strong{color:var(--ink);}
.mod-nota--fraca{font-size:12.5px; margin-top:8px;}
/* Nível que NÃO tem o recurso: traço cinza no lugar do ✓ verde, senão a lista do
   grátis parece prometer tudo que a do pago promete. */
.plan li.nao{color:#9aa3ad;}
.plan li.nao::before{content:"—"; color:#9aa3ad;}

/* Quatro abas não cabem lado a lado em tablet: duas por linha. */
@media (max-width:1100px){
  .mod-abas{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:760px){
  .mod-abas{grid-template-columns:1fr;}
  .mod-aba{padding:13px 15px;}
}

/* ---------------------------------------------------------- CATEGORIAS DE EVENTO
   Chips com emoji. Na agenda quem chega quase nunca sabe o nome do evento — sabe
   que quer "alguma coisa pra levar as crianças". O emoji faz a varredura ser de
   olho, e não de leitura, que é o que se faz num celular na fila do banco. */
.ev-cats{display:flex; flex-wrap:wrap; gap:8px;}
.ev-cat{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  background:var(--white); border:1px solid var(--line); border-radius:999px;
  padding:7px 14px; font-size:13.5px; font-weight:600; color:var(--ink);
  text-decoration:none; transition:border-color .15s, background .15s, color .15s;
}
.ev-cat:hover{border-color:var(--green); color:var(--green);}
.ev-cat.is-ativa{background:var(--green); border-color:var(--green); color:#fff;}
/* Ícone traçado, não emoji: herda a cor do chip (branco no ativo, grafite no
   normal) e fica do tamanho certo em qualquer aparelho. */
.cat-icone{width:16px; height:16px; flex:0 0 16px;}
/* Em caixa que NÃO é flex (a lista de checkbox do formulário público) o SVG é
   inline: precisa do próprio respiro e de descer 3px pra sentar na linha do texto. */
.adm-checkbox-item .cat-icone{vertical-align:-3px; margin-right:6px; color:var(--muted);}
.ev-cats--ficha{margin-top:12px;}
.ev-cats--ficha .ev-cat{padding:5px 12px; font-size:12.5px;}

@media (max-width:760px){
  /* Rolagem lateral em vez de quebrar em cinco linhas e empurrar os eventos
     pra fora da primeira tela. */
  .ev-cats{flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch;}
  .ev-cats::-webkit-scrollbar{height:0;}
  .ev-cats--ficha{flex-wrap:wrap; overflow:visible;}
}

/* ==========================================================================
   ZAP DA NATTY — a página /natty, instalada no celular.

   Tela cheia de app de mensagens: logo fino no topo, a conversa ocupando o resto
   e a caixa de texto colada embaixo. Cores do guia, NÃO as do WhatsApp — além da
   marca da Meta, a pessoa acharia que fala com um humano.

   No computador vira uma coluna com largura de celular no meio da tela: é um
   app de celular, e esticado em 1920px não parece conversa.
   ========================================================================== */
.zap-html, .zap-html body{height:100%;}
.zap-corpo{background:#e6ebe7; overflow:hidden;}
.zap-app{display:flex; flex-direction:column; height:100vh; height:100dvh; max-width:520px;
  margin:0 auto; background:#fff; box-shadow:0 0 40px rgba(0,0,0,.08);}

/* O entalhe do iPhone: o topo desce o quanto o aparelho pedir. */
.zap-marca{display:flex; align-items:center; justify-content:space-between; gap:10px; flex:none;
  padding:calc(8px + env(safe-area-inset-top)) 14px 8px; background:#fff;
  border-bottom:1px solid var(--line);}
.zap-logo{display:block; line-height:0;}
.zap-logo img{height:30px; width:auto;}
.zap-instalar{display:inline-flex; align-items:center; gap:6px; border:0; border-radius:999px;
  background:var(--gold); color:var(--ink); font-family:inherit; font-size:13px; font-weight:800;
  padding:8px 14px; cursor:pointer;}
.zap-instalar svg{width:16px; height:16px;}
.zap-instalar[hidden]{display:none;}
/* Veio da faixa do site: o botão chama a atenção três vezes e para. */
.zap-instalar.is-chamando{animation:zapChama 1.2s ease-in-out 3;}
@keyframes zapChama{0%,100%{transform:scale(1);} 50%{transform:scale(1.08); box-shadow:0 0 0 6px rgba(240,180,41,.3);}}
@media (prefers-reduced-motion:reduce){ .zap-instalar.is-chamando{animation:none;} }

/* O chat do balão, desmontado do canto e esticado na tela. `.natty.natty--app`
   (duas classes) vence o `.natty` fixo e as regras de celular do balão. */
.natty.natty--app{position:static; right:auto; bottom:auto; z-index:auto; flex:1; min-height:0;
  display:flex; flex-direction:column;}
.natty--app .natty-painel{position:static; width:auto; max-width:none; max-height:none; flex:1;
  min-height:0; border:0; border-radius:0; box-shadow:none;}
.natty--app .natty-topo{padding:11px 14px;}
.natty--app .natty-topo-foto{width:42px; height:42px;}
.natty--app .natty-topo-nome strong{font-size:16px;}
.natty--app .natty-conversa{background:#f2f4f2; padding:16px 14px;}
.natty--app .natty-fala{font-size:15px; max-width:88%;}
.natty--app .natty-atalhos button{font-size:14px; padding:9px 16px;}
.natty--app .natty-cartao strong{font-size:15px;}
/* 16px na caixa de texto: abaixo disso o iPhone dá zoom na página ao tocar. */
.natty--app .natty-entrada input{font-size:16px; padding:11px 16px;}
.natty--app .natty-entrada button{width:44px; height:44px;}
.natty--app .natty-rodape{padding-bottom:calc(8px + env(safe-area-inset-bottom));}

/* Passo a passo de instalação — sobe de baixo, como folha de app. */
.zap-folha{position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.45);
  display:flex; align-items:flex-end; justify-content:center;}
.zap-folha[hidden]{display:none;}
.zap-folha-caixa{width:100%; max-width:520px; background:#fff; border-radius:18px 18px 0 0;
  padding:20px 20px calc(18px + env(safe-area-inset-bottom)); animation:zapSobe .25s ease-out;}
@keyframes zapSobe{from{transform:translateY(40px); opacity:0;} to{transform:none; opacity:1;}}
@media (prefers-reduced-motion:reduce){ .zap-folha-caixa{animation:none;} }
.zap-folha-titulo{display:block; font-size:17px; color:var(--ink); margin-bottom:12px;}
.zap-passos{margin:0 0 12px 20px; padding:0; font-size:15px; line-height:1.55; color:var(--text);}
.zap-passos li{margin-bottom:8px;}
.zap-passo-icone{display:inline-block; width:19px; height:19px; vertical-align:-4px; color:var(--navy);}
.zap-passos-nota{font-size:13px; color:var(--muted); margin:0 0 14px;}
/* Cada bloco diz para qual situação serve (data-para); só o da situação aparece. */
.zap-folha [data-para]{display:none;}
.zap-folha[data-tipo="ios"] [data-para~="ios"],
.zap-folha[data-tipo="android"] [data-para~="android"],
.zap-folha[data-tipo="instalado"] [data-para~="instalado"]{display:block;}
.zap-folha-intro{margin:0 0 14px; font-size:15px; line-height:1.55; color:var(--text);}
.zap-dicas-bloco{margin:0 0 14px; padding:12px 14px; background:#f6f7f5; border-radius:12px;}
.zap-dicas-bloco .zap-passos-nota{margin:0 0 6px; color:var(--ink);}
.zap-dicas{margin:0 0 0 18px; padding:0; font-size:13.5px; line-height:1.5; color:var(--text);}
.zap-dicas li{margin-bottom:6px;}
.zap-dicas li:last-child{margin-bottom:0;}
.zap-folha-ok{width:100%; border:0; border-radius:12px; background:var(--navy); color:#fff;
  font-family:inherit; font-size:15px; font-weight:700; padding:13px; cursor:pointer;}

/* ------------------------------------------------ A FAIXA que convida a instalar
   Fina, no fluxo da página (empurra, não cobre) — o Google penaliza aviso que
   cobre o conteúdo no celular. Desce do topo e some pelo X. */
.zap-faixa{display:flex; align-items:center; gap:10px; padding:0 8px 0 12px; background:#fff;
  border-bottom:1px solid var(--line); overflow:hidden; max-height:0; opacity:0;
  transition:max-height .35s ease, opacity .35s ease, padding .35s ease;}
.zap-faixa[hidden]{display:none;}
.zap-faixa.is-visivel{max-height:96px; opacity:1; padding:8px 8px 8px 12px;}
@media (prefers-reduced-motion:reduce){ .zap-faixa{transition:none;} }
.zap-faixa img{width:38px; height:38px; border-radius:50%; object-fit:cover; flex:none;}
.zap-faixa-texto{flex:1; min-width:0; line-height:1.25;}
.zap-faixa-texto strong{display:block; font-size:14px; color:var(--ink);}
/* Quebra em duas linhas em vez de cortar: com foto, botão e X, em 375px a frase
   virava "como um co…" — e o "como um zap" é justamente o que explica o convite. */
.zap-faixa-texto span{display:block; font-size:12px; line-height:1.3; color:var(--muted);}
.zap-faixa-abrir{flex:none; background:var(--navy); color:#fff; font-size:13px; font-weight:700;
  border-radius:999px; padding:8px 14px;}
.zap-faixa-x{flex:none; width:32px; height:32px; border:0; background:transparent;
  color:var(--muted); padding:7px; cursor:pointer;}
.zap-faixa-x svg{width:100%; height:100%;}

/* ------------------------------------------------------------ IMÓVEIS DO DONO (11/09)
   O bloco `.imv` (dados do imóvel) entra em três formulários — o público, o do
   painel e o do admin —, então se estiliza sozinho, sem depender de .claim-form
   nem de .spn-campo. O admin não carrega este arquivo: tem cópia no sitemgr.css. */
.plans.plans--2{grid-template-columns:repeat(2,minmax(0,340px)); justify-content:center;}
@media (max-width:760px){ .plans.plans--2{grid-template-columns:1fr;} }

.imv{margin:2px 0 4px;}
.imv [hidden]{display:none !important;}
.imv .imv-finalidade{border:0; padding:0; margin:0 0 14px; min-width:0;}
.imv .imv-rotulo{display:block; font-size:13px; font-weight:700; color:var(--ink); padding:0; margin:0 0 6px;}
.imv .imv-obrig{color:#c0392b;}
.imv .imv-opcoes{display:flex; flex-wrap:wrap; gap:8px;}
.imv .imv-opcao{
  display:inline-flex; align-items:center; gap:8px; margin:0; cursor:pointer;
  border:1px solid var(--line); border-radius:999px; padding:8px 14px; background:var(--white);
  font-size:13.5px; font-weight:600; color:var(--ink);
}
.imv .imv-opcao input{width:auto; margin:0; padding:0; accent-color:var(--green);}
.imv .imv-opcao:has(input:checked){border-color:var(--green); background:#f4fbf7;}
.imv .imv-grade{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 14px;}
.imv .imv-grade--4{grid-template-columns:repeat(4,minmax(0,1fr));}
.imv .imv-campo{display:block; margin:0 0 12px; font-weight:400;}
.imv .imv-campo input{
  width:100%; margin:0; border:1px solid var(--line); border-radius:9px; padding:9px 12px; box-sizing:border-box;
  font-family:inherit; font-size:13.5px; color:var(--text); background:var(--white);
}
.imv .imv-campo input:focus{outline:2px solid var(--navy-2); outline-offset:-1px;}
.imv-ajuda{font-size:12px; color:var(--muted); line-height:1.45; margin:-4px 0 12px;}
@media (max-width:640px){ .imv .imv-grade--4{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:400px){
  .imv .imv-grade{grid-template-columns:1fr;}
  .imv .imv-grade--4{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* /imoveis/anunciar */
.claim-form select{
  width:100%; margin-top:5px; border:1px solid var(--line); border-radius:9px; padding:9px 12px;
  font-family:inherit; font-size:13.5px; color:var(--text); background:var(--white);
}
.imv-entrar{background:var(--white); border:1px solid var(--line); border-radius:14px; padding:30px 24px; text-align:center;}
.imv-entrar h1{font-size:24px; color:var(--ink); margin-bottom:8px;}
.imv-entrar p{color:var(--muted); max-width:500px; margin:0 auto 18px; line-height:1.55;}
.imv-entrar-acoes{display:flex; flex-direction:column; align-items:stretch; gap:10px; max-width:300px; margin:0 auto 16px;}
.imv-entrar-acoes > a, .imv-entrar-acoes > button{width:100%; justify-content:center;}
.imv-entrar .imv-ajuda{margin:0;}
.imv-corretor{
  display:flex; flex-direction:column; gap:3px; background:#f4fbf7; border:1px solid #bfe3cc;
  border-radius:12px; padding:14px 16px; margin-bottom:18px; font-size:13.5px; line-height:1.5; color:var(--text);
}
.imv-corretor strong{color:var(--ink); font-size:14.5px;}
.imv-fotos-limite{font-weight:500; color:var(--muted);}
.claim-form .imv-autorizo{display:flex; align-items:flex-start; gap:9px; margin:4px 0 0; cursor:pointer;}
.claim-form .imv-autorizo input{width:auto; margin:2px 0 0; padding:0; flex-shrink:0; accent-color:var(--green);}

/* /imoveis: a porta para quem quer anunciar o seu. */
.imv-cta{
  display:flex; align-items:center; justify-content:space-between; gap:12px 18px; flex-wrap:wrap;
  background:#f4fbf7; border:1px solid #bfe3cc; border-radius:12px; padding:14px 18px; margin:0 0 20px;
}
.imv-cta strong{display:block; font-size:15px; color:var(--ink); margin-bottom:2px;}
.imv-cta span{font-size:13px; color:var(--muted); line-height:1.45;}
@media (max-width:640px){ .imv-cta .btn{width:100%; justify-content:center;} }

/* ==========================================================================
   CAMPOS DE FORMULÁRIO — uma cara só, e visível (11/09)

   O Luiz: *"em todos os campos com caixa de texto, botão opção, botão radio eu
   mal enxergo eles"*. A borda era a `--line` (#e7e4db), a mesma linha de
   separação de seção: num monitor claro o campo sumia no fundo. Aqui a borda
   ganha cor e espessura própria, o foco ganha um anel verde, e o checkbox e o
   radio ficam do tamanho do dedo.

   Fica no fim do arquivo de propósito: vale por cima das regras antigas de cada
   formulário (.claim-form, .lead-form, .review-form...) sem mexer em nenhuma.
   ========================================================================== */
:root{
  --campo-borda:#c2c8d0;
  --campo-borda-forte:#98a1ad;
  --campo-foco:rgba(0,132,61,.18);
}

.form-input,
.claim-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.claim-form select,
.claim-form textarea,
.lead-form input:not([type="checkbox"]),
.lead-form textarea,
.review-form input[type="text"],
.review-form input[type="email"],
.review-form textarea,
.order-field select,
.imv .imv-campo input{
  border:1.5px solid var(--campo-borda);
  border-radius:10px;
  background:var(--white);
  box-shadow:0 1px 2px rgba(17,17,17,.05);
  transition:border-color .15s, box-shadow .15s;
}
.form-input,
.claim-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.claim-form select,
.claim-form textarea,
.imv .imv-campo input{
  padding:11px 13px;
  font-size:14.5px;
}
.claim-form textarea, .lead-form textarea, .review-form textarea{ line-height:1.55; }

.form-input:hover,
.claim-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
.claim-form select:hover,
.claim-form textarea:hover,
.lead-form input:not([type="checkbox"]):hover,
.review-form input:hover,
.imv .imv-campo input:hover{ border-color:var(--campo-borda-forte); }

.form-input:focus,
.claim-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.claim-form select:focus,
.claim-form textarea:focus,
.lead-form input:not([type="checkbox"]):focus,
.lead-form textarea:focus,
.review-form input:focus,
.review-form textarea:focus,
.order-field select:focus,
.imv .imv-campo input:focus{
  outline:none;
  border-color:var(--navy);
  box-shadow:0 0 0 3px var(--campo-foco);
}
.form-input::placeholder,
.claim-form input::placeholder,
.claim-form textarea::placeholder,
.lead-form input::placeholder,
.lead-form textarea::placeholder,
.imv .imv-campo input::placeholder{ color:#9aa3ad; }

/* O select não mostrava que era um select: agora tem a seta desenhada. */
.claim-form select, .order-field select{
  appearance:none; -webkit-appearance:none;
  padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 11px center;
  background-size:17px;
  cursor:pointer;
}

/* Caixa de marcar e botão de opção: 18px e verde da marca. */
.form-checkbox input[type="checkbox"],
.claim-form input[type="checkbox"],
.claim-form input[type="radio"],
.review-form input[type="checkbox"],
.lead-consent input[type="checkbox"]{
  width:18px; height:18px; flex:0 0 18px; accent-color:var(--navy); cursor:pointer;
}

/* Campo de arquivo: caixa tracejada, que também é alvo de clique. */
.claim-form input[type="file"]{
  width:100%; margin-top:5px; padding:12px 13px; font-size:13.5px; cursor:pointer;
  border:1.5px dashed var(--campo-borda); border-radius:10px; background:#fbfbfa; color:var(--text);
}
.claim-form input[type="file"]:hover{ border-color:var(--navy); background:#f4fbf7; }
.claim-form input[type="file"]::file-selector-button{
  margin-right:12px; padding:7px 13px; font:inherit; font-size:13px; font-weight:700; cursor:pointer;
  color:var(--white); background:var(--navy); border:0; border-radius:8px;
}

/* Aviso de "imagem reduzida" no formulário público (no admin ele já existia). */
.claim-form .adm-redim-aviso{ font-size:12.5px; color:var(--muted); margin:6px 0 0; }

/* ---------------------------------------------------------- miniatura das fotos */
.previa-fotos{ display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 0; }
.previa-item{
  position:relative; width:104px; border:1px solid var(--line); border-radius:10px;
  overflow:hidden; background:#f4f5f7;
}
.previa-item img{ display:block; width:100%; height:78px; object-fit:cover; }
.previa-capa{
  position:absolute; top:6px; left:6px; background:var(--navy); color:#fff;
  font-size:10.5px; font-weight:800; padding:2px 7px; border-radius:999px;
}
.previa-legenda{ display:block; padding:4px 7px; font-size:11px; color:var(--muted); background:var(--white); }
.previa-x{
  position:absolute; top:5px; right:5px; width:23px; height:23px; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(17,17,17,.62); color:#fff; border:0; border-radius:50%;
}
.previa-x svg{ width:13px; height:13px; }
.previa-x:hover{ background:#c0392b; }

/* ------------------------------------------------- telefone com país ao lado */
.campo-tel{ display:flex; align-items:stretch; margin-top:5px; }
.campo-tel-ddi,
.campo-tel-pais{
  display:flex; align-items:center; padding:0 10px; white-space:nowrap;
  font-size:13.5px; font-weight:700; color:var(--muted);
  background:#f4f5f7; border:1.5px solid var(--campo-borda); border-right:0;
  border-radius:10px 0 0 10px;
}
/* O seletor tem largura própria: `.claim-form select` manda width:100% e, sem
   esta regra mais específica, ele comia o campo do número inteiro. */
.campo-tel .campo-tel-pais{
  margin-top:0 !important; flex:0 0 auto; width:auto; min-width:104px; max-width:128px; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center; padding-right:24px;
}
.campo-tel input[type="tel"]{
  margin-top:0 !important; border-radius:0 10px 10px 0 !important; min-width:0; flex:1 1 auto; width:auto;
}
.campo-tel:focus-within .campo-tel-ddi,
.campo-tel:focus-within .campo-tel-pais{ border-color:var(--navy); color:var(--ink); }

/* Faixa e botão dos planos pagos em manutenção (trava de 11/09). */
.mod-manutencao{
  max-width:720px; margin:0 auto 18px; padding:11px 15px; text-align:center;
  background:#fdf3d8; border:1px solid #efdca6; border-radius:10px;
  font-size:13.5px; line-height:1.5; color:#7a5804;
}
.mod-manutencao strong{color:#5d4303;}
.mod-btn-off{opacity:.75; cursor:not-allowed; color:var(--muted); background:#f4f5f7;}

/* O QR do PIX é desenhado por nós (SVG), não vem como imagem da Cora. */
.pagar-qr svg{ display:block; width:100%; height:100%; }

/* ------------------------------------------------------------ FOTOS, UMA POR VEZ (12/09)
   Cada foto sobe assim que é escolhida. A capa fica em primeiro e não se arrasta:
   é ela que aparece na busca, e trocar sem querer seria fácil demais. */
.fotos{ margin:6px 0 0; }
.fotos-grade{ display:flex; flex-wrap:wrap; gap:10px; }
.fotos--vazio .fotos-grade{ display:none; }
.fotos-vazio{ display:none; font-size:13px; color:var(--muted); margin:0 0 10px; }
.fotos--vazio .fotos-vazio{ display:block; }

.fotos-item{
  position:relative; width:120px; border:1px solid var(--line); border-radius:10px;
  overflow:hidden; background:#f4f5f7; cursor:grab;
}
.fotos-item img{ display:block; width:100%; height:90px; object-fit:cover; }
.fotos-item.is-arrastando{ opacity:.5; }
.fotos-item[data-capa]{ border-color:var(--green); cursor:default; }

.fotos-capa{
  display:none; position:absolute; top:6px; left:6px; background:var(--navy); color:#fff;
  font-size:10.5px; font-weight:800; padding:2px 8px; border-radius:999px;
}
.fotos-item[data-capa] .fotos-capa{ display:block; }

.fotos-acao{
  position:absolute; padding:0; cursor:pointer; font:inherit; border:0;
}
.fotos-acao--x{
  top:5px; right:5px; width:23px; height:23px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(17,17,17,.62); color:#fff;
}
.fotos-acao--x svg{ width:13px; height:13px; }
.fotos-acao--x:hover{ background:#c0392b; }
.fotos-acao--capa{
  left:0; right:0; bottom:0; padding:5px 0; font-size:11px; font-weight:700;
  background:rgba(17,17,17,.72); color:#fff; opacity:0; transition:opacity .15s;
}
.fotos-item:hover .fotos-acao--capa{ opacity:1; }
.fotos-item[data-capa] .fotos-acao--capa{ display:none; }

.fotos-botao{
  display:inline-flex; align-items:center; gap:8px; margin:12px 0 0; cursor:pointer;
  border:1.5px dashed var(--campo-borda, #c2c8d0); border-radius:10px; padding:11px 16px;
  font-size:13.5px; font-weight:700; color:var(--ink); background:#fbfbfa;
}
.fotos-botao:hover{ border-color:var(--navy); background:#f4fbf7; }
.fotos-botao input{ position:absolute; width:1px; height:1px; opacity:0; }

.fotos-aviso{ font-size:12.5px; color:var(--muted); margin:8px 0 0; }
.fotos-aviso--erro{ color:#8a1c1c; font-weight:600; }

@media (max-width:480px){
  .fotos-item{ width:calc(50% - 5px); }
  .fotos-item img{ height:104px; }
  .fotos-botao{ width:100%; justify-content:center; }
}

/* ------------------------------- check-out: ciclo (mensal/anual) e cupom */
.ck-ciclos{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px;}
.ck-ciclo{display:flex; align-items:center; gap:9px; border:1px solid var(--line);
  border-radius:10px; padding:12px 14px; cursor:pointer; font-weight:600; font-size:14px;}
.ck-ciclo:has(input:checked){border-color:var(--navy); background:#f2f8f5; color:var(--navy-2);}
.ck-ciclo input{width:17px; height:17px; accent-color:var(--navy);}
.ck-desconto strong{color:#127a3d;}
.price-anual{margin:-6px 0 10px; font-size:13px; color:var(--muted);}
.ck-cupom{margin:16px 0 4px;}
.ck-cupom label{display:block; font-size:13px; font-weight:600; margin-bottom:6px;}
.ck-cupom-linha{display:flex; gap:8px;}
.ck-cupom-linha input{flex:1; min-width:0;}
.ck-cupom-erro{display:block; margin-top:6px; color:#b42318; font-size:12.5px;}
.ck-cupom-ok{display:block; margin-top:6px; color:#127a3d; font-size:12.5px;}
@media (max-width:560px){ .ck-ciclos{grid-template-columns:1fr;} }

/* ============================================ A PONTE, A IA E AS FUNCIONALIDADES
   Blocos de venda pedidos pelo Luiz em 15/09: o papel do guia (ponte entre o
   cliente e a empresa), a inteligência artificial e a lista de funcionalidades. */

.ponte{background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.ponte-inner{display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; padding-top:52px; padding-bottom:52px;}
.ponte-texto h2{font-size:30px; line-height:1.2; color:var(--ink); margin-bottom:14px;}
.ponte-texto p{color:var(--text); font-size:15.5px; margin-bottom:12px; max-width:56ch;}
.ponte-reforco{color:var(--muted); font-size:14.5px;}
.ponte-texto .btn{margin-top:8px;}
.ponte-passos{list-style:none; display:flex; flex-direction:column; gap:14px;}
.ponte-passos li{display:flex; gap:14px; align-items:flex-start; background:var(--cream); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px;}
.ponte-passo-icone{flex-shrink:0; width:38px; height:38px; border-radius:11px; background:var(--white); border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; color:var(--navy-2);}
.ponte-passo-icone svg{width:20px; height:20px;}
.ponte-passos strong{display:block; font-size:14.5px; color:var(--ink);}
.ponte-passos p{font-size:13.5px; color:var(--muted); margin-top:2px;}

.func-sub{color:var(--muted); font-size:14.5px; margin-top:6px;}
.func-grade{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.func-item{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:22px 20px;}
.func-icone{display:inline-flex; width:46px; height:46px; align-items:center; justify-content:center; border-radius:12px; background:#eef4f0; color:var(--navy-2); margin-bottom:12px;}
.func-icone svg{width:26px; height:26px;}
.func-item h3{font-size:15px; color:var(--ink); margin-bottom:6px;}
.func-item p{font-size:13.5px; color:var(--muted); line-height:1.55;}

.ia-bloco{background:var(--navy); color:#fff;}
.ia-inner{padding-top:52px; padding-bottom:52px;}
.ia-cabeca{max-width:760px; margin-bottom:26px;}
.ia-cabeca h2{font-size:29px; line-height:1.2; margin-bottom:12px;}
.ia-cabeca p{font-size:15.5px; color:rgba(255,255,255,.88);}
.section-tag--claro{background:rgba(255,255,255,.16); color:#fff;}
.ia-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
.ia-card{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:var(--radius); padding:24px;}
.ia-icone{display:inline-flex; width:42px; height:42px; align-items:center; justify-content:center; border-radius:11px; background:rgba(255,255,255,.14); color:#fff; margin-bottom:12px;}
.ia-icone svg{width:22px; height:22px;}
.ia-card h3{font-size:17px; margin-bottom:8px;}
.ia-card p{font-size:14px; color:rgba(255,255,255,.88); line-height:1.6;}
.ia-link{display:inline-block; margin-top:12px; font-size:13.5px; font-weight:700; color:var(--gold); border-bottom:1px solid rgba(240,180,41,.5);}

/* O card do Tráfego Pago: "tudo do Essencial" e o destaque da gestão de campanhas. */
.plan--ads{border:2px solid var(--navy); box-shadow:0 18px 40px rgba(0,132,61,.16);}
.plan .badge--ads{background:var(--navy); color:#fff;}
.plan-tudo{font-size:13.5px; color:var(--text); margin-bottom:12px;}
.plan-ads{flex:1; background:#eef4f0; border:1px solid #cfe3d6; border-radius:12px; padding:18px; margin-bottom:20px;}
.plan-ads-icone{display:inline-flex; width:38px; height:38px; align-items:center; justify-content:center; border-radius:11px; background:var(--navy); color:#fff; margin-bottom:10px;}
.plan-ads-icone svg{width:20px; height:20px;}
.plan-ads > strong{display:block; font-size:16px; line-height:1.3; color:var(--navy-2); margin-bottom:8px;}
.plan-ads > p{font-size:13.5px; color:var(--text); line-height:1.55; margin-bottom:10px;}
.plan-ads-lista{list-style:none; display:flex; flex-direction:column; gap:7px; margin-bottom:10px;}
.plan-ads-lista li{font-size:13px; color:var(--text); display:flex; gap:8px;}
.plan-ads-lista li::before{content:"✓"; color:var(--navy-2); font-weight:800;}
.plan-ads small{display:block; font-size:12px; color:var(--muted); line-height:1.45;}

@media (max-width:980px){
  .ponte-inner{grid-template-columns:1fr; gap:28px;}
  .func-grade{grid-template-columns:repeat(2,1fr);}
  .ia-cards{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .func-grade{grid-template-columns:1fr;}
  .ponte-texto h2, .ia-cabeca h2{font-size:24px;}
}

/* Check-out do Lisboa: aviso de pagamento pelo Stripe. */
.ck-stripe{display:flex; gap:10px; align-items:flex-start; background:#f4f6f8; border:1px solid var(--line);
  border-radius:10px; padding:12px 14px; margin:6px 0 18px; font-size:13.5px; color:var(--text);}
.ck-stripe svg{width:20px; height:20px; flex-shrink:0; color:var(--navy-2); margin-top:1px;}

/* ---------------------------------------------------- /anuncie: hero + passos (28/09) */
.anuncie-hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:center;}
@media (max-width:900px){.anuncie-hero-grid{grid-template-columns:1fr;}}
.anuncie-hero-ctas{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px;}
.anuncie-hero-ctas .btn-ghost-claro{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.35); color:#fff;
}
.anuncie-hero-ctas .btn-ghost-claro:hover{background:rgba(255,255,255,.16);}

/* Mockup de resultado de busca — mesma ideia da /porque-anunciar, versão estática */
.hero-serp{background:var(--white); border-radius:16px; box-shadow:0 24px 55px rgba(0,0,0,.28); overflow:hidden;}
.hero-serp-bar{display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line);}
.hero-serp-logo{font-family:inherit; font-weight:800; font-size:18px; letter-spacing:-.3px;}
.hero-serp-logo span:nth-child(1){color:#4285F4;} .hero-serp-logo span:nth-child(2){color:#EA4335;}
.hero-serp-logo span:nth-child(3){color:#FBBC05;} .hero-serp-logo span:nth-child(4){color:#4285F4;}
.hero-serp-logo span:nth-child(5){color:#34A853;} .hero-serp-logo span:nth-child(6){color:#EA4335;}
.hero-serp-input{flex:1; border:1px solid #dfe1e5; border-radius:99px; padding:8px 16px; font-size:13.5px; color:#202124;}
.hero-serp-body{padding:16px 18px 20px;}
.hero-serp-result{border:2px solid var(--gold); background:#fffaf0; border-radius:12px; padding:14px 16px; position:relative;}
.hero-serp-pos{position:absolute; top:-11px; left:14px; background:var(--navy); color:#fff; font-size:11px; font-weight:700; padding:2px 10px; border-radius:99px;}
.hero-serp-url{color:#1a7d3c; font-size:12px;}
.hero-serp-title{color:#1a0dab; font-size:15.5px; font-weight:700; margin:2px 0;}
.hero-serp-desc{color:#4d5156; font-size:12.5px; line-height:1.4;}
.hero-serp-ghost{margin-top:14px; opacity:.4;}
.hero-serp-ghost .bar{height:9px; border-radius:6px; background:#e3e6ea; margin:7px 0;}
.hero-serp-ghost .bar.w80{width:80%;} .hero-serp-ghost .bar.w60{width:58%;}

/* Ícone nas abas "O que você quer publicar" */
.mod-aba{ display:flex; flex-direction:column; gap:8px; }
.mod-aba-icone{
  width:34px; height:34px; border-radius:9px; background:#eef1fb; color:var(--navy-2);
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:background .15s ease, color .15s ease;
}
.mod-aba-icone svg{width:18px; height:18px;}
.mod-aba.is-ativa .mod-aba-icone{background:rgba(255,255,255,.18); color:#fff;}

/* Passos numerados com mais presença (usado em "3 passos simples") */
.passo-grade{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:760px){.passo-grade{grid-template-columns:1fr;}}
.passo-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:24px 20px; position:relative;}
.passo-numero{
  width:40px; height:40px; border-radius:50%; background:var(--navy); color:var(--gold);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px; margin-bottom:14px;
}
.passo-card h4{font-size:15px; font-weight:800; color:var(--ink); margin-bottom:4px;}
.passo-card p{font-size:13px; color:var(--muted); line-height:1.5;}
.passo-linha{display:none;}
@media (min-width:761px){
  .passo-card:not(:last-child)::after{
    content:''; position:absolute; top:44px; right:-24px; width:32px; height:2px;
    background:repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 10px); z-index:1;
  }
}