/* ══════════════════════════════════════════════════════════════
   Duetto — mesa à noite
   A base é monocromática: grafite, do mais fundo ao mais claro.
   Só três coisas têm cor, e por isso saltam: a voz dele (tangerina),
   a voz dela (cobalto) e o selo de verificado (verde).
   Os objetos de papel — polaroid, bilhete, lista — seguem brancos,
   como papel de verdade sobre uma mesa escura.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ---- base monocromática ---- */
  --fundo: #101014;
  --fundo-2: #1A1A20;
  --fundo-3: #2C2C34;
  --papel: #1B1B22;      /* superfícies da interface */
  --papel-2: #23232B;

  /* ---- papel de verdade (polaroid, bilhete, lista) ---- */
  --nota: #F7F5F0;
  --nota-2: #EDEAE2;
  --nota-linha: rgba(16, 16, 20, .12);
  --nota-tinta: #1C1A24;
  --nota-tinta-2: #5F5A68;
  --nota-tinta-3: #948E9E;

  /* ---- voz A: tangerina ---- */
  --voz-a: #FF5A1F;
  --voz-a-escuro: #FF8654;
  --voz-a-claro: #572512;
  --voz-a-veu: #2E1710;

  /* ---- voz B: cobalto ---- */
  --voz-b: #5B8CFF;
  --voz-b-escuro: #8FB0FF;
  --voz-b-claro: #1E2C54;
  --voz-b-veu: #161D33;

  /* ---- acentos ---- */
  --sol: #FFC53D;
  --sol-escuro: #FFD980;
  --sol-claro: #40331A;
  --uva: #C46BFF;
  --uva-claro: #2C1A3B;
  --verde: #2ED47A;
  --verde-claro: #14301F;

  /* ---- neutros ---- */
  --neutro: #8A8694;
  --neutro-escuro: #B2AEBC;
  --neutro-claro: #45424E;

  /* ---- tinta sobre o escuro ---- */
  --tinta: #F4F2F7;
  --tinta-2: #B6B1C0;
  --tinta-3: #837E8E;
  --tinta-4: #57525F;

  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --mao: 'Caveat', 'Bradley Hand', 'Segoe Print', cursive;
  --sans: 'Karla', 'Segoe UI', system-ui, sans-serif;

  --raio: 18px;
  --raio-p: 12px;
  --sombra: 0 18px 40px -16px rgba(0, 0, 0, .7), 0 2px 8px -2px rgba(0, 0, 0, .5);
  --sombra-p: 0 10px 22px -12px rgba(0, 0, 0, .65);
  --nav-h: 66px;
  --largura: 600px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  min-height: 100dvh;
}
body::before {
  /* grão de papel */
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .2 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--voz-b); outline-offset: 2px; }
input, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
svg { display: block; }
h1, h2, h3, h4, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
[hidden] { display: none !important; }

#app { max-width: var(--largura); margin: 0 auto; position: relative; min-height: 100dvh; }
@media (min-width: 640px) {
  #app { box-shadow: 0 0 0 1px var(--fundo-3), 0 0 80px -20px rgba(59, 46, 37, .25); background: var(--fundo); }
}

/* ── ícones (svg de traço) ──
   Todo ícone da interface usa viewBox 0 0 24 24; os pinos do mapa usam outro viewBox
   e continuam com o próprio preenchimento. Assim o traço vale também fora de botões
   (busca, ajustes, links), sem vazar para o mapa. */
svg[viewBox="0 0 24 24"] {
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  flex: none;
}
button svg, .icone svg, svg.icone { width: 22px; height: 22px; }

/* ── tipografia ── */
.titulo-serif { font: 500 30px/1.15 var(--serif); color: var(--voz-a); letter-spacing: -.005em; }
.rotulo {
  font: 700 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--voz-a);
  display: inline-flex; flex-direction: column; gap: 6px; margin-bottom: 10px;
}
.rotulo::after { content: ''; width: 46px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--voz-b), var(--voz-a)); }
.suave { color: var(--tinta-2); font-size: 14px; }
.miudo { color: var(--tinta-3); font-size: 12px; }
.titulo-mao { font: 600 27px/1.1 var(--mao); color: var(--voz-a); }
.centro { text-align: center; }

