/* ============================================================
   sistemo — sistema visual
   ------------------------------------------------------------
   Motivo condutor: o símbolo da marca é uma agenda. Três cápsulas
   de larguras diferentes, deslocadas, são horários de um dia.
   Esse formato reaparece no hero, nos divisores e nos cartões.

   Display: Space Grotesk 700 (nome, títulos, números)
   Corpo:   Inter 400/500
   Miúdo:   Space Grotesk 500 em caixa alta, tracking largo
   ============================================================ */

:root{
  /* superfícies */
  --tinta:#0D1211;
  --tinta-2:#17201D;
  --tinta-3:#242E2A;
  --papel:#F6F8F7;
  --branco:#FFFFFF;

  /* marca */
  --acento:#1D9E75;
  --acento-escuro:#0F6E56;
  --acento-claro:#5DCAA5;
  --acento-palido:#C9EDDF;
  --acento-vidro:rgba(29,158,117,.10);

  /* texto e traços */
  --fumaca:#5F6B66;
  --fumaca-clara:#8B948F;
  --linha:#E3E8E5;
  --linha-escura:#2A3531;

  /* estados */
  --alerta:#A83232;
  --alerta-fundo:#FBEDEC;
  --ambar:#B0761A;
  --ambar-fundo:#FBF2E2;

  --r-p:8px; --r-m:12px; --r-g:18px;
  --sombra-1:0 1px 2px rgba(13,18,17,.05);
  --sombra-2:0 1px 3px rgba(13,18,17,.06), 0 10px 28px -12px rgba(13,18,17,.16);
  --sombra-3:0 2px 6px rgba(13,18,17,.07), 0 22px 48px -18px rgba(13,18,17,.24);
  --transicao:180ms cubic-bezier(.2,.6,.3,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* a faixa de borda a borda usa 100vw, que inclui a barra de rolagem vertical.
   sem isto sobra uns pixels e aparece rolagem horizontal. */
html,body{overflow-x:clip; max-width:100%}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  min-height:100vh; display:flex; flex-direction:column;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15px; line-height:1.6; letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration:none}
p{margin:0 0 14px}

h1,h2,h3,h4{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:700;
  letter-spacing:-.035em; line-height:1.14; margin:0;
}
h1{font-size:32px} h2{font-size:25px} h3{font-size:17px; letter-spacing:-.02em}

/* miúdo: rótulos, eyebrows, cabeçalho de tabela */
.miudo{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:500;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fumaca-clara);
}

/* ---------------------------------------------------------- topo */
.topo{background:var(--tinta); color:var(--papel)}
.topo-in{max-width:1120px; margin:0 auto; padding:14px 22px; display:flex; align-items:center; gap:22px}
.marca{display:flex; align-items:center; gap:10px}
.marca .nome{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:700;
  font-size:21px; letter-spacing:-.045em;
}
.marca .modulo{
  font-size:13px; color:var(--fumaca-clara);
  padding-left:11px; margin-left:2px; border-left:1px solid var(--linha-escura);
}
.menu{display:flex; align-items:center; gap:6px; margin-left:auto; flex-wrap:wrap}
.menu a{
  color:#A9B2AE; font-size:14px; padding:7px 12px; border-radius:var(--r-p);
  transition:color var(--transicao), background var(--transicao);
}
.menu a:hover{color:var(--branco); background:rgba(255,255,255,.06)}
.menu a.on{color:var(--branco); background:rgba(255,255,255,.09)}
.menu a.botao{color:var(--branco)}
.regua{height:3px; background:linear-gradient(90deg,var(--acento-escuro),var(--acento) 45%,var(--acento-claro))}

.conteudo{max-width:1120px; width:100%; margin:0 auto; padding:30px 22px 56px; flex:1}

/* faixa que rompe o container e vai de borda a borda */
.faixa-escura{
  background:var(--tinta); color:var(--papel);
  margin:-30px calc(50% - 50vw) 0;
  padding:0 max(22px, calc(50vw - 538px));
  position:relative; overflow:hidden;
}
.faixa-escura::after{
  content:''; position:absolute; inset:auto 0 0 0; height:3px;
  background:linear-gradient(90deg,var(--acento-escuro),var(--acento) 45%,var(--acento-claro));
}

