/* ==========================================================================
   kotta.css — só o que é exclusivo da página do Kotta.
   O alicerce da página de produto está em produto.css.
   ========================================================================== */

/* --- topo: a mesa, com os dois lados visíveis de uma vez ----------------- */
.mesa{ position:relative; width:100%; height:452px }
.mesa__compra{ left:0; right:88px; top:2px }          /* .janela já é absoluta */

/* quadro comparativo: o que o comprador recebe */
.qd{ padding:4px 0 0 }
.qd__cab, .qd__l{
  display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3, minmax(0,1fr));
  align-items:center; gap:10px; padding:9px 16px;
}
.qd__cab{
  font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted-soft); border-bottom:1px solid var(--line-soft);
}
.qd__cab span:not(:first-child), .qd__l span:not(:first-child){ text-align:right }
.qd__l{ border-bottom:1px solid var(--line-soft) }
.qd__it{ font-size:12.5px; font-weight:700; letter-spacing:-.015em }
.qd__p{ font-size:12.5px; font-weight:600; color:var(--muted) }
.qd__p--off{ color:var(--muted-soft) }
/* o vencedor de cada linha: a única cor forte da maquete */
.qd__p--v{
  color:var(--ink); font-weight:800;
  background:var(--lime); border-radius:7px; padding:3px 7px; margin:-3px -7px;
}
.qd__rod{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 16px; font-size:11.5px; font-weight:600; color:var(--muted);
}
/* os dois à esquerda: encostados na direita, o cartão da proposta cobria a economia */
.qd__rod{ justify-content:flex-start; gap:9px }
.qd__rod .qd__eco::before{ content:'·'; margin-right:9px; color:var(--muted-soft) }
.qd__eco{ font-weight:800; color:var(--ink) }

/* o lado da venda, sobreposto no canto */
.prop{
  position:absolute; right:0; bottom:10px; width:346px; z-index:2;
  background:var(--white); border:1px solid var(--line-soft); border-radius:14px;
  box-shadow:0 1px 2px rgba(20,20,20,.04), 0 18px 34px -16px rgba(20,20,20,.22),
             0 48px 70px -38px rgba(20,20,20,.3);
  overflow:hidden;
}
.prop__top{
  display:flex; align-items:center; gap:10px;
  padding:11px 14px; border-bottom:1px solid var(--line-soft);
}
.prop__nome{ display:block; font-size:12.5px; font-weight:800; letter-spacing:-.02em }
.prop__on{ display:block; font-size:11px; font-weight:600; color:var(--muted) }
.prop__corpo{ padding:12px 14px 14px }
.prop__pdf{
  display:flex; align-items:center; gap:10px;
  padding:11px 12px; border-radius:11px;
  background:var(--paper); border:1px solid var(--line-soft);
}
.prop__ico{ flex:none; display:grid; place-items:center; width:30px; height:30px;
  border-radius:9px; background:var(--ink); color:var(--lime) }
.prop__arq{ display:block; font-size:12.5px; font-weight:700; letter-spacing:-.015em }
.prop__meta{ display:block; font-size:11px; font-weight:600; color:var(--muted) }
.prop__ok{
  margin-left:auto; flex:none; padding:4px 9px; border-radius:999px; background:var(--lime);
  font-size:9.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
}
.prop__rod{ margin:10px 2px 0; font-size:11.5px; font-weight:600; color:var(--muted); line-height:1.45 }