/* ── animações ── */
@keyframes surgir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes subir { from { transform: translate(-50%, 40px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes deslizar { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
/* a pagina de detalhe e fixa e centralizada com translateX(-50%): a animacao precisa
   carregar esse -50% em todos os quadros, senao o fim da animacao descentraliza a tela. */
@keyframes deslizar-pagina { from { transform: translateX(-50%) translateX(40px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
@keyframes pulsar { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes cair { 0% { transform: translateY(-70px) scale(.9); opacity: 0; } 60% { transform: translateY(6px) scale(1.02); opacity: 1; } 100% { transform: none; } }
@keyframes pular { 0%, 100% { transform: none; } 40% { transform: translateY(-14px) scale(1.06); } }
@keyframes radar { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes quebrar { 0% { transform: none; } 35% { transform: rotate(-14deg) scale(1.1); } 100% { transform: translate(18px, 60px) rotate(38deg) scale(.5); opacity: 0; } }
@keyframes carimbar { 0% { transform: scale(2.2) rotate(-12deg); opacity: 0; } 60% { transform: scale(.94) rotate(-6deg); opacity: 1; } 100% { transform: scale(1) rotate(-6deg); } }
@keyframes escrever { from { width: 0; } to { width: 100%; } }
.surgir { animation: surgir .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 65ms); }
.sem-anim .surgir { animation: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ── carregando ── */
.carregando { position: fixed; inset: 0; z-index: 300; display: grid; place-content: center; justify-items: center; gap: 16px; background: var(--fundo); color: var(--tinta-2); font-style: italic; font-family: var(--serif); }
.selo-carregando { width: 66px; height: 66px; border-radius: 50%; background: var(--voz-b); color: var(--papel); font: 700 30px var(--serif); display: grid; place-items: center; animation: pulsar 1.3s ease-in-out infinite; box-shadow: 0 10px 24px -12px rgba(179, 136, 44, .8); }

/* ── telas ── */
.tela { min-height: 100dvh; padding: 0 20px calc(var(--nav-h) + var(--safe-b) + 24px); }
.tela-cabecalho { padding-top: max(28px, env(safe-area-inset-top)); padding-bottom: 18px; }

/* ═══════════════════ EXPLORAR (mapa) ═══════════════════ */
/* isolation cria um contexto de empilhamento proprio: os z-index altos do mapa
   (controles do Leaflet, botoes flutuantes) ficam presos aqui dentro e nunca
   passam por cima da folha, da pagina de detalhe ou do toast. */
.tela-explorar { position: relative; height: 100dvh; padding: 0; overflow: hidden; isolation: isolate; }
.mapa { position: absolute; inset: 0; background: var(--fundo-2); z-index: 0; }
/* O mapa já nasce escuro agora; só um leve aquecimento para casar com a paleta. */
/* A fonte do mapa nasce clara. A inversão a traz para o escuro da interface;
   o grayscale quase total evita que as cores do mapa briguem com a tangerina e
   o cobalto dos pinos, que precisam ser as únicas cores fortes da tela. */
.mapa .leaflet-tile-pane { filter: invert(1) grayscale(.92) brightness(1.05) contrast(1.15); }
.mapa .leaflet-container { background: var(--fundo); font-family: var(--sans); }
.mapa::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1001;
  box-shadow: inset 0 0 150px rgba(0, 0, 0, .6), inset 0 0 50px rgba(0, 0, 0, .35);
}
.leaflet-control-attribution { background: rgba(16, 16, 20, .72) !important; color: var(--tinta-3) !important; font-size: 9px !important; font-family: var(--sans); padding: 2px 6px !important; margin-bottom: calc(var(--nav-h) + var(--safe-b) - 2px) !important; }
.leaflet-control-attribution a { color: var(--neutro) !important; }

.mapa-cabecalho {
  position: absolute; left: 0; right: 0; top: 0; z-index: 1002; pointer-events: none;
  padding: max(22px, env(safe-area-inset-top)) 22px 40px; text-align: center;
  background: linear-gradient(180deg, var(--fundo) 0%, rgba(16, 16, 20, .88) 45%, rgba(16, 16, 20, 0) 100%);
}
.mapa-cabecalho .titulo-serif { font-size: 34px; }
.mapa-sub { font-size: 13px; color: var(--tinta-2); margin-top: 2px; display: inline-block; position: relative; padding-bottom: 7px; }
.mapa-sub::after {
  content: ''; position: absolute; left: 50%; bottom: 0; width: 74px; height: 4px; transform: translateX(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 4'%3E%3Cpath d='M1 2.5c14-2 28-2 42-1.5M46 2c9 0 18 0 27 .5' fill='none' stroke='%23F04E23' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.mapa-botoes { position: absolute; right: 18px; bottom: calc(var(--nav-h) + var(--safe-b) + 22px); z-index: 1002; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.botao-redondo {
  width: 48px; height: 48px; border-radius: 50%; background: var(--papel); color: var(--neutro-escuro);
  display: grid; place-items: center; box-shadow: var(--sombra); border: 1px solid var(--fundo-3);
  transition: transform .15s, box-shadow .15s;
}
.botao-redondo:active { transform: scale(.94); }
.botao-redondo.primario { width: 60px; height: 60px; background: var(--voz-a); color: var(--papel); border: 0; box-shadow: 0 14px 30px -12px rgba(154, 81, 56, .9); }
.botao-redondo.primario svg { width: 28px; height: 28px; stroke-width: 2; }

.mapa-legenda {
  position: absolute; left: 18px; bottom: calc(var(--nav-h) + var(--safe-b) + 22px); z-index: 1002;
  display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--tinta-2);
  background: rgba(16, 16, 20, .78); padding: 8px 12px; border-radius: 10px; backdrop-filter: blur(4px);
}
.mapa-legenda span { display: flex; align-items: center; gap: 7px; }
.ponto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ponto.fomos { background: var(--voz-a); box-shadow: 0 0 0 1.5px var(--voz-a-escuro); }
.ponto.quero { background: var(--papel); box-shadow: 0 0 0 2px var(--voz-b); }

.dica-mapa {
  position: absolute; left: 50%; top: 122px; transform: translateX(-50%); z-index: 1003;
  background: var(--tinta); color: var(--papel); padding: 10px 14px 10px 16px; border-radius: 14px; font-size: 13px;
  display: flex; gap: 12px; align-items: center; box-shadow: var(--sombra); white-space: nowrap; animation: surgir .3s both;
}
.dica-mapa button { color: var(--voz-b-claro); text-decoration: underline; font-size: 13px; }
.mapa.escolhendo { cursor: crosshair; }

.lembranca-faixa {
  position: absolute; left: 18px; right: 18px; top: 116px; z-index: 1002; text-align: left;
  background: var(--papel); border-radius: 14px; padding: 12px 14px 12px 16px; box-shadow: var(--sombra);
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; animation: surgir .5s .3s both;
  border-left: 4px solid var(--voz-b);
}
.lembranca-faixa b { font: 500 15px var(--serif); color: var(--tinta); display: block; }
.lembranca-faixa small { color: var(--tinta-2); font-size: 12px; }
.lembranca-faixa .selo-mini { width: 34px; height: 34px; border-radius: 50%; background: var(--voz-b-claro); color: var(--voz-b-escuro); display: grid; place-items: center; font: 700 15px var(--serif); }
.lembranca-faixa svg { color: var(--tinta-3); width: 18px; height: 18px; }

/* pinos */
.pino { filter: drop-shadow(0 6px 5px rgba(59, 46, 37, .35)); transform-origin: 50% 100%; }
.pino svg { width: 100%; height: 100%; overflow: visible; }
.pino.novo { animation: cair .7s cubic-bezier(.2, .9, .3, 1.2) both; }
.pino.destaque { animation: pular .6s ease-in-out; }
.pino-eu { position: relative; width: 20px; height: 20px; }
.pino-eu::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--voz-a); opacity: .35; animation: radar 1.8s ease-out infinite; }
.pino-eu::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--voz-a); border: 2px solid var(--papel); box-shadow: 0 1px 4px rgba(59, 46, 37, .4); }
.pino-temp { filter: drop-shadow(0 8px 6px rgba(59, 46, 37, .4)); animation: pular 1.2s ease-in-out infinite; }

/* ═══════════════════ NAV ═══════════════════ */
.nav {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: var(--largura); z-index: 50;
  height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: rgba(16, 16, 20, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--fundo-3);
}
.nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--tinta-3); font: 600 11px/1 var(--sans); letter-spacing: .04em; position: relative; transition: color .2s; }
.nav-item svg { width: 24px; height: 24px; transition: transform .2s; }
.nav-item.ativo { color: var(--voz-a); }
.nav-item::before {
  content: ''; position: absolute; inset: 4px 14% auto; height: 38px; border-radius: 12px;
  background: var(--voz-a-veu); opacity: 0; transform: scale(.8); transition: opacity .2s, transform .2s;
}
.nav-item.ativo::before { opacity: 1; transform: none; }
.nav-item svg, .nav-item span { position: relative; }
.nav-item.ativo svg { transform: translateY(-1px); }
.nav-item.ativo span::after {
  content: ''; display: block; height: 4px; margin-top: 3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 4'%3E%3Cpath d='M1 2.5C10 1 20 1 39 2' fill='none' stroke='%23FFB400' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ═══════════════════ DIÁRIO ═══════════════════ */
.filtros { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.filtros::-webkit-scrollbar { display: none; }
.chip {
  border: 1.5px solid var(--fundo-3); background: var(--papel); border-radius: 999px; padding: 8px 15px;
  font: 500 13px var(--sans); color: var(--tinta-2); white-space: nowrap; transition: all .15s;
}
.chip.ativo { background: var(--voz-a); color: #fff; border-color: var(--voz-a); box-shadow: 0 8px 16px -8px var(--voz-a); }
.busca { position: relative; margin: 14px 0 20px; }
.busca svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--tinta-3); pointer-events: none; }
.busca input { width: 100%; border: 1.5px solid var(--fundo-3); background: var(--papel); border-radius: 14px; padding: 12px 14px 12px 42px; font-size: 15px; outline: none; -webkit-appearance: none; appearance: none; }
.busca input:focus { border-color: var(--voz-b); }

.lista-diario { display: flex; flex-direction: column; gap: 16px; }
.cartao-lugar {
  display: grid; grid-template-columns: 112px 1fr; gap: 16px; padding: 14px 16px 14px 14px; text-align: left; width: 100%;
  background: var(--papel); border-radius: var(--raio); box-shadow: var(--sombra-p); position: relative; overflow: visible;
  transition: transform .15s, box-shadow .2s; border: 1px solid rgba(225, 212, 190, .6);
}
.cartao-lugar:active { transform: scale(.985); }
.cartao-lugar.quero { background: repeating-linear-gradient(-45deg, var(--papel) 0 14px, var(--papel-2) 14px 15px); }
.cartao-corpo { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.cartao-corpo h3 { font: 500 19px/1.2 var(--serif); color: var(--tinta); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cartao-meta { font: 600 10.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); display: flex; align-items: center; gap: 5px; }
.cartao-meta.ok { color: var(--verde); }
.cartao-meta svg { width: 13px; height: 13px; }
.cartao-frase { font: 500 18px/1.15 var(--mao); color: var(--neutro-escuro); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cartao-frase.suave { color: var(--tinta-3); font-style: italic; }
.notas-mini { display: flex; gap: 14px; align-items: baseline; margin-top: auto; padding-top: 6px; }
.nota-mini { font: 600 26px/1 var(--mao); display: inline-flex; align-items: baseline; gap: 4px; }
.nota-mini::before { content: attr(data-rot); font: 600 9px var(--sans); letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.nota-mini.ele { color: var(--voz-a); }
.nota-mini.ela { color: var(--voz-b-escuro); }
.vezes { margin-left: auto; font: 600 11px var(--sans); color: var(--tinta-3); background: var(--fundo-2); padding: 3px 8px; border-radius: 8px; }

/* polaroid */
.polaroid {
  background: var(--nota); padding: 6px 6px 20px; position: relative;
  box-shadow: 0 10px 20px -12px rgba(59, 46, 37, .55), 0 1px 2px rgba(59, 46, 37, .1);
  transform: rotate(var(--rot, -2deg)); align-self: start;
}
.polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: saturate(.9) contrast(.98) sepia(.1); background: var(--fundo-2); }
.polaroid .sem-foto {
  width: 100%; aspect-ratio: 1; display: grid; place-items: center; color: var(--nota-tinta-3);
  background:
    repeating-linear-gradient(0deg, transparent 0 11px, var(--nota-linha) 11px 12px),
    repeating-linear-gradient(90deg, transparent 0 11px, var(--nota-linha) 11px 12px),
    var(--nota-2);
}
.polaroid .sem-foto svg { width: 36px; height: 36px; stroke-width: 1.3; }
.fita {
  position: absolute; top: -9px; left: 50%; width: 58px; height: 19px; transform: translateX(-50%) rotate(-3deg);
  background: rgba(230, 194, 179, .78); mix-blend-mode: multiply; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); z-index: 2;
  clip-path: polygon(2% 0, 98% 4%, 100% 100%, 0 96%);
}
.fita.sol { background: rgba(240, 224, 170, .85); }

.vazio { text-align: center; padding: 56px 24px; color: var(--tinta-2); }
.vazio .ilustra { width: 92px; height: 92px; margin: 0 auto 18px; border-radius: 50%; background: var(--papel); display: grid; place-items: center; color: var(--voz-b-escuro); box-shadow: var(--sombra-p); }
.vazio .ilustra svg { width: 40px; height: 40px; stroke-width: 1.4; }
.vazio h3 { font: 500 22px var(--serif); color: var(--tinta); margin-bottom: 6px; }
.vazio p { font-size: 14px; max-width: 280px; margin: 0 auto 18px; }

/* ═══════════════════ PÁGINA (detalhe) ═══════════════════ */
.pagina {
  position: fixed; inset: 0; z-index: 60; background: var(--fundo); overflow-y: auto; overscroll-behavior: contain;
  left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--largura);
  animation: deslizar-pagina .34s cubic-bezier(.2, .8, .2, 1) both;
}
.pagina-topo {
  position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center;
  padding: max(10px, env(safe-area-inset-top)) 12px 10px; background: linear-gradient(var(--fundo) 55%, rgba(244, 237, 225, 0));
}
.pagina-topo-acoes { display: flex; gap: 4px; }
.btn-icone { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--neutro-escuro); transition: background .15s; }
.btn-icone:hover { background: rgba(140, 110, 82, .1); }
.btn-icone.perigo { color: var(--voz-a-escuro); }

.detalhe { padding: 0 20px calc(48px + var(--safe-b)); }
.detalhe-foto { width: min(76%, 290px); margin: 6px auto 22px; --rot: -1.5deg; cursor: pointer; }
.detalhe-foto .fita { width: 72px; height: 22px; }
.detalhe-foto .sem-foto { flex-direction: column; gap: 6px; font: 500 16px var(--mao); color: var(--neutro); }
.detalhe-nome { font: 500 34px/1.1 var(--serif); color: var(--voz-a); text-align: center; letter-spacing: -.01em; }
.verificado { text-align: center; font: 600 10.5px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-2); margin-top: 8px; display: flex; justify-content: center; align-items: center; gap: 6px; }
.verificado.ok { color: var(--verde); }
.verificado svg { width: 14px; height: 14px; }
.risco-duplo { width: 84px; height: 7px; margin: 8px auto 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 7'%3E%3Cpath d='M1 2.5C20 1 40 1 60 2M4 5.5c26-1 52-1 78 0' fill='none' stroke='%23FFB400' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.detalhe-categoria { text-align: center; font-size: 12px; color: var(--tinta-3); margin-top: 8px; }

.cartoes-aval { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 26px 0 18px; }
.cartao-aval {
  position: relative; border: 0; border-radius: 16px; padding: 26px 12px 30px; min-height: 182px;
  text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 6px;
  transition: transform .15s, box-shadow .2s; box-shadow: var(--sombra-p);
}
.cartao-aval::after {
  /* faixa de cor no pe do cartao: a assinatura da voz */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: currentColor; border-radius: 0 0 16px 16px;
}
.cartao-aval:active { transform: scale(.98); }
.cartao-aval.ele { background: var(--voz-a-veu); color: var(--voz-a); }
.cartao-aval.ela { background: var(--voz-b-veu); color: var(--voz-b); }
.cartao-aval.minha { box-shadow: 0 0 0 3px currentColor, var(--sombra-p); }
.etiqueta {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 4px 13px; border-radius: 8px;
  font: 700 11px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis;
}
.cartao-aval.ele .etiqueta { background: var(--voz-a); color: #fff; }
.cartao-aval.ela .etiqueta { background: var(--voz-b); color: #fff; }
.manuscrito { font: 500 20px/1.15 var(--mao); color: inherit; word-break: break-word; flex: 1; display: flex; align-items: center; }
.vazio-mao { font-style: normal; opacity: .8; font-size: 17px; }
.nota-grande { font: 600 76px/.95 var(--mao); letter-spacing: -.02em; }
.nota-grande .nota-vazia { opacity: .35; }
.coracao-canto { position: absolute; right: 11px; bottom: 9px; opacity: .85; }
.coracao-canto svg { width: 14px; height: 14px; stroke-width: 1.5; }
.cartao-aval.ele .nota-grande { color: var(--voz-a); }
.cartao-aval.ela .nota-grande { color: var(--voz-b); }

.acoes-detalhe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 22px; }
.acoes-detalhe .botao { padding: 14px 10px; font-size: 14.5px; gap: 7px; white-space: nowrap; }

/* papel rasgado */
.papel-rasgado-wrap { filter: drop-shadow(0 10px 14px rgba(59, 46, 37, .18)); margin: 10px -2px 22px; }
.papel-rasgado {
  background: var(--nota); color: var(--nota-tinta); padding: 24px 20px 22px;
  clip-path: polygon(0% 6px, 3% 1px, 7% 5px, 12% 2px, 18% 7px, 24% 1px, 30% 5px, 37% 2px, 44% 7px, 51% 1px, 58% 5px, 65% 2px, 72% 7px, 79% 1px, 86% 5px, 93% 2px, 100% 6px,
    100% calc(100% - 5px), 96% 100%, 90% calc(100% - 6px), 83% calc(100% - 1px), 76% calc(100% - 7px), 69% calc(100% - 2px), 61% calc(100% - 6px), 53% calc(100% - 1px), 45% calc(100% - 7px), 37% calc(100% - 2px), 29% calc(100% - 6px), 21% calc(100% - 1px), 13% calc(100% - 7px), 6% calc(100% - 2px), 0% calc(100% - 5px));
  background-image: repeating-linear-gradient(transparent 0 29px, var(--nota-linha) 29px 30px);
  background-position: 0 14px;
}
.papel-rasgado .titulo-mao { margin-bottom: 10px; }
.lista-check li { display: grid; grid-template-columns: 26px 1fr 28px; align-items: center; gap: 8px; min-height: 30px; font: 500 20px/30px var(--mao); color: var(--nota-tinta); }
.lista-check li .check { width: 26px; height: 26px; color: var(--voz-a); display: grid; place-items: center; transition: transform .15s; }
.lista-check li .check svg { width: 16px; height: 16px; fill: none; }
.lista-check li.feito { color: var(--nota-tinta-3); text-decoration: line-through; text-decoration-color: var(--voz-a); }
.lista-check li.feito .check svg { fill: var(--voz-a); }
.lista-check li .x { width: 28px; height: 28px; color: var(--nota-tinta-3); display: grid; place-items: center; opacity: .7; }
.lista-check li .x svg { width: 14px; height: 14px; }
.form-inline { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 10px; }
.form-inline input { border: 0; border-bottom: 1.5px dashed var(--nota-tinta-3); background: transparent; padding: 6px 2px; font: 500 20px/1.2 var(--mao); color: var(--nota-tinta); outline: none; min-width: 0; }
.form-inline input::placeholder { color: var(--nota-tinta-3); }

.fotos-tira { display: flex; gap: 10px; overflow-x: auto; padding: 8px 2px 14px; scrollbar-width: none; margin-bottom: 10px; }
.fotos-tira::-webkit-scrollbar { display: none; }
.fotos-tira figure { margin: 0; flex: none; width: 84px; height: 84px; background: var(--nota); padding: 4px 4px 10px; box-shadow: var(--sombra-p); cursor: pointer; transform: rotate(var(--rot, 0deg)); position: relative; }
.fotos-tira figure img { width: 100%; height: 100%; object-fit: cover; }
.fotos-tira figure.capa::after { content: 'capa'; position: absolute; left: 50%; bottom: -3px; transform: translateX(-50%); font: 600 8px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--voz-b-escuro); }
.add-foto-mini { flex: none; width: 84px; height: 84px; border: 1.5px dashed var(--neutro-claro); border-radius: 10px; color: var(--neutro); display: grid; place-items: center; }

.endereco { display: flex; gap: 8px; align-items: flex-start; justify-content: center; text-align: center; color: var(--tinta-2); font-size: 13.5px; line-height: 1.4; margin-top: 8px; }
.endereco svg { width: 16px; height: 16px; color: var(--voz-a); margin-top: 2px; }
.link-suave { display: block; margin: 8px auto 0; font: 600 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--neutro); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--neutro-claro); }

