/* Cupondo no celular: o site vira o app (mesmas telas, mesma barra, mesmo desenho). No computador nada daqui vale. */
@media (max-width: 760px) {
  body.cel { padding-bottom: 0; }
  body.cel header.topo, body.cel .linha2, body.cel .faixaApp, body.cel footer { display: none !important; }
  body.cel #app { padding: 0; min-height: 100vh; }
  .cTela { padding: calc(env(safe-area-inset-top) + 14px) 16px 130px; display: flex; flex-direction: column; gap: 16px; max-width: 700px; margin: 0 auto; }
  .cTit { font-family: var(--fd); font-weight: 900; font-size: 34px; letter-spacing: -.045em; line-height: 1.05; margin: 0; }
  .cTit em { font-style: normal; color: var(--market); }
  .cSub { color: var(--soft); font-size: 15px; line-height: 1.45; margin: -6px 0 0; }
  .cK { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); margin: 6px 4px -6px; }
  .cSec { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .cSec h2 { font-family: var(--fd); font-weight: 900; font-size: 24px; letter-spacing: -.04em; margin: 0; }
  .cSec small { color: var(--faint); font-size: 12px; }
  .cCard { background: var(--tile); border: 1px solid var(--hair); border-radius: 24px; box-shadow: var(--sombra); }
  .cPill { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--hair2); background: var(--tile); color: var(--ink); font: 600 14px var(--f); white-space: nowrap; flex-shrink: 0; text-decoration: none; cursor: pointer; }
  .cPill.on { background: var(--ink); color: var(--onink); border-color: var(--ink); }
  .cPill small { color: var(--faint); font-weight: 700; }
  .cPill.on small { color: var(--onink); opacity: .6; }
  .cVolta { align-self: flex-start; height: 38px; padding: 0 15px 0 10px; }
  .cRola { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .cRola::-webkit-scrollbar { display: none; }
  .cBtn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border-radius: 99px; background: var(--ink); color: var(--onink); font: 800 16px var(--f); border: 0; text-decoration: none; cursor: pointer; }
  .cBtn.sec { background: var(--tile); color: var(--ink); border: 1px solid var(--hair2); font-weight: 700; }
  .cBusca { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; border-radius: 99px; background: var(--tile); border: 1px solid var(--hair2); }
  .cBusca input { flex: 1; border: 0; background: transparent; color: var(--ink); font: 500 16px var(--f); outline: 0; min-width: 0; }

  /* barra de baixo: igual à do app (Início, Radar, câmera no centro, Veredito, Você); some ao descer */
  .cTab { position: fixed; z-index: 60; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 10px); width: min(calc(100% - 28px), 460px); transform: translateX(-50%);
    display: flex; align-items: center; justify-content: space-around; padding: 8px 6px; border-radius: 32px; background: var(--glass); border: 1px solid var(--hair2);
    -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); box-shadow: var(--sombra2); transition: transform .26s cubic-bezier(.2,.8,.2,1); }
  .cTab.some { transform: translateX(-50%) translateY(150%); }
  .cTab a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 10px; border-radius: 22px; color: var(--faint); font: 600 10px var(--f); text-decoration: none; }
  .cTab a.on { color: var(--ink); background: rgba(127,127,127,.12); }
  .cTab a.cCam { width: 56px; height: 56px; padding: 0; justify-content: center; border-radius: 28px; background: var(--ink); color: var(--onink); }

  /* Início */
  .cMarca { display: flex; align-items: center; justify-content: space-between; }
  .cMarca .marca { display: flex; align-items: center; gap: 7px; font-family: var(--fd); font-weight: 900; font-size: 26px; letter-spacing: -.04em; color: var(--ink); text-decoration: none; }
  .cMarca .marca svg { width: 32px; height: 32px; }
  .cMarca .marca i { color: var(--market); font-style: normal; }
  .cRedondo { width: 42px; height: 42px; border-radius: 21px; background: var(--tile2); display: flex; align-items: center; justify-content: center; color: var(--ink); border: 0; }
  .cManchete .k { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; color: var(--market); }
  .cManchete .k button { border: 0; background: none; color: var(--faint); font: 600 12.5px var(--f); letter-spacing: 0; display: flex; align-items: center; gap: 4px; }
  .cManchete h1 { font-family: var(--fd); font-weight: 900; font-size: 33px; letter-spacing: -.045em; line-height: 1.07; margin: 10px 0 12px; }
  .cManchete h1 em { font-style: normal; color: var(--market); }
  .cNums { display: flex; gap: 26px; } .cNums b { display: block; font-family: var(--fd); font-weight: 900; font-size: 22px; } .cNums span { font-size: 12.5px; color: var(--soft); }
  .cRecolhida { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; border-radius: 99px; background: var(--tile); border: 1px solid var(--hair2); font: 700 13.5px var(--f); color: var(--ink); width: 100%; }
  .cRecolhida span { color: var(--soft); font-weight: 600; } .cRecolhida b { flex: 1; text-align: left; }
  .cPonto { width: 7px; height: 7px; border-radius: 4px; background: var(--market); flex-shrink: 0; }
  .cPulso { width: 8px; height: 8px; border-radius: 4px; background: var(--market); box-shadow: 0 0 0 0 rgba(60,224,160,.5); animation: cPul 1.6s infinite; }
  @keyframes cPul { to { box-shadow: 0 0 0 9px rgba(60,224,160,0); } }
  .cAtalhos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .cAtalho { min-height: 108px; padding: 13px; border-radius: 20px; background: var(--tile); border: 1px solid var(--hair); display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); }
  .cAtalho b { margin-top: auto; font-size: 14px; line-height: 1.2; } .cAtalho small { color: var(--soft); font-size: 11.5px; }
  .cLista { padding: 4px 16px 8px; }
  .cItem { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--hair); text-decoration: none; color: var(--ink); }
  .cItem:first-child { border-top: 0; }
  .cMini { width: 64px; height: 64px; border-radius: 16px; background: #fff; border: 1px solid var(--hair); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
  .cMini img { width: 88%; height: 88%; object-fit: contain; }
  .cItem h3 { font-size: 14.5px; font-weight: 600; line-height: 1.3; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .cItem .m { font-size: 12.5px; color: var(--faint); font-weight: 600; margin: 3px 0; }
  .cItem .pl { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .cItem .pr { font-family: var(--fd); font-weight: 800; font-size: 16.5px; }
  .cOp { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; min-width: 0; }
  .cOp span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* cartas Achados */
  .cDeck { position: relative; height: 440px; touch-action: pan-y; }
  .cCarta { position: absolute; inset: 0 0 10px; border-radius: 28px; background: var(--tile); border: 1px solid var(--hair); padding: 8px; display: flex; flex-direction: column; box-shadow: var(--sombra2); color: var(--ink); text-decoration: none; will-change: transform; }
  .cCarta.atras { transform: scale(.94) translateY(10px); opacity: .45; }
  .cCarta .f { height: 250px; border-radius: 21px; background: #fff; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
  .cCarta .f img { width: 86%; height: 86%; object-fit: contain; }
  .cCarta .d { position: absolute; top: 12px; left: 12px; background: var(--market); color: var(--oncor); border-radius: 99px; padding: 4px 10px; font-weight: 900; font-size: 13px; }
  .cCarta h3 { font-size: 16px; font-weight: 600; line-height: 1.3; margin: 12px 8px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .cCarta .pp { margin: auto 8px 0; display: flex; align-items: center; justify-content: space-between; }
  .cCarta .pp b { font-family: var(--fd); font-weight: 900; font-size: 28px; letter-spacing: -.04em; } .cCarta .pp b small { font-size: 14px; color: var(--soft); }
  .cCarta .pp s { color: var(--faint); font-size: 13px; margin-left: 8px; }
  .cCarta .rod { margin: 9px 8px 4px; padding-top: 9px; border-top: 1px solid var(--hair); }
  .cRot { position: absolute; top: 18px; right: 18px; border-radius: 99px; padding: 6px 12px; font-weight: 900; font-size: 14px; color: var(--oncor); opacity: 0; }
  .cDeckBt { display: flex; justify-content: center; align-items: center; gap: 16px; }
  .cDeckBt button { width: 56px; height: 56px; border-radius: 28px; border: 1px solid var(--hair2); background: var(--tile); color: var(--ink); display: flex; align-items: center; justify-content: center; }
  .cDeckBt button.v { width: 66px; height: 66px; border-radius: 33px; background: var(--ink); color: var(--onink); border: 0; }
  .cLogo { background: #fff; border-radius: 8px; padding: 3px 7px; display: inline-flex; border: 1px solid var(--hair); }
  .cLogo img { height: 16px; width: auto; max-width: 70px; object-fit: contain; }

  /* Buscar */
  .cTopoBusca { position: sticky; top: 0; z-index: 20; background: var(--bg); margin: calc(-1 * (env(safe-area-inset-top) + 14px)) -16px 0; padding: calc(env(safe-area-inset-top) + 14px) 16px 10px; display: flex; flex-direction: column; gap: 14px; transition: transform .25s; }
  .cTopoBusca.some { transform: translateY(-100%); }
  .cGrade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .cGrade .card { margin: 0; }
  .cOrdem { position: relative; } .cOrdem select { position: absolute; inset: 0; opacity: 0; font-size: 16px; }

  /* Produto */
  .cProdTopo { display: flex; justify-content: space-between; align-items: center; }
  .cProdCab { display: flex; gap: 14px; }
  .cProdFoto { width: 42%; aspect-ratio: 1; border-radius: 22px; background: #fff; border: 1px solid var(--hair); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; flex-shrink: 0; }
  .cProdFoto img { width: 86%; height: 86%; object-fit: contain; }
  .cProdFoto .d { position: absolute; top: 8px; left: 8px; background: var(--market); color: var(--oncor); border-radius: 99px; padding: 2px 8px; font-weight: 900; font-size: 11.5px; }
  .cProdDir { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 2px 0; min-width: 0; }
  .cProdDir h1 { font-family: var(--fd); font-weight: 900; font-size: 19px; letter-spacing: -.03em; line-height: 1.2; margin: 0; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
  .cProdDir small { color: var(--soft); font-size: 12.5px; }
  .cProdLogo img { height: 24px; max-width: 120px; object-fit: contain; }
  .cPreco { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
  .cPreco .v { font-family: var(--fd); font-weight: 900; font-size: 40px; letter-spacing: -.045em; } .cPreco .v small { font-size: 18px; color: var(--soft); }
  .cPreco .v s { font: 500 15px var(--f); color: var(--faint); margin-left: 8px; }
  .cOpiniao { display: flex; align-items: center; gap: 12px; border-radius: 18px; padding: 12px; }
  .cOpiniao i { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--oncor); }
  .cOpiniao small { display: block; font-size: 12px; color: var(--soft); font-weight: 600; } .cOpiniao b { font-family: var(--fd); font-weight: 900; font-size: 21px; letter-spacing: -.03em; }
  .cIr { display: flex; gap: 10px; } .cIr .cBtn { flex: 1; }
  .cOlho { width: 54px; height: 54px; border-radius: 27px; border: 1px solid var(--hair2); background: transparent; color: var(--ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .cOlho.on { background: var(--marketDim); border-color: var(--market); color: var(--market); }
  .cDica { text-align: center; font-size: 12.5px; color: var(--faint); margin-top: -6px; }
  .cHist { border-top: 1px solid var(--hair); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
  .cHistN { display: flex; justify-content: space-between; } .cHistN span { display: block; font-size: 11.5px; color: var(--soft); } .cHistN b { font-family: var(--fd); font-size: 14.5px; }
  .cPilula { position: fixed; z-index: 55; right: 18px; bottom: calc(env(safe-area-inset-bottom) + 18px); height: 46px; padding: 0 18px; border-radius: 99px; background: var(--ink); color: var(--onink); font: 800 14.5px var(--f); display: flex; align-items: center; gap: 6px; text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,.35); transform: translateY(30px) scale(.9); opacity: 0; pointer-events: none; transition: all .22s; }
  .cPilula.ver { transform: none; opacity: 1; pointer-events: auto; }

  /* Veredito */
  .cAnel { display: flex; justify-content: center; position: relative; }
  .cAnel div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
  .cAnel b { font-family: var(--fd); font-weight: 900; font-size: 30px; letter-spacing: -.04em; line-height: 1.05; max-width: 170px; }

  /* Radar */
  .cRadar { height: 360px; border-radius: 30px; background: var(--tile2); position: relative; overflow: hidden; }
  .cRadar .varre { position: absolute; left: 50%; top: 50%; width: 310px; height: 310px; margin: -155px; animation: cGira 5s linear infinite; }
  @keyframes cGira { to { transform: rotate(360deg); } }
  .cPin { position: absolute; transform: translate(-50%, -50%); background: var(--tile); border: 1px solid var(--hair2); border-radius: 99px; padding: 4px 9px; font: 800 12px var(--f); color: var(--ink); white-space: nowrap; }
  .cPin.melhor { background: var(--fuel); color: #1A1000; border: 0; font-size: 15px; padding: 6px 12px; box-shadow: 0 0 16px var(--fuel); z-index: 2; }
  .cAcoes { display: flex; border-top: 1px solid var(--hair); padding-top: 14px; }
  .cAcoes button, .cAcoes a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; color: var(--ink); font: 700 12px var(--f); text-decoration: none; }
  .cAcoes i { width: 48px; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center; }

  /* Você */
  .cLinhaM { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border-top: 1px solid var(--hair); color: var(--ink); text-decoration: none; background: none; border-left: 0; border-right: 0; border-bottom: 0; width: 100%; font: inherit; text-align: left; }
  .cLinhaM:first-child { border-top: 0; }
  .cLinhaM i { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
  .cLinhaM b { display: block; font-size: 15.5px; } .cLinhaM small { display: block; color: var(--soft); font-size: 12.5px; } .cLinhaM .t { flex: 1; }
  .cLinhaM em { font-style: normal; color: var(--faint); font-size: 14px; }

  /* Câmera */
  .cSeg { display: flex; background: var(--tile2); border-radius: 16px; padding: 4px; gap: 2px; }
  .cSeg button { flex: 1; padding: 9px 0; border-radius: 12px; border: 0; background: transparent; color: var(--soft); font: 700 12px var(--f); display: flex; flex-direction: column; align-items: center; gap: 3px; }
  .cSeg button.on { background: var(--tile); color: var(--ink); }
  .cVisor { height: 360px; border-radius: 28px; background: #000; position: relative; overflow: hidden; }
  .cVisor video { width: 100%; height: 100%; object-fit: cover; }
  .cVisor .q { position: absolute; left: 17%; right: 17%; top: 26%; height: 36%; border: 2.5px solid var(--market); border-radius: 18px; }
  .cVisor .dz { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.6); color: #fff; border-radius: 99px; padding: 8px 14px; font: 700 13px var(--f); white-space: nowrap; }
  .cPassos { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
  .cPassos div { display: flex; gap: 10px; color: var(--soft); font-size: 14px; line-height: 1.4; }
  .cPassos div span { width: 22px; height: 22px; border-radius: 11px; background: var(--marketDim); color: var(--market); font-weight: 900; font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
}
@media (max-width: 760px) {
  /* logo da loja no escuro: pílula branca justa, igual ao app */
  [data-tema="escuro"] .cProdLogo { align-self: flex-start; background: #fff; border-radius: 8px; padding: 4px 8px; }
}