/* ===========================================================================
   Mockup da Rodada 1 - a porta (02/set/2026)
   Moldura de apresentacao + tokens. A estetica vem do mockup aprovado em
   31/ago (mockups/home-balcao-31ago.html): a MOLDURA responde ao tema de quem
   olha, o PRODUTO (a home nova, o app, a faixa) usa sempre as cores reais da
   casa - senao o Rafael julgaria uma tela que nao existe.
   Tokens: brand/tokens.css.
   =========================================================================== */

:root{
  /* casa (fixos, brand/tokens.css) */
  --brand:#0FB5A6;
  --brand-strong:#0C9488;
  --brand-txt:#09756D;      /* teal como TEXTO sobre claro (contraste AA) */
  --ink:#0C1D1B;
  --ink-soft:#35504B;
  --muted:#587570;
  --saffron:#FFB84D;
  --saffron-txt:#A8700E;
  --saffron-soft:#FCF3DF;
  --paper:#F2F7F5;
  --surface:#FFFFFF;
  --line:#DCE7E2;
  --lemon:#F2E56B;
  --whats:#25A25A;
  --creme2:#FBF9F2;
  --display:'Space Grotesk',Inter,system-ui,sans-serif;
  --sans:Inter,system-ui,-apple-system,sans-serif;

  /* moldura da pagina (responde ao tema) */
  --pg-fundo:#EAF0EE;
  --pg-tinta:#0C1D1B;
  --pg-suave:#587570;
  --pg-cartao:#FFFFFF;
  --pg-borda:#D7E3DF;
  --pg-barra:#0C1D1B;
  --pg-barra-tx:#EDF3F1;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --pg-fundo:#0B1514; --pg-tinta:#E8F0ED; --pg-suave:#93AAA5;
    --pg-cartao:#12201E; --pg-borda:#223532;
    --pg-barra:#06100F; --pg-barra-tx:#E8F0ED;
  }
}
:root[data-theme="dark"]{
  --pg-fundo:#0B1514; --pg-tinta:#E8F0ED; --pg-suave:#93AAA5;
  --pg-cartao:#12201E; --pg-borda:#223532;
  --pg-barra:#06100F; --pg-barra-tx:#E8F0ED;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--pg-fundo);color:var(--pg-tinta);
  font-family:var(--sans);line-height:1.5;
}
img{max-width:100%;display:block}

/* ---------- barra de navegacao do MOCKUP (nao e o site) ---------- */
/* uma linha só, com rolagem lateral se não couber: a barra do mockup não pode
   comer a primeira dobra da home que ela está apresentando */
.mk-bar{
  display:flex;align-items:center;gap:4px;flex-wrap:nowrap;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  background:var(--pg-barra);color:var(--pg-barra-tx);
  padding:6px 10px;font-size:11px;line-height:1;
}
.mk-bar::-webkit-scrollbar{display:none}
.mk-bar .mk-sel{
  font-family:var(--display);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  font-size:9.5px;opacity:.62;margin-right:6px;white-space:nowrap;
}
.mk-bar a{
  color:var(--pg-barra-tx);text-decoration:none;font-weight:600;
  padding:6px 9px;border-radius:99px;border:1px solid rgba(255,255,255,.16);
  white-space:nowrap;
}
.mk-bar a[aria-current="page"]{background:var(--brand);color:#04201D;border-color:var(--brand)}
.mk-bar a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* botao de controle do mockup DENTRO da barra (a barra ja existe, entao ele
   custa 0 px de dobra - e a dobra e justamente o que esta sendo medido) */
.mk-bar button{
  font:inherit;font-size:11px;font-weight:600;cursor:pointer;
  color:var(--pg-barra-tx);background:transparent;
  padding:6px 9px;border-radius:99px;border:1px dashed rgba(255,255,255,.34);
  white-space:nowrap;margin-left:auto;
}
.mk-bar button[aria-pressed="true"]{background:var(--saffron);color:#2A2109;border-color:var(--saffron);border-style:solid}
.mk-bar button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---------- leitura (cartoes de decisao ao lado do produto) ---------- */
.mk-wrap{max-width:1180px;margin:0 auto;padding:22px 18px 60px}
.mk-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--brand-txt);margin:0 0 8px}
.mk-h1{font-family:var(--display);font-size:clamp(22px,4.6vw,31px);font-weight:700;letter-spacing:-.02em;margin:0 0 10px;text-wrap:balance}
.mk-sub{margin:0;max-width:66ch;color:var(--pg-suave);font-size:14.5px}
.mk-cartao{background:var(--pg-cartao);border:1px solid var(--pg-borda);border-radius:14px;padding:17px 18px 15px}
.mk-cartao h2{font-family:var(--display);font-size:16.5px;font-weight:700;margin:0 0 8px;letter-spacing:-.01em}
.mk-cartao h3{font-family:var(--display);font-size:13.5px;font-weight:700;margin:14px 0 6px;letter-spacing:-.01em}
.mk-cartao p{margin:0 0 10px;font-size:13.8px;color:var(--pg-suave)}
.mk-cartao p:last-child{margin-bottom:0}
.mk-cartao b{color:var(--pg-tinta);font-weight:600}
.mk-cartao ul{margin:0 0 10px;padding-left:18px;font-size:13.8px;color:var(--pg-suave)}
.mk-cartao li{margin-bottom:5px}
.mk-cartao li b{color:var(--pg-tinta)}
.mk-cartao a{color:var(--brand-txt);font-weight:600}
.mk-col{display:flex;flex-direction:column;gap:14px}
.mk-nota{max-width:420px;margin:10px auto 0;text-align:center;font-size:11.5px;color:var(--pg-suave)}

/* botoes de estado do mockup */
.mk-estados{display:flex;flex-wrap:wrap;gap:7px}
.mk-est{
  background:var(--pg-cartao);border:1px solid var(--pg-borda);color:var(--pg-suave);
  border-radius:999px;padding:8px 13px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
}
/* selecionado = TEAL, nao tinta: no tema escuro a tinta (#0C1D1B) e mais escura
   que o cartao (#12201E) e mais escura que o fundo (#0B1514) - o estado "atual"
   virava um buraco na barra, mais apagado que os nao-selecionados. */
.mk-est[aria-current="true"]{background:var(--brand);border-color:var(--brand);color:#04201D}
.mk-est:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---------- o aparelho (moldura fisica) ---------- */
.dev{
  width:100%;max-width:390px;margin:0 auto;position:relative;
  border-radius:30px;border:1px solid var(--pg-borda);background:var(--paper);
  box-shadow:0 18px 44px rgba(12,29,27,.18);overflow:hidden;
  color:var(--ink);
}
.dev-status{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 20px 3px;font-family:var(--display);font-weight:600;font-size:12px;color:var(--ink);
}
.dev-status .ic{display:flex;gap:4px;opacity:.62}
/* Num celular estreito o aparelho sai do padding da moldura e fica com a
   LARGURA DA JANELA. Sem isto, a 375 px de janela o "aparelho de 375 px" media
   339 (o padding de 18 px de cada lado do .mk-wrap) - e toda medida de dobra e
   de chip saia de uma tela mais estreita do que a que se diz estar medindo. */
@media (max-width:430px){
  .dev{margin-left:-18px;margin-right:-18px;width:auto;max-width:none}
}