/* =========================================================================
   O Melhor de Aracaju — componentes e páginas
   Tokens, reset e controles ficam em base.css, que carrega antes deste.
   ========================================================================= */

/* --- Ícones ------------------------------------------------------------- */

.icone {
  width: 1em; height: 1em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
}
.icone--cheio { fill: currentColor; stroke: none; }

/* --- Avatar ------------------------------------------------------------- */

.avatar {
  position: relative;
  flex: 0 0 auto;
  border-radius: 50%;
}

.avatar--lista  { width: 80px;  height: 80px; }
.avatar--perfil { width: 140px; height: 140px; }

.avatar__foto,
.avatar__inicial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, .08);
  object-fit: cover;
  color: var(--branco);
  font-weight: 800;
  letter-spacing: .02em;
  user-select: none;
}

.avatar--lista  .avatar__inicial { font-size: 32px; }
.avatar--perfil .avatar__inicial { font-size: 56px; }

/* Selo de pódio, encaixado na borda do avatar. */
.avatar__medalha {
  position: absolute;
  right: -2px; bottom: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid var(--branco);
  box-shadow: var(--sombra-selo);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.avatar__medalha--1 { background: var(--ouro);   color: #333; }
.avatar__medalha--2 { background: var(--prata);  color: #333; }
.avatar__medalha--3 { background: var(--bronze); color: #2a1c08; }

/* --- Nota em estrelas --------------------------------------------------- */

.nota {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.nota__estrelas { display: inline-flex; gap: 1px; line-height: 1; }

.estrela {
  font-size: 18px;
  line-height: 1;
  color: var(--estrela-vazia);
}
.estrela--cheia { color: var(--destaque-texto); }

/* Meia estrela por recorte, não por arredondamento: 4,5 mostra metade de
   verdade, e não uma estrela cheia mentindo. */
.estrela--meia {
  position: relative;
  color: var(--estrela-vazia);
}
.estrela--meia::before {
  content: "★";
  position: absolute;
  left: 0; top: 0;
  width: var(--parte, 50%);
  overflow: hidden;
  color: var(--destaque-texto);
}

.nota__valor {
  padding: 2px 7px;
  border-radius: var(--raio);
  background: var(--positivo);
  color: var(--branco);
  font-size: 12px;
  font-weight: 700;
}

.nota__total { color: var(--apagado); font-size: 14px; }

.nota__novo {
  padding: 2px 9px;
  border-radius: var(--raio);
  background: var(--neutro-pill);
  color: var(--apagado-forte);
  font-size: 12px;
  font-weight: 700;
}

.nota--compacta .estrela { font-size: 14px; }
.nota--compacta .nota__valor { display: none; }

/* --- Chips de meta ------------------------------------------------------ */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid #e8ebef;
  border-radius: 60px;
  background: var(--branco);
  color: var(--apagado);
  font-size: 13px;
  font-weight: 600;
}
.chip__icone { width: 14px; height: 14px; }
.chip__icone--local { color: #dc3139; }
.chip__icone--tag   { color: #2a41e8; }

.chip--positivo {
  border-color: #d3efdf;
  background: #f0faf4;
  color: #17763f;
}
.chip--positivo .chip__icone { color: #20a052; }

/* --- Cartão do prestador ------------------------------------------------ */

.lista-prestadores { display: flex; flex-direction: column; gap: 14px; }

.cartao {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 22px 20px 26px;
  border: 1px solid #eceef1;
  border-radius: var(--raio-card);
  background: var(--branco);
  box-shadow: 0 2px 10px rgba(16, 24, 40, .04);
  transition: box-shadow var(--transicao), border-color var(--transicao);
}

/* O hover é discreto de propósito: borda laranja e sombra mais funda. Barra
   colorida na lateral do card foi removida do projeto e não volta. */
.cartao:hover {
  border-color: var(--destaque);
  box-shadow: 0 10px 26px rgba(16, 24, 40, .08);
}

.cartao .avatar--lista { width: 84px; height: 84px; }
.cartao .avatar__foto,
.cartao .avatar__inicial { border: 0; }

/* Na lista, o selo de pódio fica no canto de cima, à esquerda do avatar. */
.cartao .avatar__medalha {
  top: -6px; left: -12px;
  right: auto; bottom: auto;
}

.cartao__corpo { flex: 1 1 auto; min-width: 0; }

.cartao__nome { margin: 0 0 4px; font-size: 18px; }
.cartao__nome a { color: var(--titulo); }
.cartao:hover .cartao__nome a { color: var(--destaque-texto); }

.cartao .nota { margin-bottom: 4px; }

/* Uma linha só: a descrição completa está no perfil. */
.cartao__descricao {
  margin: 0 0 10px;
  overflow: hidden;
  color: var(--apagado);
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cartao__verificado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: 6px;
  padding: 4px 12px 4px 6px;
  border-radius: 60px;
  background: #eef8f2;
  color: #17763f;
  font-size: 13px;
  font-weight: 700;
}
.cartao__verificado .icone { width: 18px; height: 18px; color: #20a052; }

.cartao__acao {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 170px;
}
.cartao__acao .botao-wa { height: 46px; padding: 0 18px; font-size: 15px; border-radius: 10px; }

.botao-perfil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  border: 1.5px solid #c9d6d4;
  border-radius: 10px;
  color: var(--acao);
  font-size: 15px;
  font-weight: 700;
  transition: border-color var(--transicao), background var(--transicao);
}
.botao-perfil:hover { border-color: var(--acao); background: #f2f8f7; color: var(--acao); }

/* --- Estado vazio ------------------------------------------------------- */

.vazio {
  padding: 60px 30px;
  border: 1px dashed var(--campo-borda);
  border-radius: var(--raio-card);
  background: var(--fundo);
  text-align: center;
  color: var(--apagado);
}
.vazio h3 { color: var(--titulo); }

/* --- Cabeçalho ---------------------------------------------------------- */

.topo {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--topo-altura);
  background: var(--branco);
  box-shadow: 0 1px 0 #eef0f2, 0 4px 18px rgba(16, 24, 40, .04);
}

.topo__interno {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 100%;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin: 0;
  color: var(--titulo);
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.marca:hover { color: var(--titulo); }
.marca__pino { width: 26px; height: 26px; color: var(--destaque); }
.marca__destaque { color: var(--destaque); }
/* Logo em imagem (300x75, transparente). A altura manda; a largura segue. */
.marca__logo { display: block; width: auto; height: 52px; }
.marca--rodape .marca__logo { height: 48px; }

.topo__sanduiche {
  display: none;
  margin-left: auto;
  padding: 8px;
  border: 0;
  background: none;
  color: var(--titulo);
}
.topo__sanduiche .icone { width: 26px; height: 26px; }

/* O menu ocupa o meio e empurra os botões de conta para a direita. */
.menu {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 24px;
}
.menu__fechar { display: none; }

.menu__lista {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 0 auto;
}

/* Escopo com o combinador direto (> li >) de propósito: sem ele, a regra
   também pega os links de dentro do mega-menu, que têm o próprio estilo. */
.menu__lista > li > a {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  color: var(--titulo);
  font-size: 15px;
  font-weight: 600;
}
.menu__lista > li > a:hover { color: var(--destaque-texto); }

/* Item da página atual: laranja com o traço embaixo, como no layout. */
.menu__lista > li > a.ativo { color: var(--destaque-texto); }
.menu__lista > li > a.ativo::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background: var(--destaque);
}

.topo__acoes { display: flex; align-items: center; gap: 12px; }
.topo__acoes form { margin: 0; }
.topo__nome {
  max-width: 160px;
  overflow: hidden;
  color: var(--titulo);
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* --- Mega-menu "Categorias" --------------------------------------------- */

/* Sem JavaScript: :hover cobre o mouse, :focus-within cobre o teclado (o
   próprio link e, assim que ele aparece, os links de dentro). */
.menu__item--mega { display: flex; align-items: center; height: var(--topo-altura); }

.mega-menu {
  position: absolute;
  /* Flush com a borda de baixo do cabeçalho, sem folga: uma folga aqui criaria
     uma "zona morta" onde o mouse perde o :hover ao descer até o painel. */
  top: 100%;
  left: 50%;
  z-index: 150;
  width: calc(100% - 40px);
  max-width: var(--container);
  padding: 30px;
  border-radius: 0 0 var(--raio-card) var(--raio-card);
  background: var(--branco);
  box-shadow: 0 18px 40px rgba(16, 24, 40, .12);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
}
.menu__item--mega:hover .mega-menu,
.menu__item--mega:focus-within .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.mega-menu__colunas {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px 30px;
}

.mega-menu__coluna { display: flex; flex-direction: column; gap: 10px; }
.mega-menu__titulo { color: var(--titulo); font-weight: 800; }
.mega-menu__titulo:hover { color: var(--destaque-texto); }
.mega-menu__coluna ul { display: flex; flex-direction: column; gap: 6px; }
.mega-menu__coluna a { color: var(--texto); font-size: 15px; }
.mega-menu__coluna a:hover { color: var(--destaque-texto); }

/* --- Rodapé ------------------------------------------------------------- */

/* Respiro entre o conteúdo e o rodapé. A home termina numa faixa de cor que
   deve encostar no rodapé, então lá o respiro sai. */
main { padding-bottom: 70px; }
main:has(> .cta-profissional:last-child) { padding-bottom: 0; }

.rodape {
  margin-top: 0;
  padding-top: 56px;
  border-top: 1px solid #eceef1;
  background: var(--branco);
}

.rodape__colunas {
  display: grid;
  gap: 40px;
  grid-template-columns: 1.15fr 1.25fr .75fr;
  padding-bottom: 44px;
}

.rodape__sobre p:not(.marca) { color: var(--apagado); max-width: 40ch; font-size: 15px; }

.marca--rodape { font-size: 21px; margin-bottom: 14px; }
.marca--rodape .marca__pino { width: 22px; height: 22px; }

.rodape__redes { display: flex; gap: 14px; margin-top: 22px; }
.rodape__redes a { display: flex; color: var(--titulo); }
.rodape__redes a:hover { color: var(--destaque-texto); }
.rodape__redes .icone { width: 22px; height: 22px; }

.rodape__titulo {
  margin: 0 0 16px;
  color: var(--titulo);
  font-size: 16px;
  font-weight: 800;
}

.rodape__coluna li { margin-bottom: 8px; }
.rodape__coluna--categorias ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  grid-template-rows: repeat(6, auto);
  column-gap: 30px;
}
.rodape__coluna a {
  color: var(--apagado);
  font-size: 15px;
  transition: color var(--transicao);
}
.rodape__coluna a:hover { color: var(--destaque-texto); }

.rodape__creditos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 22px 0;
  border-top: 1px solid #eceef1;
}
.rodape__creditos p { margin: 0; color: var(--apagado); font-size: 14px; }
.rodape__webformas { color: var(--apagado); font-size: 14px; }
.rodape__webformas strong { color: var(--titulo); font-weight: 800; }
.rodape__webformas:hover { color: var(--titulo); }

/* --- Hero --------------------------------------------------------------- */

/* A foto já vem com o degradê teal na esquerda, que é onde fica o texto. Por
   isso não há overlay no desktop: escurecer a foto apagaria o pôr do sol, e o
   texto já tem contraste de sobra sobre o teal. No mobile o recorte muda, e
   aí entra um overlay (ver a media query). */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 500px;
  background: #0c4744 url("../images/banner.webp") right center / cover no-repeat;
  color: var(--branco);
}

.hero__interno { padding: 70px 20px 120px; }

.hero h1 {
  max-width: 620px;
  margin: 0 0 18px;
  color: var(--branco);
  font-size: 54px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.025em;
}
.hero h1 span { display: block; color: var(--destaque); }

.hero__linha {
  max-width: 44ch;
  margin: 0;
  color: rgba(255, 255, 255, .94);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.5;
}

/* --- Buscador de dois campos -------------------------------------------- */

/* A âncora sobe o buscador para cima do hero, encavalando os dois. É o que dá
   a sensação de o campo estar "flutuando" sobre a foto. */
.busca-ancora {
  position: relative;
  z-index: 2;
  margin-top: -70px;
}
.busca-ancora--pagina { margin-top: 0; margin-bottom: 40px; }

.busca-dupla {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 100px;
  padding: 14px 14px 14px 34px;
  border-radius: 60px;
  background: var(--branco);
  box-shadow: 0 14px 40px rgba(16, 24, 40, .12);
}

.busca-dupla__campo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 0;
  min-width: 0;
  padding-right: 24px;
}

/* O divisor é uma borda no campo seguinte, e não um elemento próprio: assim
   ele some sozinho quando os campos empilham no mobile. */
.busca-dupla__campo--oque {
  padding-left: 26px;
  border-left: 1px solid var(--divisor);
}
.busca-dupla__campo--onde { flex: 0 1 380px; }

.busca-dupla__icone { width: 24px; height: 24px; color: var(--titulo); }
.busca-dupla__controle { flex: 1 1 auto; min-width: 0; }

.busca-dupla label {
  display: block;
  margin-bottom: 2px;
  color: var(--apagado);
  font-size: 14px;
  font-weight: 500;
}

.busca-dupla select,
.busca-dupla input {
  width: 100%;
  height: 26px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--titulo);
}
.busca-dupla input { font-weight: 500; }
.busca-dupla select { appearance: none; padding-right: 28px; cursor: pointer; }
.busca-dupla__seta {
  position: absolute;
  right: 24px;
  width: 18px; height: 18px;
  color: var(--titulo);
  pointer-events: none;
}
.busca-dupla input::placeholder { color: var(--apagado); }
.busca-dupla select:focus,
.busca-dupla input:focus { outline: none; }
.busca-dupla:focus-within { box-shadow: 0 14px 40px rgba(16, 24, 40, .12), 0 0 0 3px rgba(247, 148, 29, .3); }

.busca-dupla__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 0 0 auto;
  height: 66px;
  padding: 0 40px;
  border: 0;
  border-radius: 60px;
  background: linear-gradient(180deg, var(--destaque) 0%, var(--destaque-forte) 100%);
  color: var(--branco);
  font-size: 18px;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(236, 127, 0, .3);
  transition: box-shadow var(--transicao), transform var(--transicao);
}
.busca-dupla__botao .icone { width: 20px; height: 20px; stroke-width: 2.4; }
.busca-dupla__botao:hover { box-shadow: 0 10px 26px rgba(236, 127, 0, .45); }
.busca-dupla__botao:focus-visible { outline: 3px solid var(--titulo); outline-offset: 2px; }

/* --- Sugestões ---------------------------------------------------------- */

.sugestoes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px 0 0;
  padding: 0 34px;
}
.sugestoes__rotulo { color: var(--titulo); font-size: 15px; font-weight: 700; }
.sugestoes__lista { display: flex; flex-wrap: wrap; gap: 10px; }

.sugestao {
  display: inline-block;
  padding: 8px 20px;
  border: 1px solid #dfe3e8;
  border-radius: 60px;
  background: var(--branco);
  color: var(--texto);
  font-size: 14px;
  font-weight: 500;
  transition: border-color var(--transicao), color var(--transicao);
}
.sugestao:hover { border-color: var(--destaque); color: var(--destaque-texto); }

/* --- Blocos da home ----------------------------------------------------- */

.secao__cabeca {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}

.secao__titulo { margin-bottom: 6px; font-size: 34px; }
.secao__subtitulo { margin: 0; color: var(--apagado); font-size: 17px; }

.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding-bottom: 6px;
  color: var(--link-azul);
  font-size: 15px;
  font-weight: 700;
}
.link-seta .icone { width: 18px; height: 18px; color: var(--destaque); transition: transform var(--transicao); }
.link-seta:hover { color: var(--link-azul); }
.link-seta:hover .icone { transform: translateX(3px); }

