/* =====================================================================
   Star Negócios — site da plataforma.

   Mesma linguagem visual dos painéis da Stargex: azul-marinho, azul de
   ação, tudo em pílula. Nada de canto reto em botão ou campo.

   A folha é própria: não divide classe com o painel nem com as telas das
   lojas, então mexer aqui nunca quebra o sistema de um cliente.
   ===================================================================== */

@font-face{font-family:"Archivo";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fontes/archivo-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fontes/archivo-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:800;font-display:swap;
  src:url("../fontes/archivo-latin-800-normal.woff2") format("woff2")}

:root{
  --navy:#12294A;
  --navy-claro:#1D3A63;
  --azul:#1E6BE1;
  --azul-escuro:#1553B4;
  --azul-lavado:#EAF2FF;
  --fundo:#F6F8FC;
  --branco:#FFFFFF;
  --linha:#E3E8F1;
  --texto:#16222F;
  --texto-fraco:#5C6B7D;
  --verde:#128C5A;
  --raio:999px;            /* botões e campos: pílula, sempre */
  --raio-card:22px;
  --sombra:0 18px 46px rgba(18,41,74,.10);
  --sombra-suave:0 6px 20px rgba(18,41,74,.07);
  --limite:1180px;
  --e2:8px; --e3:12px; --e4:18px; --e5:26px; --e6:36px; --e7:52px; --e8:72px; --e9:104px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--fundo);color:var(--texto);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;line-height:1.12;letter-spacing:-.02em;font-weight:800}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
.limite{width:min(100% - 40px, var(--limite));margin-inline:auto}
.pular{position:absolute;left:-9999px}
.pular:focus{left:16px;top:16px;background:var(--branco);padding:10px 18px;border-radius:var(--raio);z-index:99}

/* ---------------------------------------------------------- botões */
.botao{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:0;border-radius:var(--raio);padding:15px 30px;cursor:pointer;
  font:inherit;font-weight:700;font-size:1rem;text-decoration:none;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.botao:hover{transform:translateY(-1px)}
.botao-principal{background:var(--azul);color:var(--branco);box-shadow:0 10px 24px rgba(30,107,225,.28)}
.botao-principal:hover{background:var(--azul-escuro)}
.botao-claro{background:var(--branco);color:var(--navy);border:1.5px solid var(--linha)}
.botao-claro:hover{border-color:var(--azul);color:var(--azul)}
.botao-vazado{background:transparent;color:var(--branco);border:1.5px solid rgba(255,255,255,.55)}
.botao-vazado:hover{background:rgba(255,255,255,.12)}
.botao-largo{width:100%}

.selo{
  display:inline-block;background:var(--azul-lavado);color:var(--azul);
  border-radius:var(--raio);padding:7px 18px;font-size:.82rem;font-weight:700;
  letter-spacing:.02em;
}
.selo-claro{background:rgba(255,255,255,.14);color:#fff}

/* ---------------------------------------------------------- topo */
.topo{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--linha);
}
.topo-interno{display:flex;align-items:center;gap:var(--e5);height:78px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:1.16rem;letter-spacing:-.03em}
.marca-bolha{
  width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-size:1.05rem;flex:none;
}
.marca small{display:block;font-size:.66rem;font-weight:600;letter-spacing:.14em;color:var(--texto-fraco)}
.menu{display:flex;align-items:center;gap:4px;margin-left:auto}
.menu > a,.menu-item > button{
  background:none;border:0;font:inherit;color:var(--texto);cursor:pointer;
  padding:10px 14px;border-radius:var(--raio);text-decoration:none;font-weight:600;font-size:.95rem;
  display:inline-flex;align-items:center;gap:6px;
}
.menu > a:hover,.menu-item > button:hover{background:var(--azul-lavado);color:var(--azul)}
.menu-item{position:relative}
.menu-item > button svg{transition:transform .2s ease}
.menu-item.aberto > button svg{transform:rotate(180deg)}
.submenu{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px);
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-card);
  box-shadow:var(--sombra);padding:var(--e4);min-width:330px;display:none;opacity:0;
  transition:opacity .16s ease, transform .16s ease;
}
.menu-item.aberto .submenu{display:block;opacity:1;transform:translateX(-50%) translateY(0)}
/* Ponte invisível sobre o vão de 10px entre o botão e a lista: sem ela, o
   mouse "saía do menu" ao atravessar o vão e a lista fechava antes do clique. */
.submenu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.submenu-titulo{font-size:.72rem;font-weight:700;letter-spacing:.12em;color:var(--texto-fraco);
  text-transform:uppercase;margin-bottom:var(--e3)}
.submenu a{
  display:block;text-decoration:none;padding:11px 14px;border-radius:16px;
}
.submenu a:hover{background:var(--azul-lavado)}
.submenu a b{display:block;font-size:.97rem}
.submenu a span{font-size:.84rem;color:var(--texto-fraco)}
.acoes-topo{display:flex;align-items:center;gap:var(--e3)}
.entrar-topo{text-decoration:none;font-weight:700;font-size:.95rem;padding:10px 18px;border-radius:var(--raio);
  border:1.5px solid var(--linha)}
.entrar-topo:hover{border-color:var(--azul);color:var(--azul)}
.hamburguer{display:none;background:none;border:0;cursor:pointer;padding:8px;border-radius:var(--raio)}
.hamburguer span{display:block;width:24px;height:2.5px;background:var(--navy);border-radius:2px;margin:5px 0}

.menu-celular{display:none;border-top:1px solid var(--linha);background:var(--branco);padding:var(--e4) 0 var(--e6)}
.menu-celular.aberto{display:block}
.menu-celular details{border-bottom:1px solid var(--linha)}
.menu-celular summary{padding:14px 4px;font-weight:600;cursor:pointer;list-style:none}
.menu-celular summary::-webkit-details-marker{display:none}
.menu-celular details a,.menu-celular > a{display:block;padding:11px 16px;text-decoration:none;color:var(--texto-fraco)}
.menu-celular > a{border-bottom:1px solid var(--linha);padding:14px 4px;color:var(--texto);font-weight:600}
.menu-celular .botao{margin-top:var(--e4)}
/* O "Começar agora" do menu do celular é botão, não linha do menu. */
.menu-celular > a.botao{display:flex;justify-content:center;padding:15px 30px;border-bottom:0;color:var(--branco)}

/* ---------------------------------------------------------- capa */
.capa{
  background:
    radial-gradient(1100px 460px at 88% -10%, rgba(30,107,225,.55), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-claro) 100%);
  color:#fff;padding:var(--e9) 0 var(--e9);position:relative;overflow:hidden;
}
.capa::after{
  content:"";position:absolute;right:-120px;bottom:-160px;width:420px;height:420px;
  border-radius:50%;border:44px solid rgba(255,255,255,.05);
}
.capa-grade{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--e8);align-items:start;position:relative;z-index:1}
.capa h1{font-size:clamp(2.1rem,4.6vw,3.5rem);margin:var(--e4) 0 var(--e4)}
.capa-linha{font-size:1.12rem;color:rgba(255,255,255,.86);max-width:30rem}
.capa-acoes{display:flex;gap:var(--e3);flex-wrap:wrap;margin-top:var(--e6)}
.capa-itens{list-style:none;padding:0;margin:var(--e7) 0 0;display:grid;gap:var(--e3)}
.capa-itens li{display:flex;gap:10px;align-items:flex-start;color:rgba(255,255,255,.88);font-size:.98rem}
.capa-itens svg{flex:none;margin-top:3px}

/* -------------------------------------------------------- formulário */
.cartao-form{
  background:var(--branco);border-radius:var(--raio-card);padding:var(--e6);
  box-shadow:0 30px 70px rgba(6,18,36,.30);color:var(--texto);
}
.cartao-form h2{font-size:1.4rem}
.cartao-form .apoio{color:var(--texto-fraco);font-size:.94rem;margin-top:6px}
.campo{display:block;margin-top:var(--e4)}
.campo span{display:block;font-size:.85rem;font-weight:700;margin-bottom:7px}
.campo input,.campo select,.campo textarea{
  width:100%;border:1.5px solid var(--linha);border-radius:var(--raio);
  padding:13px 18px;font:inherit;font-size:.96rem;background:var(--branco);color:inherit;
}
.campo textarea{border-radius:20px;min-height:96px;resize:vertical}
/* O Chrome prende a entrelinha da lista (select) em "normal": sem altura fixa
   ela ficava 6px mais baixa que o campo do lado. Mesma altura para os dois. */
.campo input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),.campo select{height:calc(1.6em + 29px)}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 4px var(--azul-lavado)}
.campo-duplo{display:grid;grid-template-columns:1fr 1fr;gap:var(--e3)}
.armadilha{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Aviso de que a demonstração abre com o nome do negócio (fica à vista, não
   escondido no texto da autorização). */
.aviso-nome-demo{margin:var(--e4) 0 0;padding:12px 16px;border-radius:18px;background:var(--azul-lavado);
  color:var(--texto);font-size:.84rem;line-height:1.5;border:1px solid #D3E2FB}
.aviso-nome-demo b{display:block;color:var(--navy);font-size:.88rem;margin-bottom:2px}
.consentimento{display:flex;gap:10px;align-items:flex-start;margin-top:var(--e4);font-size:.85rem;color:var(--texto-fraco)}
.consentimento input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--azul)}
.aviso-form{margin-top:var(--e4);border-radius:18px;padding:12px 18px;font-size:.9rem}
.aviso-erro{background:#FDECEA;color:#8E2B20;border:1px solid #F0C4BE}
.aviso-ok{background:#EAF7F1;color:#0F6B46;border:1px solid #BFE5D3}
.form-sucesso{text-align:center;padding:var(--e5) 0}
.form-sucesso .marca-certo{
  width:64px;height:64px;border-radius:50%;background:#EAF7F1;color:var(--verde);
  display:grid;place-items:center;margin:0 auto var(--e4);
}

/* ---------------------------------------------------------- seções */
.secao{padding:var(--e9) 0}
.secao-clara{background:var(--branco)}
.secao-topo{max-width:42rem;margin-bottom:var(--e7)}
.secao-topo.centro{margin-inline:auto;text-align:center}
.secao h2{font-size:clamp(1.7rem,3.1vw,2.5rem);margin:var(--e4) 0 var(--e4)}
.secao-apoio{color:var(--texto-fraco);font-size:1.05rem}
.azul{color:var(--azul)}

.provas{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e5);
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-card);
  padding:var(--e6);box-shadow:var(--sombra-suave);margin-top:calc(var(--e8) * -1);position:relative;z-index:2}
.prova b{display:block;font-size:1.06rem;margin-bottom:6px}
.prova span{color:var(--texto-fraco);font-size:.94rem}

.grade-recursos{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e4)}
.recurso{
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-card);
  padding:var(--e5);transition:transform .16s ease, box-shadow .16s ease;
}
.recurso:hover{transform:translateY(-3px);box-shadow:var(--sombra-suave)}
.recurso-icone{width:46px;height:46px;border-radius:50%;background:var(--azul-lavado);color:var(--azul);
  display:grid;place-items:center;margin-bottom:var(--e4)}
.recurso b{display:block;font-size:1.05rem;margin-bottom:6px}
.recurso span{color:var(--texto-fraco);font-size:.93rem}
.recurso-grande{grid-column:span 2}

.diferenciais{display:grid;grid-template-columns:1fr 1fr;gap:var(--e5)}
.diferencial{display:flex;gap:var(--e4);align-items:flex-start}
.diferencial .certo{width:30px;height:30px;border-radius:50%;background:#EAF7F1;color:var(--verde);
  display:grid;place-items:center;flex:none}
.diferencial b{display:block;margin-bottom:4px}
.diferencial span{color:var(--texto-fraco);font-size:.95rem}

.ramos{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e4)}
.ramo-cartao{
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-card);
  padding:var(--e5);text-decoration:none;display:block;
}
.ramo-cartao:hover{border-color:var(--azul)}
.ramo-cartao b{display:block;font-size:1.05rem;margin-bottom:6px}
.ramo-cartao span{color:var(--texto-fraco);font-size:.92rem}
.ramo-cartao .seta{color:var(--azul);font-weight:700;font-size:.9rem;display:inline-block;margin-top:var(--e3)}

.casos{display:grid;grid-template-columns:1fr 1fr;gap:var(--e5)}
.caso{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-card);padding:var(--e6)}
.caso b{font-size:1.15rem;display:block}
.caso .ramo{color:var(--azul);font-size:.85rem;font-weight:700}
.caso p{color:var(--texto-fraco);margin-top:var(--e3)}

