@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');
/* ===================================================================
   MAXSELL — GUIA DE EMPRESAS — SISTEMA VISUAL CUSTOMIZADO
   Inspirado na hierarquia/dinamismo do demo eDirectory (localsearch.demodirectory.com)
   Identidade: maxsell.netlify.app — Roxo #5510D3 / Laranja #FD660E / Preto #1B1B1B
   =================================================================== */

:root{
  --ms-roxo: #5510D3;
  --ms-roxo-claro: #8A63F2;
  --ms-roxo-escuro: #38089A;
  --ms-laranja: #FD660E;
  --ms-laranja-escuro: #E0530A;
  --ms-preto: #1B1B1B;
  --ms-branco: #FFFFFF;
  --ms-cinza-bg: #F6F5FB;
  --ms-cinza-texto: #6B6B76;
  --ms-borda: #ECEAF5;
  --ms-radius-sm: 10px;
  --ms-radius: 16px;
  --ms-radius-lg: 24px;
  --ms-shadow: 0 10px 30px rgba(27,10,60,.10);
  --ms-shadow-hover: 0 18px 40px rgba(85,16,211,.22);
  --ms-ease: cubic-bezier(.22,1,.36,1);
}

/* -------------------------------------------------------------
   0. BASE / TIPOGRAFIA
-------------------------------------------------------------- */
html{ scroll-behavior:smooth; }

body{
  color:var(--ms-preto);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,.heading{
  font-family:'Poppins', sans-serif !important;
  letter-spacing:-.01em;
}

h2.heading, .heading.h-2{
  font-weight:700 !important;
  font-size:32px !important;
  position:relative;
  padding-bottom:14px;
  margin-bottom:8px !important;
}
/* sublinhado curto de destaque sob os títulos de seção, no padrão gráfico do manual (bloco de cor) */
h2.heading.h-2::after, .cards-header .heading.h-4::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:56px; height:4px;
  border-radius:4px;
  background:linear-gradient(90deg,var(--ms-laranja),var(--ms-roxo));
}
.cards-header{ position:relative; }
.cards-header .heading{ position:relative; padding-bottom:14px; }

::selection{ background:var(--ms-roxo); color:#fff; }

a{ transition:color .2s var(--ms-ease); }

/* foco acessível com a cor da marca */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--ms-roxo-claro) !important;
  outline-offset:2px;
}

/* -------------------------------------------------------------
   1. HEADER / NAVEGAÇÃO
-------------------------------------------------------------- */
.header{
  box-shadow:0 1px 0 rgba(27,27,27,.06);
  position:relative;
  z-index:20;
}

.navbar-link{
  font-weight:600 !important;
  position:relative;
  transition:color .2s var(--ms-ease);
}
.navbar-link::after{
  content:"";
  position:absolute;
  left:0; bottom:-4px;
  width:0%; height:2px;
  background:var(--ms-laranja);
  transition:width .25s var(--ms-ease);
  border-radius:2px;
}
.navbar-link:hover{ color:var(--ms-roxo) !important; }
.navbar-link:hover::after{ width:100%; }

/* botão "Anunciar aqui" / CTA de topo — laranja único (regra: 1 ação primária por tela) */
header .button.is-primary,
.header .button.is-primary{
  border-radius:999px !important;
  font-weight:600 !important;
  transition:transform .2s var(--ms-ease), box-shadow .2s var(--ms-ease), background-color .2s var(--ms-ease) !important;
}
header .button.is-primary:hover,
.header .button.is-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(253,102,14,.35);
  background-color:var(--ms-laranja-escuro) !important;
}

/* -------------------------------------------------------------
   2. HERO — revertido para o padrão nativo do tema (as tentativas de
   reposicionar/pintar .hero-default via CSS colidiram com o slider JS
   do tema e o resultado final não ficou bom — ver nota em
   maxsell_guia_design_system_css.md). Mantendo aqui apenas ajustes
   seguros de tipografia/busca que não mexem em position/background/
   padding do .hero-default.
-------------------------------------------------------------- */
.hero-header .heading.h-1{
  font-weight:700 !important;
  text-shadow:0 2px 24px rgba(0,0,0,.25);
}

/* barra de busca — cartão flutuante (não afeta posição/layout do hero) */
.hero-wrapper #headerSearchForm,
.hero-wrapper .search-wrapper .content-form{
  border-radius:999px !important;
}

.hero-wrapper #headerSearchForm .button,
.hero-wrapper .search-wrapper .button{
  border-radius:999px !important;
  font-weight:700 !important;
  background:var(--ms-laranja) !important;
  transition:transform .2s var(--ms-ease), box-shadow .2s var(--ms-ease) !important;
}
.hero-wrapper #headerSearchForm .button:hover,
.hero-wrapper .search-wrapper .button:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 12px 26px rgba(253,102,14,.45);
  background:var(--ms-laranja-escuro) !important;
}

/* -------------------------------------------------------------
   3. SEÇÕES ESCURAS (categorias, destaques) — "fundo escuro dá profundidade ao conteúdo"
-------------------------------------------------------------- */
[data-bg="base"], [data-bg="neutral"], .cards-default[data-bg="base"]{
  background:radial-gradient(120% 140% at 100% 0%, #241148 0%, var(--ms-preto) 55%) !important;
}
[data-bg="base"] .heading, [data-bg="neutral"] .heading,
[data-bg="base"] .cards-header .heading, [data-bg="neutral"] .cards-header .heading{
  color:#fff !important;
}
[data-bg="base"] .cards-header a, [data-bg="neutral"] .cards-header a{
  color:var(--ms-laranja) !important;
  font-weight:600;
}

/* -------------------------------------------------------------
   4. CARDS — listagens, categorias, ofertas, carrosséis
-------------------------------------------------------------- */
.card{
  border-radius:var(--ms-radius) !important;
  overflow:hidden;
  background:var(--ms-branco);
  box-shadow:var(--ms-shadow);
  transition:transform .3s var(--ms-ease), box-shadow .3s var(--ms-ease) !important;
  border:1px solid var(--ms-borda);
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:var(--ms-shadow-hover);
}
.card img{
  transition:transform .5s var(--ms-ease);
}
.card:hover img{
  transform:scale(1.06);
}

/* categorias em destaque (grid com imagens) */
.categories-grid .item, [class*="categor"] .card, .cat-item, .category-item{
  border-radius:var(--ms-radius) !important;
  transition:transform .25s var(--ms-ease), box-shadow .25s var(--ms-ease) !important;
}
.categories-grid .item:hover, [class*="categor"] .card:hover, .cat-item:hover, .category-item:hover{
  transform:translateY(-4px);
  box-shadow:var(--ms-shadow-hover);
}

/* selo/estrelas em laranja (acento único, reforça marca) */
.rating .fa-star, .stars .fa-star, [class*="star"]{ color:var(--ms-laranja) !important; }

/* tags de categoria dentro dos cards, em roxo claro sobre fundo suave */
.card a[class*="category"], .card .badge, .card .tag{
  color:var(--ms-roxo) !important;
  background:rgba(85,16,211,.08);
  border-radius:999px;
  padding:2px 10px;
  font-weight:600;
}

/* -------------------------------------------------------------
   5. BOTÕES — 1 ação primária (laranja) + secundária (roxo)
-------------------------------------------------------------- */
.button{
  border-radius:999px !important;
  font-weight:600 !important;
  transition:transform .2s var(--ms-ease), box-shadow .2s var(--ms-ease), background-color .2s var(--ms-ease), color .2s var(--ms-ease) !important;
}
.button.is-primary{
  background:var(--ms-laranja) !important;
  border-color:var(--ms-laranja) !important;
}
.button.is-primary:hover{
  background:var(--ms-laranja-escuro) !important;
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(253,102,14,.35);
}
.button.is-secondary, .button.is-outline{
  background:transparent !important;
  border:2px solid var(--ms-roxo) !important;
  color:var(--ms-roxo) !important;
}
.button.is-secondary:hover, .button.is-outline:hover{
  background:var(--ms-roxo) !important;
  color:#fff !important;
  transform:translateY(-2px);
}

/* -------------------------------------------------------------
   6. RESPIRO / ESPAÇAMENTOS DE SEÇÃO
-------------------------------------------------------------- */
.cards-default{ padding-top:64px !important; padding-bottom:64px !important; }
.cards-default .cards-header{ margin-bottom:32px !important; align-items:flex-end; }

/* -------------------------------------------------------------
   7. RODAPÉ
-------------------------------------------------------------- */
.footer{
  background:var(--ms-preto) !important;
  color:rgba(255,255,255,.72);
}
.footer a{ color:rgba(255,255,255,.72) !important; }
.footer a:hover{ color:var(--ms-laranja) !important; }
.footer .heading{ color:#fff !important; }
.footer-item-title{ margin-bottom:11px !important; }
.footer-item[data-content="contact-content"] .icon{ display:none !important; }
.footer-item[data-content="contact-content"] .footer-info{ line-height:1.7 !important; }

/* -------------------------------------------------------------
   8. RESPONSIVO — ajustes finos no hero em telas pequenas
-------------------------------------------------------------- */
@media (max-width: 768px){
  .hero-header .heading.h-1{ font-size:34px !important; line-height:1.15 !important; }
  .cards-default{ padding-top:96px !important; }
  .categories-base .categories-content > .categories-list .categories-item .title{ color:#FFFFFF !important; }
  .categories-base .categories-content > .categories-list .categories-item .title .count{ color:rgba(255,255,255,.7) !important; }
  .hero-wrapper [data-type="3"] .hero-slider .slider-content{ display:none !important; }
}

/* -------------------------------------------------------------
   9. FALLBACK DE MÍDIA — "padrão MaxSell" quando o anúncio não tem
   foto própria. O tema já resolve isso nativamente (banner da página
   de detalhe cai para a Cor da Marca quando cover-image="false"; os
   cards de listagem caem para o logo do site quando não há Logo
   cadastrado) — aqui só deixamos os dois estados mais "desenhados"
   em vez de um bloco de cor chapada, sem alterar nenhum dado real.
-------------------------------------------------------------- */
/* banner da página de detalhe sem Imagem de Capa: gradiente de marca
   em vez de roxo sólido (mesma paleta do hero da home) */
.details-header[cover-image="false"]{
  background:radial-gradient(120% 160% at 15% 0%, var(--ms-roxo-claro) 0%, var(--ms-roxo) 45%, var(--ms-roxo-escuro) 100%) !important;
}

/* cartões de listagem (grade/carrossel) sem foto própria: fundo de
   marca sutil atrás do logo padrão MaxSell, no lugar do branco chapado */
.summary-picture{
  background:linear-gradient(135deg, rgba(85,16,211,.07), rgba(253,102,14,.07));
}


/* -------------------------------------------------------------
   3b. EXCECAO CLARA - Depoimentos e Precos e Planos (fiel ao
   mockup Claude Design, que usa fundo claro nessas 2 secoes)
-------------------------------------------------------------- */
.testimonial[data-bg="base"],
.pricing-plans[data-bg="base"] {
  background: var(--ms-cinza-bg) !important;
}
.testimonial[data-bg="base"] .heading,
.pricing-plans[data-bg="base"] .heading,
.testimonial[data-bg="base"] .cards-header .heading,
.pricing-plans[data-bg="base"] .cards-header .heading {
  color: var(--ms-preto) !important;
}
.testimonial[data-bg="base"] .testimonial-title {
  color: var(--ms-preto) !important;
}
.pricing-plans[data-bg="base"] .pricing-header .paragraph {
  color: var(--ms-cinza-texto) !important;
}
.pricing-plans[data-bg="base"] .pricing-plan-card,
.testimonial[data-bg="base"] .testimonial-item {
  background: var(--ms-branco) !important;
  box-shadow: var(--ms-shadow);
  border-radius: var(--ms-radius);
}


/* -------------------------------------------------------------
   3c. ESTRELAS NOS DEPOIMENTOS (fiel ao mockup Claude Design)
-------------------------------------------------------------- */
.testimonial-item-content::before {
  content: "\2605\2605\2605\2605\2605";
  display: block;
  color: var(--ms-laranja, #FD660E);
  font-size: 18px;
  letter-spacing: 3px;
  margin-bottom: 12px;
}

/* -----------------------------------------------------------------
   3d. FORMULARIO DE LEAD EM 2 COLUNAS (fiel ao mockup Claude Design)
   Aplica grid ao widget nativo "Formulario de Lead" (leadgen-form),
   preservando o submit real (/leadgen) - sem HTML customizado.
----------------------------------------------------------------- */
.hero-leadgen .leadgen-content .leadgen-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px 20px;
}
.hero-leadgen .leadgen-content .leadgen-form .form-group{margin-bottom:14px;}
.hero-leadgen .leadgen-content .leadgen-form .form-group:has(textarea),
.hero-leadgen .leadgen-content .leadgen-form .form-group:has(input[name="form[captchaLeadForm]"]),
.hero-leadgen .leadgen-content .leadgen-form > button{
  grid-column:1 / -1;
}
@media(max-width:700px){
  .hero-leadgen .leadgen-content .leadgen-form{grid-template-columns:1fr;}
}



/* ===================================================================
   4. PAGINA DE LISTAGEM / BUSCA DE EMPRESAS (/empresa/[categoria])
   Fiel ao mockup Claude Design "Guia MaxSell - Empresas": sidebar de
   filtros em card, dropdown de ordenacao em pill, toggle Lista/Grade/
   Mapa em pill, cards de resultado no padrao MaxSell (branco, sombra,
   radius, hover-lift), tags de categoria em roxo.
   =================================================================== */
.results-sidebar{
  background:transparent;
}
.results-sidebar .sidebar-item{
  background:var(--ms-branco);
  border:1px solid var(--ms-borda);
  border-radius:var(--ms-radius);
  box-shadow:var(--ms-shadow);
  padding:18px 20px;
  margin-bottom:16px;
}
.results-sidebar .sidebar-item .item-header{
  font-family:'Poppins',sans-serif;
  font-weight:700;
  color:var(--ms-preto);
}
.results-sidebar .sidebar-item .item-title{
  font-weight:700 !important;
  text-transform:uppercase;
  font-size:12.5px;
  letter-spacing:.06em;
  color:var(--ms-cinza-texto);
}
.results-sidebar .sidebar-item a, .results-sidebar .sidebar-item label{
  color:var(--ms-preto);
}
.results-sidebar .sidebar-item a:hover{ color:var(--ms-roxo); }

/* dropdown de ordenacao (select2) */
.select2-container--default .select2-selection--single{
  border-radius:999px !important;
  border:1px solid var(--ms-borda) !important;
  height:40px !important;
  display:flex;
  align-items:center;
  padding:0 16px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  color:var(--ms-preto);
  font-weight:600;
  line-height:38px !important;
}

/* toggle Lista / Grade / Mapa */
.results-type .button.result-type{
  border-radius:999px !important;
  font-weight:600 !important;
  border-color:var(--ms-borda) !important;
  color:var(--ms-cinza-texto) !important;
}
.results-type .button.result-type.is-selected{
  background:var(--ms-roxo) !important;
  border-color:var(--ms-roxo) !important;
  color:#fff !important;
}

/* cards de resultado */
.summary-card{
  background:var(--ms-branco);
  border:1px solid var(--ms-borda);
  border-radius:var(--ms-radius) !important;
  box-shadow:var(--ms-shadow);
  overflow:hidden;
  transition:transform .25s var(--ms-ease), box-shadow .25s var(--ms-ease);
  margin-bottom:20px;
}
.summary-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--ms-shadow-hover);
}
.summary-card .summary-title{
  font-family:'Poppins',sans-serif;
  font-weight:700 !important;
  color:var(--ms-preto) !important;
}
.summary-card .summary-content a[class*="category"]{
  color:var(--ms-roxo) !important;
  font-weight:600;
}
.summary-card .badge, .summary-card [class*="badge"]{
  border-radius:999px !important;
}

/* pagina de resultados: titulo + contagem */
.results-header .heading{
  font-family:'Poppins',sans-serif;
  font-weight:700 !important;
}


/* ===================================================================
   5. PAGINA DE DETALHE DA EMPRESA (/empresa/[slug].html)
   Rebuild estrutural pixel-fiel ao mockup Claude Design "Guia MaxSell -
   Empresa.dc.html": card unico (capa decorativa + avatar sobreposto +
   CTAs), corpo em grid persistente de 2 colunas (un-tab via
   display:contents — o tema so tem 1 aba "Sobre" navegavel mas 4
   .tab-content no DOM; sem isso Ofertas/Classificados ficavam ocultos).
   =================================================================== */

.details-default.details-listing{ background:var(--ms-cinza-bg); }

/* ---- Header: card unico com capa decorativa + avatar sobreposto ---- */
.details-header.details-header-desktop{
  background:var(--ms-branco);
  border:1px solid var(--ms-borda);
  border-radius:var(--ms-radius-lg);
  overflow:hidden;
  box-shadow:var(--ms-shadow);
}
.details-header-content{
  position:relative;
  display:block !important;
  padding-top:0 !important;
}
.details-header-content::before{
  content:'';
  display:block;
  height:150px;
  width:100%;
  background:repeating-linear-gradient(135deg, #EFECF5 0 12px, #F7F6FA 12px 24px);
  border-bottom:1px solid var(--ms-borda);
}
.details-header-content::after{
  content:none; display:none;
  position:absolute;
  top:16px; left:16px;
  font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#fff;
  background:linear-gradient(135deg, var(--ms-roxo), var(--ms-laranja));
  padding:6px 12px; border-radius:4px;
  z-index:3;
}
.details-general{
  display:flex !important;
  align-items:flex-start;
  gap:22px;
  flex-wrap:wrap;
  padding:0 28px 22px !important;
  margin-top:-80px;
  position:relative;
  z-index:2;
}
.details-picture{ flex:none; margin-top:0 !important; }
.details-picture img{
  width:112px !important; height:112px !important;
  object-fit:cover !important;
  border-radius:var(--ms-radius) !important;
  border:4px solid var(--ms-branco) !important;
  box-shadow:0 10px 26px rgba(27,27,27,.22) !important;
  background:#1B1B1B;
}
.details-info{ flex:1 1 380px; min-width:280px; margin-top:88px; }
#listing-title.heading{
  font-family:'Poppins',sans-serif; font-weight:700 !important; color:var(--ms-preto) !important;
  font-size:28px !important; letter-spacing:-.6px;
}
.details-categories{ margin-top:8px; color:var(--ms-cinza-texto); font-size:14px; }
.details-categories a.link{
  display:inline-block; background:rgba(85,16,211,.08); color:var(--ms-roxo) !important;
  font-weight:600; padding:4px 14px; border-radius:999px; margin-left:4px;
}
.details-categories a.link:hover{ background:var(--ms-roxo); color:#fff !important; }
.details-reviews{ margin-top:10px; display:flex !important; align-items:center; gap:8px; flex-wrap:wrap; }
.details-reviews .reviews-stars i.fa-star, .details-reviews .reviews-stars i.fa-star-half-o{ color:var(--ms-laranja) !important; }
.details-reviews .reviews-stars i.fa-star-o{ color:var(--ms-borda) !important; }
.details-reviews .reviews-count a.link, .details-reviews .first-to-review-label{ color:var(--ms-roxo); font-weight:600; font-size:13.5px; }
.details-actions{ margin-top:16px; display:flex; flex-direction:column; gap:9px; max-width:230px; }
.details-actions a.button.is-primary{
  background:var(--ms-laranja) !important; border-color:var(--ms-laranja) !important;
  border-radius:6px !important; font-weight:700 !important; padding:13px 22px !important;
  transition:background .2s var(--ms-ease), transform .2s var(--ms-ease);
  box-shadow:0 8px 18px rgba(253,102,14,.26);
}
.details-actions a.button.is-primary:hover{ background:var(--ms-laranja-escuro) !important; transform:translateY(-2px); }
.details-claim{ display:block; width:100%; padding:14px 28px; background:#F0E9FF; color:#3D0B96; font-size:14px; border-top:1px solid var(--ms-borda); }
.details-claim a.link{ color:#3D0B96; font-weight:700; cursor:pointer; } .details-claim a.link:hover{ color:var(--ms-roxo); }

.details-contact-panel{
  background:var(--ms-cinza-bg); border-top:1px solid var(--ms-borda);
  padding:16px 28px; margin:0;
}
.details-contact-panel .contact-item{ color:var(--ms-preto); font-size:14.5px; }
.details-contact-panel .contact-item .icon{ color:var(--ms-roxo) !important; }
.details-contact-panel .contact-item a{ color:var(--ms-laranja) !important; font-weight:600; }

.details-header-navbar{ display:none !important; }

/* ---- Corpo: un-tab via CSS grid — todas .tab-content viram itens do mesmo grid ---- */
#detail-body{ background:transparent; padding-top:24px; }
#detail-body .detail-body-content .container{
  display:grid !important;
  grid-template-columns:1fr 300px;
  gap:22px;
  align-items:start;
}
#detail-body .tab-content{ display:contents !important; }
#detail-body .tab-left{ grid-column:1; display:flex; flex-direction:column; gap:20px; min-width:0; }
#detail-body .tab-right{ grid-column:2; display:flex; flex-direction:column; gap:20px; }
#detail-body .widget-separator{ display:none !important; }
#detail-body .banner{ border-radius:var(--ms-radius-sm); overflow:hidden; }

#detail-body .tab-item{
  background:var(--ms-branco); border:1px solid var(--ms-borda); border-radius:var(--ms-radius);
  padding:24px 26px; box-shadow:var(--ms-shadow);
}
#detail-body .tab-item-heading h4.heading{
  font-size:12.5px !important; font-weight:700 !important; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ms-cinza-texto) !important; margin:0 0 14px !important;
}
#detail-body .tab-item-about .description p{ font-size:16px; line-height:1.7; color:#4F4F4F; margin-bottom:10px; }