/* --- seletor de lado ----------------------------------------------------- */
.lados{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px }
.lado{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  padding:32px 34px 28px; border-radius:26px; text-decoration:none; color:inherit;
  background:var(--white); border:1px solid var(--line-soft);
  box-shadow:0 20px 42px -30px rgba(20,20,20,.34);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.lado:hover{ transform:translateY(-3px); box-shadow:0 30px 54px -30px rgba(20,20,20,.4) }
.lado__eti{
  padding:4px 11px; border-radius:999px; background:var(--lime);
  font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
}
.lado__t{ font-size:clamp(19px,1.9vw,23px); font-weight:800; letter-spacing:-.028em; line-height:1.18 }
.lado__d{ margin:0; font-size:14.5px; line-height:1.6; font-weight:500; color:var(--muted) }
.lado__ir{
  margin-top:6px; display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:700; letter-spacing:-.01em;
}
.lado:hover .lado__ir svg{ transform:translateX(3px) }
.lado__ir svg{ transition:transform .3s var(--ease) }

/* --- maquete: o funil da busca de fornecedor ----------------------------- */
.filtro{ display:flex; flex-direction:column; gap:10px }
.filtro__l{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; border-radius:11px; border:1px solid var(--line-soft);
}
.filtro__l--cru{ background:var(--white); color:var(--muted-soft) }
.filtro__l--ok{ background:var(--ink); border-color:var(--ink); color:var(--white) }
.filtro__n{ font-size:12.5px; font-weight:700; letter-spacing:-.015em }
.filtro__q{ font-size:17px; font-weight:800; letter-spacing:-.03em }
.filtro__l--ok .filtro__q{ color:var(--lime) }
.filtro__marcas{ display:flex; flex-wrap:wrap; gap:6px; padding:0 2px }
.fmarca{
  padding:5px 10px; border-radius:999px; background:var(--white);
  border:1px solid var(--line-soft); font-size:10.5px; font-weight:700; color:var(--muted);
}

/* --- maquete: a cobrança acontecendo ------------------------------------- */
.cob{ display:flex; flex-direction:column }
.cob__l{ display:flex; align-items:baseline; gap:12px; padding:10px 2px }
.cob__l + .cob__l{ border-top:1px solid var(--line-soft) }
.cob__d{
  flex:none; width:44px; font-size:10px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted-soft);
}
.cob__t{ font-size:12.5px; font-weight:600; color:var(--muted); line-height:1.45 }
.cob__l--ok .cob__t{ color:var(--ink); font-weight:800 }
.cob__l--ok .cob__d{ color:var(--ink) }

/* --- maquete: total por fornecedor --------------------------------------- */
.pnl{ display:flex; flex-direction:column; gap:11px }
.pnl__l{ display:grid; grid-template-columns:minmax(0,1fr) 78px auto; align-items:center; gap:12px }
.pnl__f{ font-size:12.5px; font-weight:700; letter-spacing:-.015em }
.pnl__b{ height:7px; border-radius:999px; background:var(--stone); overflow:hidden }
.pnl__b i{ display:block; height:100%; border-radius:999px; background:var(--ink) }
.pnl__v{ font-size:12.5px; font-weight:700; color:var(--muted); text-align:right }
.pnl__best{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:4px; padding:12px 14px; border-radius:11px; background:var(--lime);
  font-size:12px; font-weight:700;
}
.pnl__best b{ font-size:15px; font-weight:800; letter-spacing:-.02em }