/* ---------------------------------------------------------- planos */
.planos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e5);align-items:start}
.plano{
  background:var(--branco);border:1.5px solid var(--linha);border-radius:var(--raio-card);
  padding:var(--e6);display:flex;flex-direction:column;gap:var(--e4);
}
.plano-destaque{border-color:var(--azul);box-shadow:var(--sombra);position:relative}
.plano-destaque::before{
  content:"Mais contratado";position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--azul);color:#fff;font-size:.74rem;font-weight:700;padding:6px 16px;border-radius:var(--raio);
}
.plano h3{font-size:1.3rem}
.plano .chamada{color:var(--texto-fraco);font-size:.93rem}
.plano-preco{font-size:2.5rem;font-weight:800;letter-spacing:-.03em}
.plano-preco small{font-size:.95rem;font-weight:600;color:var(--texto-fraco)}
.plano ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.plano li{display:flex;gap:10px;font-size:.95rem;align-items:flex-start}
.plano li svg{flex:none;margin-top:4px;color:var(--verde)}
.plano li.fora{color:var(--texto-fraco)}
.plano li.fora svg{color:var(--texto-fraco)}

/* ---------------------------------------------------------- FAQ */
.faq{display:grid;gap:var(--e3);max-width:52rem;margin-inline:auto}
.pergunta{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-card);overflow:hidden}
.pergunta button{
  width:100%;background:none;border:0;font:inherit;font-weight:700;text-align:left;
  padding:var(--e5);display:flex;justify-content:space-between;gap:var(--e4);cursor:pointer;color:inherit;
}
.pergunta button:hover{color:var(--azul)}
.pergunta .mais{color:var(--azul);font-size:1.4rem;line-height:1;flex:none;transition:transform .2s ease}
.pergunta.aberta .mais{transform:rotate(45deg)}
.resposta{max-height:0;overflow:hidden;transition:max-height .25s ease}
.pergunta.aberta .resposta{max-height:420px}
.resposta p{padding:0 var(--e5) var(--e5);color:var(--texto-fraco)}

/* ---------------------------------------------------------- chamada final */
.chamada-final{
  background:linear-gradient(160deg, var(--navy) 0%, var(--navy-claro) 100%);
  color:#fff;border-radius:var(--raio-card);padding:var(--e8);text-align:center;
}
.chamada-final h2{font-size:clamp(1.6rem,3vw,2.3rem)}
.chamada-final p{color:rgba(255,255,255,.84);margin:var(--e4) auto 0;max-width:36rem}
.chamada-final .capa-acoes{justify-content:center}

/* ---------------------------------------------------------- rodapé */
.rodape{background:var(--navy);color:rgba(255,255,255,.8);padding:var(--e8) 0 var(--e5);margin-top:var(--e9)}
.rodape-grade{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--e6)}
.rodape h3{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:var(--e4)}
.rodape ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rodape a{color:inherit;text-decoration:none;font-size:.94rem}
.rodape a:hover{color:#fff;text-decoration:underline}
.rodape .marca{color:#fff}
.rodape .marca-bolha{background:rgba(255,255,255,.14)}
.rodape-fim{border-top:1px solid rgba(255,255,255,.14);margin-top:var(--e7);padding-top:var(--e5);
  display:flex;justify-content:space-between;gap:var(--e4);flex-wrap:wrap;font-size:.86rem}

/* ---------------------------------------------------------- páginas */
.pagina{padding:var(--e8) 0 0}
.pagina h1{font-size:clamp(2rem,4vw,2.9rem)}
.texto{max-width:44rem;color:var(--texto-fraco);display:grid;gap:var(--e4);margin-top:var(--e5)}
.texto h2{color:var(--texto);font-size:1.3rem;margin-top:var(--e5)}

/* ---------------------------------------------------------- telas menores */
@media (max-width:1000px){
  .capa-grade{grid-template-columns:1fr;gap:var(--e7)}
  .grade-recursos{grid-template-columns:repeat(2,1fr)}
  .ramos{grid-template-columns:repeat(2,1fr)}
  .planos{grid-template-columns:1fr;max-width:32rem;margin-inline:auto}
  .rodape-grade{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .menu,.acoes-topo .entrar-topo{display:none}
  .hamburguer{display:block;margin-left:auto}
  .provas{grid-template-columns:1fr;margin-top:var(--e6)}
  .diferenciais,.casos{grid-template-columns:1fr}
  .secao{padding:var(--e8) 0}
  .capa{padding:var(--e7) 0}
}
@media (max-width:560px){
  body{font-size:16px}
  .grade-recursos,.ramos{grid-template-columns:1fr}
  .recurso-grande{grid-column:span 1}
  .rodape-grade{grid-template-columns:1fr}
  .campo-duplo{grid-template-columns:1fr}
  .cartao-form{padding:var(--e5)}
  .chamada-final{padding:var(--e6) var(--e5)}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;scroll-behavior:auto}
}

/* -------------------------------------------- utilidades das páginas
   Classes no lugar de style="" nas telas: a política de segurança do
   sistema não aceita estilo embutido, e não vale abrir exceção só para o
   site institucional. */
.centrada{text-align:center;margin-inline:auto}
.estreita{max-width:36rem}
.estreitinha{max-width:26rem}
.media{max-width:40rem}
.acima{margin-top:var(--e4)}
.acima-medio{margin-top:var(--e5)}
.acima-grande{margin-top:var(--e8)}
.acoes-centro{justify-content:center;margin-top:var(--e5)}
.rodape-texto{margin-top:var(--e4);font-size:.92rem}
.titulo-pagina{margin:var(--e4) 0}
.preco-consulta{font-size:1.5rem}
.cartao-elevado{box-shadow:var(--sombra)}

/* ------------------------------------------------ vitrine de demonstrações */
.filtros{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:var(--e4)}
.filtro{
  border:1.5px solid var(--linha);background:var(--branco);color:var(--texto);
  border-radius:var(--raio);padding:9px 18px;font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;
}
.filtro:hover{border-color:var(--azul);color:var(--azul)}
.filtro.ativo{background:var(--azul);border-color:var(--azul);color:#fff}
.vitrine{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e4);margin-top:var(--e5)}
.demo{
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-card);
  padding:var(--e5);display:flex;flex-direction:column;gap:var(--e4);
}
.demo-topo b{display:block;font-size:1.12rem;margin:6px 0 4px}
.demo-ramo{color:var(--azul);font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.demo-resumo{color:var(--texto-fraco);font-size:.92rem}
.demo-acoes{display:grid;gap:8px;margin-top:auto}
.demo-acoes .botao{padding:11px 18px;font-size:.92rem}
.demo-acesso{font-size:.8rem;color:var(--texto-fraco)}
.demo-acesso code{background:var(--fundo);border-radius:8px;padding:2px 7px}
.vazio-demo{background:var(--branco);border:1px dashed var(--linha);border-radius:var(--raio-card);
  padding:var(--e6);color:var(--texto-fraco);text-align:center}
.faixa-demo{
  background:#FFF4E0;color:#7A4D05;border-bottom:1px solid #F1D39A;
  padding:10px 0;font-size:.9rem;text-align:center;
}
.faixa-demo a{font-weight:700}
@media (max-width:1000px){ .vitrine{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .vitrine{grid-template-columns:1fr} }
.submenu-largo{min-width:min(760px, 92vw)}
.submenu-colunas{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.submenu-rodape{display:block;margin-top:var(--e3);padding-top:var(--e3);
  border-top:1px solid var(--linha);color:var(--azul);font-weight:700;font-size:.9rem}
@media (max-width:1100px){ .submenu-colunas{grid-template-columns:repeat(2,1fr)} }
/* Página com cabeçalho próprio seguida de seção: sem o buraco entre as duas. */
.pagina + .secao{padding-top:var(--e5)}

/* ------------------------------------------------- espaços de imagem
   Toda arte é opcional: sem o arquivo, a seção fica bonita do mesmo jeito.
   Por isso nenhuma altura depende da imagem existir. */
/* Com foto na capa: a foto aparece de verdade (nada de cinza lavado) e um
   véu escuro entra por cima, mais forte do lado do texto. É o véu que garante
   a leitura do título — e não o apagamento da foto. */
.capa-arte{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.72;pointer-events:none;
}
.capa-com-arte{background:var(--navy)}
.capa-com-arte::after{display:none}
.capa-com-arte::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg, rgba(8,20,38,.94) 0%, rgba(8,20,38,.80) 42%,
             rgba(8,20,38,.42) 72%, rgba(8,20,38,.30) 100%);
}
.capa-com-arte .capa-grade{position:relative;z-index:1}
@media (max-width:1000px){
  /* No celular o texto ocupa a largura toda: o véu precisa ser parelho. */
  .capa-com-arte::before{background:linear-gradient(180deg, rgba(8,20,38,.90), rgba(8,20,38,.80))}
}
.arte-larga{margin:0 0 var(--e6);border-radius:var(--raio-card);overflow:hidden;
  box-shadow:var(--sombra);border:1px solid var(--linha);background:var(--branco)}
.arte-larga img{width:100%;display:block}
.com-arte{display:grid;grid-template-columns:.8fr 1fr;gap:var(--e7);align-items:start}
.lista-diferenciais{display:grid;gap:var(--e5)}
.arte-lado{
  margin:0;border-radius:var(--raio-card);overflow:hidden;
  box-shadow:var(--sombra-suave);position:sticky;top:100px;aspect-ratio:3/4;
}
.arte-lado img{width:100%;height:100%;object-fit:cover;display:block}
.ramo-arte{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px;margin-bottom:var(--e4)}
.demo-arte{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px}
@media (max-width:860px){
  .com-arte{grid-template-columns:1fr}
  .arte-lado{position:static;aspect-ratio:16/9}
}
/* Cartão de ramo com altura estável, com ou sem arte. */
.ramo-cartao{display:flex;flex-direction:column;height:100%}
.ramo-cartao .seta{margin-top:auto;padding-top:var(--e3)}
.ramos{align-items:stretch}

/* ---------------------------------------------------------- vitrine */
.abas-vitrine{display:grid;grid-template-columns:1fr 1fr;gap:var(--e4);margin-bottom:var(--e5)}
.aba-vitrine{
  display:block;background:var(--branco);border:1.5px solid var(--linha);
  border-radius:var(--raio-card);padding:var(--e5);text-decoration:none;position:relative;
}
.aba-vitrine.ativa{border-color:var(--azul);box-shadow:var(--sombra-suave)}
.aba-vitrine b{display:block;font-size:1.1rem}
.aba-vitrine span{color:var(--texto-fraco);font-size:.92rem}
.aba-vitrine em{position:absolute;top:var(--e5);right:var(--e5);font-style:normal;
  background:var(--azul-lavado);color:var(--azul);border-radius:999px;padding:3px 12px;
  font-size:.8rem;font-weight:700}
.busca-vitrine{display:flex;gap:10px;flex-wrap:wrap}
.busca-vitrine input,.busca-vitrine select{
  border:1.5px solid var(--linha);border-radius:var(--raio);padding:13px 18px;
  font:inherit;font-size:.95rem;background:var(--branco);flex:1;min-width:170px;
}
.busca-vitrine input:focus,.busca-vitrine select:focus{outline:none;border-color:var(--azul);
  box-shadow:0 0 0 4px var(--azul-lavado)}
.negocio{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-card);
  padding:var(--e5);display:flex;flex-direction:column;gap:var(--e4)}
.negocio.fechado{opacity:.82}
.negocio-topo b{display:block;font-size:1.12rem;margin:6px 0 2px}
.negocio-onde{color:var(--texto-fraco);font-size:.88rem;display:block}
.negocio-estado{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;margin-top:auto}
.negocio-estado em{font-style:normal;font-weight:400;color:var(--texto-fraco);font-size:.85rem}
.ponto{width:9px;height:9px;border-radius:50%;background:#C2C9D4;flex:none}
.ponto.aceso{background:var(--verde)}
@media (max-width:640px){ .abas-vitrine{grid-template-columns:1fr} }
.campo-endereco{display:flex;align-items:center;gap:0;border:1.5px solid var(--linha);
  border-radius:var(--raio);padding-left:16px;background:var(--branco);overflow:hidden}
.campo-endereco em{font-style:normal;color:var(--texto-fraco);font-size:.9rem;white-space:nowrap}
.campo-endereco{flex-wrap:nowrap}
.campo-endereco input{border:0;flex:1 1 auto;width:auto;min-width:0;padding:13px 10px}
.campo-endereco input:focus{outline:none;box-shadow:none}
.campo-endereco:focus-within{border-color:var(--azul);box-shadow:0 0 0 4px var(--azul-lavado)}
.campo-ajuda{display:block;font-size:.8rem;color:var(--texto-fraco);margin-top:6px}
.campo-ajuda.ok{color:var(--verde)}
.campo-ajuda.ruim{color:#B3261E}
/* Faixa de arte no topo das páginas internas (vitrine). */
.pagina-com-arte{position:relative;overflow:hidden;padding-top:var(--e8)}
.faixa-arte{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.14;pointer-events:none}
.pagina-com-arte .limite{position:relative;z-index:1}
/* A logo da Stargex no lugar da bolha, quando o arquivo está na pasta. */
.marca-logo{width:46px;height:auto;flex:none}
.rodape .marca-logo{filter:none}

/* ------------------------------------------- itens na busca da vitrine */
.itens-vitrine{margin:var(--e5) 0 var(--e7)}
.titulo-itens{font-size:1.25rem;margin-bottom:var(--e4)}
.titulo-itens small{display:block;font-size:.88rem;font-weight:400;color:var(--texto-fraco);
  letter-spacing:0;margin-top:4px}
.grade-itens{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--e4)}
.item-vitrine{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-card);
  overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:transform .15s ease}
.item-vitrine:hover{transform:translateY(-2px);border-color:var(--azul)}
.item-vitrine img{width:100%;aspect-ratio:4/3;object-fit:cover}
.item-texto{padding:var(--e4);display:flex;flex-direction:column;gap:4px}
.item-texto b{font-size:1rem}
.item-desc{color:var(--texto-fraco);font-size:.86rem}
.item-preco{font-weight:700;color:var(--navy)}
.item-preco em{font-style:normal;font-weight:600;font-size:.82rem;color:var(--texto-fraco)}
.item-loja{font-size:.82rem;color:var(--azul);margin-top:auto;padding-top:6px}

/* ============================================ Stargex Classificados
   Anúncio item a item: grade no estilo classificado (foto grande, preço em
   cima, casa e bairro embaixo) e a página do anúncio. */
.abas-vitrine{grid-template-columns:repeat(3,1fr)}
.aba-anuncios b::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;
  background:var(--verde);margin-right:8px;vertical-align:2px}
