/* ==========================================================================
   CLIQJÁ - ESTILOS (style.css)
   --------------------------------------------------------------------------
   COMO EDITAR ESTE ARQUIVO
   - Cores, bordas e sombras: mude no bloco ":root" logo abaixo. A mudança
     vale para o site inteiro.
   - Cada bloco abaixo tem um título em letras maiúsculas dizendo qual parte
     do site ele controla (topo, destaques, planos, rodapé...).
   - As regras para celular ficam juntas no fim do arquivo, na parte
     "RESPONSIVO". Se algo estiver bom no computador e ruim no celular,
     é lá que você mexe.
   - Dica: depois de salvar, aperte Ctrl+F5 no navegador para ver a mudança.
   ========================================================================== */


/* ==========================================================================
   1. CORES E MEDIDAS GERAIS (mude aqui para mudar o site todo)
   ========================================================================== */
:root{
  --red:#F4392F;      /* vermelho da marca: detalhes, ícones, textos grandes */
  --red-ink:#DC2D20;  /* vermelho um pouco mais escuro, usado onde há TEXTO BRANCO em cima (contraste AA de acessibilidade) */
  --yellow:#F7B500;   /* amarelo da marca: fundo do topo da página, faixas */
  --black:#000;       /* preto: bordas, textos, rodapé                      */
  --white:#fff;       /* branco                                             */
  --grey:#f2f2f2;     /* cinza claro: fundos de cartões e seções           */
  --ink:#000;         /* cor do texto padrão                                */
  --bd:3px solid #000;     /* borda grossa usada nos cartões e botões       */
  --sh:5px 5px 0 #000;     /* sombra "dura" (estilo adesivo) dos cartões    */
  --r:18px;                /* arredondamento padrão dos cartões             */
}


/* ==========================================================================
   2. BASE (regras que valem para a página inteira)
   ========================================================================== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px} /* 80px = espaço do topo fixo ao clicar no menu */
body{
  font-family:Montserrat,system-ui,Arial,sans-serif; /* fonte do site (carregada no index.html) */
  color:var(--ink);background:var(--white);
  line-height:1.55;font-weight:500;-webkit-font-smoothing:antialiased;
  overflow-x:hidden; /* impede a página de rolar para o lado no celular */
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:3px} /* contorno ao navegar pelo teclado */
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:#000;color:#fff;padding:.7rem 1rem;border-radius:10px;font-weight:800;text-decoration:none} /* "pular para o conteúdo" (aparece ao apertar Tab) */
.skip:focus{top:12px}

.wrap{width:min(1120px,92%);margin:0 auto}   /* largura máxima do conteúdo: mude 1120px */
.narrow{width:min(780px,92%)}                /* versão mais estreita (usada nas dúvidas) */
.center{text-align:center}


/* ==========================================================================
   3. TEXTOS (títulos e parágrafos)
   ========================================================================== */
h1,h2,h3{font-weight:900;line-height:1.1;letter-spacing:-.02em;text-wrap:balance} /* balance = quebra de linha equilibrada nos títulos */
h1{font-size:clamp(2.2rem,5.4vw,3.9rem)}     /* título grande do topo (mín, ideal, máx) */
h2{font-size:clamp(1.7rem,3.6vw,2.6rem);margin-bottom:.6rem} /* título de cada seção */
h3{font-size:1.15rem;margin-bottom:.4rem}    /* título dos cartões */
.sub{max-width:640px;font-size:1.08rem;margin-bottom:2.2rem;text-wrap:pretty}  /* frase abaixo do título da seção */
.lead{font-size:1.15rem;max-width:520px;margin:1.2rem 0 1.6rem} /* texto de destaque (topo e chamada final) */


/* ==========================================================================
   4. BOTÕES
   Para trocar a cor de um botão, mude a classe dele no index.html:
   btn-red (vermelho) | btn-yellow (amarelo) | btn-white (branco) | btn-black (preto)
   ========================================================================== */