.secao--categorias { padding: 70px 0 60px; }

/* Grade de categorias: cinco por linha, cada cartão com o seu tom pastel. */
.categorias {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
}

.categoria {
  --tom: #0b8a6d;
  --fundo-tom: #effaf6;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  height: 100%;
  min-height: 150px;
  padding: 26px 22px 22px;
  border-radius: var(--raio-card);
  background: var(--fundo-tom);
  color: var(--titulo);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.categoria:hover {
  color: var(--titulo);
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(16, 24, 40, .08);
}

.categorias > li:nth-child(10n+1) .categoria { --tom: #0b8a6d; --fundo-tom: #ecf8f3; }
.categorias > li:nth-child(10n+2) .categoria { --tom: #e98a00; --fundo-tom: #fff7e8; }
.categorias > li:nth-child(10n+3) .categoria { --tom: #2167c5; --fundo-tom: #edf4fd; }
.categorias > li:nth-child(10n+4) .categoria { --tom: #e04848; --fundo-tom: #fff1f0; }
.categorias > li:nth-child(10n+5) .categoria { --tom: #8a4fd8; --fundo-tom: #f6f0fe; }
.categorias > li:nth-child(10n+6) .categoria { --tom: #e5487a; --fundo-tom: #fff0f4; }
.categorias > li:nth-child(10n+7) .categoria { --tom: #7b55d6; --fundo-tom: #f3f0fd; }
.categorias > li:nth-child(10n+8) .categoria { --tom: #1680c4; --fundo-tom: #ecf6fd; }
.categorias > li:nth-child(10n+9) .categoria { --tom: #e8780c; --fundo-tom: #fff4ea; }
.categorias > li:nth-child(10n+10) .categoria { --tom: #187a68; --fundo-tom: #eef5f3; }

.categoria__icone { width: 36px; height: 36px; color: var(--tom); stroke-width: 1.7; }

.categoria__nome {
  max-width: 11ch;
  padding-right: 34px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.categoria__seta {
  position: absolute;
  right: 18px; bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--branco);
  color: var(--titulo);
  box-shadow: 0 2px 8px rgba(16, 24, 40, .08);
  transition: background var(--transicao), color var(--transicao);
}
.categoria__seta .icone { width: 15px; height: 15px; }
.categoria:hover .categoria__seta { background: var(--tom); color: var(--branco); }

/* Categoria sem prestador continua clicável, mas fica mais discreta, para não
   prometer o que a página ainda não entrega. */
.categoria--vazia .categoria__icone,
.categoria--vazia .categoria__nome { opacity: .7; }

/* Pill "Em breve": var(--apagado-forte) sobre var(--neutro-pill) mede
   6,02:1 pela fórmula de luminância relativa da WCAG, acima do mínimo de
   4.5:1 do AA. */
.selo-em-breve {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 60px;
  background: var(--neutro-pill);
  color: var(--apagado-forte);
  font-size: 12px;
  font-weight: 700;
}

/* Página /categorias: grade + lista das subcategorias. */
.mapa-categorias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 30px;
  margin: 50px 0 80px;
}
.mapa-categorias__grupo h2 { margin-bottom: 12px; font-size: 18px; }
.mapa-categorias__grupo h2 a { color: var(--titulo); }
.mapa-categorias__grupo li { margin-bottom: 6px; }
.mapa-categorias__grupo li a { color: var(--texto); }
.mapa-categorias__grupo a:hover { color: var(--destaque-texto); }

/* Como funciona: painel cinza-claro com os três passos em linha. */
.secao--passos { padding: 10px 0 40px; }

.passos-painel {
  padding: 46px 50px 54px;
  border-radius: var(--raio-painel);
  background: #f5f6f7;
  text-align: center;
}
.passos-painel .secao__titulo { font-size: 30px; }

.passos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 38px;
  text-align: left;
}

.passo {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

/* Seta laranja entre um passo e o próximo. */
.passo:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -26px; top: 24px;
  width: 10px; height: 10px;
  border-top: 2px solid var(--destaque);
  border-right: 2px solid var(--destaque);
  transform: rotate(45deg);
}

.passo__circulo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 64px; height: 64px;
  border-radius: 50%;
  color: var(--branco);
}
.passo__circulo .icone { width: 28px; height: 28px; }
.passo__circulo--teal { background: var(--acao); }
.passo__circulo--laranja { background: var(--destaque); }

.passo__numero {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px; height: 26px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--destaque);
  color: var(--branco);
  font-size: 14px;
  font-weight: 800;
}

.passo h3 { margin: 2px 0 8px; font-size: 17px; }
.passo p { margin: 0; color: var(--apagado); font-size: 14px; line-height: 1.55; }

/* Profissionais em destaque: carrossel por rolagem com snap. Funciona sem
   JavaScript (rola com o dedo ou com a barra); as setas só ajudam no mouse. */
.secao--destaques { padding: 50px 0 70px; }

.carrossel { position: relative; }

.carrossel__trilho {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 4 * 20px) / 5);
  gap: 20px;
  /* A folga lateral (compensada pela margem negativa) é para a sombra dos
     cartões não ser cortada pelo overflow do trilho. */
  margin: 0 -12px;
  padding: 6px 12px 22px;
  scroll-padding: 0 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.carrossel__trilho::-webkit-scrollbar { display: none; }

.carrossel__seta {
  position: absolute;
  top: 38%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--branco);
  color: var(--titulo);
  box-shadow: 0 4px 14px rgba(16, 24, 40, .14);
  transition: opacity var(--transicao);
}
.carrossel__seta .icone { width: 20px; height: 20px; }
.carrossel__seta--anterior { left: -22px; }
.carrossel__seta--proximo { right: -22px; }
.carrossel__seta[disabled] { opacity: 0; pointer-events: none; }

.destaque {
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  border-radius: var(--raio-card);
  background: var(--branco);
  box-shadow: 0 4px 18px rgba(16, 24, 40, .08);
  overflow: hidden;
}

.destaque__foto {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  margin: 8px 8px 0;
  border-radius: 10px;
  overflow: hidden;
}
.destaque__foto img { width: 100%; height: 100%; object-fit: cover; }

.destaque__inicial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  color: var(--branco);
  font-size: 56px;
  font-weight: 800;
}

.destaque__selo {
  position: absolute;
  top: 10px; right: 10px;
  padding: 3px 12px;
  border-radius: 60px;
  background: var(--destaque);
  color: var(--branco);
  font-size: 12px;
  font-weight: 800;
}

.destaque__nota {
  position: absolute;
  left: 8px; bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 60px;
  background: var(--branco);
  color: var(--titulo);
  font-size: 13px;
  font-weight: 800;
}
.destaque__nota .icone { width: 14px; height: 14px; color: var(--destaque); }
.destaque__nota small { color: var(--apagado); font-size: 12px; font-weight: 500; }

.destaque__corpo {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 14px 16px 16px;
}

.destaque__nome { margin: 0 0 2px; font-size: 16px; }
.destaque__nome a { color: var(--titulo); }
.destaque__nome a:hover { color: var(--destaque-texto); }

.destaque__segmento { margin: 0 0 10px; color: var(--apagado); font-size: 14px; }

.destaque__local {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  color: var(--texto);
  font-size: 13px;
}
.destaque__local .icone { width: 15px; height: 15px; color: var(--titulo); }

.destaque__wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  height: 42px;
  border: 1.5px solid #cdebd9;
  border-radius: 60px;
  color: var(--whatsapp-texto);
  font-size: 14px;
  font-weight: 800;
  transition: background var(--transicao), border-color var(--transicao);
}
.destaque__wa .icone { width: 18px; height: 18px; color: var(--whatsapp); }
.destaque__wa:hover { border-color: var(--whatsapp); background: #f0fbf4; color: var(--whatsapp-texto); }
.destaque__wa--perfil { border-color: var(--campo-borda); color: var(--acao); }

/* Faixa escura de confiança, sobre a foto da ponte. */
.faixa-confianca {
  background:
    linear-gradient(90deg, rgba(10, 40, 86, 0.97) 0%, rgba(14, 55, 99, 0.9) 45%, rgba(14, 91, 173, 0.78) 100%), #115399 url("../images/faixa-ponte.webp") center / cover no-repeat;
  color: var(--branco);
}

.faixa-confianca__interno {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  align-items: center;
  gap: 40px;
  padding-top: 52px;
  padding-bottom: 52px;
}

.faixa-confianca h2 { max-width: 17ch; margin-bottom: 12px; color: var(--branco); font-size: 30px; }
.faixa-confianca p { margin: 0; color: rgba(255, 255, 255, .9); font-size: 16px; }

.faixa-confianca__itens {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}
.faixa-confianca__itens li { display: flex; flex-direction: column; align-items: center; }
.faixa-confianca__itens .icone {
  width: 38px; height: 38px;
  margin-bottom: 14px;
  color: var(--destaque);
  stroke-width: 1.6;
}
.faixa-confianca__itens strong { color: var(--branco); font-size: 15px; font-weight: 800; }
.faixa-confianca__itens span { color: rgba(255, 255, 255, .85); font-size: 14px; }

/* Chamada para o profissional se cadastrar. */
.cta-profissional {
  position: relative;
  overflow: hidden;
  background: #f4f5f6;
}

.cta-profissional__interno {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  gap: 30px;
  min-height: 300px;
}

.cta-profissional__texto { padding: 50px 0; }
.cta-profissional h2 { margin-bottom: 12px; font-size: 32px; }
.cta-profissional p { max-width: 36ch; margin-bottom: 24px; color: var(--texto); font-size: 17px; }

.cta-profissional__visual {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  min-height: 300px;
}

/* Mancha laranja atrás do profissional. */
.cta-profissional__visual::before {
  content: "";
  position: absolute;
  left: 4%; bottom: -40px;
  width: 360px; height: 300px;
  border-radius: 58% 42% 0 0 / 70% 60% 0 0;
  background: linear-gradient(160deg, #f9a83c 0%, var(--destaque) 60%, var(--destaque-forte) 100%);
}

.cta-profissional__foto {
  position: relative;
  width: 300px;
  height: auto;
  margin-left: 40px;
}

.cta-profissional__lista {
  position: absolute;
  right: 0; top: 50%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 24px;
  border-radius: var(--raio-card);
  background: var(--branco);
  box-shadow: 0 14px 34px rgba(16, 24, 40, .12);
  transform: translateY(-50%);
}
.cta-profissional__lista li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--titulo);
  font-size: 14px;
  font-weight: 600;
}
.cta-profissional__lista .icone { width: 20px; height: 20px; color: var(--acao); }

.centralizado { margin-top: 40px; text-align: center; }

/* --- Página de categoria ------------------------------------------------ */

/* Topo claro: a sala em obra de fundo (banner-categorias-aracaju.webp) e o
   profissional recortado por cima, à direita (ver .cat-hero__pessoa). O fundo
   já nasce claro na esquerda; o degradê branco só reforça a leitura. */
.cat-hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .7) 32%, rgba(255, 255, 255, 0) 58%),
    #f3f4f5 url("../images/banner-categorias-aracaju.webp") center 30% / cover no-repeat;
}