/* Características: grid 2-col, check roxo redondo */
.tab-item-features .tab-item-content{ display:grid !important; grid-template-columns:repeat(2,1fr); gap:12px 24px; }
.tab-item-features .item-features{
  display:flex; align-items:flex-start; gap:11px; font-size:15px; color:var(--ms-preto); line-height:1.5;
}
.tab-item-features .item-features .icon{
  width:20px; height:20px; flex:none; border-radius:50%; background:#F0E9FF !important;
  display:grid; place-items:center; margin-top:1px;
}
.tab-item-features .item-features .icon i{ font-size:11px; color:var(--ms-roxo) !important; }
.tab-item-features .item-features .icon i:before{ content:"\f00c"; }

/* Informações operacionais (2 blocos nativos: Cobertura Geografica + Info Operacionais) */
.tab-item-more-details .more-details-list{ display:flex; flex-direction:column; }
.tab-item-more-details .more-details-item{
  display:grid; grid-template-columns:220px 1fr; gap:16px; padding:12px 0; border-bottom:1px solid var(--ms-cinza-bg); font-size:14.5px;
}
.tab-item-more-details .more-details-item:last-child{ border-bottom:0; padding-bottom:0; }
.tab-item-more-details .details-title{ color:var(--ms-cinza-texto); font-weight:500; }
.tab-item-more-details .details-value{ font-weight:500; color:var(--ms-preto); }

/* Ofertas / Classificados — grid 2 col com accent laranja; esconde se vazio */
.tab-item-deals:not(:has(.cards-list *)), .tab-item-classifieds:not(:has(.cards-list *)){ display:none !important; }
.tab-item-deals .cards-list, .tab-item-classifieds .cards-list{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:14px; }
.tab-item-deals .cards-list > *, .tab-item-classifieds .cards-list > *{
  border:1px solid var(--ms-borda); border-radius:8px; padding:16px;
}
/* 2.1 - Ofertas e Classificados sao blocos distintos: borda esquerda
   laranja p/ Ofertas, roxa p/ Classificados (cor ja pensada no
   comentario da rodada 11 B2, mas nunca implementada - a regra
   original aplicava laranja aos dois por engano). Nao existe campo de
   "preco" real no markup nativo deste widget (so title/description/
   valid-time) - a especificacao de cor de preco do prompt nao se
   aplica por falta de dado, nao por CSS faltando. */
.tab-item-deals .cards-list > *{ border-left:4px solid var(--ms-laranja); }
.tab-item-classifieds .cards-list > *{ border-left:4px solid var(--ms-roxo); }
.tab-item-badges:not(:has(*)){ display:none !important; }

/* Sidebar: Horas */
#detail-body .tab-item-hours .hours-status{ display:flex; align-items:center; gap:8px; color:var(--ms-roxo); font-weight:600; }
#detail-body .tab-item-hours .hours-item{ display:flex !important; justify-content:space-between; font-size:14px; padding:5px 0; }
#detail-body .tab-item-hours .day{ font-weight:500; color:var(--ms-preto); }
#detail-body .tab-item-hours .hours-list{ color:var(--ms-cinza-texto); }

/* Sidebar: Localização */
#detail-body .tab-item-location .tab-item-content{ border-radius:8px; overflow:hidden; border:1px solid var(--ms-borda); }

/* Sidebar: Siga-nos */
#detail-body .tab-item-social .tab-item-content{ display:flex !important; gap:8px; flex-wrap:wrap; }
#detail-body .tab-item-social .social-item{
  width:36px; height:36px; border:1px solid var(--ms-borda); border-radius:6px; display:grid; place-items:center;
  transition:all .14s ease; color:var(--ms-cinza-texto);
}
#detail-body .tab-item-social .social-item:hover{ border-color:var(--ms-roxo); background:#F0E9FF; color:var(--ms-roxo); }
#detail-body .tab-item-facebook, #detail-body .tab-item-tiktok{ padding:14px !important; }

/* Sidebar: Empresas relacionadas (widget nativo) */
#detail-body .sidebar-cards{
  background:var(--ms-branco); border:1px solid var(--ms-borda); border-radius:var(--ms-radius);
  padding:18px 20px; box-shadow:var(--ms-shadow);
}
#detail-body .sidebar-cards-heading{
  font-size:12.5px !important; font-weight:700 !important; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ms-cinza-texto) !important; margin-bottom:12px;
}
#detail-body .card-sidebar{ border-radius:8px; }

/* Avaliações completas (se existirem em outro widget) */
.cards-reviews{ background:var(--ms-branco); border:1px solid var(--ms-borda); border-radius:var(--ms-radius); box-shadow:var(--ms-shadow); padding:20px; }

/* ---- 5b. Correcoes de especificidade / layout pos-verificacao ao vivo ---- */
.details-header,
.details-header.details-header-desktop,
.details-header[cover-image],
.details-header[cover-image="false"],
.details-header[cover-image="true"]{
  background:var(--ms-branco) !important;
}
.details-header-content,
.details-header[cover-image="false"] .details-header-content{
  background:var(--ms-branco) !important;
}
.details-contact-panel{ background:var(--ms-cinza-bg) !important; }

.details-actions{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  width:230px !important;
  max-width:230px !important;
}
.details-actions a.button{
  width:100% !important;
  max-width:none !important;
  white-space:nowrap !important;
  text-align:center !important;
  box-sizing:border-box !important;
}

#detail-body .detail-body-content .container{ width:100% !important; max-width:1280px !important; }
#detail-body .tab-left, #detail-body .tab-right{
  width:100% !important;
  max-width:none !important;
  flex:none !important;
  box-sizing:border-box !important;
}

#detail-body .banner{ background:var(--ms-cinza-bg) !important; }
#detail-body .banner img{ width:100% !important; height:auto !important; display:block !important; }

#detail-body .banner{ max-height:100px !important; }
#detail-body .banner img{ width:100% !important; height:100px !important; object-fit:cover !important; }

@media (max-width: 860px){
  #detail-body .detail-body-content .container{ grid-template-columns:1fr !important; }
  #detail-body .tab-right{ grid-column:1 !important; }
  .details-general{ flex-direction:column; align-items:flex-start; margin-top:-60px; }
  .details-header-content::before{ height:110px; }
  .details-picture img{ width:88px !important; height:88px !important; }
  .details-info{ margin-top:60px; }
  .tab-item-features .tab-item-content{ grid-template-columns:1fr !important; }
  .tab-item-deals .cards-list, .tab-item-classifieds .cards-list{ grid-template-columns:1fr !important; }
  .tab-item-more-details .more-details-item{ grid-template-columns:1fr !important; gap:4px !important; }
}

/* ===================================================================
   6. PAGINA DE LISTAGEM DE EVENTOS (/evento/[inicio]/[fim])
   Reaproveita o padrao de sidebar/toggle ja estilizado em .results-*
   (secao 4) e adiciona estilo para os cards de evento (.summary-item),
   que tem estrutura propria (coluna "Quando" com data/hora), fiel ao
   mockup Claude Design "Guia MaxSell - Eventos".
   =================================================================== */
.summary-item{
  background:var(--ms-branco);
  border:1px solid var(--ms-borda);
  border-radius:var(--ms-radius) !important;
  box-shadow:var(--ms-shadow);
  overflow:hidden;
  transition:transform .25s var(--ms-ease), box-shadow .25s var(--ms-ease);
  margin-bottom:20px;
}
.summary-item:hover{
  transform:translateY(-4px);
  box-shadow:var(--ms-shadow-hover);
}
.summary-item .summary-title .title{
  font-family:'Poppins',sans-serif;
  font-weight:700 !important;
  color:var(--ms-preto) !important;
}
.summary-item .summary-date{
  background:var(--ms-cinza-bg);
  border-left:1px solid var(--ms-borda);
}
.summary-item .label-when{
  text-transform:uppercase;
  font-size:11.5px;
  letter-spacing:.06em;
  color:var(--ms-cinza-texto);
  font-weight:700;
}
.summary-item .date-now{
  color:var(--ms-roxo) !important;
  font-weight:700 !important;
}
.summary-item .date-interval{
  color:var(--ms-preto);
  font-weight:700;
}
.summary-item .date-hours{
  color:var(--ms-cinza-texto);
}
.summary-item .summary-address{
  color:var(--ms-cinza-texto);
}

/* filtro lateral DATA (mesmo componente results-sidebar da pagina de
   Empresas, ja estilizado — aqui so garantimos o item ativo em roxo) */
.results-sidebar .sidebar-item a.is-active,
.results-sidebar .sidebar-item a.is-selected{
  color:var(--ms-roxo) !important;
  font-weight:700;
}

/* ==========================================================================
   7. AUDITORIA DE FIDELIDADE VISUAL — 2026-08-03
   Rodada de comparação pixel-a-pixel contra os .dc.html de referência do
   Claude Design. Ver MaxSell/Guia/auditoria/*.md para as tabelas de diff.
   ========================================================================== */

/* --- GLOBAL: item #1 — barra nativa "thin-strip-search" (busca roxa 222px) ---
   Existe em TODAS as paginas internas (Empresa, Empresas, Eventos, Anunciar)
   mas NAO existe em nenhum dos 5 protótipos de referência — nenhuma tela do
   Claude Design tem uma faixa de busca roxa de 222px entre o header e o
   conteúdo (a Home tem seu próprio hero, que é outro componente, .hero-wrapper,
   e não é afetado por esta regra). Maior divergência visual encontrada na
   auditoria: empurra todo o conteúdo real ~220px para baixo e não bate com
   nenhuma referência. CSS de sobreposição — via 2 da ordem de preferência,
   já que o widget não tem toggle de visibilidade por template no painel. */
#thin-strip-search.thin-strip-base{
  display:none !important;
}

/* --- Empresa (detalhe) — item #2: barra utilitaria escura (.header-bar) ---
   Nativo, sem nenhum CSS aplicado antes (bg cinza claro padrao do tema,
   #F2F2F2, sem texto a esquerda). Referencia: fundo #1B1B1B, texto
   "Guia de fornecedores verificados de tecnologia · Brasil" a esquerda,
   13px, cor #CFC8DC. O tema nao tem elemento nativo para esse texto, entao
   é inserido via ::before (nao dinamico, mesmo texto em todas as paginas —
   aceitavel pois é uma frase institucional fixa, nao dado por registro). */
.header-bar{
  background:var(--ms-preto) !important;
}
.header-bar .container{ max-width:1280px; }
.header-bar .wrapper{
  position:relative; padding:9px 0; min-height:auto !important;
  display:flex !important; align-items:center; justify-content:flex-end !important;
  font-size:13px;
}
.header-bar .wrapper::before{
  content:"Guia de fornecedores de tecnologia · Brasil";
  position:absolute; left:0; color:#CFC8DC; font-size:13px;
}
.header-bar a.bar-link{ color:#CFC8DC !important; font-size:13px !important; }
.header-bar a.bar-link[data-trans="Anuncie aqui"]{ color:var(--ms-laranja) !important; }

/* --- Empresa (detalhe) — item #3: selo de tier no topo da capa ---
   Gerado via ::after (nao ha classe/atributo nativo de plano no HTML
   publico — ver feature-requests.md item 8). Texto fixo "Anúncio Diamante"
   porque as 8 empresas do piloto sao todas Diamante hoje; nao é dinamico
   por empresa até a Arca Solutions expor o nivel de listagem no HTML. */
.details-header-content::after{
  content:"Anúncio Diamante" !important;
  background:linear-gradient(135deg, var(--ms-roxo), var(--ms-laranja)) !important;
}

/* --- Empresa (detalhe) — item #4: linha categoria/cidade vira chip, deveria ser texto simples ---
   Referência: "em [categoria] · cidade, UF" em texto corrido 15px #6B6577,
   link em peso 500, SEM pilula/badge. Regra anterior criava um chip roxo
   (rgba roxo 8%, padding 4px 14px, radius 999px) que nao existe no protótipo. */
.details-categories{ font-size:15px !important; }
.details-categories a.link{
  display:inline !important; background:none !important; color:var(--ms-roxo) !important;
  font-weight:500 !important; padding:0 !important; border-radius:0 !important; margin-left:0 !important;
}
.details-categories a.link:hover{ background:none !important; color:var(--ms-roxo-escuro) !important; text-decoration:underline; }

/* --- Empresa (detalhe) — item #5: botoes de acao, raio e peso ---
   Referência: border-radius 5px (nao 6px), font-weight 600 (nao 700). */
.details-actions a.button.is-primary{
  border-radius:5px !important; font-weight:600 !important;
}
.details-actions a.button.is-inverse{
  border-radius:5px !important; font-weight:600 !important; padding:13px 22px !important;
  border:1px solid var(--ms-borda) !important; background:#fff !important; color:var(--ms-preto) !important;
}
.details-actions a.button.is-inverse:hover{ border-color:var(--ms-roxo) !important; color:var(--ms-roxo) !important; }

/* --- Empresa (detalhe) — item #6: selo "Verificado" ao lado do H1 ---
   O tema so oferece um icone de favoritar (.details-share, bookmark-o) ali,
   sem selo de verificacao. Adicionado via ::before, mantendo o bookmark
   nativo intacto (funcionalidade real, nao removida). */
.details-title{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.details-share{ order:2; }
.details-share::before{
  content:none; display:none;
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; color:#fff; background:var(--ms-roxo);
  padding:5px 11px; border-radius:4px; margin-right:8px;
}

/* --- Empresas (listagem) — item #1: thin-strip-search escopado só para Empresa (detalhe) ---
   O hide anterior (secao 7) era global; a referencia da listagem PEDE uma barra de busca
   (fundo escuro, pill branco) nessa posicao, so que a pagina de detalhe da empresa NAO tem
   busca nenhuma. Como o tema nao expoe um jeito simples de restilizar cores/altura desse
   widget nativo sem grande risco de quebra (loading state via JS, "Modo IA" e um toggle
   nativo, nao um botao), mantenho oculto tambem aqui por ora — decisao consciente registrada,
   nao e um corte silencioso. Ver feature-requests.md item 10. */

/* --- Empresas (listagem) — item #2: banners no topo/sidebar em tamanho natural (~140-200px) ---
   Referencia: Leaderboard 728x90 no topo dos resultados, Square 250x250 e Wide skyscraper
   160x600 na sidebar — todos contidos. Nativamente os `.banner` renderizam a imagem de
   estoque em tamanho quase natural, esticada 100% da largura do container. */
.banner{ max-height:100px !important; overflow:hidden; }
.banner img{ height:100px !important; width:100% !important; object-fit:cover !important; }

/* --- Empresas (listagem) — item #3: botao ativo do seletor Lista/Grade/Mapa ---
   Referencia: ativo em #1B1B1B com texto branco (nao a cor de marca #5510D3). */
.result-type.is-selected{
  background:var(--ms-preto) !important; border-color:var(--ms-preto) !important; color:#fff !important;
}

/* --- Empresas (listagem) — correção de especificidade do item #3 (botão ativo) ---
   A regra da secao 4 (.results-type .button.result-type.is-selected, 4 classes)
   tinha mais especificidade que a nova regra da secao 7 (.result-type.is-selected,
   2 classes) e continuava vencendo mesmo com !important em ambas. Repetindo aqui
   com a mesma especificidade da regra original para garantir que esta (mais nova,
   mesma especificidade) vença por ordem de declaração. */
.results-type .button.result-type.is-selected{
  background:var(--ms-preto) !important; border-color:var(--ms-preto) !important; color:#fff !important;
}
/* ===================================================================
   MAXSELL — PATCH DE FIDELIDADE VISUAL
   Alinha o CSS customizado do tema aos protótipos do Claude Design.
   Colar NO FINAL da folha de CSS customizado atual, sem remover nada
   antes — este patch sobrescreve por ordem de declaração.
   Depois de validado, o ideal é incorporar as correções nas regras
   originais e apagar este bloco.
   =================================================================== */

/* -------------------------------------------------------------------
   0. FONTES — provável causa raiz de "nada parece igual"
   O CSS atual declara font-family:'Poppins' sem garantir o carregamento,
   e nunca aplica Inter no corpo. Sem as duas famílias, tudo cai para a
   fonte nativa do tema.
   Se o painel do eDirectory permitir inserir <link> no <head>, prefira
   fazer por lá e apague este @import.
------------------------------------------------------------------- */
/* @import MOVIDO para a linha 1 em 30/08/2026 — fora dela o navegador o descarta */

body,
.paragraph,
p, li, td, th, label, input, select, textarea, button,
.summary-card, .summary-item, .details-info, #detail-body{
  font-family:'Inter', system-ui, -apple-system, sans-serif !important;
}

h1, h2, h3, h4, h5, .heading, .title,
#listing-title.heading,
.summary-card .summary-title,
.summary-item .summary-title .title{
  font-family:'Poppins', 'Inter', sans-serif !important;
}

/* -------------------------------------------------------------------
   1. TOKENS — valores exatos dos protótipos
------------------------------------------------------------------- */
:root{
  /* corrigidos */
  --ms-cinza-bg:#F7F6FA;      /* era #F6F5FB */
  --ms-cinza-texto:#6B6577;   /* era #6B6B76 */
  --ms-borda:#E6E3EC;         /* era #ECEAF5 */
  --ms-laranja-escuro:#E2540A;/* era #E0530A */
  --ms-roxo-claro:#A87CFF;    /* era #8A63F2 */

  /* raios reais do design */
  --ms-radius-xs:4px;   /* selos, badges */
  --ms-radius-btn:5px;  /* TODOS os botões */
  --ms-radius-sm:6px;   /* inputs, chips quadrados */
  --ms-radius:10px;     /* cards */
  --ms-radius-lg:12px;  /* cards de destaque */
  --ms-radius-pill:100px; /* só chips e tags */

  /* sombras neutras */
  --ms-shadow:0 16px 34px rgba(27,27,27,.10);
  --ms-shadow-hover:0 18px 38px rgba(27,27,27,.11);
  --ms-shadow-btn:0 6px 16px rgba(253,102,14,.28);

  /* tokens que faltavam */
  --ms-lilas:#F0E9FF;
  --ms-lilas-borda:#DDD2F5;
  --ms-roxo-texto:#3D0B96;
  --ms-divisoria:#EFECF5;
  --ms-tracejado:#D6D0E2;
  --ms-sobre-escuro:#CFC8DC;
  --ms-apagado:#9A93A8;
  --ms-texto-2:#4F4F4F;
  --ms-preto-rodape:#141216;

  /* cores de plano */
  --ms-tier-diamante:#5510D3;
  --ms-tier-ouro:#FD660E;
  --ms-tier-prata:#6B6577;
  --ms-tier-gratuita:#9A93A8;
}

/* -------------------------------------------------------------------
   2. BOTÕES — 5px, não pílula
   Esta é a divergência mais visível do sistema inteiro.
------------------------------------------------------------------- */
.button,
.button.is-primary,
.button.is-secondary,
.button.is-outline,
.button.is-inverse,
header .button.is-primary,
.header .button.is-primary,
.hero-wrapper #headerSearchForm .button,
.hero-wrapper .search-wrapper .button,
.details-actions a.button,
.details-actions a.button.is-primary,
.details-actions a.button.is-inverse{
  border-radius:var(--ms-radius-btn) !important;
  font-weight:600 !important;
}

.button.is-primary,
header .button.is-primary,
.header .button.is-primary{
  box-shadow:var(--ms-shadow-btn) !important;
}
.button.is-primary:hover,
header .button.is-primary:hover,
.header .button.is-primary:hover{
  transform:none !important;              /* o design não levanta botão */
  box-shadow:var(--ms-shadow-btn) !important;
  background:var(--ms-laranja-escuro) !important;
}
.hero-wrapper #headerSearchForm .button:hover,
.hero-wrapper .search-wrapper .button:hover{
  transform:none !important;
  scale:none !important;
  box-shadow:var(--ms-shadow-btn) !important;
}

/* select2 e toggles voltam a ser retangulares */
.select2-container--default .select2-selection--single,
.results-type .button.result-type,
.result-type{
  border-radius:var(--ms-radius-sm) !important;
}

/* pílula permanece SÓ em chip/tag */
.card a[class*="category"], .card .badge, .card .tag,
.summary-card .badge, .summary-card [class*="badge"]{
  border-radius:var(--ms-radius-pill) !important;
}

/* -------------------------------------------------------------------
   3. CARDS — raio 10px, sombra neutra, hover de 2–3px, sem zoom
------------------------------------------------------------------- */
.card,
.summary-card,
.summary-item,
.results-sidebar .sidebar-item,
#detail-body .tab-item,
#detail-body .sidebar-cards,
.cards-reviews,
.pricing-plans[data-bg="base"] .pricing-plan-card,
.testimonial[data-bg="base"] .testimonial-item{
  border-radius:var(--ms-radius) !important;
  box-shadow:var(--ms-shadow) !important;
  border:1px solid var(--ms-borda) !important;
}

.card:hover,
.summary-card:hover,
.summary-item:hover,
.categories-grid .item:hover, [class*="categor"] .card:hover,
.cat-item:hover, .category-item:hover{
  transform:translateY(-3px) !important;   /* era -6px / -4px */
  box-shadow:var(--ms-shadow-hover) !important;
}

/* o design não escala a imagem no hover */
.card img{ transition:none !important; }
.card:hover img{ transform:none !important; }

/* header da empresa: 12px, não 24px */
.details-header.details-header-desktop{
  border-radius:var(--ms-radius-lg) !important;
}

/* -------------------------------------------------------------------
   4. FUNDOS ESCUROS — chapado, sem gradiente radial
------------------------------------------------------------------- */
[data-bg="base"], [data-bg="neutral"], .cards-default[data-bg="base"]{
  background:var(--ms-preto) !important;
}
.footer{
  background:var(--ms-preto-rodape) !important;
  color:var(--ms-apagado) !important;
}
/* AJUSTE 2026-08-04 (rodada 5, P4): .footer-content nativo tem seu
   proprio fundo (var(--brand-base) = roxo de marca), que cobre 100%
   da area do <footer> e mascara o fundo escuro definido acima -
   por isso o rodape aparecia roxo. Precisa mirar o filho direto. */
.footer > .footer-content{
  background:var(--ms-preto-rodape) !important;
}
.footer > .footer-bar{
  background:var(--ms-preto-rodape) !important;
  border-top:1px solid rgba(255,255,255,.1) !important;
}
.footer .footer-copyright{
  padding:14px 0 !important;
  font-size:13px !important;
  color:rgba(255,255,255,.5) !important;
}
.footer .footer-copyright::before{
  content:"© 2026 MaxSell Tecnologia. Todos os direitos reservados.";
}
.footer a{ color:var(--ms-apagado) !important; }
.footer a:hover{ color:var(--ms-laranja) !important; }

/* -------------------------------------------------------------------
   5. REMOÇÃO DE ELEMENTOS INVENTADOS
   Nenhum dos três existe em qualquer protótipo de referência.
------------------------------------------------------------------- */
h2.heading.h-2::after,
.cards-header .heading.h-4::after{
  content:none !important;
}
h2.heading, .heading.h-2{
  padding-bottom:0 !important;
  font-size:26px !important;      /* H2 de seção do design */
  letter-spacing:-.7px !important;
}
.navbar-link::after{ display:none !important; }

/* item de menu ativo: borda inferior estática de 2px, sem animação */
.navbar-link.is-active,
.navbar-link[aria-current="page"]{
  color:var(--ms-preto) !important;
  font-weight:600 !important;
  border-bottom:2px solid var(--ms-laranja) !important;
  padding-bottom:3px !important;
}
.navbar-link:hover{ color:var(--ms-laranja) !important; }

/* -------------------------------------------------------------------
   6. BANNERS — o clamp de 100px estava global e esmagava
   Square 250×250 e Wide skyscraper 160×600 na sidebar.
   Escopar só ao leaderboard do corpo.
------------------------------------------------------------------- */
.banner,
.banner img,
#detail-body .banner,
#detail-body .banner img{
  max-height:none !important;
  height:auto !important;
  object-fit:contain !important;
}

