/* ============================================================
   NossoGuia — ESTILOS POR PÁGINA
   Seções específicas de cada página. Componentes reutilizáveis
   ficam em components.css.
   ============================================================ */

/* ============================================================
   PÁGINA INICIAL
   ============================================================ */

/* ---------- Hero ----------
   Todo o hero da página inicial (painel, busca, cards flutuantes,
   indicadores e animações) vive em styles/hero.css — carregado
   apenas pelo index.html. */

/* Bairros populares */
.chips-bairros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}

.chip-bairro {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  background: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pilula);
  padding: var(--esp-2) var(--esp-4);
  text-decoration: none;
  color: var(--cor-tinta);
  font-weight: 600;
  font-size: var(--texto-sm);
  transition: border-color var(--transicao), box-shadow var(--transicao),
    transform var(--transicao);
}

.chip-bairro:hover {
  border-color: var(--cor-verde);
  box-shadow: var(--sombra-card);
  transform: translateY(-1px);
  color: var(--cor-verde-escuro);
}

.chip-bairro small {
  color: var(--cor-tinta-suave);
  font-weight: 400;
}

/* Mini-resumo dos planos na faixa de anunciantes */
.mini-planos {
  display: grid;
  gap: var(--esp-2);
  margin-top: var(--esp-4);
}

.mini-plano {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-3);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--raio-s);
  padding: var(--esp-2) var(--esp-3);
  color: #fff;
  text-decoration: none;
  font-size: var(--texto-sm);
}

.mini-plano:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.mini-plano strong {
  color: var(--cor-amarelo);
  white-space: nowrap;
}

/* ---------- Cabeçalho de seção ---------- */

.secao__cabecalho {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--esp-4);
  margin-bottom: var(--esp-5);
}

/* No celular o "Ver todas" ao lado roubava ~100px do título, e
   "O que a cidade oferece" quebrava em 2–3 linhas contra uma coluna
   de 230px. Empilhado, o título usa a largura toda e quebra em 1–2
   linhas naturais; o link vai para baixo, ainda acima da grade. */
@media (max-width: 639px) {
  .secao__cabecalho {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--esp-3);
  }
}

.secao__cabecalho p {
  margin-top: var(--esp-1);
}

/* ---------- Categorias em destaque ---------- */

.grade-categorias {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-3);
}

/* Coluna única em todo o mobile: em 2 colunas (≤639px) o rótulo mais
   longo ("Serviços profissionais") + a contagem estouram a caixa do
   card. As colunas voltam a partir do tablet, onde há largura de sobra. */

/* Mobile horizontal / phablet: 2 colunas cabem com folga */
@media (min-width: 640px) {
  .grade-categorias {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Tablet: a 3ª coluna só entra aqui — em 640px o rótulo mais longo
   ainda colidiria com a contagem num card de 3 colunas */
@media (min-width: 768px) {
  .grade-categorias {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grade-categorias {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.cartao-categoria {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  background: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-m);
  padding: var(--esp-3) var(--esp-4);
  text-decoration: none;
  color: var(--cor-tinta);
  font-weight: 600;
  font-size: var(--texto-sm);
  transition: box-shadow var(--transicao), transform var(--transicao),
    border-color var(--transicao);
}

.cartao-categoria:hover {
  box-shadow: var(--sombra-card);
  transform: translateY(-2px);
  border-color: var(--cor-verde);
  color: var(--cor-verde-escuro);
}

.cartao-categoria__icone {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: var(--raio-s);
  display: grid;
  place-items: center;
  /* cor da categoria via --cor-cat no style inline
     (fallback verde-claro para navegadores sem color-mix) */
  background: var(--cor-verde-claro);
  background: color-mix(in srgb, var(--cor-cat, var(--cor-verde)) 12%, white);
  color: var(--cor-cat, var(--cor-verde));
}

.cartao-categoria__icone svg {
  width: 24px;
  height: 24px;
}

.cartao-categoria__qtd {
  margin-left: auto;
  color: var(--cor-tinta-suave);
  font-weight: 400;
  font-size: var(--texto-xs);
  font-variant-numeric: tabular-nums;
}

/* ---------- Como funciona ---------- */

.passos {
  display: grid;
  gap: var(--esp-5);
  counter-reset: passo;
}

@media (min-width: 768px) {
  .passos {
    grid-template-columns: repeat(3, 1fr);
  }
}

.passo {
  background: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-m);
  padding: var(--esp-5);
  position: relative;
}

/* Numeração real de um processo em 3 etapas */
.passo::before {
  counter-increment: passo;
  content: counter(passo);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cor-verde);
  color: #fff;
  font-family: var(--fonte-titulo);
  font-size: var(--texto-md);
  font-weight: 700;
  margin-bottom: var(--esp-3);
}

.passo h3 {
  font-size: var(--texto-md);
  margin-bottom: var(--esp-2);
}

.passo p {
  color: var(--cor-tinta-suave);
  font-size: var(--texto-sm);
}

/* ---------- Faixa "anuncie aqui" ---------- */

.faixa-anunciante {
  background: var(--cor-verde);
  border-radius: var(--raio-g);
  color: #fff;
  padding: var(--esp-7) var(--esp-5);
  display: grid;
  gap: var(--esp-5);
}

@media (min-width: 1024px) {
  .faixa-anunciante {
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
  }
}

.faixa-anunciante h2 {
  color: #fff;
}

/* "Olho" sobre o verde: branco (7.7:1) em vez do amarelo (4.1:1) */
.faixa-anunciante .olho {
  color: #fff;
}

.faixa-anunciante p {
  color: #d3e5e0;
  margin-top: var(--esp-2);
}

.faixa-anunciante ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--esp-2);
}