@media (max-width:900px){ .abas-vitrine{grid-template-columns:1fr} }

.titulo-itens-linha{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--e4);flex-wrap:wrap}
.grade-anuncios{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--e4)}
.anuncio-cartao{display:flex;flex-direction:column;background:var(--branco);border:1px solid var(--linha);
  border-radius:var(--raio-card);overflow:hidden;text-decoration:none;color:var(--texto);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.anuncio-cartao:hover{transform:translateY(-3px);box-shadow:var(--sombra);border-color:var(--cor-casa,var(--azul))}
.anuncio-cartao:focus-visible{outline:3px solid var(--azul);outline-offset:3px}
.anuncio-foto{position:relative;aspect-ratio:4/3;background:var(--fundo);display:block;overflow:hidden}
.anuncio-foto img{width:100%;height:100%;object-fit:cover}
.anuncio-sem-foto{display:grid;place-items:center;width:100%;height:100%;font-size:3rem;font-weight:800;
  color:#fff;background:var(--cor-casa,var(--azul))}
.anuncio-sem-foto.grande{aspect-ratio:1;font-size:6rem;border-radius:var(--raio-card)}
.anuncio-estado{position:absolute;left:10px;top:10px;background:rgba(22,34,47,.78);color:#fff;
  font-size:.74rem;font-weight:700;padding:4px 11px;border-radius:var(--raio)}
.anuncio-estado.aceso{background:var(--verde)}
.anuncio-texto{display:flex;flex-direction:column;gap:3px;padding:var(--e3) var(--e4) var(--e4)}
.anuncio-preco{font-size:1.18rem;font-weight:800}
.anuncio-preco em,.anuncio-preco-grande em{font-style:normal;font-weight:500;font-size:.8em;color:var(--texto-fraco)}
.anuncio-nome{font-size:.98rem;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.anuncio-casa{font-size:.86rem;font-weight:700;color:var(--cor-casa,var(--azul));margin-top:4px}
.anuncio-onde{font-size:.82rem;color:var(--texto-fraco)}

.busca-anuncios{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:10px;align-items:center;
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-card);padding:var(--e4)}
.busca-anuncios input,.busca-anuncios select{font:inherit;font-size:.95rem;padding:12px 18px;min-width:0;
  border:1px solid var(--linha);border-radius:var(--raio);background:var(--branco);color:var(--texto);width:100%}
.busca-anuncios input:focus,.busca-anuncios select:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 4px var(--azul-lavado)}
.busca-preco{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--texto-fraco);white-space:nowrap}
.busca-marca{display:flex;align-items:center;gap:8px;font-size:.9rem;cursor:pointer}
.busca-marca input{width:18px;height:18px;padding:0;accent-color:var(--azul)}
.busca-anuncios .botao{width:100%}
@media (max-width:900px){ .busca-anuncios{grid-template-columns:1fr 1fr} .busca-anuncios-texto{grid-column:1/-1} }
@media (max-width:520px){ .busca-anuncios{grid-template-columns:1fr} }
.paginacao{display:flex;justify-content:center;align-items:center;gap:var(--e4);margin-top:var(--e6);color:var(--texto-fraco)}