/* leaderboard: só o do fluxo principal, e 90px (não 100px) */
#detail-body .tab-left > .banner,
.results-content > .banner,
.results-list > .banner{
  max-height:none !important;
  overflow:visible !important;
}
#detail-body .tab-left > .banner img,
.results-content > .banner img,
.results-list > .banner img{
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
}

/* sidebar: proporções corretas, sem corte */
.results-sidebar .banner img,
#detail-body .tab-right .banner img{
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
}

/* -------------------------------------------------------------------
   7. CAPA DA PÁGINA DA EMPRESA
   A textura listrada é o marcador de "entra uma foto aqui" do protótipo,
   não um elemento de design — não deve ir para produção.
   Enquanto não houver Imagem de Capa cadastrada, use fundo de marca.
------------------------------------------------------------------- */
.details-header-content::before{
  height:260px !important;                       /* era 150px */
  background:var(--ms-preto) !important;         /* fim das listras */
  background-image:none !important;
}

/* quando a empresa TIVER capa cadastrada, a imagem manda */
.details-header[cover-image="true"] .details-header-content::before{
  background:transparent !important;
}

/* logo sobre a capa: 112px invadindo 80px */
.details-general{ margin-top:-80px !important; }
.details-picture img{
  width:112px !important; height:112px !important;
  border-radius:var(--ms-radius-lg) !important;
  border:4px solid #fff !important;
  box-shadow:0 10px 26px rgba(27,27,27,.22) !important;
}

/* -------------------------------------------------------------------
   8. SELO DE PLANO — parar de afirmar "Diamante" para todo mundo
   Enquanto a Arca não expuser o nível no HTML, o texto honesto é
   "Verificado". Quando expuserem (ex.: body[data-listing-level]),
   troque pelas quatro regras comentadas abaixo.
------------------------------------------------------------------- */
.details-header-content::after{
  content:none !important; display:none !important;
  border-radius:var(--ms-radius-xs) !important;
}

/*
[data-listing-level="diamond"]  .details-header-content::after{ content:"Anúncio Diamante" !important; background:linear-gradient(135deg,#5510D3,#FD660E) !important; }
[data-listing-level="gold"]     .details-header-content::after{ content:"Anúncio Ouro"     !important; background:var(--ms-tier-ouro) !important; }
[data-listing-level="silver"]   .details-header-content::after{ content:"Anúncio Prata"    !important; background:var(--ms-tier-prata) !important; }
[data-listing-level="bronze"]   .details-header-content::after{ content:"Listagem Gratuita" !important; background:var(--ms-tier-gratuita) !important; }
*/

/* -------------------------------------------------------------------
   9. BUSCA — devolver na listagem, manter oculta só no detalhe
   Esconder globalmente removeu o principal recurso da página de
   empresas. Restilizar em vez de ocultar.
------------------------------------------------------------------- */
#thin-strip-search.thin-strip-base{
  display:block !important;
  background:var(--ms-preto) !important;
  padding:22px 0 !important;
  min-height:0 !important;
}
#thin-strip-search .content-form,
#thin-strip-search #headerSearchForm{
  background:#fff !important;
  border-radius:8px !important;
  padding:8px !important;
  box-shadow:none !important;
}
#thin-strip-search .button{
  border-radius:var(--ms-radius-btn) !important;
  background:var(--ms-laranja) !important;
  font-weight:600 !important;
}

/* no detalhe da empresa não existe busca no protótipo */
.details-default.details-listing #thin-strip-search.thin-strip-base,
body.details-page #thin-strip-search.thin-strip-base{
  display:none !important;
}

/* -------------------------------------------------------------------
   10. FAIXA DE PLANO NOS CARDS DE RESULTADO
   Só funciona quando o HTML expuser o nível. Deixe pronto:
   assim que a classe existir, a faixa aparece sozinha.
------------------------------------------------------------------- */
.summary-card[data-level="diamond"]{ border-left:4px solid var(--ms-tier-diamante) !important; border-color:var(--ms-lilas-borda) !important; }
.summary-card[data-level="gold"]{    border-left:4px solid var(--ms-tier-ouro) !important; }
.summary-card[data-level="silver"]{  border-left:4px solid var(--ms-tier-prata) !important; }
.summary-card[data-level="bronze"]{  border-left:4px solid var(--ms-tier-gratuita) !important; }

/* -------------------------------------------------------------------
   11. RODAPÉ — CTA laranja de anunciar
   Se o painel permitir um bloco de HTML no rodapé, prefira criar o
   botão lá. Este ::after é o fallback quando não houver.
------------------------------------------------------------------- */
.footer .footer-contact::after{
  content:"Anunciar empresa →";
  display:inline-flex;
  align-items:center;
  margin-top:16px;
  background:var(--ms-laranja);
  color:#fff;
  font-size:14.5px;
  font-weight:600;
  padding:12px 20px;
  border-radius:var(--ms-radius-btn);
  box-shadow:0 8px 18px rgba(253,102,14,.30);
}


/* -------------------------------------------------------------------
   RODADA 8 P1 - banners da sidebar sem margem/padding proprios: o
   espacamento entre eles e os cards vizinhos deve vir so do gap do
   flex container (18px), nao de margin-top/padding proprio do widget.
------------------------------------------------------------------- */
.tab-right .banner{
  margin: 0 !important;
  padding: 0 !important;
}
.tab-right .tab-item.sidebar-cards{
  margin-top: 0 !important;
}

/* -------------------------------------------------------------------
   12. LIMPEZAS MENORES
------------------------------------------------------------------- */
.summary-picture{ background:var(--ms-divisoria) !important; }  /* sem gradiente bicolor */
::selection{ background:var(--ms-laranja); color:#fff; }
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--ms-laranja) !important;
  outline-offset:2px;
}
.details-claim{ background:var(--ms-lilas) !important; color:var(--ms-roxo-texto) !important; }
.details-claim a.link{ color:var(--ms-roxo-texto) !important; }


/* ------------------------------------------------------------------------------------------------
   10. CORREÇÃO 2026-08-03 - escopar a barra de busca roxa so a listagem
   A regra da seção 9 ("recurso da página de empresas. Restilizar em vez
   de ocultar") tem a mesma especificidade da regra que oculta
   (#thin-strip-search.thin-strip-base), e como vem depois no arquivo,
   ganhava em toda página - inclusive na página de Empresa (detalhe),
   onde foi documentada como removida. Aqui forçamos a especificidade
   para valer só na listagem (onde .results-sidebar existe); em qualquer
   outra página, volta a ficar oculta.
------------------------------------------------------------------------------------------------ */
body:not(:has(.results-sidebar)) #thin-strip-search.thin-strip-base{
  display:none !important;
}


/* ------------------------------------------------------------------------------------------------
   11. CORREÇÃO 2026-08-03 - .more-details-item com grid-template-columns
   220px 1fr colapsando a 2a coluna para o min-content ( ~ 43px ) quando
   o valor não tem espaço para quebrar linha - causa do "São / José / e /
   região" quebrando palavra a palavra. Fix padrão de grid: min-width:0 na
   coluna de valor.
------------------------------------------------------------------------------------------------ */
.more-details-item .details-value{
  min-width: 0 !important;
}


/* AJUSTE 2026-08-03: min-width:0 sozinho colapsou a coluna para 0px
   porque a trilha era "auto", não "1fr". Forçando a trilha também. */
.more-details-item{
  grid-template-columns: 220px 1fr !important;
}


/* AJUSTE 2: o.more-details-item é flex item (flex:0 1 auto) dentro de
   .more-details-list (flex-direction:column), sem largura definida - por
   isso o grid interno (220px 1fr) não tinha espaço sobrando para o 1fr.
   Força a largura total do item. */
.more-details-item{
  flex: 1 1 auto !important;
  width: 100% !important;
}

/* AJUSTE 2026-08-03: bug encontrado a pedido do Johnny - a cor preta
   chapada do fallback nao era o gradiente da secao 9 (antiga). O
   elemento que realmente pinta a area visual e o ::before de
   .details-header-content, nao .details-header em si - a regra
   antiga mirava o seletor errado e nunca teve efeito visivel.
   Corrigido aqui, no seletor certo, com !important para vencer o
   background-color:#1B1B1B do pseudo-elemento nativo. */
.details-header[cover-image="false"] .details-header-content::before{
  background: radial-gradient(120% 160% at 15% 0%, var(--ms-roxo-claro) 0%, var(--ms-roxo) 45%, var(--ms-roxo-escuro) 100%) !important;
}


/* 12. AJUSTE 2026-08-03 (rodada 4) - ícone do "Siga-nos" 22px nativo
   vazando por baixo do box 36x36/6px que já sobrescrevemos - reduzir para
   17px conforme design, e adicionar hover roxo de marca.
------------------------------------------------------------------- */
#detail-body .tab-item-social .social-item{
  font-size: 17px !important;
}
#detail-body .tab-item-social .social-item:hover{
  border-color: #5510D3 !important;
  background: #F0E9FF !important;
  color: #5510D3 !important;
}


/* --------------------------------------------------------------------
   13. TOKENS GLOBAIS 2026-08-03 (rodada 4) - H1 e padding de
   container sao tokens do sistema de design, valem para as 5
   paginas por definição (não é vazamento de escopo tipo
   #thin-strip-search - aqui a mudança global É o comportamento
   pretendido). H1 media 28px/700/-0.6px, esperado 32px/700/-0.8px.
   Container padding 15px, esperado 28px.
-------------------------------------------------------------------- */
body h1{
  font-size: 32px !important;
  font-weight: 700 !important;
  letter-spacing: -0.8px !important;
}
body .container{
  padding-left: 28px !important;
  padding-right: 28px !important;
}


/* AJUSTE 2026-08-03: #listing-title.heading tem especificidade de ID
   (1,0,0) e vencia a regra "body h1" (0,0,2) mesmo com !important nas
   duas. Precisa mirar o ID diretamente para vencer.
-------------------------------------------------------------------- */
#listing-title.heading{
  font-size: 32px !important;
}


/* -------------------------------------------------------------
   14. RODADA 5 (2026-08-04) - P2: .details-actions (Avalie/Contato)
   estava empilhado dentro de .details-info (fluxo vertical), deixando
   metade direita do cabecalho vazia. .details-general ja e flex row
   nativo (logo + info) mas nao se estica; .details-actions ja tem
   230px de largura nativa. Solucao CSS-only: esticar .details-general,
   reservar espaco a direita em .details-info, e posicionar
   .details-actions em absolute no canto superior direito (ancorado no
   position:relative nativo de .details-general).
------------------------------------------------------- */
.details-header .details-general{
  display: flex !important;
  align-items: flex-start !important;
  gap: 22px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}
.details-header .details-picture{
  flex: none !important;
}
.details-header .details-info{
  display: flex !important;
  flex: 1 1 380px !important;
  min-width: 280px !important;
  flex-direction: column !important;
}
/* RODADA 11 A2 amendment: position:static e padding-right:0 removidos
   daqui (RODADA 5 P2) porque conflitavam por especificidade com a
   nova regra .details-actions{position:absolute} da RODADA 11 (esta
   selector tem 2 classes, a nova tinha so 1 - especificidade igual
   vencia por ordem de fonte mas aqui a antiga vinha depois na cascata
   de leitura, entao travava em position:static). A largura/margin/
   display/gap continuam validos e ficam. */
.details-header .details-actions{
  flex: none !important;
  width: 230px !important;
  margin: 0 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
}


/* RODADA 6 P2 (2026-08-04) - overlay .details-header::before vaza pra fora do .container
   (65% preto, largura quase full-bleed) criando a faixa cinza nas laterais e embaixo do
   painel de contato. Clipa o overlay a largura do .container em vez de remover, preservando
   qualquer funcao de escurecimento da capa dentro da area visivel. */
.details-header::before{
  left: calc((100% - 1170px) / 2 + 28px) !important;
  right: calc((100% - 1170px) / 2 + 28px) !important;
  width: auto !important;
}
@media (max-width: 1229px){
  .details-header::before{
    left: 28px !important;
    right: 28px !important;
  }
}
@media (max-width: 767px){
  .details-header::before{
    left: 0 !important;
    right: 0 !important;
  }
}


/* RODADA 6 (2026-08-04) - P1 banners, P4 contraste, P5 selo/pills/cobertura, P6 sponsored-link vazio, P7 Entrar link */

/* P1 - so o leaderboard (fluxo principal) tem altura travada + cover; demais formatos ficam auto+contain */
.banner[type=leaderboard] picture, .banner[type=leaderboard] img{
  height: 90px !important;
  object-fit: cover !important;
  width: 100% !important;
}
.banner[type=square] picture, .banner[type=square] img,
.banner[type=skyscraper] picture, .banner[type=skyscraper] img{
  height: auto !important;
  object-fit: contain !important;
}

/* P4 - contraste do endereco no painel de contato (estava branco 75% sobre fundo claro) */
.details-contact-panel .item-location{
  color: #4F4F4F !important;
}
.details-contact-panel .contact-item{
  color: #4F4F4F !important;
}
.details-contact-panel .contact-item a{
  color: #4F4F4F !important;
}

/* P5 - selo de status sempre roxo, independente do estado (aberto/fechado) */
.hours-heading{
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: #5510D3 !important;
  color: #FFFFFF !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  padding: 4px 9px !important;
  border-radius: 4px !important;
}
.hours-heading i{
  color: #FFFFFF !important;
}

/* P5 - caracteristicas: grid 2 colunas, check circular #F0E9FF / icone #5510D3, sem preenchimento salmao */
.tab-item-features .tab-item-content{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 24px !important;
  row-gap: 12px !important;
}
.item-features{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: transparent !important;
  padding: 0 !important;
  font-size: 15px !important;
  color: #1B1B1B !important;
}
.item-features .icon{
  flex: none !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: #F0E9FF !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.item-features .icon i{
  color: #5510D3 !important;
  font-size: 11px !important;
}

/* P5 - cobertura geografica: altura segue o conteudo, nao fixa */
.tab-item-more-details{
  height: auto !important;
  min-height: 0 !important;
}

/* P6 - Sponsored Links vazio (sem criativo real, so fallback de texto) fica feio no rodape; oculta ate ter anunciante */
.banner:has(.banner-sponsored-link):not(:has(.banner-sponsored-link img)){
  display: none !important;
}

/* P7 - 'Entrar' na barra superior deve ser link simples, laranja e exclusivo do 'Anuncie aqui' */
.header-bar .bar-link.bar-button{
  background: transparent !important;
  color: #FFFFFF !important;
  padding: 0 !important;
  border: none !important;
  font-weight: 400 !important;
}


/* -------------------------------------------------------------------
   RODADA 9 P1 - cabecalho: recuo unico de 28px. A capa sangra borda a
   borda do card (ignora o padding do .container); details-general,
   details-claim (faixa roxa) e details-contact-panel tambem sangram e
   recriam o inset via padding proprio. Corrige tambem o bug de
   margin-top:88px em .details-info (desalinhava a identidade do logo)
   e o gap duplicado do logo (margin-right proprio + gap do flex) e o
   margin-left:16px do botao Contato (desalinhava dos botoes Avalie).
------------------------------------------------------------------- */
.details-header-content::before{
  margin: 0 -28px !important;
  width: calc(100% + 56px) !important;
}
.details-default > .details-header .details-general{
  margin: 0 -28px !important;
  width: calc(100% + 56px) !important;
  padding: 24px 28px !important;
  box-sizing: border-box !important;
}
.details-default > .details-header .details-picture{
  margin-top: -80px !important;
  margin-bottom: -8px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}