.faixa-anunciante li {
  display: flex;
  gap: var(--esp-2);
  align-items: baseline;
}

.faixa-anunciante li::before {
  content: "✔";
  color: var(--cor-amarelo);
  font-weight: 700;
}

/* ============================================================
   BUSCA E RESULTADOS
   ============================================================ */

.layout-busca {
  display: grid;
  gap: var(--esp-5);
  align-items: start;
  padding-bottom: var(--esp-7);
}

@media (min-width: 1024px) {
  .layout-busca {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: var(--esp-6);
  }
  .layout-busca aside {
    position: sticky;
    top: calc(var(--altura-header) + var(--esp-4));
    /* sidebar maior que a tela rola por dentro, sem travar os últimos filtros */
    max-height: calc(100dvh - var(--altura-header) - var(--esp-5));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.filtros fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 var(--esp-4);
}

.filtros legend {
  font-weight: 600;
  font-size: var(--texto-sm);
  margin-bottom: var(--esp-1);
  padding: 0;
}

.filtros__preco-campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-2);
}

.filtros__preco-campos .campo {
  margin-bottom: var(--esp-1);
}

.resultados__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  margin-bottom: var(--esp-5);
}

.resultados__topo p {
  font-weight: 600;
}

/* Sugestões de busca (autocomplete) */
.sugestoes {
  position: absolute;
  top: calc(100% - var(--esp-4));
  left: 0;
  right: 0;
  background: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-s);
  box-shadow: var(--sombra-alta);
  z-index: 30;
  max-height: 280px;
  overflow: auto;
}

.sugestoes__grupo {
  padding: var(--esp-2) var(--esp-3) var(--esp-1);
  font-size: var(--texto-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-tinta-suave);
}

.sugestoes button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: var(--esp-2) var(--esp-3);
  font-size: var(--texto-sm);
  color: var(--cor-tinta);
}

.sugestoes button:hover,
.sugestoes button:focus {
  background: var(--cor-verde-claro);
}

/* Botões do painel de filtros no celular */
.filtros-toggle,
.filtros__fechar {
  display: none;
}

@media (max-width: 1023px) {
  .filtros-toggle {
    display: inline-flex;
  }

  /* Painel de filtros vira uma folha sobreposta */
  #painel-filtros {
    display: none;
  }

  body.filtros-abertos #painel-filtros {
    display: block;
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background: rgba(22, 48, 43, 0.45);
    overflow: auto;
    overscroll-behavior: contain;
    padding: var(--esp-4);
    padding-bottom: max(var(--esp-4), env(safe-area-inset-bottom));
  }

  body.filtros-abertos #painel-filtros .filtros {
    max-width: 420px;
    margin-inline: auto;
  }

  body.filtros-abertos {
    overflow: hidden; /* trava o fundo enquanto o painel está aberto */
  }

  .filtros__fechar {
    display: inline-flex;
  }
}

/* Na busca, com a coluna de filtros ao lado, menos colunas bastam
   (esta regra também impede as 4 colunas de 1920px do .grade-fichas) */