.visitas { margin-top: 28px; }
.visitas h4 { font: 500 16px var(--serif); color: var(--tinta-2); margin-bottom: 8px; }
.visitas li { display: grid; grid-template-columns: 20px 1fr auto 28px; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px dashed var(--fundo-3); font-size: 14px; color: var(--tinta); }
.visitas li svg { width: 16px; height: 16px; color: var(--tinta-3); }
.visitas li.ok svg { color: var(--verde); }
.visitas li small { color: var(--tinta-3); font-size: 12px; }
.visitas li .x { width: 28px; height: 28px; display: grid; place-items: center; color: var(--tinta-4); }
.visitas li .x svg { width: 13px; height: 13px; color: inherit; }

/* ═══════════════════ FOLHA (bottom sheet) ═══════════════════ */
.folha-fundo { position: fixed; inset: 0; z-index: 80; background: rgba(59, 46, 37, .42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: aparecer .2s both; }
.folha {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: var(--largura); max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--papel); border-radius: 24px 24px 0 0; padding: 10px 20px calc(24px + var(--safe-b)); z-index: 90;
  box-shadow: 0 -12px 40px -22px rgba(59, 46, 37, .55); animation: subir .34s cubic-bezier(.2, .8, .2, 1) both;
}
.folha::before { content: ''; display: block; width: 42px; height: 4px; border-radius: 4px; background: var(--fundo-3); margin: 0 auto 16px; }
.folha-fechar {
  position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: var(--tinta-3); background: var(--fundo-2); z-index: 3; transition: color .15s, background .15s;
}
.folha-fechar svg { width: 15px; height: 15px; stroke-width: 2; }
.folha-fechar:hover { color: var(--tinta); background: var(--fundo-3); }
/* o titulo nao pode passar por baixo do botao de fechar */
.folha-titulo, .folha-rotulo { padding-right: 38px; }
.folha-titulo { font: 500 23px/1.2 var(--serif); color: var(--tinta); margin-bottom: 4px; }
.folha-titulo + .suave { margin-bottom: 16px; }
.folha-rotulo { font: 700 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--voz-a); margin-bottom: 8px; }