/* --- maquete: os dois canais de entrada ---------------------------------- */
.canais{ display:flex; flex-direction:column; gap:9px }
.canal{
  display:flex; align-items:center; gap:11px;
  padding:12px 13px; border-radius:12px;
  background:var(--white); border:1px solid var(--line-soft);
}
.canal__ico{ flex:none; display:grid; place-items:center; width:30px; height:30px;
  border-radius:9px; color:#fff }
.canal__ico--mail{ background:#2f6bd8 }
.canal__ico--zap{ background:#25d366 }
.canal__n{ display:block; font-size:12.5px; font-weight:700; letter-spacing:-.015em }
.canal__s{ display:block; font-size:11px; font-weight:600; color:var(--muted) }

/* --- maquete: de onde vem o preço ---------------------------------------- */
.fontes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px }
.fonte{
  padding:13px 12px; border-radius:12px;
  background:var(--white); border:1px solid var(--line-soft);
}
.fonte__t{ display:block; font-size:13px; font-weight:800; letter-spacing:-.02em }
.fonte__s{ display:block; margin-top:3px; font-size:10.5px; font-weight:600; color:var(--muted) }
.fonte--nota{
  grid-column:1 / -1; background:transparent; border-style:dashed;
  font-size:11.5px; font-weight:600; color:var(--muted); line-height:1.45;
}

/* --- maquete: a proposta que sai ----------------------------------------- */
.doc{ background:var(--white); border:1px solid var(--line-soft); border-radius:12px; padding:14px 16px }
.doc__cab{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:10px; border-bottom:1px solid var(--line-soft);
}
.doc__tit{ font-size:13px; font-weight:800; letter-spacing:-.02em }
.doc__sel{
  padding:4px 9px; border-radius:999px; background:var(--lime);
  font-size:9.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
}
.doc__l{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 0; font-size:12.5px; font-weight:600; color:var(--muted);
}
.doc__l + .doc__l{ border-top:1px solid var(--line-soft) }
.doc__tot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:2px; padding-top:10px; border-top:1px solid var(--line-soft);
  font-size:12px; font-weight:700;
}
.doc__tot b{ font-size:16px; font-weight:800; letter-spacing:-.025em }
.doc__pe{ margin-top:9px; font-size:10.5px; font-weight:600; color:var(--muted-soft) }

/* --- onde ele se encaixa ------------------------------------------------- */
.encaixe{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px }
.enc{
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  padding:28px 30px; border-radius:24px;
  background:var(--white); border:1px solid var(--line-soft);
  box-shadow:0 20px 42px -32px rgba(20,20,20,.32);
}
.enc__cab{
  padding:4px 11px; border-radius:999px; background:var(--stone);
  font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
}
.enc__l{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; width:100% }
.enc__l li{ font-size:14.5px; font-weight:700; letter-spacing:-.02em }
.enc__l li + li{ padding-top:8px; border-top:1px solid var(--line-soft) }
.enc__d{ margin:0; font-size:13px; line-height:1.55; font-weight:500; color:var(--muted) }

@media (max-width:900px){
  .lados, .encaixe, .fontes{ grid-template-columns:minmax(0,1fr) }
}

/* --- a tela onde a pessoa escreve o pedido ------------------------------- */
/* .janela é absoluta por padrão (vive dentro de um .palco); aqui a moldura
   é um cartão normal, então redesenho o contêiner em vez de reposicionar. */
.chatcot{
  position:relative; overflow:hidden; border-radius:14px;
  background:var(--white); border:1px solid var(--line-soft);
  box-shadow:0 1px 2px rgba(20,20,20,.04), 0 16px 30px -16px rgba(20,20,20,.2),
             0 44px 64px -38px rgba(20,20,20,.26);
}
.chatcot .novacot{ padding:34px 28px 28px }
.chatcot .novacot__tit{ font-size:19px }
.cc__campo{
  display:flex; align-items:flex-end; gap:10px; width:100%;
  padding:14px 14px 14px 17px; text-align:left;
  border-radius:16px; background:var(--white); border:1px solid var(--line-soft);
  box-shadow:0 2px 6px rgba(20,20,20,.05);
}
.cc__txt{ font-size:12.5px; font-weight:500; line-height:1.5; color:var(--ink) }
.cc__bt{
  flex:none; display:grid; place-items:center; width:30px; height:30px;
  border-radius:10px; background:var(--ink); color:var(--lime);
}
.chatcot .novacot__nota{ margin-top:12px }

/* respiro entre os passos e os cartões de diferencial, que estavam colados */
.passos + .dif2{ margin-top:60px }
.dif2--entrada{ margin-bottom:52px }

/* critérios do filtro: 4 em duas colunas, em vez de 3 numa linha e 1 sobrando */
.filtro__marcas{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px }
.fmarca{ display:flex; align-items:center; gap:7px }
.fmarca__c{ flex:none; color:var(--ink) }
@media (max-width:900px){ .filtro__marcas{ grid-template-columns:minmax(0,1fr) } }

/* --- aviso de função que ainda não está no ar ---------------------------- */
.marca-linha{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.emb{
  /* 3.5px: a borda tracejada soma 2px, que a outra pílula não tem */
  padding:3.5px 10px; line-height:1; border-radius:999px;
  border:1px dashed rgba(20,20,20,.2); color:var(--muted-soft);
  font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
}


/* fornecedor mais barato: mesmo destaque do vencedor no quadro do topo */
.pnl__l--best .pnl__v{
  color:var(--ink); font-weight:800;
  background:var(--lime); border-radius:7px; padding:3px 7px; margin:-3px -7px;
}

/* --- módulo de vendas: o quadro de etapas com os dois canais em volta ----- */
/* sobreposição pequena de propósito: os cartões encostam na borda do quadro,
   sem cobrir as colunas — a caixa de entrada estava comendo a primeira delas */
.palco--venda{ height:432px; margin-top:8px }
.palco--venda .janela{ left:268px; right:268px; top:10px }
.palco--venda .flut--esq{ left:0; bottom:auto; top:88px; width:280px }
.palco--venda .flut--dir{ right:0; top:auto; bottom:26px; width:286px }
/* "Aguardando aprovação" quebra em duas linhas; sem isso a coluna desalinha */
.palco--venda .kcol__top{ align-items:flex-start; min-height:27px }
.kcard--ok{ border-color:rgba(20,20,20,.16) }
.kcard--ok .kcard__meta{ color:var(--ink); font-weight:700 }

/* caixa de entrada, no mesmo desenho dos cartões do quadro */
.cxm{ display:flex; flex-direction:column; gap:7px }
.cxm__l{
  padding:9px 10px; border-radius:9px;
  background:var(--paper); border:1px solid var(--line-soft);
}
.cxm__l--on{ background:var(--white); border-color:rgba(20,20,20,.14) }
.cxm__de{
  display:flex; align-items:baseline; gap:8px;
  font-size:11.5px; font-weight:700; letter-spacing:-.01em;
}
.cxm__h{ margin-left:auto; flex:none; font-size:9.5px; font-weight:600; color:var(--muted-soft) }
.cxm__as{
  display:block; margin-top:2px; font-size:9.5px; font-weight:500; color:var(--muted-soft);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ícone do WhatsApp com o selo mordendo a quina, como num app */
.flut__tit{ display:flex; align-items:center; gap:8px }
.zap-app{ position:relative; flex:none; display:block; width:19px; height:19px }
.zap-app .zap-mini{ width:19px; height:19px }
.selo-app{ position:absolute; right:-4px; bottom:-4px; width:11px; height:11px }
.palco--venda .bolha{ font-size:12.5px; max-width:84% }

/* --- fios de divisão que não fazem falta em volta da prova social -------- */
.section.section--sem-fio{ border-top:0 }


/* a maquete perdeu o rótulo: o documento centraliza sozinho no cinza */
.mk--centro{ display:grid; place-items:center }

/* --- mensagem de áudio, como o WhatsApp desenha -------------------------- */
.bolha--audio{ display:flex; align-items:center; gap:9px; max-width:100%; padding:9px 12px }
.au__play{
  flex:none; display:grid; place-items:center; width:22px; height:22px;
  border-radius:999px; background:var(--ink); color:var(--lime); padding-left:1px;
}
.au__onda{ display:flex; align-items:center; gap:2px; flex:1; height:16px }
.au__onda i{ flex:1; min-width:2px; border-radius:1px; background:rgba(20,20,20,.3) }
.au__onda i:nth-child(-n+7){ background:rgba(20,20,20,.62) }   /* trecho já ouvido */
.au__t{ flex:none; font-size:10px; font-weight:600; color:var(--muted-soft) }

/* o ícone da maquete de canais também leva o logo real e o selo */
.canal__ico{ position:relative; overflow:visible }
.zap-mini--b{ width:17px; height:17px }
.canal__ico .selo-app{ right:-3px; bottom:-3px; width:11px; height:11px }

/* --- quem mandou o balão: o rosto dele mordendo a quina ------------------ */
.bolha--out{ position:relative }
.bolha__quem{
  position:absolute; right:-7px; bottom:-7px; width:21px; height:21px;
  border:2px solid var(--white);   /* anel: separa o rosto do balão escuro */
}