@media (min-width: 1024px) {
  .grade-fichas--busca {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .grade-fichas--busca {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ============================================================
   DETALHES DO ANÚNCIO
   ============================================================ */

.layout-anuncio {
  display: grid;
  gap: var(--esp-5);
  align-items: start;
  padding-bottom: var(--esp-6);
}

@media (min-width: 1024px) {
  .layout-anuncio {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: var(--esp-6);
  }
  .layout-anuncio .contato-card {
    position: sticky;
    top: calc(var(--altura-header) + var(--esp-4));
    max-height: calc(100dvh - var(--altura-header) - var(--esp-5));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Galeria */
.galeria__principal {
  border-radius: var(--raio-m);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--cor-verde-claro);
}

.galeria__principal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.galeria__miniaturas {
  display: flex;
  gap: var(--esp-2);
  margin-top: var(--esp-2);
  flex-wrap: wrap;
}

.galeria__miniaturas button {
  border: 2px solid transparent;
  border-radius: var(--raio-s);
  padding: 0;
  overflow: hidden;
  width: 88px;
  aspect-ratio: 16 / 10;
  background: none;
}

.galeria__miniaturas button[aria-current="true"] {
  border-color: var(--cor-verde);
}

.galeria__miniaturas img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Cabeçalho do anúncio */
.anuncio__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin: var(--esp-4) 0 var(--esp-2);
}

.anuncio__preco {
  font-family: var(--fonte-titulo);
  /* Fluido, um degrau abaixo do h1. Era fixo em 28px, e como o h1
     encolhe com a tela (clamp), no celular o preço ficava MAIOR que
     o título do anúncio — hierarquia invertida. Agora acompanha a
     mesma curva do h2 e nunca ultrapassa o título. */
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, var(--texto-xl));
  color: var(--cor-verde-escuro);
  margin-block: var(--esp-3);
}

/* "Consulte o anunciante" não é um preço: é a ausência dele. Com o
   mesmo corpo de um valor, a frase competia com o título sem
   informar nada. Recuada para texto de apoio. */
.anuncio__preco--consultar {
  font-family: var(--fonte-texto);
  font-size: var(--texto-md);
  font-weight: var(--font-weight-medium);
  color: var(--cor-tinta-suave);
}

.anuncio__descricao {
  white-space: pre-line;
  margin-block: var(--esp-4);
}

/* ---------- CTA fixo do anúncio (só celular) ----------
   No desktop o cartão de contato fica na coluna lateral, sempre à
   vista. No celular ele vai para o fim da página, depois da imagem,
   dos chips, do título, do preço e da descrição — quem quer falar
   com o anunciante precisa rolar tudo. Esta barra traz o WhatsApp
   de volta para o alcance do polegar. */
.cta-anuncio {
  display: none;
}

@media (max-width: 767px) {
  .cta-anuncio {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    /* Encostada no topo da navegação: faixa sólida, sem fresta por
       onde o conteúdo apareça deslizando. */
    bottom: calc(var(--altura-barra-mobile) + env(safe-area-inset-bottom, 0px));
    /* ABAIXO da navegação (45 < 50). O botão central "Anunciar" é
       elevado — sobe ~9px acima da barra, via margin-top -18px no
       svg — e invade esta faixa. Com z-index maior, a faixa pintava
       por cima e cortava o círculo ao meio; por baixo, o círculo
       passa inteiro e a borda branca dele resolve o encontro. */
    z-index: var(--z-cta-anuncio);
    background: var(--cor-branco);
    border-top: 1px solid var(--cor-borda);
    box-shadow: 0 -2px 12px rgba(22, 48, 43, 0.08);
    /* Recuo igual em cima e embaixo. O extra que havia aqui era para
       afastar o botão do círculo do "Anunciar", mas com a faixa
       passando POR BAIXO dele o círculo já se resolve sozinho — o
       botão só precisa não ficar coberto, e não fica. */
    padding: var(--esp-3) var(--esp-4);
    /* --transicao já traz a curva ("160ms ease") */
    transition: transform var(--transicao), opacity var(--transicao);
  }

  .cta-anuncio .botao {
    width: 100%;
  }

  /* Escondida enquanto o cartão de contato real está na tela: dois
     botões idênticos ao mesmo tempo parecem defeito. Desce em vez de
     sumir seco. */
  .cta-anuncio--oculta {
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none;
  }

  /* O conteúdo precisa caber acima das DUAS barras. */
  body.com-cta-anuncio {
    padding-bottom: calc(
      var(--altura-barra-mobile) + var(--altura-cta-anuncio) +
        env(safe-area-inset-bottom, 0px)
    );
  }

  /* A pílula de comparação já subia acima da barra inferior; com o
     CTA presente ela sobe mais um andar. */
  body.com-cta-anuncio .barra-comparacao {
    bottom: calc(
      var(--altura-barra-mobile) + var(--altura-cta-anuncio) + var(--esp-3) +
        env(safe-area-inset-bottom, 0px)
    );
  }
}

/* Sem animação para quem pediu menos movimento */
@media (prefers-reduced-motion: reduce) {
  .cta-anuncio {
    transition: none;
  }
}

/* Lista de informações (horário, publicação etc.) */
.anuncio__info {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--esp-2);
  margin-block: var(--esp-4);
  font-size: var(--texto-sm);
}

.anuncio__info li {
  display: flex;
  gap: var(--esp-2);
}

.anuncio__info li {
  flex-wrap: wrap; /* em 320px o valor desce para a linha de baixo */
}

.anuncio__info dt,
.anuncio__info .rotulo {
  font-weight: 600;
  min-width: 160px;
}

/* Lista de características (✔) */
.lista-check {
  list-style: none;
  padding: 0;
  margin-top: var(--esp-3);
  display: grid;
  gap: var(--esp-2);
}

@media (min-width: 640px) {
  .lista-check {
    grid-template-columns: 1fr 1fr;
  }
}

.lista-check li {
  display: flex;
  gap: var(--esp-2);
  align-items: baseline;
  font-size: var(--texto-sm);
}

.lista-check li::before {
  content: "✔";
  color: var(--cor-verde);
  font-weight: 700;
}

/* Mapa ilustrativo da região */
.mapa-simulado {
  border-radius: var(--raio-m);
  overflow: hidden;
  border: 1px solid var(--cor-borda);
  margin-top: var(--esp-5);
  aspect-ratio: 5 / 2;
}

.mapa-simulado svg {
  width: 100%;
  height: 100%;
}

/* Cartão de contato */
.contato-card h2 {
  font-size: var(--texto-md);
}

/* No cartão estreito, o rótulo da lista de informações é menor */
.contato-card .anuncio__info .rotulo {
  min-width: 96px;
}

.contato-card .botao {
  width: 100%;
  margin-top: var(--esp-2);
}

.contato-card__anunciante {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin-block: var(--esp-3);
}

/* (avatar movido para components.css — componente reutilizável) */

.contato-card__telefone {
  font-size: var(--texto-md);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Botão WhatsApp */
.botao--whatsapp {
  background: #1f7a53;
  color: #fff;
}

.botao--whatsapp:hover {
  background: #175e40;
  color: #fff;
}

/* Linha de ações secundárias (favoritar, compartilhar, denunciar) */
.anuncio__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-top: var(--esp-3);
}

.anuncio__acoes .botao {
  width: auto;
  flex: 1;
  margin-top: 0;
}

/* ============================================================
   AUTENTICAÇÃO (login, cadastro, recuperar senha)
   ============================================================ */

.auth-wrap {
  max-width: 480px;
  margin-inline: auto;
  padding-block: var(--esp-6) var(--esp-8);
}

.auth-wrap h1 {
  text-align: center;
  margin-bottom: var(--esp-2);
}

.auth-wrap > p {
  text-align: center;
  color: var(--cor-tinta-suave);
  margin-bottom: var(--esp-5);
}

.auth-links {
  text-align: center;
  margin-top: var(--esp-4);
  font-size: var(--texto-sm);
  display: grid;
  gap: var(--esp-2);
}

/* ---------- Acesso unificado (login/cadastro sem senha) ---------- */

.acesso-etapa {
  display: grid;
  gap: var(--esp-3);
}

.acesso-etapa__titulo {
  font-size: var(--texto-lg);
  text-align: center;
  outline: none; /* recebe foco programático ao trocar de etapa */
}

/* Botões de provedor: 48px de altura, ícone + texto sempre */
.botao-social {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  width: 100%;
  min-height: 48px;
  padding: var(--esp-2) var(--esp-4);
  border: 1.5px solid var(--cor-borda-campo);
  border-radius: var(--raio-m);
  background: var(--cor-branco);
  color: var(--cor-tinta);
  font-weight: var(--font-weight-semibold);
  font-size: var(--texto-base);
  cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao);
}