.details-info{
  margin-top: 0 !important;
}
.details-default > .details-header .details-claim{
  margin-left: -162px !important;
  width: 1170px !important;
  padding: 14px 28px !important;
  box-sizing: border-box !important;
}
.details-contact-panel{
  margin: 0 -28px !important;
  width: calc(100% + 56px) !important;
  padding: 20px 28px !important;
  box-sizing: border-box !important;
}
.details-actions a{
  width: 100% !important;
  margin-left: 0 !important;
}


/* -------------------------------------------------------------------
   RODADA 9 P4 - Empresas Relacionadas: as setas do carrossel usam
   top fixo em px (calculado para a imagem ja carregada). Antes do
   lazy-load disparar, .picture-link colapsa (~48px) e as setas
   passam a cair sobre o nome da empresa. Reservando a altura da
   imagem via min-height (independente do estado de carregamento)
   evita o colapso e a sobreposicao. Mesma causa raiz do P2 (banners).
------------------------------------------------------------------- */
.tab-item.sidebar-cards .picture-link{
  min-height: 225px !important;
  display: block !important;
}


/* -------------------------------------------------------------------
   RODADA 10 P1 - fix do bug introduzido na rodada 9: o margin-top:-80px
   estava no .details-general inteiro (empurrava titulo/identidade para
   dentro da capa). So o logo (.details-picture) deve subir; o resto do
   bloco fica abaixo da capa. Mapeamento de seletores reais (via
   selector-map.md): capa = .details-header-content::before | corpo =
   .details-general | identidade = .details-info | acoes =
   .details-actions | faixa roxa = .details-claim | painel de contato =
   .details-contact-panel.
------------------------------------------------------------------- */
.details-general{
  margin: 0 -28px !important;
  width: calc(100% + 56px) !important;
  padding: 24px 28px !important;
  box-sizing: border-box !important;
}
.details-picture{
  margin: -80px 0 -8px 0 !important;
  position: relative !important;
  z-index: 2 !important;
}


/* -------------------------------------------------------------------
   RODADA 11 A1 - capa sangra ate a borda do card (.details-header),
   nao apenas ate a borda do .container. O .container (child) tem
   padding 28px + margin auto de centralizacao (~135px em 1440) - os
   dois precisam ser cancelados so dentro do cabecalho, sem afetar o
   .container em outras paginas. Capa fica com margin/padding 0 (sangra
   total); details-general/claim/contact-panel recriam o inset de 28px
   via padding proprio, agora medido a partir da borda real do card.
------------------------------------------------------------------- */
.details-header .container{
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.details-header-content::before{
  margin: 0 !important;
  width: 100% !important;
}
.details-default > .details-header .details-general{
  max-width: 1280px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 24px 28px !important;
  box-sizing: border-box !important;
}
.details-default > .details-header .details-claim{
  margin-left: -162px !important;
  margin-top: 20px !important;
  width: calc(100% + 440px) !important;
  padding: 14px 28px !important;
  box-sizing: border-box !important;
}
.details-contact-panel{
  margin: 0 !important;
  width: 100% !important;
  padding: 20px 28px !important;
  box-sizing: border-box !important;
}

/* RODADA 11 A2 - coluna de acoes alinhada ao topo do nome. .details-info
   passa a ser o container de referencia (position:relative) e
   .details-actions sai do fluxo vertical (position:absolute, top:0,
   right:0), alinhando com o topo do titulo em vez de cair depois de
   categoria/nota. padding-right no info reserva o espaco pra nao ter
   texto por baixo dos botoes em telas mais estreitas dentro do desktop. */
.details-info{
  position: relative !important;
  padding-right: 250px !important;
}
.details-actions{
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  width: 230px !important;
}

/* RODADA 11 A3 - relabel "Contato" -> "Falar com a empresa" (mesmo
   modal, so troca o texto - link/funcao real preservados). "Visite o
   site" e "Compartilhar" ja existem como elementos reais (link no
   painel de contato e .details-share perto do titulo) mas vivem em
   ramos de DOM diferentes de .details-actions - mover via CSS puro
   nao e possivel sem reparenting (documentado no relatorio). */
.details-actions a[data-modal="contact"]{
  font-size: 0 !important;
}
.details-actions a[data-modal="contact"]::after{
  content: "Falar com a empresa";
  font-size: 15px;
}

/* RODADA 11 A5 - painel de contato: grid horizontal com rotulo caixa-alta
   + valor, em vez de lista vertical com icone por linha. Icones saem. */
.details-contact-panel .details-contact{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 18px 26px !important;
}
.details-contact-panel .contact-item{
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.details-contact-panel .contact-item .icon{
  display: none !important;
}
.details-contact-panel .contact-item::before{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #9A93A8;
}
.details-contact-panel .item-phone:not(.addition-phone):not(:has(.contact-item-link-website))::before{
  content: "Telefone";
}
.details-contact-panel .addition-phone::before{
  content: "Telefone adicional";
}
.details-contact-panel .item-location::before{
  content: "Endereço";
}
.details-contact-panel .item-phone:has(.contact-item-link-website)::before{
  content: "Site";
}
.details-contact-panel .contact-item a{
  color: #FD660E !important;
  font-size: 14.5px;
  line-height: 1.5;
  word-break: break-word;
}

/* RODADA 20 item5.2: campo SITE do painel de contato — a label "Site" (kicker acima,
   ::before) ja identifica o campo; o valor abaixo deve mostrar a URL real, nao a legenda
   nativa fixa "Visite o site" do widget (sem campo de admin para customizar esse texto).
   Tecnica: zera o texto nativo via font-size:0 e injeta a URL real via content:attr(href)
   no ::after, replicando o padrao ja usado no titulo do bloco Video (Rodada 16). */
.details-contact-panel .contact-item-link-website{
  font-size: 0 !important;
}
.details-contact-panel .contact-item-link-website::after{
  content: attr(href);
  font-size: 14.5px !important;
  color: #FD660E !important;
  line-height: 1.5;
  word-break: break-word;
}
.details-contact-panel .item-location{
  color: #4F4F4F !important;
  font-size: 14.5px;
  line-height: 1.5;
  word-break: break-word;
}

/* RODADA 11 C3 - Empresas Relacionadas: some a fileira de estrelas
   vazias quando nao ha nota real (sem :has(.fa-star) preenchida); a
   area de imagem encolhe (fallback generico continua aparecendo, mas
   menor - bug do widget nao trazer o logo certo ja esta no backlog). */
.tab-item.sidebar-cards .cards-reviews:not(:has(.fa-star:not(.fa-star-o))):not(:has(.fa-star-half-o)){
  display: none !important;
}
.tab-item.sidebar-cards .picture-link{
  min-height: 120px !important;
  max-height: 120px !important;
}


/* ------------------------------------------------------------------
   RODADA 11 B2 (2026-08-04) - widgets Ofertas/Classificados
   adicionados via admin (Modelo de Anuncio). Vinham com o markup
   nativo de carrossel escuro (.cards-default{background:#1b1b1b},
   pensado pra banners full-bleed em outras paginas), o que deixava
   uma faixa preta enorme atras de um card estreito e sozinho.
   Reescreve como grid de 2 colunas com cards claros e borda
   esquerda colorida (laranja p/ Ofertas, roxo p/ Classificados),
   por cima do markup real (a.picture > picture > img + div.content >
   a.title + div.description + div.valid-time), sem inventar campo
   nenhum. Ambos os widgets ja escondem sozinhos (display:none) quando
   vazios - nao precisou de CSS pra isso.
------------------------------------------------------------------- */
.tab-item-deals .cards-default,
.tab-item-classifieds .cards-default{
  background: transparent !important;
}
/* RODADA 11 B2 fix - .container (dentro de .cards-default) e display:grid
     nativo com 1 coluna implicita auto (shrink-to-fit), criando um loop
     de auto-dimensionamento que travava o card em ~470px mesmo com
     .cards-wrapper{width:100%}. Forcar display:block quebra o loop -
     block preenche 100% do pai por padrao, sem precisar de mais nada. */
#detail-body .tab-item-deals .cards-default .container,
#detail-body .tab-item-classifieds .cards-default .container{
  display: block !important;
  width: 100% !important;
}
.tab-item-deals .cards-wrapper,
.tab-item-classifieds .cards-wrapper{
  width: 100% !important;
}
.tab-item-deals .cards-list,
.tab-item-classifieds .cards-list{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
}
.tab-item-deals .card,
.tab-item-classifieds .card{
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  background: #fff !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
  border: 1px solid var(--ms-borda) !important;
  width: 100% !important;
}
.tab-item-deals .card{ border-left: 4px solid var(--ms-laranja) !important; }
.tab-item-classifieds .card{ border-left: 4px solid var(--ms-roxo) !important; }
.tab-item-deals .card .picture,
.tab-item-classifieds .card .picture{
  flex: 0 0 110px !important;
  max-width: 110px !important;
  align-self: stretch !important;
}
.tab-item-deals .card .picture img,
.tab-item-classifieds .card .picture img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.tab-item-deals .card .content,
.tab-item-classifieds .card .content{
  padding: 14px 16px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.tab-item-deals .card .content .title,
.tab-item-classifieds .card .content .title{
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ms-preto) !important;
  display: block !important;
  margin-bottom: 4px !important;
}
.tab-item-deals .card .content .description,
.tab-item-classifieds .card .content .description{
  font-size: 13px !important;
  color: var(--ms-cinza-texto, #666) !important;
  margin-bottom: 6px !important;
}
.tab-item-deals .card .content .valid-time,
.tab-item-classifieds .card .content .valid-time{
  font-size: 12px !important;
  color: var(--ms-cinza-texto, #888) !important;
}
@media (max-width: 600px){
  .tab-item-deals .cards-list,
  .tab-item-classifieds .cards-list{
    grid-template-columns: 1fr !important;
  }
}

/* ===== RODADA 12 ===== */

/* A3 - icone de compartilhar invisivel (branco sobre branco no tema nativo) */
.details-share .fa-share-alt{
  color: var(--ms-cinza-texto, #6B6B76) !important;
}
.details-share .share-icon:hover .fa-share-alt{
  color: var(--ms-laranja, #FD660E) !important;
}

/* A2 - consolidado na regra .details-default > .details-header .details-claim acima */

/* B2 - grid de Ofertas/Classificados reservando padding vertical de 128px (herdado de contexto full-bleed) mesmo com poucos itens */
.tab-item-deals .cards-default,
.tab-item-classifieds .cards-default{
  padding: 24px 0 !important;
}


/* B3 - inverter hierarquia: "Falar com a empresa" (is-inverse) vira
   primaria laranja; "Avalie" (is-primary nativo) vira secundaria menor
   e mais leve. "Compartilhar" ja e o icone ao lado do titulo (A3) e
   "Visite o site" vive no painel de contato - ambos em ramos de DOM
   diferentes de .details-actions (limitacao ja documentada, rodada 11
   item 15a), nao reproduzidos aqui como par visual do Avalie. */
.details-actions a.button.is-inverse{
  background: var(--ms-laranja) !important;
  border: 0 !important;
  color: #fff !important;
}
.details-actions a.button.is-inverse:hover{
  background: var(--ms-laranja-escuro) !important;
}
.details-actions a.button.is-inverse::after{
  color: #fff !important;
}
.details-actions a.button.is-primary{
  background: #fff !important;
  border: 1px solid var(--ms-borda, #E6E3EC) !important;
  color: var(--ms-cinza-texto, #6B6B76) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 9px 16px !important;
  height: auto !important;
  box-shadow: none !important;
}
.details-actions a.button.is-primary:hover{
  border-color: var(--ms-laranja) !important;
  color: var(--ms-laranja) !important;
  background: #fff !important;
}


/* ===== RODADA 13 ===== */

/* 1.1 - cabecalho herda o container do corpo (max-width 1280, centralizado,
   padding 28px) em vez de recuo calculado a mao. Só a capa (::before em
   .details-header-content) continua full-bleed. */
.details-header-content > .details-contact-panel{
  max-width: 1280px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}


/* 1.2 - reordenar acoes: "Falar com a empresa" (is-inverse) primeiro,
   "Avalie" (is-primary) depois. "Visite o site" (link real,
   .contact-item-link-website) e "Compartilhar" (.details-share, A3)
   confirmados em ramos de DOM diferentes de .details-actions - ambos
   filhos de .details-header-content, mas .details-actions vive dentro
   de .details-general > .details-info, sem container flex/grid comum
   que permita reordenar entre eles via CSS puro. Limitacao real,
   nao maquiada. */
.details-actions a.button.is-inverse{ order: 1 !important; }
.details-actions a.button.is-primary{ order: 2 !important; }


/* 1.4 - grid de Ofertas/Classificados: auto-fit em vez de 2 colunas fixas,
   1 item ocupa a largura toda; 2+ itens continuam lado a lado. (ver
   replace acima) */

/* 1.5 - Empresas Relacionadas: oculta o fallback de logo (sem foto real)
   e deixa o card em modo texto - resolve tambem a sobreposicao das
   setas, que passam a ficar centralizadas verticalmente no card sem
   imagem nenhuma por baixo. Setas continuam navegando o carrossel
   normalmente (nao sao removidas, so re-centralizadas). */
.card-sidebar .picture-link:has(img[src*="noImage_small"]){
  display: none !important;
}
/* Rodada 14 B2 - setas alinhadas com a linha do titulo "Empresas Relacionadas", fora do card */
.sidebar-cards-nav{
  top: 28px !important;
  transform: translateY(-50%) !important;
}

/* Rodada 14 A5 - texto da faixa "Esta empresa e sua?" */
.details-claim a.link{
  font-size: 0 !important;
}
.details-claim a.link::after{
  content: "Solicite este anúncio aqui";
  font-size: 14px;
  font-weight: 600;
}
.details-claim::after{
  content: " para editar dados, publicar ofertas e responder avaliações.";
  font-weight: 400;
  font-size: 14px;
  color: #3D0B96;
}

/* Rodada 14 A6/B4 - icones Siga-nos: caixa branca com borda, roxo so no hover */
a.social-item{
  background: #fff !important;
  border: 1px solid #E6E3EC !important;
  border-radius: 6px !important;
  transition: background 0.15s, border-color 0.15s;
}
a.social-item i{
  color: #6B6577 !important;
  transition: color 0.15s;
}
a.social-item:hover{
  border-color: #5510D3 !important;
  background: #F0E9FF !important;
}
a.social-item:hover i{
  color: #5510D3 !important;
}

/* Rodada 14 A7 - campo SITE mostra o dominio real via attr(href), nao texto generico */
/* CSS attr() nao permite remover protocolo/www (sem regex em CSS puro) - mostra a URL completa,
   mas dinamica por empresa (nao hardcoded), o que ja resolve o objetivo real: o visitante
   sabe para onde vai antes de clicar. */
.contact-item-link-website{
  font-size: 0 !important;
}
.contact-item-link-website::after{
  content: attr(href);
  font-size: 13.5px;
  word-break: break-all;
}

/* Rodada 14 B1 - "Horas" -> "Horario" (sem chave de traducao editavel no admin) */
#detail-body .tab-item-hours h4.heading{
  font-size: 0 !important;
}
#detail-body .tab-item-hours h4.heading::after{
  content: "HORÁRIO DE FUNCIONAMENTO";
  font-size: 12.5px;
  font-weight: 700;
}

/* Rodada 14 C1 - botao "Anunciar empresa" real dentro do rodape (link ja existente para /anuncie).
   Restruturacao para 4 colunas + logo branco fica bloqueada: sem editor de rodape no admin,
   wrapper e flex com 3 filhos fixos, sem widget builder disponivel para esta secao. */
.footer-item[data-content="site-content"] a[href="https://guia.maxsell.com.br/anuncie"]{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #FD660E !important;
  color: #fff !important;
  font-size: 14.5px;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 5px;
  box-shadow: 0 8px 18px rgba(253,102,14,0.3);
  margin-top: 8px;
  min-width: 158px;
}
.footer-item[data-content="site-content"] a[href="https://guia.maxsell.com.br/anuncie"]::after{
  content: "\2192";
  font-size: 15px;
}

/* Rodada 20 - hover 1px lift + arrow 15px (especificacao item 3) */
.footer-item[data-content="site-content"] a[href="https://guia.maxsell.com.br/anuncie"]{
  transition: transform 0.15s ease, background 0.15s ease;
}
.footer-item[data-content="site-content"] a[href="https://guia.maxsell.com.br/anuncie"]:hover{
  background: #E2540A !important;
}

/* Rodada 14 C2 - zerar margin-top nativo (32px) dos cards da coluna esquerda,
   que somava com o gap:20px do flex .tab-left, produzindo 52px em vez de 20px.
   Sidebar (.tab-right) ja estava correta em 18px, gap real, sem margin extra. */
.tab-left > .tab-item,
.tab-left > .banner{
  margin-top: 0 !important;
}


/* ==== Rodada 15 ==== */

/* Item 2 - icones sociais SVG inline (TikTok etc.) nao usam fonte de icone; corrige fill e tamanho */
.tab-item-social a.social-item svg{
  fill: #6B6577 !important;
  width: 17px !important;
  height: 17px !important;
}
.tab-item-social a.social-item:hover svg{
  fill: #5510D3 !important;
}

/* Item 4 - botao "Anunciar empresa" reposicionado para a coluna Siga-nos, 20px abaixo dos icones sociais.
   Reposicionamento entre colunas irmas nao e alcancavel só com CSS (nao ha como mover o no de um
   flex-item para outro); ancorado via position:absolute ao .wrapper (ja position:relative) alinhado
   pela borda direita, que corresponde exatamente a borda direita da coluna Siga-nos. Revertido em
   telas estreitas (rodape empilha em coluna unica) para nao sobrepor conteudo. */
/* Rodada 20 (item 3) - NOTA IMPORTANTE: breakpoint elevado de 861px para 992px.
   Causa real (confirmada via DOM, forcando .container a 720px e inspecionando o layout
   ao vivo - NAO e flex-shrink): .wrapper do rodape usa flex-wrap:wrap. No degrau nativo
   Bootstrap 768-991px, .container fica com max-width:720px -> ~664px uteis (720-2*28
   padding) dentro de .wrapper. site-content (325.5px) + contact-content (247px) = 572.5px
   cabem lado a lado nessa faixa, mas ao somar social-content (200px, total 772.5px) nao
   cabe mais - o flex-wrap EMPURRA a coluna Siga-nos inteira para uma segunda linha,
   alinhada a ESQUERDA (nao mais encostada na borda direita do .wrapper). Isso quebra por
   completo a premissa do "right:0 = borda direita da coluna Siga-nos" usada por este hack
   de reposicionamento (Rodada 14) - abaixo de 992px o botao ficaria ancorado onde a coluna
   Siga-nos ESTARIA na primeira linha, nao onde ela realmente renderiza (na segunda linha).
   Confirmado que >=992px (container max-width:960px, ~904px uteis > 772.5px necessarios)
   NAO tem esse problema - as 3 colunas cabem numa unica linha, sem quebra, flush-left
   exato (matematica: Anunciar right=200-127=73px, Marketplace right=200-286=-86px, onde
   127px/149px sao as larguras medidas ao vivo dos botoes e 286px e a soma com gap:10px).
   Por isso o reposicionamento (Anunciar E Marketplace, para nao ficar um dentro e outro
   fora da coluna Siga-nos) so se aplica a partir de 992px; entre 861px e 991px os dois
   botoes permanecem no fluxo normal da lista "Conteudo do Site" (ainda estilizados como
   botao, so nao reposicionados) - fallback seguro em vez de alinhamento quebrado.
   Registrado tambem em feature-requests-rodada20.md. */

@media (min-width: 992px){ /* Rodada 20: elevado de 861px para 992px - ver nota abaixo */
  .footer-item[data-content="site-content"] a[href="https://guia.maxsell.com.br/anuncie"]{
    position: absolute !important;
    top: 91px !important;
    right: 168px !important; /* Rodada 9 item 2.1: coluna Siga-nos agora ~327px (pos-fix fr-ratio da Rodada 8); par Anunciar+Marketplace (158+10+158=326px) cabe flush-left dentro da coluna, sem transbordar */
    margin-top: 0 !important;
  }
}

/* Rodada 20 - "Marketplace" ao lado do "Anunciar" na coluna Siga-nos, mesma tecnica.
   Matematica do alinhamento flush-left (ver item 2/3 do prompt de fechamento):
   a coluna Siga-nos (.footer-item[data-content="social-content"]) mede sempre 200px
   (width:200px nativo do tema) e fica sempre encostada na borda direita do .wrapper
   (confirmado: wrapper.right === social.right em qualquer largura >=861px, e por isso
   "right:0" sempre acerta a borda direita da coluna). Para a fileira (Anunciar +
   gap:10px + Marketplace) comecar exatamente na borda ESQUERDA da coluna (flush-left
   com os icones), cada botao recebe um "right" calculado a partir da largura real
   medida ao vivo: Anunciar=127px, Marketplace=149px, gap=10px, soma=286px.
   Anunciar (1o, laranja): right = 200 - 127 = 73px.
   Marketplace (2o, roxo): right = 200 - 286 = -86px (a fileira combinada, 286px,
   e mais larga que a coluna de 200px, entao o par transborda para a direita do
   "slot" nativo da coluna Siga-nos - nao ha outro conteudo naquela area, overflow
   visivel, sem recorte, testado em 1440px e no breakpoint minimo de 861px). */
@media (min-width: 992px){ /* Rodada 20: ver nota no bloco acima */
  .footer-item[data-content="site-content"] a[href="https://maxsell.plataforma.flexy.com.br"]{
    position: absolute !important;
    top: 91px !important;
    right: 0px !important; /* Rodada 9 item 2.1: ver nota no bloco do botao Anunciar acima - coluna Siga-nos agora comporta o par sem overflow */
    margin-top: 0 !important;
  }
}

/* Item 6 (correcao) - duas causas para a area vazia, nao uma so:
   1) .cards-list e um flex row com align-items:normal (=stretch), entao cada .card-sidebar
      esticava para a altura do maior irmao mesmo com height:auto - precisa desligar o stretch.
   2) a regra que esconde a foto (".card-sidebar .picture-link:has(img[src*='noImage_small'])",
      mais acima no arquivo) so pega quando o <img> lazy-load (Flickity) ja resolveu o src; nos
      slides ainda nao carregados a foto placeholder aparece e reserva 120-225px. Como nenhuma
      empresa relacionada tem logo real neste widget, a foto e escondida sempre, sem depender do src. */
#detail-body .sidebar-cards .card-sidebar{
  height: auto !important;
}
#detail-body .sidebar-cards .cards-list{
  height: auto !important;
  align-items: flex-start !important;
}
.card-sidebar .picture-link{
  display: none !important;
}


/* Item 5 (correcao) - o elemento que de fato pinta a capa nao e .details-header[cover-image="false"]
   (esse fica atras, oculto), e sim o pseudo-elemento ::before de .details-header-content, que e opaco
   e cobre toda a area. A regra real esta mais acima no arquivo:
   ".details-header[cover-image=\"false\"] .details-header-content::before { background: radial-gradient(...) !important; }"
   Sobrescrita aqui, no fim do arquivo, para vencer por ordem de origem (mesma especificidade + !important). */
.details-header[cover-image="false"] .details-header-content::before{
  background-image: url("https://guia.maxsell.com.br/custom/domain_1/image_files/sitemgr_photo_59.png") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}


/* Rodada 19 (fechamento) — item 3: removido o hack de reordenacao via CSS (rodada 16/17:
   display:contents em .tab-left + grid-column + order, criado para intercalar o widget
   Fotos — hoje removido — entre os demais). A ordem "Video, Sobre, Leaderboard,
   Caracteristicas, Produtos e Servicos, Cobertura Geografica, Informacoes Operacionais,
   Ofertas, Classificados" agora vem da ordem nativa dos widgets no Construtor de Modelo
   de Anuncio (drag-and-drop), usando o empilhamento flex padrao de .tab-left (regra
   acima, linha ~545) em vez de sobrescreve-la. */

/* Card wrapper: spec desta rodada pede 24px 28px / raio 12px — mantido
   escopado só a este bloco para nao alterar os demais cards */
#detail-body .tab-item-video{
  padding:24px 28px !important;
  border-radius:12px !important;
  border-color:#E6E3EC !important;
  background:#FFF !important;
}

/* Titulo "VIDEO": 13px/600 (spec desta rodada) */
#detail-body .tab-item-video .tab-item-heading h4.heading{
  font-size:13px !important;
  font-weight:600 !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
  color:#6B6577 !important;
}


/* Video: player 16:9 por CSS, sobrepondo os atributos width/height fixos do
   iframe nativo (mesmo padrao da correcao do embed de mapa na rodada 9) */
#detail-body .tab-item-video .tab-item-content{
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
}
#detail-body .tab-item-video iframe.embed-responsive-item{
  width:100% !important;
  height:auto !important;
  aspect-ratio:16/9 !important;
  max-height:none !important; /* RODADA 20 item5.3: neutraliza max-height:400px nativo (style.min.css .tab-item-video iframe) que capava o aspect-ratio:16/9 */
  display:block !important;
  border:0 !important;
  border-radius:8px !important;
  background:#1B1B1B !important;
}
#detail-body .tab-item-video .description{
  font-size:15px !important;
  line-height:1.6 !important;
  color:#4F4F4F !important;
  text-wrap:pretty;
  margin:0 !important;
}