.btn{
  display:inline-block;text-decoration:none;font-weight:800;font-size:1rem;
  padding:.95rem 1.5rem;border:var(--bd);border-radius:999px;box-shadow:var(--sh);
  cursor:pointer;transition:transform .12s,box-shadow .12s;text-align:center;
}
.btn:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 #000} /* efeito de "apertar" */
.btn.sm{padding:.55rem 1.1rem;font-size:.9rem;box-shadow:3px 3px 0 #000}  /* botão pequeno (topo) */
.btn.big{font-size:1.2rem;padding:1.1rem 2.2rem}                          /* botão grande (final) */
.btn-red{background:var(--red-ink);color:#fff}
.btn-yellow{background:var(--yellow);color:#000}
.btn-white{background:#fff;color:#000}
.btn-black{background:#000;color:#fff;box-shadow:5px 5px 0 var(--red)}
.btn-black:hover{box-shadow:2px 2px 0 var(--red)}


/* ==========================================================================
   5. TOPO DO SITE (logo + menu)
   ========================================================================== */
.top{
  position:sticky;top:0;z-index:50;           /* fica fixo no alto ao rolar a página */
  display:flex;align-items:center;gap:1.4rem;
  padding:.5rem 4%;background:#fff;border-bottom:var(--bd);
}
.brand img{height:62px;width:auto}            /* tamanho da logo no computador */

/* Menu no computador */
.top nav{display:flex;gap:1.4rem;margin-left:auto;font-weight:700;font-size:.95rem}
.top nav a{text-decoration:none}
.top nav a:not(.btn){border-radius:10px;padding:.35rem .2rem}
.top nav a:not(.btn):hover{text-decoration:underline;text-underline-offset:4px}
.top nav a.active{box-shadow:inset 0 -4px 0 var(--yellow)} /* sublinhado da seção em que você está */
.menu-cta{display:none}  /* botão extra que só aparece dentro do menu do celular */

/* Botão de 3 linhas (só aparece no celular) */
.burger{
  display:none;margin-left:auto;position:relative;width:50px;height:50px;padding:0;
  background:var(--yellow);border:var(--bd);border-radius:14px;box-shadow:3px 3px 0 #000;
  cursor:pointer;transition:transform .12s,box-shadow .12s;
}
.burger:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
.burger span{position:absolute;left:12px;width:20px;height:3px;background:#000;border-radius:2px;transition:transform .2s,opacity .2s}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:21px}
.burger span:nth-child(3){top:28px}
/* quando o menu está aberto, as 3 linhas viram um "X" */
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Fundo escuro que cobre a página enquanto o menu do celular está aberto */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:40;display:none}
.scrim.show{display:block}
@keyframes pop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} /* animação ao abrir o menu */


/* ==========================================================================
   6. TOPO DA PÁGINA (hero): título, botões e celulares
   ========================================================================== */
.hero{background:var(--yellow);padding:3rem 0 4.5rem;border-bottom:var(--bd)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center} /* texto | celulares */
.hero h1{max-width:640px}
.cta-row{display:flex;flex-wrap:wrap;gap:1rem}   /* linha dos 2 botões */
.cta-center{justify-content:center}
.ticks{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1.6rem;font-weight:700;font-size:.95rem}
.ticks li::before{content:"✓";margin-right:.4rem;color:var(--red);font-weight:900} /* o "✓" antes de cada item */

/* Celulares com os prints do cardápio (usados no topo e na seção "sistema") */
.phones{position:relative;height:540px}
.ph{position:absolute;width:240px;border:var(--bd);border-radius:28px;box-shadow:var(--sh);background:#fff}
.p1{left:6%;top:0;transform:rotate(-4deg);z-index:2}     /* celular da frente */
.p2{right:2%;top:60px;transform:rotate(5deg)}            /* celular de trás   */

/* Selo vermelho "0% de comissão" */
.sticker{
  position:absolute;left:0;bottom:14px;z-index:3;width:134px;height:134px;border-radius:50%;
  background:var(--red-ink);color:#fff;border:var(--bd);box-shadow:var(--sh);
  display:grid;place-content:center;text-align:center;transform:rotate(-10deg);padding:.4rem;
}
.sticker b{font-size:2.6rem;font-weight:900;line-height:1}
.sticker span{font-size:.72rem;font-weight:800;line-height:1.2}


/* ==========================================================================
   7. SEÇÕES (espaçamento e fundos). Use no index.html: class="sec", "sec yellow",
      "sec black" ou "sec grey" para trocar o fundo de uma seção.
   ========================================================================== */
.sec{padding:5rem 0}                    /* espaço em cima e embaixo de cada seção */
.sec.yellow{background:var(--yellow);border-top:var(--bd);border-bottom:var(--bd)}
.sec.yellow h2{margin-bottom:1rem}
.sec.black{background:#000;color:#fff}
.sec.grey{background:var(--grey);border-top:var(--bd);border-bottom:var(--bd)}


/* ==========================================================================
   8. CARTÕES (vantagens) E COMPARATIVO WHATSAPP x CLIQJÁ
   ========================================================================== */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.card{border:var(--bd);border-radius:var(--r);padding:1.4rem;background:#fff;box-shadow:var(--sh)}
.card:nth-child(2){background:var(--yellow)}              /* cor de cada cartão, na ordem: */
.card:nth-child(3){background:var(--grey)}                /* 1º branco, 2º amarelo,        */
.card:nth-child(4){background:var(--red-ink);color:#fff}      /* 3º cinza, 4º vermelho         */

.versus{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:3rem} /* "só WhatsApp" x "com CliqJá" */
.vs{border:var(--bd);border-radius:var(--r);padding:1.6rem 1.8rem}
.vs.bad{background:var(--grey)}
.vs.good{background:#000;color:#fff;box-shadow:6px 6px 0 var(--red)}
.vs ul{list-style:none;margin-top:.8rem}
.vs li{padding:.35rem 0 .35rem 1.6rem;position:relative}
.bad li::before{content:"✕";position:absolute;left:0;color:var(--red);font-weight:900}
.good li::before{content:"✓";position:absolute;left:0;color:var(--yellow);font-weight:900}


/* ==========================================================================
   9. CALCULADORA DE COMISSÃO
   ========================================================================== */
.calc{display:grid;grid-template-columns:1.1fr .9fr;gap:1.6rem;align-items:stretch} /* campos | resultado */
.calc>*{min-width:0}
.calc-in,.calc-out{border:var(--bd);border-color:#fff;border-radius:var(--r);padding:1.6rem}

/* Lado esquerdo: campos que o cliente preenche */
.calc-in{background:#fff;color:#000;display:grid;gap:.7rem;align-content:start}
.calc-in label{font-weight:800;margin-top:.6rem}
.calc-in label:first-child{margin-top:0}
.money{display:flex;align-items:center;border:var(--bd);border-radius:14px;padding:.2rem 1rem;font-weight:900;font-size:1.6rem;background:var(--grey)} /* campo "R$" */
.money span{margin-right:.5rem}
.money input{width:100%;min-width:0;border:0;background:none;font:inherit;padding:.5rem 0;outline:none}
.money:focus-within{outline:3px solid var(--red);outline-offset:2px}
.calc input[type=range]{width:100%;accent-color:var(--red);height:28px} /* barras deslizantes */
.presets{display:flex;flex-wrap:wrap;gap:.5rem}                                  /* botões de valor rápido (R$ 5 mil, 10 mil...) */
.presets button{font:inherit;font-weight:800;font-size:.85rem;padding:.4rem .8rem;border:2px solid #000;border-radius:999px;background:#fff;color:#000;cursor:pointer;transition:background .12s}
.presets button:hover{background:var(--grey)}
.presets button.on{background:#000;color:#fff}                                  /* valor escolhido */

/* Botões de escolha do plano (Start / Basic / Plus) */
.plano-pick{border:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;min-width:0;margin-top:.6rem}
.plano-pick legend{font-weight:800;margin-bottom:.5rem;padding:0}
.calc-in .plano-pick .pp{margin:0;position:relative;display:block;font-weight:700}
.pp input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0} /* o círculo fica invisível */
.pp span{display:block;text-align:center;border:var(--bd);border-radius:14px;padding:.7rem .3rem;background:#fff;transition:background .15s,color .15s}
.pp b{display:block;font-weight:900}
.pp small{display:block;font-size:.8rem;font-weight:700}
.pp input:checked+span{background:var(--red-ink);color:#fff;box-shadow:3px 3px 0 #000} /* plano escolhido */
.pp input:focus-visible+span{outline:3px solid var(--red);outline-offset:3px}

/* Lado direito: resultado */
.calc-out{background:var(--yellow);color:#000;display:grid;gap:.9rem;align-content:start;box-shadow:6px 6px 0 var(--red)}
.row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;background:#fff;border:var(--bd);border-radius:14px;padding:.8rem 1rem;font-weight:700}
.row b{font-size:1.25rem;font-weight:900;white-space:nowrap}
.row.bad b{color:var(--red)}   /* valor da comissão em vermelho */
.save{background:#000;color:#fff;border-radius:14px;padding:1.2rem;text-align:center} /* caixa preta "você economiza" */
.save span{display:block;font-weight:700}
.save b{display:block;font-size:clamp(2.2rem,9vw,3rem);font-weight:900;color:var(--yellow);line-height:1.1;margin:.2rem 0}
.save small{display:block;font-weight:700;font-size:.95rem}
.note{margin-top:1.2rem;font-size:.85rem;opacity:.75}  /* aviso pequeno embaixo da calculadora */


/* ==========================================================================
   10. COMO FUNCIONA (4 passos)
   ========================================================================== */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin:2.2rem 0 1.8rem}
.steps li{background:#fff;border:var(--bd);border-radius:var(--r);padding:1.4rem;box-shadow:var(--sh)}
.callout{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem 1.2rem;background:#000;color:#fff;border:var(--bd);border-radius:var(--r);padding:1.2rem 1.5rem;box-shadow:6px 6px 0 var(--red);margin:0 0 2.2rem}
.callout b{font-size:1.1rem;font-weight:900;color:var(--yellow)}
.steps b{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--red-ink);color:#fff;border:var(--bd);font-weight:900;margin-bottom:.8rem} /* bolinha com o número */


/* ==========================================================================
   11. SISTEMA POR DENTRO (demonstrações reais: carrosséis, app do garçom e cartões)
   ========================================================================== */
.eyebrow{display:inline-block;background:#000;color:#fff;border-radius:999px;padding:.3rem .9rem;font-weight:800;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:1rem} /* etiqueta pequena acima dos títulos */
.sec.black .eyebrow{background:var(--yellow);color:#000}

/* Blocos com texto + imagem (Gestor de Pedidos e App do Garçom) */
.app-block{display:grid;grid-template-columns:.85fr 1.15fr;gap:2.6rem;align-items:center;margin-top:3.2rem}
.app-block.rev{grid-template-columns:1.15fr .85fr}   /* bloco do garçom: telas à esquerda, texto à direita */
.app-text h3{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:.6rem}
.tag{display:inline-block;background:#000;color:#fff;border-radius:999px;padding:.25rem .9rem;font-weight:800;font-size:.8rem;margin-bottom:.9rem} /* etiqueta preta acima do título */
.checks{list-style:none;margin:1rem 0 1.6rem}
.checks li{position:relative;padding:.3rem 0 .3rem 1.7rem;font-weight:600}
.checks li::before{content:"✓";position:absolute;left:0;color:var(--red);font-weight:900}

/* Vídeos (seção "Veja a CliqJá em ação"): capa com botão de play; o vídeo só é carregado ao tocar */
.vid{position:relative;aspect-ratio:9/16;border:var(--bd);border-radius:24px;overflow:hidden;background:#000;box-shadow:var(--sh)}
.vid-open{position:absolute;inset:0;display:block;cursor:pointer}
.vid-open:focus-visible{outline-offset:-8px}
.vid-open img{width:100%;height:100%;object-fit:cover}
.vid-open::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.5),transparent 50%)}  /* escurece a base da capa */
.vid-play{position:absolute;inset:0;margin:auto;z-index:1;width:76px;height:76px;border-radius:50%;background:var(--yellow);border:var(--bd);box-shadow:3px 3px 0 #000;display:grid;place-items:center;transition:transform .15s} /* botão de play amarelo */
.vid-play::after{content:"";margin-left:6px;border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent #000}  /* triângulo do play */
.vid-open:hover .vid-play{transform:scale(1.08)}
.vid-time{position:absolute;left:12px;bottom:12px;z-index:1;background:#000;color:#fff;font-size:.8rem;font-weight:800;padding:.15rem .65rem;border-radius:99px} /* duração */
.vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.vid.on .vid-open{display:none}                                                   /* depois do play, some a capa */
.vid-card figcaption{margin-top:.9rem;text-align:center;font-size:.95rem}
.vid-card figcaption b{display:block;font-weight:900;font-size:1.05rem}

/* Cartão com "janela" (print do sistema + legenda) */
.shot{display:flex;flex-direction:column;border:var(--bd);border-radius:var(--r);background:#fff;box-shadow:var(--sh);overflow:hidden;min-width:0}
.frame{display:flex;gap:6px;padding:.55rem .8rem;background:#000;border-bottom:var(--bd)} /* barrinha com 3 bolinhas, estilo janela */
.frame span{width:10px;height:10px;border-radius:50%;background:var(--yellow)}
.frame span:first-child{background:var(--red)}
.frame span:last-child{background:#fff}
.shot>img{width:100%;height:auto}
.feat-grid .shot>img{aspect-ratio:900/380;object-fit:cover;object-position:top} /* cartões lado a lado: mesma altura de imagem em todos */
.slide.shot>img{aspect-ratio:1000/590;object-fit:contain;background:#121214} /* carrossel do gestor: todas as telas com a mesma moldura e fundo escuro */
.slide.shot>img[src*="painel-relatorios"]{background:#2b3034}
.shot figcaption{padding:1rem 1.2rem;border-top:var(--bd);margin-top:auto;font-size:.95rem} /* legenda embaixo */
.shot figcaption b{display:block;font-weight:900;font-size:1.05rem;margin-bottom:.15rem}
.beta{display:inline-block;vertical-align:middle;margin-left:.4rem;background:var(--red-ink);color:#fff;border:2px solid #000;border-radius:999px;padding:.05rem .55rem;font-size:.7rem;font-style:normal;font-weight:800;letter-spacing:.04em} /* selo "Beta" */

/* Carrossel (Gestor e Garçom). O JavaScript fica no js/main.js, parte 5. */
.slider{min-width:0}
.slider-track{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 8px 14px 0;-webkit-overflow-scrolling:touch} /* faixa que rola de lado */
.slider-track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;min-width:0;margin:0;scroll-snap-align:start}                 /* cada tela ocupa 100% da largura */
.slider.multi .slide{flex:0 0 calc((100% - 2rem)/3)}                               /* no garçom: 3 telas lado a lado */
.ph-s img{border:var(--bd);border-radius:26px;box-shadow:var(--sh);background:#fff}   /* moldura dos celulares */
.ph-s figcaption{text-align:center;margin-top:.8rem;font-size:.9rem}
.ph-s figcaption b{display:block;font-weight:900}
.slider-nav{display:flex;justify-content:center;align-items:center;gap:1rem;margin-top:.6rem}
.slider.fits .slider-nav{display:none}                                              /* esconde setas se tudo cabe na tela */
.sl-btn{width:46px;height:46px;border-radius:50%;border:var(--bd);background:#fff;color:#000;font-size:1.6rem;font-weight:900;line-height:1;box-shadow:3px 3px 0 #000;cursor:pointer;transition:transform .12s,box-shadow .12s}
.sl-btn:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
.sl-dots{display:flex;gap:.5rem}
.sl-dots button{width:13px;height:13px;padding:0;border-radius:50%;border:2px solid #000;background:#fff;cursor:pointer}
.sl-dots button.on{background:#000}                                                 /* bolinha da tela atual */

/* Grade de 6 cartões (IA, financeiro, cozinha, TV, autoatendimento) */
.more-h{margin-top:3.8rem;margin-bottom:1.4rem}
.tab-h{font-size:clamp(1.5rem,3vw,2rem)}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;align-items:stretch}
.totem-box{flex:1;display:grid;place-items:center;padding:1.4rem;background:var(--grey)}
.totem{width:100%;height:auto;filter:drop-shadow(6px 8px 0 rgba(0,0,0,.18))}        /* imagem dos tablets */

/* Tela KDS (cozinha) desenhada com HTML. A cor de cada coluna vem do "--c" no index.html */
.kds{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:.6rem;padding:.9rem;background:#0f1424;color:#fff}
.kc{background:rgba(255,255,255,.07);border-radius:12px;padding:.6rem}
.kc h4{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;font-weight:800}
.kc i{font-style:normal;background:var(--c);color:#fff;border-radius:99px;min-width:26px;text-align:center;padding:.05rem .4rem;font-size:.8rem} /* contador da coluna */
.kc p{display:flex;justify-content:space-between;gap:.4rem;margin-top:.45rem;padding:.45rem .6rem;background:rgba(255,255,255,.09);border-left:4px solid var(--c);border-radius:8px;font-weight:800;font-size:.8rem} /* pedido */
.kc small{font-weight:600;opacity:.75;font-size:.75rem}

/* TV da loja desenhada com HTML (anúncio em cima, pedidos embaixo) */
.tv{flex:1;display:grid;gap:.8rem;padding:.9rem;background:#0f1424;color:#fff}
.tv-ad{display:grid;place-content:center;text-align:center;background:var(--yellow);color:#000;border-radius:12px;padding:1rem}   /* quadro do anúncio */
.tv-ad small{font-weight:800;font-size:.75rem;letter-spacing:.06em}
.tv-ad b{font-size:1.5rem;font-weight:900;line-height:1.1;margin:.3rem 0}
.tv-ad span{font-weight:900;font-size:1.3rem;color:var(--red)}
.tv-list{display:grid;gap:.5rem;align-content:start}                                                                         /* lista de pedidos */
.tv-list h4{font-size:.85rem;font-weight:800;opacity:.8}
.tv-list p{display:flex;justify-content:space-between;gap:.4rem;padding:.5rem .6rem;background:rgba(255,255,255,.09);border-left:4px solid var(--c);border-radius:8px;font-weight:800;font-size:.85rem}
.tv-list small{font-weight:600;opacity:.75;font-size:.75rem}

/* Recursos extras em pílulas e faixa de chamada para ação */
.more{margin-top:3rem}
.more>b{display:block;margin-bottom:.8rem;font-weight:900}
.feat{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem}
.feat li{border:2px solid #000;border-radius:999px;padding:.3rem .9rem;font-weight:700;font-size:.9rem;background:var(--yellow)}
.cta-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem 2rem;margin-top:3rem;background:#000;color:#fff;border:var(--bd);border-radius:var(--r);padding:1.6rem 1.8rem;box-shadow:6px 6px 0 var(--red)}
.cta-band b{display:block;font-size:1.3rem;font-weight:900;color:var(--yellow)}
.cta-band span{display:block;opacity:.9}
.cta-band .btn{box-shadow:4px 4px 0 var(--yellow)}

/* Ampliar imagem ao tocar (qualquer imagem com data-zoom) */
img[data-zoom]{cursor:zoom-in}
.lightbox{border:0;padding:0;background:transparent;width:100vw;height:100vh;max-width:none;max-height:none;overflow:auto}
.lightbox[open]{display:flex}
.lightbox::backdrop{background:rgba(0,0,0,.88)}
.lightbox img{margin:auto;max-width:94vw;max-height:86vh;width:auto;height:auto;border:var(--bd);border-color:#fff;border-radius:14px;background:#fff;cursor:zoom-out}
.lb-close{position:fixed;top:14px;right:14px;z-index:2;width:48px;height:48px;border-radius:50%;border:var(--bd);background:var(--yellow);color:#000;font-size:2rem;line-height:1;font-weight:900;cursor:pointer;box-shadow:3px 3px 0 #000}


/* ==========================================================================
   12. PLANOS
   ========================================================================== */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;align-items:stretch;margin-top:1rem}
.plans>*{min-width:0}
.plan{position:relative;display:flex;flex-direction:column;border:var(--bd);border-radius:var(--r);padding:1.8rem;background:#fff;box-shadow:var(--sh)}
.plan.hot{background:var(--yellow);box-shadow:8px 8px 0 var(--red);transform:translateY(-12px)} /* plano destacado (Basic) */
.badge{position:absolute;top:-16px;left:1.4rem;background:var(--red-ink);color:#fff;border:var(--bd);border-radius:999px;padding:.2rem .9rem;font-weight:800;font-size:.85rem} /* selo "Mais escolhido" */
.price{font-size:3rem;font-weight:900;letter-spacing:-.03em;margin:.4rem 0 1rem}
.price small{font-size:1.2rem;margin-right:.2rem}            /* o "R$" */
.price span{font-size:1rem;font-weight:700;letter-spacing:0} /* o "/mês" */
.plan-body{flex:1;margin-bottom:1.4rem}                                        /* lista de recursos do plano */
.plan ul{list-style:none;border-top:2px solid #000;padding-top:1rem}
.pf{margin:.6rem 0 0;background:none;border:0;border-radius:0;box-shadow:none}   /* "Ver todos os recursos" */
.pf>summary{display:inline-flex;justify-content:flex-start;align-items:center;gap:.4rem;padding:.3rem 0;font-size:.9rem;font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pf>summary::after{content:"+";font-size:1.1rem;transition:none}
.pf[open]>summary::after{content:"−";transform:none}
.pf ul{border-top:0;padding-top:.4rem}
.plan li{padding:.3rem 0 .3rem 1.6rem;position:relative}
.plan li::before{content:"✓";position:absolute;left:0;font-weight:900;color:var(--red)}
.plan li.no{opacity:.6}                                       /* item que o plano NÃO tem */
.plan li.no::before{content:"✕";color:#000}
.trial{text-align:center;font-weight:800;font-size:.85rem;margin-top:.8rem} /* "Teste grátis por 15 dias" */


/* ==========================================================================
   13. DÚVIDAS FREQUENTES (abre e fecha ao clicar)
   ========================================================================== */
details{background:#fff;border:var(--bd);border-radius:14px;margin-top:.9rem;box-shadow:3px 3px 0 #000}
summary{cursor:pointer;font-weight:800;padding:1.1rem 1.3rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-weight:900;font-size:1.4rem;line-height:1;transition:transform .2s} /* o "+" */
details[open] summary::after{transform:rotate(45deg)}  /* vira "x" quando aberto */
#duvidas details p{padding:0 1.3rem 1.2rem}
.faq-cta{margin-top:2rem;text-align:center}   /* "Ficou com alguma dúvida?" */
.faq-cta p{font-weight:800;margin-bottom:.9rem}


/* ==========================================================================
   14. CHAMADA FINAL, RODAPÉ E BOTÃO FLUTUANTE DO WHATSAPP
   ========================================================================== */
.final{background:var(--red-ink);color:#fff;padding:5rem 0;text-align:center}
.final .lead{margin:1rem auto 2rem}
.final .btn-red{background:#000;color:#fff}   /* botão principal preto sobre o fundo vermelho (o da demonstração é branco) */

footer{background:#000;color:#fff;padding:3rem 0 5rem}
.foot{display:grid;gap:1.4rem;justify-items:center;text-align:center}
.flogo{width:min(260px,70%);height:auto}        /* logo do rodapé */
.ftag{font-weight:700;max-width:420px}          /* frase abaixo da logo */
.social{display:flex;gap:.9rem}                 /* botões redondos de redes sociais */
.social a{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;border:var(--bd);border-color:#fff;color:#fff;transition:transform .12s}
.social a:hover{transform:translateY(-3px)}
.s-wa{background:#25D366}                       /* cor do botão WhatsApp  */
.s-ig{background:linear-gradient(45deg,#feda75,#fa7e1e 30%,#d62976 60%,#962fbf)} /* cor do Instagram */
.s-ml{background:var(--red)}                    /* cor do e-mail */
.s-web{background:#000}                         /* cor do site   */
.links{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.6rem;font-weight:700}
.links a{text-decoration:none}
.links a:hover{color:var(--yellow)}
.verse{width:min(640px,100%);background:var(--yellow);color:#000;border:var(--bd);border-color:#fff;border-radius:var(--r);padding:1.6rem 1.4rem;box-shadow:6px 6px 0 var(--red);margin:.6rem 0} /* cartão do versículo */
.verse p{font-size:clamp(1.15rem,3.4vw,1.5rem);font-weight:900;line-height:1.3;letter-spacing:-.01em}
.verse cite{display:block;margin-top:.8rem;font-style:normal;font-weight:800}
.copy{font-size:.85rem;opacity:.7}               /* linha de direitos reservados */

.wa-float{position:fixed;right:18px;bottom:18px;z-index:60;width:62px;height:62px;border-radius:50%;background:#25D366;border:var(--bd);box-shadow:3px 3px 0 #000;display:grid;place-items:center;cursor:pointer;opacity:0;transform:scale(.85);pointer-events:none;transition:opacity .2s,transform .2s} /* bolinha fixa do WhatsApp (escondida até rolar a página) */
.wa-float.show{opacity:1;transform:none;pointer-events:auto}


/* ==========================================================================
   15. RESPONSIVO (celular e tablet)
   --------------------------------------------------------------------------
   - "max-width:1080px" = tablet e celular (aqui o menu vira o botão de 3 linhas)
   - "max-width:560px"  = celular pequeno (a maior parte dos visitantes)
   ========================================================================== */
@media (max-width:1080px){
  /* menu */
  .burger{display:block}
  .top .btn{display:none}                  /* esconde o botão "Testar grátis" do topo... */
  .brand img{height:58px}
  .top nav{display:none;position:absolute;top:calc(100% + 12px);left:4%;right:4%;flex-direction:column;gap:.3rem;background:#fff;border:var(--bd);border-radius:20px;box-shadow:6px 6px 0 #000;padding:.8rem;margin:0}
  .top nav.open{display:flex;animation:pop .18s ease-out}
  .top nav a:not(.btn){display:flex;justify-content:space-between;align-items:center;padding:.95rem 1rem;border-radius:12px;font-size:1.05rem;font-weight:800}
  .top nav a:not(.btn)::after{content:"›";font-size:1.5rem;line-height:1} /* setinha de cada item */
  .top nav a:not(.btn):hover{text-decoration:none;background:var(--grey)}
  .top nav a.active:not(.btn){background:var(--yellow);box-shadow:none}  /* item da seção atual */
  .top nav .menu-cta{display:block;margin-top:.5rem;font-size:1rem}      /* ...e mostra este, dentro do menu */

  /* conteúdo em uma coluna */
  .hero-grid,.calc,.versus,.app-block,.app-block.rev{grid-template-columns:1fr}
  .app-block>.slider{order:-1}              /* no celular as telas reais vêm primeiro, depois o texto */
  .slider.multi .slide{flex-basis:46%}      /* garçom: ~2 telas visíveis no tablet */
  .feat-grid{grid-template-columns:1fr 1fr}
  .phones{height:470px;max-width:460px;margin:0 auto;width:100%}
  .ph{width:200px}
  .grid4,.steps,.grid3{grid-template-columns:1fr 1fr}
  .plans{grid-template-columns:1fr;max-width:480px;margin:2rem auto 0}
  .plan.hot{transform:none}                /* no celular a ordem segue a do computador: Start, Basic (destaque) e Plus */
}

@media (max-width:560px){
  .brand img{height:54px}
  .sec{padding:3.5rem 0}                   /* menos espaço entre seções */
  .btn{width:100%}                         /* botões ocupam a largura toda */
  .wa-float{width:54px;height:54px;right:14px;bottom:14px}
  .grid4,.steps,.grid3,.feat-grid{grid-template-columns:1fr}
  .app-block{margin-top:2.4rem;gap:1.6rem}
  .slider.multi .slide{flex-basis:58%}      /* garçom: 1 tela e meia, para convidar a arrastar */
  .slider.multi.vids .slide{flex-basis:76%} /* vídeos: 1 vídeo e um pedaço do próximo */
  .mini .frame,.mini .kds,.mini .tv,.mini .totem-box{display:none}   /* cartões sem print real viram só texto no celular */
  .mini figcaption{border-top:0}
  .mini figcaption b::before{content:attr(data-i) " "}
  .feat li{font-size:.82rem;padding:.25rem .7rem}
  .steps li{display:grid;grid-template-columns:44px 1fr;gap:0 .9rem;padding:1.1rem}            /* passos mais compactos */
  .steps b{grid-row:1/3;margin:0}
  .steps h3,.steps p{margin:0}
  .card{padding:1.1rem}
  .plan{padding:1.4rem}
  .price{font-size:2.6rem}
  .callout,.cta-band{padding:1.1rem}
  .cta-band .cta-row{width:100%}

  /* celulares do topo e selo */
  .ph{width:165px}
  .phones{height:400px}
  .p2{top:50px}
  .sticker{width:104px;height:104px;bottom:0}
  .sticker b{font-size:2rem}
  .sticker span{font-size:.62rem}

  /* calculadora */
  .calc-in,.calc-out{padding:1.1rem}
  .row{flex-direction:column;align-items:flex-start;gap:.1rem;padding:.7rem .8rem}
  .row span{font-size:.9rem}
  .row b{font-size:1.45rem}
  .pp small{font-size:.75rem}

  /* imagem ampliada: prints largos ficam maiores e podem ser arrastados */
  .lightbox img.wide{max-width:none;max-height:none;width:230vw}
}

/* Respeita quem pediu "menos animação" no celular ou computador */
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}