.botao-social:hover {
  border-color: var(--cor-verde);
  background: var(--cor-verde-claro);
}

.botao-social:focus-visible {
  outline: 3px solid var(--cor-verde);
  outline-offset: 1px;
}

.botao-social svg {
  width: 22px;
  height: 22px;
  flex: none;
}

.botao-social span {
  flex: 1;
  text-align: left;
}

.botao-social--apple {
  background: var(--cor-tinta);
  color: #fff;
  border-color: var(--cor-tinta);
}

.botao-social--apple:hover {
  background: #000;
  color: #fff;
}

/* Selo "em breve" dos provedores ainda não configurados */
.botao-social__breve {
  font-style: normal;
  font-size: var(--texto-xs);
  font-weight: var(--font-weight-medium);
  color: var(--cor-tinta-suave);
  background: var(--cor-fundo);
  border-radius: var(--raio-pilula);
  padding: 2px 10px;
  flex: none;
}

.botao-social--apple .botao-social__breve {
  background: rgba(255, 255, 255, 0.16);
  color: #ddd;
}

.separador-ou {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  color: var(--cor-tinta-suave);
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.separador-ou::before,
.separador-ou::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--cor-borda);
}

/* Campo do código: grande, espaçado, fácil de conferir */
.acesso-codigo {
  text-align: center;
  font-size: var(--texto-xl) !important;
  letter-spacing: 0.45em;
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-semibold);
}