.campo { display: block; margin-bottom: 14px; }
.campo > span { display: block; font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 7px; }
.campo input, .campo textarea, .campo select {
  width: 100%; border: 1.5px solid var(--fundo-3); background: var(--papel-2); border-radius: 12px; padding: 12px 14px;
  font: 16px/1.4 var(--sans); color: var(--tinta); outline: none; transition: border-color .15s; -webkit-appearance: none; appearance: none;
}
.campo input:focus, .campo textarea:focus { border-color: var(--voz-b); background: var(--papel); }
.campo textarea { resize: vertical; min-height: 90px; }
.campo textarea.manuscrito-input {
  font: 500 23px/30px var(--mao); min-height: 128px; padding: 8px 14px 6px;
  background-image: repeating-linear-gradient(transparent 0 29px, var(--fundo-3) 29px 30px); background-attachment: local; background-position: 0 6px;
}
.campo input[type="date"] { min-height: 48px; }
.dica-campo { font-size: 12px; color: var(--tinta-3); margin-top: 6px; }

.botao {
  appearance: none; border: 0; border-radius: 14px; padding: 14px 18px; width: 100%;
  font: 600 15px/1.2 var(--sans); letter-spacing: .01em; background: var(--voz-a); color: var(--papel);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .12s, filter .15s, background .15s; box-shadow: 0 10px 22px -10px var(--voz-a);
}
.botao svg { width: 18px; height: 18px; }
.botao:hover { filter: brightness(1.05); }
.botao:active { transform: scale(.98); }
.botao:disabled { opacity: .55; pointer-events: none; }
.botao.secundario { background: transparent; color: var(--neutro-escuro); border: 1.5px solid var(--neutro-claro); box-shadow: none; }
.botao.perigo { background: transparent; color: var(--voz-a-escuro); border: 1.5px solid var(--voz-a-claro); box-shadow: none; }
.botao.perigo.cheio { background: var(--voz-a-escuro); color: var(--papel); border: 0; }
.botao.sol { background: var(--sol); color: var(--tinta); box-shadow: 0 10px 22px -10px var(--sol-escuro); }
.botao.voz-b { background: var(--voz-b); color: #fff; box-shadow: 0 10px 22px -10px var(--voz-b); }
.botao.pequeno { width: auto; padding: 9px 14px; font-size: 13px; border-radius: 11px; }
.botao.pequeno svg { width: 16px; height: 16px; }
.linha-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.linha-botoes.um { grid-template-columns: 1fr; }
.pilha { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcoes .chip.ativo { background: var(--tinta); border-color: var(--tinta); box-shadow: none; }
.segmentado { display: grid; grid-template-columns: 1fr 1fr; background: var(--fundo-2); border-radius: 12px; padding: 4px; gap: 4px; }
.segmentado button { padding: 10px 8px; border-radius: 9px; font: 600 13px var(--sans); color: var(--tinta-2); transition: all .15s; }
.segmentado button.ativo { background: var(--voz-a); color: #fff; box-shadow: 0 4px 12px -6px var(--voz-a); }

.notas-escolha { display: grid; grid-template-columns: repeat(11, 1fr); gap: 5px; }
.notas-escolha button { aspect-ratio: 1; border-radius: 9px; border: 1.5px solid var(--fundo-3); background: var(--papel-2); font: 600 19px var(--mao); color: var(--tinta-2); transition: all .12s; }
.notas-escolha button.ativo { background: var(--voz-a); color: var(--papel); border-color: var(--voz-a); transform: scale(1.1); }
.notas-escolha.ela button.ativo { background: var(--voz-b); color: var(--tinta); border-color: var(--voz-b); }
.nota-previa { text-align: center; font: 600 64px/1 var(--mao); color: var(--voz-a); margin: 6px 0 2px; min-height: 64px; }
.nota-previa.ela { color: var(--voz-b-escuro); }

.resultados { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; min-height: 40px; }
.resultado { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 12px; background: var(--papel-2); border: 1px solid transparent; transition: border-color .15s; width: 100%; }
.resultado:hover { border-color: var(--voz-b); }
.resultado.de-link { border-color: var(--verde); background: var(--verde-claro); }
.resultado svg { width: 20px; height: 20px; color: var(--voz-a); margin: 0 auto; }
.resultado b { display: block; font: 600 15px var(--sans); color: var(--tinta); }
.resultado small { color: var(--tinta-2); font-size: 12.5px; line-height: 1.3; display: block; }
.resultado small.perto { color: var(--voz-b-escuro); font-weight: 600; font-size: 11.5px; margin-top: 2px; }
.resultado-carregando, .resultado-vazio { text-align: center; font-size: 13px; color: var(--tinta-3); padding: 12px; }
.ou { text-align: center; font: italic 14px var(--serif); color: var(--tinta-3); margin: 14px 0; position: relative; }
.ou::before, .ou::after { content: ''; position: absolute; top: 50%; width: calc(50% - 26px); height: 1px; background: var(--fundo-3); }
.ou::before { left: 0; } .ou::after { right: 0; }

.radar { width: 70px; height: 70px; margin: 8px auto 18px; position: relative; }
.radar::before, .radar::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--voz-a); animation: radar 1.6s ease-out infinite; }
.radar::after { animation-delay: .8s; }
.radar i { position: absolute; inset: 26px; border-radius: 50%; background: var(--voz-a); }

.carimbo {
  width: 120px; height: 120px; margin: 4px auto 14px; border-radius: 50%; border: 3px solid var(--verde); color: var(--verde);
  display: grid; place-content: center; justify-items: center; gap: 2px; font: 700 11px var(--sans); letter-spacing: .18em; text-transform: uppercase;
  transform: rotate(-6deg); animation: carimbar .6s cubic-bezier(.2, .9, .3, 1.2) both; position: relative; mix-blend-mode: multiply;
}
.carimbo::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; border: 1px solid var(--verde); opacity: .6; }
.carimbo svg { width: 34px; height: 34px; stroke-width: 2.2; }
.carimbo b { font: 700 13px var(--sans); }