.cat-hero__interno {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: stretch;
  min-height: 340px;
}

.cat-hero__texto { position: relative; z-index: 1; padding: 30px 0 38px; }

.trilha ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.trilha li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--titulo); }
.trilha a { color: var(--texto); }
.trilha a:hover { color: var(--destaque-texto); }
.trilha .icone { width: 12px; height: 12px; color: var(--apagado); }
.trilha [aria-current] { font-weight: 600; }

.cat-hero h1 {
  max-width: 21ch;
  margin-bottom: 14px;
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: -.025em;
}

.cat-hero__descricao { max-width: 52ch; margin-bottom: 24px; color: var(--texto); font-size: 16px; }

.cat-hero__selos { display: flex; flex-wrap: wrap; gap: 14px 30px; }
.cat-hero__selos li { display: flex; align-items: center; gap: 12px; }
.cat-hero__selos .icone { width: 30px; height: 30px; color: var(--acao); stroke-width: 1.6; }
.cat-hero__selos li:nth-child(2) .icone { color: var(--destaque); }
.cat-hero__selos span { color: var(--titulo); font-size: 13px; font-weight: 600; line-height: 1.35; }

.cat-hero__visual { display: flex; }

/* O profissional encosta na base do topo, com a cabeça perto do alto, e é
   cortado na altura dos braços, como no layout. Fica sempre à esquerda do
   cartão, por isso a referência dele é a mesma borda da tela. */
.cat-hero__pessoa {
  position: absolute;
  top: 18px;
  right: calc(2.5vw + 150px);
  width: auto;
  height: 128%;
  max-width: none;
  pointer-events: none;
}

/* O cartão se ancora na borda da tela, e não do container: a foto acompanha a
   largura da janela, e é assim que ele fica sempre à direita do profissional,
   sem cobrir o rosto. */
.cat-hero__cartao {
  position: absolute;
  z-index: 1;
  top: 54%;
  right: 2.5vw;
  transform: translateY(-50%);
  max-width: 160px;
  margin: 0;
  padding: 16px 18px;
  border-radius: var(--raio-card);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 14px 34px rgba(16, 24, 40, .12);
  color: var(--titulo);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}
.cat-hero__cartao .icone { display: block; width: 28px; height: 28px; margin-bottom: 10px; color: var(--destaque); }

/* Corpo: filtros na lateral e a lista. */
.cat-corpo {
  display: grid;
  grid-template-columns: 290px 1fr;
  align-items: start;
  gap: 28px;
  padding-top: 26px;
}
/* Sem o min-width, a descrição de uma linha (nowrap) alarga a coluna além
   do container. */
.cat-corpo > * { min-width: 0; }

.filtros {
  position: sticky;
  top: calc(var(--topo-altura) + 16px);
  padding: 22px 22px 24px;
  border: 1px solid #eceef1;
  border-radius: var(--raio-card);
  background: var(--branco);
  box-shadow: 0 2px 10px rgba(16, 24, 40, .04);
}

.filtros__titulo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--divisor);
  color: var(--titulo);
  font-size: 17px;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}
.filtros__titulo::-webkit-details-marker { display: none; }
.filtros__titulo .icone { width: 22px; height: 22px; color: var(--acao); }

.filtros__grupo { min-width: 0; margin: 0 0 22px; padding: 0; border: 0; }

.filtros__rotulo {
  display: block;
  margin: 0 0 10px;
  padding: 0;
  color: var(--titulo);
  font-size: 15px;
  font-weight: 800;
}

.filtros__select { position: relative; display: flex; align-items: center; }
.filtros__select .icone {
  position: absolute;
  left: 14px;
  width: 16px; height: 16px;
  color: var(--titulo);
  pointer-events: none;
}
.filtros__select select {
  width: 100%;
  height: 46px;
  padding: 0 38px 0 40px;
  border: 1px solid #dfe3e8;
  border-radius: 10px;
  background: var(--branco) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2316202a' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center / 11px;
  appearance: none;
  font: inherit;
  font-size: 14px;
  color: var(--titulo);
  cursor: pointer;
}
.filtros__select select:focus { outline: none; border-color: var(--destaque); box-shadow: 0 0 0 3px rgba(247, 148, 29, .2); }
.filtros__select--compacto select { height: 40px; font-size: 13px; font-weight: 600; }

.filtros__pilulas { display: flex; flex-wrap: wrap; gap: 8px; }

.pilula {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid #dfe3e8;
  border-radius: 60px;
  background: var(--branco);
  color: var(--texto);
  font-size: 13px;
  font-weight: 600;
  transition: border-color var(--transicao), color var(--transicao);
}
.pilula:hover { border-color: var(--destaque); color: var(--destaque-texto); }
.pilula--ativa,
.pilula--ativa:hover { border-color: var(--acao-escura); background: var(--acao-escura); color: var(--branco); }

/* Avaliação mínima: rádios escondidos, com a "caixinha" desenhada no span. */
.filtros__notas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.nota-opcao { position: relative; cursor: pointer; }
.nota-opcao input { position: absolute; opacity: 0; width: 0; height: 0; }
.nota-opcao span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 52px;
  border: 1px solid #dfe3e8;
  border-radius: 10px;
  color: var(--texto);
  font-size: 13px;
  font-weight: 700;
  transition: border-color var(--transicao);
}
.nota-opcao .icone { width: 14px; height: 14px; color: var(--destaque); }
.nota-opcao:hover span { border-color: var(--destaque); }
.nota-opcao input:checked + span { border-color: var(--acao-escura); background: var(--acao-escura); color: var(--branco); }
.nota-opcao input:focus-visible + span { outline: 2px solid var(--destaque-texto); outline-offset: 2px; }

.filtros__check {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--texto);
  font-size: 14px;
  cursor: pointer;
}
.filtros__check input { width: 18px; height: 18px; margin: 0; accent-color: var(--acao); }

.filtros .botao--bloco { height: 50px; margin-top: 4px; border-radius: 10px; }
.filtros__limpar { margin: 14px 0 0; font-size: 14px; text-align: center; }

.lista-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.lista-cabeca__titulo { margin: 0; font-size: 20px; }
.lista-cabeca__ordem { display: flex; align-items: center; gap: 10px; }
.lista-cabeca__ordem label { color: var(--apagado); font-size: 14px; white-space: nowrap; }
.lista-cabeca__ordem .filtros__select { min-width: 210px; }

/* As duas chamadas no fim da página. */
.cat-chamadas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 50px;
  padding: 26px 0;
  border-radius: var(--raio-painel);
  background: #f2f6f5;
}

.cat-chamadas__item {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 34px;
}
.cat-chamadas__item + .cat-chamadas__item { border-left: 1px solid #dbe3e1; }
.cat-chamadas__item > div { flex: 1 1 auto; }
.cat-chamadas h2 { margin: 0 0 6px; font-size: 17px; }
.cat-chamadas p { margin: 0; color: var(--texto); font-size: 14px; line-height: 1.5; }

.cat-chamadas__icone { width: 38px; height: 38px; flex: 0 0 auto; }
.cat-chamadas__icone--teal { color: #1f8b4c; }
.cat-chamadas__icone--laranja { color: var(--destaque); }

.botao-pilula--teal {
  border-color: var(--acao);
  background: transparent;
  color: var(--acao);
}
.botao-pilula--teal:hover { background: var(--acao); color: var(--branco); box-shadow: none; }

/* --- Cabeça de página --------------------------------------------------- */

.cabeca-pagina {
  padding: 45px 0 35px;
  border-bottom: 1px solid var(--divisor);
  background: var(--fundo);
  margin-bottom: 40px;
}
.cabeca-pagina h1 { margin-bottom: 10px; }
.cabeca-pagina__intro { max-width: 70ch; color: var(--apagado); }
.cabeca-pagina__filhos { margin-top: 18px; }
.cabeca-pagina__filhos a { color: var(--apagado); }
.cabeca-pagina__filhos a:hover { color: var(--destaque-texto); }

/* --- Widget da barra lateral -------------------------------------------- */

.widget {
  padding: 20px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-card);
  background: var(--branco);
  box-shadow: var(--sombra-card);
}

.widget__titulo {
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(0, 0, 0, .15);
  color: var(--titulo);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.widget__titulo::-webkit-details-marker { display: none; }
.widget__titulo::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 40px; height: 3px;
  background: var(--destaque);
}

.widget__corpo select { margin-bottom: 0; }

.widget__limpar { margin-top: 14px; font-size: 14px; text-align: center; }

.resultado-contagem { margin-bottom: 18px; color: var(--apagado); font-size: 14px; }

/* --- Capa do perfil ----------------------------------------------------- */

.perfil-capa {
  padding: 50px 0;
  margin-bottom: 40px;
  background: linear-gradient(120deg, var(--escuro) 0%, #0a4a42 100%);
  color: var(--branco);
}

.perfil-capa__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
}

.perfil-capa__identidade { display: flex; align-items: center; gap: 25px; }

.perfil-capa h1 { margin: 4px 0 12px; color: var(--branco); font-size: 28px; }

.perfil-capa__volta { margin: 0; font-size: 14px; }
.perfil-capa__volta a {
  display: inline-flex; align-items: center; gap: 4px;
  color: rgba(255, 255, 255, .75);
}
.perfil-capa__volta a:hover { color: var(--destaque-texto); }
.perfil-capa__volta .icone { width: 14px; height: 14px; }

.perfil-capa__bairro { margin: 0; }

.perfil-capa__nota {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 190px;
  padding: 22px 26px;
  border-radius: var(--raio-card);
  background: rgba(255, 255, 255, .12);
  text-align: center;
}
.perfil-capa__numero { font-size: 44px; font-weight: 800; line-height: 1; }
.perfil-capa__legenda { margin-top: 8px; font-size: 14px; color: rgba(255, 255, 255, .8); }
.perfil-capa__legenda--vazia { font-size: 16px; font-weight: 600; }

/* --- Corpo do perfil ---------------------------------------------------- */

.colunas--invertida .colunas__lateral { order: 2; }
.colunas--invertida .colunas__principal { order: 1; }

.bloco { margin-bottom: 45px; }
.bloco h2 { padding-bottom: 12px; border-bottom: 1px solid var(--divisor); }

.convite { padding: 16px 20px; border-radius: var(--raio); background: var(--fundo); }

/* --- Avaliação ---------------------------------------------------------- */

.avaliacao { padding: 22px 0; border-bottom: 1px solid var(--divisor); }
.avaliacao:last-child { border-bottom: 0; }

.avaliacao__topo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--apagado);
}
.avaliacao__topo strong { color: var(--titulo); font-size: 16px; }
.avaliacao__topo .nota { margin-bottom: 0; }