.acesso-codigo__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--esp-2);
}

/* Links-botão discretos (voltar, reenviar) */
.acesso-voltar {
  border: 0;
  background: none;
  color: var(--cor-verde-escuro);
  font-size: var(--texto-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  cursor: pointer;
  padding: var(--esp-2);
  min-height: 44px; /* alvo de toque */
}

.acesso-voltar:disabled {
  color: var(--cor-tinta-suave);
  text-decoration: none;
  cursor: default;
}

/* Mensagens de estado (aria-live) */
.acesso-msg {
  min-height: 1.4em;
  margin: 0;
  font-size: var(--texto-sm);
  text-align: center;
}

.acesso-msg[data-tipo="erro"] {
  color: var(--cor-erro);
}

.acesso-msg[data-tipo="sucesso"] {
  color: var(--cor-verde-escuro);
}

.acesso-msg[data-tipo="info"] {
  color: var(--cor-tinta-suave);
}

/* Bloco recolhido das contas de demonstração */
.acesso-demo {
  border-top: 1px dashed var(--cor-borda);
  padding-top: var(--esp-3);
  margin-top: var(--esp-2);
}

.acesso-demo summary {
  cursor: pointer;
  font-size: var(--texto-sm);
  color: var(--cor-tinta-suave);
  font-weight: var(--font-weight-medium);
  padding: var(--esp-2);
  min-height: 44px;
  display: flex;
  align-items: center;
}

.acesso-demo summary:focus-visible {
  outline: 3px solid var(--cor-verde);
  outline-offset: 1px;
  border-radius: var(--raio-s);
}

.acesso-demo form {
  margin-top: var(--esp-3);
  display: grid;
  gap: var(--esp-3);
}

/* Escolha do tipo de conta (cliente × anunciante) */
.tipo-conta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-3);
  margin-bottom: var(--esp-4);
}

.tipo-conta input {
  position: absolute;
  opacity: 0;
}

.tipo-conta label {
  border: 2px solid var(--cor-borda);
  border-radius: var(--raio-m);
  padding: var(--esp-3);
  cursor: pointer;
  text-align: center;
  font-size: var(--texto-sm);
  transition: border-color var(--transicao), background var(--transicao);
}

.tipo-conta label strong {
  display: block;
  font-size: var(--texto-base);
  margin-bottom: 2px;
}

.tipo-conta input:checked + label {
  border-color: var(--cor-verde);
  background: var(--cor-verde-claro);
}

.tipo-conta input:focus-visible + label {
  outline: 3px solid var(--cor-verde);
  outline-offset: 2px;
}

/* ============================================================
   PAINEL DO ANUNCIANTE E ÁREA ADMINISTRATIVA
   ============================================================ */

.painel-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  margin-bottom: var(--esp-5);
}

/* Cartões de resumo (estatísticas) */
.grade-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--esp-3);
  margin-bottom: var(--esp-6);
}

@media (min-width: 768px) {
  .grade-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .grade-stats {
    grid-template-columns: repeat(6, 1fr);
  }
}

.stat {
  background: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-m);
  padding: var(--esp-4);
}

.stat strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: var(--texto-xl);
  color: var(--cor-verde-escuro);
  line-height: 1.1;
}

.stat span {
  font-size: var(--texto-xs);
  color: var(--cor-tinta-suave);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Abas */
.abas {
  display: flex;
  gap: var(--esp-1);
  border-bottom: 2px solid var(--cor-borda);
  margin-bottom: var(--esp-5);
  overflow-x: auto;
}

.abas button {
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: var(--esp-3) var(--esp-4);
  font-weight: 600;
  color: var(--cor-tinta-suave);
  white-space: nowrap;
  flex-shrink: 0; /* rola na horizontal; nunca sobrepõe os rótulos */
}

.abas button[aria-selected="true"] {
  color: var(--cor-verde-escuro);
  border-bottom-color: var(--cor-verde);
}

.abas button:hover {
  color: var(--cor-verde);
}

/* Linha de anúncio no painel/admin */
.linha-anuncio {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--esp-3);
  background: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-m);
  padding: var(--esp-3);
  margin-bottom: var(--esp-3);
  align-items: center;
}

@media (min-width: 768px) {
  .linha-anuncio {
    grid-template-columns: 88px minmax(0, 1fr) auto;
  }
}

.linha-anuncio__img {
  width: 88px;
  aspect-ratio: 16 / 10;
  border-radius: var(--raio-s);
  overflow: hidden;
  background: var(--cor-verde-claro);
}

.linha-anuncio__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.linha-anuncio__meta {
  font-size: var(--texto-xs);
  color: var(--cor-tinta-suave);
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1) var(--esp-3);
  margin-top: var(--esp-1);
}