.previa-foto { width: 100%; max-height: 52dvh; object-fit: contain; border-radius: 12px; background: var(--fundo-2); margin-bottom: 14px; }

/* ═══════════════════ TOAST ═══════════════════ */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + var(--safe-b) + 16px); transform: translateX(-50%); z-index: 120;
  background: var(--tinta); color: var(--papel); padding: 12px 18px; border-radius: 14px; font-size: 14px; max-width: min(92vw, 420px);
  display: flex; gap: 10px; align-items: center; box-shadow: var(--sombra); animation: subir .3s both;
}
.toast svg { width: 18px; height: 18px; color: var(--voz-b); }
.toast.erro { background: var(--voz-a-escuro); }
/* com uma folha aberta o rodape esta ocupado: o aviso sobe pro topo pra nao cobrir os botoes */
body:has(#folha:not([hidden])) .toast { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 14px); animation: cair .35s cubic-bezier(.2,.9,.3,1.1) both; }
.toast.erro svg { color: var(--papel); }

/* ═══════════════════ NÓS ═══════════════════ */
.nos-capa { text-align: center; padding: max(44px, calc(env(safe-area-inset-top) + 28px)) 8px 26px; }
.nos-selo { width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 50%; background: var(--voz-b); color: var(--papel); font: 700 26px var(--serif); display: grid; place-items: center; box-shadow: 0 10px 22px -12px rgba(179, 136, 44, .9); }
.nos-nomes { font: 500 32px/1.15 var(--serif); color: var(--tinta); }
.nos-nomes .e { font: 500 40px/1 var(--mao); color: var(--voz-b-escuro); margin: 0 8px; }
.nos-desde { font: italic 15px var(--serif); color: var(--tinta-2); margin-top: 8px; }
.nos-desde b { font: 600 15px var(--sans); color: var(--voz-a); }

.estatisticas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tile { background: var(--papel); border-radius: 16px; padding: 16px 16px 14px; box-shadow: var(--sombra-p); position: relative; overflow: hidden; }
.tile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--cor, var(--voz-a)); }
.tile.a { --cor: var(--voz-a); background: var(--voz-a-veu); }
.tile.b { --cor: var(--voz-b); background: var(--voz-b-veu); }
.tile.c { --cor: var(--sol); background: var(--sol-claro); }
.tile.d { --cor: var(--uva); background: var(--uva-claro); }
.tile.largo { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.tile .valor { font: 600 44px/1 var(--mao); color: var(--voz-a); }
.tile .valor.voz-b { color: var(--voz-b); }
.tile .valor.sol { color: var(--sol-escuro); }
.tile .valor.uva { color: var(--uva); }
.tile .rot { font: 700 10.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); margin-top: 4px; }
.tile .obs { font-size: 12px; color: var(--tinta-2); margin-top: 6px; }
.tile .obs b { font-family: var(--serif); font-weight: 500; color: var(--tinta); }
.medidor { height: 6px; border-radius: 6px; background: var(--fundo-2); overflow: hidden; margin-top: 8px; }
.medidor i { display: block; height: 100%; width: var(--p, 0%); background: linear-gradient(90deg, var(--voz-b), var(--voz-a)); border-radius: 6px; transition: width .8s cubic-bezier(.2, .8, .2, 1); }

