/* =====================================================================================
   CAPA do Simple Agenda (maquete aprovada em 2026-09-28: maquete/capa-computador.html e
   capa-celular.html). Medidas copiadas da maquete. Computador a partir de 861 px; celular até 860 px.
   A fonte Manrope local e os estilos da política de privacidade ficam em estilo.css.
   ===================================================================================== */
body.capa { margin: 0; background: #ffffff; color: #14213D; font: 400 16px/normal 'Manrope', sans-serif; }
.capa a { color: #059669; }
.capa a:hover { color: #047857; }
.c-caixa { width: min(1200px, calc(100% - 48px)); margin-inline: auto; box-sizing: border-box; }
.so-cel { display: none !important; }

/* Topo e faixa azul */
.c-azul { background: #14213D; }
.c-topo-linha { height: 88px; display: flex; align-items: center; justify-content: space-between; }
.c-marca { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.c-marca-simbolo { width: 36px; height: 36px; flex: none; }
.c-topo .c-marca-nome { font-size: 23px; letter-spacing: -0.6px; color: #ffffff; }
.c-simple { font-weight: 800; }
.c-agenda { font-weight: 500; color: #6EE7B7; }
.c-nav { display: flex; align-items: center; gap: 36px; }
.capa .c-nav a { color: #E3E8F2; font-size: 15px; font-weight: 600; text-decoration: none; }
.capa .c-nav a.c-nav-botao { height: 44px; box-sizing: border-box; padding: 0 20px; display: flex; align-items: center; border-radius: 10px; background: #059669; color: #ffffff; font-size: 15px; font-weight: 700; }
.c-menu-botao { display: none; }
.c-menu { display: none; }

/* Botões */
.capa .c-botao { height: 56px; box-sizing: border-box; padding: 0 28px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 17px; text-decoration: none; }
.capa .c-botao-vivo { background: #10B981; color: #0B2A22; font-weight: 800; }
.capa .c-botao-contorno { border: 2px solid #3A4868; color: #ffffff; font-weight: 700; }
.capa .c-botao-verde { background: #059669; color: #ffffff; font-weight: 800; }
.capa .c-botao-cinza { border: 2px solid #D5DCEA; color: #14213D; font-weight: 700; }
.capa .c-botao-claro { flex-shrink: 0; height: 52px; padding: 0 24px; border: 2px solid #6EE7B7; color: #6EE7B7; font-size: 16px; font-weight: 700; }

/* Abertura */
.c-abertura { height: 660px; box-sizing: border-box; padding-top: 40px; display: grid; grid-template-columns: 640px 1fr; gap: 60px; }
.c-abertura-texto { display: flex; flex-direction: column; gap: 26px; padding-top: 56px; }
.c-pilula { align-self: flex-start; padding: 7px 14px; border-radius: 999px; background: #1F3057; color: #6EE7B7; font-size: 14px; font-weight: 700; }
.c-abertura h1 { margin: 0; font-size: 62px; line-height: 1.06; letter-spacing: -1.8px; font-weight: 800; color: #ffffff; }
.c-abertura h1 span { color: #6EE7B7; }
.c-abertura p { margin: 0; font-size: 20px; line-height: 1.55; color: #C9D3E6; }
.c-abertura-botoes { display: flex; gap: 14px; }
.c-garantia { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #C9D3E6; }
.c-garantia svg { width: 18px; height: 18px; stroke-width: 2.4; flex: none; }

/* O celular com a conversa e o cartão do painel */
.c-telas { position: relative; }
.c-celular { position: absolute; left: 10px; top: 0; width: 320px; height: 620px; box-sizing: border-box; border-radius: 44px 44px 0 0; background: #0B1530; padding: 14px 14px 0; border: 1px solid #2B3B63; border-bottom: 0; }
.c-celular-tela { height: 100%; border-radius: 32px 32px 0 0; background: #EEF1F5; overflow: hidden; display: flex; flex-direction: column; }
.c-conversa-topo { display: flex; align-items: center; gap: 10px; padding: 16px 14px; background: #ffffff; border-bottom: 1px solid #E3E8F2; }
.c-avatar { width: 36px; height: 36px; border-radius: 18px; background: #F2F4F8; display: flex; align-items: center; justify-content: center; flex: none; }
.c-conversa-quem { display: flex; flex-direction: column; gap: 1px; }
.c-conversa-nome { font-size: 14px; font-weight: 800; }
.c-conversa-sub { font-size: 11px; color: #4A5875; }
.c-mensagens { padding: 16px 12px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.45; }
.c-balao { align-self: flex-start; width: 236px; box-sizing: border-box; background: #ffffff; border-radius: 4px 14px 14px 14px; padding: 11px 13px; }
.c-balao-lembrete { display: flex; flex-direction: column; gap: 8px; }
.c-balao-data { padding: 8px 10px; border-radius: 8px; background: #F2F4F8; font-weight: 700; }
.c-op1 { color: #065F46; }
.c-op2 { color: #1E40AF; }
.c-op3 { color: #991B1B; }
.c-balao-resposta { align-self: flex-end; background: #D1FAE5; border-radius: 14px 4px 14px 14px; padding: 9px 16px; font-weight: 800; }
.c-painel { position: absolute; right: 0; top: 400px; width: 310px; box-sizing: border-box; background: #ffffff; border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 24px 60px rgba(4, 10, 30, 0.45); }
.c-painel-topo { display: flex; align-items: center; justify-content: space-between; }
.c-painel-titulo { font-size: 14px; font-weight: 800; }
.c-painel-dia { font-size: 12px; color: #4A5875; }
.c-painel-linha { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-top: 1px solid #E6EAF1; font-size: 13px; }
.c-selo { border-radius: 999px; font-weight: 800; }
.c-painel .c-selo { padding: 4px 9px; font-size: 11px; }
.c-selo-verde { background: #D1FAE5; color: #065F46; }
.c-selo-azul { background: #DBEAFE; color: #1E40AF; }
.c-selo-amarelo { background: #FEF3C7; color: #92400E; }
.c-selo-cinza { background: #E5E7EB; color: #374151; }
.c-selo-vermelho { background: #FEE2E2; color: #991B1B; }

/* Cabeçalho das seções */
.c-cabeca { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.c-sobretitulo { font-size: 14px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #059669; }
.c-cabeca h2 { margin: 0; font-size: 44px; line-height: 1.12; letter-spacing: -1px; font-weight: 800; }
.c-cabeca p { margin: 0; font-size: 18px; line-height: 1.55; color: #4A5875; }

/* Como funciona */
.c-como { padding: 110px 0 100px; display: flex; flex-direction: column; gap: 48px; }
.c-passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.c-passo { border-radius: 20px; background: #F2F4F8; padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.c-numero { width: 52px; height: 52px; border-radius: 14px; background: #14213D; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; }
.c-numero-verde { background: #059669; }
.c-passo h3 { margin: 0; font-size: 22px; font-weight: 800; }
.c-passo p { margin: 0; font-size: 16px; line-height: 1.6; color: #4A5875; }

/* Para a recepção */
.c-recepcao { background: #F2F4F8; padding: 100px 0; }
.c-recepcao-grade { display: grid; grid-template-columns: 480px 1fr; gap: 72px; align-items: center; }
.c-recepcao-texto { display: flex; flex-direction: column; gap: 18px; }
.c-recepcao .c-cabeca { display: contents; }
.c-recepcao .c-cabeca h2 { font-size: 40px; line-height: 1.15; }
.c-recepcao .c-cabeca p { line-height: 1.6; }
.c-legenda { display: flex; flex-direction: column; gap: 10px; font-size: 16px; font-weight: 600; }
.c-legenda > div { display: flex; align-items: center; gap: 10px; }
.c-ponto { width: 12px; height: 12px; border-radius: 6px; flex: none; }
.c-ponto-verde { background: #059669; }
.c-ponto-laranja { background: #D97706; }
.c-ponto-azul { background: #2563EB; }
.c-ponto-vermelho { background: #DC2626; }
.c-quadro { background: #ffffff; border-radius: 20px; box-shadow: 0 20px 50px rgba(20, 33, 61, 0.12); overflow: hidden; display: flex; flex-direction: column; }
.c-quadro-topo { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid #E6EAF1; }
.c-quadro-titulo { font-size: 18px; font-weight: 800; }
.c-quadro-dia { font-size: 14px; color: #4A5875; }
.c-contagens { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 20px 24px; }
.c-contagem { border-radius: 12px; padding: 14px; font-size: 12px; font-weight: 700; }
.c-contagem-n { font-size: 26px; font-weight: 800; }
.c-contagem-verde { background: #ECFDF5; color: #065F46; }
.c-contagem-amarela { background: #FFFBEB; color: #92400E; }
.c-contagem-azul { background: #EFF6FF; color: #1E40AF; }
.c-contagem-vermelha { background: #FEF2F2; color: #991B1B; }
.c-quadro-linha { display: grid; grid-template-columns: 70px 1fr 150px; gap: 12px; align-items: center; padding: 13px 24px; border-top: 1px solid #E6EAF1; font-size: 15px; }
.c-quadro-linha .c-quem { display: contents; }
.c-quadro .c-selo { justify-self: start; padding: 5px 10px; font-size: 12px; }

/* O que nunca faz */
.c-nunca { padding: 110px 0 100px; display: flex; flex-direction: column; gap: 44px; }
.c-garantias { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.c-garantia-cartao { border-radius: 20px; border: 1px solid #E3E8F2; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.c-garantia-cartao svg { width: 32px; height: 32px; flex-shrink: 0; }
.c-garantia-texto { display: contents; }
.c-garantia-cartao h3 { margin: 0; font-size: 19px; font-weight: 800; }
.c-garantia-cartao p { margin: 0; font-size: 15px; line-height: 1.6; color: #4A5875; }

/* Privacidade */
.c-privacidade { padding: 0 0 100px; }
.c-privacidade-faixa { border-radius: 28px; background: #14213D; padding: 56px 64px; display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.c-privacidade-texto { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.c-privacidade-texto h2 { margin: 0; font-size: 36px; letter-spacing: -0.8px; font-weight: 800; color: #ffffff; }
.c-privacidade-texto p { margin: 0; font-size: 17px; line-height: 1.6; color: #C9D3E6; }

/* Contato */
.c-contato { padding: 20px 0 110px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; text-align: center; }
.c-contato h2 { margin: 0; font-size: 44px; letter-spacing: -1px; font-weight: 800; }
.c-contato p { margin: 0; font-size: 18px; line-height: 1.55; color: #4A5875; max-width: 620px; }
.c-contato-botoes { display: flex; gap: 14px; margin-top: 8px; }

/* Rodapé */
.c-rodape { background: #14213D; }
.c-rodape-linha { height: 120px; display: flex; align-items: center; justify-content: space-between; }
.c-rodape-marca { display: flex; align-items: center; gap: 10px; }
.c-rodape .c-marca-nome { font-size: 18px; color: #ffffff; }
.c-rodape-texto { font-size: 14px; color: #C9D3E6; }
.capa .c-rodape-link { font-size: 14px; font-weight: 700; color: #6EE7B7; }

/* Computador mais estreito que a maquete (861 a 1247 px): mesmo desenho, sem passar da tela */
@media (min-width: 861px) and (max-width: 1247px) {
  .c-abertura { height: auto; min-height: 660px; padding-bottom: 40px; grid-template-columns: minmax(0, 1fr) 500px; gap: 40px; }
  .c-abertura h1 { font-size: 52px; }
  .c-recepcao-grade { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 48px; }
  .c-garantias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-privacidade-faixa { padding: 48px; }
  .c-nav { gap: 24px; }
}
@media (min-width: 861px) and (max-width: 1023px) {
  .c-abertura { grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; min-height: 560px; }
  .c-abertura h1 { font-size: 42px; letter-spacing: -1.2px; }
  .c-abertura p { font-size: 18px; }
  .c-abertura-botoes { flex-wrap: wrap; }
  .c-telas { height: 496px; }
  .c-celular, .c-painel { transform: scale(0.8); }
  .c-celular { transform-origin: top left; left: 8px; }
  .c-painel { transform-origin: top right; top: 320px; }
  .c-nav { gap: 18px; }
  .capa .c-nav a { font-size: 14px; }
  .c-quadro-linha { grid-template-columns: 60px 1fr auto; }
}

/* ---------- Celular (até 860 px) ---------- */
@media (max-width: 860px) {
  .so-cel { display: revert !important; }
  .so-pc { display: none !important; }
  .c-caixa { width: calc(100% - 32px); }

  .c-topo-linha { height: 68px; }
  .c-marca { gap: 9px; }
  .c-marca-simbolo { width: 28px; height: 28px; }
  .c-topo .c-marca-nome { font-size: 18px; letter-spacing: -0.4px; }
  .c-nav { display: none; }
  .c-menu-botao { width: 44px; height: 44px; border: 0; border-radius: 10px; background: #1F3057; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
  .c-menu:not([hidden]) { display: block; border-top: 1px solid #1F3057; }
  .c-menu .c-caixa { display: flex; flex-direction: column; padding: 4px 0 20px; }
  .capa .c-menu a:not(.c-botao) { color: #E3E8F2; font-size: 17px; font-weight: 600; text-decoration: none; padding: 14px 0; border-bottom: 1px solid #1F3057; }
  .capa .c-menu .c-botao { margin-top: 16px; height: 54px; padding: 0; }

  .c-abertura { height: auto; padding-top: 28px; display: flex; flex-direction: column; gap: 20px; }
  .c-abertura-texto { display: contents; }
  .c-pilula { padding: 6px 12px; font-size: 13px; }
  .c-abertura h1 { font-size: 36px; line-height: 1.08; letter-spacing: -1px; }
  .c-abertura p { font-size: 17px; }
  .c-abertura-botoes { flex-direction: column; gap: 10px; }
  .capa .c-botao { height: 54px; padding: 0; }
  .c-garantia { gap: 8px; font-size: 14px; }
  .c-garantia svg { width: 16px; height: 16px; stroke-width: 2.6; }

  .c-telas { height: 470px; margin-top: 8px; }
  .c-celular { left: 24px; width: 270px; height: 470px; border-radius: 38px 38px 0 0; padding: 12px 12px 0; }
  .c-celular-tela { border-radius: 28px 28px 0 0; }
  .c-conversa-topo { gap: 8px; padding: 13px 12px; }
  .c-avatar { width: 30px; height: 30px; border-radius: 15px; }
  .c-conversa-quem { gap: 0; }
  .c-conversa-nome { font-size: 13px; }
  .c-conversa-sub { font-size: 10px; }
  .c-mensagens { padding: 12px 10px; gap: 8px; font-size: 12px; }
  .c-balao { width: 200px; border-radius: 4px 12px 12px 12px; padding: 10px 11px; }
  .c-balao-lembrete { gap: 6px; }
  .c-balao-data { padding: 6px 8px; border-radius: 7px; }
  .c-balao-resposta { border-radius: 12px 4px 12px 12px; padding: 8px 14px; }
  /* O cartão fica rente à borda da tela, como na maquete (em 390 px: a 108 px da borda do conteúdo). */
  .c-painel { right: -16px; top: 300px; width: 266px; border-radius: 16px; padding: 14px; gap: 6px; box-shadow: 0 20px 50px rgba(4, 10, 30, 0.45); }
  .c-painel-titulo { font-size: 13px; }
  .c-painel-linha { padding: 7px 0; font-size: 12px; }
  .c-painel .c-selo { padding: 3px 8px; }

  .c-cabeca { gap: 10px; }
  .c-sobretitulo { font-size: 13px; letter-spacing: 1.4px; }
  .c-cabeca h2 { font-size: 30px; line-height: 1.15; letter-spacing: -0.7px; }
  .c-cabeca p { font-size: 16px; }

  .c-como { padding: 56px 0; gap: 24px; }
  .c-passos { display: flex; flex-direction: column; gap: 24px; }
  .c-passo { border-radius: 18px; padding: 24px; gap: 10px; }
  .c-numero { width: 44px; height: 44px; border-radius: 12px; font-size: 19px; }
  .c-passo h3 { font-size: 20px; }
  .c-passo p { font-size: 15px; }

  .c-recepcao { padding: 56px 0; }
  .c-recepcao-grade { display: flex; flex-direction: column; gap: 22px; align-items: stretch; }
  .c-recepcao-texto { gap: 10px; }
  .c-recepcao .c-cabeca h2 { font-size: 30px; }
  .c-quadro { border-radius: 18px; box-shadow: 0 16px 40px rgba(20, 33, 61, 0.12); }
  .c-quadro-topo { padding: 16px 18px; flex-direction: column; align-items: flex-start; gap: 2px; }
  .c-quadro-titulo { font-size: 16px; }
  .c-quadro-dia { font-size: 13px; }
  .c-contagens { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 16px 18px; }
  .c-contagem { padding: 12px; }
  .c-contagem-n { font-size: 24px; }
  .c-quadro-linha { display: flex; justify-content: space-between; gap: 0; padding: 12px 18px; font-size: 14px; }
  .c-quadro-linha .c-quem { display: inline; }
  .c-quadro .c-selo { padding: 4px 9px; font-size: 11px; }

  .c-nunca { padding: 56px 0; gap: 16px; }
  .c-nunca .c-cabeca { margin-bottom: 6px; }
  .c-garantias { display: flex; flex-direction: column; gap: 16px; }
  .c-garantia-cartao { border-radius: 18px; padding: 20px; flex-direction: row; gap: 14px; }
  .c-garantia-cartao svg { width: 28px; height: 28px; }
  .c-garantia-texto { display: flex; flex-direction: column; gap: 6px; }
  .c-garantia-cartao h3 { font-size: 17px; }
  .c-garantia-cartao p { line-height: 1.55; }

  .c-privacidade { padding: 0 0 56px; }
  .c-privacidade-faixa { border-radius: 22px; padding: 28px 22px; flex-direction: column; align-items: stretch; gap: 14px; }
  .c-privacidade-texto h2 { font-size: 26px; letter-spacing: -0.5px; }
  .c-privacidade-texto p { font-size: 15px; }
  .capa .c-botao-claro { height: 50px; font-size: 15px; }

  .c-contato { padding: 16px 0 64px; gap: 16px; align-items: stretch; }
  .c-contato h2 { font-size: 30px; letter-spacing: -0.7px; }
  .c-contato p { font-size: 16px; max-width: none; }
  .c-contato-botoes { flex-direction: column; gap: 16px; margin-top: 0; }
  .c-contato .c-botao { font-size: 16px; }

  .c-rodape-linha { height: auto; padding: 32px 0; flex-direction: column; align-items: flex-start; gap: 14px; }
  .c-rodape-texto { font-size: 13px; }
}