.linha-anuncio__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .linha-anuncio__acoes {
    grid-column: auto;
    justify-content: flex-end;
  }
}

.linha-anuncio__acoes .botao {
  padding: var(--esp-1) var(--esp-3);
  font-size: var(--texto-xs);
}

/* ============================================================
   FORMULÁRIO DE ANÚNCIO (criar/editar)
   ============================================================ */

.form-anuncio {
  max-width: 760px;
}

.form-anuncio .cartao {
  margin-bottom: var(--esp-5);
}

.form-anuncio h2 {
  font-size: var(--texto-md);
  margin-bottom: var(--esp-4);
}

.form-grade-2 {
  display: grid;
  gap: 0 var(--esp-4);
}

@media (min-width: 640px) {
  .form-grade-2 {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Convite para anunciar (enquanto o wizard é fechado) ---------- */

.convite-passos {
  margin: 0;
  padding-left: 1.35em;
  display: grid;
  gap: var(--esp-3);
  color: var(--cor-tinta-suave);
  font-size: var(--texto-sm);
  line-height: 1.55;
}

.convite-passos strong {
  color: var(--cor-tinta);
  font-weight: var(--font-weight-semibold);
}

.convite-passos::marker,
.convite-passos li::marker {
  color: var(--cor-verde);
  font-weight: var(--font-weight-bold);
}

/* ---------- Upload de imagens (passo 5 do wizard) ---------- */

.upload-area {
  border: 2px dashed var(--cor-borda);
  border-radius: var(--raio-m);
  padding: var(--esp-5);
  text-align: center;
  color: var(--cor-tinta-suave);
  font-size: var(--texto-sm);
  display: grid;
  justify-items: center;
  gap: var(--esp-2);
  transition: border-color var(--transicao), background var(--transicao);
}

/* Arquivo sendo arrastado por cima */
.upload-area--sobre {
  border-color: var(--cor-verde);
  background: var(--cor-verde-claro);
}

.upload-area__icone {
  width: 40px;
  height: 40px;
  color: var(--cor-verde);
}

.upload-area strong {
  color: var(--cor-tinta);
  font-size: var(--texto-base);
}

.upload-area__ou {
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Alvo de toque: o botão padrão fica em 40px, abaixo do mínimo de
   44px — e este é o botão principal do passo no celular. */
.upload-area .botao {
  min-height: 44px;
}

.upload-area__regras {
  margin: 0;
  font-size: var(--texto-xs);
}

/* O input real fica invisível mas presente (acessibilidade);
   quem abre o seletor é o botão "Selecionar imagens". */
.upload-area input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.upload-contador {
  margin-top: var(--esp-3);
  font-size: var(--texto-sm);
  color: var(--cor-tinta-suave);
  min-height: 1.4em;
}

/* Barra de progresso geral da fila */
.upload-progresso {
  height: 6px;
  border-radius: var(--raio-pilula);
  background: var(--cor-borda);
  overflow: hidden;
  margin-block: var(--esp-2);
}

.upload-progresso__barra {
  height: 100%;
  width: 0;
  background: var(--cor-verde);
  border-radius: inherit;
  transition: width 300ms ease;
}

/* Lista de imagens: uma linha por arquivo */
.upload-lista {
  list-style: none;
  padding: 0;
  margin: var(--esp-3) 0 0;
  display: grid;
  gap: var(--esp-2);
}

.upload-item {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-m);
  padding: var(--esp-2) var(--esp-3);
  background: var(--cor-branco);
}

.upload-item[data-estado="erro"] {
  border-color: var(--cor-erro);
}

.upload-item[data-capa="true"] {
  border-color: var(--cor-amarelo);
  box-shadow: 0 0 0 1px var(--cor-amarelo);
}

.upload-item[draggable="true"] {
  cursor: grab;
}

.upload-item__mini {
  position: relative;
  flex: none;
  width: 96px;
  aspect-ratio: 16 / 10;
  border-radius: var(--raio-s);
  overflow: hidden;
  background: var(--cor-fundo);
  display: grid;
  place-items: center;
}

.upload-item__mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-item__selo-capa {
  position: absolute;
  left: 4px;
  bottom: 4px;
  background: var(--cor-amarelo);
  color: var(--cor-tinta);
  font-size: var(--texto-xs);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--raio-pilula);
  padding: 0 8px;
}

/* Spinner de processamento (para com prefers-reduced-motion,
   regra global do base.css) */
.upload-item__giro {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid var(--cor-borda);
  border-top-color: var(--cor-verde);
  animation: upload-giro 800ms linear infinite;
}

@keyframes upload-giro {
  to {
    transform: rotate(1turn);
  }
}

.upload-item__x {
  font-size: var(--texto-lg);
  font-weight: var(--font-weight-bold);
  color: var(--cor-erro);
}

.upload-item__info {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 2px;
}

.upload-item__nome {
  font-size: var(--texto-sm);
  font-weight: var(--font-weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-item__estado {
  font-size: var(--texto-xs);
  color: var(--cor-tinta-suave);
}

.upload-item__erro {
  font-size: var(--texto-xs);
  color: var(--cor-erro);
}

.upload-item__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1);
  justify-content: flex-end;
}

.upload-item__acoes .botao {
  font-size: var(--texto-xs);
  padding: 4px 10px;
  min-height: 44px; /* alvo de toque */
}

/* Celular: prévia em cima, ações embaixo em largura total.
   As setas ◀ ▶ ficam com largura fixa de alvo de toque e o espaço que
   sobra vai para os dois botões com texto — dividir os quatro por igual
   dava ~50px cada e esmagava o rótulo em quatro linhas. */
@media (max-width: 639px) {
  .upload-item {
    flex-wrap: wrap;
  }
  .upload-item__info {
    flex: 1 1 40%;
  }
  .upload-item__acoes {
    width: 100%;
    justify-content: stretch;
  }
  .upload-item__acoes .botao {
    flex: 1;
    white-space: nowrap;
  }
  .upload-item__acoes [data-mover-btn] {
    flex: 0 0 44px;
  }
}

/* Pré-visualização do card */
.preview-anuncio {
  max-width: 380px;
}

/* ---------- Wizard de criação (6 passos) ---------- */

.wizard-progresso {
  list-style: none;
  padding: 0;
  display: flex;
  gap: var(--esp-1);
  margin-bottom: var(--esp-5);
  overflow-x: auto;
  counter-reset: none;
}

.wizard-progresso li {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--texto-xs);
  font-weight: 600;
  color: var(--cor-tinta-suave);
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--raio-pilula);
  white-space: nowrap;
  flex-shrink: 0; /* a lista rola; os passos não se sobrepõem */
}