.secao { padding-top: 30px; }
.secao-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.secao-titulo h2 { font: 500 22px/1.2 var(--serif); color: var(--tinta); }
.secao-titulo small { font-size: 12px; color: var(--tinta-3); }
.secao-titulo button { font: 600 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--voz-a); }

.lembrancas { display: flex; flex-direction: column; gap: 10px; }
.lembranca { display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center; padding: 12px 14px; background: var(--papel); border-radius: 14px; box-shadow: var(--sombra-p); text-align: left; width: 100%; border-left: 4px solid var(--fundo-3); }
.lembranca.hoje { border-left-color: var(--voz-b); }
.lembranca .dia { width: 46px; height: 46px; border-radius: 12px; background: var(--fundo-2); display: grid; place-content: center; text-align: center; color: var(--neutro-escuro); }
.lembranca .dia b { font: 600 20px/1 var(--serif); }
.lembranca .dia small { font: 700 8.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); }
.lembranca.hoje .dia { background: var(--voz-b-claro); color: var(--voz-b-escuro); }
.lembranca p { font: 500 15px/1.3 var(--serif); color: var(--tinta); }
.lembranca small { font-size: 12px; color: var(--tinta-2); }

.favoritos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.favorito { background: var(--papel); border-radius: 14px; padding: 14px; box-shadow: var(--sombra-p); text-align: left; width: 100%; position: relative; border-top: 3px solid; }
.favorito.ele { border-color: var(--voz-a); } .favorito.ela { border-color: var(--voz-b); }
.favorito .rot { font: 700 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); }
.favorito b { display: block; font: 500 16px/1.25 var(--serif); color: var(--tinta); margin: 6px 0 4px; }
.favorito .n { font: 600 30px/1 var(--mao); }
.favorito.ele .n { color: var(--voz-a); } .favorito.ela .n { color: var(--voz-b-escuro); }
.favorito i { font: italic 12px var(--serif); color: var(--tinta-3); }