/* ==== Rodada 16 - addendum: label nativo "Video" (sem acento) ====
   O widget de video da ficha (aba nativa) gera o titulo fixo "Video", sem acento, e nao ha
   campo no admin (Construtor de Pagina / Editor de item) para renomear esse texto - e um label
   hardcoded do widget "Pagina do Anuncio". Seguindo o mesmo padrao adotado para o icone do
   TikTok na rodada 15 (conteudo via CSS quando o admin nao expoe o campo), sobrepomos o texto
   via ::after e ocultamos o original com font-size:0. */
#detail-body .tab-item-video .tab-item-heading h4.heading{
  font-size:0 !important;
}
#detail-body .tab-item-video .tab-item-heading h4.heading::after{
  content:"Vídeo";
  font-size:13px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#6B6577;
}


/* ==== Rodada 17 - correcao de regressoes da rodada 16 ====
   Item 3 (ordem da sidebar invertida): a regra acima usava o seletor generico
   '#detail-body .tab-item' (sem escopo), que tambem casava elementos da SIDEBAR
   (.tab-item-hours, .tab-item-location, .tab-item-social, .tab-item.sidebar-cards
   dentro de .tab-right) porque eles compartilham a classe base '.tab-item'. Isso
   forcava order:999 nesses widgets da sidebar, atropelando o order individual que
   ja existia (de rodada anterior) para a sequencia correta Horario -> Localizacao
   -> Siga-nos -> banner -> CTA -> Relacionadas. Fix: escopar o seletor original
   para '.tab-left > .tab-item' (filho direto de .tab-left), que exclui os itens
   que vivem dentro de .tab-right. Nao precisou redefinir a ordem da sidebar --
   ela volta sozinha ao normal assim que paramos de sobrescrever.

   Item 2 (vao branco de ~700px na coluna principal): .tab-right nao tinha
   grid-row explicito, entao o auto-placement do grid colocava a sidebar inteira
   (~2000px de conteudo) na MESMA linha do grid que '.tab-item-about' (a primeira
   linha da coluna principal, ~240px). Como a altura da linha e definida pelo maior
   item nela, a linha 1 crescia para ~2000px e sobrava um vao vazio atras do card
   'Sobre'. Fix: '.tab-right' passa a ocupar grid-row:1/-1 (span de todas as
   linhas), removendo-a do calculo de altura de uma linha unica -- ela fica
   alinhada ao topo (align-self:start) ao lado de toda a coluna principal, sem
   forcar nenhuma linha isolada a crescer. */
#detail-body .tab-right{
  grid-row: 1 / -1 !important;
  align-self: start !important;
}

/* Correcao adicional (mesmo item 2): 'grid-row:1/-1' tirou a sidebar de
   competir por UMA linha so, mas como span-item ela ainda participa do
   calculo de auto-sizing de TODAS as 10 linhas que a coluna principal usa
   (cada .tab-item vira sua propria linha, ja que a coluna 1 so tem 1 track).
   O algoritmo de distribuicao de excesso do Grid (item que faz span de
   varias linhas 'auto') jogou quase toda a sobra de altura (~1750px) de
   volta pra LINHA 1 -- o mesmo vao branco reaparecia, so que depois do
   card 'Sobre' em vez de antes dele. Fix definitivo: tirar '.tab-right' do
   grid por completo com position:absolute (ela deixa de contar pro calculo
   de altura de qualquer linha), ancorada no '.container' (position:relative)
   no topo-direita -- mesma posicao visual de sempre, mas sem nenhuma linha
   do grid da coluna principal sendo esticada por causa dela. */
/* Correcao adicional 2: a regra abaixo so pode valer no layout de 2
   colunas (desktop). Ha uma regra ja existente de rodadas anteriores --
   "@media (max-width:860px){ .container{grid-template-columns:1fr} .tab-right
   {grid-column:1} }" -- que empilha a sidebar de volta no fluxo normal (1
   coluna) no mobile/tablet. position:absolute e incompativel com isso: um
   item absolute sai do grid por completo e ignora grid-column, entao a
   sidebar ficava sobrepondo a coluna principal abaixo de 860px em vez de
   empilhar. Fix: escopar o position:absolute para acima de 860px (o mesmo
   breakpoint que a regra mobile ja usa), preservando o empilhamento normal
   no mobile/tablet. */
@media (min-width:861px){
  #detail-body .container{ position:relative !important; }
  #detail-body .tab-right{
    position:absolute !important;
    top:0 !important;
    right:0 !important;
    width:300px !important;
    grid-row:auto !important;
  }
}


/* Rodada 19 (fechamento) — item 3: removida a ordem explicita da sidebar (rodada 17).
   A ordem "Siga-nos, Horario, Localizacao, banner vertical, CTA, Relacionadas" agora vem
   da ordem nativa dos widgets no Construtor de Modelo de Anuncio (drag-and-drop), nao de CSS. */


/* ==== Rodada 17 - item 4: card "Sobre" com recuo e folga errados ==== */
/* Diagnostico: o widget nativo do card Sobre reserva uma miniatura
   ('.tab-item-content > .picture') ao lado do primeiro paragrafo
   (resumo) sempre que a ficha tem uma imagem de capa definida. Antes da
   Rodada 16 esta ficha nao tinha nenhuma foto cadastrada, entao essa
   miniatura ficava sem imagem (por isso "sem imagem no Sobre" nunca
   precisou de CSS explicito ate agora). Ao publicar a galeria de Fotos
   nesta rodada, a plataforma passou a usar a primeira foto cadastrada
   (sitemgr_photo_60) como capa/imagem principal da ficha, e essa MESMA
   imagem passou a aparecer tambem aqui: nao e um resquicio de espaco
   vazio, e uma imagem real, carregada e visivel (confirmado via
   HTMLImageElement.complete/naturalWidth) -- so que nao deveria estar
   aqui (decisao congelada de rodadas anteriores: sem imagem no card
   Sobre). Fix: ocultar a miniatura por CSS (via permitida) e devolver
   100% da largura ao paragrafo, igualando a largura do segundo
   paragrafo (sem classe), que ja usa a largura cheia do card. */
#detail-body .tab-item-about .tab-item-content > .picture{ display:none !important; }
#detail-body .tab-item-about .description{
  width:100% !important;
  max-width:100% !important;
  flex:1 1 100% !important;
}

/* ══════════════════════════════════════════════════════════════════════
   RODADA 19 (fechamento) — item 1: menu superior — botão "Anunciar"
   Reestilização de um <a>.navbar-link já existente (data-cy="Anunciar"),
   sem alterar destino (/anuncie) nem estrutura do menu. Rótulo "Guia" e
   ordem (Guia · Empresas · Ofertas · Blog · Eventos · Artigos · Entre em
   Contato · Anunciar) e remoção de "Classificados" do topo foram feitos
   nativamente pelo campo "Navegação" do widget Cabeçalho (admin > Design >
   Editor de página > Guia > editar widget Cabeçalho) — sem CSS, sem order:.
   Este bloco cobre SÓ a estilização do botão, restrito aos dois containers
   nativos do menu (.header-navbar no desktop, .navbar-mobile no drawer
   mobile) — não usa order: em lugar nenhum, para não repetir o vazamento
   de especificidade da rodada 16/17 (order:999 do .tab-item que vazou pro
   restante da página).
   ══════════════════════════════════════════════════════════════════════ */
.header-navbar a.navbar-link[data-cy="Anunciar"],
.navbar-mobile a.navbar-link[data-cy="Anunciar"]{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  background:var(--ms-laranja) !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:600 !important;
  border-radius:5px !important;
  border-bottom:none !important;
}
.header-navbar a.navbar-link[data-cy="Anunciar"]{
  padding:9px 16px !important;
}
/* drawer mobile: alvo de toque >=44px, padding menor conforme especificação */
.navbar-mobile a.navbar-link[data-cy="Anunciar"]{
  padding:8px 13px !important;
  min-height:44px !important;
  box-sizing:border-box !important;
}
.header-navbar a.navbar-link[data-cy="Anunciar"]:hover,
.navbar-mobile a.navbar-link[data-cy="Anunciar"]:hover{
  background:var(--ms-laranja-escuro) !important;
  color:#fff !important;
}
/* seta 14px depois do rótulo — reseta as propriedades herdadas do
   ::after genérico do .navbar-link (barra de sublinhado animada,
   já desativada globalmente via display:none !important na seção
   "5. REMOÇÃO DE ELEMENTOS INVENTADOS", precisa ser religada só aqui) */
.header-navbar a.navbar-link[data-cy="Anunciar"]::after,
.navbar-mobile a.navbar-link[data-cy="Anunciar"]::after{
  content:"→" !important;
  display:inline !important;
  position:static !important;
  width:auto !important;
  height:auto !important;
  background:none !important;
  left:auto !important; bottom:auto !important;
  font-size:14px !important;
  transition:none !important;
  border-radius:0 !important;
}


/* ══════════════════════════════════════════════════════════════════════
   RODADA 20 (encerramento) — item 1: menu superior — botão "Marketplace"
   Reestilização de um <a>.navbar-link já existente (data-cy="Marketplace"),
   criado nativamente pelo campo "Navegação" do widget Cabeçalho (mesmo
   caminho admin do botão "Anunciar" da rodada 19), apontando para
   https://maxsell.plataforma.flexy.com.br (Link Externo nativo do campo).
   "Entre em contato" foi removido do menu superior pelo mesmo campo —
   permanece no rodapé, não tocado. Mesma anatomia do botão "Anunciar",
   só trocando a cor para o roxo da marca. Sem order: em lugar nenhum.
   NOTA (backlog): o campo "Navegação" não expõe target/rel para links
   externos — o link abre na mesma aba, sem rel="noopener". CSS não
   define atributos HTML; registrado em feature-requests, não contornado
   aqui via JS (fora das duas vias permitidas: admin nativo / CSS overlay).
   ══════════════════════════════════════════════════════════════════════ */
.header-navbar a.navbar-link[data-cy="Marketplace"],
.navbar-mobile a.navbar-link[data-cy="Marketplace"]{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  background:var(--ms-roxo) !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:600 !important;
  border-radius:5px !important;
  border-bottom:none !important;
}
.header-navbar a.navbar-link[data-cy="Marketplace"]{
  padding:9px 16px !important;
}
/* drawer mobile: alvo de toque >=44px, padding menor conforme especificação */
.navbar-mobile a.navbar-link[data-cy="Marketplace"]{
  padding:8px 13px !important;
  min-height:44px !important;
  box-sizing:border-box !important;
}
.header-navbar a.navbar-link[data-cy="Marketplace"]:hover,
.navbar-mobile a.navbar-link[data-cy="Marketplace"]:hover{
  background:#440BAE !important;
  color:#fff !important;
}
.header-navbar a.navbar-link[data-cy="Marketplace"]::after,
.navbar-mobile a.navbar-link[data-cy="Marketplace"]::after{
  content:"→" !important;
  display:inline !important;
  position:static !important;
  width:auto !important;
  height:auto !important;
  background:none !important;
  left:auto !important; bottom:auto !important;
  font-size:14px !important;
  transition:none !important;
  border-radius:0 !important;
}


/* ══════════════════════════════════════════════════════════════════════
   RODADA 20 (encerramento) — item 2: espacamento uniforme de 20px
   entre widgets, coluna principal e sidebar.

   Diagnostico (medido ao vivo, getBoundingClientRect antes de qualquer
   alteracao):
   - Coluna principal (.tab-left): gap:20px, todos os 9 pares de vizinhos
     medindo exatamente 20px, sem margem residual. Nenhuma alteracao
     necessaria aqui.
   - Sidebar (.tab-right): gap base era 18px (regra da linha ~546,
     alterada nesta rodada para 20px). Alem disso, o par
     Horario->Localizacao media 50px (18 + 32), porque .tab-item-location
     nao estava coberto pela regra que zera o margin-top nativo do tema
     (.tab-content .tab-item{margin-top:32px}, style.min.css) - a Rodada 14
     ja tinha zerado esse valor para a coluna principal (".tab-left >
     .tab-item, .tab-left > .banner", ver comentario acima, "Rodada 14 C2")
     mas o mesmo problema nunca tinha surgido na sidebar ate agora (o
     comentario da Rodada 14 registra "Sidebar ja estava correta em 18px,
     sem margin extra" - o que era verdade naquele momento). Fix abaixo
     estende o mesmo padrao para .tab-right, zerando a margem propria do
     widget (nunca compensando via gap, conforme instrucao do prompt).
   - Bloco "table-style" (Cobertura Geografica / Informacoes Operacionais):
     auditado, gap medido em exatos 20px entre os pares - overflow:hidden
     + border-bottom internos dos cards nao produzem folga externa
     (medicao via getBoundingClientRect reflete a caixa renderizada real).
   - Banners vizinhos (leaderboard na coluna principal; skyscraper/CTA na
     sidebar): auditado, sem margin propria residual nesta ficha.

   NAO ALTERADO (fora do escopo permitido nesta rodada): o gap de 22px de
   "#detail-body .detail-body-content .container" (o gutter ENTRE a coluna
   principal e a sidebar, grid-template-columns:1fr 300px) - o bloco de
   CSS do item 2 do proprio prompt pede gap:24px para esse mesmo seletor,
   mas a lista "o que nao fazer" da mesma rodada instrui explicitamente
   "nao reabrir" esse valor, decisao ja tomada na Rodada 17 e reconfirmada
   na Rodada 19 (ver empresa-diff-v15.md item 4 e empresa-fechamento.md
   R19 item 4). Contradicao entre as duas partes do proprio prompt desta
   rodada - registrada em empresa-fechamento.md (Rodada 20) e no backlog,
   nao resolvida por adivinhacao. O gap:20px pedido pelo item 2 refere-se
   ao espacamento ENTRE WIDGETS dentro de cada coluna (.tab-left/.tab-right),
   nao ao gutter entre as duas colunas - os dois sao seletores CSS
   diferentes, confirmado por inspecao ao vivo do DOM/CSS computado.
   ══════════════════════════════════════════════════════════════════════ */
.tab-right > .tab-item,
.tab-right > .banner{
  margin-top: 0 !important;
}


/* ══════════════════════════════════════════════════════════════════════
   RODADA 20 (encerramento) — item 3: botao "Marketplace" no rodape,
   mesma coluna Siga-nos, ao lado do "Anunciar" (laranja primeiro, roxo
   depois). Mesma tecnica da Rodada 14 (link nativo em site-content,
   reposicionado via position:absolute para a coluna Siga-nos - nao ha
   como mover um no de uma coluna flex para outra so com CSS). O item
   "Marketplace" foi adicionado ao campo "Navegacao do rodape" (mesma
   lista nativa que ja continha "Anunciar"), href
   https://maxsell.plataforma.flexy.com.br via "Link Externo".
   NOTA (backlog, mesma limitacao do item 1): o campo nao expoe
   target/rel - rel="noopener" nao pode ser setado nem via admin nem via
   CSS (CSS nao define atributos HTML). Registrado em feature-requests.
   ══════════════════════════════════════════════════════════════════════ */
.footer-item[data-content="site-content"] a[href="https://maxsell.plataforma.flexy.com.br"]{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  color: #fff !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  padding: 12px 20px !important;
  border-radius: 5px !important;
  background: #5510D3 !important;
  box-shadow: 0 8px 18px rgba(85,16,211,0.3) !important;
  transition: background 0.15s ease;
  min-width: 158px;
}
/* Rodada 21 - o margin-top:8px generico foi movido para o fallback abaixo de 992px
   (bloco no fim do arquivo), porque aqui, sem guarda de media query e depois do
   bloco "@media(min-width:992px)" (Rodada 20) mais acima no arquivo, ele vencia a
   cascata por ordem de origem (mesma especificidade, ambos !important) e reaplicava
   8px de deslocamento vertical no botao mesmo em telas >=992px, onde o botao ja esta
   position:absolute/top:91px - o Anunciar nao tinha esse problema porque nunca teve
   um segundo bloco base depois do seu proprio @media. Correcao: manter margin-top:8px
   condicionado a max-width:991px (ver bloco logo abaixo). */