/* ---------------------------------------------------------- hero */
.hero{
  display:grid; gap:34px; align-items:center;
  padding:62px 0 66px;
}
@media(min-width:900px){ .hero{grid-template-columns:1.05fr .95fr; gap:52px; padding:74px 0 78px} }

.hero .miudo{color:var(--acento-claro); margin-bottom:16px; display:block}
.hero h1{
  font-size:clamp(31px, 6.2vw, 50px); line-height:1.06; letter-spacing:-.042em;
  margin:0 0 18px; color:var(--branco);
}
.hero h1 em{font-style:normal; color:var(--acento-claro)}
.hero-sub{
  font-size:17px; line-height:1.6; color:#B4BDB9; max-width:46ch; margin:0 0 28px;
}
.hero-acoes{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px}
.hero-nota{
  font-size:13px; color:var(--fumaca-clara); margin:0;
  display:flex; gap:14px; flex-wrap:wrap;
}
.hero-nota span{display:flex; align-items:center; gap:7px}
.hero-nota span::before{
  content:''; width:5px; height:5px; border-radius:99px; background:var(--acento-claro);
}

/* --- assinatura: o dia em cápsulas --- */
.motivo{
  background:var(--tinta-2); border:1px solid var(--linha-escura);
  border-radius:var(--r-g); padding:22px 20px 18px; box-shadow:var(--sombra-3);
}
.motivo-topo{display:flex; align-items:baseline; gap:10px; margin-bottom:16px}
.motivo-topo strong{
  font-family:'Space Grotesk','Inter',sans-serif; font-size:15px;
  font-weight:700; letter-spacing:-.02em; color:var(--branco);
}
.motivo-topo span{font-size:12px; color:var(--fumaca-clara); margin-left:auto}
.faixa-hora{display:flex; align-items:center; gap:12px; padding:7px 0}
.faixa-hora .hora{
  font-family:'Space Grotesk','Inter',sans-serif; font-size:11px; font-weight:500;
  letter-spacing:.06em; color:#78827D; width:38px; flex:none;
}
.faixa-hora .barra{
  height:26px; border-radius:99px; display:flex; align-items:center; padding:0 13px;
  font-size:12.5px; color:#04241B; white-space:nowrap; overflow:hidden;
  animation:entra 520ms cubic-bezier(.2,.7,.3,1) backwards;
}
.faixa-hora .barra.vaga{
  background:transparent; border:1px dashed #3A453F; color:#78827D;
}
.faixa-hora:nth-child(2) .barra{animation-delay:60ms}
.faixa-hora:nth-child(3) .barra{animation-delay:130ms}
.faixa-hora:nth-child(4) .barra{animation-delay:200ms}
.faixa-hora:nth-child(5) .barra{animation-delay:270ms}
.faixa-hora:nth-child(6) .barra{animation-delay:340ms}
@keyframes entra{from{opacity:0; transform:translateX(-14px)} to{opacity:1; transform:none}}
.motivo-rodape{
  margin-top:14px; padding-top:14px; border-top:1px solid var(--linha-escura);
  display:flex; align-items:baseline; gap:8px;
}
.motivo-rodape .valor{
  font-family:'Space Grotesk','Inter',sans-serif; font-size:22px; font-weight:700;
  letter-spacing:-.03em; color:var(--acento-claro);
}
.motivo-rodape .rot{font-size:12px; color:var(--fumaca-clara)}

/* ---------------------------------------------------------- seções */
.secao{padding:54px 0}
.secao + .secao{border-top:1px solid var(--linha)}
.secao-cabeca{margin-bottom:28px; max-width:56ch}
.secao-cabeca .miudo{display:block; margin-bottom:12px}
.secao-cabeca p{color:var(--fumaca); margin:10px 0 0; font-size:16px}