/* bilhetes */
.bilhetes { display: flex; flex-direction: column; gap: 14px; }
.envelope {
  position: relative; background: var(--nota); color: var(--nota-tinta); border-radius: 12px; padding: 26px 22px 24px;
  box-shadow: var(--sombra); text-align: left; width: 100%; overflow: hidden; border: 0;
}
.envelope::before {
  /* aba do envelope */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 58%;
  background: linear-gradient(var(--nota-2), #DFDBD1); clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-bottom: 1px solid rgba(16,16,20,.1); opacity: 1;
}
.envelope .para { position: relative; font: 500 21px/1.2 var(--mao); color: var(--nota-tinta); }
.envelope .de { position: relative; font-size: 12px; color: var(--nota-tinta-2); margin-top: 6px; }
.envelope .toque { position: relative; font: 600 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--voz-a); margin-top: 16px; }
.selo-cera {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; z-index: 2;
  border-radius: 46% 54% 49% 51% / 53% 47% 53% 47%;
  background: radial-gradient(circle at 36% 32%, #FF9166 0%, #F04E23 40%, #C6320D 72%, #8F2206 100%);
  box-shadow: 0 4px 8px rgba(59, 46, 37, .35), inset 0 0 0 3px rgba(255, 255, 255, .10), inset 0 -3px 6px rgba(0, 0, 0, .15);
  display: grid; place-items: center; font: 700 22px var(--serif); color: rgba(255, 240, 220, .85); transform-origin: center;
}
.selo-cera::before { content: ''; position: absolute; inset: 7px; border-radius: inherit; border: 1px solid rgba(255, 240, 220, .3); }
.envelope.abrindo .selo-cera { animation: quebrar .75s cubic-bezier(.4, 0, .6, 1) forwards; }
.envelope.abrindo::before { transition: transform .6s .35s cubic-bezier(.2, .8, .2, 1); transform: translateY(-100%); }

.bilhete-aberto {
  position: relative; background: var(--nota); color: var(--nota-tinta); padding: 26px 22px 20px; border-radius: 4px;
  box-shadow: var(--sombra); text-align: left; width: 100%;
  background-image: repeating-linear-gradient(transparent 0 31px, var(--nota-linha) 31px 32px); background-position: 0 24px;
}
.bilhete-aberto .fita { left: 28px; transform: rotate(-4deg); }
.bilhete-aberto p { font: 500 24px/32px var(--mao); color: var(--nota-tinta); white-space: pre-wrap; word-break: break-word; }
.bilhete-aberto .rodape { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: 12px; color: var(--nota-tinta-2); }
.bilhete-aberto .rodape .ass { font: 500 18px var(--mao); color: var(--voz-a); }
.bilhete-aberto .lixo { color: var(--nota-tinta-3); width: 30px; height: 30px; display: grid; place-items: center; }
.bilhete-aberto .lixo svg { width: 15px; height: 15px; }
.bilhete-enviado { display: flex; gap: 12px; align-items: center; padding: 12px 14px; background: var(--papel-2); border-radius: 12px; font-size: 13px; color: var(--tinta-2); }
.bilhete-enviado .mini-selo { width: 26px; height: 26px; border-radius: 50%; background: var(--voz-b); color: var(--papel); font: 700 12px var(--serif); display: grid; place-items: center; flex: none; }
.bilhete-enviado .mini-selo.aberto { background: var(--fundo-3); color: var(--tinta-3); }
.bilhete-enviado span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 17px var(--mao); color: var(--tinta); }
.bilhete-enviado small { flex: none; }

