/* Estilo da Trupe. As decisões (fontes, cores, formas, voz) estão no IDENTIDADE.md; o movimento e a
   acessibilidade seguem o DIRETRIZES-UX.md. Papel de cartaz no claro, coxia no escuro. */
@font-face { font-family: "Bricolage Grotesque"; src: url("/fontes/bricolage.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/fontes/atkinson-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/fontes/atkinson-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --fundo: #FBF7F0;          /* papel de cartaz */
  --fundo-2: #F1EADD;
  --cortica: #E6D9C3;        /* o quadro de avisos */
  --cartao: #FFFDF8;
  --tinta: #1C1917;
  --tinta-suave: #57534E;
  --acento: #B42318;         /* a cortina de veludo */
  --sobre-acento: #FFFFFF;
  --fita: #F2C94C;           /* fita crepe e luz de palco: só com texto escuro */
  --sobre-fita: #1C1917;
  --linha: #DDD3C2;
  --perigo: #9F1239;
  --certo: #166534;
  --raio: 4px;
  --sombra: 0 1px 1px rgba(60, 40, 20, .08), 0 4px 10px rgba(60, 40, 20, .10);
  --fonte-titulo: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --fonte-texto: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* as 5 cores da trupe (28/10/2026): cada família de áreas tem uma; a marca são as cinco juntas */
  --f-cena: #B42318;  --sobre-cena: #FFFFFF;     /* a cortina */
  --f-corpo: #F2C94C; --sobre-corpo: #1C1917;    /* a luz de palco */
  --f-som: #1F5A8C;   --sobre-som: #FFFFFF;      /* o gel azul do refletor */
  --f-imagem: #2D6A4F; --sobre-imagem: #FFFFFF;  /* o verde do chroma */
  --f-bastidor: #292524; --sobre-bastidor: #FBF7F0; /* o preto de quem trabalha na coxia */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #16110E; --fundo-2: #1F1915; --cortica: #2A211B; --cartao: #221B17; --tinta: #F3EDE4; --tinta-suave: #C9BFB2;
    --acento: #F2836F; --sobre-acento: #1C0D09; --linha: #3A302A; --perigo: #FB7185; --certo: #4ADE80;
    --sombra: 0 1px 1px rgba(0,0,0,.4), 0 4px 10px rgba(0,0,0,.35);
    --f-cena: #F2836F; --f-som: #7FB2E5; --f-imagem: #7CC6A0; --f-bastidor: #D6CFC7;
    --sobre-cena: #16110E; --sobre-corpo: #16110E; --sobre-som: #16110E; --sobre-imagem: #16110E; --sobre-bastidor: #16110E;
    color-scheme: dark;
  }
}
:root[data-tema="escuro"] {
  --fundo: #16110E; --fundo-2: #1F1915; --cortica: #2A211B; --cartao: #221B17; --tinta: #F3EDE4; --tinta-suave: #C9BFB2;
  --acento: #F2836F; --sobre-acento: #1C0D09; --linha: #3A302A; --perigo: #FB7185; --certo: #4ADE80;
  --sombra: 0 1px 1px rgba(0,0,0,.4), 0 4px 10px rgba(0,0,0,.35);
  --f-cena: #F2836F; --f-som: #7FB2E5; --f-imagem: #7CC6A0; --f-bastidor: #D6CFC7;
  --sobre-cena: #16110E; --sobre-corpo: #16110E; --sobre-som: #16110E; --sobre-imagem: #16110E; --sobre-bastidor: #16110E;
  color-scheme: dark;
}

/* troca de página suave entre documentos, com o topo e as abas parados */
@view-transition { navigation: auto; }
.topo { view-transition-name: topo; }
.abas { view-transition-name: abas; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-tap-highlight-color: rgba(180, 35, 24, .14); } /* o toque marca em vermelho claro, não no azul do navegador */
body { margin: 0; background: var(--fundo); color: var(--tinta); font: 1.05rem/1.6 var(--fonte-texto); -webkit-text-size-adjust: 100%; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--fonte-titulo); line-height: 1.08; letter-spacing: -.01em; font-weight: 800; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }
[hidden] { display: none !important; }
.pular { position: absolute; left: 16px; top: -60px; background: var(--acento); color: var(--sobre-acento); padding: 10px 16px; border-radius: var(--raio); z-index: 50; transition: top .15s ease-out; }
.pular:focus { top: 12px; }
.dentro { width: min(100% - 32px, 64rem); margin-inline: auto; }
body.app > main { min-height: 100svh; } /* o rodapé começa fora da tela: o que chega depois não o empurra */
.estreito { width: min(100% - 32px, 38rem); margin-inline: auto; }
.texto { max-width: 44rem; padding-block: 32px 64px; }
.suave { color: var(--tinta-suave); }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.faixa-previa { background: var(--fita); color: var(--sobre-fita); text-align: center; font-size: .92rem; font-weight: 700; padding: 6px 16px; }

/* topo */
.topo { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--fundo) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linha); }
.topo-dentro { display: flex; align-items: center; gap: 12px; min-height: 60px; }
.marca { display: inline-flex; align-items: center; min-height: 44px; gap: 10px; font: 800 1.45rem/1 var(--fonte-titulo); text-decoration: none; margin-right: auto; color: var(--acento); }
.menu { display: flex; align-items: center; gap: 4px; }
.menu a:not(.botao) { padding: 10px; min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; color: var(--tinta-suave); transition: color .15s ease-out; }
.menu a:not(.botao):hover, .menu a[aria-current] { color: var(--tinta); }
@media (max-width: 640px) { .menu a:not(.botao) { display: none; } }