.wizard-progresso li span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cor-borda);
  color: var(--cor-tinta);
  font-family: var(--fonte-titulo);
  flex: none;
}

.wizard-progresso li.atual {
  background: var(--cor-verde-claro);
  color: var(--cor-verde-escuro);
}

.wizard-progresso li.atual span {
  background: var(--cor-verde);
  color: #fff;
}

.wizard-progresso li.feito span {
  background: var(--cor-amarelo);
}

.wizard-progresso li.feito span::before {
  content: "✓";
}

.wizard-progresso li.feito span {
  font-size: 0; /* esconde o número; mostra só o ✓ */
}

.wizard-progresso li.feito span::before {
  font-size: var(--texto-sm);
}

.wizard-nav {
  display: flex;
  flex-wrap: wrap; /* em 320px os botões empilham sem estourar */
  align-items: center;
  gap: var(--esp-3);
  margin-top: var(--esp-4);
}

/* ============================================================
   PLANOS
   ============================================================ */

.grade-planos {
  display: grid;
  gap: var(--esp-5);
  align-items: stretch;
  margin-block: var(--esp-6);
}

@media (min-width: 768px) {
  .grade-planos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 4 planos lado a lado só quando cada cartão fica com ≥260px */
@media (min-width: 1280px) {
  .grade-planos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Alternância mensal/anual */
.periodo-toggle {
  display: inline-flex;
  background: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pilula);
  padding: 4px;
  margin-top: var(--esp-5);
  gap: 4px;
}

.periodo-toggle input {
  position: absolute;
  opacity: 0;
}

.periodo-toggle label {
  padding: var(--esp-2) var(--esp-5);
  border-radius: var(--raio-pilula);
  font-weight: 700;
  font-size: var(--texto-sm);
  cursor: pointer;
}

/* Mobile pequeno: rótulos mais curtos para o toggle caber inteiro */
@media (max-width: 479px) {
  .periodo-toggle {
    flex-wrap: wrap;
    justify-content: center;
  }
  .periodo-toggle label {
    padding: var(--esp-2) var(--esp-3);
  }
}

.periodo-toggle label small {
  color: var(--cor-verde);
  font-weight: 600;
}

.periodo-toggle input:checked + label {
  background: var(--cor-verde);
  color: #fff;
}

.periodo-toggle input:checked + label small {
  color: var(--cor-amarelo);
}

.periodo-toggle input:focus-visible + label {
  outline: 3px solid var(--cor-verde);
  outline-offset: 2px;
}

/* FAQ */
.faq {
  background: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-m);
  margin-bottom: var(--esp-3);
  padding: 0;
}

.faq summary {
  padding: var(--esp-4);
  font-weight: 700;
  cursor: pointer;
  border-radius: var(--raio-m);
}

.faq summary:hover {
  background: var(--cor-verde-claro);
}