@media (max-width: 991px){
  .footer-item[data-content="site-content"] a[href="https://maxsell.plataforma.flexy.com.br"]{
    margin-top: 8px !important;
  }
}
.footer-item[data-content="site-content"] a[href="https://maxsell.plataforma.flexy.com.br"]::after{
  content: "\2192";
  font-size: 15px;
}
.footer-item[data-content="site-content"] a[href="https://maxsell.plataforma.flexy.com.br"]:hover{
  background: #440BAE !important;
}


/* AJUSTE 2026-08-05 (rodada 7, item 2): alinhar o container do rodape
   ao mesmo max-width/padding usado nas demais secoes da pagina /anuncie
   (1240px/32px), e converter a lista de links "Conteudo do Site" de
   column-count:2 (ordem por coluna, alturas desiguais) para CSS grid de
   2 colunas com ordem por linha, igualando ao prototipo. */
.footer .container{
  max-width:1280px !important;
  padding:0 28px !important;
}
.footer > .footer-content > .container > .wrapper{
  display:grid !important;
  grid-template-columns:1.4fr 1.1fr 1fr !important;
  gap:40px !important;
}
@media (max-width: 768px){
  .footer > .footer-content > .container > .wrapper{
    display:flex !important;
    flex-direction:column !important;
    gap:32px !important;
  }
}
.footer-item[data-content="site-content"] .footer-item-content{
  column-count:auto !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  grid-auto-flow:column !important;
  grid-template-rows:repeat(6,auto) !important;
  gap:8px 20px !important;
}
.footer-item[data-content="site-content"] a[href="https://guia.maxsell.com.br/anuncie"]{
  grid-column:1 / -1 !important;
  grid-row:7 !important;
}
.footer-item[data-content="site-content"] a[href="https://maxsell.plataforma.flexy.com.br"]{
  grid-column:1 / -1 !important;
  grid-row:8 !important;
}


/* AJUSTE 2026-08-05 (correcao pontual): remover a faixa branca entre o
   menu e o inicio do herói em /anuncie. Origem: .custom-content (wrapper
   generico do widget "Conteudo Personalizado", padrao do tema, fundo
   transparente) tem padding-top proprio (48px desktop/1024, 24px mobile)
   que sobra ACIMA do fundo #F7F6FA do .ms-hero, alem do padding interno
   de .ms-hero-wrap (que permanece intocado). Escopado via :has() para
   atingir somente o widget que contem .ms-hero, sem afetar os demais
   widgets "Conteudo Personalizado" da pagina (que usam esse padding
   padrao para o proprio espacamento). */
section.custom-content:has(.ms-hero){
  padding-top:0 !important;
}


/* Secao 3 (Rodada 8) - reducao do gap branco entre FAQ e a faixa do cadastro:
   .ms-cadastro-block e envolto por um section.custom-content nativo (mesmo padrao
   do fix do hero) com padding-top:48px padrao do tema, que sobra em branco antes
   do conteudo do cadastro comecar. FAQ (.ms-anunciar-block2.ms-sec-faq, pt/pb
   56/56) e seu wrapper (section.custom-content, pt/pb 48/48) ja estao simetricos -
   nao ha assimetria para corrigir ali; a fonte real do excesso e o padding-top do
   wrapper do cadastro. */
section.custom-content:has(.ms-cadastro-block){ padding-top:0 !important; }


