/* Sempre Vaga Estacionamentos — identidade visual */

:root {
  --verde-escuro: #12662c;
  --verde-escuro-2: #0e5424;
  --verde: #3d9a34;
  --verde-claro: #66b83a;
  --limao: #a8ce1e;
  --limao-claro: #c3dd4a;
  --limao-suave: #eaf5c4;
  --amarelo: #e9e33a;

  --tinta: #12291a;
  --tinta-fraca: #587062;
  --linha: #e2eadf;
  --papel: #ffffff;
  --fundo: #f4f8f0;

  --vermelho: #c0392b;
  --vermelho-suave: #fdeceb;
  --laranja: #d98324;
  --laranja-suave: #fdf3e3;
  --azul: #2b6cb0;

  --raio: 16px;
  --raio-p: 10px;
  --sombra: 0 1px 2px rgba(18, 41, 26, .06), 0 8px 24px rgba(18, 41, 26, .07);
  --sombra-alta: 0 18px 50px rgba(18, 41, 26, .18);
  --transicao: 180ms cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  font-family: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  color: var(--tinta);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--verde-escuro); }

/* ------------------------------------------------------------------ marca */

.marca { display: flex; align-items: center; gap: 12px; }
.marca__simbolo { width: 42px; height: 46px; object-fit: contain; flex: none; }
.marca__nome {
  font-size: 22px; font-weight: 800; line-height: .96; letter-spacing: -.02em;
}
.marca__nome span { display: block; }
.marca__nome .um { color: var(--verde-escuro); }
.marca__nome .dois { color: var(--limao); }
.marca__assinatura {
  display: block; font-size: 9px; font-weight: 700; letter-spacing: .34em;
  color: var(--verde); margin-top: 3px;
}
.marca--clara .marca__nome .um { color: #fff; }
.marca--clara .marca__nome .dois { color: var(--limao-claro); }
.marca--clara .marca__assinatura { color: rgba(255, 255, 255, .62); }
.marca--lockup { display: block; }
.marca--lockup img { display: block; height: 186px; width: auto; }
.marca--limao .marca__nome .um { color: #0e5424; }
.marca--limao .marca__nome .dois { color: #ffffff; }
.marca--limao .marca__assinatura { color: rgba(14, 84, 36, .7); }

/* ------------------------------------------------------------------ botões */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 700; font-size: 14px; cursor: pointer;
  transition: transform var(--transicao), box-shadow var(--transicao), background var(--transicao);
}
.botao:active { transform: translateY(1px); }
.botao:focus-visible { outline: 3px solid var(--limao); outline-offset: 2px; }
.botao[disabled] { opacity: .5; cursor: not-allowed; }

.botao--principal {
  background: linear-gradient(135deg, var(--verde) 0%, var(--verde-escuro) 100%);
  color: #fff; box-shadow: 0 6px 18px rgba(18, 102, 44, .28);
}
.botao--principal:hover:not([disabled]) { box-shadow: 0 10px 26px rgba(18, 102, 44, .34); }

.botao--limao {
  background: linear-gradient(135deg, var(--limao-claro), var(--limao));
  color: var(--verde-escuro-2); box-shadow: 0 6px 18px rgba(168, 206, 30, .38);
}
.botao--contorno { background: transparent; border-color: var(--linha); color: var(--tinta); }
.botao--contorno:hover { background: var(--limao-suave); border-color: var(--limao); }
.botao--fantasma { background: transparent; color: var(--tinta-fraca); padding: 8px 12px; }
.botao--fantasma:hover { color: var(--verde-escuro); background: var(--limao-suave); }
.botao--pequeno { padding: 8px 14px; font-size: 13px; }
.botao--largo { width: 100%; }

/* ------------------------------------------------------------------ campos */

.campo { display: block; margin-bottom: 16px; }
.campo__rotulo {
  display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 6px;
  color: var(--tinta-fraca); letter-spacing: .01em;
}
.campo__entrada {
  width: 100%; padding: 12px 14px; border-radius: var(--raio-p);
  border: 1.5px solid var(--linha); background: #fff;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo__entrada:focus {
  outline: none; border-color: var(--verde-claro);
  box-shadow: 0 0 0 4px rgba(102, 184, 58, .16);
}
.campo__entrada[readonly] { background: #f7faf4; color: var(--tinta-fraca); }
textarea.campo__entrada { resize: vertical; min-height: 84px; line-height: 1.5; }
.campo--senha { position: relative; }
.campo--senha .campo__entrada { padding-right: 46px; }
.olho {
  position: absolute; right: 6px; bottom: 5px; border: none; background: none;
  cursor: pointer; padding: 8px; color: var(--tinta-fraca); line-height: 0;
}
.olho:hover { color: var(--verde-escuro); }

/* --------------------------------------------------------------- etiquetas */

.selo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700;
}
.selo::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.selo--pago { background: var(--limao-suave); color: #3f7a1f; }
.selo--aberto { background: #eaf1fb; color: var(--azul); }
.selo--vencendo { background: var(--laranja-suave); color: var(--laranja); }
.selo--vencido { background: var(--vermelho-suave); color: var(--vermelho); }
.selo--neutro { background: var(--fundo); color: var(--tinta-fraca); }

/* --------------------------------------------------------- barra simples */

.barra { height: 9px; border-radius: 999px; background: var(--linha); overflow: hidden; }
.barra__cheia {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--verde-escuro), var(--limao));
}
.barra-legenda {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px; color: var(--tinta-fraca); margin-bottom: 8px;
}
.barra-legenda strong { font-size: 15px; color: var(--tinta); }

.plano__ajuste {
  border-top: 1px solid var(--linha); padding-top: 16px; margin-top: 4px;
}
.plano__ajuste .campo { margin-bottom: 12px; }
.plano__receita {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; color: var(--tinta-fraca); margin-bottom: 14px;
}
.plano__receita strong { font-size: 15px; color: var(--verde-escuro); }

/* ------------------------------------------------------------------- login */

.entrada-tela {
  min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr;
  background: radial-gradient(120% 120% at 15% 0%, #c3dd4a 0%, #a8ce1e 46%, #8fbc16 100%);
}
.entrada-tela__arte {
  /* O topo e a esquerda repetem o cabeçalho da vitrine (18px 32px) para a
     marca ficar no mesmo lugar nas duas telas. */
  position: relative; overflow: hidden; padding: 18px 32px 40px;
  display: flex; flex-direction: column; justify-content: space-between; color: var(--verde-escuro-2);
}
.entrada-tela__arte::before,
.entrada-tela__arte::after {
  content: ''; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .13);
}
.entrada-tela__arte::before { width: 520px; height: 520px; left: -190px; bottom: -230px; }
.entrada-tela__arte::after { width: 300px; height: 300px; right: -90px; top: -120px; background: rgba(18, 102, 44, .08); }

.cracha {
  position: relative; z-index: 1; align-self: center;
  width: min(322px, 70%); margin: 0 0 46px;
  display: flex; flex-direction: column; align-items: center;
  transform: rotate(-2.5deg);
}

.cracha__cordao {
  position: absolute; left: 0; right: 0; bottom: calc(100% - 14px);
  height: 100vh; z-index: 0; pointer-events: none;
}
.cracha__fita {
  position: absolute; bottom: 0; left: 50%; width: 15px; height: 100%;
  border-radius: 2px; transform-origin: 50% 100%;
  background:
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, .2) 0 5px, transparent 5px 14px)
      center / 2px 100% no-repeat,
    linear-gradient(100deg, #101010 0%, #3d3d3d 45%, #151515 100%);
  box-shadow: 0 2px 5px rgba(18, 41, 26, .26);
}
.cracha__fita--esq { transform: translateX(-50%) rotate(-6deg); }
.cracha__fita--dir { transform: translateX(-50%) rotate(6deg); }
.cracha__no {
  position: absolute; left: 50%; bottom: -2px; width: 26px; height: 16px;
  transform: translateX(-50%); border-radius: 4px;
  background: linear-gradient(100deg, #131313, #3a3a3a 50%, #171717);
}

.cracha__peca {
  position: relative; z-index: 2; width: 100%; margin-top: -12px;
  display: flex; flex-direction: column; align-items: center;
  transform-origin: 50% 6px; transform: rotate(4.5deg);
  animation: balanco 7s ease-in-out infinite alternate;
}
@keyframes balanco {
  from { transform: rotate(2.6deg); }
  to { transform: rotate(6.2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cracha__peca { animation: none; }
}

.cracha__clipe {
  position: relative; z-index: 2; width: 28px; height: 42px;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(100deg, #f6f8f6, #c9cfc9 55%, #eef1ee);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}
.cracha__clipe::before {
  content: ''; position: absolute; left: 50%; top: 6px; width: 13px; height: 15px;
  transform: translateX(-50%); border-radius: 3px;
  border: 2px solid rgba(60, 66, 60, .45);
}
.cracha__clipe::after {
  content: ''; position: absolute; left: 50%; bottom: -14px; width: 12px; height: 18px;
  transform: translateX(-50%); border-radius: 2px;
  background: linear-gradient(100deg, #eaedea, #c3c9c3);
}

.cracha__porta {
  position: relative; z-index: 1; width: 100%; margin-top: 4px;
  padding: 30px 14px 14px; border-radius: 14px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .44), rgba(255, 255, 255, .18));
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 26px 38px rgba(18, 41, 26, .24), inset 0 1px 0 rgba(255, 255, 255, .7);
  backdrop-filter: blur(1.5px);
}
.cracha__topo {
  position: absolute; top: 12px; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: 36px;
}
.cracha__topo i {
  width: 11px; height: 11px; border-radius: 50%;
  background: rgba(30, 50, 34, .22); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .18);
}
.cracha__topo span {
  width: 48px; height: 11px; border-radius: 6px;
  background: rgba(30, 50, 34, .22); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .18);
}

.cracha__cartao {
  background: #fdfdfb; border-radius: 6px; padding: 18px 14px 16px;
  box-shadow: 0 2px 6px rgba(18, 41, 26, .16);
  display: flex; justify-content: center;
}
.cracha__cartao img { width: 63%; height: auto; display: block; }

.entrada-tela__frase { position: relative; z-index: 1; max-width: 460px; }
.entrada-tela__frase h1 { font-size: 34px; margin-bottom: 10px; }
.entrada-tela__frase p { font-size: 15.5px; color: rgba(14, 84, 36, .82); }
.entrada-tela__rodape { position: relative; z-index: 1; font-size: 12.5px; color: rgba(14, 84, 36, .72); }

.entrada-tela--equipe {
  background: radial-gradient(120% 120% at 15% 0%, #1d7d3a 0%, #12662c 46%, #0a4520 100%);
}
.entrada-tela--equipe .entrada-tela__arte { color: #fff; }
.entrada-tela--equipe .entrada-tela__arte::before { background: rgba(255, 255, 255, .09); }
.entrada-tela--equipe .entrada-tela__arte::after { background: rgba(168, 206, 30, .16); }
.entrada-tela--equipe .entrada-tela__frase p { color: rgba(255, 255, 255, .8); }
.entrada-tela--equipe .entrada-tela__rodape { color: rgba(255, 255, 255, .65); }
.entrada-tela--equipe .cracha__porta {
  background: linear-gradient(150deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .1));
  border-color: rgba(255, 255, 255, .4);
}
.entrada-tela--equipe .cracha__topo i,
.entrada-tela--equipe .cracha__topo span { background: rgba(255, 255, 255, .35); }
.entrada-tela--equipe .cracha__fita {
  background:
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, .26) 0 5px, transparent 5px 14px)
      center / 2px 100% no-repeat,
    linear-gradient(100deg, #0a0a0a 0%, #2f2f2f 45%, #101010 100%);
}

.entrada-tela__painel {
  position: relative;
  background: var(--papel); display: flex; align-items: center; justify-content: center;
  padding: 40px 24px; box-shadow: -20px 0 60px rgba(18, 41, 26, .12);
}

/* Porta de entrada da equipe: discreta, no alto, longe do formulário do cliente. */
.acesso-equipe {
  position: absolute; top: 18px; right: 24px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 7px; border-radius: 999px;
  border: 1px solid var(--linha); background: var(--papel);
  color: var(--verde-escuro); font-size: 13px; font-weight: 700;
  text-decoration: none; transition: all var(--transicao);
}
.acesso-equipe:hover { border-color: var(--limao); background: var(--limao-suave); }
.acesso-equipe__icone {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  background: var(--verde-escuro); color: var(--limao);
}
.acesso-equipe__icone svg { width: 18px; height: 18px; }
@media (max-width: 900px) {
  .acesso-equipe { top: 12px; right: 12px; }
}
.formulario-entrada { width: min(400px, 100%); }
.formulario-entrada > h2 { font-size: 27px; margin-bottom: 6px; }
.formulario-entrada > .subtitulo { color: var(--tinta-fraca); margin-bottom: 26px; font-size: 14.5px; }

.linha-opcoes { display: flex; align-items: center; justify-content: space-between; margin: -4px 0 20px; }
.lembrar { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--tinta-fraca); }
.lembrar input { accent-color: var(--verde); width: 16px; height: 16px; }

.recado {
  display: none; align-items: center; gap: 10px; margin-bottom: 16px;
  padding: 11px 14px; border-radius: var(--raio-p); font-size: 13.5px; font-weight: 600;
  background: var(--vermelho-suave); color: var(--vermelho);
}
.recado.visivel { display: flex; }

.virar-cliente {
  display: flex; align-items: center; gap: 14px; margin-top: 26px;
  padding: 15px 16px; border-radius: var(--raio-p);
  background: linear-gradient(135deg, #f3f9e4, #eaf5c4); font-size: 12.5px; line-height: 1.45;
  color: var(--tinta-fraca);
}
.virar-cliente strong { display: block; color: var(--tinta); font-size: 14px; }
.virar-cliente .botao { margin-left: auto; flex: none; }

/* ------------------------------------------------------------------ painel */

.aplicativo { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }

.lateral {
  background: linear-gradient(170deg, var(--verde-escuro) 0%, #0b451e 100%);
  padding: 26px 18px; display: flex; flex-direction: column; gap: 26px;
  position: sticky; top: 0; height: 100vh;
}
.lateral__menu { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.lateral__titulo {
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255, 255, 255, .42); padding: 12px 12px 6px; font-weight: 700;
}
.aba {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px;
  border-radius: 12px; border: none; background: none; cursor: pointer;
  color: rgba(255, 255, 255, .78); font-size: 14.5px; font-weight: 600; text-align: left;
  transition: background var(--transicao), color var(--transicao);
}
.aba:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.aba.ativa { background: linear-gradient(135deg, var(--limao), #94bd15); color: var(--verde-escuro-2); }
.aba svg { width: 20px; height: 20px; flex: none; }
.aba__contador {
  margin-left: auto; background: var(--vermelho); color: #fff; font-size: 11px;
  min-width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center; padding: 0 6px;
}
.aba.ativa .aba__contador { background: var(--verde-escuro); }

.conteudo { display: flex; flex-direction: column; min-width: 0; }

.topo {
  display: flex; align-items: center; gap: 18px; padding: 18px 32px;
  background: rgba(255, 255, 255, .86); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 20;
}
.topo__titulo { font-size: 20px; }
.topo__direita { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.usuario-nome { font-size: 14px; font-weight: 700; }
.usuario-plano { font-size: 12px; color: var(--tinta-fraca); }

.pagina { padding: 26px 32px 48px; display: none; }
.pagina.ativa { display: block; animation: surgir 260ms ease both; }
@keyframes surgir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------------- cartões */

.cartao {
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.cartao__cabecalho {
  display: flex; align-items: center; gap: 12px; padding: 18px 20px;
  border-bottom: 1px solid var(--linha);
}
.cartao__cabecalho h3 { font-size: 15.5px; }
.cartao__corpo { padding: 20px; }

.grade { display: grid; gap: 18px; }
.grade--4 { grid-template-columns: repeat(4, 1fr); }
.grade--3 { grid-template-columns: repeat(3, 1fr); }
.grade--2 { grid-template-columns: repeat(2, 1fr); }
.grade--principal { grid-template-columns: 1.6fr 1fr; align-items: start; }

.indicador {
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 16px 18px 18px; box-shadow: var(--sombra);
}
.indicador__topo { display: flex; align-items: center; gap: 9px; margin-bottom: 15px; }
.indicador__icone {
  width: 29px; height: 29px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  background: var(--limao-suave); color: var(--verde-escuro);
}
.indicador__icone svg { width: 16px; height: 16px; }
.indicador__rotulo {
  font-size: 11.5px; font-weight: 700; color: var(--tinta-fraca);
  text-transform: uppercase; letter-spacing: .07em;
}
.indicador__valor { font-size: 29px; font-weight: 800; letter-spacing: -.025em; line-height: 1.02; }
.indicador__apoio { font-size: 12.5px; color: var(--tinta-fraca); margin-top: 6px; }

/* Atenção tinge só a pastilha; alerta pinta o número também. */
.indicador--atencao,
.indicador--alerta { border-color: #f4cdc8; }
.indicador--atencao .indicador__icone,
.indicador--alerta .indicador__icone { background: var(--vermelho-suave); color: var(--vermelho); }
.indicador--alerta .indicador__valor { color: var(--vermelho); }

.indicador--destaque {
  background: linear-gradient(152deg, var(--verde-escuro), #0b451e);
  border-color: transparent; color: #fff;
}
.indicador--destaque .indicador__icone { background: rgba(255, 255, 255, .13); color: var(--limao); }
.indicador--destaque .indicador__rotulo,
.indicador--destaque .indicador__apoio { color: rgba(255, 255, 255, .68); }

/* ---------------------------------------------------------------- boletos */

.lista-notificacoes { display: flex; flex-direction: column; }
.notificacao {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 15px 20px; border: none; border-top: 1px solid var(--linha);
  background: none; font: inherit; color: inherit;
}
.notificacao:first-child { border-top: none; }
button.notificacao { cursor: pointer; transition: background var(--transicao); }
button.notificacao:hover { background: var(--fundo); }
.notificacao__icone {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
}
.notificacao__icone svg { width: 20px; height: 20px; }
.notificacao__titulo { display: block; font-weight: 700; font-size: 14.5px; }
.notificacao__apoio {
  display: block; color: var(--tinta-fraca); font-size: 13px; margin-top: 3px;
}
.notificacao__data { color: var(--tinta-fraca); font-size: 12.5px; flex: none; }

.lista-boletos { display: flex; flex-direction: column; }
.boleto-linha {
  display: grid; grid-template-columns: 46px 1fr auto auto auto;
  align-items: center; gap: 16px; padding: 15px 20px;
  border-top: 1px solid var(--linha); cursor: pointer;
  transition: background var(--transicao);
}
.boleto-linha:first-child { border-top: none; }
/* Na gestão a linha é um botão: tira o visual de botão do navegador. */
button.boleto-linha {
  width: 100%; background: none; border: none; border-top: 1px solid var(--linha);
  font: inherit; color: inherit; text-align: left;
}
button.boleto-linha:first-child { border-top: none; }
.boleto-linha:hover { background: #fafcf6; }
.boleto-linha__mes {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--limao-suave); color: var(--verde-escuro); line-height: 1;
}
.boleto-linha__mes b { font-size: 16px; }
.boleto-linha__mes small { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; }
.boleto-linha__titulo { font-weight: 700; font-size: 14.5px; }
.boleto-linha__apoio { font-size: 12.5px; color: var(--tinta-fraca); margin-top: 3px; }
.boleto-linha__valor { font-weight: 800; font-size: 16px; text-align: right; }
.boleto-linha__valor small { display: block; font-size: 11.5px; font-weight: 600; color: var(--tinta-fraca); }
.boleto-linha__seta { color: var(--tinta-fraca); display: flex; }

.filtros { display: flex; gap: 8px; flex-wrap: wrap; }
.filtro {
  padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--linha);
  background: #fff; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--tinta-fraca);
  transition: all var(--transicao);
}
.filtro:hover { border-color: var(--limao); color: var(--verde-escuro); }
.filtro.ativo { background: var(--verde-escuro); border-color: var(--verde-escuro); color: #fff; }

.vazio { text-align: center; padding: 54px 20px; }
.vazio svg { width: 56px; height: 56px; color: var(--limao); margin-bottom: 14px; }
.vazio h3 { font-size: 16px; margin-bottom: 16px; }

/* ------------------------------------------------------------------ modal */

.cortina {
  position: fixed; inset: 0; background: rgba(9, 40, 18, .55); backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center; padding: 24px; z-index: 60;
}
.cortina.aberta { display: flex; animation: surgir 180ms ease both; }
.modal {
  background: var(--papel); border-radius: 20px; width: min(560px, 100%);
  max-height: 90vh; overflow: auto; box-shadow: var(--sombra-alta);
}
.modal--largo { width: min(820px, 100%); }
.modal__cabecalho {
  display: flex; align-items: flex-start; gap: 16px; padding: 22px 24px 18px;
  border-bottom: 1px solid var(--linha); position: sticky; top: 0; background: #fff; z-index: 2;
}
.modal__fechar {
  margin-left: auto; border: none; background: none; cursor: pointer; padding: 6px;
  color: var(--tinta-fraca); border-radius: 8px; line-height: 0;
}
.modal__fechar:hover { background: var(--fundo); color: var(--tinta); }
.modal__corpo { padding: 22px 24px; }
.modal__rodape {
  display: flex; gap: 10px; padding: 16px 24px 22px; flex-wrap: wrap;
}

.dados { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 20px; margin-bottom: 20px; }
.dado__rotulo { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-fraca); font-weight: 700; }
.dado__valor { font-size: 14.5px; font-weight: 600; margin-top: 3px; }

.itens-boleto { border: 1px solid var(--linha); border-radius: var(--raio-p); overflow: hidden; margin-bottom: 18px; }
.item-boleto {
  display: flex; justify-content: space-between; padding: 10px 14px; font-size: 13.5px;
  border-top: 1px solid var(--linha);
}
.item-boleto:first-child { border-top: none; }
.item-boleto--total { background: var(--limao-suave); font-weight: 800; font-size: 15px; }
.item-boleto--credito { color: var(--verde); }

.codigo-copiavel {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border: 1.5px dashed var(--limao); border-radius: var(--raio-p); background: #fbfdf3;
  font-family: 'Cascadia Mono', Consolas, monospace; font-size: 13px; word-break: break-all;
}
.codigo-copiavel button { margin-left: auto; flex: none; }
.codigo-rotulo { font-size: 12px; font-weight: 700; color: var(--tinta-fraca); margin-bottom: 7px; }

.barras { display: flex; align-items: flex-end; gap: 1px; height: 56px; margin-top: 16px; }
.barras span { background: var(--tinta); height: 100%; }

/* ---------------------------------------------------------------- vitrine */

.vitrine { background: var(--fundo); }
.vitrine__topo {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 32px; background: rgba(255, 255, 255, .9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 20;
}
.vitrine__topo .marca { text-decoration: none; }
.vitrine__corpo { max-width: 1180px; margin: 0 auto; padding: 34px 24px 60px; }
.vitrine__capa { text-align: center; margin-bottom: 30px; }
.vitrine__capa h1 { font-size: 34px; margin-bottom: 8px; }
.vitrine__capa p { color: var(--tinta-fraca); font-size: 15px; }
.vitrine__rodape {
  padding: 22px; text-align: center; font-size: 12.5px; color: var(--tinta-fraca);
  border-top: 1px solid var(--linha);
}

.dividir {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px;
  border: 1.5px dashed var(--limao); border-radius: var(--raio-p); background: #fbfdf3;
  cursor: pointer; font-size: 12.5px; color: var(--tinta-fraca); line-height: 1.45;
}
.dividir input { accent-color: var(--verde); width: 17px; height: 17px; margin-top: 1px; flex: none; }
.dividir strong { display: block; color: var(--tinta); font-size: 13.5px; }

.cadastro { display: grid; grid-template-columns: 1fr 380px; gap: 22px; align-items: start; }
.cadastro__resumo { position: sticky; top: 96px; }

.separador { height: 1px; background: var(--linha); margin: 4px 0 18px; }

.turnos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.turno {
  border: 1.5px solid var(--linha); border-radius: 12px; background: #fff; cursor: pointer;
  padding: 11px 12px; text-align: left; transition: all var(--transicao);
}
.turno:hover { border-color: var(--limao); }
.turno.ativo { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(102, 184, 58, .16); }
.turno strong { display: block; font-size: 14px; }
.turno span { display: block; font-size: 12px; color: var(--tinta-fraca); margin-top: 2px; }
.turno small {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--verde); margin-top: 6px;
}

.plano .dividir { margin-bottom: 4px; }

@media (max-width: 900px) {
  .cadastro { grid-template-columns: 1fr; }
  .cadastro__resumo { position: static; }
  .vitrine__topo, .vitrine__corpo { padding-left: 18px; padding-right: 18px; }
}

/* ----------------------------------------------------------------- planos */

.plano {
  position: relative; background: var(--papel); border: 1.5px solid var(--linha);
  border-radius: var(--raio); box-shadow: var(--sombra); padding: 26px 22px 22px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color var(--transicao), transform var(--transicao);
}
.plano:hover { border-color: var(--limao); transform: translateY(-2px); }
.plano--atual { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(102, 184, 58, .16), var(--sombra); }
.plano__marca {
  position: absolute; top: -12px; left: 22px; padding: 4px 12px; border-radius: 999px;
  background: linear-gradient(135deg, var(--limao-claro), var(--limao));
  color: var(--verde-escuro-2); font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
}
.plano__icone {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: var(--limao-suave); color: var(--verde-escuro);
}
.plano__icone svg { width: 32px; height: 24px; }
.plano__nome { font-size: 17px; }
.plano__periodo {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--verde); margin-top: -6px;
}
.plano__preco { font-size: 32px; font-weight: 800; letter-spacing: -.03em; }
.plano__preco small {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--tinta-fraca);
  letter-spacing: 0; margin-top: 2px;
}
.plano__janela {
  font-size: 13px; color: var(--tinta-fraca); padding-bottom: 14px;
  border-bottom: 1px solid var(--linha);
}
.plano .beneficios { flex: 1; align-content: start; margin-bottom: 6px; }

/* --------------------------------------------------------------- veículos */

.veiculos-quadro { display: grid; grid-template-columns: 340px 1fr; gap: 26px; align-items: start; }

.veiculo-cartao {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; width: 100%;
  border: 1.5px solid var(--linha); border-radius: 14px; background: #fff; cursor: pointer;
  text-align: left; transition: all var(--transicao); margin-bottom: 10px;
}
.veiculo-cartao:hover { border-color: var(--limao); }
.veiculo-cartao.ativa { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(102, 184, 58, .16); }
.veiculo-cartao__icone {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--limao-suave); color: var(--verde-escuro); flex: none;
}
.veiculo-cartao__icone svg { width: 30px; height: 22px; }
.veiculo-cartao__nome { display: block; font-weight: 700; font-size: 14px; }
.veiculo-cartao__apoio {
  display: block; font-size: 12px; color: var(--tinta-fraca); margin-top: 2px;
}
.placa {
  display: inline-flex; flex-direction: column; align-items: center; padding: 3px 10px 4px;
  border: 2px solid var(--tinta); border-radius: 5px; background: #fff;
  font-family: 'Cascadia Mono', Consolas, monospace; font-weight: 700; letter-spacing: .06em;
}
.placa small {
  font-size: 6.5px; letter-spacing: .12em; color: #fff; background: var(--azul);
  width: calc(100% + 20px); margin: -3px -10px 2px; text-align: center; padding: 1px 0;
}

.cores { display: flex; gap: 8px; flex-wrap: wrap; }
.cor {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; cursor: pointer;
  box-shadow: 0 0 0 1.5px var(--linha); transition: transform var(--transicao);
}
.cor:hover { transform: scale(1.12); }
.cor.ativa { box-shadow: 0 0 0 2.5px var(--verde); }

/* --------------------------------------------------------------- tabelas */

.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela th {
  text-align: left; padding: 12px 20px; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--tinta-fraca); border-bottom: 1px solid var(--linha);
}
.tabela td { padding: 13px 20px; border-bottom: 1px solid var(--linha); }
.tabela tr:last-child td { border-bottom: none; }
.tabela tbody tr:hover { background: #fafcf6; }
.rolagem { overflow-x: auto; }

.linha-tempo { position: relative; padding-left: 26px; }
.linha-tempo::before {
  content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--linha);
}
.evento { position: relative; padding-bottom: 18px; }
.evento:last-child { padding-bottom: 0; }
.evento::before {
  content: ''; position: absolute; left: -23px; top: 4px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--limao); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--limao-suave);
}
.evento__titulo { font-weight: 700; font-size: 14px; }
.evento__apoio { font-size: 12.5px; color: var(--tinta-fraca); margin-top: 2px; }

.aviso-caixa {
  display: flex; gap: 12px; padding: 14px; border-radius: var(--raio-p);
  background: var(--limao-suave); font-size: 13.5px; line-height: 1.5;
}
.aviso-caixa svg { flex: none; width: 20px; height: 20px; color: var(--verde-escuro); }

.brinde {
  position: fixed; right: 24px; bottom: 24px; z-index: 80;
  display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-radius: 999px;
  background: var(--verde-escuro); color: #fff; font-weight: 600; font-size: 14px;
  box-shadow: var(--sombra-alta); transform: translateY(120%); opacity: 0;
  transition: transform 260ms cubic-bezier(.22,.61,.36,1), opacity 260ms;
}
.brinde.visivel { transform: none; opacity: 1; }
.brinde svg { width: 20px; height: 20px; color: var(--limao-claro); }

.barra-progresso { height: 8px; border-radius: 999px; background: var(--linha); overflow: hidden; }
.barra-progresso span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--limao), var(--verde)); }

