/* =====================================================================
   ConectaSign — folha de estilo única
   Sem framework: tokens + componentes. Mantém o site leve e com cara própria.
   ===================================================================== */

:root{
  color-scheme: light;

  /* marca — laranja de sinalização sobre grafite: cara de obra e fachada,
     em vez do azul genérico de painel SaaS */
  --marca:        #e2571f;
  --marca-escura: #b8410f;
  --marca-clara:  #fff2ec;
  --marca-linha:  #ffd7c4;

  --tinta:      #15181d;
  --tinta-media:#4b5563;
  --tinta-fraca:#8b93a1;
  --linha:      #e6e8ec;
  --linha-suave:#f2f4f7;
  --papel:      #ffffff;
  --fundo:      #f8f9fb;
  --grafite:    #1c2330;

  --ok:      #15803d;
  --ok-fundo:#e9f7ef;
  --alerta:  #b45309;
  --erro:    #b91c1c;
  --erro-fundo:#fdecec;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --sombra:      0 1px 2px rgba(16,24,40,.05);
  --sombra-media:0 6px 20px -6px rgba(16,24,40,.14);
  --largura: 1120px;
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--fundo);
  color:var(--tinta);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;}
a{color:var(--marca-escura);text-decoration:none;}
a:hover{text-decoration:underline;}

.container{max-width:var(--largura);margin:0 auto;padding:0 22px;}

/* ---------------------------------------------------------------- topo */
.topo{
  background:var(--papel);
  border-bottom:1px solid var(--linha);
  position:sticky;top:0;z-index:50;
}
.topo-interno{
  display:flex;align-items:center;gap:26px;
  height:66px;
}
.marca{
  display:flex;align-items:center;gap:9px;
  font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--tinta);
  text-decoration:none;flex:none;
}
.marca:hover{text-decoration:none;}
.marca-sinal{
  width:26px;height:26px;border-radius:7px;flex:none;
  background:var(--marca);
  display:grid;place-items:center;
  color:#fff;font-size:14px;font-weight:800;
}
.marca em{font-style:normal;color:var(--marca);}

.menu{display:flex;align-items:center;gap:4px;flex:1;}
.menu a{
  font-size:14px;font-weight:600;color:var(--tinta-media);
  padding:8px 12px;border-radius:var(--r-sm);text-decoration:none;transition:.14s;
}
.menu a:hover{background:var(--linha-suave);color:var(--tinta);text-decoration:none;}
.menu a.ativo{color:var(--marca-escura);background:var(--marca-clara);}

.topo-acoes{display:flex;align-items:center;gap:9px;flex:none;}

.menu-btn{
  display:none;background:none;border:1px solid var(--linha);
  border-radius:var(--r-sm);padding:7px 10px;cursor:pointer;font-size:16px;
}

/* --------------------------------------------------------------- botões */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:inherit;font-size:14px;font-weight:600;line-height:1;
  padding:11px 18px;border-radius:var(--r-sm);border:1px solid transparent;
  cursor:pointer;transition:.14s;text-decoration:none;white-space:nowrap;
}
.btn:hover{text-decoration:none;}
.btn-principal{background:var(--marca);color:#fff;}
.btn-principal:hover{background:var(--marca-escura);color:#fff;}
.btn-contorno{background:var(--papel);border-color:var(--linha);color:var(--tinta);}
.btn-contorno:hover{border-color:var(--marca);color:var(--marca-escura);}
.btn-fantasma{background:transparent;color:var(--tinta-media);}
.btn-fantasma:hover{background:var(--linha-suave);color:var(--tinta);}
.btn-grande{padding:14px 24px;font-size:15px;}

/* ----------------------------------------------------------------- hero */
.hero{
  background:var(--grafite);
  color:#fff;
  padding:76px 0 84px;
  position:relative;overflow:hidden;
}
/* faixa diagonal discreta, lembrando sinalização */
.hero::after{
  content:"";position:absolute;inset:0;opacity:.06;pointer-events:none;
  background:repeating-linear-gradient(-45deg,#fff 0 2px,transparent 2px 22px);
}
.hero-interno{position:relative;z-index:1;max-width:720px;}
.hero .selo{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:rgba(226,87,31,.16);color:#ffb694;
  border:1px solid rgba(226,87,31,.3);
  padding:5px 12px;border-radius:100px;margin-bottom:20px;
}
.hero h1{
  margin:0 0 16px;font-size:42px;line-height:1.14;font-weight:800;letter-spacing:-.03em;
}
.hero h1 em{font-style:normal;color:#ff8a5c;}
.hero p{margin:0 0 28px;font-size:17px;line-height:1.6;color:#b9c0cc;max-width:600px;}
.hero-botoes{display:flex;gap:11px;flex-wrap:wrap;}

/* --------------------------------------------------------------- seções */
.secao{padding:64px 0;}
.secao-clara{background:var(--papel);border-block:1px solid var(--linha);}
.secao-topo{max-width:640px;margin-bottom:34px;}
.secao-etiqueta{
  font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--marca);margin:0 0 8px;
}
.secao h2{margin:0 0 10px;font-size:27px;font-weight:700;letter-spacing:-.02em;}
.secao-topo p{margin:0;color:var(--tinta-media);font-size:15.5px;}

/* ----------------------------------------------------------- como funciona */
.passos{
  display:grid;grid-template-columns:repeat(5,1fr);gap:14px;counter-reset:passo;
}
.passo{
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--r-md);
  padding:20px 16px;position:relative;
}
.passo-num{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--marca-clara);color:var(--marca-escura);
  font-weight:800;font-size:14px;margin-bottom:12px;
}
.passo h3{margin:0 0 5px;font-size:14.5px;font-weight:700;}
.passo p{margin:0;font-size:13px;color:var(--tinta-media);line-height:1.5;}

/* -------------------------------------------------------- especialidades */
.grupos{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px;}
.grupo{
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--r-md);
  padding:20px;transition:.15s;
}
.grupo:hover{border-color:var(--marca-linha);box-shadow:var(--sombra-media);}
.grupo h3{
  margin:0 0 12px;font-size:15px;font-weight:700;
  display:flex;align-items:center;gap:8px;
}
.grupo h3 .ponto{width:8px;height:8px;border-radius:50%;background:var(--marca);flex:none;}
.grupo ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px;}
.grupo li a{
  display:inline-block;font-size:12.5px;font-weight:500;
  background:var(--linha-suave);color:var(--tinta-media);
  border:1px solid transparent;
  padding:4px 10px;border-radius:100px;text-decoration:none;transition:.13s;
}
.grupo li a:hover{
  background:var(--marca-clara);color:var(--marca-escura);
  border-color:var(--marca-linha);text-decoration:none;
}
.grupo .mais{font-size:12px;color:var(--tinta-fraca);align-self:center;padding-left:2px;}

/* ------------------------------------------------------------- vantagens */
.vantagens{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;}
.vantagem{display:flex;gap:13px;align-items:flex-start;}
.vantagem .ico{
  width:38px;height:38px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--marca-clara);font-size:18px;
}
.vantagem h3{margin:0 0 3px;font-size:14.5px;font-weight:700;}
.vantagem p{margin:0;font-size:13.5px;color:var(--tinta-media);line-height:1.55;}

/* --------------------------------------------------- bloco de dores (o problema) */
.problema-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;
}
.problema-texto .secao-etiqueta{margin-bottom:12px;}
.problema-texto h2{margin:0 0 12px;}
.problema-sub{margin:0 0 22px;color:var(--tinta-media);font-size:15.5px;line-height:1.6;max-width:440px;}