.selo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: var(--raio);
  font-size: 12px;
  font-weight: 600;
}
.selo .icone { width: 12px; height: 12px; }
.selo--verificado { background: #dfeceb; color: var(--acao); }
.selo--aberto     { background: var(--neutro-pill); color: var(--apagado-forte); }

/* Este bloco já diz quatro vezes que é uma resposta: o rótulo "Resposta de
   [nome]:" em negrito, o recuo de 24px, o fundo diferente e, antes, uma borda
   colorida à esquerda. A borda saiu: era o sinal redundante, e é justamente o
   padrão que mais entrega interface feita no automático. O rótulo em palavras
   faz o trabalho melhor que qualquer marcação visual. */
.avaliacao__resposta {
  margin: 14px 0 0 24px;
  padding: 16px 20px;
  border-radius: var(--raio);
  background: var(--neutro-pill);
}
.avaliacao__resposta strong { color: var(--titulo); }
.avaliacao__resposta p { margin: 6px 0 0; }

.avaliacao__denuncia { margin-top: 12px; }
.avaliacao__denuncia summary {
  color: var(--apagado); font-size: 13px; cursor: pointer;
}
.avaliacao__denuncia summary:hover { color: var(--destaque-texto); }
.avaliacao__denuncia form { margin-top: 12px; max-width: 460px; }

/* --- Formulário de avaliar ---------------------------------------------- */

.form-avaliar {
  padding: 25px;
  margin-bottom: 30px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-card);
  background: var(--branco);
  box-shadow: var(--sombra-card);
}

/* O fieldset fica em bloco e as estrelas em um filho flex. Legend dentro de
   container flex tem comportamento imprevisível entre navegadores. */
.estrelas-input { border: 0; padding: 0; margin: 0 0 20px; }
.estrelas-input legend { padding: 0; margin-bottom: 6px; color: var(--titulo); font-weight: 600; }

/* row-reverse com os radios de 5 a 1 é o que permite o seletor "~" pintar a
   estrela apontada e todas à esquerda dela, usando só CSS. */
.estrelas-input__linha { display: flex; flex-direction: row-reverse; justify-content: flex-end; }
.estrelas-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.estrelas-input label {
  display: inline-block;
  margin: 0;
  font-size: 30px;
  line-height: 1;
  color: #dadada;
  cursor: pointer;
  transition: color var(--transicao);
}
/* row-reverse faz o hover pintar a estrela e todas à esquerda dela. */
.estrelas-input label:hover,
.estrelas-input label:hover ~ label,
.estrelas-input input:checked ~ label { color: var(--destaque-texto); }
.estrelas-input input:focus-visible + label { outline: 2px solid var(--destaque-texto); outline-offset: 2px; }

/* --- Caixa de contato --------------------------------------------------- */

.caixa-contato {
  border: 1px solid var(--borda);
  border-radius: var(--raio-card);
  background: var(--branco);
  box-shadow: var(--sombra-card);
  overflow: hidden;
}

.caixa-contato__titulo {
  margin: 0;
  padding: 15px 25px;
  background: var(--destaque);
  color: var(--sobre-destaque);
  font-size: 18px;
}

.caixa-contato__lista { padding: 6px 25px; }
.caixa-contato__lista li {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--divisor);
}
.caixa-contato__lista li:last-child { border-bottom: 0; }
.caixa-contato__lista .icone {
  grid-row: span 2;
  width: 40px; height: 40px;
  padding: 11px;
  border-radius: 50%;
  background: var(--destaque);
  color: var(--sobre-destaque);
}
.caixa-contato__lista span { color: #424242; font-weight: 600; font-size: 14px; }
.caixa-contato__lista a, .caixa-contato__lista li > :last-child { color: #828282; }

.caixa-contato__cta { padding: 0 25px 25px; }

/* --- Formulário em caixa (conta) ---------------------------------------- */

.caixa-formulario {
  max-width: 460px;
  margin: 50px auto;
  padding: 35px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-card);
  background: var(--branco);
  box-shadow: var(--sombra-card);
}
.caixa-formulario h1 { font-size: 26px; text-align: center; }
.caixa-formulario .botao { width: 100%; }

/* --- Conteúdo longo (institucionais) ------------------------------------ */

.conteudo h2 {
  margin-top: 40px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--divisor);
  font-size: 22px;
}
.conteudo h2:first-of-type { margin-top: 24px; }
.conteudo ul { margin: 0 0 16px; padding-left: 22px; list-style: disc; }
.conteudo li { margin-bottom: 8px; }
.conteudo em { color: var(--apagado); font-size: 14px; }

/* --- Responsivo --------------------------------------------------------- */

@media (max-width: 1200px) {
  .categorias { grid-template-columns: repeat(4, 1fr); }
  .carrossel__trilho { grid-auto-columns: calc((100% - 3 * 20px) / 4); }
  .carrossel__seta--anterior { left: -8px; }
  .carrossel__seta--proximo { right: -8px; }
  .faixa-confianca__interno { grid-template-columns: 1fr; }
  .faixa-confianca h2 { max-width: none; }
}

/* O cabeçalho completo (menu + dois botões) precisa de uns 1150px. Abaixo
   disso tudo vai para o painel lateral do sanduíche. */