.beneficios { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.beneficios li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; }
.beneficios svg { width: 17px; height: 17px; color: var(--verde); flex: none; margin-top: 1px; }

@media (max-width: 1180px) {
  .grade--4 { grid-template-columns: repeat(2, 1fr); }
  .grade--principal { grid-template-columns: 1fr; }
  .veiculos-quadro { grid-template-columns: 1fr; }
}
/* No celular a lateral se parte em duas, e as duas ficam paradas na tela.
 *
 * Antes ela virava uma tira única que rolava de lado, levando a marca junto:
 * bastava arrastar um pouco para a logo sumir, e os botões ficavam só com o
 * ícone, sem nome, longe do polegar. Agora a marca fica presa em cima e o menu
 * desce para uma barra no rodapé, que é onde a mão alcança sem trocar a pegada.
 *
 * As duas medidas abaixo existem porque o conteúdo precisa saber de quanto se
 * afastar — barra fixa não ocupa espaço no fluxo, e sem isso o topo e o fim da
 * página ficariam escondidos atrás delas. */
@media (max-width: 900px) {
  :root { --barra-marca: 56px; --barra-menu: 60px; }

  /* A faixa fica do tamanho do que tem dentro e o formulario leva o resto.
   * Sem isto a grade divide a altura entre as duas linhas e a marca sozinha
   * ocupava um quarto da tela. */
  .entrada-tela { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .aplicativo { grid-template-columns: 1fr; }

  /* ------------------------------------------ a marca sobrevive no celular */
  /* A coluna da arte nao some: vira uma faixa curta com a marca centrada.
   * Escondida por inteiro, a tela de entrada ficava branca — a primeira coisa
   * que qualquer pessoa ve no aplicativo, sem nada dizendo de quem ele e.
   *
   * O que cabe numa faixa e a marca. O cracha, a frase e o rodape continuam
   * escondidos: sao para tela larga, e empurrariam o formulario para fora da
   * dobra logo no primeiro toque. */
  .entrada-tela__arte {
    padding: 26px 20px 20px; min-height: 0;
    align-items: center; justify-content: center;
  }
  .entrada-tela__arte::before,
  .entrada-tela__arte::after { display: none; }
  .entrada-tela__arte .cracha,
  .entrada-tela__arte .entrada-tela__frase,
  .entrada-tela__arte .entrada-tela__rodape { display: none; }

  /* ---------------------------------------------------- marca, presa em cima */
  .lateral {
    position: fixed; top: 0; left: 0; right: 0; z-index: 30;
    height: var(--barra-marca); padding: 0 16px;
    flex-direction: row; align-items: center; gap: 12px; overflow: visible;
  }
  .lateral .marca__simbolo { width: 30px; height: 33px; }
  .lateral .marca__nome { font-size: 17px; }
  .lateral .marca__assinatura { font-size: 7.5px; letter-spacing: .26em; margin-top: 2px; }

  /* Sair sai do meio da navegação: é a única ação daquela barra que não leva a
   * lugar nenhum, e no rodapé viveria colada nas abas, convidando ao engano. */
  #botaoSair { margin-left: auto; padding: 9px; }
  #botaoSair span.rotulo { display: none; }

  .conteudo { padding-top: var(--barra-marca); }

  /* ---------------------------------------------------- menu, preso embaixo */
  .lateral__menu {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0;
    background: var(--verde-escuro-2, #0b451e);
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: 5px 4px calc(5px + env(safe-area-inset-bottom, 0px));
  }
  .lateral__titulo { display: none; }

  /* Ícone em cima, nome embaixo: o nome volta porque ícone sozinho vira
   * adivinhação, e é ele que diz para onde o dedo vai. */
  .aba {
    position: relative; flex-direction: column; justify-content: center;
    gap: 3px; padding: 7px 2px 5px; min-width: 0; border-radius: 10px;
    text-align: center; font-size: 10px;
  }
  .aba svg { width: 21px; height: 21px; }
  .aba span.rotulo {
    display: block; max-width: 100%; font-size: 9.5px; font-weight: 700;
    line-height: 1.1; letter-spacing: -.01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* O contador deixa de empurrar a linha e vira selo no canto do ícone. */
  .aba__contador {
    position: absolute; top: 3px; left: 50%; margin-left: 3px;
    min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px;
  }

  .pagina { padding-bottom: calc(var(--barra-menu) + env(safe-area-inset-bottom, 0px) + 28px); }

  /* O título da página para de grudar no alto: quem fica lá é a marca. */
  .topo { position: static; }

  .grade--3, .grade--2 { grid-template-columns: 1fr; }
  .pagina, .topo { padding-left: 18px; padding-right: 18px; }
  .boleto-linha { grid-template-columns: 46px 1fr auto; }
  .boleto-linha__seta, .boleto-linha .selo { display: none; }
}
@media (max-width: 640px) {
  .grade--4 { grid-template-columns: 1fr; }
  .dados { grid-template-columns: 1fr; }
}

[hidden] { display: none !important; }

/* --------------------------------------------------------------- chamados */

.conversa { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
/* Na fila da equipe a conversa rola sozinha, para o campo de resposta não fugir. */
.conversa--rolagem { max-height: 42vh; overflow-y: auto; padding-right: 4px; }
.grade--fila { grid-template-columns: 1fr 1.35fr; align-items: start; }
.fala {
  max-width: 84%; border-radius: 14px; padding: 10px 14px 12px;
  border: 1px solid var(--linha); background: var(--papel);
  font-size: 13.5px; line-height: 1.55;
}
.fala__quem {
  display: flex; gap: 8px; align-items: baseline;
  font-size: 11.5px; font-weight: 700; color: var(--tinta-fraca); margin-bottom: 5px;
}
.fala__hora { font-weight: 500; }
.fala__texto { white-space: pre-wrap; }
.fala--minha { align-self: flex-end; background: var(--limao-suave); border-color: #dbe9a9; }
.fala--outra { align-self: flex-start; background: var(--fundo); }
.fala--interna {
  align-self: flex-end; background: var(--laranja-suave);
  border-color: #f0d4a6; border-style: dashed;
}
.fala--interna .fala__quem { color: var(--laranja); }

/* A linha aberta na fila fica marcada enquanto a conversa está ao lado. */
.boleto-linha.ativa { background: var(--limao-suave); }
.boleto-linha.ativa .boleto-linha__titulo { color: var(--verde-escuro); }