/* a lista vira um painel único e limpo, com linhas divididas */
.dores{
  list-style:none;margin:0;padding:0;
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--r-lg);
  box-shadow:var(--sombra-media);overflow:hidden;
}
.dor{
  display:flex;align-items:center;gap:14px;
  padding:16px 20px;font-size:15px;font-weight:600;color:var(--tinta);
  border-bottom:1px solid var(--linha-suave);
}
.dor:last-child{border-bottom:none;}
.dor-ico{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:var(--erro-fundo);color:var(--erro);border:1px solid #f6d4d4;
}
.dor-fecho{
  display:inline-flex;align-items:center;gap:10px;margin:0;
  padding:14px 20px;background:var(--grafite);color:#fff;border-radius:var(--r-md);
  font-size:15.5px;font-weight:600;box-shadow:var(--sombra-media);
}
.dor-fecho strong{color:#fff;font-weight:800;}
.dor-fecho em{font-style:normal;color:#ff8a5c;font-weight:800;}
.dor-fecho-ico{flex:none;display:inline-flex;color:#4ade80;}
@media (max-width:820px){
  .problema-grid{grid-template-columns:1fr;gap:26px;}
  .problema-sub{max-width:none;}
}

/* ------------------------------------------------------------- dois lados */
.lados{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.lado{
  border-radius:var(--r-lg);padding:30px;border:1px solid var(--linha);
  background:var(--papel);
}
.lado.destaque{background:var(--grafite);border-color:var(--grafite);color:#fff;}
.lado h3{margin:0 0 8px;font-size:19px;font-weight:700;letter-spacing:-.01em;}
.lado p{margin:0 0 18px;font-size:14.5px;color:var(--tinta-media);}
.lado.destaque p{color:#b9c0cc;}
.lado ul{margin:0 0 22px;padding:0;list-style:none;display:grid;gap:8px;}
.lado li{font-size:14px;display:flex;gap:9px;align-items:flex-start;color:var(--tinta-media);}
.lado.destaque li{color:#d3d8e0;}
.lado li::before{content:"✓";color:var(--marca);font-weight:800;flex:none;}
.lado.destaque li::before{color:#ff8a5c;}

/* ----------------------------------------------------------------- avisos */
.aviso{
  border-radius:var(--r-md);padding:14px 16px;font-size:13.5px;
  border:1px solid var(--linha);background:var(--papel);margin-bottom:16px;
}
.aviso-obra{
  background:#fffbeb;border-color:#fde68a;color:#78350f;
}

/* ----------------------------------------------------------------- rodapé */
.rodape{
  background:var(--grafite);color:#98a1af;padding:46px 0 30px;margin-top:0;
  font-size:13.5px;
}
.rodape-grade{
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;margin-bottom:30px;
}
.rodape h4{
  margin:0 0 12px;font-size:12px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;
}
.rodape ul{margin:0;padding:0;list-style:none;display:grid;gap:7px;}
.rodape a{color:#98a1af;text-decoration:none;}
.rodape a:hover{color:#fff;text-decoration:none;}
.rodape .marca{color:#fff;margin-bottom:10px;}
.rodape-fim{
  border-top:1px solid rgba(255,255,255,.1);padding-top:20px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;
}

/* ------------------------------------------------------------------ erro */
.pagina-erro{text-align:center;padding:90px 22px;}
.pagina-erro .codigo{font-size:64px;font-weight:800;color:var(--marca);line-height:1;}
.pagina-erro h1{margin:14px 0 8px;font-size:24px;}
.pagina-erro p{color:var(--tinta-media);margin:0 0 24px;}

/* ------------------------------------------------------------ responsivo */
@media (max-width:900px){
  .passos{grid-template-columns:repeat(2,1fr);}
  .lados{grid-template-columns:1fr;}
  .rodape-grade{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  .menu{
    display:none;position:absolute;top:66px;left:0;right:0;
    background:var(--papel);border-bottom:1px solid var(--linha);
    flex-direction:column;align-items:stretch;padding:10px 22px 16px;gap:2px;
  }
  .menu.aberto{display:flex;}
  .menu-btn{display:block;order:3;}
  .topo-interno{gap:12px;}
  .marca{flex:1;}
  .hero{padding:54px 0 60px;}
  .hero h1{font-size:31px;}
  .hero p{font-size:15.5px;}
  .secao{padding:46px 0;}
  .secao h2{font-size:22px;}
}
@media (max-width:520px){
  .passos{grid-template-columns:1fr;}
  .rodape-grade{grid-template-columns:1fr;}
  .hero-botoes .btn{flex:1 1 100%;}
  .topo-acoes .btn-fantasma{display:none;}
}

/* =====================================================================
   ÁREA LOGADA E FORMULÁRIOS
   ===================================================================== */

.miolo-estreito{
  min-height:calc(100vh - 66px);
  display:flex;align-items:flex-start;justify-content:center;
  padding:46px 22px 70px;
}
.cartao-auth{
  width:100%;max-width:430px;background:var(--papel);
  border:1px solid var(--linha);border-radius:var(--r-lg);
  padding:32px;box-shadow:var(--sombra-media);
}
.cartao-auth h1{margin:0 0 6px;font-size:24px;font-weight:700;letter-spacing:-.02em;}
.cartao-auth .sub{margin:0 0 24px;color:var(--tinta-media);font-size:14.5px;}
.etiqueta-form{
  display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--marca-escura);background:var(--marca-clara);
  border:1px solid var(--marca-linha);padding:4px 10px;border-radius:100px;margin-bottom:14px;
}
.rodape-form{
  margin:22px 0 0;padding-top:18px;border-top:1px solid var(--linha-suave);
  font-size:13.5px;color:var(--tinta-media);text-align:center;
}

/* --------------------------------------------------------- campos */
.campo{display:block;margin-bottom:15px;}
.campo > span{
  display:block;font-size:13px;font-weight:600;color:var(--tinta);margin-bottom:6px;
}
.campo input,.campo select,.campo textarea{
  width:100%;font-family:inherit;font-size:14.5px;color:var(--tinta);
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--r-sm);
  padding:11px 13px;outline:none;transition:.14s;
}
.campo select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238b93a1' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;padding-right:32px;}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--marca);box-shadow:0 0 0 3px rgba(226,87,31,.13);
}
.campo.com-erro input,.campo.com-erro select{border-color:var(--erro);}
.campo .dica{display:block;font-size:12px;color:var(--tinta-fraca);margin-top:5px;}
.msg-erro{display:block;font-size:12.5px;color:var(--erro);margin-top:5px;font-weight:500;}

.linha-campos{display:flex;gap:12px;}
.linha-campos .campo{flex:1;min-width:0;}

.checagem{
  display:flex;gap:9px;align-items:flex-start;margin:18px 0 6px;
  font-size:13.5px;color:var(--tinta-media);line-height:1.5;cursor:pointer;
}
.checagem input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--marca);}
.checagem.com-erro span{color:var(--erro);}

.btn-bloco{width:100%;margin-top:18px;padding:13px;}

/* -------------------------------------------------------- recados */
.recado{
  border-radius:var(--r-sm);padding:11px 14px;font-size:13.5px;margin-bottom:16px;
  border:1px solid var(--linha);font-weight:500;
}
.recado-ok{background:var(--ok-fundo);border-color:#bbe6cb;color:var(--ok);}
.recado-erro{background:var(--erro-fundo);border-color:#f7c7c7;color:var(--erro);}
.recado-aviso{background:#fffbeb;border-color:#fde68a;color:#92400e;}

/* ------------------------------------------------- escolha de perfil */
.escolha{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.opcao{
  display:flex;flex-direction:column;gap:5px;text-decoration:none;color:var(--tinta);
  border:1px solid var(--linha);border-radius:var(--r-md);padding:22px;transition:.15s;
  background:var(--papel);
}
.opcao:hover{border-color:var(--marca);box-shadow:var(--sombra-media);text-decoration:none;}
.opcao-ico{font-size:26px;}
.opcao-nome{font-size:16px;font-weight:700;}
.opcao-txt{font-size:13px;color:var(--tinta-media);line-height:1.5;flex:1;}
.opcao-seta{font-size:13px;font-weight:600;color:var(--marca-escura);margin-top:8px;}
.opcao.destaque{border-color:var(--marca-linha);background:var(--marca-clara);}

/* ---------------------------------------------------------- painel */
.corpo-painel{background:var(--fundo);}
.area-painel{padding:30px 22px 70px;}
.usuario-chip{font-size:13px;font-weight:600;color:var(--tinta-media);}

.painel-topo{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:22px;
}
.painel-topo h1{margin:0;font-size:24px;font-weight:700;letter-spacing:-.02em;}
.painel-topo .sub{margin:5px 0 0;color:var(--tinta-media);font-size:14px;}

.cartoes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px;margin-bottom:22px;
}
.cartao-num{
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--r-md);
  padding:17px 18px;display:flex;flex-direction:column;gap:3px;
}
.cartao-num .n{font-size:26px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;}
.cartao-num .r{font-size:12.5px;color:var(--tinta-media);}
.cartao-num.destaque{background:var(--marca-clara);border-color:var(--marca-linha);}
.cartao-num.destaque .n{color:var(--marca-escura);}

.progresso-bloco{
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--r-md);
  padding:18px;margin-bottom:22px;
}
.progresso-cabeca{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:13.5px;font-weight:600;margin-bottom:9px;
}
.progresso-cabeca strong{font-size:19px;color:var(--marca-escura);}
.progresso{height:9px;border-radius:100px;background:var(--linha-suave);overflow:hidden;}
.progresso i{display:block;height:100%;background:var(--marca);border-radius:100px;transition:width .4s;}
.progresso-bloco .dica{font-size:12.5px;color:var(--tinta-fraca);margin:9px 0 0;}

.atalhos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;}
.atalho{
  display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--tinta);
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--r-md);
  padding:16px 17px;transition:.14s;
}
.atalho:hover{border-color:var(--marca);background:#fffdfb;text-decoration:none;}
.atalho-ico{font-size:22px;flex:none;}
.atalho strong{display:block;font-size:14px;font-weight:700;}
.atalho small{display:block;font-size:12.5px;color:var(--tinta-fraca);margin-top:1px;}

@media (max-width:560px){
  .escolha{grid-template-columns:1fr;}
  .linha-campos{flex-direction:column;gap:0;}
  .cartao-auth{padding:24px 20px;}
  .painel-topo .btn{width:100%;}
}

/* =====================================================================
   FASE 3 — perfil do profissional
   ===================================================================== */

/* ------------------------------------------------- abas do perfil */
.abas{
  display:flex;gap:4px;overflow-x:auto;margin:0 0 22px;
  border-bottom:1px solid var(--linha);-webkit-overflow-scrolling:touch;
}
.abas::-webkit-scrollbar{height:0;}
.aba{
  display:flex;align-items:center;gap:7px;white-space:nowrap;
  padding:11px 14px;font-size:13.5px;font-weight:600;color:var(--tinta-fraca);
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.aba:hover{color:var(--tinta);text-decoration:none;}
.aba.ativo{color:var(--marca-escura);border-bottom-color:var(--marca);}

/* ------------------------------------------------- bloco de formulário */
.bloco{
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--r-md);
  padding:22px;margin-bottom:16px;box-shadow:var(--sombra);
}
.bloco > h2{font-size:16px;margin:0 0 4px;}
.bloco > h2 + .sub{margin-top:0;margin-bottom:18px;}
.bloco > h2:only-child{margin-bottom:0;}

.barra-salvar{
  position:sticky;bottom:0;z-index:5;
  background:linear-gradient(to top,var(--fundo) 62%,rgba(248,249,251,0));
  padding:14px 0 20px;margin-top:-4px;
}

.vazio-simples{color:var(--tinta-fraca);font-size:13.5px;margin:0;}

/* ------------------------------------------------- foto de perfil */
.linha-foto{display:flex;gap:18px;align-items:center;margin-bottom:18px;}
.foto-atual{
  width:92px;height:92px;flex:none;border-radius:50%;overflow:hidden;
  border:1px solid var(--linha);background:var(--linha-suave);
  display:flex;align-items:center;justify-content:center;
}
.foto-atual img{width:100%;height:100%;object-fit:cover;}
.foto-vazia{font-size:11.5px;color:var(--tinta-fraca);text-align:center;}

/* ------------------------------------------------- especialidades */
.grade-escolhas{
  display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.escolha-item{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  border:1px solid var(--linha);border-radius:var(--r-sm);padding:10px 12px;
  font-size:13.5px;transition:.14s;background:var(--papel);
}
.escolha-item:hover{border-color:var(--marca-linha);background:var(--marca-clara);}
.escolha-item.marcada{border-color:var(--marca-linha);background:var(--marca-clara);}
.escolha-item input[type=checkbox]{flex:none;width:16px;height:16px;accent-color:var(--marca);}
.escolha-nome{flex:1;min-width:0;}
.marca-principal{
  display:flex;align-items:center;gap:4px;flex:none;
  color:var(--tinta-fraca);font-size:11px;
}
.marca-principal input{accent-color:var(--marca);}

/* ------------------------------------------------- equipamentos */
.lista-equipamentos{display:flex;flex-direction:column;gap:8px;}
.equipamento{
  border:1px solid var(--linha);border-radius:var(--r-sm);padding:12px 14px;
  transition:.14s;
}
.equipamento.marcado{border-color:var(--marca-linha);background:var(--marca-clara);}
.equipamento-cabeca{display:flex;gap:10px;align-items:flex-start;cursor:pointer;}
.equipamento-cabeca input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--marca);}
.equipamento-cabeca strong{display:block;font-size:14px;}
.equipamento-cabeca small{display:block;font-size:12px;color:var(--tinta-fraca);}
.equipamento-detalhe{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  margin:10px 0 0 26px;font-size:12.5px;color:var(--tinta-media);
}
.radio-linha{display:flex;align-items:center;gap:5px;cursor:pointer;}
.radio-linha input{accent-color:var(--marca);}
.obs-equipamento{
  flex:1;min-width:160px;font-family:inherit;font-size:13px;
  border:1px solid var(--linha);border-radius:var(--r-sm);padding:7px 10px;
  background:var(--papel);outline:none;
}
.obs-equipamento:focus{border-color:var(--marca);}

/* ------------------------------------------------- selos de estado */
.selo{
  display:inline-block;padding:2px 9px;border-radius:99px;
  font-size:11px;font-weight:700;letter-spacing:.01em;
  border:1px solid var(--linha);background:var(--linha-suave);color:var(--tinta-media);
}
.selo-ok{background:var(--ok-fundo);border-color:#bbe6cb;color:var(--ok);}
.selo-espera{background:#fffbeb;border-color:#fde68a;color:#92400e;}
.selo-erro{background:var(--erro-fundo);border-color:#f7c7c7;color:var(--erro);}

/* ------------------------------------------------- certificações */
.lista-cert{display:flex;flex-direction:column;gap:10px;}
.cert{
  display:flex;gap:14px;align-items:center;justify-content:space-between;
  border:1px solid var(--linha);border-radius:var(--r-sm);padding:13px 15px;
}
.cert-info{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0;}
.cert-info strong{font-size:14px;}
.cert-info small{display:block;width:100%;font-size:12px;color:var(--tinta-fraca);}
.cert-obs{color:var(--alerta) !important;}

/* ------------------------------------------------- agenda */
.lista-bloqueios{display:flex;flex-direction:column;gap:8px;}
.bloqueio{
  display:flex;gap:14px;align-items:center;justify-content:space-between;
  border:1px solid var(--linha);border-radius:var(--r-sm);padding:12px 15px;
}
.bloqueio strong{font-size:14px;}
.bloqueio small{display:block;font-size:12px;color:var(--tinta-fraca);}
.bloqueio-servico{background:var(--linha-suave);}

/* ------------------------------------------------- portfólio */
.grade-portfolio{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
.trabalho{
  margin:0;border:1px solid var(--linha);border-radius:var(--r-md);overflow:hidden;
  background:var(--papel);
}
.trabalho img{width:100%;height:160px;object-fit:cover;background:var(--linha-suave);}
.trabalho figcaption{padding:12px 14px;}
.trabalho figcaption strong{display:block;font-size:14px;line-height:1.35;}
.trabalho figcaption small{display:block;font-size:12px;color:var(--tinta-fraca);margin-top:3px;}
.trabalho figcaption form{margin-top:10px;}

@media (max-width:640px){
  .bloco{padding:16px;}
  .linha-campos{flex-direction:column;gap:0;}
  .linha-campos .campo{flex:1 1 auto !important;}
  .linha-foto{gap:14px;}
  .foto-atual{width:72px;height:72px;}
  .cert,.bloqueio{flex-direction:column;align-items:flex-start;gap:10px;}
  .equipamento-detalhe{margin-left:0;}
  .grade-escolhas{grid-template-columns:1fr;}
}

/* =====================================================================
   FASE 4 — perfil da empresa e curadoria do admin
   ===================================================================== */

.btn.perigo{color:var(--erro);border-color:#f7c7c7;background:var(--erro-fundo);}
.btn.perigo:hover{background:#fbdada;}
.btn-pequeno{padding:7px 11px;font-size:12.5px;}

.contador{
  display:inline-block;vertical-align:middle;margin-left:6px;
  background:var(--linha-suave);border:1px solid var(--linha);border-radius:99px;
  padding:1px 10px;font-size:13px;font-weight:700;color:var(--tinta-media);
}

.foto-logo{border-radius:var(--r-md);}

/* ------------------------------------------------- fila de verificação */
.lista-fila{display:flex;flex-direction:column;gap:10px;}
.fila-item{
  display:flex;gap:16px;align-items:flex-start;justify-content:space-between;
  border:1px solid var(--linha);border-radius:var(--r-sm);padding:14px 16px;
}
.fila-info{min-width:0;flex:1;}
.fila-titulo{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:4px;}
.fila-titulo strong{font-size:14.5px;}
.fila-info small{display:block;font-size:12.5px;color:var(--tinta-fraca);}
.fila-info .btn{margin-top:9px;}
.fila-acoes{display:flex;flex-direction:column;gap:8px;flex:none;align-items:stretch;}
.fila-acoes form{display:flex;gap:6px;align-items:center;}
.fila-acoes .btn{white-space:nowrap;}

.campo-inline{
  font-family:inherit;font-size:13px;width:170px;
  border:1px solid var(--linha);border-radius:var(--r-sm);padding:8px 10px;
  background:var(--papel);outline:none;
}
.campo-inline:focus{border-color:var(--marca);}

/* ------------------------------------------------- listagens do admin */
.filtros{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;}
.filtros .campo{margin-bottom:0;min-width:170px;}

.tabela-rolavel{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.tabela-rolavel table{width:100%;border-collapse:collapse;min-width:620px;}
.tabela-rolavel th{
  text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;
  color:var(--tinta-fraca);font-weight:700;padding:0 12px 9px 0;border-bottom:1px solid var(--linha);
}
.tabela-rolavel td{padding:12px 12px 12px 0;border-bottom:1px solid var(--linha-suave);vertical-align:top;}
.tabela-rolavel tr:last-child td{border-bottom:none;}
.tabela-rolavel small{color:var(--tinta-fraca);font-size:12px;}
.tabela-rolavel strong{font-size:14px;}

.progresso-fina{height:5px;width:64px;margin-bottom:3px;}
code.acao{
  font-size:11.5px;background:var(--linha-suave);border:1px solid var(--linha);
  border-radius:5px;padding:2px 7px;color:var(--tinta-media);
}

.paginacao{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:4px;padding-bottom:24px;
}

@media (max-width:640px){
  .fila-item{flex-direction:column;}
  .fila-acoes{width:100%;}
  .fila-acoes form{flex-wrap:wrap;}
  .campo-inline{width:100%;}
  .filtros{flex-direction:column;align-items:stretch;}
}

/* =====================================================================
   FASE 5 — site público (perfil, vitrine, landing)
   ===================================================================== */

.secao-topo-publico{background:var(--papel);border-bottom:1px solid var(--linha);padding:38px 0 28px;}
.secao-topo-publico h1{font-size:31px;margin:0 0 6px;letter-spacing:-.02em;}
.secao-topo-publico .sub{max-width:620px;margin:0;}

.migalhas{font-size:12.5px;color:var(--tinta-fraca);margin-bottom:14px;}
.migalhas a{color:var(--tinta-media);}

.filtros-publicos{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px;}
.filtros-publicos .campo{margin-bottom:0;min-width:230px;}

/* ------------------------------------------------- capa do perfil */
.perfil-capa{background:var(--papel);border-bottom:1px solid var(--linha);padding:34px 0;}
.perfil-topo{display:flex;gap:24px;align-items:center;flex-wrap:wrap;}
.perfil-foto{
  width:112px;height:112px;flex:none;border-radius:50%;overflow:hidden;
  border:3px solid var(--papel);box-shadow:var(--sombra-media);background:var(--linha-suave);
  display:flex;align-items:center;justify-content:center;
}
.perfil-foto img{width:100%;height:100%;object-fit:cover;}
.perfil-foto .foto-vazia{font-size:38px;font-weight:800;color:var(--marca);}
.perfil-foto.foto-logo{border-radius:var(--r-md);}

.perfil-identidade{flex:1;min-width:240px;}
.perfil-identidade h1{font-size:29px;margin:0 0 3px;letter-spacing:-.02em;}
.perfil-cargo{color:var(--tinta-media);font-size:15px;margin:0 0 12px;}
.perfil-selos{display:flex;flex-wrap:wrap;gap:7px;}
.perfil-selos .selo small{font-weight:500;opacity:.85;}

.perfil-acao{flex:none;text-align:center;max-width:260px;}
.perfil-acao .dica{display:block;margin-top:9px;font-size:12px;color:var(--tinta-fraca);}

.perfil-corpo{display:grid;grid-template-columns:1fr 330px;gap:22px;padding-top:26px;padding-bottom:40px;}
.perfil-principal{min-width:0;}
.perfil-lado{min-width:0;}
.bloco-chamada{background:var(--marca-clara);border-color:var(--marca-linha);}

.texto-longo{font-size:15px;line-height:1.7;color:var(--tinta-media);margin:0;}
.trabalho-desc{font-size:12.5px;color:var(--tinta-fraca);margin:7px 0 0;line-height:1.5;}

.etiquetas{display:flex;flex-wrap:wrap;gap:7px;}
.etiqueta{
  display:inline-block;padding:5px 11px;border-radius:99px;font-size:12.5px;font-weight:600;
  border:1px solid var(--linha);background:var(--linha-suave);color:var(--tinta-media);
}
.etiqueta:hover{border-color:var(--marca-linha);background:var(--marca-clara);color:var(--marca-escura);text-decoration:none;}
.etiqueta-forte{background:var(--marca-clara);border-color:var(--marca-linha);color:var(--marca-escura);}

.lista-simples{list-style:none;margin:0;padding:0;}
.lista-simples li{padding:9px 0;border-bottom:1px solid var(--linha-suave);}
.lista-simples li:last-child{border-bottom:none;}
.lista-simples strong{display:block;font-size:13.5px;}
.lista-simples small{display:block;font-size:12.5px;color:var(--tinta-fraca);}

/* ------------------------------------------------- vitrine e landing */
.grade-cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
.card-prof{
  display:flex;gap:13px;align-items:center;background:var(--papel);
  border:1px solid var(--linha);border-radius:var(--r-md);padding:14px;transition:.15s;
}
.card-prof:hover{border-color:var(--marca-linha);box-shadow:var(--sombra-media);text-decoration:none;transform:translateY(-1px);}
.card-prof-foto{
  width:60px;height:60px;flex:none;border-radius:50%;overflow:hidden;background:var(--marca-clara);
  display:flex;align-items:center;justify-content:center;
}
.card-prof-foto img{width:100%;height:100%;object-fit:cover;}
.card-prof-foto span{font-size:22px;font-weight:800;color:var(--marca);}
.card-prof-corpo{min-width:0;flex:1;}
.card-prof-corpo strong{display:block;font-size:14.5px;color:var(--tinta);}
.card-prof-corpo small{display:block;font-size:12.5px;color:var(--tinta-fraca);margin-bottom:7px;}
.card-prof-selos{display:flex;flex-wrap:wrap;gap:5px;}

.vazio-publico{
  text-align:center;padding:50px 20px;background:var(--papel);
  border:1px dashed var(--linha);border-radius:var(--r-lg);
}
.vazio-publico h2{font-size:19px;margin:0 0 8px;}
.vazio-publico p{color:var(--tinta-media);margin:0 0 20px;}

.hero-interno-menor{padding-top:44px;padding-bottom:44px;}

/* ------------------------------------------------- institucional */
.miolo-texto{max-width:760px;}
.miolo-texto h1{font-size:30px;letter-spacing:-.02em;margin-bottom:6px;}
.texto-institucional{font-size:15.5px;line-height:1.75;color:var(--tinta-media);margin-top:20px;}
.texto-institucional h2{font-size:19px;color:var(--tinta);margin:30px 0 10px;}
.texto-institucional h3{font-size:16px;color:var(--tinta);margin:22px 0 8px;}
.texto-institucional p{margin:0 0 14px;}
.texto-institucional ul,.texto-institucional ol{margin:0 0 14px;padding-left:20px;}
.texto-institucional li{margin-bottom:6px;}

@media (max-width:900px){
  .perfil-corpo{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .perfil-topo{gap:16px;}
  .perfil-foto{width:84px;height:84px;}
  .perfil-identidade h1{font-size:23px;}
  .perfil-acao{max-width:none;width:100%;}
  .perfil-acao .btn{width:100%;}
  .secao-topo-publico h1{font-size:25px;}
  .filtros-publicos{flex-direction:column;}
  .filtros-publicos .campo{min-width:0;}
}

/* =====================================================================
   FASE 6 — busca, contato e lista de confiança
   ===================================================================== */

.busca-filtros{margin-bottom:14px;}
.busca-acoes{display:flex;gap:10px;align-items:center;margin-top:4px;}

.resultado-cabeca{
  font-size:13.5px;color:var(--tinta-media);margin:0 0 12px;padding:0 2px;
}
.resultado-cabeca strong{color:var(--tinta);font-size:15px;}

.lista-resultado{display:flex;flex-direction:column;gap:10px;}
.resultado{
  display:flex;gap:14px;align-items:center;background:var(--papel);
  border:1px solid var(--linha);border-radius:var(--r-md);padding:14px 16px;transition:.14s;
}
.resultado:hover{border-color:var(--marca-linha);}
.resultado-foto{
  width:58px;height:58px;flex:none;border-radius:50%;overflow:hidden;background:var(--marca-clara);
  display:flex;align-items:center;justify-content:center;
}
.resultado-foto img{width:100%;height:100%;object-fit:cover;}
.resultado-foto span{font-size:21px;font-weight:800;color:var(--marca);}
.resultado-info{flex:1;min-width:0;}
.resultado-titulo{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:3px;}
.resultado-titulo strong{font-size:15px;color:var(--tinta);}
.resultado-titulo a{color:inherit;}
.resultado-titulo a:hover strong{color:var(--marca-escura);}
.resultado-info small{display:block;font-size:12.5px;color:var(--tinta-fraca);line-height:1.55;}
.resultado-info small strong{color:var(--tinta-media);}
.resultado-acoes{display:flex;gap:8px;align-items:center;flex:none;}

.vazio-busca{text-align:center;padding:34px 20px;}
.vazio-busca h2{font-size:18px;margin:0 0 6px;}
.vazio-busca .sub{max-width:520px;margin:0 auto 16px;}

.contato-aberto{border-color:var(--marca-linha);background:var(--marca-clara);}
.contato-dados{margin:14px 0 18px;}
.contato-linha{display:flex;gap:12px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--marca-linha);}
.contato-linha:last-child{border-bottom:none;}
.contato-rotulo{font-size:12px;color:var(--tinta-fraca);width:80px;flex:none;text-transform:uppercase;letter-spacing:.03em;font-weight:700;}
.contato-linha strong{font-size:16px;font-variant-numeric:tabular-nums;}

@media (max-width:640px){
  .resultado{flex-wrap:wrap;}
  .resultado-acoes{width:100%;}
  .resultado-acoes form{flex:1;}
  .resultado-acoes .btn{width:100%;}
  .busca-acoes .btn{flex:1;}
}

/* =====================================================================
   FASE 8 — avaliação e notificações
   ===================================================================== */

/* sino do cabeçalho */
.sino{
  position:relative;display:inline-grid;place-items:center;
  width:36px;height:36px;border-radius:var(--r-sm);
  font-size:16px;text-decoration:none;transition:.14s;flex:none;
}
.sino:hover{background:var(--linha-suave);text-decoration:none;}
.sino-conta{
  position:absolute;top:2px;right:1px;
  min-width:16px;height:16px;padding:0 4px;border-radius:100px;
  background:var(--marca);color:#fff;
  font-size:10px;font-weight:800;line-height:16px;text-align:center;
}

.notif-ico{margin-right:5px;}
.fila-item.nao-lida{border-color:var(--marca-linha);background:var(--marca-clara);}

/* notas da avaliação */
.criterio{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 0;border-bottom:1px solid var(--linha-suave);flex-wrap:wrap;
}
.criterio:last-of-type{border-bottom:none;}
.criterio-nome{font-size:14px;font-weight:600;}
.criterio-notas{display:flex;gap:6px;}
.nota{cursor:pointer;}
.nota input{position:absolute;opacity:0;width:0;height:0;}
.nota span{
  display:grid;place-items:center;width:38px;height:38px;
  border:1px solid var(--linha);border-radius:var(--r-sm);
  font-size:14px;font-weight:700;color:var(--tinta-media);
  background:var(--papel);transition:.12s;
}
.nota:hover span{border-color:var(--marca);color:var(--marca-escura);}
.nota input:checked + span{
  background:var(--marca);border-color:var(--marca);color:#fff;
}
/* foco visível pra quem navega por teclado */
.nota input:focus-visible + span{box-shadow:0 0 0 3px rgba(226,87,31,.25);}

/* avaliações no perfil público */
.lista-avaliacoes{display:flex;flex-direction:column;gap:12px;}
.avaliacao{
  border:1px solid var(--linha);border-radius:var(--r-md);
  padding:16px;background:var(--papel);
}
.avaliacao-topo{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:8px;
}
.avaliacao-nota{font-size:15px;font-weight:800;color:var(--marca-escura);}
.avaliacao-autor{font-size:13px;color:var(--tinta-media);}
.avaliacao-servico{font-size:12px;color:var(--tinta-fraca);}
.avaliacao p{margin:8px 0 0;font-size:14px;line-height:1.6;}
.avaliacao-criterios{
  display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;
  font-size:12px;color:var(--tinta-fraca);
}

@media (max-width:560px){
  .criterio{flex-direction:column;align-items:flex-start;gap:8px;}
  .nota span{width:44px;height:40px;}
}

/* =====================================================================
   FASE 9 — institucional, PWA e ajuste de SEO
   ===================================================================== */

.editor-html{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;line-height:1.6;min-height:360px;
}
.campo .dica code{
  background:var(--linha-suave);border:1px solid var(--linha);border-radius:4px;
  padding:1px 5px;font-size:11.5px;
}

/* ------------------------------------------------- mapa do local */
.mapa{margin-top:12px;}
.mapa iframe{
  width:100%;height:240px;border:1px solid var(--linha);border-radius:var(--r-md);
  display:block;background:var(--linha-suave);
}
.mapa > a{
  display:inline-block;margin-top:7px;font-size:12.5px;color:var(--tinta-media);
}
.mapa[hidden]{display:none;}
@media (max-width:640px){ .mapa iframe{height:200px;} }

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

.planos-grade{
  display:grid;gap:18px;margin-top:22px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));max-width:760px;
}
.plano{
  position:relative;background:var(--papel);border:1px solid var(--linha);
  border-radius:var(--r-lg);padding:26px 24px;display:flex;flex-direction:column;
}
.plano-destaque{border-color:var(--marca);box-shadow:var(--sombra-media);}
.plano-fita{
  position:absolute;top:-11px;left:24px;background:var(--marca);color:#fff;
  font-size:11.5px;font-weight:700;padding:4px 12px;border-radius:99px;
  letter-spacing:.01em;
}
.plano h3{font-size:19px;margin:0 0 4px;}
.plano-chamada{font-size:13.5px;color:var(--tinta-media);margin:0 0 18px;line-height:1.5;min-height:40px;}

.plano-preco{margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--linha-suave);}
.plano-preco > strong{font-size:34px;letter-spacing:-.03em;display:inline-block;}
.plano-preco > small{font-size:13px;color:var(--tinta-fraca);margin-left:5px;}
.plano-de{
  display:block;font-size:13px;color:var(--tinta-fraca);
  text-decoration:line-through;margin-bottom:2px;
}
.plano-anual{font-size:12.5px;color:var(--tinta-media);margin:8px 0 0;}
.plano-anual strong{color:var(--tinta);}
.plano-economia{
  display:inline-block;background:var(--ok-fundo);color:var(--ok);
  border-radius:99px;padding:1px 8px;font-size:11px;font-weight:700;margin-left:4px;
}

.plano-itens{list-style:none;margin:0 0 22px;padding:0;flex:1;}
.plano-itens li{
  position:relative;padding:7px 0 7px 24px;font-size:13.5px;
  color:var(--tinta-media);line-height:1.5;
}
.plano-itens li::before{
  content:"✓";position:absolute;left:0;top:7px;color:var(--ok);font-weight:800;
}
.plano-btn-inativo{opacity:.55;cursor:default;}

/* plano no painel */
.faixa-plano{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--r-md);
  padding:14px 18px;margin-bottom:16px;
}
.faixa-plano .nome-plano{font-weight:700;font-size:14px;}
.faixa-plano .consumo{font-size:12.5px;color:var(--tinta-fraca);}
.faixa-plano .espaco{flex:1;}
.barra-cota{height:6px;background:var(--linha-suave);border-radius:4px;overflow:hidden;width:120px;}
.barra-cota i{display:block;height:100%;background:var(--marca);border-radius:4px;}
.barra-cota.cheia i{background:var(--erro);}

@media (max-width:640px){
  .plano{padding:22px 18px;}
  .plano-chamada{min-height:0;}
  .faixa-plano{flex-direction:column;align-items:flex-start;gap:8px;}
}
.form-plano select{font-size:12.5px;padding:6px 26px 6px 9px;min-width:110px;}

/* =====================================================================
   NAVEGAÇÃO DA ÁREA LOGADA — v3
   Cabeçalho grafite (a cor da logo) em vez de branco sobre branco: o menu
   passa a ser uma faixa que se vê de longe. Ícones em traço, sem cor própria
   (herdam a do texto). Laranja só como marcador do item ativo.
   ===================================================================== */

.icone{flex:none;display:block;}

.corpo-painel{background:#eef1f5;}

.topo-painel{
  background:var(--grafite);border-bottom:0;
  box-shadow:0 1px 0 rgba(0,0,0,.25),0 8px 24px -12px rgba(16,24,40,.45);
}
.topo-painel .topo-interno{height:64px;gap:20px;}
.topo-painel .marca{color:#fff;}
.topo-painel .marca em{color:#ff8a5c;}

.menu-painel{display:flex;align-items:stretch;gap:2px;flex:1;height:100%;min-width:0;}
.menu-painel a{
  position:relative;display:flex;align-items:center;gap:8px;
  padding:0 12px;font-size:13.5px;font-weight:600;white-space:nowrap;
  color:#aeb6c3;text-decoration:none;transition:color .14s,background .14s;
}
.menu-painel a:hover{color:#fff;background:rgba(255,255,255,.05);text-decoration:none;}
.menu-painel a.ativo{color:#fff;background:rgba(255,255,255,.08);}
.menu-painel a.ativo::after{
  content:"";position:absolute;left:10px;right:10px;bottom:0;height:3px;
  border-radius:3px 3px 0 0;background:var(--marca);
}

.topo-painel .topo-acoes{gap:6px;}
.topo-painel .sino{color:#c3cad5;width:40px;height:40px;}
.topo-painel .sino:hover,.topo-painel .sino.ativo{background:rgba(255,255,255,.08);color:#fff;}
.topo-painel .sino-conta{top:4px;right:3px;box-shadow:0 0 0 2px var(--grafite);}

/* menu da conta */
.conta{position:relative;}
.conta summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  padding:5px 10px 5px 5px;border-radius:100px;color:#dfe3ea;
  border:1px solid rgba(255,255,255,.12);transition:.14s;
}
.conta summary::-webkit-details-marker{display:none;}
.conta summary:hover,.conta[open] summary{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);}
.avatar-letra{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:#fff;color:var(--grafite);font-size:13px;font-weight:800;
}
.conta-nome{font-size:13px;font-weight:600;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.conta-caixa{
  position:absolute;right:0;top:calc(100% + 8px);width:250px;z-index:60;
  background:var(--papel);border:1px solid var(--linha);border-radius:var(--r-md);
  box-shadow:0 18px 40px -12px rgba(16,24,40,.35);padding:6px;
  animation:caixaEntra .14s ease-out;
}
@keyframes caixaEntra{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.conta-cabeca{padding:10px 10px 12px;border-bottom:1px solid var(--linha-suave);margin-bottom:4px;}
.conta-cabeca strong{display:block;font-size:14px;}
.conta-cabeca small{display:block;font-size:12px;color:var(--tinta-fraca);overflow:hidden;text-overflow:ellipsis;}
.conta-caixa a,.conta-caixa button{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 10px;border-radius:var(--r-sm);border:0;background:none;
  font:inherit;font-size:14px;font-weight:500;color:var(--tinta);text-align:left;cursor:pointer;
}
.conta-caixa a:hover,.conta-caixa button:hover{background:var(--linha-suave);text-decoration:none;}
.conta-caixa .icone{color:var(--tinta-media);}
.conta-caixa form{margin:4px 0 0;padding-top:4px;border-top:1px solid var(--linha-suave);}
.so-celular{display:none !important;}

/* barra de baixo (celular) */
.nav-inferior{display:none;}

/* abas das sub-seções: faixa própria, com fundo, grudada abaixo do cabeçalho */
.abas{
  position:sticky;top:64px;z-index:20;
  display:flex;gap:4px;overflow-x:auto;margin:0 0 22px;padding:6px;
  background:var(--papel);border:1px solid #dde1e7;border-radius:var(--r-md);
  box-shadow:0 4px 14px -8px rgba(16,24,40,.22);
  scrollbar-width:none;
}
.aba{
  display:flex;align-items:center;gap:8px;white-space:nowrap;flex:none;
  padding:9px 14px;border-radius:9px;border:0;margin:0;
  font-size:13.5px;font-weight:600;color:var(--tinta-media);transition:.14s;
}
.aba:hover{background:var(--linha-suave);color:var(--tinta);text-decoration:none;}
.aba.ativo{background:var(--grafite);color:#fff;border:0;}
.aba .icone{opacity:.85;}
.aba.ativo .icone{opacity:1;}

/* cartões e blocos ganham contorno um pouco mais firme sobre o fundo cinza */
.corpo-painel .bloco,.corpo-painel .cartao-num,.corpo-painel .atalho,
.corpo-painel .progresso-bloco{border-color:#dde1e7;}
.corpo-painel .barra-salvar{background:linear-gradient(to top,#eef1f5 62%,rgba(238,241,245,0));}

/* ícones dentro de conteúdo (atalhos, avisos, notificações) */
.atalho-ico{
  width:40px;height:40px;border-radius:10px;display:grid;place-items:center;
  background:var(--linha-suave);color:var(--grafite);font-size:0;
}
.atalho:hover .atalho-ico{background:var(--grafite);color:#fff;}
.ico-texto{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;}
.ico-texto .icone{color:currentColor;}
.notif-ico{
  display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;
  background:var(--linha-suave);color:var(--grafite);margin-right:8px;vertical-align:middle;
}

@media (max-width:1120px){
  .conta-nome{display:none;}
  .conta summary{padding:4px;}
  .menu-painel a{padding:0 9px;}
}
@media (max-width:980px){
  .menu-painel{display:none;}
  .topo-painel .marca{flex:1;}
  .so-celular{display:flex !important;}
  .topo-painel .topo-interno{height:58px;}
  .abas{top:58px;margin-left:-22px;margin-right:-22px;border-radius:0;border-left:0;border-right:0;}

  .nav-inferior{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:55;
    background:var(--papel);border-top:1px solid #dde1e7;
    box-shadow:0 -6px 20px -10px rgba(16,24,40,.25);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .nav-inferior a{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:6px 2px;border-radius:10px;min-width:0;
    font-size:11px;font-weight:600;color:var(--tinta-fraca);text-decoration:none;
  }
  .nav-inferior a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .nav-inferior a.ativo{color:var(--grafite);}
  .nav-inferior a.ativo .icone{
    background:var(--grafite);color:#fff;border-radius:100px;
    width:46px;height:28px;padding:4px 12px;
  }
  .area-painel{padding-bottom:110px;}
  .corpo-painel .barra-salvar{bottom:70px;}
}

/* =====================================================================
   SITE PÚBLICO — quebras de cor (v3)
   Grafite e laranja da logo marcam o que importa: promoção, argumentos,
   planos e a chamada final. O resto fica claro, pra essas faixas pesarem.
   ===================================================================== */

.btn-escuro{background:var(--grafite);color:#fff;}
.btn-escuro:hover{background:#0f141c;color:#fff;}
.btn-claro{background:#fff;color:var(--grafite);}
.btn-claro:hover{background:#fff4ee;color:var(--grafite);}
.btn .icone{transition:transform .15s;}
.btn:hover .icone{transform:translateX(2px);}

/* faixa laranja logo abaixo do hero */
.faixa-laranja{
  background:var(--marca);color:#fff;position:relative;overflow:hidden;
}
.faixa-laranja::after{
  content:"";position:absolute;inset:0;opacity:.09;pointer-events:none;
  background:repeating-linear-gradient(-45deg,#000 0 10px,transparent 10px 20px);
}
.faixa-laranja-interno{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding-block:18px;flex-wrap:wrap;
}
.faixa-rotulo{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(0,0,0,.18);padding:3px 10px;border-radius:99px;margin-bottom:4px;
}
.faixa-laranja p{margin:0;font-size:15px;color:#fff3ec;}
.faixa-laranja strong{color:#fff;}

/* seção grafite */
.secao-escura{background:var(--grafite);color:#fff;}
.secao-escura .secao-topo p{color:#aeb6c3;}
.secao-escura .secao-etiqueta{color:#ff8a5c;}
.secao-escura .vantagem h3{color:#fff;}
.secao-escura .vantagem p{color:#aeb6c3;}
.secao-escura .vantagem .ico{background:rgba(226,87,31,.14);color:#ff8a5c;border:1px solid rgba(226,87,31,.28);}
.vantagem .ico{color:var(--marca-escura);}

/* planos na home */
.secao-planos{background:linear-gradient(180deg,#fff 0%,var(--fundo) 100%);}
.secao-topo-centro{margin-inline:auto;text-align:center;}
.alternador{
  display:flex;width:max-content;max-width:100%;margin:0 auto 8px;padding:5px;gap:4px;
  background:var(--papel);border:1px solid var(--linha);border-radius:99px;box-shadow:var(--sombra);
}
.alternador button{
  display:flex;align-items:center;gap:8px;border:0;background:none;cursor:pointer;
  font:inherit;font-size:14px;font-weight:600;color:var(--tinta-media);
  padding:10px 18px;border-radius:99px;transition:.15s;white-space:nowrap;
}
.alternador button:hover{color:var(--tinta);}
.alternador button.ativo{background:var(--grafite);color:#fff;}
.planos-centro{margin-inline:auto;}
.planos-centro.entrando{animation:planosEntram .28s ease-out;}
@keyframes planosEntram{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.plano{transition:transform .18s,box-shadow .18s;}
.plano:hover{transform:translateY(-3px);box-shadow:0 16px 36px -14px rgba(16,24,40,.25);}
.plano-destaque{border-width:2px;}
.plano-mais a{font-weight:600;}
.plano-mais::before{content:"+" !important;color:var(--tinta-fraca) !important;}
.plano-dica{text-align:center;display:block;margin-top:8px;}
.planos-rodape{text-align:center;margin:26px 0 0;}
.planos-rodape a{display:inline-flex;align-items:center;gap:6px;font-weight:600;}

/* chamada final */
.cta-final{background:var(--marca);color:#fff;position:relative;overflow:hidden;}
.cta-final::before{
  content:"";position:absolute;right:-80px;top:-80px;width:320px;height:320px;border-radius:50%;
  background:rgba(255,255,255,.08);pointer-events:none;
}
.cta-final-interno{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding-block:52px;flex-wrap:wrap;
}
.cta-final h2{margin:0 0 6px;font-size:26px;letter-spacing:-.02em;}
.cta-final p{margin:0;color:#ffe4d7;}
.cta-final-botoes{display:flex;gap:10px;flex-wrap:wrap;}

/* entrada suave das seções ao rolar (só quando o JS marca a página) */
.revelar-js .revelar{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease;}
.revelar-js .revelar.visivel{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .revelar-js .revelar{opacity:1;transform:none;transition:none;}
  .plano,.plano:hover{transform:none;}
}

.opcao-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--linha-suave);color:var(--grafite);}
.ico-texto{display:inline-flex;align-items:center;gap:8px;}

@media (max-width:640px){
  .faixa-laranja-interno .btn{width:100%;}
  .alternador{width:100%;}
  .alternador button{flex:1;justify-content:center;padding:10px 8px;font-size:13px;}
  .alternador button .icone{display:none;}
  .cta-final-interno{padding-block:40px;}
  .cta-final-botoes .btn{flex:1 1 100%;}
}
.menu-btn{place-items:center;color:var(--tinta);}
@media (max-width:760px){ .menu-btn{display:grid;} }
.abas{scroll-behavior:auto;}
.abas .aba{position:relative;}

/* especialidades na home: versão enxuta (3 por grupo, 4 colunas) */
.secao-especialidades{padding:48px 0;}
.secao-especialidades .secao-topo{margin-bottom:22px;}
.grupos-compactos{grid-template-columns:repeat(4,1fr);gap:12px;}
.grupos-compactos .grupo{padding:14px 16px;}
.grupos-compactos .grupo h3{font-size:14px;margin-bottom:9px;}
.grupos-compactos .grupo li a{font-size:12px;padding:3px 9px;}
.grupos-compactos .mais a{
  display:inline-block;font-size:12px;font-weight:700;color:var(--marca-escura);
  padding:3px 6px;background:none;border:0;
}
@media (max-width:980px){ .grupos-compactos{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .grupos-compactos{grid-template-columns:1fr;} }

/* =====================================================================
   PLANOS NA HOME — v4: faixa grafite, cartões baixos lado a lado
   ===================================================================== */
.secao-planos{background:var(--grafite);}
.secao-planos .secao-topo h2{color:#fff;}
.secao-planos .alternador{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);box-shadow:none;margin-bottom:26px;}
.secao-planos .alternador button{color:#aeb6c3;}
.secao-planos .alternador button:hover{color:#fff;}
.secao-planos .alternador button.ativo{background:#fff;color:var(--grafite);}

.planos-home{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:820px;margin:0 auto;
}
.planos-home.entrando{animation:planosEntram .28s ease-out;}
.plano-home{
  display:flex;flex-direction:column;border-radius:var(--r-lg);padding:24px 24px 18px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);color:#fff;
}
.plano-home-pago{
  background:#fff;color:var(--tinta);border:0;
  box-shadow:0 0 0 2px var(--marca),0 24px 50px -20px rgba(0,0,0,.6);
}
.plano-home-cabeca{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
.plano-home h3{margin:0;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#aeb6c3;}
.plano-home-pago h3{color:var(--marca-escura);}
.plano-home-selo{
  font-size:11px;font-weight:700;background:var(--marca);color:#fff;
  padding:3px 10px;border-radius:99px;white-space:nowrap;
}
.plano-home-preco{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;line-height:1;}
.plano-home-preco strong{font-size:38px;font-weight:800;letter-spacing:-.03em;}
.plano-home-preco small{font-size:14px;color:#aeb6c3;}
.plano-home-pago .plano-home-preco small{color:var(--tinta-fraca);}
.plano-home-preco s{font-size:15px;color:var(--tinta-fraca);align-self:center;}
.plano-home-anual{margin:8px 0 16px;font-size:13px;color:#aeb6c3;}
.plano-home-pago .plano-home-anual{color:var(--tinta-media);}
.plano-home-itens{list-style:none;margin:0 0 18px;padding:16px 0 0;border-top:1px solid rgba(255,255,255,.1);display:grid;gap:9px;flex:1;}
.plano-home-pago .plano-home-itens{border-top-color:var(--linha);}
.plano-home-itens li{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.4;color:#d3d8e0;}
.plano-home-pago .plano-home-itens li{color:var(--tinta-media);}
.plano-home-itens .icone{margin-top:1px;color:#ff8a5c;}
.plano-home-pago .plano-home-itens .icone{color:var(--marca);}
.btn-vazado{background:transparent;color:#fff;border-color:rgba(255,255,255,.35);}
.btn-vazado:hover{background:#fff;color:var(--grafite);}
.btn-bloco{width:100%;}
.plano-home-nota{display:block;text-align:center;font-size:12px;margin-top:8px;color:var(--tinta-fraca);min-height:16px;}
.secao-planos .planos-rodape a{color:#ff8a5c;}
.plano-home:hover{transform:none;}

@media (max-width:700px){
  .planos-home{grid-template-columns:1fr;}
  .plano-home-pago{order:-1;}
}

/* topo público: o menu não cabe abaixo de ~1020px e empurrava "Criar conta"
   pra fora da tela (rolagem lateral) — vira o menu recolhido mais cedo */
@media (max-width:1020px){
  .topo:not(.topo-painel) .menu{
    display:none;position:absolute;top:66px;left:0;right:0;
    background:var(--papel);border-bottom:1px solid var(--linha);
    flex-direction:column;align-items:stretch;padding:10px 22px 16px;gap:2px;
  }
  .topo:not(.topo-painel) .menu.aberto{display:flex;}
  .topo:not(.topo-painel) .menu-btn{display:grid;order:3;}
  .topo:not(.topo-painel) .marca{flex:1;}
}

/* elemento com o atributo hidden some sempre, mesmo com display definido na classe */
[hidden]{display:none !important;}

/* =====================================================================
   ASSINATURA E PAGAMENTO (Mercado Pago)
   ===================================================================== */

/* escolha de plano no cadastro */
.escolha-plano{border:0;margin:6px 0 18px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.escolha-plano legend{font-size:13px;font-weight:700;margin-bottom:8px;padding:0;}
.opcao-plano{position:relative;cursor:pointer;display:block;}
.opcao-plano input{position:absolute;opacity:0;pointer-events:none;}
.opcao-plano-caixa{
  display:flex;flex-direction:column;gap:2px;height:100%;
  border:1.5px solid var(--linha);border-radius:var(--r-md);padding:12px 12px 10px;
  background:var(--papel);transition:.14s;position:relative;
}
.opcao-plano-caixa strong{font-size:13px;}
.opcao-plano-preco{font-size:19px;font-weight:800;letter-spacing:-.02em;}
.opcao-plano-caixa small{font-size:11.5px;color:var(--tinta-fraca);line-height:1.35;}
.opcao-plano:hover .opcao-plano-caixa{border-color:#c9ced6;}
.opcao-plano input:checked + .opcao-plano-caixa{border-color:var(--grafite);box-shadow:0 0 0 1px var(--grafite);background:#fbfbfc;}
.opcao-plano input:focus-visible + .opcao-plano-caixa{outline:2px solid var(--marca);outline-offset:2px;}
.opcao-plano-fita{
  position:absolute;top:-9px;right:8px;font-style:normal;font-size:10px;font-weight:800;
  background:var(--marca);color:#fff;padding:2px 8px;border-radius:99px;letter-spacing:.02em;
}
.escolha-plano-promo{grid-column:1/-1;margin:2px 0 0;font-size:12.5px;font-weight:600;color:var(--marca-escura);display:flex;align-items:center;gap:6px;}
.escolha-plano-dica{grid-column:1/-1;margin:0;}
@media (max-width:560px){ .escolha-plano{grid-template-columns:1fr;} }

/* tela de pagamento */
.checkout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:18px;align-items:start;}
.checkout-resumo{
  background:var(--grafite);color:#fff;border-radius:var(--r-lg);padding:22px;position:sticky;top:84px;
}
.alternador-bloco{width:100%;margin:0 0 18px;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);box-shadow:none;}
.alternador-bloco a{
  flex:1;text-align:center;padding:9px 10px;border-radius:99px;font-size:14px;font-weight:600;
  color:#aeb6c3;text-decoration:none;
}
.alternador-bloco a:hover{color:#fff;text-decoration:none;}
.alternador-bloco a.ativo{background:#fff;color:var(--grafite);}
.alternador-extra{font-size:11px;font-weight:700;color:var(--ok);background:var(--ok-fundo);padding:1px 7px;border-radius:99px;margin-left:4px;}
.checkout-preco{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1);}
.checkout-preco .plano-home-preco small,.checkout-preco .plano-home-preco s{color:#aeb6c3;}
.checkout-preco .dica{margin:0;color:#aeb6c3;}
.checkout-itens{list-style:none;margin:16px 0;padding:0;display:grid;gap:8px;}
.checkout-itens li{display:flex;gap:9px;font-size:13.5px;color:#d3d8e0;line-height:1.4;}
.checkout-itens .icone{color:#ff8a5c;margin-top:1px;}
.checkout-como{background:rgba(255,255,255,.05);border-radius:var(--r-md);padding:14px;font-size:13px;}
.checkout-como strong{display:block;margin-bottom:6px;}
.checkout-como p{display:flex;gap:8px;margin:6px 0 0;color:#c3cad5;line-height:1.45;}
.checkout-como .icone{margin-top:2px;color:#fff;}
.checkout-pagar{min-height:320px;}
.checkout-titulo{font-size:16px;margin:0 0 14px;}
.checkout-carregando{color:var(--tinta-fraca);font-size:13.5px;}
.checkout-seguro{display:flex;gap:7px;align-items:flex-start;font-size:12px;color:var(--tinta-fraca);margin:14px 0 0;}
.checkout-seguro .icone{margin-top:2px;}
.checkout-indisponivel{text-align:center;padding:30px 10px;color:var(--tinta-media);}
.checkout-indisponivel .icone{margin:0 auto 10px;color:var(--grafite);}
.checkout-indisponivel h2{font-size:18px;margin:0 0 6px;color:var(--tinta);}
.checkout-indisponivel p{max-width:380px;margin:0 auto 18px;}

.pix-cabeca{display:flex;gap:12px;align-items:flex-start;background:var(--ok-fundo);color:var(--ok);border-radius:var(--r-md);padding:12px 14px;margin-bottom:16px;}
.pix-cabeca strong{display:block;color:var(--tinta);}
.pix-cabeca small{color:var(--tinta-media);}
.pix-qr{width:220px;height:220px;margin:0 auto 16px;border:1px solid var(--linha);border-radius:var(--r-md);padding:8px;background:#fff;}
.pix textarea{font-family:ui-monospace,monospace;font-size:12px;resize:none;}
.pix-aguardando{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;color:var(--tinta-media);margin:14px 0 0;}
.pulso{width:9px;height:9px;border-radius:50%;background:var(--marca);animation:pulso 1.2s ease-in-out infinite;}
@keyframes pulso{0%,100%{opacity:.3;transform:scale(.8);}50%{opacity:1;transform:scale(1.1);}}

@media (max-width:860px){
  .checkout{grid-template-columns:1fr;}
  .checkout-resumo{position:static;}
}

/* minha assinatura */
.assinatura-atual{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.assinatura-plano{display:flex;gap:14px;align-items:center;}
.assinatura-plano small{font-size:12px;color:var(--tinta-fraca);text-transform:uppercase;letter-spacing:.06em;font-weight:700;}
.assinatura-plano h2{margin:0;font-size:22px;}
.assinatura-plano .sub{margin:2px 0 0;}
.avatar-grande{width:48px;height:48px;background:var(--grafite);color:#fff;}
.plano-btn-anual{margin-top:8px;}
.escolha-plano{padding-bottom:18px;border-bottom:1px solid var(--linha-suave);margin-bottom:20px;}
.escolha-plano-dica{font-size:12.5px;color:var(--tinta-media);}