/* divisor com o motivo da marca */
.divisor{display:flex; gap:5px; align-items:center; margin:0 0 26px}
.divisor i{height:5px; border-radius:99px; display:block}
.divisor i:nth-child(1){width:26px; background:var(--acento-escuro)}
.divisor i:nth-child(2){width:42px; background:var(--acento)}
.divisor i:nth-child(3){width:32px; background:var(--acento-claro)}

/* ---------------------------------------------------------- cartões */
.grade{display:grid; gap:18px}
@media(min-width:780px){
  .grade-2{grid-template-columns:1fr 1fr}
  .grade-3{grid-template-columns:repeat(3,1fr)}
}
.cartao{
  background:var(--branco); border:1px solid var(--linha);
  border-radius:var(--r-g); box-shadow:var(--sombra-1);
}
.cartao-pad{padding:22px}

/* ---- cartão de app ----------------------------------------------------
   Estrutura fixa: cabeçalho (símbolo + estado), nome, descrição, e um
   rodapé com filete, preço e botão. Renderizado por cartaoApp() no PHP. */
.app-card{
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  padding:22px 22px 22px; border-radius:16px;
  transition:transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}
.app-card::before{
  content:''; position:absolute; top:-1px; left:-1px; right:-1px; height:4px;
  background:var(--cor-app,var(--acento));
}
.app-card:hover{transform:translateY(-3px); box-shadow:var(--sombra-2); border-color:#D3DAD7}

.app-topo{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px}
.app-card h3{font-size:18px; letter-spacing:-.025em; margin:0}
.app-desc{
  font-size:14.5px; color:var(--fumaca); line-height:1.55;
  margin:8px 0 0; min-height:45px;
}

.app-rodape{margin-top:auto; padding-top:18px}
.app-rodape form{margin:0}
.app-linha{height:1px; background:var(--linha); margin:0 0 16px}

.app-preco{
  font-family:'Space Grotesk','Inter',sans-serif; font-size:26px; font-weight:700;
  letter-spacing:-.035em; line-height:1; margin:0 0 14px; color:var(--tinta);
}
.app-preco span{font-size:13px; font-weight:400; color:var(--fumaca); letter-spacing:-.005em; margin-left:3px}

.app-indisponivel{
  font-size:14px; color:var(--fumaca-clara); margin:0 0 14px; line-height:26px;
}

.app-card .botao{width:100%; text-align:center; justify-content:center}
.app-nota{margin:10px 0 0; font-size:13px; color:var(--fumaca); text-align:center}

/* cartão de app ainda não lançado: mais quieto, mas do mesmo tamanho */
.app-breve{background:#FBFCFC}
.app-breve::before{background:var(--cor-app); opacity:.28}
.app-breve h3{color:var(--fumaca)}
.app-breve:hover{transform:none; box-shadow:var(--sombra-1); border-color:var(--linha)}

/* passos: numeração porque a ordem importa de verdade */
.passo-n{
  font-family:'Space Grotesk','Inter',sans-serif; font-size:12px; font-weight:700;
  letter-spacing:.1em; color:var(--acento-escuro); background:var(--acento-palido);
  width:30px; height:30px; border-radius:99px;
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}

.chamada{
  text-align:center; padding:52px 26px; border-radius:var(--r-g);
  background:var(--tinta); color:var(--branco); margin-top:12px; position:relative; overflow:hidden;
}
.chamada::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(560px 220px at 50% -10%, var(--acento-vidro), transparent 70%);
}
.chamada > *{position:relative}
.chamada h2{color:var(--branco); margin-bottom:10px}
.chamada p{color:#B4BDB9; margin:0 auto 22px; max-width:48ch}

/* ---------------------------------------------------------- painel */
.cabeca{display:flex; align-items:center; gap:14px; margin-bottom:22px; flex-wrap:wrap}
.cabeca .sub{color:var(--fumaca); font-size:14px}

.numero{
  font-family:'Space Grotesk','Inter',sans-serif; font-size:31px; font-weight:700;
  letter-spacing:-.035em; line-height:1.15; font-variant-numeric:tabular-nums;
}
.rotulo{font-size:12.5px; color:var(--fumaca); margin-bottom:6px}

/* ---------------------------------------------------------- tabela */
table{width:100%; border-collapse:collapse; background:var(--branco)}
thead th{
  font-family:'Space Grotesk','Inter',sans-serif; font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fumaca-clara);
  text-align:left; padding:13px 18px; border-bottom:1px solid var(--linha); white-space:nowrap;
}
td{padding:14px 18px; border-bottom:1px solid var(--linha); vertical-align:middle}
tbody tr{transition:background var(--transicao)}
tbody tr:hover{background:#FAFCFB}
tr:last-child td{border-bottom:0}
.cartao > table:first-child thead th:first-child{border-top-left-radius:var(--r-g)}
.vazio{padding:52px 22px; text-align:center; color:var(--fumaca)}
.vazio .botao{margin-top:16px}

/* ---------------------------------------------------------- formulário */
label{display:block; font-size:13px; font-weight:500; color:var(--tinta); margin:0 0 6px}
input,select,textarea{
  width:100%; padding:11px 13px; font:inherit; color:var(--tinta);
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--r-p);
  transition:border-color var(--transicao), box-shadow var(--transicao);
}
input::placeholder{color:var(--fumaca-clara)}
input:hover,select:hover,textarea:hover{border-color:#CBD3CF}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--acento); box-shadow:0 0 0 3px var(--acento-vidro);
}
.campo{margin-bottom:16px}
.linha-campos{display:grid; gap:16px}
@media(min-width:620px){ .linha-campos{grid-template-columns:1fr 1fr} }

/* ---------------------------------------------------------- botões */
.botao{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border:1px solid transparent; border-radius:var(--r-p);
  font:inherit; font-weight:500; cursor:pointer; white-space:nowrap;
  background:var(--tinta); color:var(--papel);
  box-shadow:var(--sombra-1);
  transition:transform var(--transicao), box-shadow var(--transicao), background var(--transicao);
}
.botao:hover{background:var(--tinta-3); transform:translateY(-1px); box-shadow:var(--sombra-2)}
.botao:active{transform:none; box-shadow:var(--sombra-1)}
.botao:focus-visible{outline:2px solid var(--acento); outline-offset:2px}

.botao-acento{background:var(--acento); color:var(--branco)}
.botao-acento:hover{background:var(--acento-escuro); color:var(--branco)}
.menu a.botao-acento{color:var(--branco)}

.botao-fino{
  background:var(--branco); color:var(--tinta); border-color:var(--linha);
  padding:8px 15px; font-size:13.5px; box-shadow:none;
}
.botao-fino:hover{background:var(--papel); border-color:#C2CBC7; transform:none; box-shadow:var(--sombra-1)}
.botao[disabled], .botao.inativo{opacity:.5; pointer-events:none}
.botao-fantasma{
  background:transparent; color:var(--fumaca-clara); border:1px dashed var(--linha);
  box-shadow:none; cursor:default;
}
.botao-fantasma:hover{background:transparent; color:var(--fumaca); transform:none; box-shadow:none}
td .botao-fino + .botao-fino{margin-left:6px}

/* ---------------------------------------------------------- etiquetas */
.tag{
  display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:99px;
  font-size:12px; font-weight:500; line-height:1.5;
}
.tag::before{content:''; width:6px; height:6px; border-radius:99px; background:currentColor; opacity:.65}
.tag-agendado{background:#EEF1EF; color:var(--fumaca)}
.tag-atendido{background:var(--acento-palido); color:#07543F}
.tag-faltou{background:var(--alerta-fundo); color:var(--alerta)}
.tag-cancelado{background:#EEF1EF; color:var(--fumaca-clara)}

/* ---------------------------------------------------------- avisos */
.aviso{
  padding:13px 17px; border-radius:var(--r-m); margin-bottom:22px;
  border:1px solid; font-size:14.5px;
}
.aviso-ok{background:var(--acento-palido); border-color:#A5DFC8; color:#07543F}
.aviso-erro{background:var(--alerta-fundo); border-color:#EFC9C6; color:var(--alerta)}
.faixa-teste{
  background:var(--acento-palido); border-bottom:1px solid #A5DFC8;
  padding:11px 22px; font-size:14px; text-align:center; color:#07543F;
}
.faixa-teste a{font-weight:500; text-decoration:underline; text-underline-offset:3px}

/* ---------------------------------------------------------- entrada */
.portao{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:26px;
  background:
    radial-gradient(760px 360px at 50% -6%, var(--acento-vidro), transparent 72%),
    var(--papel);
}
.portao-caixa{width:100%; max-width:404px}
.portao-marca{display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:24px}
.portao-marca .nome{
  font-family:'Space Grotesk','Inter',sans-serif; font-size:33px; font-weight:700;
  letter-spacing:-.05em; line-height:1;
}
.portao-marca .tag-linha{color:var(--fumaca); font-size:14.5px}
.portao .cartao{box-shadow:var(--sombra-2)}
.rodape-portao{text-align:center; margin-top:18px; font-size:14px; color:var(--fumaca)}
.rodape-portao a{color:var(--acento-escuro); font-weight:500}

/* ---------------------------------------------------------- rodapé */
/* o rodapé fecha a página em qualquer tela: a coluna do body empurra ele
   para baixo mesmo quando o conteúdo é curto */
.rodape{border-top:1px solid var(--linha); background:var(--branco); margin-top:56px}
.rodape-in{
  max-width:1120px; margin:0 auto; padding:28px 22px;
  display:flex; gap:22px 32px; flex-wrap:wrap; align-items:center;
}
.rodape-marca{display:flex; align-items:center; gap:11px}
.rodape-marca > div{display:flex; flex-direction:column; line-height:1.3}
.rodape-nome{
  font-family:'Space Grotesk','Inter',sans-serif; font-weight:700;
  font-size:16px; letter-spacing:-.04em;
}
.rodape-tag{font-size:12.5px; color:var(--fumaca)}
.rodape-links{display:flex; gap:20px; margin-left:auto; flex-wrap:wrap}
.rodape-links a{font-size:14px; color:var(--fumaca)}
.rodape-links a:hover{color:var(--tinta)}
.rodape-copy{font-size:12.5px; color:var(--fumaca-clara)}
@media(max-width:620px){
  .rodape-in{gap:16px}
  .rodape-links{margin-left:0; width:100%}
}

@media(max-width:620px){
  .topo-in{padding:12px 16px; gap:12px}
  .marca .modulo{display:none}
  .menu{gap:2px}
  .menu a{padding:6px 9px; font-size:13.5px}
  .conteudo{padding:22px 16px 48px}
  .faixa-escura{margin:-22px calc(50% - 50vw) 0; padding:0 16px}
  .hero{padding:44px 0 48px}
  .secao{padding:40px 0}
  h1{font-size:27px} h2{font-size:22px}
  td, thead th{padding:12px 14px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .app-card:hover, .botao:hover{transform:none}
}

/* ---------------------------------------------------------- métricas do painel */
.metrica{
  padding:21px 22px 22px; position:relative; overflow:hidden; border-radius:14px;
  transition:box-shadow var(--transicao), transform var(--transicao);
}
.metrica::before{
  content:''; position:absolute; top:-1px; left:-1px; right:-1px; height:3px;
  background:var(--acento-claro);
}
.metrica:hover{box-shadow:var(--sombra-2); transform:translateY(-2px)}
.metrica-forte{background:var(--tinta); color:var(--branco); border-color:var(--tinta)}
.metrica-forte .rotulo{color:#8B948F}
.metrica-forte .numero{color:var(--acento-claro)}
.metrica-forte::before{background:var(--acento)}

/* caixa que envolve tabela: corta os cantos da primeira e da última linha */
.tabela-caixa{overflow:hidden}
.tabela-caixa table{border-radius:inherit}

/* botão miúdo das linhas de tabela */
.botao-mini{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 12px; font-size:13px; font-weight:500; line-height:1.4;
  border:1px solid var(--linha); border-radius:99px; background:var(--branco);
  color:var(--tinta); cursor:pointer; font-family:inherit;
  transition:border-color var(--transicao), background var(--transicao), color var(--transicao);
}
.botao-mini:hover{border-color:var(--acento); color:var(--acento-escuro); background:var(--acento-palido)}
.botao-mini:focus-visible{outline:2px solid var(--acento); outline-offset:2px}
.botao-mini + .botao-mini{margin-left:6px}

/* preço dos apps que ainda não abriram */


/* a cabeça do painel empilha melhor no celular */
.cabeca > div:first-child{min-width:0}
@media(max-width:620px){
  .cabeca{gap:10px}
  .cabeca .botao{margin-left:0 !important; width:100%}
}

/* ---------------------------------------------------------- barras de categoria
   Usadas no resumo do controle de gastos: o comprimento compara as
   categorias entre si, sem precisar de biblioteca de gráfico. */
.barra-cat{margin-bottom:14px}
.barra-cat:last-child{margin-bottom:0}
.barra-cat-topo{display:flex; justify-content:space-between; gap:12px; font-size:14px; margin-bottom:6px}
.barra-cat-topo span{color:var(--fumaca)}
.barra-cat-topo strong{font-family:'Space Grotesk','Inter',sans-serif; letter-spacing:-.02em; white-space:nowrap}
.barra-cat-trilho{height:8px; background:var(--papel); border-radius:99px; overflow:hidden}
.barra-cat-fill{height:100%; border-radius:99px; min-width:3px}

/* ---------------------------------------------------------- resumo da conta
   Cartão do topo de "Meus apps": quem está logado e o que a conta tem hoje. */
.painel-conta{padding:24px; border-radius:16px}
.painel-conta-topo{
  display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap;
  padding-bottom:20px; border-bottom:1px solid var(--linha);
}
.painel-conta-topo h1{font-size:26px; margin:8px 0 5px}
.painel-conta-topo .botao{margin-left:auto}
.painel-conta-usuario{margin:0; color:var(--fumaca); font-size:14.5px}

.painel-conta-numeros{display:grid; gap:20px; padding-top:20px}
@media(min-width:720px){ .painel-conta-numeros{grid-template-columns:repeat(3,1fr); gap:28px} }
.painel-conta-numeros > div{display:flex; flex-direction:column; gap:3px}
.painel-conta-numeros .numero{font-size:26px}
.painel-conta-nota{font-size:13px; color:var(--fumaca)}
@media(max-width:719px){
  .painel-conta-numeros > div + div{padding-top:18px; border-top:1px solid var(--linha)}
  .painel-conta-topo .botao{margin-left:0; width:100%; margin-top:6px}
}

/* ---------------------------------------------------------- escolha do pagamento
   Dois cartões clicáveis na página pública de agendamento. */
.escolha-pagamento{display:grid; gap:10px}
@media(min-width:560px){ .escolha-pagamento{grid-template-columns:1fr 1fr} }
.escolha-pagamento label{
  display:flex; align-items:flex-start; gap:10px; margin:0; cursor:pointer;
  border:1px solid var(--linha); border-radius:var(--r-m); padding:13px 14px;
  transition:border-color var(--transicao), background var(--transicao);
}
.escolha-pagamento label:hover{border-color:#C2CBC7}
.escolha-pagamento input{width:auto; margin-top:3px; flex:none}
.escolha-pagamento input:checked + span strong{color:var(--acento-escuro)}
.escolha-pagamento label:has(input:checked){border-color:var(--acento); background:var(--acento-palido)}
.escolha-pagamento span{display:flex; flex-direction:column; gap:2px}
.escolha-pagamento strong{font-size:14.5px; font-weight:500; color:var(--tinta)}
.escolha-pagamento small{font-size:12.5px; color:var(--fumaca); line-height:1.4}

/* ============================================================
   Celular: menu recolhido e tabelas que rolam
   ============================================================ */

.menu-botao{display:none}

@media(max-width:900px){
  .topo-in{flex-wrap:wrap; gap:12px; padding:12px 16px}
  .marca{flex:1; min-width:0}
  .marca .modulo{display:none}

  .menu-botao{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:42px; height:38px; padding:0 9px; margin-left:auto; flex:none;
    background:rgba(255,255,255,.08); border:0; border-radius:var(--r-p); cursor:pointer;
  }
  .menu-botao span{
    display:block; height:2px; background:var(--papel); border-radius:2px;
    transition:transform var(--transicao), opacity var(--transicao);
  }
  .menu-botao.aberto span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-botao.aberto span:nth-child(2){opacity:0}
  .menu-botao.aberto span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .menu{
    display:none; order:3; width:100%; flex-direction:column;
    align-items:stretch; text-align:left;
    gap:0; margin-left:0; padding-top:6px;
  }
  .menu.aberto{display:flex}
  .menu a{
    padding:13px 4px; font-size:15px; border-radius:0;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .menu a:last-child{border-bottom:0}
  .menu a.on{background:transparent; color:var(--acento-claro)}
  .menu a.botao{margin-top:10px; border-radius:var(--r-p); justify-content:center}
}

/* tabelas largas rolam dentro do cartão em vez de estourar a tela */
@media(max-width:820px){
  .tabela-caixa, .cartao{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .tabela-caixa table, .cartao > table{min-width:680px}
  td, thead th{padding:11px 12px}
  td:first-child{white-space:nowrap}

  .cabeca{gap:10px}
  .cabeca > form{width:100%}
  .cabeca > form input, .cabeca > form select{width:100%}
  .cabeca .botao{width:100%; margin-left:0 !important}
  .cabeca h1{width:100%}

  .linha-campos{grid-template-columns:1fr}
  .conteudo{padding:20px 16px 44px}
}

/* o cartão que só tem tabela não precisa de rolagem dupla */
@media(max-width:820px){
  .cartao-pad{overflow-x:visible}
}


/* ---------------------------------------------------------- sinal de rolagem
   Sombra nas bordas quando ainda há tabela para o lado, e barra de rolagem
   sempre visível no celular. Sem isso ninguém descobre que dá para arrastar. */
.tabela-caixa{
  background:
    linear-gradient(90deg, var(--branco) 30%, rgba(255,255,255,0)) left  / 36px 100% no-repeat local,
    linear-gradient(90deg, rgba(255,255,255,0), var(--branco) 70%) right / 36px 100% no-repeat local,
    radial-gradient(farthest-side at 0   50%, rgba(13,18,17,.13), rgba(13,18,17,0)) left  / 13px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(13,18,17,.13), rgba(13,18,17,0)) right / 13px 100% no-repeat scroll,
    var(--branco);
}
.tabela-caixa table{background:transparent}

@media(max-width:820px){
  .tabela-caixa{scrollbar-width:thin; scrollbar-color:var(--acento-claro) var(--papel)}
  .tabela-caixa::-webkit-scrollbar{height:7px}
  .tabela-caixa::-webkit-scrollbar-track{background:var(--papel); border-radius:99px}
  .tabela-caixa::-webkit-scrollbar-thumb{background:var(--acento-claro); border-radius:99px}

  /* dica escrita, que some assim que a pessoa arrasta */
  .tabela-caixa::after{content:none}
  .dica-rolagem{
    display:flex; align-items:center; gap:7px; justify-content:center;
    font-size:12.5px; color:var(--fumaca-clara); padding:10px 0 0;
  }
  .dica-rolagem span{
    width:16px; height:1px; background:currentColor; position:relative;
  }
  .dica-rolagem span::after{
    content:''; position:absolute; right:0; top:-2px;
    border-left:4px solid currentColor; border-top:2.5px solid transparent;
    border-bottom:2.5px solid transparent;
  }
}
@media(min-width:821px){ .dica-rolagem{display:none} }