/* ============================================================
   Itapê Serviços — 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);
}

/* 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;
  }
}

/* Upload simulado de imagens */
.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);
}

.upload-area input[type="file"] {
  display: none;
}

.upload-previews {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  margin-top: var(--esp-3);
}

.upload-previews figure {
  margin: 0;
  width: 132px;
}

.upload-previews .mini {
  width: 132px;
  aspect-ratio: 16 / 10;
  border-radius: var(--raio-s);
  overflow: hidden;
  border: 2px solid var(--cor-borda);
  position: relative;
}

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

.upload-previews figure[data-capa="true"] .mini {
  border-color: var(--cor-amarelo);
}

.upload-previews figcaption {
  display: flex;
  gap: var(--esp-1);
  margin-top: var(--esp-1);
}

.upload-previews figcaption button {
  font-size: var(--texto-xs);
  padding: 2px 8px;
  flex: 1;
}

/* 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;
}

/* ============================================================
   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) */