/* botões: retos, como papel */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: var(--raio); border: 2px solid var(--acento); background: var(--acento); color: var(--sobre-acento); font: 700 1rem/1.1 var(--fonte-texto); text-decoration: none; cursor: pointer; transition: transform .15s ease-out, opacity .15s ease-out, background-color .15s ease-out; }
.botao:hover { opacity: .92; }
.alerta-golpe { list-style: none; margin: 6px 0; padding: 8px 12px; border-left: 4px solid var(--perigo); background: var(--fundo-2); font-size: .92rem; font-weight: 700; }
.agora { margin: 0 0 18px; }
.agora .estado-copia { margin-top: 10px; }
.tipo-vaga { display: inline-block; margin: 6px 0; padding: 1px 8px; border-radius: 2px; border: 1px solid var(--linha); font: 700 .85rem/1.5 var(--fonte-texto); color: var(--tinta-suave); }
.tipo-vaga.pago { border-color: var(--certo); color: var(--certo); }
body.visitante .abas { display: none; }
.botao-google { width: 100%; }
.botao-google svg { width: 20px; height: 20px; flex: none; }
.ou-entao { display: flex; align-items: center; gap: 12px; margin: 16px 0 4px; color: var(--tinta-suave); font-size: .9rem; }
.ou-entao::before, .ou-entao::after { content: ""; flex: 1; border-top: 1px solid var(--linha); }
.botao:active { transform: scale(.97); }
.botao:disabled, .botao[aria-busy="true"] { opacity: .6; cursor: progress; }
.botao.pequeno { min-height: 44px; padding: 0 14px; font-size: .95rem; }
.botao.contorno { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.botao.fita { background: var(--fita); border-color: var(--fita); color: var(--sobre-fita); }
.botao.perigo { background: transparent; color: var(--perigo); border-color: var(--perigo); }
.botao.zap { background: #1F7A45; border-color: #1F7A45; color: #fff; }
.botao svg { width: 20px; height: 20px; flex: none; }
.link-botao { background: none; border: 0; padding: 10px 4px; min-height: 44px; color: var(--tinta-suave); text-decoration: underline; cursor: pointer; font: inherit; }
.trocar-tema { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1.5px solid var(--linha); background: none; color: var(--tinta); cursor: pointer; transition: border-color .15s ease-out; }
.trocar-tema:hover { border-color: var(--acento); }
/* o sino dos avisos, ao lado do tema */
.sino { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; color: var(--tinta); transition: background-color .15s ease-out; }
.sino:hover, .sino[aria-current="page"] { background: var(--fundo-2); }
.sino svg { width: 22px; height: 22px; }
.sino .contagem-aba { top: 2px; left: auto; right: 0; }
@media (min-width: 760px) { .sino .contagem-aba { position: absolute; margin: 0; } }
.trocar-tema svg { width: 20px; height: 20px; fill: currentColor; }
.trocar-tema .lua { display: none; }
:root[data-tema-atual="escuro"] .trocar-tema .sol { display: none; }
:root[data-tema-atual="escuro"] .trocar-tema .lua { display: block; }

/* abertura (página inicial) */
.abertura { padding-block: 48px 32px; }
.abertura h1 { font-size: clamp(2.6rem, 11vw, 5rem); margin: 0 0 16px; max-width: 12ch; }
.pincel { position: relative; white-space: nowrap; z-index: 0; }
.pincel svg { position: absolute; left: -2%; bottom: -.08em; width: 104%; height: .34em; color: var(--fita); z-index: -1; }
.assinatura { font: 700 1.05rem/1.3 var(--fonte-titulo); margin: -8px 0 22px; color: var(--tinta); }
.assinatura a { color: var(--acento); }
.abertura-sub { color: var(--tinta-suave); font-size: 1.2rem; max-width: 34em; margin: 0 0 24px; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.secao { padding-block: 40px; scroll-margin-top: 72px; }
.secao h2 { font-size: clamp(1.7rem, 6vw, 2.4rem); margin: 0 0 12px; }
.dois-jeitos { display: grid; gap: 28px; }
@media (min-width: 760px) { .dois-jeitos { grid-template-columns: 1.15fr 1fr; align-items: start; } }
.jeito h3 { font-size: 1.5rem; margin: 0 0 6px; }
.jeito p { margin: 0 0 12px; }

/* o quadro de avisos e os bilhetes (projetos) */
.quadro { background: var(--cortica); border-radius: var(--raio); padding: 28px 16px 20px; display: grid; gap: 26px; }
@media (min-width: 700px) { .quadro.duplo { grid-template-columns: repeat(2, 1fr); padding: 32px 24px 24px; } }
.bilhete { position: relative; display: block; background: var(--cartao); color: var(--tinta); border-radius: 2px; padding: 22px 18px 16px; box-shadow: var(--sombra); text-decoration: none; transform: rotate(var(--giro, -.8deg)); transition: transform .2s ease-out; }
.bilhete:nth-child(3n+2) { --giro: 1deg; }
.bilhete:nth-child(3n+3) { --giro: -.4deg; }
.bilhete::before { content: ""; position: absolute; top: -10px; left: 50%; width: 86px; height: 22px; background: color-mix(in srgb, var(--fita) 80%, transparent); transform: translateX(-50%) rotate(var(--fita-giro, -3deg)); box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.bilhete:nth-child(2n)::before { --fita-giro: 4deg; left: 42%; }
a.bilhete:hover, a.bilhete:focus-visible { transform: rotate(0deg) translateY(-2px); }
.bilhete h3 { font-size: 1.35rem; margin: 0 0 6px; overflow-wrap: anywhere; }
.bilhete p { margin: 0 0 10px; color: var(--tinta-suave); overflow-wrap: anywhere; }
.bilhete .resumo { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bilhete .rodape-bilhete { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .9rem; color: var(--tinta-suave); }
.fechado { opacity: .6; }
/* planos (só com ASSINATURAS=1): o selo de quem tem plano e o bilhete em destaque */
.selo-plano { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 1px 7px; border-radius: 2px; font: 800 .75rem/1.5 var(--fonte-texto); letter-spacing: .02em; background: var(--fita); color: var(--sobre-fita); }
.selo-plano.produtora { background: var(--tinta); color: var(--fundo); }
.bilhete.destaque { outline: 3px solid var(--fita); outline-offset: 0; }
.marca-destaque { display: inline-block; margin: 0 0 6px; font: 800 .8rem/1.4 var(--fonte-texto); color: var(--acento); }
.sem-sublinhado { text-decoration: none; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.etiquetas li { font-size: .85rem; padding: 2px 8px; border: 1.5px solid currentColor; border-radius: 2px; color: var(--acento); font-weight: 700; }

/* o app: abas embaixo no celular, em cima no computador */
.app main { padding-bottom: 96px; }
.abas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--fundo); border-top: 1px solid var(--linha); padding-bottom: env(safe-area-inset-bottom); }
.abas a { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 2px 6px; min-height: 56px; min-width: 0; text-decoration: none; color: var(--tinta-suave); font-size: .74rem; font-weight: 700; letter-spacing: -.01em; transition: color .15s ease-out; }
.abas a svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.abas a[aria-current="page"] { color: var(--acento); }
@media (min-width: 760px) {
  .abas { position: sticky; top: 61px; bottom: auto; z-index: 9; border-top: 0; border-bottom: 1px solid var(--linha); grid-template-columns: repeat(5, max-content); justify-content: center; gap: 8px; }
  .abas a { grid-auto-flow: column; align-items: center; gap: 8px; font-size: .95rem; letter-spacing: 0; padding: 10px 14px; }
  .app main { padding-bottom: 40px; }
}
.pagina-titulo { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin: 24px 0 16px; }
.pagina-titulo h1 { font-size: clamp(2rem, 8vw, 2.8rem); margin: 0; }
.pagina-titulo p { margin: 4px 0 0; color: var(--tinta-suave); width: 100%; }

/* filtros e abas internas */
.filtros { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.filtros select { flex: 1 1 10rem; }
/* os alertas de projeto, embaixo dos filtros do mural */
.alertas { margin: -6px 0 18px; font-size: .95rem; }
.alertas p { margin: 0; }
.pedir-alerta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.meus-alertas { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.meus-alertas li { display: flex; align-items: center; gap: 2px; padding-left: 10px; border: 1.5px solid var(--linha); border-radius: 2px; background: var(--cartao); }
.meus-alertas button { min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--tinta-suave); font-size: 1.2rem; cursor: pointer; transition: color .15s ease-out; }
.meus-alertas button:hover { color: var(--acento); }
.subabas { display: flex; gap: 4px; margin: 0 0 18px; border-bottom: 2px solid var(--linha); overflow-x: auto; scrollbar-width: none; }
.subabas button { background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 10px 12px; min-height: 44px; font: 700 1rem var(--fonte-texto); color: var(--tinta-suave); cursor: pointer; white-space: nowrap; transition: color .15s ease-out, border-color .15s ease-out; }
.subabas button[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--acento); }

/* formulários */
.campo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 0 0 18px; }
.campo > label, .campo > legend, .rotulo { font-weight: 700; }
.campo .ajuda { font-size: .9rem; color: var(--tinta-suave); margin: 0; }
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="date"], input[type="search"], input[type="number"], input:not([type]), select, textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; border: 2px solid var(--linha); border-radius: var(--raio); background: var(--cartao); color: var(--tinta); font: inherit; transition: border-color .15s ease-out;
}
textarea { min-height: 7.5em; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--acento); outline: none; }
.campo.com-erro input, .campo.com-erro textarea, .campo.com-erro select { border-color: var(--perigo); }
.erro-campo { color: var(--perigo); font-size: .92rem; margin: 0; }
.erro-campo:empty { display: none; }
.contador { font-size: .85rem; color: var(--tinta-suave); justify-self: end; }
fieldset { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.marcar { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 0; cursor: pointer; }
.marcar input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--acento); flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 2px solid var(--linha); border-radius: var(--raio); background: var(--cartao); font-weight: 700; font-size: .95rem; transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out; }
.chips input:checked + span { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.chips input:focus-visible + span { outline: 3px solid var(--acento); outline-offset: 2px; }
.linha-2 { display: grid; gap: 0 12px; grid-template-columns: 6.5rem 1fr; }
.foto-campo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.foto-campo > div:last-child { flex: 1 1 14rem; }
.cartao-solto { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px 16px; margin: 0 0 18px; }
.codigo-input { font: 800 1.8rem/1 var(--fonte-titulo) !important; letter-spacing: .3em; text-align: center; }
.previa-codigo { background: var(--fita); color: var(--sobre-fita); padding: 10px 12px; border-radius: var(--raio); font-weight: 700; }

/* pessoas: foto ou iniciais carimbadas */
.rosto { display: grid; place-items: center; flex: none; width: 72px; height: 72px; border-radius: var(--raio); overflow: hidden; background: var(--acento); color: var(--sobre-acento); font: 800 1.6rem/1 var(--fonte-titulo); }
.rosto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rosto.medio { width: 56px; height: 56px; font-size: 1.3rem; }
.rosto.pequeno { width: 44px; height: 44px; font-size: 1.05rem; }
.rosto.fam-cena { background: var(--f-cena); color: var(--sobre-cena); }
.rosto.fam-corpo { background: var(--f-corpo); color: var(--sobre-corpo); }
.rosto.fam-som { background: var(--f-som); color: var(--sobre-som); }
.rosto.fam-imagem { background: var(--f-imagem); color: var(--sobre-imagem); }
.rosto.fam-bastidor { background: var(--f-bastidor); color: var(--sobre-bastidor); }
.rosto.grande { width: 100%; height: auto; aspect-ratio: 4 / 5; font-size: 5rem; }
.ficha { margin: 0; display: grid; gap: 2px; }
.ficha dt { font-size: .85rem; color: var(--tinta-suave); }
.ficha dd { margin: 0 0 8px; overflow-wrap: anywhere; }
.links-perfil { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 4px; }
.links-perfil a { display: inline-block; min-height: 44px; line-height: 44px; overflow-wrap: anywhere; }
.perfil-cabeca h1 { font-size: clamp(2rem, 8vw, 3rem); margin: 0 0 4px; }

/* o deslizar */
.palco { display: grid; max-width: 26rem; margin: 0 auto; min-height: 20rem; }
.palco > * { grid-area: 1 / 1; }
.cartao-pessoa { position: relative; align-self: stretch; background: var(--cartao); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; transition: transform .25s ease-out, opacity .25s ease-out; }
.cartao-pessoa.arrastando { transition: none; cursor: grabbing; }
.cartao-pessoa.atras { transform: scale(.96) translateY(12px); opacity: .7; pointer-events: none; }
.cartao-pessoa .rosto.grande { aspect-ratio: 4 / 3; max-height: 34svh; }
.cartao-pessoa .info { padding: 14px 16px 16px; }
.cartao-pessoa h2 { font-size: 1.9rem; margin: 0; }
.cartao-pessoa .onde { color: var(--tinta-suave); margin: 2px 0 8px; }
.cartao-pessoa .bio { margin: 0 0 8px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cartao-pessoa .ver-mais { display: inline-block; min-height: 44px; line-height: 44px; font-weight: 700; }
.selo { position: absolute; top: 18px; padding: 4px 12px; border: 3px solid currentColor; border-radius: 2px; font: 800 1.7rem/1.1 var(--fonte-titulo); opacity: 0; background: color-mix(in srgb, var(--cartao) 85%, transparent); pointer-events: none; }
.selo.topa { left: 16px; color: var(--certo); transform: rotate(-8deg); }
.selo.passa { right: 16px; color: var(--tinta-suave); transform: rotate(8deg); }
.botoes-palco { display: flex; justify-content: center; gap: 14px; margin: 18px auto 0; max-width: 26rem; }
/* no celular, Passar e Topo ficam sempre à vista, presos logo acima das abas */
@media (max-width: 759px) {
  /* a faixa é sólida e vai de ponta a ponta: o texto do cartão não aparece por trás dos botões */
  .botoes-palco { position: sticky; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 5; margin-inline: -16px; max-width: none; padding: 10px 16px; background: var(--fundo); border-top: 1px solid var(--linha); }
  .cartao-pessoa .rosto.grande { max-height: 24svh; } /* o nome tem de aparecer acima dos botões, sem rolar */
}
.botoes-palco .botao { flex: 1; }

/* o encontro: canhoto de ingresso */
.canhoto { position: relative; background: var(--cartao); border: 2px dashed var(--acento); border-radius: var(--raio); padding: 16px; display: flex; gap: 14px; align-items: flex-start; }
.canhoto h3 { font-size: 1.3rem; margin: 0; overflow-wrap: anywhere; }
.canhoto p { margin: 2px 0 8px; color: var(--tinta-suave); font-size: .95rem; }
.canhoto .acoes { gap: 8px; }
.canhoto > div:not(.rosto) { min-width: 0; flex: 1; }
dialog { border: 0; padding: 0; background: transparent; color: var(--tinta); max-width: min(100% - 32px, 26rem); width: 100%; }
dialog::backdrop { background: rgba(10, 6, 4, .6); }
dialog[open] > * { animation: sobe .25s ease-out; }
@keyframes sobe { from { opacity: 0; transform: translateY(16px) scale(.98); } }
dialog .cartao-solto { margin: 0; }
dialog h2 { font-size: 1.7rem; margin: 0 0 8px; }
.encontro-titulo { color: var(--acento); }

/* avisos, vazio e esqueleto */
.aviso { position: fixed; left: 50%; bottom: 84px; z-index: 40; width: max-content; max-width: min(100% - 32px, 28rem); padding: 12px 16px; border-radius: var(--raio); background: var(--tinta); color: var(--fundo); box-shadow: var(--sombra); transform: translate(-50%, 20px); opacity: 0; transition: opacity .2s ease-in, transform .2s ease-in; pointer-events: none; }
.aviso.aparece { opacity: 1; transform: translate(-50%, 0); transition-timing-function: ease-out; }
.vazio { padding: 24px 18px; border: 2px dashed var(--linha); border-radius: var(--raio); color: var(--tinta-suave); background: var(--fundo); }
.vazio h2, .vazio h3 { color: var(--tinta); margin: 0 0 6px; font-size: 1.4rem; }
.vazio p { margin: 0 0 12px; }
.esqueleto { background: linear-gradient(90deg, var(--fundo-2), var(--cortica), var(--fundo-2)); background-size: 200% 100%; animation: brilho 1.2s linear infinite; border-radius: var(--raio); min-height: 9rem; }
.esqueleto.alto { min-height: 24rem; }
@keyframes brilho { to { background-position: -200% 0; } }
.lista-simples { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.mensagem-cand { white-space: pre-line; margin: 6px 0 10px; padding-left: 12px; border-left: 3px solid var(--fita); overflow-wrap: anywhere; }
.estado { font-weight: 700; font-size: .9rem; }
.estado.aceita { color: var(--certo); }
.estado.recusada { color: var(--tinta-suave); }
.quebra { white-space: pre-line; overflow-wrap: anywhere; }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 10px; margin: 0 0 24px; }
.numeros div { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px; }
.numeros b { display: block; font: 800 2rem/1 var(--fonte-titulo); color: var(--acento); }

/* dúvidas */
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; min-height: 44px; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 700; transition: transform .2s ease-out; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details[open] .faq-resposta { animation: abre .22s ease-out; }
@keyframes abre { from { opacity: 0; transform: translateY(-6px); } }

/* rodapé */
.rodape { border-top: 1px solid var(--linha); padding-block: 24px; color: var(--tinta-suave); font-size: .95rem; }
.app .rodape { padding-bottom: 96px; }
.rodape-dentro { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.rodape a { display: inline-block; min-height: 44px; line-height: 44px; }
@media (min-width: 760px) { .app .rodape { padding-bottom: 24px; } }

/* movimento.js: entrada ao rolar e voltar ao topo */
.revelar { opacity: 0; transform: translateY(14px); }
.revelar.visto { opacity: 1; transform: none; transition: opacity .25s ease-out var(--atraso, 0ms), transform .25s ease-out var(--atraso, 0ms); }
.voltar-topo { position: fixed; right: 16px; bottom: 16px; z-index: 20; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--acento); color: var(--sobre-acento); box-shadow: var(--sombra); cursor: pointer; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s ease-in, transform .2s ease-in; }
.app .voltar-topo { bottom: 80px; }
.voltar-topo.aparece { opacity: 1; transform: none; pointer-events: auto; transition-timing-function: ease-out; }
.voltar-topo svg { width: 22px; height: 22px; }
.progresso-leitura { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--acento); transform-origin: 0 50%; transform: scaleX(0); z-index: 30; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revelar { opacity: 1; transform: none; }
  .faq details[open] .faq-resposta, dialog[open] > * { animation: none; }
  .esqueleto { animation: none; }
  .botao, .trocar-tema, .faq summary::after, .voltar-topo, .menu a, .pular, .bilhete, .cartao-pessoa, .aviso, .chips span, .abas a, .subabas button,
  .segmento span, .gosto span, .indice a, .cinco circle, .cartaz, .tira button, .ativos button, .sugestoes button, .pessoa-mini { transition: none; }
  .painel-filtros:not([hidden]), .painel-filtros.fechando, .lista-pessoas > li, .tags li { animation: none; }
  @view-transition { navigation: none; }
}

/* administração: buscar contas */
.busca-contas { display: flex; gap: 10px; margin: 0 0 14px; }
.busca-contas input { flex: 1; min-width: 0; }
.link-origem { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.link-origem code { overflow-wrap: anywhere; background: var(--fundo-2); padding: 4px 8px; border-radius: var(--raio); }
.tabela { border-collapse: collapse; width: 100%; margin: 0 0 14px; }
.tabela th, .tabela td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linha); }
.tabela .numero { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rolar { overflow-x: auto; }

/* parceiros (só aparecem com algum parceiro ativo) */
.selo-plano.parceiro { background: var(--acento); color: var(--sobre-acento); }
.parceiro { display: grid; gap: 8px; }
.parceiro p { margin: 0; }
.parceiro h2 { margin: 0; }
.tipo-parceiro { margin: 0; font-size: .9rem; color: var(--tinta-suave); }
.oferta { justify-self: start; margin: 0; padding: 4px 10px; background: var(--fita); color: var(--sobre-fita); font-weight: 700; border-radius: 2px; transform: rotate(-.6deg); }
.parceiro .sobre { margin: 0; white-space: pre-line; }
.faixa-parceiro { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 18px; padding: 10px 14px; border: 2px dashed var(--acento); border-radius: var(--raio); }
.faixa-parceiro b { font-family: var(--fonte-titulo); }
.estado-copia { margin: 0 0 18px; padding: 8px 12px; border-left: 4px solid var(--certo); background: var(--fundo-2); }
.estado-copia.problema { border-left-color: var(--perigo); font-weight: 700; }
.razoes { border: 0; padding: 0; margin: 4px 0 14px; display: grid; gap: 2px; }
.razoes legend { font-weight: 700; margin-bottom: 6px; }
.etiqueta-razao { display: inline-block; margin: 0 0 8px; padding: 2px 10px; border-radius: 4px; background: var(--fundo-2); font-weight: 700; font-size: .9rem; }

/* ————— a marca e as 5 cores (28/10/2026) ————— */
/* cada bolinha é uma família; acesa = cheia, apagada = só o contorno (a diferença não depende só da cor) */
.cinco { display: inline-flex; vertical-align: middle; flex: none; }
.cinco svg { display: block; height: 100%; width: auto; overflow: visible; }
.cinco circle { stroke-width: 1.6; transition: fill .2s ease-out, stroke .2s ease-out; }
.cinco .cena { fill: var(--f-cena); stroke: var(--f-cena); }
.cinco .corpo { fill: var(--f-corpo); stroke: var(--f-corpo); }
.cinco .som { fill: var(--f-som); stroke: var(--f-som); }
.cinco .imagem { fill: var(--f-imagem); stroke: var(--f-imagem); }
.cinco .bastidor { fill: var(--f-bastidor); stroke: var(--f-bastidor); }
.cinco .apagada { fill: transparent; stroke: var(--linha); }
.marca .cinco { height: .62em; margin-top: -.12em; }
.cinco.da-pessoa { height: 14px; }
.pessoa-cores { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 10px; font-size: .88rem; color: var(--tinta-suave); }
.legenda-cores { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0; margin: 8px 0 0; list-style: none; font-size: .9rem; }
.legenda-cores li { display: inline-flex; align-items: center; gap: 6px; }
.legenda-cores i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }

/* a ficha, como a ficha técnica de um programa de peça: função à esquerda, nome à direita, pontinhos no meio */
.funcao { margin: 0 0 2px; font: 700 1.05rem/1.3 var(--fonte-titulo); }
.ficha-tecnica { margin: 0 0 16px; padding: 0; display: grid; gap: 4px; }
.ficha-tecnica div { display: flex; align-items: baseline; gap: 8px; }
/* o rótulo encolhe: um título de 80 letras nos créditos não pode esmagar a função nem passar da tela */
.ficha-tecnica dt { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; color: var(--tinta-suave); font-size: .92rem; }
.ficha-tecnica .pontos { order: 1; flex: 1 1 1rem; min-width: 1rem; border-bottom: 2px dotted var(--linha); transform: translateY(-4px); }
.ficha-tecnica dd { order: 2; flex: 0 1 auto; margin: 0; text-align: right; overflow-wrap: break-word; max-width: 70%; }
.selo-conferido { display: inline-block; margin-left: 6px; font-size: .78rem; font-weight: 700; color: var(--certo); white-space: nowrap; }
.selo-dito { display: inline-block; margin-left: 6px; font-size: .78rem; color: var(--tinta-suave); white-space: nowrap; }
/* onde já trabalhou: duas bolinhas (já fiz = uma cheia; faço sempre = duas) */
.palco-tela { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 2px 18px; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.palco-tela li { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.nivel { display: inline-flex; gap: 3px; flex: none; }
.nivel i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--acento); }
.nivel i.cheio { background: var(--acento); }
.palco-tela .marca-gosto { font-size: .8rem; font-weight: 700; padding: 0 6px; border-radius: 2px; background: var(--fita); color: var(--sobre-fita); }
.palco-tela .nunca { color: var(--tinta-suave); }
.etiquetas.claras li { color: var(--tinta); border-color: var(--linha); font-weight: 400; }
.etiquetas.claras li.principal { border-color: var(--tinta); font-weight: 700; }
a.etiqueta-link { color: inherit; text-decoration: none; display: inline-flex; min-height: 32px; align-items: center; }
.em-comum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; padding: 8px 10px; background: color-mix(in srgb, var(--fita) 28%, var(--cartao)); border-radius: var(--raio); font-size: .9rem; }
.em-comum b { font-family: var(--fonte-titulo); }
/* gente em comum: os rostinhos sobrepostos (como cabeças na coxia) e os nomes; no perfil, o atalho do Instagram */
.conhecidos { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: .9rem; line-height: 1.45; }
.conhecidos p { margin: 0; min-width: 0; }
.conhecidos b { font-family: var(--fonte-titulo); }
.rostinhos { display: flex; flex: none; }
.rostinhos .rosto.mini { width: 30px; height: 30px; font-size: .85rem; outline: 2px solid var(--cartao); }
.rostinhos .rosto.mini + .rosto.mini { margin-left: -6px; }
.perfil-cabeca .rostinhos .rosto.mini { outline-color: var(--fundo); }
.ig-comum { display: block; margin-top: 2px; }
.vontade { margin: 0 0 14px; padding: 10px 14px; border-left: 4px solid var(--acento); background: var(--fundo-2); font-size: 1.05rem; }
.secao-perfil h2 { font-size: 1.35rem; margin: 22px 0 8px; }
.ig { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }

/* o formulário do perfil: em partes, com um índice que segue a rolagem e o salvar sempre à mão */
.indice { position: sticky; top: 60px; z-index: 6; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 14px; padding: 6px 16px; background: color-mix(in srgb, var(--fundo) 94%, transparent); border-bottom: 1px solid var(--linha); }
.indice::-webkit-scrollbar { display: none; }
.indice a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: var(--raio); text-decoration: none; font-weight: 700; font-size: .92rem; color: var(--tinta-suave); transition: background-color .15s ease-out, color .15s ease-out; }
.indice a[aria-current] { background: var(--tinta); color: var(--fundo); }
@media (min-width: 760px) { .indice { top: 106px; } }
.parte { scroll-margin-top: 120px; padding-top: 6px; }
.parte > h2 { font-size: 1.5rem; margin: 18px 0 4px; }
.parte > .ajuda-parte { margin: 0 0 14px; color: var(--tinta-suave); }
@media (min-width: 760px) { .parte { scroll-margin-top: 170px; } }
.salvar-fixo { position: sticky; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 0; background: linear-gradient(transparent, var(--fundo) 30%); }
@media (min-width: 760px) { .salvar-fixo { bottom: 0; } }
.rascunho { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 14px; padding: 8px 12px; border: 2px dashed var(--fita); border-radius: var(--raio); font-size: .95rem; }
/* os primeiros minutos: um programa de peça com três cenas, a última ação presa embaixo no celular */
.comecar { display: grid; gap: 12px; margin: 24px 0; }
.comecar-lado h1 { font-size: clamp(2.2rem, 9vw, 3rem); margin: 0; }
.comecar-lado p { margin: 6px 0 0; color: var(--tinta-suave); }
.comecar-lado .comecar-conta { color: var(--tinta); font-weight: 700; }
.passos { list-style: none; counter-reset: passo; margin: 0; padding: 0; display: grid; gap: 28px; }
.passo { counter-increment: passo; position: relative; padding-left: 52px; }
.passo::before { content: counter(passo); position: absolute; left: 0; top: -4px; width: 40px; font: 800 2.4rem/1 var(--fonte-titulo); color: var(--acento); transition: color .2s ease-out; }
.passo.feito::before { color: var(--tinta-suave); }
.passo h2 { font-size: 1.5rem; margin: 0 0 2px; }
.passo > p { margin: 0 0 12px; color: var(--tinta-suave); }
.passo .cartazes { grid-template-columns: minmax(0, 1fr); }
.passo .campo { margin-bottom: 10px; }
.comecar-fim { margin: 0; }
.comecar-acao .canhoto { margin-top: 12px; }
@media (min-width: 900px) {
  .comecar { grid-template-columns: 19rem minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 16px 48px; align-items: start; }
  .comecar-lado { grid-column: 1; grid-row: 1; }
  .comecar-fim { grid-column: 1; grid-row: 2; position: static; background: none; padding: 0; }
  .passos { grid-column: 2; grid-row: 1 / span 2; }
  .passo .cartazes { grid-template-columns: repeat(2, 1fr); }
}
/* a página aberta: o campo do endereço e, no fim dela, de onde veio */
.com-prefixo { display: flex; align-items: center; gap: 2px; min-width: 0; }
.com-prefixo span { flex: none; color: var(--tinta-suave); font-size: .95rem; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.com-prefixo input { flex: 1 1 8rem; min-width: 0; }
.grade-marcar { display: grid; gap: 0 16px; }
@media (min-width: 640px) { .grade-marcar { grid-template-columns: 1fr 1fr; } }
.pagina-aberta .perfil-pagina { margin-top: 28px; }
.pagina-aberta-rodape { margin: 28px 0 0; padding-top: 12px; border-top: 2px dotted var(--linha); color: var(--tinta-suave); font-size: .92rem; }
/* o desafio do mês: o cartaz de lambe-lambe da temporada */
.desafio-pagina { display: grid; gap: 28px; margin: 24px 0; }
.desafio-cartaz { padding: 18px 16px; background: var(--cartao); border-top: 6px solid var(--fita); border-radius: 2px; box-shadow: var(--sombra); }
.desafio-cartaz h1 { font-size: clamp(2.2rem, 9vw, 3.2rem); margin: 4px 0 12px; overflow-wrap: anywhere; }
.desafio-marca { margin: 0; font-weight: 700; color: var(--tinta-suave); }
.desafio-lado { display: grid; gap: 22px; align-content: start; min-width: 0; }
.desafio-lado h2 { font-size: 1.4rem; margin: 0 0 10px; }
.lista-entregas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lista-entregas li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 0; border-bottom: 2px dotted var(--linha); }
.lista-entregas a:first-child { overflow-wrap: anywhere; min-width: 0; }
@media (min-width: 900px) {
  .desafio-pagina { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: 36px; align-items: start; }
  .desafio-cartaz { position: sticky; top: 132px; }
}
.campo-idade { display: grid; gap: 0 12px; grid-template-columns: minmax(0, 1fr); }
/* onde já trabalhou: um seletor de 3 posições por linguagem, e o "gosto muito" */
.linguagem { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; padding: 10px 0; border-bottom: 1px solid var(--linha); margin: 0; }
.linguagem legend { float: left; padding: 0; font-weight: 700; }
.linguagem .segmento { grid-column: 1 / -1; }
.segmento { display: grid; grid-template-columns: repeat(3, 1fr); border: 2px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.segmento label { position: relative; cursor: pointer; }
.segmento input, .gosto input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmento span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 6px; text-align: center; font-size: .9rem; font-weight: 700; color: var(--tinta-suave); background: var(--cartao); transition: background-color .15s ease-out, color .15s ease-out; }
.segmento label + label span { border-left: 2px solid var(--linha); }
.segmento input:checked + span { background: var(--tinta); color: var(--fundo); }
.segmento input:focus-visible + span, .gosto input:focus-visible + span { outline: 3px solid var(--acento); outline-offset: -3px; }
.gosto { cursor: pointer; justify-self: end; }
.gosto span { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px; border: 2px solid var(--linha); border-radius: var(--raio); font-size: .88rem; font-weight: 700; color: var(--tinta-suave); transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out; }
.gosto input:checked + span { background: var(--fita); border-color: var(--fita); color: var(--sobre-fita); }
@media (min-width: 640px) {
  .linguagem { grid-template-columns: 9.5rem 1fr auto; }
  .linguagem .segmento { grid-column: 2; grid-row: 1; }
  .linguagem .gosto { grid-column: 3; grid-row: 1; }
}
/* referências: escreve, aperta Enter ou "Pôr", e vira etiqueta com o x para tirar */
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.tags li { display: inline-flex; align-items: center; gap: 2px; padding-left: 10px; border: 2px solid var(--tinta); border-radius: var(--raio); font-weight: 700; font-size: .92rem; animation: entra .18s ease-out; }
.tags button { width: 36px; height: 36px; border: 0; background: none; color: var(--tinta-suave); cursor: pointer; font: 700 1.1rem/1 var(--fonte-texto); border-radius: var(--raio); }
.tags button:hover { color: var(--perigo); }
@keyframes entra { from { opacity: 0; transform: scale(.94); } }
.linha-por { display: flex; gap: 8px; }
.linha-por input { flex: 1; min-width: 0; }
.sugestoes { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.sugestoes button { min-height: 36px; padding: 0 10px; border: 1.5px dashed var(--linha); border-radius: var(--raio); background: none; color: var(--tinta-suave); font: inherit; font-size: .88rem; cursor: pointer; transition: border-color .15s ease-out, color .15s ease-out; }
.sugestoes button:hover { border-color: var(--acento); color: var(--tinta); }
.ig-conferido { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; padding: 10px 12px; border: 2px solid var(--certo); border-radius: var(--raio); }

/* o Explorar: mais filtros num painel que abre, e o que está ligado em etiquetas que dá para tirar */
.filtros .botao { flex: 0 0 auto; }
.contagem { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--acento); color: var(--sobre-acento); font-size: .8rem; }
.contagem:empty { display: none; }
.painel-filtros { margin: 0 0 18px; padding: 16px; background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); animation: abre .2s ease-out; }
.painel-filtros.fechando { animation: fecha .15s ease-in forwards; }
@keyframes fecha { to { opacity: 0; transform: translateY(-6px); } }
.painel-filtros .grade { display: grid; gap: 4px 16px; }
@media (min-width: 700px) { .painel-filtros .grade { grid-template-columns: 1fr 1fr; } }
.painel-filtros .campo { margin-bottom: 12px; }
.duas-idades { display: flex; align-items: center; gap: 8px; }
.duas-idades input { width: 6rem; }
.tira { display: grid; grid-template-columns: repeat(3, 1fr); border: 2px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.tira button { min-height: 44px; border: 0; background: var(--cartao); color: var(--tinta-suave); font: 700 .9rem var(--fonte-texto); cursor: pointer; transition: background-color .15s ease-out, color .15s ease-out; }
.tira button + button { border-left: 2px solid var(--linha); }
.tira button[aria-pressed="true"] { background: var(--tinta); color: var(--fundo); }
.tira button:disabled { opacity: .5; cursor: default; }
.ativos { display: flex; flex-wrap: wrap; gap: 6px; margin: -8px 0 16px; padding: 0; list-style: none; }
.ativos button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border: 2px solid var(--tinta); border-radius: var(--raio); background: var(--cartao); color: var(--tinta); font: 700 .88rem var(--fonte-texto); cursor: pointer; transition: background-color .15s ease-out; }
.ativos button:hover { background: var(--fundo-2); }
.ativos button::after { content: "×"; font-size: 1.1rem; line-height: 1; color: var(--tinta-suave); }
.cartao-pessoa .funcao { color: var(--tinta-suave); font: 700 1rem/1.3 var(--fonte-texto); }
.cartao-pessoa .trabalho { margin: 0 0 8px; font-size: .95rem; overflow-wrap: anywhere; }