@media (max-width: 1150px) {
  .topo__sanduiche { display: block; }

  .menu {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 200;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 24px;
    width: min(330px, 86vw);
    margin: 0;
    padding: 70px 25px 25px;
    background: var(--branco);
    box-shadow: -4px 0 24px rgba(0, 0, 0, .18);
    transform: translateX(100%);
    transition: transform .25s ease;
    overflow-y: auto;
  }
  body.menu-aberto .menu { transform: translateX(0); }
  body.menu-aberto { overflow: hidden; }

  .menu__fechar {
    display: block;
    position: absolute;
    top: 18px; right: 18px;
    padding: 8px;
    border: 0;
    background: none;
    color: var(--titulo);
  }
  .menu__fechar .icone { width: 24px; height: 24px; }

  .menu__lista { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
  .menu__lista > li { border-bottom: 1px solid var(--divisor); }
  .menu__lista > li > a { display: block; width: 100%; padding: 14px 0; }
  .menu__lista > li > a.ativo::after { display: none; }

  /* No painel lateral o item Categorias leva direto para /categorias: com dez
     grupos e as subcategorias, o mega-menu aberto viraria uma rolagem enorme. */
  .menu__item--mega { display: block; height: auto; }
  .mega-menu { display: none; }

  .topo__acoes { flex-direction: column; align-items: stretch; }
  .topo__acoes .botao-pilula { justify-content: center; width: 100%; }
  .topo__acoes form { width: 100%; }

  .rodape__colunas { grid-template-columns: 1fr 1fr; }
  .rodape__sobre { grid-column: 1 / -1; }

  .cta-profissional__interno { grid-template-columns: 1fr; gap: 0; }
  .cta-profissional__texto { padding: 50px 0 10px; }
  .cta-profissional__visual { min-height: 320px; }
}

/* Abaixo disso o profissional ocupa a direita inteira do topo e o cartão
   cobriria o rosto dele. */
@media (max-width: 1300px) {
  .cat-hero__pessoa { right: calc(2.5vw + 120px); }

  .cartao__acao { flex-basis: 150px; }
}

@media (max-width: 992px) {
  .colunas { flex-direction: column; }
  .colunas__lateral { flex: 1 1 auto; width: 100%; }
  .colunas--invertida .colunas__lateral { order: 1; }
  .colunas--invertida .colunas__principal { order: 2; }

  /* O filtro recolhe para não empurrar os resultados abaixo da dobra. */
  .colunas__lateral .widget[open] > .widget__titulo { margin-bottom: 18px; }
  .colunas__lateral .widget:not([open]) > .widget__titulo { margin-bottom: 0; border-bottom: 0; }

  .categorias { grid-template-columns: repeat(3, 1fr); }
  .carrossel__trilho { grid-auto-columns: calc((100% - 2 * 20px) / 3); }

  .passos { grid-template-columns: 1fr; gap: 26px; max-width: 460px; margin-left: auto; margin-right: auto; }
  .passo:not(:last-child)::after { display: none; }

  .faixa-confianca__itens { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }

  .cat-hero__interno { grid-template-columns: 1fr; min-height: 0; }
  .cat-hero__visual { display: none; }
  .cat-corpo { grid-template-columns: 1fr; gap: 20px; }
  .filtros { position: static; }
  .filtros:not([open]) .filtros__titulo { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
  .cat-chamadas { grid-template-columns: 1fr; gap: 24px; }
  .cat-chamadas__item + .cat-chamadas__item { padding-top: 24px; border-left: 0; border-top: 1px solid #dbe3e1; }

  .perfil-capa__interno { flex-direction: column; align-items: flex-start; }
  .perfil-capa__nota { width: 100%; }
}

@media (max-width: 768px) {
  /* No celular a foto é recortada pela direita (versão de 900px, 54 KB) e o
     texto cai em cima do profissional. O overlay de baixo para cima garante o
     contraste do título sem esconder o rosto, que fica no alto. */
  .hero {
    align-items: flex-end;
    min-height: 520px;
    background:
      linear-gradient(180deg, rgba(7, 51, 47, .1) 0%, rgba(7, 51, 47, .55) 40%, rgba(7, 51, 47, .96) 72%),
      #0c4744 url("../images/banner-mobile.webp") 70% top / cover no-repeat;
  }
  .hero__interno { padding: 200px 20px 90px; }
  .hero h1 { font-size: 36px; }
  .hero__linha { font-size: 16px; }

  /* Os dois campos empilham e o botão vira barra inteira. */
  .busca-ancora { margin-top: -56px; }
  .busca-dupla {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 20px;
    border-radius: var(--raio-card);
  }
  .busca-dupla__campo { padding: 0; }
  .busca-dupla__campo--onde { flex: 1 1 auto; padding-bottom: 16px; border-bottom: 1px solid var(--divisor); }
  .busca-dupla__seta { right: 0; }
  .busca-dupla__campo--oque { padding-left: 0; border-left: 0; }
  .busca-dupla__botao { width: 100%; height: 54px; }
  .sugestoes { padding: 0; }

  .secao__cabeca { flex-direction: column; align-items: flex-start; gap: 10px; }
  .secao__titulo,
  .passos-painel .secao__titulo { font-size: 26px; }
  .secao__subtitulo { font-size: 16px; }

  .categorias { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .categoria { min-height: 130px; padding: 20px 16px 18px; }
  .categoria__nome { font-size: 15px; }
  .categoria__seta { right: 14px; bottom: 18px; width: 28px; height: 28px; }

  .passos-painel { padding: 36px 22px 40px; border-radius: var(--raio-card); }

  .carrossel__trilho { grid-auto-columns: 72%; }
  .carrossel__seta { display: none; }

  .faixa-confianca h2 { font-size: 24px; }

  .cta-profissional h2 { font-size: 26px; }
  .cta-profissional__visual { min-height: 0; flex-direction: column; align-items: stretch; }
  .cta-profissional__visual::before { left: 50%; width: 300px; height: 250px; transform: translateX(-50%); bottom: auto; top: 30px; }
  .cta-profissional__foto { width: 240px; margin: 0 auto; }
  .cta-profissional__lista { position: relative; top: auto; transform: none; margin: -30px 0 40px; }

  /* Avatar e texto lado a lado; os botões descem para uma linha inteira. */
  .cartao { flex-wrap: wrap; align-items: flex-start; gap: 14px 16px; padding: 18px; }
  .cartao .avatar--lista { width: 64px; height: 64px; }
  .cartao .avatar--lista .avatar__inicial { font-size: 26px; }
  .cartao__corpo { flex: 1 1 0; }
  .cartao__descricao { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .cartao__verificado { order: 3; margin-top: 0; }
  .cartao__acao { order: 4; flex: 1 1 100%; flex-direction: row; }
  .cartao__acao > * { flex: 1 1 0; }

  .cat-hero h1 { font-size: 32px; }
  .cat-hero {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .8) 100%),
      #f3f4f5 url("../images/banner-categorias-aracaju.webp") 60% center / cover no-repeat;
  }
  .cat-hero__selos { gap: 14px 20px; }
  .lista-cabeca__ordem { width: 100%; }
  .lista-cabeca__ordem .filtros__select { flex: 1 1 auto; min-width: 0; }
  .cat-chamadas__item { flex-wrap: wrap; padding: 0 22px; }
  .cat-chamadas__item .botao-pilula { width: 100%; justify-content: center; }

  .perfil-capa__identidade { flex-direction: column; align-items: flex-start; }
  .avatar--perfil { width: 100px; height: 100px; }
  .avatar--perfil .avatar__inicial { font-size: 40px; }
  .perfil-capa h1 { font-size: 24px; }

  .avaliacao__resposta { margin-left: 0; }

  .secao { padding: 45px 0; }
  h1 { font-size: 26px; }
  h2 { font-size: 22px; }
}

@media (max-width: 576px) {
  .marca { font-size: 20px; }
  .marca__pino { width: 22px; height: 22px; }
  .marca__logo { height: 42px; }
  .rodape__colunas { grid-template-columns: 1fr; gap: 30px; }
  .rodape__creditos { flex-direction: column; text-align: center; }
  .caixa-formulario { padding: 25px 20px; margin: 25px auto; }
  .form-avaliar { padding: 20px; }
}

/* Respeita quem pediu menos movimento no sistema. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --- Sobre nós ---------------------------------------------------------- */

/* A foto já traz o degradê teal e o pino à esquerda: o texto entra sobre essa
   faixa escura, e o profissional e a ponte ficam livres à direita. */
.sobre-hero {
  display: flex;
  align-items: center;
  min-height: 330px;
  padding: 50px 0;
  background: var(--escuro) url("../images/banner-mecanico-em-aracaju.webp") right 6% / cover no-repeat;
  color: var(--branco);
}
.sobre-hero h1 {
  margin-bottom: 18px;
  color: var(--branco);
  font-size: 58px;
  line-height: 1.02;
  letter-spacing: -.03em;
}
.sobre-hero h1 span { color: var(--destaque); }
.sobre-hero p { margin: 0; color: rgba(255, 255, 255, .9); font-size: 19px; line-height: 1.45; }

.sobre { padding-top: 34px; }

.sobre__rotulo {
  margin: 0 0 8px;
  color: var(--destaque-texto);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Essência: texto à esquerda, os quatro valores num painel cinza à direita. */
.sobre-essencia {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 40px;
}
.sobre-essencia h2 { margin-bottom: 14px; font-size: 30px; line-height: 1.25; }
.sobre-essencia__texto > p:last-child { font-size: 16px; line-height: 1.65; }

.sobre-valores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 30px;
  padding: 32px 30px;
  border-radius: var(--raio-painel);
  background: #f5f6f7;
}
.sobre-valores li { display: flex; align-items: flex-start; gap: 18px; }
.sobre-valores h3 { margin: 6px 0 6px; font-size: 17px; }
.sobre-valores p { margin: 0; font-size: 14px; line-height: 1.55; }

.sobre-valores__icone {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--branco);
  box-shadow: 0 6px 14px rgba(16, 24, 40, .14);
}
.sobre-valores__icone .icone { width: 27px; height: 27px; }
.sobre-valores__icone--teal    { background: linear-gradient(160deg, #13756b, var(--acao)); }
.sobre-valores__icone--laranja { background: linear-gradient(160deg, var(--destaque), var(--destaque-forte)); }
.sobre-valores__icone--azul    { background: linear-gradient(160deg, #2196f3, #1366c9); }
.sobre-valores__icone--roxo    { background: linear-gradient(160deg, #8b3fe0, #6a22c2); }

/* Como funciona: faixa pêssego com os três passos ligados por setas. */
.sobre-ranking {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr);
  align-items: center;
  gap: 40px;
  margin-top: 26px;
  padding: 30px 34px;
  border-radius: var(--raio-painel);
  background: #fdf3e8;
}
.sobre-ranking h2 { margin-bottom: 12px; font-size: 28px; line-height: 1.25; }
.sobre-ranking__texto > p:last-child { font-size: 15px; }

.sobre-passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; counter-reset: none; }
.sobre-passos li { position: relative; text-align: center; }
/* Seta laranja entre um passo e o próximo. */
.sobre-passos li + li::before {
  content: "";
  position: absolute;
  top: 38px;
  left: -24px;
  width: 11px;
  height: 11px;
  border-top: 2.5px solid var(--destaque);
  border-right: 2.5px solid var(--destaque);
  transform: rotate(45deg);
}
.sobre-passos__topo { position: relative; display: flex; justify-content: center; margin-bottom: 14px; }
.sobre-passos__numero {
  position: absolute;
  top: 0;
  left: calc(50% - 74px);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--acao);
  color: var(--branco);
  font-size: 17px;
  font-weight: 800;
}
.sobre-passos__icone {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--branco);
  color: var(--acao);
  box-shadow: 0 6px 16px rgba(16, 24, 40, .08);
}
.sobre-passos__icone .icone { width: 30px; height: 30px; }
.sobre-passos h3 { margin: 0 0 6px; font-size: 15px; line-height: 1.3; }
.sobre-passos p { margin: 0; font-size: 14px; line-height: 1.5; }

/* As três regras do ranking. */
.sobre-regras {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 26px;
}
.sobre-regra {
  padding: 26px 24px;
  border: 1px solid #eceef1;
  border-radius: var(--raio-card);
  background: var(--branco);
  box-shadow: 0 4px 16px rgba(16, 24, 40, .05);
}
.sobre-regra h2 {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  font-size: 18px;
  line-height: 1.3;
}
.sobre-regra p { margin: 0; font-size: 15px; }
.sobre-regra__icone { width: 40px; height: 40px; }
.sobre-regra__icone--roxo     { color: #6a22c2; }
.sobre-regra__icone--vermelho { color: #d92b45; }
.sobre-regra__icone--azul     { color: #1d7fe0; }

.sobre-lista { display: grid; gap: 9px; }
.sobre-lista li {
  position: relative;
  padding-left: 28px;
  font-size: 14px;
  line-height: 1.5;
}
.sobre-lista li::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1f8b4c url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.3 3.3L17 9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.sobre-lista strong { color: var(--titulo); }

/* Chamada final para o profissional. */
.sobre-cta {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 26px;
  padding: 24px 32px;
  border-radius: var(--raio-painel);
  background: #e9f5f0;
}
.sobre-cta__icone {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--acao);
  color: var(--branco);
}
.sobre-cta__icone .icone { width: 28px; height: 28px; }
.sobre-cta > div { flex: 1 1 auto; }
.sobre-cta h2 { margin: 0 0 4px; font-size: 20px; }
.sobre-cta p { margin: 0; font-size: 15px; }
.sobre-cta__botao { flex: 0 0 auto; height: 48px; padding: 0 22px; border-radius: 10px; background: var(--acao-escura); font-weight: 800; }
.sobre-cta__botao .icone { width: 16px; height: 16px; }

@media (max-width: 1150px) {
  .sobre-ranking { grid-template-columns: 1fr; }
}

@media (max-width: 992px) {
  .sobre-hero { min-height: 280px; background-position: 72% 6%; }
  .sobre-hero h1 { font-size: 46px; }
  .sobre-essencia { grid-template-columns: 1fr; gap: 26px; }
  .sobre-regras { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  /* No celular o texto ocupa a largura toda: um véu teal garante a leitura
     sobre a ponte. */
  .sobre-hero {
    min-height: 0;
    padding: 46px 0 50px;
    background:
      linear-gradient(90deg, rgba(6, 48, 43, .94) 0%, rgba(6, 48, 43, .7) 100%),
      var(--escuro) url("../images/banner-mecanico-em-aracaju.webp") 78% 30% / cover no-repeat;
  }
  .sobre-hero h1 { font-size: 36px; }
  .sobre-hero p { font-size: 16px; }
  .sobre-hero br { display: none; }
  .sobre-essencia h2 { font-size: 24px; }
  .sobre-valores { grid-template-columns: 1fr; gap: 24px; padding: 24px 20px; }
  .sobre-ranking { padding: 26px 20px; }
  .sobre-ranking h2 { font-size: 24px; }
  .sobre-passos { grid-template-columns: 1fr; gap: 26px; }
  .sobre-passos li + li::before { top: -19px; left: calc(50% - 6px); transform: rotate(135deg); }
  .sobre-cta { flex-direction: column; align-items: flex-start; gap: 16px; padding: 26px 22px; }
  .sobre-cta__botao { width: 100%; justify-content: center; }
}

/* --- Painel administrativo ---------------------------------------------- */

/* Mesmo cabeçalho, rodapé e tokens do site público; o que muda é a moldura:
   menu lateral teal-escuro com a contagem de cada fila e a área de trabalho em
   branco. É tela de tarefa, então a cor fica para estado (laranja = tem item
   esperando) e para a ação principal. */

.admin {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  align-items: start;
  gap: 40px;
  padding-top: 36px;
}

/* Menu lateral */
.admin__lateral {
  position: sticky;
  top: calc(var(--topo-altura) + 20px);
  padding: 22px 14px 16px;
  border-radius: var(--raio-painel);
  background: var(--acao-escura);
  color: rgba(255, 255, 255, .78);
}

.admin__lateral-titulo {
  margin: 0 12px 12px;
  color: rgba(255, 255, 255, .6);
  font-size: 13px;
  font-weight: 700;
}

.admin__menu { display: grid; gap: 4px; }
.admin__menu a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 0 12px;
  border-radius: 12px;
  color: rgba(255, 255, 255, .82);
  font-size: 15px;
  font-weight: 700;
  transition: background var(--transicao), color var(--transicao);
}
.admin__menu a:hover { background: rgba(255, 255, 255, .07); color: var(--branco); }
.admin__menu a.ativo { background: rgba(255, 255, 255, .13); color: var(--branco); }
.admin__menu .icone { width: 19px; height: 19px; flex: 0 0 auto; opacity: .85; }
.admin__menu a > span:first-of-type { flex: 1 1 auto; }

.admin__contagem {
  min-width: 26px;
  padding: 2px 8px;
  border-radius: 60px;
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .7);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.admin__contagem--pendente { background: var(--destaque); color: var(--sobre-destaque); }

.admin__novo { margin-top: 18px; height: 48px; font-size: 15px; }

.admin__lateral a:focus-visible {
  outline: 2px solid var(--destaque);
  outline-offset: 2px;
}

/* Cabeçalho de cada tela */
.admin__cabeca {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.admin__cabeca h1 { margin-bottom: 8px; font-size: 32px; letter-spacing: -.02em; }
.admin__cabeca p { max-width: 64ch; margin: 0; font-size: 16px; }
.admin__cabeca .botao-pilula { flex: 0 0 auto; }

/* Visão geral: as filas numa lista só, uma linha por fila. */
.filas {
  overflow: hidden;
  border: 1px solid #eceef1;
  border-radius: var(--raio-card);
  background: var(--branco);
  box-shadow: 0 2px 10px rgba(16, 24, 40, .04);
}

.fila {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
  transition: background var(--transicao);
}
.fila + .fila { border-top: 1px solid #eef0f2; }
.fila:hover { background: #f8faf9; }

.fila__icone {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #eaf3f2;
  color: var(--acao);
}
.fila__icone .icone { width: 24px; height: 24px; }
.fila--pendente .fila__icone { background: #fff1de; color: var(--destaque-texto); }

.fila h2 { margin: 0 0 4px; font-size: 18px; }
.fila h2 a { color: var(--titulo); }
/* O link do título cobre a linha inteira: a linha toda é clicável, mas só
   existe um link para o leitor de tela. */
.fila h2 a::after { content: ""; position: absolute; inset: 0; }
.fila h2 a:focus-visible { outline: none; }
.fila:has(a:focus-visible) { outline: 2px solid var(--destaque-texto); outline-offset: -2px; }
.fila__texto p { margin: 0; font-size: 15px; }

.fila__total { display: flex; flex-direction: column; align-items: flex-end; margin: 0; line-height: 1.1; }
.fila__total strong {
  color: var(--apagado);
  font-size: 30px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.fila__total span { color: var(--apagado); font-size: 13px; font-weight: 600; }
.fila--pendente .fila__total strong { color: var(--destaque-texto); }

.fila__seta { width: 18px; height: 18px; color: #b5bcc4; transition: transform var(--transicao), color var(--transicao); }
.fila:hover .fila__seta { color: var(--acao); transform: translateX(3px); }

.admin__atalho {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 28px;
  padding: 26px 30px;
  border-radius: var(--raio-painel);
  background: #f2f6f5;
}
.admin__atalho > .icone { width: 38px; height: 38px; flex: 0 0 auto; color: var(--acao); }
.admin__atalho > div { flex: 1 1 auto; }
.admin__atalho h2 { margin: 0 0 4px; font-size: 17px; }
.admin__atalho p { margin: 0; font-size: 15px; }
.admin__atalho .botao-pilula { flex: 0 0 auto; }

/* Fila vazia: diz o que aparece aqui, para a tela não parecer quebrada. */
.admin-vazio {
  padding: 56px 24px;
  border: 1px dashed #d6dde3;
  border-radius: var(--raio-card);
  background: #fafbfb;
  text-align: center;
}
.admin-vazio > .icone { width: 46px; height: 46px; margin-bottom: 14px; color: #1f8b4c; }
.admin-vazio h2 { margin-bottom: 6px; font-size: 20px; }
.admin-vazio p { max-width: 46ch; margin: 0 auto 22px; }

/* Etiquetas de estado */
.etiqueta {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 60px;
  background: var(--neutro-pill);
  color: var(--apagado-forte);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
  white-space: nowrap;
}
.etiqueta--erro   { background: #ffe9e6; color: #a32020; }
.etiqueta--alerta { background: #fff1de; color: var(--destaque-texto); }

/* Aprovar / rejeitar: o "sim" é botão teal, o "não" é contorno vermelho
   discreto, para os dois nunca se confundirem no clique rápido. */
.decisao { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.decisao button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: background var(--transicao), border-color var(--transicao), box-shadow var(--transicao);
}
.decisao button:focus-visible { outline: 2px solid var(--destaque-texto); outline-offset: 2px; }
.decisao .icone { width: 16px; height: 16px; }
.decisao__sim { border: 0; background: var(--acao); color: var(--branco); }
.decisao__sim:hover { background: var(--acao-escura); box-shadow: 0 4px 12px rgba(10, 74, 66, .25); }
.decisao__nao { border: 1px solid #ecc9c9; background: var(--branco); color: #a32020; }
.decisao__nao:hover { border-color: #a32020; background: #fff5f4; }

/* Tabela de prestadores */
.admin-tabela {
  overflow-x: auto;
  border: 1px solid #eceef1;
  border-radius: var(--raio-card);
  background: var(--branco);
  box-shadow: 0 2px 10px rgba(16, 24, 40, .04);
}
.admin-tabela table { width: 100%; border-collapse: collapse; font-size: 15px; }
.admin-tabela th {
  padding: 13px 18px;
  border-bottom: 1px solid #eceef1;
  background: #f7f8f9;
  color: var(--apagado-forte);
  font-size: 13px;
  font-weight: 800;
  text-align: left;
}
.admin-tabela td { padding: 18px; border-bottom: 1px solid #eef0f2; vertical-align: middle; }
.admin-tabela tr:last-child td { border-bottom: 0; }
.admin-tabela tbody tr:hover { background: #fbfcfc; }

.admin-tabela__pessoa { display: flex; align-items: center; gap: 14px; }
.admin-tabela__pessoa strong { display: block; color: var(--titulo); font-size: 16px; }
.admin-tabela__pessoa > div:not(.avatar) > span { display: block; font-size: 14px; }
.admin-tabela__pessoa .etiqueta { display: inline-block; margin-top: 6px; }
.admin-tabela__contato { display: grid; gap: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.admin-tabela__contato a { font-size: 14px; word-break: break-all; }
.admin-tabela__acoes .decisao { justify-content: flex-end; flex-wrap: nowrap; }

.avatar--mini { width: 44px; height: 44px; flex: 0 0 auto; }
.avatar--mini .avatar__inicial { border-width: 2px; font-size: 18px; }

/* Avaliações e denúncias: um bloco por item, decisão sempre no mesmo lugar. */
.moderacao {
  margin-bottom: 18px;
  padding: 24px 26px;
  border: 1px solid #eceef1;
  border-radius: var(--raio-card);
  background: var(--branco);
  box-shadow: 0 2px 10px rgba(16, 24, 40, .04);
}

.moderacao__cabeca {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.moderacao__cabeca h2 { margin: 0 0 4px; font-size: 19px; }
.moderacao__cabeca h2 a { color: var(--titulo); }
.moderacao__cabeca h2 a:hover { color: var(--acao); }
.moderacao__cabeca p { margin: 0; font-size: 14px; }
.moderacao__cabeca p strong { color: var(--titulo); }
.moderacao__selos { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

.moderacao__citacao {
  margin: 18px 0 20px;
  padding: 16px 20px;
  border-radius: 12px;
  background: #f5f7f8;
  color: var(--titulo);
  font-size: 16px;
  line-height: 1.6;
}

.moderacao__motivo {
  margin-top: 18px;
  padding: 16px 20px;
  border-radius: 12px;
  background: #fff6ea;
}
.moderacao__motivo strong,
.moderacao__avaliacao-cabeca strong { display: block; margin-bottom: 4px; color: var(--titulo); font-size: 14px; }
.moderacao__motivo strong { color: var(--destaque-texto); }
.moderacao__motivo p { margin: 0; color: var(--titulo); }

.moderacao__avaliacao { margin-top: 18px; }
.moderacao__avaliacao-cabeca { display: flex; align-items: center; gap: 12px; }
.moderacao__avaliacao-cabeca strong { margin: 0; }
.moderacao__avaliacao .moderacao__citacao { margin-top: 8px; }

.moderacao__resposta { margin-top: 20px; padding-top: 16px; border-top: 1px solid #eef0f2; }
.moderacao__resposta summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--acao);
  font-size: 15px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.moderacao__resposta summary::-webkit-details-marker { display: none; }
.moderacao__resposta summary:hover { color: var(--destaque-texto); }
.moderacao__resposta summary .icone { width: 18px; height: 18px; }
.moderacao__resposta[open] summary { margin-bottom: 14px; }
.moderacao__resposta textarea { margin-bottom: 14px; }

/* Formulário de cadastro: grupos com título, dois campos por linha. */
.admin-form {
  padding: 8px 30px 30px;
  border: 1px solid #eceef1;
  border-radius: var(--raio-card);
  background: var(--branco);
  box-shadow: 0 2px 10px rgba(16, 24, 40, .04);
}

.admin-form__grupo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
  min-width: 0;
  margin: 0;
  padding: 24px 0 4px;
  border: 0;
  border-bottom: 1px solid #eef0f2;
}
.admin-form__grupo legend {
  float: left;
  grid-column: 1 / -1;
  width: 100%;
  margin-bottom: 16px;
  padding: 0;
  color: var(--titulo);
  font-size: 18px;
  font-weight: 800;
}
.admin-form__campo { min-width: 0; }
.admin-form__campo--largo { grid-column: 1 / -1; }

.formulario .admin-form__opcao {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 1px solid var(--campo-borda);
  border-radius: var(--raio);
  color: var(--texto);
  font-weight: 400;
  font-size: 15px;
  cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao);
}
.admin-form__opcao:hover { border-color: var(--acao); }
.formulario .admin-form__opcao:has(input:checked) { border-color: var(--acao); background: #f2f8f7; }
.admin-form__opcao input { width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--acao); }
.admin-form__opcao strong { display: block; color: var(--titulo); font-weight: 700; }

.admin-form__rodape { display: flex; align-items: center; gap: 22px; padding-top: 26px; }
.admin-form__rodape .botao { height: 50px; padding: 0 30px; }

/* Alias de .link-simples, mantido para views antigas que ainda usem .link. */
.link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--acao);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}
.link:hover { color: var(--destaque-texto); }

@media (max-width: 992px) {
  .admin { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 24px; }

  /* O menu lateral vira uma faixa horizontal que rola de lado. */
  .admin__lateral {
    position: static;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: var(--raio-card);
  }
  .admin__lateral-titulo { display: none; }
  .admin__lateral nav { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .admin__menu { display: flex; gap: 4px; }
  .admin__menu a { min-height: 42px; white-space: nowrap; }
  .admin__novo { width: auto; margin: 0; height: 42px; padding: 0 18px; white-space: nowrap; }
}

@media (max-width: 768px) {
  .admin__lateral { flex-direction: column; align-items: stretch; }
  .admin__novo { width: 100%; }
  .admin__lateral nav { overflow: visible; }
  .admin__menu { display: grid; grid-template-columns: 1fr 1fr; }
  .admin__menu a { padding: 0 10px; font-size: 14px; }

  .admin__cabeca { flex-direction: column; margin-bottom: 22px; }
  .admin__cabeca h1 { font-size: 26px; }

  .fila { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; padding: 18px; }
  .fila__icone { width: 44px; height: 44px; }
  .fila__seta { display: none; }
  .fila__total strong { font-size: 24px; }

  .admin__atalho { flex-direction: column; align-items: flex-start; padding: 24px 22px; border-radius: var(--raio-card); }

  /* Tabela vira uma ficha por prestador, cada valor com o nome da coluna. */
  .admin-tabela { overflow: visible; border: 0; background: none; box-shadow: none; }
  .admin-tabela thead { display: none; }
  .admin-tabela table, .admin-tabela tbody, .admin-tabela tr, .admin-tabela td { display: block; }
  .admin-tabela tr {
    margin-bottom: 14px;
    padding: 6px 18px 18px;
    border: 1px solid #eceef1;
    border-radius: var(--raio-card);
    background: var(--branco);
  }
  .admin-tabela tbody tr:hover { background: var(--branco); }
  .admin-tabela td { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f0f2f4; }
  .admin-tabela td[data-rotulo]::before {
    content: attr(data-rotulo);
    flex: 0 0 84px;
    color: var(--apagado);
    font-size: 13px;
    font-weight: 700;
  }
  .admin-tabela td:first-child { padding-top: 14px; }
  .admin-tabela td:first-child::before { display: none; }
  .admin-tabela tr td:last-child { border-bottom: 0; padding-bottom: 0; }
  .admin-tabela__acoes .decisao { width: 100%; }
  .admin-tabela__acoes .decisao button { flex: 1 1 0; justify-content: center; }

  .moderacao { padding: 20px 18px; }
  .moderacao__cabeca { flex-direction: column; }

  .admin-form { padding: 4px 18px 24px; }
  .admin-form__grupo { grid-template-columns: 1fr; }
  .admin-form__rodape { flex-direction: column; align-items: stretch; text-align: center; }
}

/* --- Contas: cliente, profissional e master ----------------------------- */

/* As três áreas logadas usam a moldura do admin (.admin, menu lateral
   teal-escuro). O que vem aqui são as peças que só existem nelas e as telas
   de entrada: cadastro, login e senha. */

/* Botões de formulário com aparência de link-botão. */
button.botao-wa { border: 0; }
button.botao-perfil { padding: 0 18px; background: var(--branco); }
.botao-wa--baixo { height: 40px; padding: 0 16px; font-size: 14px; border-radius: 10px; }
.cartao__form-wa { display: contents; }

/* Quem está logado, no alto do menu lateral. */
.admin__quem {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 6px 18px;
  padding: 0 6px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-size: 13px;
  line-height: 1.35;
}
.admin__quem strong { display: block; color: var(--branco); font-size: 16px; }
.admin__quem-inicial {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--destaque);
  color: var(--sobre-destaque);
  font-size: 18px;
  font-weight: 800;
}
.admin__lateral nav + .admin__lateral-titulo { margin-top: 22px; }

.admin__volta { margin: 0 0 10px; font-size: 14px; font-weight: 700; }
.admin__volta a { display: inline-flex; align-items: center; gap: 6px; color: var(--apagado-forte); }
.admin__volta a:hover { color: var(--acao); }
.admin__volta .icone { width: 16px; height: 16px; }
.admin__cabeca p .etiqueta { margin-right: 6px; vertical-align: 1px; }

/* Etiquetas de estado que faltavam. */
.etiqueta--ok       { background: #e3f0ef; color: var(--acao); }
.etiqueta--positivo { background: #e3f5e8; color: #17763f; }
.etiqueta--tipo-admin     { background: var(--acao-escura); color: var(--branco); }
.etiqueta--tipo-prestador { background: #fff1de; color: var(--destaque-texto); }
.etiqueta--tipo-usuario   { background: #e8eef7; color: var(--link-azul); }

/* --- Entrada: cadastro, login, senha --- */

.conta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  max-width: 1000px;
  margin: 48px auto 0;
  overflow: hidden;
  border: 1px solid #eceef1;
  border-radius: var(--raio-painel);
  background: var(--branco);
  box-shadow: 0 10px 40px rgba(16, 24, 40, .07);
}
.conta--simples { grid-template-columns: minmax(0, 1fr); max-width: 480px; }

.conta__painel {
  position: relative;
  padding: 46px 42px;
  background:
    radial-gradient(120% 70% at 0% 100%, rgba(247, 148, 29, .22), transparent 60%),
    var(--acao-escura);
  color: rgba(255, 255, 255, .82);
}
.conta__rotulo {
  margin: 0 0 12px;
  color: var(--destaque);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.conta__painel h2 { margin: 0 0 28px; color: var(--branco); font-size: 30px; line-height: 1.2; letter-spacing: -.02em; }
.conta__vantagens { display: grid; gap: 20px; }
.conta__vantagens li { display: flex; gap: 14px; font-size: 16px; line-height: 1.5; }
.conta__vantagens .icone {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  padding: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: var(--destaque);
}
.conta__gratis {
  display: inline-block;
  margin: 32px 0 0;
  padding: 6px 14px;
  border-radius: 60px;
  background: rgba(255, 255, 255, .1);
  color: var(--branco);
  font-size: 14px;
  font-weight: 700;
}

.conta__form { padding: 42px 44px; }
.conta__form h1 { margin-bottom: 18px; font-size: 30px; letter-spacing: -.02em; }
.conta__intro { margin: -8px 0 24px; }
.conta__form--centro { text-align: center; }
.conta__selo {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #e3f5e8;
  color: #17763f;
}
.conta__selo .icone { width: 30px; height: 30px; }

.conta__rotulo-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.conta__rotulo-linha a { margin-bottom: 6px; font-size: 14px; font-weight: 700; }

.formulario .conta__aceite {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 2px 0 22px;
  color: var(--texto);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}
.conta__aceite input { width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--acao); }

.conta__form .botao { height: 52px; font-size: 16px; }
.conta__troca { margin: 22px 0 0; text-align: center; font-size: 15px; }

.conta__novos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid #eef0f2;
}
.conta__novos p { grid-column: 1 / -1; margin: 0 0 2px; text-align: center; font-size: 15px; }

/* Seletor de tipo de conta: duas abas que recarregam a página, sem JS. */
.seletor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 26px;
  padding: 4px;
  border-radius: 14px;
  background: #f1f4f4;
}
.seletor a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  border-radius: 10px;
  color: var(--apagado-forte);
  font-size: 15px;
  font-weight: 700;
  transition: background var(--transicao), color var(--transicao), box-shadow var(--transicao);
}
.seletor a:hover { color: var(--acao); }
.seletor a.ativo { background: var(--branco); color: var(--acao); box-shadow: 0 1px 6px rgba(0, 0, 0, .09); }
.seletor .icone { width: 18px; height: 18px; }

/* Faixa de e-mail não confirmado, no topo das áreas. */
.faixa-confirmar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding: 16px 20px;
  border: 1px solid #f5d6a8;
  border-radius: var(--raio-card);
  background: #fff8ee;
}
.faixa-confirmar > .icone { width: 26px; height: 26px; flex: 0 0 auto; color: var(--destaque-texto); }
.faixa-confirmar p { flex: 1 1 auto; margin: 0; font-size: 15px; }
.faixa-confirmar strong { color: var(--titulo); }
.faixa-confirmar .botao-perfil { height: 40px; white-space: nowrap; }

/* --- Peças das áreas --- */

/* Números de resumo no topo da visão geral. */
.numeros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}
.numeros--quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.numeros li {
  padding: 20px 22px;
  border: 1px solid #eceef1;
  border-radius: var(--raio-card);
  background: var(--branco);
}
.numeros strong {
  display: block;
  color: var(--titulo);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.numeros span { color: var(--apagado); font-size: 14px; font-weight: 600; }
.numeros li.numeros__alerta { border-color: #f5d6a8; background: #fff8ee; }
.numeros__alerta strong { color: var(--destaque-texto); }

.painel-bloco {
  margin-bottom: 26px;
  padding: 22px 24px;
  border: 1px solid #eceef1;
  border-radius: var(--raio-card);
  background: var(--branco);
}
.painel-bloco--destaque { border-color: #f5d6a8; background: #fffaf3; }
.painel-bloco > .pedido:last-child, .painel-bloco > .moderacao:last-child { margin-bottom: 0; }
.painel-bloco .moderacao { box-shadow: none; }
.painel-bloco__cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.painel-bloco__cabeca h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 19px; }
.painel-bloco__cabeca h2 .icone { width: 22px; height: 22px; color: var(--destaque-texto); }
.painel-bloco__cabeca a { flex: 0 0 auto; font-size: 14px; font-weight: 700; }
.painel-bloco__vazio { margin: 0; font-size: 15px; }

.painel-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* Lista de "faça isto": avaliar, responder pedido. */
.lista-avaliar li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid #f1e3cf;
}
.lista-avaliar li:first-child { border-top: 0; padding-top: 0; }
.lista-avaliar li:last-child { padding-bottom: 0; }
.lista-avaliar strong { display: block; color: var(--titulo); font-size: 16px; }
.lista-avaliar span { font-size: 14px; }
.lista-avaliar .botao { flex: 0 0 auto; height: 42px; padding: 0 20px; font-size: 15px; }

.admin-vazio--boas-vindas { margin-bottom: 26px; border-style: solid; border-color: #eceef1; background: #f6faf9; }
.admin-vazio--boas-vindas > .icone { color: var(--destaque); }

/* Cartão compacto de profissional. */
.mini-lista { display: grid; gap: 4px; }
.mini-lista--grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
.mini-prestador {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 -10px;
  padding: 10px;
  border-radius: 12px;
  transition: background var(--transicao);
}
.mini-prestador:hover { background: #f5f8f8; }
.mini-prestador__texto { flex: 1 1 auto; min-width: 0; }
.mini-prestador h3 { margin: 0; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.mini-prestador h3 a { color: var(--titulo); }
.mini-prestador h3 a::after { content: ""; position: absolute; inset: 0; }
.mini-prestador p { margin: 0; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.mini-prestador__nota {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: 60px;
  background: var(--positivo);
  color: var(--branco);
  font-size: 13px;
  font-weight: 800;
}
.mini-prestador__nota .icone { width: 13px; height: 13px; color: var(--ouro); }
.mini-prestador__nota--novo { background: var(--neutro-pill); color: var(--apagado-forte); }

/* Contratação vista pelo cliente. */
.pedido {
  margin-bottom: 14px;
  padding: 20px 22px;
  border: 1px solid #eceef1;
  border-radius: var(--raio-card);
  background: var(--branco);
}
.painel-bloco .pedido { border-color: #eef0f2; }
.pedido__quem { display: flex; align-items: center; gap: 14px; }
.pedido__quem > div:not(.avatar) { flex: 1 1 auto; min-width: 0; }
.pedido__quem h3 { margin: 0 0 2px; font-size: 17px; }
.pedido__quem h3 a { color: var(--titulo); }
.pedido__quem h3 a:hover { color: var(--acao); }
.pedido__quem p { margin: 0; font-size: 14px; }
.pedido__descricao {
  margin: 14px 0 0;
  padding: 12px 16px;
  border-radius: 10px;
  background: #f5f7f8;
  color: var(--titulo);
  font-size: 15px;
}
.pedido__dica { margin: 12px 0 0; color: var(--apagado); font-size: 14px; }
.pedido__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.pedido__acoes .botao { height: 42px; padding: 0 20px; font-size: 15px; }
.pedido__acoes .botao-perfil { height: 40px; padding: 0 16px; font-size: 14px; }
.pedido__avaliado {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #17763f;
  font-size: 14px;
  font-weight: 700;
}
.pedido__avaliado .icone { width: 18px; height: 18px; }
.moderacao .pedido__avaliado { margin-bottom: 16px; }
.moderacao .pedido__dica { margin: 0 0 16px; }

.pedido__contato { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0 0 18px; }
.pedido__contato li { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.pedido__contato .icone { width: 18px; height: 18px; color: var(--whatsapp-texto); }

.decisao .decisao__sim--leve { background: #e3f0ef; color: var(--acao); }
.decisao .decisao__sim--leve:hover { background: #d3e8e6; box-shadow: none; }

/* Abas de filtro, com a contagem ao lado do rótulo. */
.abas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}
.abas a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid #e3e7ea;
  border-radius: 60px;
  background: var(--branco);
  color: var(--apagado-forte);
  font-size: 14px;
  font-weight: 700;
  transition: border-color var(--transicao), color var(--transicao);
}
.abas a:hover { border-color: var(--acao); color: var(--acao); }
.abas a.ativo { border-color: var(--acao); background: var(--acao); color: var(--branco); }
.abas a span {
  min-width: 22px;
  padding: 0 6px;
  border-radius: 60px;
  background: var(--neutro-pill);
  color: var(--apagado-forte);
  font-size: 12px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.abas a.ativo span { background: rgba(255, 255, 255, .18); color: var(--branco); }

.filtro-linha { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0 20px; }
.busca-admin { display: flex; margin-bottom: 20px; }
.busca-admin input {
  width: 260px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid #e3e7ea;
  border-right: 0;
  border-radius: 60px 0 0 60px;
  background: var(--branco);
  font: inherit;
  font-size: 14px;
}
.busca-admin input:focus { outline: none; border-color: var(--acao); }
.busca-admin button {
  display: grid;
  place-items: center;
  width: 46px;
  height: 40px;
  border: 0;
  border-radius: 0 60px 60px 0;
  background: var(--acao);
  color: var(--branco);
}
.busca-admin .icone { width: 17px; height: 17px; }

.admin-tabela__numero { color: var(--titulo); font-weight: 800; white-space: nowrap; }
.admin-tabela__numero small { color: var(--apagado); font-weight: 600; }
.admin-tabela__pequeno { color: var(--apagado); font-size: 14px; }
td > .admin-tabela__pequeno { display: block; }
.admin-tabela__titulo { display: block; color: var(--titulo); }
.admin-tabela__inicial {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #eaf0f0;
  color: var(--acao);
  font-weight: 800;
}
.admin-tabela__inativo td { opacity: .62; }
.admin-tabela__pessoa .etiqueta + .etiqueta { margin-left: 4px; }
.admin-tabela__acoes { text-align: right; }

/* Favoritos: cartão completo com o "tirar" logo abaixo. */
.lista-favoritos { display: grid; gap: 14px; margin-bottom: 30px; }
.lista-favoritos__item .cartao { margin-bottom: 0; }
.lista-favoritos__tirar { margin: 8px 0 0 4px; font-size: 14px; }

/* Estado de uma etapa: perfil em análise, no ar, fora do ar. */
.estado {
  display: flex;
  gap: 18px;
  margin-bottom: 24px;
  padding: 22px 24px;
  border-radius: var(--raio-card);
  background: #f2f6f5;
}
.estado > .icone { width: 30px; height: 30px; flex: 0 0 auto; color: var(--acao); }
.estado h2 { margin: 0 0 4px; font-size: 18px; }
.estado p { margin: 0; font-size: 15px; }
.estado--alerta { background: #fff6ea; }
.estado--alerta > .icone { color: var(--destaque-texto); }
.estado--erro { background: #fff1ef; }
.estado--erro > .icone { color: #a32020; }
.estado--ok { background: #ecf7ef; }
.estado--ok > .icone { color: #17763f; }

/* Primeiros passos do profissional sem perfil. */
.comecar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.comecar__opcao {
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  border: 1px solid #eceef1;
  border-radius: var(--raio-painel);
  background: var(--branco);
  color: var(--texto);
}
.comecar__opcao > .icone {
  width: 54px;
  height: 54px;
  margin-bottom: 18px;
  padding: 14px;
  border-radius: 50%;
  background: #eaf3f2;
  color: var(--acao);
}
.comecar__opcao h2 { margin: 0 0 8px; font-size: 21px; }
.comecar__opcao p { margin: 0 0 22px; font-size: 15px; }
.comecar__opcao--principal {
  border-color: transparent;
  background: var(--acao-escura);
  color: rgba(255, 255, 255, .8);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.comecar__opcao--principal:hover { color: rgba(255, 255, 255, .8); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(7, 51, 47, .25); }
.comecar__opcao--principal h2 { color: var(--branco); }
.comecar__opcao--principal > .icone { background: var(--destaque); color: var(--sobre-destaque); }
.comecar__acao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  color: var(--destaque);
  font-weight: 800;
}
.comecar__acao .icone { width: 18px; height: 18px; transition: transform var(--transicao); }
.comecar__opcao--principal:hover .comecar__acao .icone { transform: translateX(4px); }
.comecar__busca { display: flex; gap: 8px; margin-top: auto; }
.comecar__busca input {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--campo-borda);
  border-radius: var(--raio);
  font: inherit;
}
.comecar__busca input:focus { outline: none; border-color: var(--destaque-texto); }
.comecar__busca .botao { height: 46px; padding: 0 18px; }

/* Completude do perfil. */
.progresso { height: 10px; margin-bottom: 18px; overflow: hidden; border-radius: 60px; background: #edf0f2; }
.progresso span { display: block; height: 100%; border-radius: 60px; background: linear-gradient(90deg, var(--acao), #1c8d7f); }
.checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.checklist li { display: flex; align-items: center; gap: 10px; color: var(--titulo); font-size: 15px; font-weight: 600; }
.checklist .icone { width: 18px; height: 18px; flex: 0 0 auto; color: var(--destaque-texto); }
.checklist .feito { color: var(--apagado); font-weight: 400; text-decoration: line-through; }
.checklist .feito .icone { color: #20a052; }

.selo-progresso {
  flex: 0 0 auto;
  margin: 0;
  padding: 8px 16px;
  border-radius: 60px;
  background: #eaf3f2;
  color: var(--acao);
  font-size: 14px;
  font-weight: 700;
}
.selo-progresso strong { font-size: 17px; }

/* Campo de foto do perfil. */
.campo-foto { display: flex; align-items: center; gap: 26px; margin-bottom: 20px; }
.campo-foto__previa {
  width: 120px;
  height: 120px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 4px solid var(--branco);
  border-radius: 50%;
  box-shadow: 0 0 0 1px #e3e7ea, 0 6px 16px rgba(0, 0, 0, .08);
}
.campo-foto__previa img { width: 100%; height: 100%; object-fit: cover; }
.campo-foto__previa span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--branco);
  font-size: 46px;
  font-weight: 800;
}
.campo-foto__texto { flex: 1 1 auto; min-width: 0; }
.campo-foto__ajuda { margin: 0 0 12px; font-size: 14px; }
.campo-foto__arquivo { max-width: 100%; font-size: 14px; }
.campo-foto__arquivo::file-selector-button {
  margin-right: 12px;
  padding: 9px 16px;
  border: 1.5px solid #c9d6d4;
  border-radius: 10px;
  background: var(--branco);
  color: var(--acao);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.campo-foto__arquivo::file-selector-button:hover { border-color: var(--acao); background: #f2f8f7; }
.formulario .campo-foto__remover {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  color: #a32020;
  font-size: 14px;
  font-weight: 600;
}
.campo-foto__remover input { accent-color: #a32020; }

.admin-form__nota {
  display: flex;
  gap: 10px;
  margin: 0 0 20px;
  padding: 12px 16px;
  border-radius: var(--raio);
  background: #f2f6f5;
  font-size: 14px;
}
.admin-form__nota .icone { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; color: var(--acao); }
.admin-form--seguinte { margin-top: 24px; }

/* Perfil que o profissional quer assumir. */
.perfil-alvo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding: 16px 20px;
  border: 1px solid #eceef1;
  border-radius: var(--raio-card);
  background: var(--branco);
}
.perfil-alvo > div:not(.avatar) { flex: 1 1 auto; }
.perfil-alvo strong { display: block; color: var(--titulo); font-size: 17px; }
.perfil-alvo span { font-size: 14px; }
.perfil-alvo > a { font-size: 14px; font-weight: 700; }

/* Reivindicação: o contato do perfil ao lado do contato de quem pede. */
.comparar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.comparar > div {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #f5f7f8;
  font-size: 14px;
}
.comparar strong { color: var(--titulo); }

.moderacao__motivo--resposta { background: #eef6f5; }
.moderacao__motivo.moderacao__motivo--resposta strong { color: var(--acao); }

/* --- Perfil público: contato e avaliação --- */

/* Contato fechado para quem não entrou. */
.caixa-contato__trava { padding: 4px 25px 25px; text-align: center; }
.caixa-contato__trava > .icone {
  width: 52px;
  height: 52px;
  margin: 6px auto 12px;
  padding: 14px;
  border-radius: 50%;
  background: #eaf3f2;
  color: var(--acao);
}
.caixa-contato__trava p { margin: 0 0 18px; font-size: 15px; line-height: 1.55; }
.caixa-contato__trava strong { display: block; margin-bottom: 4px; color: var(--titulo); }
.caixa-contato__trava .botao { height: 50px; }
.caixa-contato__entrar { display: flex; margin-top: 10px; }

.caixa-contato__cta { display: grid; gap: 12px; }
.caixa-contato__andamento {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 2px 10px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: #ecf7ef;
  color: #17763f;
  font-size: 14px;
  font-weight: 600;
}
.caixa-contato__andamento .icone { width: 18px; height: 18px; margin-top: 1px; }
.caixa-contato__andamento a { grid-column: 2; }
.caixa-contato__andamento a { font-weight: 800; }

.caixa-contato__orcamento { border: 1px solid var(--campo-borda); border-radius: 10px; }
.caixa-contato__orcamento summary {
  padding: 13px 16px;
  color: var(--acao);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.caixa-contato__orcamento summary::-webkit-details-marker { display: none; }
.caixa-contato__orcamento summary::after { content: " +"; }
.caixa-contato__orcamento[open] summary::after { content: " −"; }
.caixa-contato__orcamento form { padding: 0 16px 16px; }
.caixa-contato__orcamento label { font-size: 14px; }
.caixa-contato__orcamento textarea { margin-bottom: 12px; font-size: 15px; }

.botao-favorito {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  border: 1.5px solid #e3d3d6;
  border-radius: 10px;
  background: var(--branco);
  color: #a32b52;
  font-weight: 700;
  transition: background var(--transicao), border-color var(--transicao);
}
.botao-favorito:hover { border-color: #a32b52; background: #fff5f7; }
.botao-favorito .icone { width: 18px; height: 18px; }
.botao-favorito--ativo { border-color: #a32b52; background: #fff0f4; }
.botao-favorito--ativo .icone { fill: currentColor; }

.caixa-dono {
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px dashed #d6dde3;
  border-radius: var(--raio-card);
  background: #fafbfb;
  font-size: 14px;
}
.caixa-dono p { margin: 0 0 12px; }
.caixa-dono strong { color: var(--titulo); }
.caixa-dono .botao-perfil { display: flex; height: 42px; }

.form-avaliar__selo,
.form-avaliar__aviso {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}
.form-avaliar__selo { background: #ecf7ef; color: #17763f; }
.form-avaliar__selo .icone { width: 18px; height: 18px; flex: 0 0 auto; }
.form-avaliar__aviso { background: var(--fundo); color: var(--apagado-forte); font-weight: 400; }

/* --- Responsivo das contas --- */

@media (max-width: 992px) {
  .admin__quem { display: none; }
  .admin__lateral nav + .admin__lateral-titulo { margin-top: 0; }
  .numeros--quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .painel-duplo, .comecar { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .conta { grid-template-columns: minmax(0, 1fr); margin-top: 24px; border-radius: var(--raio-card); }
  .conta__painel { order: 2; padding: 30px 24px; }
  .conta__painel h2 { font-size: 24px; }
  .conta__form { padding: 30px 22px; }
  .conta__form h1 { font-size: 26px; }
  .conta__novos { grid-template-columns: minmax(0, 1fr); }

  .faixa-confirmar { flex-wrap: wrap; }
  .faixa-confirmar form, .faixa-confirmar .botao-perfil { width: 100%; }

  .numeros { gap: 8px; }
  .numeros li { padding: 14px; }
  .numeros strong { font-size: 24px; }
  .numeros span { font-size: 12px; }

  .painel-bloco { padding: 18px; }
  .lista-avaliar li { flex-direction: column; align-items: stretch; }
  .lista-avaliar .botao { width: 100%; }
  .mini-lista--grade, .checklist, .comparar { grid-template-columns: minmax(0, 1fr); }

  .pedido { padding: 18px; }
  .pedido__acoes form { display: flex; flex: 1 1 100%; gap: 10px; }
  .pedido__acoes .decisao button, .pedido__acoes .botao-wa { flex: 1 1 0; justify-content: center; }

  .filtro-linha { display: block; }
  .abas { flex-wrap: nowrap; margin-right: -16px; padding-right: 16px; overflow-x: auto; scrollbar-width: none; }
  .abas a { flex: 0 0 auto; }
  .busca-admin, .busca-admin input { width: 100%; }
  .admin-tabela__acoes { text-align: left; }

  .campo-foto { flex-direction: column; align-items: flex-start; gap: 16px; }
  .estado { gap: 14px; padding: 18px; }
  .comecar__opcao { padding: 24px 22px; }
}

@media (max-width: 768px) {
  /* Nove itens no menu do master: a grade não pode crescer com o rótulo. */
  .admin__menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin__menu a > span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 768px) {
  /* No celular a etiqueta desce para baixo do nome, em vez de espremê-lo. */
  .pedido__quem { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 6px 12px; }
  .pedido__quem .etiqueta { grid-column: 2; justify-self: start; }
}

/* --- Página 404 --------------------------------------------------------- */

/* O "0" do 404 é o pino da marca: o portal é um mapa de Aracaju, e a página
   diz "esse ponto do mapa não existe". */
.erro-404 {
  padding: 70px 0 60px;
  background:
    radial-gradient(60% 80% at 85% 40%, rgba(247, 148, 29, .10), transparent 70%),
    linear-gradient(180deg, #f2f7f6 0%, var(--branco) 100%);
}
.erro-404__interno {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: 40px;
}
.erro-404__rotulo {
  margin: 0 0 12px;
  color: var(--destaque-texto);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.erro-404 h1 { margin-bottom: 16px; font-size: 46px; line-height: 1.1; letter-spacing: -.02em; }
.erro-404__texto > p { max-width: 52ch; font-size: 18px; }

.erro-404__busca {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 560px;
  margin: 30px 0 22px;
  padding: 7px 7px 7px 20px;
  border: 1px solid #e3e7ea;
  border-radius: 60px;
  background: var(--branco);
  box-shadow: 0 8px 26px rgba(16, 24, 40, .08);
}
.erro-404__busca > .icone { width: 20px; height: 20px; flex: 0 0 auto; color: var(--apagado); }
.erro-404__busca input {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  border: 0;
  background: none;
  color: var(--titulo);
  font: inherit;
  font-size: 16px;
}
.erro-404__busca input:focus { outline: none; }
.erro-404__busca:focus-within { border-color: var(--destaque-texto); }
.erro-404__busca .botao { height: 46px; padding: 0 26px; border-radius: 60px; }

.erro-404__links { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0; }
.erro-404__links a { font-weight: 700; }

.erro-404__arte {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--acao-escura);
  font-size: clamp(110px, 15vw, 210px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  user-select: none;
}
.erro-404__pino {
  display: grid;
  place-items: center;
  width: .78em;
  height: .78em;
  border-radius: 50%;
  background: var(--acao-escura);
  box-shadow: inset 0 0 0 .1em #0d5d55;
}
.erro-404__pino .icone {
  width: .42em;
  height: .42em;
  color: var(--destaque);
  animation: pino-pula 2.6s ease-in-out infinite;
}
@keyframes pino-pula {
  0%, 60%, 100% { transform: translateY(0); }
  70%           { transform: translateY(-14%); }
  80%           { transform: translateY(0); }
  88%           { transform: translateY(-5%); }
}

.erro-404__categorias { padding-top: 10px; }
.erro-404__categorias h2 { margin-bottom: 16px; font-size: 20px; }
.erro-404__categorias ul { display: flex; flex-wrap: wrap; gap: 10px; }
.erro-404__categorias a {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 18px;
  border: 1px solid #e3e7ea;
  border-radius: 60px;
  background: var(--branco);
  color: var(--titulo);
  font-size: 15px;
  font-weight: 700;
  transition: border-color var(--transicao), color var(--transicao);
}
.erro-404__categorias a:hover { border-color: var(--acao); color: var(--acao); }

@media (prefers-reduced-motion: reduce) {
  .erro-404__pino .icone { animation: none; }
}

@media (max-width: 768px) {
  .erro-404 { padding: 40px 0 36px; }
  .erro-404__interno { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .erro-404__arte { order: -1; justify-content: flex-start; font-size: 96px; }
  .erro-404 h1 { font-size: 32px; }
  .erro-404__texto > p { font-size: 16px; }
  .erro-404__busca { padding-left: 16px; }
  .erro-404__busca .botao { padding: 0 18px; }
}