.ajustes { display: flex; flex-direction: column; gap: 8px; }
.ajuste { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; padding: 14px 14px; background: var(--papel); border-radius: 12px; text-align: left; width: 100%; font-size: 15px; color: var(--tinta); box-shadow: var(--sombra-p); }
.ajuste svg { color: var(--neutro); width: 20px; height: 20px; }
.ajuste small { color: var(--tinta-3); font-size: 12px; }
.ajuste .seg { display: flex; gap: 4px; background: var(--fundo-2); padding: 3px; border-radius: 9px; }
.ajuste .seg button { padding: 6px 10px; border-radius: 7px; font: 600 12px var(--sans); color: var(--tinta-2); }
.ajuste .seg button.ativo { background: var(--voz-a); color: #fff; box-shadow: 0 4px 10px -5px var(--voz-a); }
.ajuste .seg button.ativo.ela { background: var(--voz-b); color: #fff; box-shadow: 0 4px 10px -5px var(--voz-b); }
a.ajuste { text-decoration: none; }

.qr { width: 200px; height: 200px; margin: 6px auto 12px; padding: 12px; background: var(--papel-2); border-radius: 12px; }
.qr img, .qr canvas { display: block; margin: 0 auto; }
.urls { display: flex; flex-direction: column; gap: 6px; }
.urls code { display: block; padding: 10px 12px; background: var(--fundo-2); border-radius: 10px; font-size: 13px; word-break: break-all; color: var(--tinta); }
.urls code b { color: var(--voz-a); font-weight: 600; }

.assinatura { text-align: center; font: italic 13px var(--serif); color: var(--tinta-3); padding: 38px 0 6px; }
.assinatura b { display: block; font: 600 15px var(--serif); color: var(--voz-a); font-style: normal; margin-bottom: 2px; }

/* ═══════════════════ BOAS-VINDAS ═══════════════════ */
.boasvindas { min-height: 100dvh; display: grid; place-items: center; padding: 32px 20px; position: relative; }
.boasvindas::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(212, 169, 74, .18), transparent 60%); pointer-events: none; }
.marca { text-align: center; margin-bottom: 26px; position: relative; }
.marca h1 { font: 500 56px/1 var(--serif); color: var(--voz-a); letter-spacing: -.01em; }
.marca .risco { width: 150px; height: 8px; margin: 6px auto 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 8'%3E%3Cpath d='M2 5C40 2 80 2 148 4' fill='none' stroke='%23FFB400' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.marca p { font: italic 16px/1.4 var(--serif); color: var(--tinta-2); max-width: 260px; margin: 0 auto; }
.cartao-papel { background: var(--papel); padding: 28px 24px 24px; border-radius: 16px; box-shadow: var(--sombra); width: 100%; max-width: 420px; position: relative; }
.cartao-papel .fita { width: 74px; height: 22px; top: -11px; }
.cartao-papel h2 { font: 500 22px/1.2 var(--serif); color: var(--tinta); margin-bottom: 4px; }
.cartao-papel .suave { margin-bottom: 18px; }
.escolha-eu { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 6px; }
.escolha-eu button { padding: 28px 12px 22px; border-radius: 16px; border: 1.5px solid; background: var(--papel-2); display: flex; flex-direction: column; align-items: center; gap: 8px; transition: transform .15s, background .15s; }
.escolha-eu button:active { transform: scale(.97); }
.escolha-eu button b { font: 500 22px/1.1 var(--serif); }
.escolha-eu button small { font: 700 10px var(--sans); letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.escolha-eu button.ele { color: var(--voz-a); border-color: var(--voz-a); background: var(--voz-a-veu); }
.escolha-eu button.ela { color: var(--voz-b); border-color: var(--voz-b); background: var(--voz-b-veu); }
.escolha-eu button:hover { filter: brightness(.97); }

@media (max-width: 380px) {
  .cartao-lugar { grid-template-columns: 96px 1fr; gap: 12px; }
  .nota-grande { font-size: 64px; }
  .notas-escolha { gap: 3px; }
  .notas-escolha button { font-size: 16px; border-radius: 7px; }
}