/* comunidades: cartazes de lambe-lambe, com a faixa de cima na cor da cortina */
.cartazes { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
@media (min-width: 700px) { .cartazes { grid-template-columns: repeat(2, 1fr); } }
.cartaz { position: relative; display: grid; gap: 6px; padding: 16px; background: var(--cartao); border-top: 6px solid var(--acento); border-radius: 2px; box-shadow: var(--sombra); transition: transform .2s ease-out; }
.cartaz:hover { transform: translateY(-2px); }
.cartaz.oficial { border-top-color: var(--fita); }
.cartaz h3 { margin: 0; font-size: 1.4rem; overflow-wrap: anywhere; }
.cartaz h3 a { text-decoration: none; }
.cartaz h3 a::after { content: ""; position: absolute; inset: 0; }
.cartaz p { margin: 0; color: var(--tinta-suave); overflow-wrap: anywhere; }
.cartaz .resumo { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; align-self: start; } /* sem o align-self, o cartaz esticado ao lado de outro mostra um fiapo da terceira linha */
.cartaz .acoes { position: relative; z-index: 1; }
.da-casa { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 1px 7px; border-radius: 2px; font: 800 .75rem/1.5 var(--fonte-texto); background: var(--fita); color: var(--sobre-fita); }
.migalhas { display: flex; flex-wrap: wrap; gap: 4px; margin: 20px 0 0; padding: 0; list-style: none; font-size: .92rem; color: var(--tinta-suave); }
.migalhas li + li::before { content: "›"; margin-right: 4px; }
.migalhas a { display: inline-block; min-height: 32px; line-height: 32px; }
.lista-pessoas { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.lista-pessoas > li { animation: entra .2s ease-out both; animation-delay: var(--atraso, 0ms); }
.pessoa-mini { display: flex; gap: 12px; align-items: center; padding: 10px; background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); text-decoration: none; color: inherit; min-height: 64px; transition: border-color .15s ease-out; }
.pessoa-mini:hover { border-color: var(--tinta); }
.pessoa-mini b { display: block; font-family: var(--fonte-titulo); font-size: 1.1rem; line-height: 1.15; overflow-wrap: anywhere; }
.pessoa-mini .sub { display: block; font-size: .88rem; color: var(--tinta-suave); }
.pessoa-mini .cinco { margin-top: 4px; }
dialog { max-height: calc(100svh - 32px); overflow-y: auto; }
.semente { display: grid; gap: 8px; margin: 0 0 24px; padding: 14px 16px; border: 2px dashed var(--fita); border-radius: var(--raio); }
.semente p { margin: 0; }
.linha-2.ig-campos { grid-template-columns: minmax(0, 1fr) 8.5rem; }
/* com o painel de filtros aberto, Passar e Topo não ficam presos por cima dele */
body.filtrando .botoes-palco { position: static; background: none; }
.legenda-cores .f-cena { background: var(--f-cena); }
.legenda-cores .f-corpo { background: var(--f-corpo); }
.legenda-cores .f-som { background: var(--f-som); }
.legenda-cores .f-imagem { background: var(--f-imagem); }
.legenda-cores .f-bastidor { background: var(--f-bastidor); }
.cores-demo { margin: 0; border: 0; }
.cores-demo .rotulo { margin: 0; }
.pessoa-cores.grande { font-size: 1rem; color: var(--tinta); margin: 0; }
.pessoa-cores.grande .cinco { height: 30px; }
/* a área marcada fica na cor da sua família */
.chips input[data-familia="cena"]:checked + span { background: var(--f-cena); border-color: var(--f-cena); color: var(--sobre-cena); }
.chips input[data-familia="corpo"]:checked + span { background: var(--f-corpo); border-color: var(--f-corpo); color: var(--sobre-corpo); }
.chips input[data-familia="som"]:checked + span { background: var(--f-som); border-color: var(--f-som); color: var(--sobre-som); }
.chips input[data-familia="imagem"]:checked + span { background: var(--f-imagem); border-color: var(--f-imagem); color: var(--sobre-imagem); }
.chips input[data-familia="bastidor"]:checked + span { background: var(--f-bastidor); border-color: var(--f-bastidor); color: var(--sobre-bastidor); }

/* ————— celular, tablet e computador (30/10/2026) —————
   No celular tudo é uma coluna, na ordem de leitura. Do tablet para cima, o que é "de consulta" (filtros, foto,
   índice, dados da comunidade) fica parado numa coluna à esquerda e o conteúdo rola ao lado. */
.titulo-filtros { display: none; }
.perfil-pagina { display: grid; gap: 16px; margin: 20px 0; }
.perfil-foto .rosto.grande { max-height: 56svh; }
.perfil-corpo { min-width: 0; }
.perfil-corpo .secao-perfil { max-width: 46rem; }
.projeto { max-width: 40rem; margin-inline: auto; }
.projeto-novo { max-width: 38rem; margin-inline: auto; }
.previa-projeto { display: none; }
.previa-projeto h2 { font-size: 1.2rem; margin: 6px 0 12px; }
.previa-projeto .quadro { padding: 30px 18px 22px; }
.grupos-etiquetas { display: grid; gap: 0 28px; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.perfil-edicao { max-width: 40rem; margin-inline: auto; }
.comunidade-pagina { display: grid; gap: 8px; }
.comunidade-info { min-width: 0; }
.comunidade-info .acoes-principais ~ .acoes { margin-top: 12px; }
.comunidade-abas { min-width: 0; }
.filtros input[type="search"] { flex: 2 1 14rem; width: auto; }

@media (min-width: 700px) {
  .perfil-pagina { grid-template-columns: 15rem minmax(0, 1fr); gap: 32px; align-items: start; }
  .perfil-foto { position: sticky; top: 130px; }
  .perfil-foto .rosto.grande { max-height: none; }
  .lista-simples.em-colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .palco, .botoes-palco { max-width: 32rem; }
  .botoes-palco { margin-inline: auto; padding-inline: 0; }
}

@media (min-width: 1000px) {
  /* Explorar: os filtros abertos à esquerda (rolam por dentro se não couberem) e o cartão deitado à direita */
  .explorar { display: grid; grid-template-columns: 17.5rem minmax(0, 1fr); gap: 0 40px; align-items: start; }
  .lado-filtros { position: sticky; top: 132px; max-height: calc(100vh - 148px); overflow-y: auto; padding: 2px 6px 16px 2px; scrollbar-width: thin; }
  .titulo-filtros { display: block; font-size: 1.3rem; margin: 0 0 10px; }
  .lado-filtros .filtros { flex-direction: column; margin-bottom: 12px; }
  .lado-filtros .filtros select { flex: none; }
  .lado-filtros #mais, .lado-filtros #fechar-painel { display: none; }
  .explorar .painel-filtros[hidden] { display: block !important; }
  .lado-filtros .painel-filtros { margin: 0; padding: 14px; animation: none; }
  .lado-filtros .painel-filtros .grade { grid-template-columns: 1fr; }
  .lado-filtros .painel-filtros .acoes { justify-content: flex-start; }
  .lado-palco .ativos { margin: 0 0 14px; }
  .lado-palco .palco, .lado-palco .botoes-palco { max-width: 48rem; margin-inline: 0; }
  .lado-palco .cartao-pessoa { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .lado-palco .cartao-pessoa .rosto.grande { aspect-ratio: auto; height: 100%; min-height: 24rem; max-height: none; font-size: 6rem; }
  .lado-palco .cartao-pessoa .info { padding: 22px 24px; align-self: center; }
  .lado-palco .cartao-pessoa .bio { -webkit-line-clamp: 5; }
  .lado-palco .cartao-pessoa.atras { transform: translateY(10px) scale(.98); }
  /* Passar e Topo sempre à vista, presos embaixo, também no notebook de tela baixa */
  .lado-palco .botoes-palco { position: sticky; bottom: 0; z-index: 5; margin-top: 12px; padding: 12px 0 16px; background: linear-gradient(transparent, var(--fundo) 30%); }
  body.filtrando .lado-palco .botoes-palco { position: sticky; background: linear-gradient(transparent, var(--fundo) 30%); }
  .dica-palco { max-width: 48rem; }

  /* outro artista: a foto um pouco maior */
  .perfil-pagina { grid-template-columns: 19rem minmax(0, 1fr); gap: 44px; }

  /* meu perfil: o índice em pé à esquerda, o formulário ao lado */
  .perfil-edicao { max-width: none; display: grid; grid-template-columns: 12rem minmax(0, 40rem); gap: 0 48px; justify-content: center; }
  .perfil-edicao > .pagina-titulo { grid-column: 2; }
  .perfil-edicao > .indice { grid-column: 1; grid-row: 2; position: sticky; top: 134px; flex-direction: column; gap: 2px; margin: 8px 0 0; padding: 0; border: 0; background: none; overflow: visible; }
  .perfil-edicao > .indice a { min-height: 42px; padding: 0 14px; border-left: 3px solid var(--linha); border-radius: 0 var(--raio) var(--raio) 0; }
  .perfil-edicao > .indice a[aria-current] { border-left-color: var(--acento); }
  .perfil-form { grid-column: 2; grid-row: 2; min-width: 0; }
  .parte { scroll-margin-top: 130px; }

  /* uma comunidade: os dados e os botões parados à esquerda, as abas ao lado */
  .comunidade-pagina { grid-template-columns: 21rem minmax(0, 1fr); gap: 0 44px; align-items: start; }
  .comunidade-info { position: sticky; top: 124px; }
  .comunidade-info h1 { font-size: clamp(1.9rem, 3vw, 2.5rem); }
  .comunidade-info .acoes-principais { flex-direction: column; align-items: stretch; }
  .comunidade-abas .subabas { margin-top: 24px; }

  .so-celular { display: none; }

  /* um projeto: os detalhes de um lado e o "Topa?" parado do outro; para o dono, o projeto parado e as candidaturas */
  .projeto { max-width: none; }
  .projeto-pagina { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: 0 48px; align-items: start; }
  .projeto-lado { position: sticky; top: 124px; }
  .projeto-lado > .secao { padding-top: 24px; }
  .projeto-lado > .secao > h2 { margin-top: 20px; }
  .projeto-pagina.do-dono { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); }
  .projeto-pagina.do-dono .projeto-lado { position: static; }

  /* pendurar um projeto: o formulário e, ao lado, o bilhete como vai ficar no mural */
  .projeto-novo { max-width: none; display: grid; grid-template-columns: minmax(0, 38rem) minmax(0, 24rem); gap: 0 56px; justify-content: center; align-items: start; }
  .projeto-novo > .pagina-titulo { grid-column: 1 / -1; }
  .previa-projeto { display: block; position: sticky; top: 124px; }

  /* listas largas: mais colunas */
  .cartazes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .quadro.duplo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* recados da comunidade: bilhetinhos com um pedaço de fita */
.recado-form { margin-bottom: 8px; }
.recado-form .campo { margin-bottom: 10px; }
.recados { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 14px; }
.recado { position: relative; padding: 16px 16px 6px; background: var(--cartao); border-radius: 2px; box-shadow: var(--sombra); animation: entra .2s ease-out; }
.recado::before { content: ""; position: absolute; top: -8px; left: 18px; width: 56px; height: 16px; background: color-mix(in srgb, var(--fita) 80%, transparent); transform: rotate(-4deg); }
.recado:nth-child(2n)::before { left: auto; right: 22px; transform: rotate(3deg); }
.recado p { margin: 8px 0 4px; overflow-wrap: anywhere; }
.recado-quem { display: flex; align-items: center; gap: 10px; }
.recado-quem a { font-weight: 700; text-decoration: none; }
.recado-quem span { display: block; font-size: .85rem; }
.recados .vazio { list-style: none; }
@media (prefers-reduced-motion: reduce) { .recado { animation: none; } }

/* ————— conversas (30/10/2026) —————
   No celular, ou a lista ou a conversa (que ocupa a tela entre o topo e as abas); no computador, as duas lado a lado.
   As mensagens são tiras de papel: as minhas à direita, com um pouco do vermelho; as da outra pessoa à esquerda. */
.abas a { position: relative; }
.contagem-aba { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--acento); color: var(--sobre-acento); font: 700 .7rem/18px var(--fonte-texto); text-align: center; }
@media (min-width: 760px) { .contagem-aba { position: static; margin-left: 2px; } }
.conversas { display: grid; }
.painel-conversa { display: none; }
body.em-conversa .lista-conversas { display: none; }
body.em-conversa .painel-conversa { display: flex; }
body.em-conversa .rodape { display: none; }
body.em-conversa main { padding-bottom: 0; }
.painel-conversa { flex-direction: column; background: var(--fundo); }
/* no celular, a conversa aberta fica presa entre o topo e as abas (a caixa de escrever sempre à vista) */
@media (max-width: 899px) {
  body.em-conversa .painel-conversa { position: fixed; top: 61px; bottom: calc(61px + env(safe-area-inset-bottom)); left: 0; right: 0; z-index: 12; }
  body.em-conversa .faixa-previa { display: none; }
  body.em-conversa .topo { position: fixed; left: 0; right: 0; top: 0; }
}
.titulo-lista { font-size: 1.05rem; margin: 18px 0 6px; color: var(--tinta-suave); }
.conversas-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.item-conversa { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 64px; padding: 8px 10px; border-radius: var(--raio); color: inherit; text-decoration: none; transition: background-color .15s ease-out; }
.item-conversa:hover, .item-conversa.ativo { background: var(--fundo-2); }
.item-conversa.ativo { box-shadow: inset 3px 0 0 var(--acento); }
.item-texto { display: grid; min-width: 0; }
.item-texto b { font-family: var(--fonte-titulo); font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-texto .previa { color: var(--tinta-suave); font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-conversa.nao-lida .previa { color: var(--tinta); font-weight: 700; }
.item-lado { display: grid; justify-items: end; gap: 4px; font-size: .8rem; }
.item-lado .nota { font-size: .75rem; font-weight: 700; color: var(--acento); }
.sem-conversa { display: grid; place-items: center; flex: 1; padding: 24px; text-align: center; color: var(--tinta-suave); }
.conversa-cabeca { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--linha); background: var(--fundo); }
.conversa-cabeca .botao.zap { min-height: 40px; padding: 0 12px; }
.voltar-conversas { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; font: 700 1.4rem/1 var(--fonte-texto); text-decoration: none; border-radius: var(--raio); }
.quem-conversa { display: grid; min-width: 0; flex: 1; }
.quem-conversa a { font: 800 1.15rem/1.2 var(--fonte-titulo); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quem-conversa span { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mais-opcoes { position: relative; }
.mais-opcoes summary { list-style: none; cursor: pointer; display: inline-grid; place-items: center; min-height: 44px; padding: 0 10px; border: 1.5px solid var(--linha); border-radius: var(--raio); font-weight: 700; font-size: .9rem; }
.mais-opcoes summary::-webkit-details-marker { display: none; }
.mais-opcoes > div { position: absolute; right: 0; top: calc(100% + 6px); z-index: 8; display: grid; min-width: 15rem; padding: 6px 10px; background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); animation: abre .15s ease-out; }
.mais-opcoes > div .link-botao { text-align: left; }
.faixa-situacao { padding: 10px 14px; background: color-mix(in srgb, var(--fita) 26%, var(--cartao)); border-bottom: 1px solid var(--linha); }
.faixa-situacao p { margin: 0 0 6px; font-size: .95rem; }
.faixa-situacao p:last-child { margin: 0; }
.mensagens { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; margin: 0; padding: 14px 12px; display: flex; flex-direction: column; gap: 6px; }
.msg { align-self: flex-start; max-width: min(85%, 34rem); padding: 8px 12px 6px; background: var(--cartao); border: 1px solid var(--linha); border-radius: 2px 6px 6px 6px; box-shadow: 0 1px 1px rgba(60, 40, 20, .06); animation: entra .18s ease-out; }
.msg.meu { align-self: flex-end; background: color-mix(in srgb, var(--acento) 11%, var(--cartao)); border-color: color-mix(in srgb, var(--acento) 30%, var(--linha)); border-radius: 6px 2px 6px 6px; }
.msg.enviando { opacity: .6; }
.msg p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.msg .hora { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 2px; font-size: .75rem; color: var(--tinta-suave); }
.link-botao.mini { position: relative; min-height: 24px; padding: 0 2px; font-size: .75rem; }
/* o link é pequeno, mas o toque pega 44 px de altura (sem mudar a arrumação) */
.link-botao.mini::after { content: ''; position: absolute; inset: -10px -6px; }
.mensagens .dia { align-self: center; margin: 6px 0; padding: 2px 10px; font-size: .8rem; color: var(--tinta-suave); background: var(--fundo-2); border-radius: 10px; }
.mensagens .visto { align-self: flex-end; font-size: .75rem; color: var(--tinta-suave); margin-top: -2px; }
.escrever { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--linha); background: var(--fundo); }
.escrever textarea { flex: 1; min-height: 44px; max-height: 180px; resize: none; }
.escrever textarea:disabled { opacity: .5; }
@media (min-width: 900px) {
  .conversas { grid-template-columns: 21rem minmax(0, 1fr); gap: 0 28px; align-items: start; }
  .lista-conversas, body.em-conversa .lista-conversas { display: block; position: sticky; top: 124px; max-height: calc(100vh - 140px); overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }
  .painel-conversa, body.em-conversa .painel-conversa { display: flex; position: sticky; top: 124px; height: calc(100vh - 224px); min-height: 420px; margin: 24px 0 0; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--cartao); overflow: hidden; }
  .voltar-conversas { display: none; }
  body.em-conversa .rodape { display: block; }
  body.em-conversa main { padding-bottom: 40px; }
  .mensagens { background: var(--fundo); }
}
@media (prefers-reduced-motion: reduce) { .msg, .mais-opcoes > div { animation: none; } .item-conversa { transition: none; } }

/* a conversa da comunidade e do projeto: respostas recuadas, o "Topo" e o aviso de mensagens novas */
.recado-acoes { gap: 4px 12px; }
.botao-topo { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 2px solid var(--linha); border-radius: var(--raio); background: var(--cartao); color: var(--tinta-suave); font: 700 .9rem var(--fonte-texto); cursor: pointer; transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out, transform .15s ease-out; }
.botao-topo:active { transform: scale(.96); }
.botao-topo.ligado { background: var(--fita); border-color: var(--fita); color: var(--sobre-fita); }
.botao-topo span { font-variant-numeric: tabular-nums; }
.respostas { list-style: none; margin: 6px 0 4px; padding: 0 0 0 14px; border-left: 3px solid var(--linha); display: grid; gap: 10px; }
.resposta p { margin: 4px 0 0; overflow-wrap: anywhere; }
.resposta .rosto.pequeno { width: 32px; height: 32px; font-size: .8rem; }
.responder { display: flex; align-items: flex-end; gap: 8px; margin: 8px 0 10px; }
.responder textarea { flex: 1; min-height: 44px; }
.novidade-conversa { display: block; margin: 0 auto 10px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 20px; background: var(--tinta); color: var(--fundo); font: 700 .9rem var(--fonte-texto); cursor: pointer; animation: entra .2s ease-out; }
.marca-dono { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 2px; background: var(--acento); color: var(--sobre-acento); font-size: .72rem; font-weight: 700; }
.recado.do-dono { border-left: 4px solid var(--acento); }
.conversa-projeto h2 { font-size: 1.4rem; margin: 0 0 4px; }
.conversa-projeto > .suave { margin: 0 0 12px; font-size: .92rem; }
.conversa-projeto .recado-form { margin-top: 16px; }
.projeto-detalhe > .acoes { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .botao-topo { transition: none; } .novidade-conversa { animation: none; } }

/* ———— os avisos (30/10/2026) ———— */
.avisos-pagina { display: grid; gap: 24px; margin-top: 8px; }
.grupo-avisos + .grupo-avisos { margin-top: 18px; }
.dia-avisos { font: 700 .85rem/1.4 var(--fonte-texto); color: var(--tinta-suave); margin: 0 0 6px; }
.lista-avisos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); }
.lista-avisos li { border-bottom: 1px solid var(--linha); }
.lista-avisos a { display: flex; align-items: center; gap: 12px; padding: 12px 10px; min-height: 64px; color: var(--tinta); text-decoration: none; border-left: 3px solid transparent; transition: background-color .15s ease-out; }
.lista-avisos a:hover { background: var(--fundo-2); }
.item-aviso.novo a { border-left-color: var(--acento); background: var(--fundo-2); }
.aviso-texto { display: grid; gap: 2px; min-width: 0; }
.aviso-texto .suave { font-size: .85rem; }
.rosto-aviso { flex: none; width: 40px; height: 40px; border-radius: 4px; background: var(--acento); }
.atalhos-avisos h2 { font-size: 1.05rem; margin: 0 0 8px; }
.atalhos-avisos ul { list-style: none; margin: 0; padding: 0; }
.atalhos-avisos a { display: block; padding: 10px 0; min-height: 44px; }
@media (min-width: 1000px) {
  .avisos-pagina { grid-template-columns: minmax(0, 1fr) 18rem; gap: 0 48px; align-items: start; }
  .atalhos-avisos { position: sticky; top: 124px; margin-top: 92px; padding: 18px 20px; background: var(--fundo-2); border-radius: 4px; }
}
.filtros input[type="search"] { flex: 1 1 14rem; min-width: 0; }
.ver-mais-mural { display: block; margin: 18px auto 0; }
.elenco { margin-top: 22px; }
.titulo-pequeno { font-size: 1.05rem; margin: 16px 0 8px; }
.elenco h2 { font-size: 1.2rem; margin: 0 0 10px; }
/* o "Desfazer o Passar" do Explorar: uma etiqueta de papel sobre os botões, por alguns segundos (no celular eles
   já ficam presos com sticky, que também segura a etiqueta) */
@media (min-width: 760px) { .botoes-palco { position: relative; } }
.desfazer { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); min-height: 40px; padding: 8px 14px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--cartao); color: var(--tinta); font: 700 .9rem/1.2 var(--fonte-texto); box-shadow: var(--sombra); cursor: pointer; white-space: nowrap; animation: entra .2s ease-out both; }