/* Rodada 9 - item 2.3: separacao visivel entre a banda #1B1B1B do cadastro e o rodape #141216 (mesma solucao das transicoes da Rodada 6) */
.footer{
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* ===================================================================
   15. RODADA 15 (2026-08-08) - fidelidade entre paginas internas e a home
   Problema: paginas internas (empresa, evento, template de detalhe do
   anuncio) usam os mesmos componentes de card/template da home, mas 3
   correcoes que ja existiam SO no customTag da home (id=1, pagina unica)
   nunca foram replicadas aqui, porque aquele campo e por pagina e nao
   vaza para as outras. Resultado ao vivo: nome da empresa e titulo do
   evento invisiveis (texto branco sobre card branco), texto colado na
   borda do card (padding zerado) e estrelas vazias aparecendo sem
   nenhuma avaliacao. Correcao entra aqui porque os 3 componentes sao
   reutilizados em varias paginas (confirmado em /empresa e /evento;
   provavel tambem em classificado/oferta/artigo/blog, que usam a mesma
   estrutura .card - a confirmar no levantamento do Item 6).
   =================================================================== */
.card .content{
  padding-left: 16px;
  padding-right: 16px;
}
.card .content .title.heading{
  color: var(--ms-preto, #1B1B1B) !important;
}
.reviews:not(:has(.fa-star)){
  display: none !important;
}

/* Item 4 (Rodada 15): banner "Esta empresa e sua? Solicite este anuncio
   aqui" no template de detalhe do anuncio (id=4) usava um truque de
   largura total (margin-left:-162px + width:calc(100% + 440px)) do tema
   base, calibrado para um container mais largo do que o real neste site -
   o banner comecava 54px para fora da borda esquerda da tela (medido:
   getBoundingClientRect().left = -54px antes da correcao). id=4 e pagina
   de template e nao tem o campo customTag proprio (nao existe "Opcoes
   avancadas de SEO" nela), entao a correcao so pode ser feita aqui. */
.details-default > .details-header .details-claim{
  margin-left: 0 !important;
  width: 100% !important;
}


/* ===================================================================
   RODADA 16 (2026-08-08) - Item 1: faixas mortas abaixo do header
   ".banner[type=leaderboard]" e um widget unico (imagem 728x90 sem
   link) cujo padding responsivo do tema (24px base, 48px em desktop)
   cria a impressao de duas faixas vazias abaixo do header. Reduzimos
   o padding inferior sem alterar o widget, a imagem ou outros tipos
   de banner (ex: large-mobile, tratado na Rodada 15).
   Presente em: /oferta, /classificado, /contato,
   /perguntas-frequentes, /empresa/categorias, /empresa/localidades,
   /evento. NAO presente em /artigo nem no topo do template de
   anuncio (id=4, banner fica no meio da pagina, dentro de .tab-left).
   =================================================================== */
.banner[type="leaderboard"]{ padding-bottom: 16px !important; }


/* ===================================================================
   RODADA 16 (2026-08-08) - Item 2: numero do dia invisivel no badge
   de eventos (.calendar-sm). O tema base define .heading.day com
   color:#fff (branco), invisivel sobre o fundo branco do widget de
   listagem de eventos. O mesmo bug foi corrigido na Rodada 13 apenas
   para a instancia da home (#upcoming-events, customTag id=1, com
   redesenho completo do componente) - correcao nao se propaga para
   outras paginas pois customTag nao vaza entre paginas. Esta regra
   cobre a base do componente em qualquer lugar que ele apareca.
   Presente em: /evento (cards da lista e card grande em destaque,
   badge com position:absolute - alinhamento e desenho intencional).
   NAO presente em /evento/categorias, /evento/localidades nem no
   template de detalhe de evento (contagem de .calendar-sm = 0).
   Nao conflita com a regra mais especifica da home (R13, customTag
   id=1): mesma cor final, seletor diferente, sem duplicacao literal.
   =================================================================== */
.calendar-sm .heading.day{ color:#1B1B1B !important; font-size:17px !important; font-weight:700 !important; }


/* ===================================================================
   RODADA 16 (2026-08-08) - Item 4: listagens de categorias e
   localidades sem tratamento de cartao (/empresa/categorias,
   /empresa/localidades). Bug mais serio do que o levantamento
   descrevia: a hierarquia Brasil > estado > cidade e FUNCIONAL
   (testada - clique em "more-info" revela nav-item/nav-link e
   permite descer ate cidade), mas fica praticamente invisivel
   porque .title-count e .nav-link usam cor quase preta
   (rgba(27,27,27,.5) e rgb(27,27,27)) sobre o fundo escuro da
   secao (.categories-base, quase preto). Corrigimos dando aos
   itens um cartao claro (mesma linguagem visual dos cards da
   home), o que resolve contraste e da o tratamento de "cartao"
   pedido ao mesmo tempo. Presente tambem em /evento/categorias
   (componente compartilhado, testado sem regressao - pagina
   tem 0 categorias no momento).
   =================================================================== */
.categories-content .toggle-item{ background: #F7F6FA !important; border-radius: 12px !important; padding: 4px 20px !important; margin-bottom: 12px !important; }
.categories-content .toggle-header{ display:flex !important; align-items:center !important; justify-content:space-between !important; min-height: 56px !important; }
.categories-content .toggle-title{ color:#1B1B1B !important; }
.categories-content .title-count{ color: rgba(27,27,27,0.5) !important; }
.categories-content .nav-wrapper{ padding: 4px 0 16px 0 !important; }
.categories-content .nav-item{ display:flex !important; align-items:center !important; justify-content:space-between !important; padding: 10px 0 !important; border-top: 1px solid rgba(27,27,27,0.08) !important; }
.categories-content .nav-link{ color:#1B1B1B !important; }
.categories-content .more-info .fa, .categories-content .more-info-item .fa{ color:#1B1B1B !important; }



/* ===================================================================
   RODADA 17 (2026-08-10) - Item 2: ordem visual Anunciar/Marketplace no
   menu principal, propagada da home para o site inteiro.
   Historico: a Rodada 13 aplicou esta troca de ordem (Anunciar antes de
   Marketplace) apenas na home, via customTag da pagina id=1 - por isso
   nunca chegou as demais paginas (customTag nao vaza entre paginas).
   Decisao do cliente (Rodada 17): a versao da home e o padrao; propagar,
   nao alterar. Mesma tecnica da regra original: reordenacao via flex
   order (nao reordena o DOM), portanto cores/hrefs/textos permanecem
   ligados ao mesmo link de origem. Seletor por atributo de href cobre
   as duas instancias do menu que existem no markup (desktop
   .header-navbar e mobile .navbar-links dentro de .navbar-mobile) sem
   precisar de dois seletores. Verificado sem regressao em /, /blog,
   /artigo, /oferta, /evento, /forum, /empresa/categorias antes de salvar.
   =================================================================== */
a.navbar-link[href*="flexy.com.br"] {
  order: 1;
}


/* ===================================================================
   RODADA 17 (2026-08-10) - Item 2: linha decorativa gradiente sob o
   header, propagada da home para o site inteiro.
   Mesma origem/historico da regra de ordem Anunciar/Marketplace acima:
   Rodada 13, aplicada apenas na home via customTag da pagina id=1.
   Decisao do cliente (Rodada 17): a linha deve aparecer em todas as
   paginas. header.header ja e position:relative por padrao do tema em
   todas as paginas testadas (nao ha necessidade de alterar isso, regra
   abaixo apenas garante). Nenhuma pagina testada tinha ::before proprio
   em header.header antes desta regra (sem conflito). Verificado sem
   regressao em /, /blog, /artigo, /oferta, /evento, /forum,
   /empresa/categorias antes de salvar.
   =================================================================== */
header.header {
  position: relative;
}
header.header::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, #5510D3, #FD660E);
}


/* ===================================================================
   RODADA 17 (2026-08-10) - Item 5: links ilegiveis sobre faixas de cor
   de marca (varredura por padrao, nao so /forum).
   Causa raiz: o tema usa a variavel --link-base (redefinida no :root
   deste site para #8a63f2, um roxo claro pensado para uso sobre fundo
   branco/claro) em qualquer link dentro de um container com
   data-bg="brand" (fundo #5510d3, tambem roxo). Roxo claro sobre roxo
   escuro = baixo contraste (2.14:1, abaixo do minimo de 4.5:1 exigido).
   Nao alteramos --link-base (usada legitimamente em fundos claros em
   varios outros lugares do site: .link em cards brancos,
   .summary-categories-item, .paywall-box .login-msg .link, etc.) -
   isso quebraria esses outros usos. A correcao e escopada apenas ao
   contexto problematico via seletor de atributo.
   Varredura confirmou o mesmo padrao (baixo contraste, mesma causa)
   em 3 classes diferentes, em multiplas paginas:
   - .link ("mais categorias" / "mais eventos"): /oferta, /evento,
     /classificado, /empresa/localidades (contraste 2.14:1)
   - .categories-item (tiles de categoria): /oferta, /classificado
     (cor nem sequer usava --link-base - azul padrao do tema
     rgb(0,123,255), contraste 2.20:1)
   - .bar-link.bar-button ("Conecte-se"): /forum (contraste 2.14:1,
     o sintoma original reportado)
   Nao alteramos texto sem underline em tiles de categoria
   (.categories-item) para nao quebrar o desenho de card - a cor
   branca + hover laranja ja resolvem legibilidade e "parece clicavel"
   sem alterar a linguagem visual do componente. Verificado: nenhum
   link dentro de [data-bg="brand"] tem fundo proprio (nao e botao
   solido) em nenhuma pagina testada - seguro aplicar cor de texto
   globalmente neste escopo.
   =================================================================== */
[data-bg="brand"] a {
  color: #fff !important;
}
[data-bg="brand"] a:hover {
  color: #FD660E !important;
}

/* ===================================================================
   RODADA 18 (2026-08-10) - Item 3 (auditoria mobile): bug catastrofico
   no cabecalho mobile da pagina de detalhe do anuncio (template id=4,
   usado por TODAS as paginas de empresa) - nome da empresa rende letra
   por letra, empilhado verticalmente, em vez de texto normal.
   Causa-raiz: em telas estreitas (<768px), ".details-header-mobile
   .details-info" e um flex row com 3 filhos (.details-title,
   .details-categories, .details-claim) sem regra de largura definida
   para eles neste breakpoint - o navegador reparte o espaco em 3
   colunas praticamente iguais (~70px cada em 320-390px de largura de
   tela). Dentro de .details-title (70px), o H1 do nome da empresa
   disputa espaco com os icones de compartilhar (.details-share) e fica
   espremido a largura 0 - o texto entao quebra caractere a caractere.
   Achado durante o Item 3 (auditoria, nao correcao) mas tratado aqui
   por ser catastrofico (conteudo do nome da empresa ilegivel),
   conforme autorizado pelo briefing para casos assim.
   Fix: empilhar os 3 blocos verticalmente (cada um ocupando 100% da
   largura) e permitir que o titulo quebre linha entre nome e icones de
   compartilhar, em vez de dividir o espaco em 3 colunas estreitas.
   =================================================================== */
@media (max-width: 767px) {
  .details-header-mobile .details-info {
    flex-direction: column !important;
  }
  .details-header-mobile .details-info > .details-title,
  .details-header-mobile .details-info > .details-categories,
  .details-header-mobile .details-info > .details-claim {
    width: 100% !important;
    flex: 1 1 auto !important;
  }
  .details-header-mobile .details-title {
    flex-wrap: wrap !important;
  }
  .details-header-mobile .details-title .heading {
    flex: 1 1 auto !important;
    min-width: 150px !important;
    width: auto !important;
  }
}


/* ===================================================================
   RODADA 19 - Item 2: alvos de toque do menu mobile principal abaixo
   de 44px (achado sistemico da auditoria da R18, presente nas 9
   paginas testadas). Sete links (Guia, Empresas, Ofertas, Blog,
   Eventos, Artigos, Anuncie aqui) mediam 27-32px de altura; o botao
   hamburguer media 20-22x26px. Apenas Marketplace e Anunciar
   (estilizados como botao) ja atingiam 44px.
   Fix: aumenta a area de toque via padding (nao via font-size, para
   nao alterar o tamanho visual do texto), com min-height/altura fixa
   de 44px. Os 7 links sao selecionados por atributo (data-cy /
   data-trans) para nao afetar Marketplace/Anunciar, que compartilham
   a mesma classe .navbar-link mas ja tem padding proprio (8px 13px)
   suficiente - uma regra generica em .navbar-link removeria esse
   padding horizontal e alteraria a aparencia de botao deles.
   O menu mobile roda em fluxo normal do documento (position:relative,
   nao e overlay fixo), entao o crescimento de altura empurra o
   conteudo abaixo sem cortar nenhum item - confirmado por medicao,
   nao foi necessario rolagem interna adicional.
   =================================================================== */
@media (max-width: 767px) {
  .navbar-links a.navbar-link[data-cy="Guia"],
  .navbar-links a.navbar-link[data-cy="Empresas"],
  .navbar-links a.navbar-link[data-cy="Ofertas"],
  .navbar-links a.navbar-link[data-cy="Blog"],
  .navbar-links a.navbar-link[data-cy="Eventos"],
  .navbar-links a.navbar-link[data-cy="Artigos"],
  .navbar-links a.navbar-link[data-trans="Anuncie aqui"] {
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .toggler-button.navbar-toggler {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}


/* ===================================================================
   RODADA 19 - Item 3: bloco de reivindicacao do anuncio ("Solicite
   este anuncio aqui" / "para editar dados, publicar ofertas e
   responder avaliacoes") aparecia visualmente sobreposto/fragmentado
   no cabecalho mobile da pagina de detalhe (mesmo template
   compartilhado por empresa, evento e classificado - id=4).
   Causa raiz medida com getBoundingClientRect (nao presumida): NAO e
   um segundo elemento sob o tooltip - nenhum par de elementos tinha
   intersecao real de retangulo. O problema e que ".details-info"
   carrega uma regra desta mesma auditoria (".details-info { position:
   relative !important; padding-right: 250px !important; }", sem media
   query, portanto ativa tambem no mobile) que reserva 250px de espaco
   a direita - originalmente pensada para outro layout, provavelmente
   desktop. Combinada com o empilhamento vertical da R18
   (flex-direction:column), essa reserva de 250px reduzia a largura de
   conteudo disponivel de ~351px para ~101px, espremendo o texto do
   link "Solicite este anuncio aqui" em uma coluna muito estreita -
   o texto entao quebrava em varias linhas dentro do proprio
   container (vazamento de conteudo do proprio bloco, nao sobreposicao
   entre elementos).
   Fix: zera o padding-right reservado no mobile (nada o ocupa nesta
   largura) e permite que o link de reivindicacao quebre para largura
   total numa linha propria dentro do bloco, em vez de espremer ao
   lado do icone e do texto "Esta empresa e sua?".
   =================================================================== */
@media (max-width: 767px) {
  .details-header-mobile .details-info {
    padding-right: 0 !important;
  }
  .details-header-mobile .details-claim {
    flex-wrap: wrap !important;
  }
  .details-header-mobile .details-claim a.link {
    width: 100% !important;
    flex-basis: 100% !important;
  }
}


/* ===================================================================
   RODADA 20 - Item 3: botao "Contato" duplicado sobrepondo o titulo
   no template de classificado (achado da auditoria da R19).
   Investigacao (exigida antes de qualquer fix): NAO e uma duplicata
   real visivel simultaneamente. O template classificado renderiza
   DOIS blocos de cabecalho no DOM ao mesmo tempo -
   .details-header-desktop (link data-module="classified") e
   .details-header-mobile (link data-module="listing") - e um CSS
   nativo da plataforma alterna qual dos dois fica visivel por
   breakpoint (display:none/block), o mesmo padrao responsivo usado
   em todo o site. Ou seja: em qualquer largura so um botao "Contato"
   fica visivel por vez - nao ha dois botoes ativos ao mesmo tempo.
   O defeito real tem duas causas distintas, ambas no bloco que fica
   ativo em mobile (.details-header-mobile):
   (a) posicionamento: .details-actions e position:absolute com
   left:160px/right:0/top:0, uma faixa fixa no canto superior direito
   do cabecalho. Como o titulo (.heading.h-4) flui normalmente logo
   abaixo, um titulo longo (2+ linhas) cresce para dentro dessa faixa
   e o botao fica por cima do texto - confirmado por medicao
   (getBoundingClientRect do botao e do titulo, interseccao
   verdadeira). Fix: abaixo de 480px, o botao sai de position:absolute
   e volta ao fluxo normal (ultimo item do cabecalho mobile, depois do
   titulo e do compartilhamento) - nao ha mais como sobrepor,
   independente do tamanho do titulo.
   (b) rotulo duplicado: o link do botao (qualquer um dos dois blocos,
   desktop OU mobile) tem um ::after nativo da plataforma com
   content:"Falar com a empresa" - propriamente usado no template
   empresa (mesmo texto do botao la), mas vazando para o classificado
   porque a regra nao e escopada por template. O texto do link em si
   e so "Contato", entao o resultado visivel era "ContatoFalar com a
   empresa" concatenado sem espaco - confirmado lendo
   getComputedStyle(link, '::after').content antes e depois, nos dois
   blocos (desktop e mobile). Fix: neutraliza o ::after apenas dentro
   de paginas classificado (escopado por .details-classifieds, a
   classe do body/wrapper desse template - nao afeta empresa, onde o
   texto e o design pretendido).
   Verificado sem intersecao 390 e 360px; botao unico, funcional,
   testado com clique real - abre o modal "Envie uma mensagem para
   [titulo do anuncio]" corretamente direcionado a este classificado
   especifico. Reverificado em evento (.details-actions vazio nesse
   template - fix nao tem efeito, sem regressao) e em empresa
   (legrand-fabricante-sao-paulo-sp.html - botao "Avalie", sem
   ::after nativo, sem interseccao antes ou depois - sem regressao).
   Achado extra: o bug do rotulo duplicado (b) tambem existia no
   desktop (nao apenas mobile) - nunca auditado antes; o fix aqui o
   corrige nos dois.
   =================================================================== */
@media (max-width: 480px) {
  .details-header-mobile .details-actions {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    margin-top: 12px !important;
  }
}
.details-classifieds .details-actions a::after {
  content: "" !important;
}

/* ===================================================================
   RODADA 20 - Item 5: texto justificado no bloco "SOBRE" do detalhe
   de evento (390px), com rios brancos largos entre palavras. Causa
   raiz: regra nativa da plataforma (style.min.css, sem @media, sem
   escopo mobile) - NAO e algo introduzido em rodada anterior:
     .details-default > .detail-body .detail-body-content .tab-content
     .banner-about .description p,
     .details-default > .detail-body .detail-body-content .tab-content
     .tab-item-about .description p { text-align: justify; }
   Confirmado via leitura direta do CSSOM (unica regra do site com
   text-align:justify) que o mesmo seletor (".tab-item-about .description
   p" / classe ".summary-description") esta presente nos templates de
   evento, empresa e classificado (estrutura compartilhada ".details-
   default"), portanto e um fix de CSS global, nao de customTag de uma
   pagina. Fix: abaixo de 480px, texto alinhado a esquerda. Acima de
   480px o justificado original permanece intacto (nao e o alvo desta
   correcao e colunas mais largas nao sofrem do mesmo efeito visual).
   =================================================================== */
@media (max-width: 480px) {
  .details-default > .detail-body .detail-body-content .tab-content .banner-about .description p,
  .details-default > .detail-body .detail-body-content .tab-content .tab-item-about .description p {
    text-align: left !important;
  }
}

/* ===================================================================
   RODADA 20 - Item 6 (parte 1/2 - anel de foco): correcao do briefing
   apos checagem de baseline real (clique/foco real em cada um dos 7
   campos, alternando focado/desfocado): AO CONTRARIO do que o briefing
   descreve ("outline, box-shadow e border identicos entre focado e
   nao focado - nao e fraco: e nada"), 6 dos 7 campos (firstname,
   lastname, email, phone, subject, captcha) JA POSSUEM anel de foco
   nativo do tema (outline: solid 2px #fd660e, a cor --highlight-base
   do sistema de design) - so o campo "message" (textarea) esta
   genuinamente sem nenhum indicador de foco. Alem disso, medido o
   contraste do anel existente (#fd660e) contra o fundo branco do
   campo: ~2.97:1, abaixo do minimo de 3:1 exigido pela WCAG 2.1 SC
   1.4.11 (contraste nao-textual) para indicadores de foco - passa
   perto, mas nao passa. Fix: uma unica regra :focus-visible cobrindo
   os 7 campos do formulario de contato, usando --highlight-dark
   (#d7570c, ja existente no design system em Cores e fontes) em vez
   de --highlight-base - mesmo tom, mais escuro, contraste medido
   ~4.0:1 contra fundo branco (passa). Isso unifica os 7 campos (fecha
   a lacuna do textarea "message") sem inventar uma cor nova.
   =================================================================== */
.contactus-form input:not([type="hidden"]):focus-visible,
.contactus-form textarea:focus-visible {
  outline: 2px solid var(--highlight-dark, #d7570c) !important;
  outline-offset: 2px !important;
}

/* ============================================================
   R24 -- FAQ (Perguntas Frequentes): agrupamento por secao
   Pagina: /perguntas-frequentes (id=31) -- Item 1 do brief R24
   Via: CSS de sobreposicao sobre o widget nativo "Titulo de secao"
   e o modulo nativo de FAQ (.faq-content / .toggle-item)
   Observacao: !important necessario -- os data-bg do tema (base/neutral)
   aplicam fundo escuro via regra de maior precedencia no CSS nativo.
   ============================================================ */

body:has(.faq-page) .section-headers[data-bg="base"]{
  background:transparent !important;
  padding:0 !important;
  margin:34px 0 0 !important;
}
body:has(.faq-page) .section-headers[data-bg="base"] .heading.h-2{
  font-family:'Poppins',sans-serif !important;
  font-size:26px !important;
  font-weight:700 !important;
  letter-spacing:-0.7px !important;
  color:var(--ms-preto) !important;
  position:relative !important;
  padding-bottom:17px !important;
  margin:0 !important;
}
body:has(.faq-page) .section-headers[data-bg="base"] .heading.h-2::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  bottom:0 !important;
  width:56px !important;
  height:4px !important;
  border-radius:4px !important;
  background:linear-gradient(90deg,var(--ms-laranja),var(--ms-roxo)) !important;
}

.faq-page .faq-header[data-bg="neutral"]{
  background:var(--ms-cinza-bg) !important;
}
.faq-page .faq-header .faq-info h1{
  color:var(--ms-preto) !important;
  font-family:'Poppins',sans-serif !important;
}

.faq-page .faq-content{
  background:var(--ms-branco);
  border:1px solid var(--ms-borda);
  border-radius:var(--ms-radius-sm);
  overflow:hidden;
}
.faq-page .toggle-item[data-bg="neutral"]{
  background:transparent !important;
  border-bottom:1px solid var(--ms-cinza-bg);
}
.faq-page .toggle-item:last-of-type{
  border-bottom:0;
}
.faq-page .toggle-header{
  min-height:44px;
}
.faq-page .toggle-title{
  font-family:'Poppins',sans-serif !important;
  font-size:15.5px !important;
  font-weight:600 !important;
  color:var(--ms-preto) !important;
  line-height:1.35;
}
.faq-page .button-toggle-title{
  flex:none;
  width:24px !important;
  height:24px !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid var(--ms-borda) !important;
  border-radius:5px !important;
  color:var(--ms-roxo) !important;
  font-size:15px !important;
}
.faq-page .button-toggle-title::before{
  display:none !important;
}
.faq-page .button-toggle-title::after{
  content:"" !important;
  grid-area:1/1 !important;
  width:10px !important;
  height:2px !important;
  background:var(--ms-roxo) !important;
  border-radius:2px !important;
}
.faq-page .button-toggle-title .fa{
  display:block !important;
  grid-area:1/1 !important;
  width:2px !important;
  height:10px !important;
  color:transparent !important;
  background:var(--ms-roxo) !important;
  border-radius:2px !important;
  font-size:0 !important;
}
.faq-page .toggle-item:has(.toggle-content[style*="display: block"]) .button-toggle-title .fa{
  display:none !important;
}
.faq-page .toggle-content{
  color:var(--ms-cinza-texto) !important;
  font-size:14.5px;
  line-height:1.6;
}
.faq-page .contact-us{
  color:var(--ms-cinza-texto) !important;
}


/* ===================================================================
   R25 — LOTE 1 · CONTRASTE E PALETA — aplicado em 30/08/2026
   Seletores MEDIDOS ao vivo. Registro: claude/guia-maxsell-r25-lote1-portoes-2026-08-30.md
   Backup do arquivo anterior: Dropbox/MaxSell - Anexos Monday/Guia - CSS/Backups/
                               csseditor-baseline-2026-08-30.css (131.929 car.)
   Razoes WCAG AA (4,5:1 texto normal), medidas com compositing real:
     branco  s/ #FD660E = 2,96  REPROVA   <- estado anterior
     #1B1B1B s/ #FD660E = 5,81  passa     <- adotado
     #1B1B1B s/ #E2540A = 4,52  passa     <- hover
     #FD660E s/ branco  = 2,96  REPROVA
     #E2540A s/ branco  = 3,81  REPROVA   <- por isso NAO foi usado em texto
     #007BFF s/ branco  = 3,98  REPROVA   <- azul do Bootstrap, fora da paleta
     #8A63F2 s/ branco  = 4,08  REPROVA   <- roxo claro, fora da paleta
     #5510D3 s/ branco  = 8,75  passa     <- roxo da marca, adotado em links
------------------------------------------------------------------- */

/* --- 1. Botoes com preenchimento laranja (8 elementos medidos) ---
   .button.button-bg.is-primary  -> Buscar x2, Entrar, Cadastre-se
   [id="navigation-item-8"]      -> Anunciar (topo desktop + menu mobile)
   .link-footer[href$="/anuncie"]-> Anunciar (rodape)
   a[style*="background:#FD660E"]-> "Ver planos" (unico com estilo inline)
   A cor de marca NAO muda; muda so a tinta do texto.                        */
.button.button-bg.is-primary,
[id="navigation-item-8"],
.link-footer[href$="/anuncie"],
a[style*="background:#FD660E"]{
  color:var(--ms-branco) !important;
}
.button.button-bg.is-primary:hover,
[id="navigation-item-8"]:hover,
.link-footer[href$="/anuncie"]:hover,
a[style*="background:#FD660E"]:hover{
  background:var(--ms-laranja-escuro) !important;
  color:var(--ms-branco) !important;
}
.button.button-bg.is-primary:focus-visible,
[id="navigation-item-8"]:focus-visible,
.link-footer[href$="/anuncie"]:focus-visible,
a[style*="background:#FD660E"]:focus-visible{
  outline:2px solid var(--ms-preto) !important;
  outline-offset:2px !important;
}

/* --- 2. Links de texto -> roxo da marca ---
   Laranja vira cor de PREENCHIMENTO; nenhum tom de laranja alcanca 4,5:1
   sobre branco sem sair da paleta medida. O roxo #5510D3 ja e a segunda
   cor da marca e ja pinta 34 links deste mesmo tipo.
   Medidos: .cards-header .link 3 · .bar-link (sem .bar-button) 1 ·
            .categories-item 68 · .categories .link 27 ·
            .categories-header .link 2 · .form-lost-password .link 1 ·
            .privacy-policy .link 4
   .bar-link.bar-button ficou de fora de proposito: 2 elementos com fundos
   diferentes (um branco, um roxo) — precisa de decisao, vai no Lote 2.     */
.cards-header .link,
.bar-link:not(.bar-button),
.categories-item,
.categories .link,
.categories-header .link,
.form-lost-password .link,
.privacy-policy .link{
  color:var(--ms-roxo) !important;
}
.cards-header .link:hover,
.bar-link:not(.bar-button):hover,
.categories-item:hover,
.categories .link:hover,
.categories-header .link:hover,
.form-lost-password .link:hover,
.privacy-policy .link:hover{
  color:var(--ms-preto) !important;
  text-decoration:underline !important;
}
/* fim R25 Lote 1 ================================================== */


/* ===================================================================
   R25 — LOTE 1.1 · DESEMPATE DE ESPECIFICIDADE — 30/08/2026
   Tres alvos do bloco acima perderam a cascata para regras de rodadas
   anteriores, todas com !important e especificidade maior:
     .header-navbar a.navbar-link[data-cy="Anunciar"]  (0,3,1)
     [data-bg="base"] .cards-header a                  (0,2,1)
     regra de rodape vinda do style.min.css do tema
   O seletor [id="x"] vale como ATRIBUTO (0,1,0), nao como ID — foi esse
   o erro. Aqui se usa o ID de verdade e classe repetida para subir a
   especificidade sem inventar ancestral que possa nao existir em outra
   pagina.
   NAO se mexe no "Anuncie aqui" da barra superior: ele e laranja sobre
   .header-bar #1B1B1B, contraste 5,81 — ja passa AA.
------------------------------------------------------------------- */
#navigation-item-8,
.header-navbar a.navbar-link.navbar-link[data-cy="Anunciar"],
.navbar-mobile a.navbar-link.navbar-link[data-cy="Anunciar"],
a.link-footer.link-footer.link-footer[href$="/anuncie"]{
  color:var(--ms-branco) !important;
}
#navigation-item-8:hover,
.header-navbar a.navbar-link.navbar-link[data-cy="Anunciar"]:hover,
.navbar-mobile a.navbar-link.navbar-link[data-cy="Anunciar"]:hover,
a.link-footer.link-footer.link-footer[href$="/anuncie"]:hover{
  background:var(--ms-laranja-escuro) !important;
  color:var(--ms-branco) !important;
}

.cards-header a.link.link.link{
  color:var(--ms-roxo) !important;
}
.cards-header a.link.link.link:hover{
  color:var(--ms-preto) !important;
  text-decoration:underline !important;
}
/* fim R25 Lote 1.1 =============================================== */


/* ===================================================================
   R25 — LOTE 1.2 · BOTAO INVISIVEL — 30/08/2026
   Achado durante a verificacao, nao estava no handoff:
   o "Veja mais" de "Empresas por regiao" usa .button.is-inverse
   (variante para fundo escuro) sobre o BODY branco:
     texto #FFFFFF e borda rgba(255,255,255,.75) sobre #FFFFFF = 1,00
   Botao de 103x71px renderizado e clicavel, e literalmente invisivel.
   Escopado a .categories-base para nao tocar nos .is-inverse que estao
   corretamente sobre fundo escuro em outras secoes.
------------------------------------------------------------------- */
.categories-base .button.button-bg.is-inverse{
  color:var(--ms-roxo) !important;
  border-color:var(--ms-roxo) !important;
  background:transparent !important;
}
.categories-base .button.button-bg.is-inverse:hover{
  background:var(--ms-roxo) !important;
  color:var(--ms-branco) !important;
  border-color:var(--ms-roxo) !important;
}
/* fim R25 Lote 1.2 =============================================== */


/* ===================================================================
   R25 — REVERSAO DE 30/08/2026 (decisao do Johnny)
   O texto dos botoes de preenchimento laranja voltou para BRANCO.
   Consequencia registrada, nao corrigida:
     branco  s/ #FD660E = 2,96  reprova AA (minimo 4,5 para texto normal)
     branco  s/ #E2540A = 3,81  reprova AA (hover)
   A alternativa que passava era tinta #1B1B1B = 5,81. Fica documentado
   aqui para nao ser reintroduzido por engano numa proxima rodada.
   O resto do Lote 1 permanece: links no roxo da marca (8,75), botao
   "Veja mais" visivel, @import na linha 1, e o outline de foco.
------------------------------------------------------------------- */


/* ===================================================================
   R25 — LOTE 1.3 · ESCONDER "0,0" ATE A PRIMEIRA AVALIACAO — 30/08/2026
   Decisao do Johnny. Medido: 509 de 509 anuncios exibiam
   "0,0 · cinco estrelas vazias · Seja o primeiro a fazer uma avaliacao".
   Em um guia que vende credibilidade, isso lia como acervo abandonado.

   O gancho e o .first-to-review-label, que o eDirectory so renderiza
   quando o anuncio tem ZERO avaliacoes. Assim que a primeira chegar,
   o span some, o :has() para de casar e o bloco volta sozinho — sem
   precisar mexer no CSS de novo.

   Cobre as duas versoes do cabecalho (desktop em .details-info e
   mobile em .detail-header-content-mobile), que usam a mesma classe.
   O botao "Avalie" fica: e ele que convida a primeira avaliacao.
------------------------------------------------------------------- */
.details-reviews:has(.first-to-review-label){
  display:none !important;
}
/* fim R25 Lote 1.3 =============================================== */


/* ===================================================================
   R25 — EDICAO 7 · TINTA COM ALPHA REDUZIDO -> #6B6577 SOLIDO
   30/08/2026 · contagem de elementos casados em producao:

     SPAN.count            137  (home 62 · /empresa 65 · /artigo 7 · custom 3)
     DIV.categories         48  (home 27 · /classificado 6 · /artigo 6 ·
                                 /empresa 3 · custom 6)
     TH.dow                  7  (/evento)
                          ----
                           192 elementos

   Antes: rgba(27,27,27,.5) sobre branco = 3,32 — reprova AA (min 4,5).
   Depois: #6B6577 (--ms-cinza-texto, da ficha MaxSell) = 5,60 sobre branco,
           5,20 sobre --ms-cinza-bg e 4,79 sobre --ms-fundo-lilas. Passa nos tres.

   ⚠️ CORRECAO DE ESCOPO: o levantamento falava em 161 elementos de
   "rgba(27,27,27,...)". Medido: os de alpha .75 dao 7,57 e JA PASSAM.
   So os de alpha <= .5 reprovam. Regra restrita a esses.

   ⚠️ OS 40 DIAS DO CALENDARIO FICAM DE FORA — decidido por clique real.
   td.day.disabled: class "day disabled", cursor:not-allowed, sem <a>,
   sem onclick, e o clique nao mudou URL nem DOM. Sao desabilitados de
   verdade, logo isentos de AA. Pintar de #6B6577 trocaria um defeito de
   contraste por um de affordance — pareceriam clicaveis sem ser.
   Falta neles o aria-disabled: vai para feature-requests.md, sem paliativo.
------------------------------------------------------------------- */
.paragraph.title .count,
.trending-item .count,
.card .content .categories,
th.dow{
  color:var(--ms-cinza-texto) !important;
}

/* ⚠️ ACHADO NOVO durante a verificacao do calendario:
   td.day.has-event — o UNICO dia clicavel do mes — estava em
   rgba(27,27,27,.25) = 1,71, o mesmo tom dos dias desabilitados.
   Clique real: nao tem <a>, mas marca .active/.selected — ou seja,
   e interativo. O dia que importa era o mais apagado da pagina. */
td.day.has-event{
  color:var(--ms-preto) !important;
  font-weight:600 !important;
}
/* fim R25 Edicao 7 =============================================== */




/* --- R25 · os 62 contadores da home NAO foram consertados — e por que ---
   Duas tentativas de desempate (Edicoes 7.1 e 7.2) foram aplicadas,
   verificadas e REMOVIDAS daqui por nao funcionarem. Registro do que a
   investigacao encontrou, para ninguem repetir a tentativa:

   O SPAN.count da home e disputado por pelo menos tres regras, em dois
   canais diferentes, todas com !important:

   a) csseditor.css, rodada anterior:
        .categories-base .categories-content > .categories-list
          .categories-item .title .count
        -> color: rgba(255,255,255,.7)     (tratamento de tile escuro)

   b) <style> do widget na propria home (Construtor de Pagina), bloco 5:
        ... .categories-item .info .title .count
        -> color: rgba(27,27,27,0.5)  = 3,32  REPROVA   <- e esta que vence

   c) <style> do mesmo widget, logo abaixo:
        [data-cy="Featured categories with icons listing"]
          .categories-list.categories-icon .info .count
        -> color: #6B6577             = 5,60  passa
        CASA no elemento (conferido com .matches()) e perde por
        especificidade para a (b).

   Ou seja: o conserto certo ja existe na regra (c), com exatamente o mesmo
   valor que a Edicao 7 escolheu por conta propria, e nunca chegou ao ar.
   Empilhar uma quarta regra de especificidade maior daqui e como se cria o
   problema da rodada 30. A correcao e APAGAR a regra (b) no <style> do
   widget — via Conteudo Personalizado, nao CSS global.
   Pendencia declarada. Os outros 130 elementos da Edicao 7 estao aplicados
   e verificados. */


/* ===================================================================
   R25 — EDICAO 5 · RECONTAGEM COM O FILTRO QUE FALTAVA — 30/08/2026
   Metodo do PROMPT: so conta elemento com a cor E texto proprio visivel.
   Varrido em home, /empresa, /empresa/fabricantes, /anuncie, /faq e
   detalhe de empresa.

     #000000 preto puro ....... 0 elementos reais  -> BLOCO DESCARTADO
     #007BFF azul Bootstrap ... 0 elementos reais  -> ja descartado no adendo
     #8A63F2 roxo claro ....... 11 elementos reais -> BLOCO APLICADO

   Os 11: 10 em .summary-categories .link na pagina de categoria
   ("Fabricantes", "Distribuidores"...) e 1 em .faq-page .contact-us .link
   ("Nao encontrou sua resposta").
   #8A63F2 sobre branco = 4,08 (reprova). #5510D3 = 8,75 (passa) e e o roxo
   da ficha MaxSell.

   O bloco do preto puro nao foi aplicado por DECISAO, nao por esquecimento:
   a contagem de 59 vinha do mesmo metodo defeituoso da contagem de 468.
------------------------------------------------------------------- */
.summary-categories .link,
.faq-page .contact-us .link{
  color:var(--ms-roxo) !important;
}
.summary-categories .link:hover,
.faq-page .contact-us .link:hover{
  color:var(--ms-preto) !important;
  text-decoration:underline !important;
}
/* fim R25 Edicao 5 =============================================== */


/* ===================================================================
   R25 — EDICAO 6 · DEGRAU H3 — 30/08/2026
   Aplicada so a parte com alvo medido em producao. As outras duas partes
   da edicao nao foram aplicadas, e as razoes estao aqui:

   ✅ DEGRAU H3 — alvos reais, e o defeito e mais grave do que "falta degrau":
      .heading.h-3.toggle-title em /perguntas-frequentes = 15,5px
      h3 sem classe em /artigo/<id>                      = 18,72px (default)
      O corpo do site e 16px. Ou seja: o H3 da FAQ e MENOR que o texto
      corrido. Nao e escala faltando, e hierarquia invertida.

   ❌ H1 MOBILE 30px — NAO aplicado. Medido em 375px: o <h1> real
      (.heading.h-1.heading-desktop) esta display:none, e o que aparece e
      um DIV.heading.h-1.heading-tablet a 34px, ja ajustado numa rodada
      anterior via @media (max-width:768px). Nao ha defeito medido a
      corrigir, e baixar para 30px sobrescreveria um valor calibrado.
      ⚠️ O achado real e outro e nao se resolve com CSS: **no mobile a home
      nao renderiza nenhum elemento <h1>** — o titulo visivel e um DIV.
      Vai para o Lote 4 (hierarquia), via tag no widget.

   ❌ .section-subtitle — NAO aplicado. Zero ocorrencias nas 22 paginas.
      Regra sem alvo nao entra no arquivo.
------------------------------------------------------------------- */
h3,
.heading.h-3{
  font-family:'Poppins', 'Inter', sans-serif;
  font-size:20px !important;
  font-weight:600 !important;
  line-height:1.3 !important;
  letter-spacing:-0.3px;
  color:var(--ms-preto);
}
/* fim R25 Edicao 6 =============================================== */


/* ===================================================================
   R25 — EDICAO 3 · ESCOPO REDUZIDO AOS NAO-BOTOES — 30/08/2026
   Decisao do Johnny: "nao consertar as 76 de branco sobre o laranja" +
   "aplicar a Edicao 3". As duas so ficam de pe ao mesmo tempo se a
   Edicao 3 parar nos elementos que NAO sao botao.

   Medido nas 22 paginas: 79 elementos com texto branco sobre #FD660E.
     59 sao botao  -> FICAM BRANCOS, decisao registrada de 30/08
                      (Anunciar do topo x22 e do rodape x22, Buscar x5,
                       Ver planos, Comece agora, Enviar cadastro, Enviar,
                       Como chegar x3, Falar com vendas, paginacao)
     20 nao sao botao, dos quais:
        15 sao publicos  -> RECEBEM A TINTA aqui
         5 sao da barra de admin ("Edite este item", A.admin-bar-link)
           -> FORA. So aparecem para quem esta logado no /sitemgr.
           Nao sao pagina publica; nao se estiliza chrome de admin.

   Os 15: .badge-review x10 (selo de avaliacao nos cartoes de categoria)
          .calendar-sm .month x4 (mes no bloco de data dos eventos)
          .ms-serp-tier x1 ("Ouro", selo de plano em /anuncie)

   branco  sobre #FD660E = 2,96  reprova
   #1B1B1B sobre #FD660E = 5,81  passa
------------------------------------------------------------------- */
.badge-review,
.calendar-sm .month,
.ms-serp-tier{
  color:var(--ms-preto) !important;
}
/* fim R25 Edicao 3 =============================================== */


/* ===================================================================
   R27 — L1 · /anuncie: FECHAR O OVERFLOW — 30/08/2026
   Unica das 22 paginas com scroll horizontal. Medido em 390 e 360:
   scrollWidth 423 nos dois. Duas causas, as duas achadas por bounding box:

   1) TABLE.ms-compare — 399px de largura intrinseca (table-layout:auto),
      comecando em x=24 -> right 423. 15 linhas x 4 colunas.
   2) .ms-sec-why — grids com coluna resolvida em 349,58px fixos, que nao
      cabem nos 342px uteis de 390 nem nos 312 de 360.

   ⚠️ A tabela NAO virou blocos empilhados, e a razao esta no diff:
   o padrao pede "cabecalho da linha repetido em cada bloco", e as celulas
   nao tem data-label. Injetar os rotulos por nth-child exigiria escrever
   "Prata / Ouro / Diamante" no CSS — e esses rotulos estao em disputa
   (ver achado comercial no diff v27). Saida conservadora: a tabela cabe
   no container, mantem cabecalho real e nao inventa rotulo.
------------------------------------------------------------------- */
@media (max-width:767px){
  .ms-sec-planos table.ms-compare{
    width:100% !important;
    table-layout:fixed !important;
    min-width:0 !important;
  }
  .ms-sec-planos table.ms-compare th,
  .ms-sec-planos table.ms-compare td{
    padding:8px 6px !important;
    font-size:13px !important;
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
  }
  .ms-sec-planos table.ms-compare th:first-child,
  .ms-sec-planos table.ms-compare td:first-child{
    width:37% !important;
    text-align:left !important;
  }

  .ms-sec-why .ms-why,
  .ms-sec-why .ms-why > div,
  .ms-sec-why .ms-why-stats{
    grid-template-columns:1fr !important;
    max-width:100% !important;
    min-width:0 !important;
  }
  .ms-sec-why .ms-why-stats > div{ min-width:0 !important; }
}
/* fim R27 L1 ===================================================== */

/* R27 L1.1 — restava 360px: .ms-banner-kit a 354px fixos na secao
   "Banners disponiveis". Medido depois do L1: scrollWidth caiu de 423
   para 390 em 390 (fecha) e para 378 em 360 (faltavam 18px). */
@media (max-width:767px){
  .ms-sec-banners .ms-banners-grid,
  .ms-sec-banners .ms-banner-item,
  .ms-sec-banners .ms-banner-kit{
    grid-template-columns:1fr !important;
    max-width:100% !important;
    min-width:0 !important;
  }
  .ms-sec-banners .ms-banner-box{ max-width:100% !important; min-width:0 !important; }
}

/* R27 L1.2 — a causa real dos 18px restantes em 360:
   .ms-banner-kit e display:flex com flex-wrap:nowrap, e os tres
   .ms-banner-box sao flex:0 0 auto -> 114x3 + 6x2 = 354 num pai de 312.
   Nao era largura do pai (o max-width do L1.1 ja o trouxe para 312),
   era o nowrap. */
@media (max-width:767px){
  .ms-sec-banners .ms-banner-kit{ flex-wrap:wrap !important; }
  .ms-sec-banners .ms-banner-box{ flex:1 1 auto !important; max-width:100% !important; }
}

/* R27 L1.3 (corrigido) — 404: botao "Buscar" estourava 2,4px em 360.
   Primeira tentativa usou form.content-form > button e NAO casou: no 404
   o <form> nao tem classe nenhuma. Medido de novo:
     form (sem classe, display:flex, wrap:nowrap) = 304px
     INPUT  flex:1 1 0%   = 216px
     BUTTON flex:0 1 auto = 111px   -> 327 num pai de 304, right 362,4

   Seletor contado em producao (B.7): section.custom-content > .container >
   form:not([class]) casa 1 elemento no 404 e ZERO em home, /contato,
   /anuncie e /blog. A busca da home, fechada nas R16-R23, nao e tocada.

   ⚠️ Desvio declarado de B.2: regra de uso unico em CSS global. O canal
   de customTag nao esta disponivel nesta sessao, e a linha de base do 404
   em 390/360 e criterio de aceite que nao pode ser perdido. Quatro linhas.

   Provavel origem dos 2px em relacao a coleta de mais cedo: a Edicao 1
   completou os pesos da Inter, e metrica de fonte muda largura intrinseca. */
@media (max-width:767px){
  section.custom-content > .container > form:not([class]){
    flex-wrap:wrap !important;
    gap:8px !important;
  }
  section.custom-content > .container > form:not([class]) > input{
    flex:1 1 100% !important;
    min-width:0 !important;
  }
  section.custom-content > .container > form:not([class]) > button{
    flex:1 1 auto !important;
    max-width:100% !important;
  }
}


/* ===================================================================
   R27 — L2 · PAGINA DE CATEGORIA — 30/08/2026
   Contagem em producao (B.2, >=2 paginas):
     .summary-card       10 / 10 / 10   em /empresa/fabricantes,
                                        /distribuidores, /provedores-de-internet
     .summary-actions a  110 / 112 / 92
     .item-pagination      6 /   6 /  8
     .summary-categories  10 / 10 / 10
   Nenhuma em /empresa (que nao lista empresas) nem em /busca.

   ⚠️ DUAS PREMISSAS DO DOCUMENTO CAIRAM NA MEDICAO:

   1) "Indice A-Z: 27 botoes" — NAO EXISTE. Zero elementos de indice
      alfabetico nas tres paginas de categoria. O detector achou 14 ancoras
      de um caractere, mas sao .summary-picture (317x25), nao indice.
      Item removido do lote.

   2) "border-left: 4px na cor do plano" — IMPOSSIVEL hoje. O unico valor
      de class dos 10 cartoes e "summary-card", sem nenhuma classe de tier.
      Nao ha no markup o que distinga Bronze de Diamante no cartao.
      Vai para feature-requests.md; nao se simula com CSS.

   Alvos de toque medidos em 375 (91 abaixo de 44px). Corrigidos aqui os
   que sao acao dentro do cartao; os de fora ficam declarados no diff:
     .summary-actions a          16x16 e 18x16  -> 44x44   (25 por pagina)
     .item-pagination            30x30          -> 44x44
   NAO tocados de proposito:
     .link-footer (13) — rodape esta congelado desde a R23
     .summary-categories .link (10, 63x16) — sao tags; 44px de altura em
       cada uma incharia o cartao. O documento pede gap 8px, nao 44px.
     SELECT.select2-hidden-accessible (1x1) — elemento de acessibilidade
       oculto do select2, nao e alvo real
     barra de admin (3) — chrome de /sitemgr, nao e superficie publica
------------------------------------------------------------------- */

/* --- alvos de toque --- */
.summary-actions a{
  min-width:44px !important;
  min-height:44px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.item-pagination{
  min-width:44px !important;
  min-height:44px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* --- cartao de resultado --- */
.summary-card .summary-content{
  padding:20px !important;
}
.summary-card .summary-title{
  font-size:18px !important;
  font-weight:600 !important;
  line-height:1.35 !important;
}
.summary-card .summary-info-content{
  font-size:14.5px !important;
  line-height:1.5 !important;
}
.summary-card .summary-categories{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
}
.summary-card{
  transition:transform .18s ease, box-shadow .18s ease;
}
.summary-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(27,27,27,0.10);
}
/* fim R27 L2 ===================================================== */


/* ===================================================================
   R28 — BLOCO A.3 · O BOTAO "AVALIE" VIRA ACAO PRIMARIA — 30/08/2026
   Estado medido antes: fundo #FFFFFF, texto #6B6577, borda 1px #E6E3EC,
   padding 9px 16px, 230x35. Passa AA (5,60) — o defeito e affordance,
   nao acessibilidade: carrega .is-primary e nao parece acao principal.

   B.3 — cascata percorrida no csseditor.css antes de escrever (nao e
   !important empilhado as cegas). Regras que disputam o elemento:
     char 19826  .details-actions a.button.is-primary:hover
                 -> background laranja-escuro
     char 33901  .details-actions a.button.is-primary
                 -> so border-radius e font-weight
     char 34150  .details-actions a.button.is-inverse
                 -> background #fff  (NAO casa: o elemento e .is-primary)
     mais acima  .button.is-primary
                 -> background var(--ms-laranja) !important   (0,2,0)
     e um :hover de rodada anterior que devolve o botao para branco
   Nenhuma delas explica sozinha o branco no estado normal, e o padding
   9px 16px nao bate com nenhuma. Por isso a regra abaixo e escrita no
   nivel .details-actions a.button.button-bg.is-primary (0,5,1) — mais
   especifica que todas as concorrentes achadas e por ultimo no arquivo.

   ⚠️ Par de cores: branco sobre #FD660E = 2,96, NAO conforme. Adotado
   por instrucao explicita ("mesmo par dos outros 59, por coerencia com
   a decisao de 30/08"). Fica registrado como nao conforme por decisao,
   igual aos outros 59 — nao como descuido.
------------------------------------------------------------------- */
.details-actions a.button.button-bg.is-primary{
  background:var(--ms-laranja) !important;
  border-color:var(--ms-laranja) !important;
  color:var(--ms-branco) !important;
  padding:10px 18px !important;
  border-radius:5px !important;
  min-height:44px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.details-actions a.button.button-bg.is-primary:hover{
  background:var(--ms-laranja-escuro) !important;
  border-color:var(--ms-laranja-escuro) !important;
  color:var(--ms-branco) !important;
}
/* fim R28 A.3 =================================================== */


/* ===================================================================
   R28 — BLOCO B — 30/08/2026
   Contagem em producao com filtro de visibilidade (B.8):
     .article-description   1 / 1   em /artigo/6a6d3fd43b8e9 e /artigo/6a6d3dc949338
                                    (16 artigos no sitemap)
     .faq-header            1       em /perguntas-frequentes
   Razoes calculadas: nenhuma cor nova; ver a divergencia do #9A93A8 no diff.
------------------------------------------------------------------- */

/* --- B.6 · coluna de leitura dos artigos ---
   Medido: paragrafo de 1.114px a 16px = ~139 caracteres por linha.
   O alvo confortavel e 60-75. .article-description estava com max-width:none. */
.article-description{
  max-width:74ch !important;
}
.article-description p,
.article-description li{
  line-height:1.6 !important;
}

/* --- B.4 · FAQ com um fundo so ---
   Medido: .faq-header = #F7F6FA (--ms-cinza-bg) e .faq-content = #FFFFFF.
   Decisao do documento: os dois para branco, com a separacao vindo da barra
   gradiente que ja existe. Conferido antes de aplicar: 3 barras de
   EXATAMENTE 56x4px em .heading.h-2::after, com
   linear-gradient(90deg, #FD660E, #5510D3). A separacao nao se perde.

   📌 Correcao de premissa: o cinza nao separa "Grupo 1" de "Grupo 2" de
   perguntas — separa o CABECALHO da pagina (que tem o campo de busca,
   "Como podemos ajudar?") do conteudo. A divergencia existe, mas entre
   cabecalho e corpo, nao entre dois grupos equivalentes. */
.faq-header{
  background:var(--ms-branco) !important;
}
/* fim R28 Bloco B ============================================== */

/* --- R28 Bloco B.1 · duas correcoes medidas depois de salvar ---

   1) FAQ: .faq-header continuou #F7F6FA. B.3 aplicada — a regra que ganha
      esta no proprio csseditor.css, de rodada anterior:
        .faq-page .faq-header[data-bg="neutral"]{ background:var(--ms-cinza-bg) !important }  (0,3,0)
      A minha era .faq-header (0,1,0). Espelhado o mesmo seletor, por ultimo.

   2) Artigos: o max-width:74ch no CONTAINER resolveu para 747px, porque
      "ch" e medido na fonte do proprio elemento e o container tem fonte
      maior que a do paragrafo. Resultado medido: 1.114px -> 747px, ainda
      ~93 caracteres por linha. Levado para os paragrafos, que sao 16px,
      onde 74ch vale o que deve valer. */
.faq-page .faq-header[data-bg="neutral"]{
  background:var(--ms-branco) !important;
}
.article-description{
  max-width:none !important;
}
.article-description p,
.article-description li,
.article-description blockquote{
  max-width:74ch !important;
}

/* --- R28 Bloco B.2 · a coluna de leitura: 74ch nao entrega 74 caracteres ---
   Medido de verdade (caracteres / linhas renderizadas, nao estimativa):
     a 747px (= 74ch) os paragrafos rendem 69, 84, 88 e 84 caracteres por
     linha — media ~81. O alvo confortavel e 60-75.
   Causa: 1ch = 10,09px aqui (largura do glifo "0" da Inter 16px), e o
   caractere medio de texto corrido e mais estreito que o "0". Ou seja,
   74ch entrega ~81 caracteres, nao 74.
   Ajustado para 64ch (~646px), que pela mesma medicao cai na faixa. */
.article-description p,
.article-description li,
.article-description blockquote{
  max-width:64ch !important;
}

/* --- R28 Bloco C.2 · container do logo do cartao (pre-autorizado) ---
   Medido antes: altura do cartao varia com o arquivo enviado.
     /distribuidores  277 a 406px  (logos de 24 e 48px)
     /fabricantes     337 a 359px  (logos de 24px)
   O container nao normaliza, entao quem define a altura do cartao e o
   upload do anunciante. Container de 48px (valor ja observado em
   producao, logo sabe-se que cabe) estabiliza — o efeito e o inverso do
   temido. Contado: .summary-picture 10 / 10 em fabricantes e
   distribuidores; .summary-picture img 10 / 10. */
.summary-picture{
  min-height:48px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.summary-picture img{
  max-height:48px !important;
  max-width:100% !important;
  height:auto !important;
  object-fit:contain !important;
}


/* =====================================================
   R31.1 - Superficie 2 (Fichas): secoes vazias somem
   Ofertas e Classificados renderizam cabecalho mesmo sem itens.
   Criterio: .cards-list sem nenhum filho elemento.
   ===================================================== */
.tab-item-content:has(.cards-list):not(:has(.cards-list > *)){ display:none !important; }
.tab-item-heading:has(+ .tab-item-content .cards-list):not(:has(+ .tab-item-content .cards-list > *)){ display:none !important; }


/* =====================================================
   R33 secao 3 - faixa escura de cabecalho de pagina
   Inserida por script no customTag de cada pagina (#ms-pagehead).
   ===================================================== */
#ms-pagehead{ background:#1B1B1B; }
#ms-pagehead .ms-pagehead-wrap{ max-width:1280px; margin:0 auto; padding:38px 28px 42px; }
#ms-pagehead .ms-bc{ font-size:13px; color:#CFC8DC; }
#ms-pagehead .ms-bc a{ color:#CFC8DC; text-decoration:none; }
#ms-pagehead .ms-bc a:hover{ text-decoration:underline; }
#ms-pagehead h1{ margin:12px 0 0; font-family:'Poppins',Inter,sans-serif; font-size:34px; line-height:1.1; font-weight:700; letter-spacing:-1px; color:#FFFFFF; }
#ms-pagehead p{ margin:12px 0 0; font-family:Inter,sans-serif; font-size:16px; line-height:1.55; color:#CFC8DC; max-width:64ch; }
@media (max-width:760px){ #ms-pagehead .ms-pagehead-wrap{ padding:28px 16px 30px; } #ms-pagehead h1{ font-size:27px; } }


/* =====================================================
   R33 3.2 - listagem e categoria (E1 a E4)
   ===================================================== */
/* E1/E3: cabecalho de pagina escuro, com o H1 nativo */
.results-header{ background:#1B1B1B; }
.results-header .container{ padding-top:14px; padding-bottom:18px; }
.results-header h1.results-title{ color:#FFFFFF; font-size:34px; line-height:1.1; font-weight:700; letter-spacing:-1px; }
/* E3: resumo dos resultados */
.results-content .paragraph.p-2{ font-size:14.5px; color:#4F4F4F; }
/* E2: lateral de filtros fixa e titulos em caixa alta */
.results-body .results-sidebar{ position:sticky; top:16px; align-self:flex-start; }
.results-body .sidebar-item .item-header{ font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#6B6577; }
/* E4: cartao horizontal de resultado */
.summary-card .summary-categories{ color:#5510D3; font-size:13px; font-weight:600; }
.summary-card .summary-info, .summary-card .summary-address{ font-size:14.5px; color:#4F4F4F; }
@media (max-width:900px){ .results-body .results-sidebar{ position:static; } }