.anuncio-pagina{padding-top:var(--e6)}
.migalhas{font-size:.88rem;color:var(--texto-fraco);margin-bottom:var(--e5)}
.migalhas a{color:var(--texto-fraco)}
.anuncio-grade{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--e7);align-items:start}
.anuncio-galeria img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--raio-card);box-shadow:var(--sombra)}
.anuncio-titulo{font-size:clamp(1.7rem,3vw,2.4rem);margin:var(--e3) 0 var(--e3)}
.anuncio-preco-grande{font-size:2rem;font-weight:800;color:var(--cor-casa,var(--azul))}
.anuncio-descricao{margin-top:var(--e4);color:var(--texto-fraco);font-size:1.02rem}
.anuncio-acoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--e5)}
.anuncio-acoes .botao-principal{background:var(--cor-casa,var(--azul));box-shadow:none}
.anuncio-garantias{list-style:none;padding:0;margin:var(--e5) 0 0;display:grid;gap:10px;font-size:.93rem;color:var(--texto-fraco)}
.anuncio-garantias li{padding-left:26px;position:relative}
.anuncio-garantias li::before{content:"✓";position:absolute;left:0;top:0;color:var(--verde);font-weight:800}
.anuncio-garantias b{color:var(--texto)}
.anuncio-casa-cartao{display:flex;align-items:center;gap:var(--e4);margin-top:var(--e5);padding:var(--e4);
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-card)}
.anuncio-casa-cartao > div{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.anuncio-casa-cartao > div > span{font-size:.86rem;color:var(--texto-fraco)}
.anuncio-casa-marca{width:52px;height:52px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--cor-casa,var(--azul));color:#fff;font-weight:800;font-size:1.3rem}
.anuncio-mais{margin-top:var(--e8)}
@media (max-width:860px){ .anuncio-grade{grid-template-columns:1fr;gap:var(--e5)}
  .anuncio-casa-cartao{flex-wrap:wrap} }

/* Classificados: ofertas, patrocínio, distância, denúncia e recados. */
.anuncio-selo{position:absolute;right:10px;top:10px;background:rgba(255,255,255,.94);color:var(--texto);
  font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:var(--raio)}
.anuncio-selo.oferta{background:#D93A1E;color:#fff}
.anuncio-preco s,.anuncio-preco-grande s{font-size:.72em;font-weight:500;color:var(--texto-fraco)}
.anuncio-relogio{font-size:.76rem;font-weight:700;color:#B3301A;margin-top:2px}
.anuncio-oferta-aviso{margin-top:var(--e3);background:#FFF1EC;color:#8A2512;border-radius:14px;
  padding:10px 16px;font-size:.92rem}
.anuncio-oferta-aviso.neutro{background:var(--azul-lavado);color:var(--navy)}
.relampago{margin-top:var(--e6)}
.faixa-relampago{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,240px);gap:var(--e4);
  overflow-x:auto;padding-bottom:var(--e3);scroll-snap-type:x mandatory}
.faixa-relampago > *{scroll-snap-align:start}
.busca-anuncios{grid-template-columns:2fr repeat(4,1fr)}
@media (max-width:900px){ .busca-anuncios{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .busca-anuncios{grid-template-columns:1fr} }
.denuncia{margin-top:var(--e6);font-size:.9rem;color:var(--texto-fraco)}
.denuncia summary{cursor:pointer;display:inline-block;padding:8px 16px;border-radius:var(--raio);border:1px solid var(--linha)}
.denuncia form{display:grid;gap:var(--e3);max-width:560px;margin-top:var(--e4);background:var(--branco);
  border:1px solid var(--linha);border-radius:var(--raio-card);padding:var(--e5)}
.denuncia fieldset{border:0;padding:0;margin:0;display:grid;gap:8px}
.denuncia legend{font-weight:700;color:var(--texto);margin-bottom:8px}
.denuncia textarea{font:inherit;border:1px solid var(--linha);border-radius:18px;padding:12px 16px}
.denuncia .botao{justify-self:start}
.recados-site{padding-top:var(--e4)}
.recado-site{background:#EAF7F1;color:#0E6B45;border-radius:var(--raio);padding:12px 22px;font-weight:600}
.recado-site.erro{background:#FFF1EC;color:#8A2512}

/* Espaços de publicidade: parecem um cartão da lista, com etiqueta, e somem
   quando o Google não tem anúncio para mostrar (sem buraco na tela). */
.espaco-publicidade{position:relative}
.publicidade-rede{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-card);
  padding:26px 12px 12px;min-height:120px}
.publicidade-rede .adsbygoogle{display:block;width:100%}
.rotulo-publicidade{position:absolute;left:14px;top:6px;font-size:.68rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--texto-fraco)}
.publicidade-rede:has(ins[data-ad-status="unfilled"]){display:none}
.app-banner-na-grade{grid-column:1/-1}

/* Cabeçalho: nada quebra em duas linhas. Quando falta espaço, sai primeiro
   "Recursos", depois "Demonstrações" (os dois continuam no menu do celular e
   no rodapé), e abaixo de 1000px entra o menu de três linhas. */
.topo-interno .marca span,.menu > a,.menu-item > button,.entrar-topo,.acoes-topo .botao{white-space:nowrap}
.marca{flex:none}
/* "Recursos" é âncora da página inicial: no cabeçalho do computador não cabe
   junto com o resto (medido: passaria 59 px da largura útil). Fica no menu do
   celular e no rodapé. */
.menu > a.menu-some-1{display:none}
@media (max-width:1190px){ .menu > a.menu-some-2{display:none} }
@media (max-width:1050px){
  .menu,.acoes-topo .entrar-topo{display:none}
  .hamburguer{display:block;margin-left:auto}
}
@media (max-width:560px){
  .acoes-topo .botao{display:none}          /* "Começar agora" fica no menu */
  .marca small{letter-spacing:.08em}
}

/* ============================================ Comércio Stargex (estilo OLX)
   Barra de busca grande com cidade e "Anunciar grátis", faixa de categorias
   com ícone, filtros na lateral e a grade de anúncios. */
.comercio-busca{display:flex;align-items:center;gap:10px;background:var(--branco);border:1px solid var(--linha);
  border-radius:var(--raio);padding:8px 8px 8px 22px;box-shadow:var(--sombra-leve,0 4px 18px rgba(18,41,74,.06));
  margin:var(--e4) 0}
.comercio-busca-texto{flex:1;min-width:0;border:0;font:inherit;font-size:1.02rem;background:transparent;padding:10px 0}
.comercio-busca-texto:focus{outline:none}
.comercio-busca-texto::placeholder{text-overflow:ellipsis}
/* Carrinho da barra: da mesma altura do "Buscar" e do "Anunciar grátis". */
.comercio-busca .botao-carrinho-topo{width:56px;height:56px}
.comercio-busca-texto{text-overflow:ellipsis}
.comercio-busca-cidade{display:flex;align-items:center;gap:6px;padding:0 14px;border-left:1px solid var(--linha);
  color:var(--navy);font-weight:600;white-space:nowrap}
.comercio-busca-cidade select{border:0;background:transparent;font:inherit;font-weight:700;color:var(--navy);max-width:170px}
.comercio-busca .botao{white-space:nowrap}
.botao-anunciar{background:var(--laranja,#F28C28);color:#fff;border:0}
.botao-anunciar:hover{filter:brightness(.95);color:#fff}

.comercio-categorias{display:flex;gap:6px;overflow-x:auto;padding:6px 2px 14px;margin-bottom:var(--e3);
  scrollbar-width:thin}
.comercio-categorias a{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;width:96px;
  padding:10px 4px;border-radius:18px;text-decoration:none;color:var(--texto);font-size:.78rem;font-weight:600;
  text-align:center;line-height:1.2}
.comercio-categorias a span{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:1.55rem;
  background:var(--branco);border:1px solid var(--linha)}
.comercio-categorias a:hover span{border-color:var(--azul)}
.comercio-categorias a.ativa{color:var(--azul)}
.comercio-categorias a.ativa span{background:var(--azul-lavado);border-color:var(--azul)}

.comercio-corpo{display:grid;grid-template-columns:250px minmax(0,1fr);gap:var(--e6);align-items:start}
.comercio-filtros{position:sticky;top:96px;background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-card);
  padding:var(--e5)}
.comercio-filtros form{display:grid;gap:var(--e4)}
.comercio-filtros h2{font-size:1.05rem}
.comercio-filtros label{display:grid;gap:6px;font-size:.88rem;font-weight:600}
.comercio-filtros select,.comercio-filtros input[type=number]{font:inherit;font-weight:400;padding:10px 16px;border:1px solid var(--linha);
  border-radius:var(--raio);background:var(--branco);width:100%;min-width:0}
.comercio-filtros fieldset{border:0;padding:0;margin:0;display:grid;gap:8px}
.comercio-filtros legend{font-size:.88rem;font-weight:700;margin-bottom:6px}
.comercio-filtros .busca-marca{display:flex;font-weight:500}
.comercio-filtros .botao{width:100%;white-space:nowrap}
.limpar-filtros{font-size:.88rem;text-align:center}
.comercio-resultados{min-width:0}
.comercio-resultados .grade-anuncios{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.anuncio-estado.particular{background:#5C6B7D}
@media (max-width:900px){
  .comercio-corpo{grid-template-columns:1fr}
  .comercio-filtros{position:static}
  /* Quebrada em linhas, a barra vira grade: o campo em cima e cada botão na
     sua coluna, tudo na mesma linha de centro (pílula de 3 linhas virava oval). */
  .comercio-busca{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:10px;padding:10px;
    border-radius:var(--raio-card)}
  .comercio-busca-texto{grid-column:1/-1;padding:8px 12px}
  .comercio-busca-cidade{border-left:0;padding:0 6px;min-width:0}
  .comercio-busca-cidade select{min-width:0;max-width:100%}
}
@media (max-width:560px){
  .comercio-busca{grid-template-columns:minmax(0,1fr) auto auto}
  .comercio-busca .botao-anunciar{grid-column:1/-1}
}

/* Anunciar grátis / meus anúncios */
.anunciar-grade{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--e7);align-items:start}
.planos-anuncio{display:grid;grid-template-columns:1fr 1fr;gap:var(--e4);margin-top:var(--e5)}
.plano-anuncio{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-card);padding:var(--e5)}
.plano-anuncio.destaque{border-color:var(--azul)}
.plano-anuncio h2{font-size:1.05rem;margin-bottom:var(--e3)}
.plano-anuncio ul{padding-left:18px;margin:0 0 var(--e4);display:grid;gap:6px;font-size:.92rem;color:var(--texto-fraco)}
.anunciar-caixas{display:grid;gap:var(--e5)}
.caixa-conta,.form-anuncio{display:grid;gap:var(--e4);background:var(--branco);border:1px solid var(--linha);
  border-radius:var(--raio-card);padding:var(--e5)}
.caixa-conta h2{font-size:1.15rem}
.caixa-conta label,.form-anuncio label{display:grid;gap:6px;font-weight:600;font-size:.92rem}
.caixa-conta label.busca-marca{display:flex;font-weight:400;font-size:.86rem;align-items:flex-start}
.caixa-conta input,.form-anuncio input,.form-anuncio select,.form-anuncio textarea{font:inherit;font-weight:400;padding:12px 18px;
  border:1px solid var(--linha);border-radius:var(--raio);background:var(--branco);width:100%;min-width:0;box-sizing:border-box}
.form-anuncio textarea{border-radius:20px}
.caixa-conta .botao,.form-anuncio .botao{justify-self:start;white-space:nowrap}
.limite-estreito{max-width:760px}
.form-anuncio-linha{display:grid;grid-template-columns:1fr 1fr;gap:var(--e4)}
.form-anuncio-acoes{display:flex;gap:10px;flex-wrap:wrap}
.fotos-anuncio{display:grid;gap:10px;font-weight:600;font-size:.92rem}
.fotos-atuais{display:flex;gap:10px;flex-wrap:wrap}
.foto-atual{display:grid;gap:4px;font-weight:400;font-size:.82rem}
.foto-atual img{width:96px;height:96px;object-fit:cover;border-radius:14px}
.meus-topo{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--e4);flex-wrap:wrap;margin-bottom:var(--e5)}
.meus-acoes{display:flex;gap:10px}
.lista-meus{display:grid;gap:12px}
.meu-anuncio{display:flex;align-items:center;gap:var(--e4);background:var(--branco);border:1px solid var(--linha);
  border-radius:var(--raio-card);padding:var(--e4);flex-wrap:wrap}
.meu-anuncio > img,.meu-sem-foto{width:84px;height:84px;border-radius:14px;object-fit:cover;flex:none}
.meu-sem-foto{display:grid;place-items:center;background:var(--azul-lavado);color:var(--azul);font-weight:800;font-size:1.6rem}
.meu-texto{flex:1;min-width:200px;display:grid;gap:3px}
.meu-texto span,.meu-texto small{color:var(--texto-fraco);font-size:.88rem}
.meu-botoes{display:flex;gap:8px;flex-wrap:wrap}
.meu-botoes .botao{padding:9px 18px;font-size:.88rem;white-space:nowrap}
.botao-perigo{background:var(--branco);border:1.5px solid #F0C4BE;color:#B3301A}
.aviso-plano{margin-top:var(--e6);background:var(--azul-lavado);border-radius:var(--raio-card);padding:var(--e4) var(--e5);color:var(--navy)}
.galeria-extra{display:flex;gap:10px;margin-top:10px}
.galeria-extra img{width:110px;height:110px;object-fit:cover;border-radius:14px}
@media (max-width:900px){
  .anunciar-grade,.planos-anuncio,.form-anuncio-linha{grid-template-columns:1fr}
}
.secao-comercio{padding-top:var(--e4)}
.abas-compactas .abas-vitrine{display:flex;gap:8px;overflow-x:auto;margin:0 0 var(--e5)}
.abas-compactas .aba-vitrine{flex:none;padding:9px 18px;border-radius:var(--raio)}
.abas-compactas .aba-vitrine b{font-size:.9rem;white-space:nowrap}
.abas-compactas .aba-vitrine span,.abas-compactas .aba-vitrine em{display:none}
.demo-ramo{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:middle}
.migalhas a{white-space:nowrap}

/* ---------- Cartão de anúncio, versão maior (como os marketplaces grandes):
   foto maior, título primeiro, preço grande, etiquetas e "quando". */
.grade-anuncios,.comercio-resultados .grade-anuncios{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--e5)}
.anuncio-cartao{position:relative}
.anuncio-link{display:flex;flex-direction:column;flex:1;text-decoration:none;color:inherit}
.anuncio-link:focus-visible{outline:3px solid var(--azul);outline-offset:3px;border-radius:var(--raio-card)}
.anuncio-foto{aspect-ratio:1/1}
.anuncio-texto{padding:var(--e4) var(--e4) var(--e5);gap:5px}
.anuncio-nome{font-size:1.04rem;font-weight:600;color:var(--texto);order:0}
.anuncio-preco{font-size:1.4rem;font-weight:800;color:var(--navy);order:1;margin-top:2px}
.anuncio-etiquetas{order:2;display:flex;flex-wrap:wrap;gap:6px;margin:2px 0}
.anuncio-etiquetas i{font-style:normal;font-size:.74rem;font-weight:700;padding:3px 10px;border-radius:var(--raio);
  background:var(--fundo);border:1px solid var(--linha);color:var(--texto-fraco);white-space:nowrap}
.anuncio-etiquetas i.etq-nova{background:#EAF7F1;border-color:#BFE3D3;color:#0E6B45}
.anuncio-casa{order:3;margin-top:6px}
.anuncio-onde{order:4;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.anuncio-quando{color:var(--texto-fraco);white-space:nowrap}
.anuncio-relogio{order:5}
.anuncio-cartao.em-destaque{border:2px solid #F28C28;box-shadow:0 10px 30px rgba(242,140,40,.18)}
.anuncio-cartao.em-destaque .anuncio-selo{background:#F28C28;color:#fff}
.favoritar{position:absolute;right:10px;top:calc(10px + 34px);width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.95);display:grid;place-items:center;box-shadow:0 4px 12px rgba(18,41,74,.15)}
.favoritar svg{width:21px;height:21px;fill:none;stroke:#D93A1E;stroke-width:2}
.favoritar[aria-pressed="true"] svg{fill:#D93A1E}
.faixa-relampago{grid-auto-columns:minmax(240px,260px)}
@media (max-width:560px){ .grade-anuncios,.comercio-resultados .grade-anuncios{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .anuncio-preco{font-size:1.15rem} .anuncio-nome{font-size:.95rem} .anuncio-texto{padding:12px}
  .anuncio-onde{font-size:.76rem} .favoritar{width:36px;height:36px} }

/* Favoritos e vistos recentemente (montados pelo favoritos.js) */
.grade-mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.faixa-mini{display:grid;grid-auto-flow:column;grid-auto-columns:160px;gap:12px;overflow-x:auto;padding-bottom:6px}
.mini-anuncio{display:grid;gap:3px;text-decoration:none;color:var(--texto);background:var(--branco);border:1px solid var(--linha);
  border-radius:18px;overflow:hidden;padding-bottom:10px}
.mini-anuncio > b,.mini-anuncio > span,.mini-anuncio > small{padding:0 12px}
.mini-anuncio > b{font-size:1.02rem;margin-top:6px}
.mini-anuncio > span{font-size:.88rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini-anuncio > small{font-size:.76rem;color:var(--texto-fraco)}
.mini-foto{aspect-ratio:1;background:var(--azul-lavado);display:grid;place-items:center;font-weight:800;color:var(--azul);font-size:1.6rem}
.mini-foto img{width:100%;height:100%;object-fit:cover}
.vistos-comercio{margin:0 0 var(--e5)}
.vistos-comercio h2{font-size:1.05rem;margin-bottom:10px}

.galeria-extra .miniatura{padding:0;border:2px solid transparent;border-radius:16px;background:none;cursor:pointer;overflow:hidden}
.galeria-extra .miniatura.ativa{border-color:var(--azul)}
.galeria-extra .miniatura img{display:block}
.botao-salvar[aria-pressed="true"]{border-color:#D93A1E;color:#D93A1E}
.anuncio-pagina .anuncio-etiquetas{display:flex;gap:6px;flex-wrap:wrap;margin-top:var(--e3)}
.marca-negociavel{align-self:end;padding-bottom:12px}
.qualidade-anuncio{background:var(--fundo);border-radius:20px;padding:var(--e4) var(--e5);display:grid;gap:10px}
.qualidade-barra{height:10px;border-radius:999px;background:var(--linha);overflow:hidden}
.qualidade-barra span{display:block;height:100%;width:0;border-radius:999px;background:#D93A1E;transition:width .25s ease}
.qualidade-anuncio[data-nivel="2"] .qualidade-barra span{background:#F28C28}
.qualidade-anuncio[data-nivel="3"] .qualidade-barra span,.qualidade-anuncio[data-nivel="4"] .qualidade-barra span{background:var(--verde)}
.qualidade-anuncio p{margin:0;font-size:.92rem}
.qualidade-dicas{margin:0;padding-left:0;list-style:none;display:grid;gap:6px;font-size:.88rem;color:var(--texto-fraco)}
.qualidade-dicas li::before{content:"○ ";color:var(--texto-fraco)}
.qualidade-dicas li.feito{color:var(--verde)}
.qualidade-dicas li.feito::before{content:"✓ "}
.marca-negociavel{align-self:end;padding-bottom:12px}
.qualidade-anuncio{background:var(--fundo);border-radius:20px;padding:var(--e4) var(--e5);display:grid;gap:10px}
.qualidade-barra{height:10px;border-radius:999px;background:var(--linha);overflow:hidden}
.qualidade-barra span{display:block;height:100%;width:0;border-radius:999px;background:#D93A1E;transition:width .25s ease}
.qualidade-anuncio[data-nivel="1"] .qualidade-barra span{width:25%}
.qualidade-anuncio[data-nivel="2"] .qualidade-barra span{width:50%;background:#F28C28}
.qualidade-anuncio[data-nivel="3"] .qualidade-barra span{width:75%;background:var(--verde)}
.qualidade-anuncio[data-nivel="4"] .qualidade-barra span{width:100%;background:var(--verde)}
.qualidade-anuncio p{margin:0;font-size:.92rem}
.qualidade-dicas{margin:0;padding-left:0;list-style:none;display:grid;gap:6px;font-size:.88rem;color:var(--texto-fraco)}
.qualidade-dicas li::before{content:"○ ";color:var(--texto-fraco)}
.qualidade-dicas li.feito{color:var(--verde)}
.qualidade-dicas li.feito::before{content:"✓ "}
.comercio-filtros details > summary{cursor:pointer;font-weight:800;font-size:1.05rem;list-style:none;margin-bottom:var(--e4)}
.comercio-filtros details > summary::-webkit-details-marker{display:none}
@media (min-width:901px){ .comercio-filtros details > summary{pointer-events:none} }
@media (max-width:900px){
  .comercio-filtros{padding:0;border:0;background:none}
  .comercio-filtros details > summary{display:inline-block;padding:9px 18px;border-radius:var(--raio);border:1px solid var(--linha);
    background:var(--branco);font-size:.92rem;margin-bottom:10px}
  .comercio-filtros details[open] form{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-card);padding:var(--e5)}
}

/* Comércio (busca, anúncio, casas, favoritos): usa a tela toda, como a OLX.
   O resto do site continua na largura de leitura (--limite). */
.pagina-larga .limite{width:min(100% - 48px,1720px)}
@media (min-width:901px){ .pagina-larga .comercio-corpo{grid-template-columns:270px minmax(0,1fr)} }
@media (min-width:561px){
  .pagina-larga .grade-anuncios,.pagina-larga .comercio-resultados .grade-anuncios{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
}
.pagina-larga .comercio-categorias a{width:108px}
.pagina-larga .comercio-categorias a span{width:58px;height:58px;font-size:1.7rem}
.pagina-larga .comercio-busca{padding:10px 10px 10px 26px}
.pagina-larga .comercio-busca-texto{font-size:1.1rem}
/* Cabeçalho acompanha a largura, mas o menu cabe em qualquer uma. */
.pagina-larga .topo-interno.limite{width:min(100% - 48px,1720px)}
@media (min-width:1500px){
  .pagina-larga .anuncio-grade{grid-template-columns:1.2fr 1fr}
}

.aceite-contrato{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;line-height:1.5;margin-top:var(--e3)}
.aceite-contrato input{width:18px;height:18px;margin-top:3px;flex:none;accent-color:var(--azul)}

/* Termos, Contrato e Suporte: leitura confortável. */
.texto-juridico{max-width:820px}
.texto-juridico h2{font-size:1.2rem;margin:var(--e6) 0 var(--e3)}
.texto-juridico p,.texto-juridico li{line-height:1.7;color:var(--texto)}
.texto-juridico ul{padding-left:22px;display:grid;gap:6px}
.suporte-caixa{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e4);background:var(--branco);border:1px solid var(--linha);
  border-radius:var(--raio-card);padding:var(--e5);margin:var(--e5) 0}
.suporte-caixa > div{flex:1;min-width:220px;display:grid;gap:4px}
.suporte-caixa span{color:var(--texto-fraco)}
.tabela-suporte{width:100%;border-collapse:collapse;background:var(--branco);border-radius:var(--raio-card);overflow:hidden;border:1px solid var(--linha)}
.tabela-suporte th,.tabela-suporte td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--linha);font-size:.93rem}
.tabela-suporte th{background:var(--fundo)}

/* Planos: cartões da mesma altura, botão sempre no pé do cartão. */
.planos{align-items:stretch}
.plano ul{flex:1;align-content:start}
.plano > .botao{margin-top:auto}
.plano-zero{margin:-6px 0 0;font-size:.86rem;font-weight:700;color:var(--verde)}
.sem-item{width:16px;flex:none;text-align:center;font-weight:800;color:var(--texto-fraco)}
/* O diferencial em destaque: nada por venda. */
.sem-comissao{display:flex;align-items:center;gap:var(--e5);background:#EAF7F1;border:1.5px solid #BFE3D3;
  border-radius:var(--raio-card);padding:var(--e5) var(--e6);margin:0 auto var(--e7);max-width:980px}
.sem-comissao-numero{font-family:var(--fonte-titulo,inherit);font-size:3.4rem;font-weight:800;color:#0E6B45;line-height:1;flex:none}
.sem-comissao b{display:block;font-size:1.3rem;color:#0B3D29;margin-bottom:4px}
.sem-comissao span{color:#23543F}
@media (max-width:640px){ .sem-comissao{flex-direction:column;align-items:flex-start;gap:var(--e3)} .sem-comissao-numero{font-size:2.6rem} }

/* Ícones 3D das categorias (static/img/categorias/<chave>.png). */
.comercio-categorias a span{overflow:hidden}
.comercio-categorias a span img{width:78%;height:78%;object-fit:contain}
.pagina-larga .comercio-categorias a span img{width:80%;height:80%}

/* Demonstrações: tela toda, grupos, cartões compactos, "como testar" no topo. */
.demo-cabeca{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--e7);align-items:center}
.demo-passos{list-style:none;counter-reset:passo;margin:0;padding:var(--e5);display:grid;gap:var(--e4);
  background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-card);box-shadow:var(--sombra-suave)}
.demo-passos li{counter-increment:passo;display:grid;grid-template-columns:40px 1fr;column-gap:14px;align-items:start}
.demo-passos li::before{content:counter(passo);grid-row:span 2;width:40px;height:40px;border-radius:50%;display:grid;
  place-items:center;background:var(--azul);color:#fff;font-weight:800}
.demo-passos b{font-size:1rem}
.demo-passos span{color:var(--texto-fraco);font-size:.92rem}
.secao-demos{padding-top:var(--e5)}
.demo-grupo{margin-bottom:var(--e7)}
.demo-grupo-topo{display:flex;align-items:baseline;gap:var(--e4);flex-wrap:wrap;margin-bottom:var(--e4)}
.demo-grupo-topo h2{font-size:1.5rem}
.demo-grupo-topo span{color:var(--texto-fraco);font-size:.95rem}
.vitrine{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:var(--e5);margin-top:0}
.demo{padding:var(--e4);gap:var(--e3)}
.demo-arte{aspect-ratio:16/9;width:100%;object-fit:cover;border-radius:18px}
.demo-topo b{font-size:1.05rem}
.demo-resumo{font-size:.88rem}
.demo-acoes-par{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.demo-acoes .botao{white-space:nowrap}
.demo-escola{background:var(--azul-lavado);border-radius:18px;padding:12px 14px;display:grid;gap:6px;font-size:.88rem}
.demo-escola b{color:var(--navy)}
.demo-escola span{color:var(--texto-fraco)}
.demo-escola-perfis{display:flex;flex-wrap:wrap;gap:6px}
.demo-escola-perfis a{background:var(--branco);border:1px solid var(--linha);border-radius:999px;padding:6px 12px;
  text-decoration:none;font-weight:700;color:var(--navy);white-space:nowrap}
.demo-escola-perfis a:hover{border-color:var(--azul);color:var(--azul)}
@media (max-width:900px){ .demo-cabeca{grid-template-columns:1fr;gap:var(--e5)} }

.demo-chamada{background:var(--navy);border-color:var(--navy);color:#fff;justify-content:center}
.demo-chamada b{font-size:1.25rem;line-height:1.25}
.demo-chamada span{color:#C8D6EC;font-size:.92rem}
.demo-chamada .botao-claro{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}

/* Escola e cursinho (produto sob consulta) */
.escola-capa{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--e7);align-items:center}
.escola-preco{background:var(--branco);border:1.5px solid var(--azul);border-radius:var(--raio-card);padding:var(--e6);
  box-shadow:var(--sombra);display:grid;gap:10px}
.escola-preco-rotulo{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-fraco)}
.escola-preco > b{font-size:2rem;color:var(--navy)}
.escola-preco p{margin:0;color:var(--texto-fraco)}
.escola-preco ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:.93rem}
.escola-perfis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e4)}
.escola-perfil{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-card);padding:var(--e5);display:grid;gap:8px}
.escola-perfil b{font-size:1.1rem;color:var(--navy)}
.escola-perfil span{color:var(--texto-fraco);font-size:.93rem}
.escola-planos{display:flex;align-items:center;justify-content:space-between;gap:var(--e5);flex-wrap:wrap;margin:var(--e6) auto 0;
  max-width:980px;background:var(--navy);color:#fff;border-radius:var(--raio-card);padding:var(--e5) var(--e6)}
.escola-planos b{font-size:1.15rem;display:block}
.escola-planos span{color:#C8D6EC;font-size:.93rem}
.escola-planos .botao{background:#fff;color:var(--navy);white-space:nowrap}
.dica-escola{display:block;margin-top:6px;font-size:.84rem;color:var(--texto-fraco)}
@media (max-width:900px){ .escola-capa{grid-template-columns:1fr} .escola-perfis{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .escola-perfis{grid-template-columns:1fr} }

/* ---------- Carrinho */
.botao-carrinho{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;justify-content:center;gap:6px;
  border:1.5px solid var(--azul);background:var(--branco);color:var(--azul);border-radius:999px;padding:8px 12px;
  font:inherit;font-weight:700;font-size:.86rem;cursor:pointer;white-space:nowrap}
.botao-carrinho:hover{background:var(--azul);color:#fff}
.anuncio-cartao:has(.botao-carrinho) .anuncio-texto{padding-bottom:62px}
.botao-carrinho-topo,.app-topo-carrinho{position:relative;display:grid;place-items:center;width:46px;height:46px;flex:none;
  border-radius:50%;border:1px solid var(--linha);background:var(--branco);color:var(--navy)}
.botao-carrinho-topo span,.app-topo-carrinho span{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;
  border-radius:999px;background:#D93A1E;color:#fff;font-size:.72rem;font-weight:800;display:grid;place-items:center}
.botao-carrinho-topo span[hidden],.app-topo-carrinho span[hidden]{display:none}
.app-topo-carrinho{width:42px;height:42px;margin-left:auto}
.carrinho-aviso{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;z-index:90;background:var(--navy);color:#fff;
  padding:12px 22px;border-radius:999px;font-weight:700;font-size:.92rem;transition:all .2s ease;pointer-events:none;max-width:90vw}
.carrinho-aviso.visivel{opacity:1;transform:translate(-50%,0)}
body.modo-app .carrinho-aviso{bottom:96px}
.limite-carrinho{max-width:900px}
.carrinho-casa{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-card);padding:var(--e5);margin-top:var(--e5)}
.carrinho-casa h2{font-size:1.2rem;margin-bottom:var(--e3)}
.carrinho-linha{display:grid;grid-template-columns:56px 1fr auto auto;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--linha)}
.carrinho-foto{width:56px;height:56px;border-radius:14px;overflow:hidden;background:var(--azul-lavado)}
.carrinho-foto img{width:100%;height:100%;object-fit:cover}
.carrinho-nome{display:grid;gap:2px;min-width:0}
.carrinho-nome span{color:var(--texto-fraco);font-size:.86rem}
.carrinho-qtd{display:flex;align-items:center;gap:6px;border:1px solid var(--linha);border-radius:999px;padding:3px}
.carrinho-qtd button{width:32px;height:32px;border-radius:50%;border:0;background:var(--fundo);font:inherit;font-weight:800;cursor:pointer}
.carrinho-qtd span{min-width:22px;text-align:center;font-weight:700}
.carrinho-pe{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-top:var(--e4)}
.carrinho-pe span{color:var(--texto-fraco);font-size:.92rem}
.carrinho-pe .botao{white-space:nowrap}
@media (max-width:560px){ .carrinho-linha{grid-template-columns:48px 1fr;row-gap:8px} .carrinho-qtd{grid-column:2;justify-self:start}
  .carrinho-total-linha{grid-column:2} .botao-carrinho{font-size:.8rem;padding:7px 8px} }

/* ---------- Vistos recentemente: faixa compacta (não ocupa a tela) */
.mini-anuncio > span:not(.mini-foto){padding:0 12px}
.faixa-mini{grid-auto-columns:260px;gap:10px}
.faixa-mini .mini-anuncio{grid-template-columns:52px 1fr;column-gap:10px;row-gap:0;align-items:center;padding:8px;border-radius:18px}
.faixa-mini .mini-foto{grid-row:1 / span 3;width:52px;height:52px;border-radius:12px;overflow:hidden;font-size:1.1rem}
.faixa-mini .mini-anuncio > b,.faixa-mini .mini-anuncio > span:not(.mini-foto),.faixa-mini .mini-anuncio > small{padding:0;margin:0}
.faixa-mini .mini-anuncio > b{font-size:.92rem}
.faixa-mini .mini-anuncio > span:not(.mini-foto){font-size:.84rem;-webkit-line-clamp:1}
.faixa-mini .mini-anuncio > small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vistos-comercio{margin:0 0 var(--e4)}
.vistos-comercio h2{font-size:.95rem;margin-bottom:8px;color:var(--texto-fraco)}
.faixa-mini .mini-foto{display:block}.faixa-mini .mini-foto img{display:block;width:100%;height:100%;object-fit:cover}

/* Ações do cartão (Comprar agora + carrinho / Agendar / Inscrição / WhatsApp),
   sempre no pé, na mesma altura em todos os cartões. */
.anuncio-cartao .anuncio-texto{padding-bottom:70px}
.anuncio-acoes-cartao{position:absolute;left:12px;right:12px;bottom:12px;display:flex;gap:8px}
.acao-cartao{display:flex;align-items:center;justify-content:center;gap:6px;border-radius:999px;font:inherit;font-weight:700;
  font-size:.88rem;white-space:nowrap;text-decoration:none;cursor:pointer;height:42px;padding:0 14px}
.acao-cartao.principal{flex:1;background:var(--azul);color:#fff;border:0}
.acao-cartao.principal:hover{filter:brightness(1.06)}
.acao-cartao.icone{width:42px;flex:none;padding:0;background:var(--branco);color:var(--azul);border:1.5px solid var(--azul)}
.acao-cartao.icone:hover{background:var(--azul);color:#fff}
.anuncio-cartao.em-destaque .acao-cartao.principal{background:#F28C28}
.anuncio-preco em{font-size:.8rem;font-weight:600;color:var(--texto-fraco);font-style:normal;white-space:nowrap}
.valor-inteiro,.anuncio-preco s{white-space:nowrap}
@media (max-width:560px){ .acao-cartao{font-size:.8rem;height:38px;padding:0 10px} .acao-cartao.icone{width:38px}
  .anuncio-cartao .anuncio-texto{padding-bottom:62px} }
.anuncio-duracao{order:2;font-size:.82rem;color:var(--texto-fraco);font-weight:600}
/* Cartão estreito (duas colunas no celular): o rótulo longo não cabia e cortava
   o botão do carrinho e o texto. Mede o próprio cartão e usa o rótulo curto. */
.anuncio-cartao{container:cartao / inline-size}
.rotulo-curto{display:none}
@container cartao (max-width:219px){
  .anuncio-acoes-cartao .rotulo-longo{display:none}
  .anuncio-acoes-cartao .rotulo-curto{display:inline}
  /* "Aberto agora" e "Patrocinado" não cabem lado a lado: um embaixo do outro. */
  .anuncio-selo{left:10px;right:auto;top:46px}
}

/* Busca das demonstrações: pílula grande, no padrão da busca do Comércio. */
.busca-demos{display:flex;align-items:center;gap:12px;background:var(--branco);border:1.5px solid var(--linha);
  border-radius:999px;padding:6px 8px 6px 22px;margin:0 0 var(--e6);box-shadow:var(--sombra-suave);
  max-width:780px;color:var(--texto-fraco);transition:border-color .15s ease, box-shadow .15s ease}
.busca-demos:focus-within{border-color:var(--azul);box-shadow:0 0 0 4px var(--azul-lavado)}
.busca-demos input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:1.05rem;color:var(--texto);padding:12px 0}
.busca-demos input:focus{outline:none}
.busca-demos-total{flex:none;background:var(--azul-lavado);color:var(--azul);font-weight:700;font-size:.85rem;
  padding:8px 16px;border-radius:999px;white-space:nowrap}
.busca-demos-vazia{display:grid;gap:8px;justify-items:start;background:var(--branco);border:1px dashed var(--linha);
  border-radius:var(--raio-card);padding:var(--e5);margin-bottom:var(--e6);max-width:780px}
.busca-demos-vazia span{color:var(--texto-fraco)}
@media (max-width:560px){ .busca-demos-total{display:none} .busca-demos{padding-left:16px} }
.busca-demos-vazia[hidden],article.demo[hidden],.demo-grupo[hidden]{display:none!important}

.aviso-cursinho{max-width:720px;padding:64px 20px;line-height:1.6}
.aviso-cursinho code{background:#EEF3FB;padding:2px 8px;border-radius:8px;word-break:break-all}

/* Busca dentro da coluna do título: alinhada com o texto, sem sobra torta. */
.demo-cabeca .busca-demos{max-width:none;margin:var(--e5) 0 0}
.demo-cabeca{align-items:end}
.busca-demos-vazia{max-width:none}

.rodape-ramos{columns:2;column-gap:24px}
.rodape-ramos li{break-inside:avoid}
.rodape-todos{font-weight:700}
@media (max-width:700px){ .rodape-ramos{columns:2} }

/* ================= Demonstrações (página com fotos) ================= */
.demos-hero{position:relative;background:#0E1B30 url("/static/img/site/demos-topo.webp") center 45%/cover no-repeat;
  color:#fff;padding:110px 0 150px;text-align:center;overflow:hidden}
.demos-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,19,38,.72) 0%,rgba(9,19,38,.55) 45%,rgba(9,19,38,.85) 100%)}
.demos-hero-conteudo{position:relative;display:grid;justify-items:center;gap:16px}
.demos-hero h1{font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1.05;margin:0;color:#fff}
.demos-hero h1 span{color:#7CC0FF}
.demos-hero p{max-width:640px;margin:0;color:#D5E1F2;font-size:1.05rem;line-height:1.6}
.selo-claro{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.25)}
.demos-hero .busca-demos{width:min(720px,100%);margin:10px auto 0;max-width:720px;padding:8px 26px;
  background:#fff;border:0;box-shadow:0 18px 50px rgba(0,0,0,.35);color:#5b6b83}
.demos-hero .busca-demos input{padding:14px 0;font-size:1.08rem}
.demos-atalhos{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.demos-atalhos button{font:inherit;font-size:.88rem;font-weight:700;color:#fff;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:7px 16px;cursor:pointer}
.demos-atalhos button:hover{background:rgba(255,255,255,.24)}
.demos-passos{list-style:none;margin:-80px 0 0;padding:0;position:relative;z-index:2;display:grid;
  grid-template-columns:repeat(3,1fr);gap:18px}
.demos-passos li{display:flex;gap:14px;align-items:center;background:var(--branco);border-radius:var(--raio-card);
  padding:18px 20px;box-shadow:0 14px 40px rgba(18,41,74,.14)}
.demos-passos img{flex:none;width:56px;height:56px;object-fit:contain}
.demos-passos b{display:block;font-size:1rem;margin-bottom:2px}
.demos-passos span{color:var(--texto-fraco);font-size:.9rem;line-height:1.4}
.secao-demos{padding:var(--e6) 0 var(--e4)}
.demo-grupo{margin-bottom:var(--e6)}
.demo-grupo-faixa{position:relative;border-radius:var(--raio-card);overflow:hidden;min-height:150px;margin-bottom:var(--e4);
  padding:26px 30px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;
  background:#12294A center/cover no-repeat}
.demo-grupo-faixa::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,19,38,.88) 0%,rgba(9,19,38,.55) 55%,rgba(9,19,38,.15) 100%)}
.demo-grupo-faixa > *{position:relative}
.demo-grupo-faixa h2{margin:0;font-size:1.7rem;color:#fff}
.demo-grupo-faixa span{color:#D5E1F2;font-size:.95rem}
.demo-grupo-faixa-comida{background-image:url("/static/img/site/demos-grupo-comida.webp")}
.demo-grupo-faixa-varejo{background-image:url("/static/img/site/demos-grupo-varejo.webp")}
.demo-grupo-faixa-servicos{background-image:url("/static/img/site/demos-grupo-servicos.webp")}
.demo-grupo-faixa-escola{background-image:url("/static/img/site/demos-grupo-escola.webp")}
.demo-escola-perfis{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.demo-escola-perfis a{text-align:center}
.demo .demo-acoes .botao-claro{white-space:nowrap}
.busca-demos-vazia{display:flex;gap:18px;align-items:center;justify-items:start}
.busca-demos-vazia > div{display:grid;gap:6px;justify-items:start}
.demos-em-breve{position:relative;border-radius:var(--raio-card);overflow:hidden;margin:var(--e5) 0;color:#fff;
  background:#12294A url("/static/img/site/demos-em-breve.webp") center/cover no-repeat;padding:44px 40px}
.demos-em-breve::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,19,38,.92) 0%,rgba(9,19,38,.7) 60%,rgba(9,19,38,.35) 100%)}
.demos-em-breve-texto{position:relative;max-width:760px;display:grid;gap:10px}
.demos-em-breve h2{margin:0;color:#fff;font-size:1.8rem}
.demos-em-breve p{margin:0;color:#D5E1F2}
.demos-chips{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.demos-chips li{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:7px 14px;
  font-size:.88rem;font-weight:700;white-space:nowrap}
.demos-sugestao{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:0;background:var(--branco);
  border-radius:var(--raio-card);overflow:hidden;box-shadow:var(--sombra-suave);margin:var(--e5) 0 var(--e6)}
.demos-sugestao-foto{width:100%;height:100%;object-fit:cover;min-height:320px}
.demos-sugestao-form{padding:34px 36px;display:grid;gap:10px;align-content:start}
.demos-sugestao-form h2{margin:0;font-size:1.6rem}
.demos-sugestao-form > p{margin:0;color:var(--texto-fraco)}
.form-sugestao{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.form-sugestao .larga{grid-column:1 / -1}
.form-sugestao .campo{display:grid;gap:6px;font-weight:700;font-size:.9rem}
.form-sugestao input[type=text],.form-sugestao input[type=tel],.form-sugestao input[type=email]{font:inherit;font-weight:400;
  padding:12px 18px;border-radius:999px;border:1.5px solid var(--linha);background:var(--fundo)}
.form-sugestao .marcador{display:flex;gap:8px;align-items:flex-start;font-size:.88rem;color:var(--texto-fraco)}
.campo-isca{position:absolute!important;left:-9999px!important;width:1px;height:1px}
.aviso-ok{background:#E6F6EC;color:#1E6B3A;border-radius:14px;padding:10px 14px;margin:0}
.aviso-erro{background:#FDECE9;color:#9C2A16;border-radius:14px;padding:10px 14px;margin:0}
.diferencial-icone img{flex:none;width:52px;height:52px;object-fit:contain}
.chamada-com-foto{position:relative;overflow:hidden;background:#0E1B30 url("/static/img/site/demos-faixa-final.webp") center/cover no-repeat}
.chamada-com-foto::before{content:"";position:absolute;inset:0;background:rgba(9,19,38,.62)}
.chamada-com-foto > *{position:relative}
@media (max-width:900px){
  .demos-passos{grid-template-columns:1fr;margin-top:-60px}
  .demos-sugestao{grid-template-columns:1fr}
  .demos-sugestao-foto{min-height:200px;max-height:240px}
  .form-sugestao{grid-template-columns:1fr}
  .demos-hero{padding:80px 0 120px}
  .demos-em-breve{padding:32px 22px}
}


/* ------------------------------------------- /demonstracoes: os sistemas */
.sistemas{display:grid;gap:28px;padding:36px 0}
.sistema{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:#fff;border-radius:32px;
  overflow:hidden;box-shadow:0 14px 40px rgba(18,41,74,.10)}
.sistema:nth-child(even){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.sistema:nth-child(even) .sistema-foto{order:2}
.sistema-foto{min-height:280px;background-size:cover;background-position:center}
.sistema-foto-venda{background-image:url("/static/img/site/demos-grupo-comida.webp")}
.sistema-foto-servico{background-image:url("/static/img/site/demos-grupo-servicos.webp")}
.sistema-foto-curso{background-image:url("/static/img/site/demos-grupo-escola.webp")}
.sistema-foto-almox{background-image:url("/static/img/site/demos-grupo-almoxarifado.webp")}
.sistema-texto{padding:32px 34px;display:flex;flex-direction:column;gap:12px}
.sistema-texto h2{margin:0;font-size:1.8rem;color:#12294A}
.sistema-sub{margin:0;color:#69768C;font-size:1.02rem}
.sistema-texto ul{margin:4px 0;padding:0;list-style:none;display:grid;gap:9px}
.sistema-texto li{position:relative;padding-left:28px;line-height:1.5}
.sistema-texto li::before{content:"";position:absolute;left:0;top:.35em;width:16px;height:16px;border-radius:999px;
  background:#1E6BE1;box-shadow:inset 0 0 0 4px #DCE8FB}
.sistema-ramos{margin:4px 0 6px;font-size:.88rem;color:#69768C}
.sistema-texto .botao{align-self:flex-start}
.como-demo{background:#12294A;color:#fff;border-radius:32px;padding:34px;margin:8px 0 36px}
.como-demo h2{margin:0 0 18px}
.como-demo ol{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;counter-reset:passo}
.como-demo li{background:rgba(255,255,255,.07);border-radius:22px;padding:18px 20px;display:flex;flex-direction:column;gap:6px;counter-increment:passo}
.como-demo li b::before{content:counter(passo) ". "}
.como-demo li span{color:rgba(255,255,255,.78)}
@media (max-width:760px){
  .sistema,.sistema:nth-child(even){grid-template-columns:1fr}
  .sistema:nth-child(even) .sistema-foto{order:0}
  .sistema-foto{min-height:190px}
  .sistema-texto{padding:24px 22px}
}
.entrar-escolha{max-width:560px;margin:4rem auto;padding:0 1.2rem;text-align:center}
.entrar-escolha h1{font-size:2rem;margin:0 0 .4rem}
.entrar-escolha__lista{display:flex;flex-direction:column;gap:.7rem;margin:1.6rem 0}
.entrar-escolha__opcao{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;column-gap:1rem;padding:1rem 1.4rem;border-radius:22px;border:1px solid #E3E8F0;background:#fff;text-decoration:none;color:#10213F;text-align:left;box-shadow:0 6px 18px rgba(16,33,63,.06)}
.entrar-escolha__opcao:hover{border-color:#1F6FEB}
.entrar-escolha__opcao small{grid-column:1;font-size:.75rem;font-weight:700;color:#1F6FEB;text-transform:uppercase;letter-spacing:.06em}
.entrar-escolha__opcao b{grid-column:1;font-size:1.1rem}
.entrar-escolha__opcao span{grid-column:2;grid-row:1/3;padding:.5rem 1.1rem;border-radius:999px;background:#1F6FEB;color:#fff;font-weight:700;font-size:.9rem}
.entrar-escolha__nota{color:#52627A;font-size:.88rem}

/* -------------------------------------------------------- compra pelo site */
.pagina-compra{padding-bottom:var(--e8)}
.voltar-link{display:inline-block;color:var(--texto-fraco);font-size:.92rem;text-decoration:none;margin-bottom:var(--e3)}
.voltar-link:hover{color:var(--azul)}
.titulo-compra{font-size:clamp(1.8rem,3.4vw,2.5rem);margin-bottom:6px}
.compra-grade{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--e6);align-items:start;margin-top:var(--e6)}
.compra-form{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-card);padding:var(--e6)}
.compra-bloco{border:0;margin:0;padding:0 0 var(--e5);border-bottom:1px solid var(--linha);margin-bottom:var(--e5);min-width:0}
.compra-bloco legend{font-weight:800;font-size:1.05rem;display:flex;align-items:center;gap:10px;padding:0}
.compra-num{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--navy);color:#fff;font-size:.82rem}
.pilulas{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--e4)}
.pilula input,.forma input{position:absolute;opacity:0;pointer-events:none}
.pilula span{display:inline-block;border:1.5px solid var(--linha);border-radius:var(--raio);padding:11px 20px;
  font-weight:700;font-size:.95rem;cursor:pointer;background:var(--branco)}
.pilula input:checked + span{border-color:var(--azul);background:var(--azul-lavado);color:var(--azul)}
.pilula input:focus-visible + span,.forma input:focus-visible + .forma-corpo{box-shadow:0 0 0 4px var(--azul-lavado)}
.formas{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:var(--e4)}
.forma{position:relative;cursor:pointer}
.forma-corpo{display:flex;flex-direction:column;align-items:center;text-align:center;border:1.5px solid var(--linha);
  border-radius:var(--raio);padding:10px 14px;line-height:1.25}
.forma-corpo b{font-size:.95rem}
.forma-corpo small{color:var(--texto-fraco);font-size:.76rem}
.forma input:checked + .forma-corpo{border-color:var(--azul);background:var(--azul-lavado)}
.forma input:checked + .forma-corpo b{color:var(--azul)}
.campo-cidade{grid-template-columns:1fr 90px}
.maiusculas{text-transform:uppercase}
.compra-form .aceite-contrato{margin-top:0}
.compra-resumo{position:sticky;top:92px;background:var(--navy);color:#fff;border-radius:var(--raio-card);padding:var(--e5)}
.resumo-rotulo{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-fraco);font-weight:700}
.compra-resumo .resumo-rotulo{color:rgba(255,255,255,.6)}
.compra-resumo h2{font-size:1.5rem;margin-top:6px}
.resumo-preco{margin-top:var(--e3)}
.resumo-preco b{font-size:2.2rem;letter-spacing:-.03em}
.resumo-preco span{color:rgba(255,255,255,.7);margin-left:4px}
.resumo-texto{color:rgba(255,255,255,.8);font-size:.93rem;margin-top:6px}
.resumo-lista{list-style:none;margin:var(--e4) 0 0;padding:var(--e4) 0 0;border-top:1px solid rgba(255,255,255,.14);
  display:grid;gap:10px;font-size:.9rem;color:rgba(255,255,255,.88)}
.resumo-lista li{padding-left:18px;position:relative}
.resumo-lista li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:#5FD3A0}
.resumo-rodape{margin-top:var(--e4);font-size:.85rem;color:rgba(255,255,255,.7)}
.resumo-rodape a{color:#fff}
.plano-alt{display:block;text-align:center;font-size:.86rem;color:var(--texto-fraco);margin-top:10px}
.plano-alt:hover{color:var(--azul)}
.plano-alt-vazio{visibility:hidden}

.espera-cartao{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-card);
  padding:var(--e6);max-width:520px;margin:var(--e5) auto 0;text-align:center}
.espera-cartao h1{font-size:2rem;margin:6px 0 var(--e3)}
.espera-cartao .secao-apoio{font-size:1rem}
.espera-cartao .campo{text-align:left}
.espera-qr{width:220px;height:220px;margin:var(--e4) auto;border:1px solid var(--linha);border-radius:18px;padding:10px;
  image-rendering:pixelated;background:#fff}
.copia-cola{display:flex;gap:8px}
.copia-cola input{flex:1;min-width:0;font-size:.85rem}
.copia-cola .botao{padding:10px 20px;flex:none}
.espera-estado{display:inline-flex;align-items:center;gap:10px;margin:var(--e5) 0 0;font-size:.92rem;
  color:var(--texto-fraco);background:var(--fundo);border-radius:var(--raio);padding:8px 16px}
.espera-ponto{width:9px;height:9px;border-radius:50%;background:#E5A21A;animation:piscar 1.4s ease-in-out infinite}
@keyframes piscar{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.espera-ponto{animation:none}}
.espera-dados{margin:var(--e5) 0;padding:0;text-align:left;border-top:1px solid var(--linha)}
.espera-dados div{display:flex;justify-content:space-between;gap:var(--e3);padding:10px 0;border-bottom:1px solid var(--linha);font-size:.93rem}
.espera-dados dt{color:var(--texto-fraco)}
.espera-dados dd{margin:0;font-weight:700;text-align:right;word-break:break-all}
.espera-marca{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#EAF7F1;color:var(--verde)}
.ensaio{margin-top:var(--e4)}
.ensaio .botao{width:100%}
@media (max-width:900px){
  .compra-grade{grid-template-columns:minmax(0,1fr)}
  .compra-resumo{position:static;order:-1}
  .compra-form{padding:var(--e5)}
}
@media (max-width:520px){
  .formas{grid-template-columns:1fr}
  .forma-corpo{flex-direction:row;justify-content:space-between;padding:12px 20px}
  .espera-cartao{padding:var(--e5)}
}
.campo .copia-cola{display:flex}
.espera-cartao .apoio{color:var(--texto-fraco);font-size:.9rem}
.espera-cartao .espera-qr{image-rendering:auto}
.campo .campo-endereco{display:flex;flex-wrap:nowrap;align-items:center;padding-left:18px;margin-bottom:0;font-weight:400}
.campo .campo-endereco em{display:inline;flex:none;margin:0}
@media (max-width:520px){.campo .campo-endereco em{font-size:.8rem}.campo .campo-endereco input{padding-left:4px}}
@media (max-width:520px){.forma-corpo{gap:12px}.forma-corpo b{white-space:nowrap}.forma-corpo small{text-align:right}}
.resumo-proposta{white-space:pre-line;margin-top:var(--e3);color:rgba(255,255,255,.9)}
/* v48: cobrança mensal ou anual na compra */
.compra-subrotulo{font-weight:800;font-size:.9rem;margin:var(--e4) 0 0;color:inherit}
.compra-subrotulo + .pilulas{margin-top:8px}
.resumo-economia{display:inline-block;margin-top:8px;background:rgba(124,192,255,.18);color:#CFE6FF;border-radius:999px;padding:6px 14px;font-size:.85rem;font-weight:700}
.resumo-economia[hidden]{display:none}
.plano-anual{display:block;font-size:.85rem;font-weight:700;color:#15703A;margin-top:4px}

/* v52: com o menu escondido, as ações (e o botão de menu) vão para a direita */
@media (max-width:1050px){.acoes-topo{margin-left:auto}}

/* Coluna única no celular: "minmax(0,1fr)" em vez de "1fr". Com 1fr a coluna
   cresce até caber a palavra mais comprida (o endereço
   star-negocios.com.br/seunegocio) e o cartão de cadastro passava 16px da
   tela, cortado na direita. */
@media (max-width:1000px){ .capa-grade{grid-template-columns:minmax(0,1fr)} }
.capa-itens span{min-width:0;overflow-wrap:anywhere}
.cartao-form{min-width:0}
/* Botão nunca passa da tela (e-mail comprido no Suporte cortava no celular). */
.botao{max-width:100%}
.botao[href^="mailto:"]{white-space:normal;overflow-wrap:anywhere;text-align:center}
/* No celular o e-mail comprido quebrava no meio da pílula ("stargex.co / m.br"). */
@media (max-width:480px){ .botao[href^="mailto:"]{font-size:.88rem;padding-inline:16px} }

/* Página "não achamos a loja": sugestões de endereço parecido. */
.pagina-404{padding-bottom:var(--e9,72px)}
.sugestoes-404{list-style:none;padding:0;margin:var(--e5) auto 0;display:grid;gap:12px;max-width:30rem;text-align:left}
.sugestao-404{display:flex;flex-direction:column;gap:2px;padding:16px 22px;border:1.5px solid var(--linha);
  border-radius:22px;background:var(--branco);text-decoration:none;color:var(--texto)}
.sugestao-404:hover{border-color:var(--azul)}
.sugestao-404 b{font-size:1.05rem}
.sugestao-404 span{color:var(--texto-fraco);font-size:.88rem;overflow-wrap:anywhere}

/* =====================================================================
   v57: as telas de verdade do sistema.

   "Telas" = o painel da loja num computador e, por cima, a tela do cliente
   num celular. Os prints saem das demonstrações (ferramentas/prints_do_site.py).
   Clicar num print abre ele grande (js/telas.js); sem JavaScript, o link
   abre a imagem sozinha.
   ===================================================================== */
.capa-nota{margin-top:var(--e3);font-size:.9rem;color:rgba(255,255,255,.74);max-width:32rem}

.telas{position:relative;padding:0 14% 40px 0}
.tela-pc,.tela-cel{margin:0}
.tela-pc{background:var(--branco);border:1px solid var(--linha);border-radius:16px;overflow:hidden;
  box-shadow:0 24px 60px rgba(18,41,74,.16)}
.tela-pc-barra{display:flex;gap:6px;align-items:center;height:26px;padding:0 12px;
  background:#EEF2F8;border-bottom:1px solid var(--linha)}
.tela-pc-barra i{width:9px;height:9px;border-radius:50%;background:#C9D3E3}
.tela-cel{position:absolute;right:0;bottom:0;width:29%;padding:6px;border-radius:30px;background:#0F1A2B;
  box-shadow:0 26px 56px rgba(18,41,74,.32)}
.telas img{width:100%;height:auto;display:block}
.tela-cel img{border-radius:24px}
.telas a{display:block;cursor:zoom-in}
.telas a:focus-visible{outline:3px solid var(--azul);outline-offset:4px;border-radius:18px}
.telas-legenda{margin-top:var(--e3);font-size:.84rem;color:var(--texto-fraco);text-align:center}

/* Print aberto grande */
.tela-grande{border:0;padding:0;background:transparent;max-width:min(94vw,1400px);max-height:92vh;overflow:visible}
.tela-grande::backdrop{background:rgba(9,19,38,.82)}
.tela-grande img{display:block;max-width:min(94vw,1400px);max-height:86vh;width:auto;height:auto;
  border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.45);background:#fff}
.tela-grande form{display:flex;justify-content:center;margin-top:12px}
.tela-grande button{font:inherit;font-weight:700;font-size:.95rem;color:#fff;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.4);border-radius:var(--raio);padding:10px 26px;cursor:pointer}
.tela-grande button:hover{background:rgba(255,255,255,.26)}

/* ------------------------------------------------ página inicial: por dentro */
.abas{display:none;justify-content:center;gap:8px;flex-wrap:wrap;margin:0 auto var(--e6);
  background:var(--fundo);border:1px solid var(--linha);border-radius:var(--raio);padding:6px;width:max-content;max-width:100%}
.com-js .abas{display:flex}
.abas button{font:inherit;font-weight:700;font-size:.95rem;border:0;background:transparent;color:var(--texto-fraco);
  border-radius:var(--raio);padding:10px 22px;cursor:pointer}
.abas button[aria-selected="true"]{background:var(--navy);color:#fff;box-shadow:0 6px 16px rgba(18,41,74,.22)}
.abas button:focus-visible{outline:3px solid var(--azul);outline-offset:2px}
.por-dentro-painel + .por-dentro-painel{margin-top:var(--e8)}
.com-js .por-dentro-painel + .por-dentro-painel{margin-top:0}
.por-dentro-grade{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--e7);align-items:center}
.por-dentro-texto h3{font-size:clamp(1.3rem,2.2vw,1.65rem);margin:0 0 var(--e4)}
.por-dentro-passos{list-style:none;margin:0;padding:0;display:grid;gap:var(--e4);counter-reset:passo}
.por-dentro-passos li{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:14px;counter-increment:passo}
.por-dentro-passos li::before{content:counter(passo);grid-row:1 / span 2;width:34px;height:34px;border-radius:50%;
  background:var(--azul-lavado);color:var(--azul);font-weight:800;display:grid;place-items:center;font-size:.95rem}
.por-dentro-passos b{font-size:1.02rem}
.por-dentro-passos span{color:var(--texto-fraco);font-size:.95rem;line-height:1.5}
.por-dentro-ramos{margin-top:var(--e5);display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.9rem;
  color:var(--texto-fraco)}
.por-dentro-ramos span{width:100%;font-weight:700;color:var(--texto)}
.pilula-ramo{display:inline-flex;align-items:center;border:1.5px solid var(--linha);border-radius:var(--raio);
  padding:7px 14px;font-weight:700;font-size:.86rem;color:var(--navy);text-decoration:none;background:var(--branco)}
.pilula-ramo:hover{border-color:var(--azul);color:var(--azul)}
.pilula-ramo.todos{border-style:dashed}

/* ------------------------------------------------ página do ramo: o sistema dele */
.sistema-ramo-grade{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--e7);align-items:center}
.sistema-ramo-grade.sem-telas{grid-template-columns:minmax(0,1fr);max-width:46rem}
.sistema-ramo-texto h2{margin-top:var(--e4);font-size:clamp(1.5rem,2.5vw,2.05rem)}
.sistema-ramo-texto .botao{padding:14px 24px}
.sistema-ramo-pontos{list-style:none;margin:var(--e5) 0 0;padding:0;display:grid;gap:12px}
.sistema-ramo-pontos li{display:flex;gap:12px;align-items:flex-start;line-height:1.5}
.sistema-ramo-pontos svg{flex:none;margin-top:4px;color:var(--azul)}
.sistema-ramo-pontos span{min-width:0}

/* ------------------------------------------------ /demonstracoes: ramos clicáveis */
.sistema-texto .sistema-ramos-lista{list-style:none;margin:2px 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sistema-texto .sistema-ramos-lista li{padding:0;line-height:1.2}
.sistema-texto .sistema-ramos-lista li::before{content:none}
.sistema-ramos-lista .pilula-ramo{padding:6px 13px;font-size:.84rem}

@media (max-width:1000px){
  .por-dentro-grade,.sistema-ramo-grade{grid-template-columns:minmax(0,1fr);gap:var(--e6)}
}
@media (max-width:600px){
  .telas{padding:0 6% 48px 0}
  .tela-cel{width:36%;padding:4px;border-radius:20px}
  .tela-cel img{border-radius:16px}
  .tela-pc{border-radius:12px}
  .tela-pc-barra{height:18px;padding:0 8px;gap:4px}
  .tela-pc-barra i{width:6px;height:6px}
  .abas{width:100%}
  .abas button{flex:1;padding:10px 12px}
}
/* Escola e almoxarifado: a capa clara seguida do "Por dentro" branco. */
.pagina.pagina-capa{padding-bottom:var(--e8)}
.pagina + .secao.sistema-do-ramo{padding-top:var(--e8)}

/* =====================================================================
   v58: página inicial para todos os sistemas (não só restaurante).
   ===================================================================== */
.quatro-sistemas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--e4)}
.sistema-cartao{display:flex;flex-direction:column;background:var(--branco);border:1px solid var(--linha);
  border-radius:var(--raio-card);overflow:hidden;text-decoration:none;color:var(--texto);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}
.sistema-cartao:hover{transform:translateY(-3px);box-shadow:var(--sombra-suave);border-color:var(--azul)}
.sistema-cartao:focus-visible{outline:3px solid var(--azul);outline-offset:3px}
.sistema-cartao img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.sistema-cartao-corpo{display:flex;flex-direction:column;gap:8px;padding:var(--e4) var(--e5) var(--e5);flex:1}
.sistema-cartao-corpo > b{font-size:1.15rem;color:var(--navy)}
.sistema-cartao-corpo > span{color:var(--texto-fraco);font-size:.95rem;line-height:1.5}
.sistema-cartao-corpo > small{color:var(--texto-fraco);font-size:.84rem;opacity:.9}
.sistema-cartao-pe{display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  margin-top:auto;padding-top:var(--e3)}
.sistema-cartao-pe em{font-style:normal;font-weight:700;font-size:.82rem;color:var(--azul);
  background:var(--azul-lavado);border-radius:var(--raio);padding:5px 12px}
.sistema-cartao .seta{color:var(--azul);font-weight:700;font-size:.9rem}

.ache-seu-ramo{margin-top:var(--e6);background:var(--branco);border:1px solid var(--linha);
  border-radius:var(--raio-card);padding:var(--e5) var(--e6);display:grid;gap:var(--e3)}
.ache-seu-ramo h3{font-size:1.2rem;margin:0}
.ache-seu-ramo > p{color:var(--texto-fraco);font-size:.95rem}
.ache-linha{display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--e3);align-items:start;
  padding-top:var(--e3);border-top:1px solid var(--linha)}
.ache-rotulo{font-weight:800;font-size:.9rem;color:var(--navy);padding-top:7px}
.ache-ramos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ache-ramos .pilula-ramo{padding:6px 13px;font-size:.85rem}

.quem-faz{margin-top:var(--e7);display:flex;align-items:center;gap:var(--e5);background:var(--fundo);
  border:1px solid var(--linha);border-radius:var(--raio-card);padding:var(--e5) var(--e6)}
.quem-faz-logo{flex:none;width:64px;height:auto}
.quem-faz-texto{display:grid;gap:4px;flex:1;min-width:0}
.quem-faz-texto b{font-size:1.1rem;color:var(--navy)}
.quem-faz-texto span{color:var(--texto-fraco);font-size:.95rem;line-height:1.5}
.quem-faz-texto small{color:var(--texto-fraco);font-size:.82rem}
.botao-whats{background:#128C5A;color:#fff;box-shadow:0 10px 24px rgba(18,140,90,.25);flex:none}
.botao-whats:hover{background:#0E7349}
.botao svg{flex:none}
/* WhatsApp e Instagram da Stargex, um embaixo do outro, do mesmo tamanho. */
.quem-faz-acoes{flex:none;display:grid;gap:10px}
.botao-insta{background:var(--branco);color:var(--navy);border:1.5px solid var(--linha);padding-left:18px}
.botao-insta:hover{border-color:#D6249F;color:var(--navy)}
.botao-insta img{flex:none;width:24px;height:24px}
.rodape .rodape-insta{display:inline-flex;align-items:center;gap:10px;margin-top:var(--e4);padding:7px 16px 7px 8px;
  border:1px solid rgba(255,255,255,.18);border-radius:999px;font-weight:700;font-size:.9rem;color:#fff}
.rodape .rodape-insta:hover{background:rgba(255,255,255,.08);text-decoration:none}
.rodape-insta img{flex:none;width:28px;height:28px}

@media (max-width:1000px){ .quatro-sistemas{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:700px){
  .ache-linha{grid-template-columns:minmax(0,1fr)}
  .ache-rotulo{padding-top:0}
  .ache-seu-ramo{padding:var(--e5) var(--e4)}
  .quem-faz{flex-direction:column;align-items:flex-start;padding:var(--e5) var(--e4)}
  .quem-faz .botao{width:100%}
  .quem-faz-acoes{width:100%}
}
@media (max-width:560px){ .quatro-sistemas{grid-template-columns:minmax(0,1fr)} }
.escola-planos-botoes{display:flex;gap:10px;flex-wrap:wrap}
/* Sistema (cursinho ou almoxarifado) fora do ar: aviso simples, sem recado técnico. */
.aviso-cursinho h1{font-size:clamp(1.6rem,3vw,2.2rem);margin:0 0 var(--e4)}
.aviso-cursinho p{margin-top:var(--e3);color:var(--texto-fraco)}

/* ------------------------------------------------ campo de arquivo
   O seletor de arquivo do navegador não obedece a estilo nenhum (e sai com o
   texto no idioma do navegador). Esconde o campo e mostra um botão pílula,
   com o nome do que foi escolhido ao lado (js/arquivo.js). */
.campo-arquivo{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.campo-arquivo input[type=file]{position:absolute;width:1px;height:1px;opacity:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.botao-arquivo{display:inline-flex;align-items:center;gap:9px;cursor:pointer;background:var(--navy);color:#fff;
  border:0;border-radius:var(--raio);padding:12px 22px;font:inherit;font-size:.92rem;font-weight:700;
  transition:filter .15s ease, transform .1s ease}
.botao-arquivo:hover{filter:brightness(1.12)}
.botao-arquivo:active{transform:scale(.99)}
.campo-arquivo input[type=file]:focus-visible + .botao-arquivo{outline:3px solid var(--azul);outline-offset:2px}
.nome-arquivo{flex:1 1 150px;min-width:0;font-size:.88rem;color:var(--texto-fraco);overflow-wrap:anywhere}
.nome-arquivo.escolhido{color:var(--texto);font-weight:600}

/* Lista de escolha com texto comprido termina em "…" (não corta no meio da palavra). */
select,input{text-overflow:ellipsis}

/* Tamanho no computador: a maioria dos notebooks abre em 125% no Windows, e o
   site ficava grande demais. Reduz tudo por igual a partir de 1024px. */
@media (min-width:1024px){html{zoom:.9}}