.faq[open] summary {
  border-bottom: 1px solid var(--cor-borda);
}

.faq p {
  padding: var(--esp-4);
  color: var(--cor-tinta-suave);
}

.plano {
  background: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-g);
  padding: var(--esp-6) var(--esp-5);
  display: flex;
  flex-direction: column;
  position: relative;
}

.plano--recomendado {
  border: 2px solid var(--cor-verde);
  box-shadow: var(--sombra-alta);
}

.plano__selo {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cor-verde);
  color: #fff;
  font-size: var(--texto-xs);
  font-weight: 700;
  padding: 4px 16px;
  border-radius: var(--raio-pilula);
  white-space: nowrap;
}

.plano h2 {
  font-size: var(--texto-lg);
}

.plano__preco {
  font-family: var(--fonte-titulo);
  /* 28px, e não 36px: no anual o cartão mostra "R$ 1.199,00/ano" numa
     coluna de 201px (a mais estreita, com os 4 planos lado a lado a
     partir de 1280px). A 36px isso mede 228px e transbordava; a 28px
     mede 185px e sobra folga para preços maiores. */
  font-size: var(--texto-xl);
  color: var(--cor-verde-escuro);
  margin-block: var(--esp-3);
  /* Anula o break-word herdado de `p`: o que não coubesse era partido
     no meio da palavra ("R$ 299,00/a" + "no"). Preço e sufixo agora
     são blocos indivisíveis. */
  overflow-wrap: normal;
}

.plano__preco strong,
.plano__preco span {
  white-space: nowrap;
}

.plano__preco span {
  font-size: var(--texto-sm);
  color: var(--cor-tinta-suave);
  font-family: var(--fonte-texto);
}

/* "equivale a R$ 99,92/mês" — linha de apoio do plano anual. Sem regra
   própria, o <small> herdava a fonte do preço e saía com 30px, do
   tamanho do próprio valor que ele deveria apenas explicar. */
.plano__preco small {
  display: block;
  margin-top: var(--esp-1);
  font-family: var(--fonte-texto);
  font-size: var(--texto-sm);
  font-weight: 400;
  color: var(--cor-tinta-suave);
}

.plano ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--esp-2);
  margin-bottom: var(--esp-5);
  font-size: var(--texto-sm);
}

.plano li {
  display: flex;
  gap: var(--esp-2);
}

.plano li::before {
  content: "✔";
  color: var(--cor-verde);
  font-weight: 700;
}

.plano .botao {
  margin-top: auto;
}

/* ---------- Escolha de quantos anúncios (Essencial) ----------
   Três botões lado a lado; o marcado com `chamariz` leva o selo.
   Cada opção tem 56px+ de altura: alvo de toque folgado no celular. */
.plano__qtd {
  border: 0;
  padding: 0;
  margin: 0 0 var(--esp-3);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--esp-2);
}

.plano__qtd legend {
  font-size: var(--texto-sm);
  font-weight: 600;
  margin-bottom: var(--esp-3);
}

.plano__opcao {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  min-height: 56px;
  padding: var(--esp-3) var(--esp-1) var(--esp-2);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-m);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--transicao), background var(--transicao);
}

.plano__opcao input {
  position: absolute;
  opacity: 0;
}

.plano__opcao:hover {
  border-color: var(--cor-verde);
}

.plano__opcao--escolhida {
  border: 2px solid var(--cor-verde);
  background: var(--cor-verde-claro);
}

.plano__opcao:has(input:focus-visible) {
  outline: 3px solid var(--cor-verde);
  outline-offset: 2px;
}

.plano__opcao-qtd {
  font-family: var(--fonte-titulo);
  font-size: var(--texto-lg);
  font-weight: 700;
  line-height: 1;
  color: var(--cor-verde-escuro);
}

.plano__opcao-preco {
  font-size: var(--texto-xs);
  font-weight: 600;
  line-height: 1.3;
  color: var(--cor-tinta);
}

.plano__opcao-preco small {
  display: block;
  font-weight: 400;
  color: var(--cor-tinta-suave);
}

/* Selo sobre a borda, como o "Mais escolhido" do cartão */
.plano__opcao-selo {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cor-amarelo);
  color: var(--cor-tinta);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: var(--raio-pilula);
  white-space: nowrap;
}

.plano__empurrao {
  font-size: var(--texto-sm);
  color: var(--cor-tinta-suave);
  margin-bottom: var(--esp-4);
}

.plano__empurrao strong {
  color: var(--cor-verde-escuro);
}

/* ============================================================
   PERFIL PÚBLICO DO ANUNCIANTE
   ============================================================ */

.perfil-topo {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  margin-bottom: var(--esp-6);
}

/* (tamanho grande do avatar: use a classe .avatar--grande) */