/* ==========================================================================
   DIAGNÓSTICO DIGITAL PARA PIZZARIAS — tema vermelho/preto/branco
   Display: Bebas Neue · Corpo: Instrument Sans
   ========================================================================== */
:root{
  --vermelho:#E4002B; --vermelho-escuro:#B3001F; --preto:#121212; --preto-2:#0E0E10;
  --cinza:#5b5b63; --cinza-claro:#f5f4f2; --ambar:#FFB703;
  --borda:#e8e6e3; --sombra:0 12px 34px rgba(18,18,18,.10);
  --raio:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Instrument Sans',system-ui,sans-serif;color:var(--preto);background:#fff;margin:0}
h1,h2,h3,h4,.display-hero,.logo-texto,.kpi-valor,.titulo-etapa .num-etapa{font-family:'Bebas Neue',sans-serif;letter-spacing:.5px}
.txt-vermelho{color:var(--vermelho)}
#diagnostico{scroll-margin-top:70px}
.bloco-categoria{scroll-margin-top:110px}

/* ---------- Botões ---------- */
.btn-vermelho{background:var(--vermelho);color:#fff;font-weight:700;border:none;border-radius:10px;
  transition:transform .18s ease,box-shadow .18s ease,background .18s}
.btn-vermelho:hover{background:var(--vermelho-escuro);color:#fff;transform:translateY(-2px);
  box-shadow:0 14px 26px rgba(228,0,43,.35)}
.btn-gigante{padding:16px 34px;font-size:1.05rem;letter-spacing:1px}
.btn-branco{background:#fff;color:var(--vermelho);font-weight:800;border:none;border-radius:10px}
.btn-branco:hover{background:#ffe9ec;color:var(--vermelho-escuro);transform:translateY(-2px)}
.btn-contorno{border:1px solid var(--borda);color:var(--preto);background:#fff;border-radius:8px}
.btn-contorno:hover{border-color:var(--vermelho);color:var(--vermelho)}

/* ---------- Nav público ---------- */
.nav-publico{background:var(--preto-2);border-bottom:1px solid #26262a}
.logo-texto{color:#fff;font-size:1.35rem;line-height:1}
.badge-selo{background:rgba(255,183,3,.12);color:var(--ambar);border:1px solid rgba(255,183,3,.4);
  padding:6px 12px;border-radius:999px;font-size:.78rem;font-weight:600}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--preto-2);color:#fff;padding:84px 0 96px;overflow:hidden}
.hero-fundo{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(600px 420px at 82% 30%, rgba(228,0,43,.28), transparent 65%),
    radial-gradient(rgba(255,255,255,.055) 1px, transparent 1.6px);
  background-size:auto,26px 26px}
.kicker{display:inline-flex;align-items:center;gap:8px;background:rgba(228,0,43,.14);
  border:1px solid rgba(228,0,43,.5);color:#ff8fa0;padding:8px 16px;border-radius:999px;
  font-size:.8rem;font-weight:600;letter-spacing:1px;text-transform:uppercase}
.display-hero{font-size:clamp(2.6rem,6vw,4.6rem);line-height:.98;margin:18px 0 14px}
.lead-hero{color:#c9c9cf;font-size:1.1rem;max-width:560px}
.lista-confianca{list-style:none;display:flex;flex-wrap:wrap;gap:18px;padding:0;margin:22px 0 0;color:#c9c9cf;font-size:.9rem}
.lista-confianca i{color:var(--ambar)}
.animar{opacity:0;transform:translateY(22px);animation:surgir .7s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:var(--d,0s)}
@keyframes surgir{to{opacity:1;transform:none}}

/* Cartão do velocímetro vivo */
.cartao-score{background:#17171b;border:1px solid #2b2b31;border-radius:18px;padding:24px;
  box-shadow:0 30px 70px rgba(0,0,0,.45);position:relative}
.cs-topo{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;color:#fff;font-weight:600}
.cs-badge{background:var(--vermelho);color:#fff;font-size:.65rem;letter-spacing:2px;padding:3px 8px;border-radius:6px;animation:piscar 1.6s infinite}
@keyframes piscar{50%{opacity:.35}}
.gauge-mini svg,.gauge-grande svg{width:100%;display:block}
.g-trilho{fill:none;stroke:#2e2e34;stroke-width:14;stroke-linecap:round}
.g-arco{fill:none;stroke:var(--vermelho);stroke-width:14;stroke-linecap:round;transition:stroke-dashoffset .3s}
.g-ponteiro{stroke:#fff;stroke-width:4;stroke-linecap:round;transition:transform .3s}
.gauge-mini .g-ponteiro{transform-origin:100px 105px}
.gauge-grande .g-ponteiro{transform-origin:110px 120px}
.g-eixo{fill:var(--vermelho)}
.gauge-valor{position:relative;text-align:center;margin-top:-34px;font-family:'Bebas Neue';font-size:2.6rem;color:#fff}
.gauge-valor small{color:#8a8a92;font-size:1rem}
.gauge-valor.grande{font-size:3.4rem;color:var(--preto)}
.gauge-valor.grande small{color:var(--cinza)}
.cs-etiquetas{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.cs-legenda{color:#77777f;font-size:.75rem;text-align:center;margin:14px 0 0}

/* Chips flutuantes (links clicáveis) */
.chip-flutuante{background:#222228;border:1px solid #333;color:#ddd;font-size:.78rem;
  padding:6px 12px;border-radius:999px;animation:flutuar 3.4s ease-in-out infinite;
  animation-delay:var(--d);text-decoration:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;transition:border-color .2s,color .2s}
.chip-flutuante i{color:var(--vermelho)}
.chip-flutuante:hover{animation-play-state:paused;border-color:var(--vermelho);color:#fff}
@keyframes flutuar{50%{transform:translateY(-6px)}}

/* ---------- Faixas rotativas duplas (marquee) ---------- */
.faixa{overflow:hidden;padding:12px 0}
.faixa-trilho{display:flex;width:max-content;animation:deslizar 26s linear infinite}
.faixa-grupo{display:flex;align-items:center;gap:22px;padding-right:22px;
  font-family:'Bebas Neue';font-size:1.05rem;letter-spacing:2px;white-space:nowrap}
.faixa-grupo em{font-style:normal;opacity:.6;font-size:.7rem}
.faixa-vermelha{background:var(--vermelho);color:#fff;border-top:3px solid var(--preto)}
.faixa-vermelha .faixa-grupo em{color:#000}
.faixa-preta{background:var(--preto-2);color:#fff;border-bottom:3px solid var(--vermelho)}
.faixa-preta .faixa-trilho{animation-direction:reverse;animation-duration:32s}
.faixa-preta .faixa-grupo em{color:var(--vermelho)}
.faixa-preta .faixa-grupo i{color:var(--ambar)}
.faixa-logo{display:inline-flex;align-items:center;gap:9px}
.faixa-logo img{width:22px;height:22px}
.faixa:hover .faixa-trilho{animation-play-state:paused}
@keyframes deslizar{to{transform:translateX(-50%)}}

/* ---------- Seções ---------- */
.secao{padding:76px 0}
.secao-escura{background:var(--preto-2);color:#fff}
.titulo-secao{font-family:'Bebas Neue';font-size:clamp(1.9rem,3.4vw,2.8rem);margin-bottom:34px;letter-spacing:1px}
.passos-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px}
.passo-item{background:#17171b;border:1px solid #2a2a30;border-radius:var(--raio);padding:28px;transition:.25s}
.passo-item:hover{transform:translateY(-6px);border-color:var(--vermelho)}
.passo-num{font-family:'Bebas Neue';font-size:3rem;color:var(--vermelho);display:block;line-height:1}
.passo-item h3{font-size:1.5rem;margin:8px 0}
.passo-item p{color:#a9a9b1;font-size:.95rem;margin:0}
.recebe-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.recebe-item{background:#17171b;border:1px solid #2a2a30;border-radius:var(--raio);padding:22px;transition:.25s}
.recebe-item:hover{transform:translateY(-5px) rotate(-.4deg);border-color:var(--ambar)}
.recebe-item i{font-size:1.9rem;color:var(--vermelho)}
.recebe-item h4{font-size:1.35rem;margin:10px 0 6px}
.recebe-item p{color:#a9a9b1;font-size:.88rem;margin:0}

/* ---------- Wizard ---------- */
.barra-etapas{display:flex;align-items:center;gap:14px;margin-bottom:26px;flex-wrap:wrap;
  position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  padding:12px 14px;border:1px solid var(--borda);border-radius:12px}
.etapa-indicador{display:flex;align-items:center;gap:8px;color:var(--cinza);font-size:.9rem;font-weight:600}
.etapa-indicador b{width:28px;height:28px;border-radius:50%;background:var(--cinza-claro);
  display:inline-flex;align-items:center;justify-content:center;font-family:'Bebas Neue';font-size:1rem}
.etapa-indicador.ativa{color:var(--preto)}
.etapa-indicador.ativa b{background:var(--vermelho);color:#fff}
.etapa-indicador.feita b{background:var(--preto);color:#fff}
.etapa{display:none}
.etapa-ativa{display:block;animation:surgir .5s ease forwards;opacity:0}
.cartao-branco{background:#fff;border:1px solid var(--borda);border-radius:var(--raio);box-shadow:var(--sombra)}
.titulo-etapa{font-size:2rem;display:flex;align-items:center;gap:12px;margin-bottom:6px}
.num-etapa{background:var(--vermelho);color:#fff;width:44px;height:44px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;font-size:1.6rem}
.form-control:focus,.form-select:focus{border-color:var(--vermelho);box-shadow:0 0 0 .2rem rgba(228,0,43,.15)}

/* Chips de categoria (navegação interna da Etapa 2) */
.chip-cat{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--borda);
  border-radius:999px;padding:7px 14px;font-size:.85rem;font-weight:600;color:var(--preto);
  text-decoration:none;transition:.2s}
.chip-cat:hover{border-color:var(--vermelho);color:var(--vermelho);transform:translateY(-2px)}
.chip-cat.completo{background:var(--preto);color:#fff;border-color:var(--preto)}
.chip-conta{font-size:.72rem;opacity:.7}

/* Blocos de categoria */
.bloco-categoria{margin:34px 0}
.bloco-cabecalho{display:flex;align-items:center;gap:12px;border-left:6px solid var(--cor,var(--vermelho));
  background:#fff;border-radius:0 12px 12px 0;padding:12px 18px;box-shadow:var(--sombra);margin-bottom:18px}
.bloco-cabecalho i{font-size:1.5rem;color:var(--cor,var(--vermelho))}
.bloco-cabecalho h3{font-size:1.7rem;margin:0}
.peso-pill{margin-left:auto;background:var(--preto);color:#fff;font-size:.75rem;padding:4px 10px;border-radius:999px}
.pergunta-card{background:#fff;border:1px solid var(--borda);border-radius:12px;padding:16px;height:100%;
  display:flex;flex-direction:column;justify-content:space-between;gap:12px;transition:.2s}
.pergunta-card:hover{border-color:#d5d2ce;transform:translateY(-2px)}
.pergunta-card.respondida{border-color:var(--preto)}
.pergunta-card.destacar{outline:3px solid var(--ambar);animation:piscar 1s 3}
.p-num{font-family:'Bebas Neue';background:var(--cinza-claro);min-width:30px;height:30px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;font-size:1rem;color:var(--cinza)}
.p-texto{font-weight:600;font-size:.95rem}

/* Resposta segmentada */
.seg-resposta{display:flex;gap:6px}
.seg-resposta input{position:absolute;opacity:0;pointer-events:none}
.seg-resposta label{flex:1;text-align:center;border:1px solid var(--borda);border-radius:9px;
  padding:8px 4px;font-size:.82rem;font-weight:600;cursor:pointer;transition:.15s;user-select:none}
.seg-resposta label:hover{border-color:var(--preto)}
.seg-resposta input[value="sim"]:checked + label{background:#e8f7ec;border-color:#2B9348;color:#1d7a3a}
.seg-resposta input[value="parcial"]:checked + label{background:#fff6e3;border-color:var(--ambar);color:#8a6d00}
.seg-resposta input[value="nao"]:checked + label{background:#ffe9ec;border-color:var(--vermelho);color:var(--vermelho)}

.barra-vermelha{background:var(--vermelho)}
.barra-progresso-geral{background:var(--preto)}

/* Overlay de carregamento */
.overlay-carregamento{position:fixed;inset:0;background:rgba(14,14,16,.94);z-index:999;
  display:flex;align-items:center;justify-content:center;color:#fff}
.carregamento-caixa{text-align:center}
.pizza-loader{font-size:4rem;animation:girarPizza 1.4s linear infinite}
@keyframes girarPizza{to{transform:rotate(360deg)}}

/* ---------- Página de resultado ---------- */
.resultado-topo{border-top:6px solid var(--vermelho)}
.titulo-rel{font-family:'Bebas Neue';font-size:clamp(2rem,4vw,3.2rem);margin:0 0 6px}
.estrelas{color:var(--ambar);font-size:1.5rem;letter-spacing:3px;margin-top:6px}
.selo-nivel{display:inline-block;margin-top:8px;background:color-mix(in srgb,var(--cor) 14%,#fff);
  color:var(--cor);border:1px solid var(--cor);font-weight:700;padding:6px 16px;border-radius:999px}
.texto-conclusao{color:var(--cinza);font-size:1rem}
.altura-grafico{min-height:360px}
.altura-grafico canvas{max-height:290px}
.titulo-grafico{font-size:1rem;font-weight:700;margin-bottom:12px}
.titulo-grafico i{color:var(--vermelho)}
.titulo-secao-interna{font-family:'Bebas Neue';font-size:1.8rem;letter-spacing:1px;margin-bottom:18px}
.titulo-secao-interna i{color:var(--vermelho)}
.badge-contagem{background:var(--preto);color:#fff;font-size:.8rem;padding:3px 10px;border-radius:999px;vertical-align:middle}
.lista-check{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.lista-check li{font-size:.92rem;display:flex;gap:8px;align-items:flex-start}
.recomendacao-item{border:1px solid var(--borda);border-left-width:5px;border-radius:10px;padding:14px;height:100%;background:#fff}
.recomendacao-item.prio-1{border-left-color:var(--vermelho)}
.recomendacao-item.prio-2{border-left-color:var(--ambar)}
.recomendacao-item.prio-3{border-left-color:#8D99AE}
.badge-prazo{background:var(--cinza-claro);font-size:.7rem;font-weight:700;padding:3px 8px;border-radius:999px;white-space:nowrap}
.tabela-concorrencia .col-voce{background:#fff5f6}
.tabela-concorrencia thead .col-voce{background:var(--vermelho);color:#fff}
.checklist-melhorias{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.checklist-melhorias li{display:flex;gap:10px;align-items:center;font-weight:600}
.caixa-check{width:20px;height:20px;border:2px solid var(--preto);border-radius:5px;flex:none}
.plano-coluna{background:var(--cinza-claro);border-radius:12px;padding:14px;height:100%}
.plano-coluna h6{font-weight:800}
.plano-coluna h6 i{color:var(--vermelho)}
.plano-coluna ol{padding-left:18px;margin:0;font-size:.83rem;display:grid;gap:6px}

/* CTA final */
.cta-final{position:relative;background:var(--preto-2);color:#fff;text-align:center;
  border-radius:20px;padding:60px 26px;overflow:hidden;border:1px solid #2b2b31}
.cta-brilho{position:absolute;inset:0;background:radial-gradient(420px 220px at 50% 0,rgba(228,0,43,.35),transparent 70%)}
.cta-final h2{font-family:'Bebas Neue';font-size:clamp(1.7rem,3.4vw,2.6rem);position:relative}
.cta-final p{color:#c9c9cf;position:relative}
.cta-sub{color:#8a8a92 !important;position:relative}

/* ---------- Login ---------- */
.tela-login{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.login-lado-esquerdo{background:var(--preto-2);color:#fff;
  background-image:radial-gradient(500px 320px at 20% 90%,rgba(228,0,43,.3),transparent 70%)}
.login-lado-direito{background:var(--cinza-claro)}
.login-form{width:min(430px,100%)}
@media(max-width:991px){.tela-login{grid-template-columns:1fr}}

/* ---------- Admin ---------- */
.corpo-admin{background:#f2f1ef}
.admin-shell{display:flex;min-height:100vh}
.admin-sidebar{width:248px;background:var(--preto-2);color:#fff;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;flex:none}
.sidebar-logo{display:flex;gap:10px;align-items:center;padding:22px;color:#fff;text-decoration:none;
  font-family:'Bebas Neue';font-size:1.15rem;line-height:1.05;letter-spacing:1px;border-bottom:1px solid #26262a}
.sidebar-menu{display:flex;flex-direction:column;padding:14px 10px;gap:4px;flex:1}
.sidebar-menu a{color:#b9b9c0;text-decoration:none;padding:11px 14px;border-radius:10px;font-size:.92rem;
  font-weight:600;display:flex;gap:10px;align-items:center;transition:.15s;border-left:3px solid transparent}
.sidebar-menu a:hover{background:#1d1d22;color:#fff}
.sidebar-menu a.ativo{background:#232329;color:#fff;border-left-color:var(--vermelho)}
.sidebar-menu a.ativo i{color:var(--vermelho)}
.sidebar-rodape{display:flex;justify-content:space-between;align-items:center;padding:16px;border-top:1px solid #26262a}
.btn-sair{color:#ff8fa0;text-decoration:none;font-size:1.1rem}
.admin-conteudo{flex:1;min-width:0}
.admin-topo{display:flex;align-items:center;gap:14px;padding:18px 24px;background:#fff;border-bottom:1px solid var(--borda);
  position:sticky;top:0;z-index:15}
.admin-titulo{font-family:'Bebas Neue';font-size:1.7rem;margin:0;letter-spacing:1px}
.kpi-card{background:#fff;border:1px solid var(--borda);border-radius:var(--raio);padding:20px;display:flex;
  gap:14px;align-items:center;box-shadow:var(--sombra);transition:.2s}
.kpi-card:hover{transform:translateY(-4px)}
.kpi-card i{font-size:1.7rem;color:var(--cor);background:color-mix(in srgb,var(--cor) 12%,#fff);
  width:54px;height:54px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center}
.kpi-valor{font-size:2rem;display:block;line-height:1}
.kpi-card small{color:var(--cinza);font-weight:600}
.badge-nota{background:var(--cor);color:#fff;font-weight:800;border-radius:8px;padding:3px 9px;font-size:.85rem}
.badge-status{font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap}
.st-novo{background:#ffe9ec;color:var(--vermelho)} .st-contato{background:#e3f0ff;color:#1667c2}
.st-proposta{background:#fff3d6;color:#8a6d00} .st-negociacao{background:#efe7ff;color:#6b3fd4}
.st-cliente{background:#e4f6e9;color:#1d7a3a} .st-perdido{background:#ececec;color:#666}

/* Kanban */
.kanban{display:grid;grid-template-columns:repeat(6,minmax(200px,1fr));gap:12px;overflow-x:auto;padding-bottom:12px}
.kanban-coluna{background:#eceae7;border-radius:12px;min-height:300px}
.kanban-cabecalho{padding:12px 14px;font-weight:800;font-size:.85rem;display:flex;align-items:center;gap:8px;
  border-bottom:3px solid var(--vermelho)}
.kanban-cabecalho i{color:var(--vermelho)}
.kanban-conta{margin-left:auto;background:#fff;border-radius:999px;padding:1px 9px;font-size:.75rem}
.kanban-corpo{padding:10px;display:grid;gap:8px;align-content:start;min-height:220px}
.kanban-corpo.arrastando{outline:2px dashed var(--vermelho);outline-offset:-4px;border-radius:10px}
.kanban-card{background:#fff;border:1px solid var(--borda);border-radius:10px;padding:12px;cursor:grab;
  box-shadow:0 2px 8px rgba(0,0,0,.05);font-size:.85rem;transition:.15s}
.kanban-card:hover{transform:translateY(-2px);box-shadow:var(--sombra)}
.kanban-card.arrastando{opacity:.45;transform:rotate(2deg)}
@media(max-width:1200px){.kanban{grid-template-columns:repeat(3,minmax(220px,1fr))}}
@media(max-width:767px){.kanban{grid-template-columns:1fr}}

/* Toast */
.toast-area{position:fixed;bottom:18px;right:18px;z-index:2000;display:grid;gap:8px}
.toast-item{background:var(--preto);color:#fff;padding:12px 18px;border-radius:10px;font-size:.9rem;
  box-shadow:var(--sombra);animation:surgir .3s ease forwards;border-left:4px solid var(--vermelho)}

/* Rodapé público */
.rodape-publico{background:var(--preto-2);border-top:1px solid #26262a}

/* Responsivo admin: sidebar vira gaveta */
@media(max-width:991px){
  .admin-sidebar{position:fixed;left:-260px;transition:left .25s;z-index:100}
  .admin-sidebar.aberta{left:0;box-shadow:0 0 60px rgba(0,0,0,.5)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
/* ---------- Teclado de PIN (login) ---------- */
.pin-icone{font-size:2.4rem;color:var(--vermelho)}
.pin-dots{display:flex;gap:12px;justify-content:center;margin:16px 0 22px}
.pin-dots span{width:16px;height:16px;border-radius:50%;border:2px solid var(--preto);transition:.15s}
.pin-dots span.cheio{background:var(--vermelho);border-color:var(--vermelho);transform:scale(1.18)}
.pin-dots.erro{animation:tremer .55s}
.pin-dots.erro span{border-color:var(--vermelho)}
@keyframes tremer{
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-9px)}
  40%{transform:translateX(9px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(6px)}
}
.pin-teclado{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:280px;margin:0 auto}
.tecla{height:58px;border-radius:14px;border:1px solid var(--borda);background:var(--cinza-claro);
  font-family:'Bebas Neue';font-size:1.45rem;color:var(--preto);transition:.12s;cursor:pointer}
.tecla:hover{background:#fff;border-color:var(--preto)}
.tecla:active{transform:scale(.94);background:var(--vermelho);color:#fff;border-color:var(--vermelho)}
.tecla-acao{font-size:1.05rem;color:var(--cinza)}
.pin-campo{letter-spacing:10px;text-align:center;font-weight:700}

/* ---------- Velocidade da faixa por tamanho de tela ----------
   Em telas grandes (PC/notebook) a faixa anda mais devagar
   pra manter a mesma "sensação" de velocidade do celular.
   Quanto MAIOR o número, mais LENTO. */
@media (min-width: 992px) {
  .faixa-trilho { animation-duration: 48s; }              /* vermelho: era 26s */
  .faixa-preta .faixa-trilho { animation-duration: 56s; } /* preto: era 32s */
}

/* Monitores muito largos (Full HD+): um toque a mais de calma */
@media (min-width: 1600px) {
  .faixa-trilho { animation-duration: 60s; }
  .faixa-preta .faixa-trilho { animation-duration: 70s; }
}