/* canga (10/10/2026): fundo creme, texto escuro, uma cor de destaque */
@font-face { font-family: 'Distro'; src: url('/fonts/DISTROH.woff2') format('woff2'); font-display: swap; }
:root { --fundo: #FFFBF3; --texto: #2b2925; --leve: #C8C4B9; --destaque: #F48591; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
a, button, input, select, textarea, [tabindex] { outline: none; -webkit-tap-highlight-color: transparent; }
:focus, :focus-visible { outline: none; box-shadow: none; }
html, body { margin: 0; background: var(--fundo); color: var(--texto); }
body { font-family: 'Distro', system-ui, sans-serif; letter-spacing: .04em; min-height: 100vh; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* o nome em pé, do ladinho (girado 90° para a esquerda); a mesa fica com o resto da tela */
.topo { position: fixed; left: 10px; top: 0; bottom: 0; z-index: 20; width: 72px; background: none; pointer-events: none;
  display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-content: center; align-items: baseline; gap: 24px; padding: 48px 0;
  writing-mode: vertical-rl; transform: rotate(180deg); }
.topo > * { pointer-events: auto; }
.marca { font-size: 33px; text-transform: uppercase; letter-spacing: .14em; transform: scaleY(1.15); padding: 0; } /* 11/10/2026: sempre maiúsculo, um pouco maior, esticado e afastado */
.titulo { font-size: 12px; color: #AC0000; padding: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 70vh; }
.estado { font-size: 13px; color: var(--leve); white-space: nowrap; }
.zoom { position: fixed; top: 24px; right: 32px; z-index: 21; display: flex; align-items: center; gap: 4px; font-size: 14px;
  padding: 6px 24px; }
body { padding-left: 0; }

/* a lista da obra */
.vazio { grid-column: 1 / -1; font-size: 16px; color: #8a867c; padding-top: 48px; }

/* a mesa: páginas uma embaixo da outra */
.mesa { padding: 72px 0 160px; overflow-x: auto; }
.paginas { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; width: max-content; min-width: 100%; padding: 0 48px; }
.moldura { margin: 0 auto; }
.zoom button { min-width: 34px; height: 34px; font-size: 18px; }
.zoom #z-val { font-size: 14px; min-width: 56px; }
.moldura { position: relative; box-shadow: 0 1px 12px rgba(43, 41, 37, .08); }
.pagina { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; }
.el { position: absolute; transform-origin: 50% 50%; }
.el.sel { box-shadow: 0 0 0 calc(2px / var(--esc)) var(--destaque); }
.el img, .el svg { display: block; width: 100%; height: 100%; pointer-events: none; }
.el.img-corte { overflow: hidden; }
.el.img-corte img { position: absolute; max-width: none; }
.texto { display: flex; flex-direction: column; white-space: pre-wrap; overflow-wrap: break-word; }
.texto p { margin: 0; }
.texto[contenteditable="true"] { cursor: text; }
.puxador { position: absolute; width: calc(14px / var(--esc)); height: calc(14px / var(--esc)); right: calc(-7px / var(--esc)); bottom: calc(-7px / var(--esc));
  background: var(--fundo); border: calc(2px / var(--esc)) solid var(--destaque); border-radius: 50%; cursor: nwse-resize; }

/* a barra de editar */
.barra { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 6px;
  padding: 10px 28px; background: var(--texto); color: var(--fundo); border-radius: 999px; font-size: 15px; }
.barra[hidden] { display: none; }
.barra button { color: var(--fundo); min-width: 34px; height: 34px; font-size: 18px; }
.barra select { font: inherit; font-size: 14px; color: var(--fundo); background: none; border: 0; max-width: 180px; padding: 0 8px; }
.barra select option { color: var(--texto); }
.barra .tam { min-width: 40px; text-align: center; font-size: 14px; }
.barra .cor { position: relative; width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer; }
.barra .cor input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.barra .cor span { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--fundo); }

/* as fontes da plataforma (11/10/2026): uma para a logo, uma para o resto; cada nome escrito na própria fonte */
@font-face { font-family: 'General Sans'; src: url(/fonts/GeneralSans-400.woff2) format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: 'General Sans'; src: url(/fonts/GeneralSans-500.woff2) format('woff2'); font-weight: 500; font-display: block; }
/* capa: os cartões do showcasecardpreview.framer.website, medidas do original */
.lista { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 32px; padding: 72px 48px 96px; }
.cartao { font-family: 'General Sans', system-ui, sans-serif; position: relative; width: 390px; padding: 10px; background: #fff; border-radius: 44px; /* bordinha igual nos quatro lados */ color: #1c1c1c; }
.cartao .foto { position: relative; height: 260px; border-radius: 34px; overflow: hidden; box-shadow: rgba(0,0,0,.08) 0 .8px .8px -.5px, rgba(0,0,0,.08) 0 2.4px 2.4px -1px, rgba(0,0,0,.09) 0 6.4px 6.4px -1.5px, rgba(0,0,0,.12) 0 20px 20px -2px; }
.cartao .capa { position: absolute; inset: 0; background: #f3eee4 center/cover no-repeat; }
.cartao .borra, .cartao .borra i { position: absolute; left: 0; right: 0; top: 0; height: 265px; pointer-events: none; }
.cartao .foto::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.06) 25%, rgba(0,0,0,.2) 55%, rgba(0,0,0,.38)); pointer-events: none; } /* teste 11/10/2026: escurinho leve para ler o nome */
.cartao .rodape { z-index: 1; position: absolute; left: 0; right: 0; bottom: 18px; height: 81px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 24px; text-align: center; }
.cartao .nomes { min-width: 0; flex: 1; }
.cartao .foto { cursor: pointer; }
.cartao h2 { margin: 0; font-size: 16px; line-height: 1.2; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartao .nomes p { margin: 0; font-size: 12px; line-height: 1.2; color: rgba(255,255,255,.6); }
.painel-letras { position: fixed; left: 72px; top: 0; bottom: 0; width: max-content; max-width: calc(100vw - 72px); z-index: 40; background: var(--fundo);
  box-shadow: 1px 0 24px rgba(43, 41, 37, .08); display: flex; flex-direction: column; }
.painel-letras .para { display: flex; gap: 28px; padding: 48px 32px 20px; font-size: 15px; }
.painel-letras .para button { color: var(--leve); padding: 0; }
.painel-letras .para button.ativo { color: var(--texto); }
.lista-letras { overflow-y: auto; padding: 48px 32px 64px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.lista-letras button { transition: opacity .3s; font-size: 24px; line-height: 1.3; text-align: left; padding: 4px 0; letter-spacing: 0; text-transform: lowercase; }
.lista-letras button.esta { color: var(--destaque); }

/* o pontinho do fundo: o mesmo que pisca na fumaça do lle.sh/links */
.fundo-b { position: fixed; left: 21px; bottom: calc(30px + env(safe-area-inset-bottom)); width: 30px; height: 30px; z-index: 22; padding: 0; display: grid; place-items: center; }
.fundo-b i { position: absolute; left: 10px; top: 10px; width: 10px; height: 10px; border-radius: 999px; background: var(--texto); pointer-events: none; }
#fumaca-ponto i { background: var(--texto) !important; } /* 11/10/2026: pontinhos das cores na cor das letras (claro ou escuro), nunca rosa */
.fundo-b i.anel { opacity: 0; animation: fundoAnel 1.6s cubic-bezier(.44,0,.56,1) .4s infinite; }
@keyframes fundoAnel { 0% { opacity: 0; transform: scale(1) } 1.5% { opacity: .75; transform: scale(1) } 60% { opacity: 0; transform: scale(2.4) } 75%, 100% { opacity: 0; transform: scale(1) } }
.fundo-p { position: fixed; left: 14px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 44px; padding: 22px 0; border-radius: 100px; background: rgba(255,255,255,.92); }
.fundo-p[hidden] { display: none; }
.fundo-p > *, .barra .paleta { position: relative; z-index: 10; }
.fundo-p button, .barra .paleta button { flex: none; width: 16px; height: 16px; min-width: 0; padding: 0; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 1px 3px rgba(0,0,0,.15); }
.fundo-p { height: 168px; overflow-y: auto; scrollbar-width: none; padding: 75px 0; gap: 12px; scroll-snap-type: y mandatory; -webkit-mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent); mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent); background: none; }
.fundo-p::-webkit-scrollbar { display: none; }
.fundo-p button { width: 18px; height: 18px; border: 0; transition: transform .3s; }
.fundo-p button { scroll-snap-align: center; transition: transform .15s; }
.barra .paleta { display: flex; gap: 8px; padding: 0 8px; }
.barra .paleta button { height: 16px; }

@media (max-width: 700px) {
  .fundo-b { left: 9px; }
  .fundo-p { left: 4px; width: 40px; bottom: calc(112px + env(safe-area-inset-bottom)); }
  #fumaca-ponto { right: auto !important; left: 9px !important; bottom: calc(70px + env(safe-area-inset-bottom)) !important; }
  #fumaca { right: auto !important; left: 48px !important; bottom: calc(63px + env(safe-area-inset-bottom)) !important; max-width: calc(100vw - 64px); }
  .painel-letras { left: 48px; max-width: calc(100vw - 48px); }
  .lista-letras { padding: 32px 24px 64px; }
  .topo { left: 0; width: 48px; padding: 32px 0; gap: 16px; }
  body { padding-left: 0; }
  .marca { font-size: 26px; }
  .zoom { top: 12px; right: 12px; padding: 4px 16px; }
  .lista { flex-direction: column; align-items: center; gap: 24px; padding: 32px 16px 96px; }
  .cartao { width: 100%; max-width: 390px; }
  .paginas { padding: 0 16px; }
  .barra { bottom: calc(16px + env(safe-area-inset-bottom)); padding: 8px 24px; max-width: calc(100vw - 32px); overflow-x: auto; }
}

/* 11/10/2026: o trilho, a gaveta e as duas telas do mirastudio.framer.website (medidas do original) */
@font-face { font-family: 'Mona Sans'; src: url(/fonts/MonaSans.woff2) format('woff2'); font-weight: 200 900; font-stretch: 75% 125%; font-display: block; }
.marca { display: none; }
.topo { left: 59px; }
.mesa { padding-left: 59px; }
.trilho { position: fixed; left: 3px; top: 3px; bottom: 3px; width: 56px; z-index: 46; background: #0d0d0d; border-radius: 12px; color: #fff; font-family: 'Mona Sans', sans-serif; }
.t-grade { position: absolute; left: 20px; top: 30px; width: 16px; height: 16px; padding: 0; display: grid; grid-template-columns: 7px 7px; gap: 2px; }
.t-grade i { width: 7px; height: 7px; border-radius: 2px; background: #fff; transition: transform .35s cubic-bezier(.44,0,.56,1), opacity .25s; }
.trilho.aberto .t-grade i:nth-child(1) { transform: translate(4.5px, 4.5px) rotate(45deg) scaleX(2.6); border-radius: 1px; height: 1.6px; }
.trilho.aberto .t-grade i:nth-child(4) { transform: translate(-4.5px, -4.5px) rotate(-45deg) scaleX(2.6); border-radius: 1px; height: 1.6px; }
.trilho.aberto .t-grade i:nth-child(2), .trilho.aberto .t-grade i:nth-child(3) { opacity: 0; }
.t-pe { position: absolute; left: 12px; bottom: 32px; width: 32px; height: 96px; border: 1px solid rgba(255,255,255,.35); border-radius: 2px; display: flex; flex-direction: column; align-items: center; }
.t-pe span { flex: 1; display: flex; align-items: center; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 15px; font-variation-settings: "wdth" 75, "wght" 675; letter-spacing: -.3px; border-bottom: 1px solid rgba(255,255,255,.35); width: 100%; justify-content: center; }
.t-pe svg { width: 15px; height: 15px; margin: 8px 0; }
.gaveta { position: fixed; left: 3px; top: 3px; bottom: 3px; width: 493px; max-width: calc(100vw - 6px); z-index: 45; background: #0d0d0d; border-radius: 12px; padding: 128px 32px 32px 86px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; font-family: 'Mona Sans', sans-serif; }
.gaveta[hidden] { display: none; }
.g-itens { display: flex; flex-direction: column; align-items: flex-start; }
.g-itens button { color: #fff; font-size: 40px; line-height: 44px; font-variation-settings: "wdth" 75, "wght" 675; letter-spacing: -.8px; text-transform: uppercase; padding: 3px 0; }
.g-pe { margin: 0; font-size: 12px; line-height: 1.25; font-variation-settings: "wdth" 100, "wght" 500; }
.capa[hidden] { display: none; }
.tela { position: relative; height: 100vh; height: 100dvh; }
.tela iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
#tela2 .lista { position: absolute; left: 62px; top: 3px; right: 3px; bottom: 3px; border-radius: 12px; overflow-y: auto; scrollbar-width: none; margin: 0; }
#tela2 .lista::-webkit-scrollbar { display: none; }
@media (max-width: 700px) {
  .tela iframe { left: 59px; width: calc(100% - 59px); }
  #tela2 .lista { left: 62px; padding: 16px 12px 96px; }
  .topo { left: 59px; }
  .mesa { padding-left: 59px; }
  .gaveta { padding: 128px 24px 32px 80px; }
}
.fundo-b { left: 74px; }
.fundo-p { left: 67px; }

/* 11/10/2026: as duas bolinhas de cor moram dentro do trilho preto (em qualquer tamanho) */
@media (min-width: 0) {
  .fundo-b { left: 16px; bottom: 180px; z-index: 47; }
  .fundo-b i { background: #fff; }
  #fumaca-ponto { right: auto !important; left: 16px !important; bottom: 142px !important; z-index: 47 !important; }
  #fumaca-ponto i { background: #fff !important; }
  .fundo-p { left: 67px; bottom: 111px; z-index: 47; }
  #fumaca { right: auto !important; left: 70px !important; bottom: 135px !important; z-index: 47 !important; }
}

/* 11/10/2026: a capa é uma tela só, fixa (nada embaixo); a dos cartões é outra página (#projetos) */
@media (min-width: 0) {
  .tela { position: fixed; inset: 0; height: auto; }
  .tela[hidden] { display: block; visibility: hidden; pointer-events: none; } /* escondida mas do tamanho da tela, para o modelo desenhar o vídeo */
}
/* 11/10/2026: na página dos projetos, nada de vídeo atrás: uma cor só (a da bolinha de cima do trilho) */
@media (min-width: 0) {
  #tela2 iframe { display: none; }
  #tela2 .lista { background: var(--fundo); }
}

/* 11/10/2026: janela pequena com o mesmo tema: o trilho continua do lado */
@media (max-width: 700px) {
  .marca { display: none; }
  #tela2 .lista { flex-direction: row; padding: 24px 12px 96px; }
  .cartao { width: 100%; max-width: 390px; }
}
/* abaixo de 1200px o modelo não guarda lugar para o trilho: a cópia fica ao lado do nosso */
@media (max-width: 1199px) { .tela iframe { left: 59px; width: calc(100% - 59px); } }

/* 11/10/2026: o zoom mora dentro do trilho, em pé; a seta lá em cima recolhe o trilho */
.zoom { position: fixed; left: 3px; top: 64px; right: auto; width: 56px; z-index: 47; flex-direction: column; gap: 2px; padding: 0; background: none; color: #fff; font-family: 'Mona Sans', sans-serif; box-shadow: none; }
.zoom[hidden] { display: none; }
.zoom button { color: #fff; min-width: 0; width: 56px; height: 28px; font-size: 18px; }
.zoom #z-val { font-size: 11px; min-width: 0; height: 22px; font-variation-settings: "wdth" 75, "wght" 600; }
.t-seta { position: fixed; left: 19px; top: 8px; z-index: 48; width: 24px; height: 18px; padding: 0; color: #fff; transition: left .35s cubic-bezier(.44,0,.56,1), color .2s; }
.t-seta svg { width: 18px; height: 18px; transition: transform .35s; }
.t-grade { top: 34px; }
.trilho, .fundo-b, #fumaca-ponto, .zoom { transition: transform .35s cubic-bezier(.44,0,.56,1); }
body.trilho-fora .trilho, body.trilho-fora .fundo-b, body.trilho-fora .zoom { transform: translateX(-70px); }
body.trilho-fora #fumaca-ponto { transform: translateX(-70px) !important; }
body.trilho-fora .gaveta, body.trilho-fora .fundo-p { display: none !important; }
body.trilho-fora .t-seta { left: 8px; color: var(--texto); }
body.trilho-fora .t-seta svg { transform: rotate(180deg); }
@media (max-width: 700px) { .zoom { top: 64px; right: auto; padding: 0; } }

/* 11/10/2026: versão b dos projetos: o nome sai de cima da imagem e vai para a parte branca de baixo */
.versao-b .cartao { padding: 10px 10px 0; }
.versao-b .cartao .rodape { position: static; height: 58px; padding: 0 24px; }
.versao-b .cartao h2 { color: #1c1c1c; }
.versao-b .cartao .nomes p { color: rgba(0,0,0,.45); }
.versao-b .cartao .foto::after { display: none; }
/* 11/10/2026: a seta fica embaixo dos quadradinhos; o zoom desce junto */
.t-grade { top: 30px; }
.t-seta { top: 60px; }
.zoom { top: 92px; }
@media (max-width: 700px) { .zoom { top: 92px; } }

/* 11/10/2026: no lugar dos quadradinhos, um C gordo (Thumpa); o trilho fica branco e tudo nele em preto */
@font-face { font-family: 'Thumpa C'; src: url(/fonts/ThumpaC.woff2) format('woff2'); font-display: block; }
.t-grade.t-c { display: block; left: 0; width: 56px; height: 30px; top: 24px; font-family: 'Thumpa C', sans-serif; font-size: 30px; line-height: 30px; text-align: center; color: #0d0d0d; }
.trilho { background: #fff; color: #0d0d0d; }
.t-pe { border-color: rgba(0,0,0,.35); }
.t-pe span { border-bottom-color: rgba(0,0,0,.35); }
.t-seta { color: #0d0d0d; }
.zoom, .zoom button { color: #0d0d0d; }
.fundo-b i { background: #0d0d0d; }
#fumaca-ponto i { background: #0d0d0d !important; }
/* 11/10/2026: trilho amarelo limão (o mesmo #D1FF00 do modelo), tudo nele em preto */
.trilho { background: #D1FF00; }
/* 11/10/2026: o C dentro de um squircle com a combinação principal do scrap.boook.ing (ivy: fundo #1A2829, letra #F7DFD2) */
.t-grade.t-c { left: 8px; top: 14px; width: 40px; height: 40px; line-height: 40px; font-size: 26px; background: #1A2829; color: #F7DFD2; border-radius: 30%; }
@supports (corner-shape: squircle) { .t-grade.t-c { border-radius: 50%; corner-shape: squircle; } }
.t-seta { top: 66px; }
.zoom { top: 96px; }
@media (max-width: 700px) { .zoom { top: 96px; } }

/* 11/10/2026: a fonte oficial do C do trilho e do CANGA da capa passa a ser a Trivane (ela mandou o arquivo) */
@font-face { font-family: 'Trivane C'; src: url(/fonts/TrivaneC.woff2) format('woff2'); font-display: block; }
.t-grade.t-c { font-family: 'Trivane C', sans-serif; }

/* 11/10/2026: o painel do cartao.lle.sh, no mesmo lugar do painel dos projetos */
#tela3 iframe { left: 62px; top: 3px; right: 3px; bottom: 3px; width: auto; height: auto; border-radius: 12px; background: #FFFBF3; }
#tela3 iframe { width: calc(100% - 65px); height: calc(100% - 6px); }
/* 11/10/2026: o C solto no amarelo (sem o squircle), a seta um pouco mais embaixo, o EST. 2026 numa pílula em pé, as bolinhas mais altas e mais juntas */
.t-grade.t-c { left: 0; top: 22px; width: 56px; height: 36px; line-height: 36px; font-size: 32px; background: none; color: #0d0d0d; border-radius: 0; corner-shape: round; }
.t-seta { top: 78px; }
.zoom { top: 108px; }
@media (max-width: 700px) { .zoom { top: 108px; } }
.t-pe { border-radius: 999px; height: 104px; padding: 4px 0; }
.t-pe span { border-bottom: 0; }
.fundo-b { bottom: 206px; }
#fumaca-ponto { bottom: 178px !important; }
.fundo-p { bottom: 140px; }
#fumaca { bottom: 171px !important; }
/* 11/10/2026: a pílula em pé é o trilho amarelo inteiro; a caixinha do EST. 2026 volta como era */
.trilho { border-radius: 999px; }
.t-pe { border-radius: 2px; height: 96px; padding: 0; }
.t-pe span { border-bottom: 1px solid rgba(0,0,0,.35); }
/* as bolinhas sobem lá para cima, logo embaixo da seta; o zoom (só no design) vem depois delas */
.fundo-b { bottom: auto; top: 112px; }
#fumaca-ponto { bottom: auto !important; top: 146px !important; }
.fundo-p { bottom: auto; top: 60px; }
#fumaca { bottom: auto !important; top: 139px !important; }
.zoom { top: 186px; }
@media (max-width: 700px) { .zoom { top: 186px; } }
/* 11/10/2026: o C e a seta descem; as bolinhas descem junto para não encostar */
.t-grade.t-c { top: 40px; }
.t-seta { top: 98px; }
.fundo-b { top: 132px; }
#fumaca-ponto { top: 166px !important; }
.fundo-p { top: 80px; }
#fumaca { top: 159px !important; }
.zoom { top: 206px; }
@media (max-width: 700px) { .zoom { top: 206px; } }
/* trilho escondido: a tela fica com a mesma margem fininha dos dois lados (nada de buraco à esquerda) */
.tela iframe, #tela2 .lista { transition: left .35s cubic-bezier(.44,0,.56,1), width .35s cubic-bezier(.44,0,.56,1); }
body.trilho-fora .tela iframe { left: -59px; width: calc(100% + 59px); }
body.trilho-fora #tela2 .lista { left: 3px; }
body.trilho-fora #tela3 iframe { left: 3px; width: calc(100% - 6px); }
@media (max-width: 1199px) { body.trilho-fora .tela iframe { left: 0; width: 100%; } }

/* ===== 11/10/2026: o trilho do fruitfy.app (medidas e cores do original) ===== */
.trilho, .gaveta, .t-seta, #fumaca-ponto { display: none !important; }
.ff { --w: 56px; position: fixed; left: 15px; top: 15px; bottom: 15px; width: var(--w); z-index: 46; background: #b30012; border-radius: 33px; color: #fff; font-family: Inter, system-ui, sans-serif; overflow: hidden; transition: width .3s cubic-bezier(.22,1,.36,1); }
body.ff-aberta .ff { --w: 320px; }
.ff button { color: inherit; font: inherit; padding: 0; background: none; border: 0; cursor: pointer; }
.ff svg { display: block; }
.ff-abre { position: absolute; left: 18px; top: 24px; width: 20px; height: 20px; transition: left .3s cubic-bezier(.22,1,.36,1), top .3s, width .3s, height .3s; }
.ff-abre svg { width: 100%; height: 100%; }
.ff-abre .a, body.ff-aberta .ff-abre .f { display: none; }
body.ff-aberta .ff-abre .a { display: block; }
body.ff-aberta .ff-abre { left: 270px; top: 26px; width: 24px; height: 24px; }
.ff-eu { position: absolute; left: 16px; top: 60px; display: flex; align-items: center; gap: 15px; white-space: nowrap; transition: left .3s cubic-bezier(.22,1,.36,1); }
.ff-foto { width: 24px; height: 24px; border-radius: 999px; overflow: hidden; display: grid; place-items: center; flex: none; transition: width .3s, height .3s; }
.ff-foto img { width: 20px; height: 20px; border-radius: 999px; object-fit: cover; transition: width .3s, height .3s; }
body.ff-aberta .ff-eu { left: 60px; }
body.ff-aberta .ff-foto { width: 48px; height: 48px; }
body.ff-aberta .ff-foto img { width: 40px; height: 40px; }
.ff-nome { display: flex; flex-direction: column; font-size: 14px; line-height: 18px; opacity: 0; transition: opacity .2s; }
.ff-nome b { font-weight: 500; color: #fff; } .ff-nome i { font-style: normal; font-weight: 400; color: rgba(255,255,255,.5); }
body.ff-aberta .ff-nome { opacity: 1; transition-delay: .1s; }
.ff-lista { position: absolute; left: 0; right: 0; top: 225px; height: 288px; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column;
  -webkit-mask-image: linear-gradient(transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); padding: 0; transition: top .3s cubic-bezier(.22,1,.36,1); }
.ff-lista::-webkit-scrollbar { display: none; }
body.ff-aberta .ff-lista { top: 263px; }
.ff .ff-item { flex: none; display: flex; align-items: center; gap: 11px; height: 28px; padding: 0 0 0 20px; color: rgba(255,255,255,.5) !important; font-size: 13px; line-height: 16px; text-decoration: none; white-space: nowrap; text-align: left; transition: padding .3s cubic-bezier(.22,1,.36,1); }
.ff-item svg { width: 16px; height: 16px; flex: none; fill: currentColor; opacity: .5; }
.ff-item span { opacity: 0; transition: opacity .2s; }
body.ff-aberta .ff .ff-item { padding-left: 61px; }
body.ff-aberta .ff-item span { opacity: 1; transition-delay: .1s; }
.ff-item.ff-nosso { color: #fff !important; }
.ff-item.ff-nosso svg { opacity: 1; }
.ff-baixo { position: absolute; left: 10px; bottom: 73px; display: flex; flex-direction: column; gap: 0; transition: left .3s cubic-bezier(.22,1,.36,1), bottom .3s; }
.ff-par { display: flex; flex-direction: column; gap: 0; border-radius: 999px; transition: background .2s; }
.ff-b { width: 36px; height: 36px; border-radius: 999px !important; display: grid !important; place-items: center; }
.ff-b svg { width: 18px; height: 18px; }
#ff-lua svg, #ff-sol svg { fill: currentColor; }
.ff-b.on { background: rgba(255,251,243,.25) !important; }
.ff-aa { font-size: 15px !important; font-weight: 600 !important; color: #fffbf3 !important; }
body.ff-aberta .ff-baixo { left: 60px; bottom: 117px; flex-direction: row; gap: 8px; }
body.ff-aberta .ff-par { flex-direction: row; gap: 4px; padding: 6px; background: rgba(255,255,255,.15); }
.ff-pe { position: absolute; left: 13px; bottom: 21px; display: flex; align-items: center; gap: 15px; white-space: nowrap; transition: left .3s, bottom .3s; }
.ff-anel { width: 30px; height: 30px; border-radius: 999px !important; border: 1px solid rgba(255,255,255,.25) !important; flex: none; transition: width .3s, height .3s; }
body.ff-aberta .ff-pe { left: 60px; bottom: 45px; }
body.ff-aberta .ff-anel { width: 48px; height: 48px; }
/* zoom (só no design): logo embaixo da foto */
.ff .zoom { position: absolute; left: 0; top: 96px; width: 56px; z-index: 1; }
.ff .zoom button { color: #fff; }
/* o conteúdo começa depois do trilho, com a mesma margem (15px) */
.tela iframe, #tela2 .lista, #tela3 iframe, .topo, .mesa, .painel-letras { transition: left .3s cubic-bezier(.22,1,.36,1), width .3s cubic-bezier(.22,1,.36,1), padding .3s; }
.tela iframe { left: 24px; width: calc(100% - 36px); }
body.ff-aberta .tela iframe { left: 288px; width: calc(100% - 300px); }
@media (max-width: 1199px) {
  .tela iframe { left: 86px; width: calc(100% - 101px); }
  body.ff-aberta .tela iframe { left: 350px; width: calc(100% - 365px); }
}
#tela2 .lista { left: 86px; top: 15px; right: 15px; bottom: 15px; border-radius: 33px; }
body.ff-aberta #tela2 .lista { left: 350px; }
#tela3 iframe { left: 86px; top: 15px; width: calc(100% - 101px); height: calc(100% - 30px); border-radius: 33px; }
body.ff-aberta #tela3 iframe { left: 350px; width: calc(100% - 365px); }
.topo { left: 86px; }
.mesa { padding-left: 86px; }
.painel-letras { left: 86px; }
body.ff-aberta .topo, body.ff-aberta .painel-letras { left: 350px; }
body.ff-aberta .mesa { padding-left: 350px; }
.fundo-p { top: auto; bottom: 120px; left: 80px; z-index: 47; }
#fumaca { top: auto !important; bottom: 20px !important; left: 80px !important; right: auto !important; z-index: 47 !important; }
body.ff-aberta .fundo-p, body.ff-aberta #fumaca { left: 345px !important; }

/* 11/10/2026: na capa não tem trilho (ele só aparece depois de entrar); a foto fica com margem igual dos dois lados */
body.na-capa .ff, body.na-capa .fundo-p, body.na-capa #fumaca { display: none !important; }
body.na-capa #tela1 iframe { left: -59px; width: calc(100% + 59px); }
@media (max-width: 1199px) { body.na-capa #tela1 iframe { left: 0; width: 100%; } }

/* 11/10/2026: a capa fica escura até o vídeo estar sozinho e o CANGA pronto (nada do modelo aparece antes) */
#tela1 { background: #0d0d0d; }
#tela1 iframe { opacity: 0; transition: opacity .6s; }
#tela1 iframe.pronta { opacity: 1; }

/* ===== 11/10/2026: capa nossa: pinturas em movimento passando uma depois da outra, véu leve e o CANGA no meio ===== */
#tela1 { background: #0d0d0d; }
.capa-arte { position: absolute; inset: 3px; border-radius: 12px; overflow: hidden; background: #0d0d0d; cursor: pointer; }
.capa-arte video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.5s ease; }
.capa-arte video.on { opacity: 1; }
.capa-veu { position: absolute; inset: 0; background: rgba(0,0,0,.18); pointer-events: none; }
.capa-nome { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity .8s; }
.capa-arte.pronta .capa-nome { opacity: 1; }
.capa-nome .canga-nome { position: relative; font-family: 'Trivane C', sans-serif; color: #fff; line-height: 1; white-space: nowrap; }
.capa-nome .canga-nome span { display: inline-block; position: relative; text-shadow: -.035em 0 .05em rgba(0,0,0,.45), 0 .04em .14em rgba(0,0,0,.35); }
.capa-nome .canga-r { width: 2.1vw; min-width: 18px; height: auto; align-self: center; margin: -9.5vw 0 0 .3vw; filter: drop-shadow(0 1px 3px rgba(0,0,0,.4)); }

/* 11/10/2026: as pinturas com zoom suave do navegador (no lugar dos vídeos que tremiam) */
.capa-arte .quadro { position: absolute; inset: 0; background: #0d0d0d center/cover no-repeat; opacity: 0; transition: opacity 1.5s ease; will-change: transform, opacity; transform: scale(1) translate3d(0,0,0); }
.capa-arte .quadro.on { opacity: 1; }
.capa-arte .quadro.anda { animation: cangaZoom 12s linear forwards; }
@keyframes cangaZoom { from { transform: scale(1) translate3d(0,0,0); } to { transform: scale(1.12) translate3d(-1.2%,0,0); } }

/* 11/10/2026: mais véu, mais margem, cantos mais redondos; letras soltas e arrastáveis */
.capa-arte { inset: 24px; border-radius: 28px; }
.capa-veu { background: rgba(0,0,0,.34); }
.capa-nome { pointer-events: none; }
.capa-nome .canga-nome { pointer-events: none; }
.capa-nome .canga-nome span { pointer-events: auto; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; transition: transform .2s; }
.capa-nome .canga-nome span.pega { cursor: grabbing; transform: scale(1.04); }
@media (max-width: 700px) { .capa-arte { inset: 12px; border-radius: 22px; } }

/* 11/10/2026: o ® é uma peça solta também, pequeno, no alto, ao lado do último A */
@font-face { font-family: 'Thumpa C'; src: url(/fonts/ThumpaC.woff2) format('woff2'); font-display: block; }
.capa-nome .canga-nome span.pr { vertical-align: top; margin-left: .03em !important; text-shadow: none; line-height: 0; }
.capa-nome .canga-nome span.pr svg { width: .11em; height: .11em; display: block; margin-top: .14em; filter: drop-shadow(0 1px 3px rgba(0,0,0,.45)); overflow: visible; }

/* 11/10/2026: pegou, a letra cresce; só a Vênus, com o zoom indo e voltando devagar */
.capa-nome .canga-nome span { transition: transform .25s cubic-bezier(.3,1.6,.5,1); will-change: left, top, transform; }
.capa-nome .canga-nome span.pega { transform: scale(1.18); }
.capa-arte .quadro.anda { animation: cangaZoom 20s ease-in-out infinite alternate; }
/* 11/10/2026: o zoom vai em direção à moça que cobre a Vênus com o manto (à direita do quadro) */
.capa-arte .quadro { transform-origin: 80% 36%; }
.capa-arte .quadro.anda { animation: cangaZoomHora 22s ease-in-out infinite alternate; }
@keyframes cangaZoomHora { from { transform: scale(1) translate3d(0,0,0); } to { transform: scale(1.55) translate3d(0,0,0); } }

/* 11/10/2026: véu marrom (#512313) e cantos mais redondos na capa */
.capa-arte { border-radius: 40px; }
.capa-veu { background: rgba(81,35,19,.48); }
@media (max-width: 700px) { .capa-arte { border-radius: 30px; } }
/* trilho fechado: a foto em cima, o botão de abrir embaixo */
body:not(.ff-aberta) .ff-eu { top: 22px; }
body:not(.ff-aberta) .ff-abre { top: 62px; }

/* 11/10/2026: rodapé do trilho: a foto dentro do círculo, respiro igual */
.ff-anel { overflow: hidden; padding: 2px !important; display: grid !important; place-items: center; }
.ff-anel img { width: 100%; height: 100%; border-radius: 999px; object-fit: cover; display: block; }
body.ff-aberta .ff-pe { left: 60px; bottom: 36px; gap: 14px; }
body.ff-aberta .ff-baixo { bottom: 108px; }

/* 11/10/2026: foto maior e ícone de abrir menor; iniciais no lugar da foto do fruitfy (não era ela) */
.ff-ini { font-family: Inter, sans-serif; font-weight: 600; font-size: 13px; color: #b30012; letter-spacing: .02em; }
.ff-foto { background: #FFFBF3; }
body:not(.ff-aberta) .ff-eu { left: 8px; top: 18px; }
body:not(.ff-aberta) .ff-foto { width: 40px; height: 40px; }
body:not(.ff-aberta) .ff-abre { left: 20px; top: 70px; width: 16px; height: 16px; }
body.ff-aberta .ff-foto { width: 56px; height: 56px; }
body.ff-aberta .ff-ini { font-size: 17px; }
.ff-anel { background: #FFFBF3 !important; border: 0 !important; }
.ff-anel .ff-ini { font-size: 11px; }
body.ff-aberta .ff-anel .ff-ini { font-size: 15px; }
/* os dois pontinhos de cor, piscando, logo embaixo do ícone de abrir */
.ff-ponto { position: absolute; left: 13px; width: 30px; height: 30px; display: grid !important; place-items: center; z-index: 2; }
#ff-ponto-fundo { top: 100px; } #ff-ponto-fumaca { top: 132px; }
.ff-ponto i { position: absolute; left: 10px; top: 10px; width: 10px; height: 10px; border-radius: 999px; background: #FFFBF3; pointer-events: none; }
.ff-ponto i.anel { opacity: 0; animation: fundoAnel 1.6s cubic-bezier(.44,0,.56,1) .4s infinite; }
#ff-ponto-fumaca i.anel { animation-delay: 1.2s; }
body.ff-aberta .ff-ponto { left: 284px; }
body.ff-aberta #ff-ponto-fundo { top: 60px; } body.ff-aberta #ff-ponto-fumaca { top: 92px; }
.ff .zoom { top: 168px; }
.fundo-p { top: 80px !important; bottom: auto !important; }
#fumaca { top: 120px !important; bottom: auto !important; }
/* 11/10/2026: o mesmo marrom (#512313) atrás da pintura e no trilho */
html, body, #tela1, #tela2, #tela3 { background: #512313 !important; }
.capa-arte { background: #512313; }
.ff { background: #512313; }
/* a palavra CANGA sem cor (opacidade zero), só a sombra forte desenhando as letras */
.capa-nome .canga-nome span { color: rgba(255,255,255,0); text-shadow: 0 .02em .04em rgba(0,0,0,.85), 0 .05em .16em rgba(0,0,0,.7), 0 .12em .45em rgba(0,0,0,.55), 0 0 .9em rgba(0,0,0,.35); }
.capa-nome .canga-nome span.pr { color: #fff; text-shadow: none; }

/* 11/10/2026: trilho escondido: some de vez, fica só o botãozinho de abrir no canto, e a tela usa o espaço todo */
.ff { transition: width .3s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1), opacity .25s; }
body.ff-escondida .ff { transform: translateX(-120%); opacity: 0; pointer-events: none; }
body.ff-escondida .ff-abre { position: fixed; left: 20px !important; top: 22px !important; width: 22px !important; height: 22px !important; z-index: 60; opacity: 1; pointer-events: auto; color: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
body.ff-escondida .ff { overflow: visible; }
body.ff-escondida .ff > :not(.ff-abre) { visibility: hidden; }
body.ff-escondida .ff-abre { transform: translateX(120%); }
body.ff-escondida #tela2 .lista, body.ff-escondida #tela3 iframe { left: 15px; }
body.ff-escondida #tela3 iframe { width: calc(100% - 30px); }
body.ff-escondida .topo, body.ff-escondida .painel-letras { left: 15px; }
body.ff-escondida .mesa { padding-left: 15px; }

/* 11/10/2026: CANGA com a letra em opacidade zero e a sombra só por fora (filtro sombra-vazada) */
.capa-nome .canga-nome span { color: #fff; text-shadow: none; filter: url(#sombra-vazada); }
.capa-nome .canga-nome span.pr { filter: none; }
/* foto do perfil um pouco menor */
body:not(.ff-aberta) .ff-eu { left: 11px; top: 20px; }
body:not(.ff-aberta) .ff-foto { width: 34px; height: 34px; }
body.ff-aberta .ff-foto { width: 50px; height: 50px; }
.ff-ini { font-size: 12px; }
body.ff-aberta .ff-ini { font-size: 15px; }

/* ===== 11/10/2026: televisão antiga: vidro curvado pra fora (convexo), linhas, chuvisco, luz vazando e flare ===== */
.capa-arte > i[class^="tv-"] { position: absolute; inset: 0; pointer-events: none; }
/* o vidro convexo: a pintura "estufa" um pouco e as bordas escurecem como num tubo */
.capa-arte .quadro { border-radius: 40px; }
.tv-curva { box-shadow: inset 0 0 160px 40px rgba(20,8,4,.75), inset 0 0 40px 8px rgba(0,0,0,.6); border-radius: 40px; z-index: 3; }
.tv-vidro { z-index: 6; border-radius: 40px; background:
  radial-gradient(120% 90% at 30% 12%, rgba(255,255,255,.16), rgba(255,255,255,0) 42%),
  radial-gradient(140% 120% at 50% 50%, rgba(255,255,255,0) 60%, rgba(255,255,255,.07) 72%, rgba(0,0,0,.25) 100%); }
/* linhas de TV e o leve tremor da imagem */
.tv-linhas { z-index: 4; background: repeating-linear-gradient(to bottom, rgba(0,0,0,.22) 0 1px, rgba(0,0,0,0) 1px 3px); mix-blend-mode: multiply; animation: tvRola 9s linear infinite; }
@keyframes tvRola { to { background-position: 0 300px; } }
.tv-linhas::after { content: ''; position: absolute; left: 0; right: 0; height: 22%; top: -22%; background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.05), rgba(255,255,255,0)); animation: tvFaixa 7s linear infinite; }
@keyframes tvFaixa { to { top: 110%; } }
/* chuvisco */
.tv-grao { z-index: 4; opacity: .16; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E"); animation: tvGrao .35s steps(4) infinite; mix-blend-mode: overlay; }
@keyframes tvGrao { 0% { transform: translate(0,0) } 25% { transform: translate(-3%,2%) } 50% { transform: translate(2%,-3%) } 75% { transform: translate(-2%,-1%) } 100% { transform: translate(0,0) } }
/* luz vazando (light leak) nas bordas, respirando devagar */
.tv-vaza { z-index: 5; mix-blend-mode: screen; background:
  radial-gradient(40% 55% at 0% 30%, rgba(255,120,40,.55), rgba(255,120,40,0) 70%),
  radial-gradient(35% 45% at 100% 85%, rgba(255,60,90,.35), rgba(255,60,90,0) 70%);
  animation: tvVaza 11s ease-in-out infinite alternate; }
@keyframes tvVaza { 0% { opacity: .35; filter: hue-rotate(0deg) } 50% { opacity: .85 } 100% { opacity: .5; filter: hue-rotate(-25deg) } }
/* flare passando */
.tv-flare { z-index: 5; mix-blend-mode: screen; overflow: hidden; border-radius: 40px; }
.tv-flare::before { content: ''; position: absolute; top: -40%; left: -60%; width: 45%; height: 180%; transform: rotate(18deg);
  background: linear-gradient(90deg, rgba(255,230,190,0), rgba(255,230,190,.28) 45%, rgba(255,255,255,.45) 50%, rgba(255,230,190,.28) 55%, rgba(255,230,190,0)); filter: blur(6px);
  animation: tvFlare 14s ease-in-out infinite; }
.tv-flare::after { content: ''; position: absolute; left: 72%; top: 18%; width: 22vmin; height: 22vmin; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,240,210,.55), rgba(255,180,90,.18) 30%, rgba(255,180,90,0) 65%); animation: tvBrilho 6s ease-in-out infinite alternate; }
@keyframes tvFlare { 0%, 55% { left: -60% } 85%, 100% { left: 130% } }
@keyframes tvBrilho { from { opacity: .35; transform: scale(.9) } to { opacity: .8; transform: scale(1.1) } }
/* a imagem tremula de leve, como TV de tubo */
.capa-arte .quadro.on { animation-name: cangaZoomHora; }
.capa-arte { animation: tvPisca 5s steps(1) infinite; }
@keyframes tvPisca { 0%, 96%, 100% { filter: none } 97% { filter: brightness(1.12) contrast(1.05) } 98% { filter: brightness(.94) } }
.capa-nome { z-index: 7; }
/* 11/10/2026: o CANGA da capa na Le Pain Cafe (ela mandou o arquivo) */
@font-face { font-family: 'Le Pain C'; src: url(/fonts/LePainC.woff2) format('woff2'); font-display: block; }
.capa-nome .canga-nome { font-family: 'Le Pain C', 'Trivane C', sans-serif; }

/* 11/10/2026: o C de CANGA no alto do trilho, sempre (nem quando o trilho esconde ele sai) */
.ff-c { position: fixed; left: 15px; top: 15px; width: 56px; height: 52px; z-index: 61; padding: 0; background: none; border: 0; cursor: pointer;
  font-family: 'Trivane C', sans-serif; font-size: 34px; line-height: 52px; text-align: center; color: #FFFBF3; }
body.na-capa .ff-c { display: none; }
.ff { padding-top: 40px; }
body:not(.ff-aberta) .ff-eu { top: 60px; }
body:not(.ff-aberta) .ff-abre { top: 104px; }
#ff-ponto-fundo { top: 132px; } #ff-ponto-fumaca { top: 164px; }
body.ff-aberta .ff-eu { top: 64px; } body.ff-aberta .ff-abre { top: 30px; }
.ff .zoom { top: 200px; }
.ff-lista { top: 250px; } body.ff-aberta .ff-lista { top: 270px; }
body.ff-escondida .ff-c { background: #512313; border-radius: 26px; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
body.ff-escondida .ff-abre { display: none; }
/* o nome do arquivo em pé: creme, na mesma letra do trilho */
.titulo { color: #FFFBF3 !important; font-family: Inter, system-ui, sans-serif !important; font-weight: 500; letter-spacing: .02em; opacity: .85; }

/* 11/10/2026: capa com véu mais leve (menos escuro) */
.capa-veu { background: rgba(81,35,19,.26) !important; }
.tv-curva { box-shadow: inset 0 0 140px 30px rgba(20,8,4,.5), inset 0 0 36px 6px rgba(0,0,0,.4) !important; }
/* no design: a lista do trilho sai e o nome do arquivo entra no lugar dela, em pé */
body.no-design .ff-lista { display: none; }
body.no-design .topo { left: 15px !important; width: 56px; top: 240px; bottom: 140px; z-index: 47; padding: 0; justify-content: flex-start; }
body.no-design .titulo { max-height: calc(100vh - 400px); font-size: 13px; }
body.ff-aberta.no-design .topo { left: 15px !important; width: 320px; }

/* 11/10/2026: o ® combinando: a mesma letra (Le Pain) e a mesma sombra vazada; o círculo em volta faz parte da peça */
.capa-nome .canga-nome span.pr { filter: url(#sombra-vazada) !important; color: #fff; vertical-align: top; margin-left: .06em !important; margin-top: .02em; line-height: 1; }
.capa-nome .canga-nome span.pr b { display: grid; place-items: center; width: .3em; height: .3em; border: .028em solid #fff; border-radius: 50%; font-weight: 400; font-size: 1em; }
.capa-nome .canga-nome span.pr b { font-size: .19em; width: 1.6em; height: 1.6em; border-width: .15em; line-height: 1; }
/* os dois pontinhos menores; cada um com a sua cor de verdade (a do fundo e a da fumaça) */
.ff-ponto i { left: 12px; top: 12px; width: 6px; height: 6px; }
#ff-ponto-fundo i { background: var(--fundo, #FFFBF3); box-shadow: 0 0 0 1px rgba(255,251,243,.6); }
#ff-ponto-fumaca i { background: var(--fumaca, #FFFBF3); }
/* lua e sol não são usados: somem */
#ff-lua, #ff-sol { display: none !important; }
body.ff-aberta .ff-par:first-child { display: none; }
/* ===== 11/10/2026: trilho fechado com capricho: tudo creme, tamanhos iguais, ritmo igual (centro em 28px) ===== */
.ff, .ff button, .ff-item { color: #FFFBF3 !important; }
.ff-c { top: 26px; height: 36px; line-height: 36px; font-size: 30px; color: #FFFBF3; }
body:not(.ff-aberta) .ff-eu { left: 14px; top: 64px; gap: 0; }
body:not(.ff-aberta) .ff-foto { width: 28px; height: 28px; }
.ff-foto { background: none !important; border: 1.5px solid #FFFBF3; box-sizing: border-box; }
.ff-ini { color: #FFFBF3 !important; font-size: 10px; font-weight: 600; }
body.ff-aberta .ff-foto { width: 44px; height: 44px; } body.ff-aberta .ff-ini { font-size: 14px; }
body:not(.ff-aberta) .ff-abre { left: 19px; top: 112px; width: 18px; height: 18px; }
#ff-ponto-fundo, #ff-ponto-fumaca { width: 28px; height: 28px; left: 14px; }
#ff-ponto-fundo { top: 146px; } #ff-ponto-fumaca { top: 176px; }
.ff-ponto i { left: 10px; top: 10px; width: 8px; height: 8px; background: #FFFBF3 !important; box-shadow: none !important; }
.ff-ponto i.anel { background: #FFFBF3 !important; }
body.ff-aberta #ff-ponto-fundo { top: 70px; } body.ff-aberta #ff-ponto-fumaca { top: 100px; }
.ff .zoom { top: 216px; gap: 0; }
.ff .zoom button { height: 22px; font-size: 16px; color: #FFFBF3 !important; }
.ff .zoom #z-val { font-size: 10px; height: 18px; }
body.no-design .topo { top: 300px !important; bottom: 150px; }
body.no-design .zoom:not([hidden]) ~ * { }
/* ◐ e Aa embaixo, do mesmo tamanho; anel do pé igual ao de cima */
.ff-b svg { width: 18px; height: 18px; }
#fundo-b svg circle:first-child { fill: none !important; }
#fundo-b svg path { fill: #FFFBF3 !important; }
#fundo-b svg circle { stroke: #FFFBF3 !important; }
.ff-aa { font-size: 14px !important; }
body:not(.ff-aberta) .ff-baixo { left: 10px; bottom: 64px; }
body:not(.ff-aberta) .ff-pe { left: 14px; bottom: 24px; }
.ff-anel { width: 28px !important; height: 28px !important; background: none !important; border: 1.5px solid #FFFBF3 !important; box-sizing: border-box; padding: 0 !important; }
body.ff-aberta .ff-anel { width: 44px !important; height: 44px !important; }
.ff-anel .ff-ini { font-size: 10px; } body.ff-aberta .ff-anel .ff-ini { font-size: 14px; }
#ff-lua, #ff-sol, .ff-par:first-child { display: none !important; }

/* 11/10/2026: o C na Le Pain (a fonte mais nova); a foto de cima sai (fica só a de baixo); pontinhos menores; o squircle mais afastado; nome do perfil na Skaters */
@font-face { font-family: 'Skaters'; src: url(/fonts/Skaters.woff2) format('woff2'); font-display: swap; }
.ff-c { font-family: 'Le Pain C', 'Trivane C', sans-serif !important; font-size: 34px; }
.ff-eu { display: none !important; }
body:not(.ff-aberta) .ff-abre { top: 92px; }
body.ff-aberta .ff-abre { top: 30px; }
#ff-ponto-fundo { top: 140px !important; } #ff-ponto-fumaca { top: 166px !important; }
.ff-ponto i { left: 11px !important; top: 11px !important; width: 6px !important; height: 6px !important; }
body.ff-aberta #ff-ponto-fundo { top: 70px !important; } body.ff-aberta #ff-ponto-fumaca { top: 96px !important; }
.ff .zoom { top: 204px; }
.ff-pe .ff-nome b, .ff-pe .ff-nome i { font-family: 'Skaters', Inter, sans-serif; }
/* 11/10/2026: o ® saiu da capa; a sombra do CANGA é branco lele (#FFFBF3) */
.capa-nome .canga-nome span.pr { display: none !important; }

/* 11/10/2026: mais radius e mais cara de vidro convexo (borda escura curvada, brilho no alto) */
.capa-arte, .capa-arte .quadro, .tv-curva, .tv-vidro, .tv-flare { border-radius: 96px !important; }
@media (max-width: 700px) { .capa-arte, .capa-arte .quadro, .tv-curva, .tv-vidro, .tv-flare { border-radius: 48px !important; } }
.tv-curva { box-shadow: inset 0 0 220px 60px rgba(30,12,6,.55), inset 0 0 60px 14px rgba(0,0,0,.45), inset 0 0 12px 3px rgba(0,0,0,.5) !important; }
.tv-vidro { background:
  radial-gradient(70% 38% at 42% 6%, rgba(255,255,255,.22), rgba(255,255,255,0) 70%),
  radial-gradient(130% 110% at 50% 45%, rgba(255,255,255,0) 62%, rgba(255,255,255,.06) 74%, rgba(0,0,0,.32) 100%) !important; }

/* 11/10/2026: bordinha bem fina, marrom (#512313), na tela da capa */
.capa-arte::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1.5px solid #512313; pointer-events: none; z-index: 8; }
/* 11/10/2026: invertido: fundo da página branco lele; atrás dos projetos, o marrom */
html, body, #tela2, #tela3 { background: #FFFBF3 !important; }
body.na-capa, body.na-capa #tela1 { background: #512313 !important; }
#tela2 .lista { background: #512313 !important; }
/* trilho fechado: os ícones sem nome saem (os atalhos aparecem só com o trilho aberto) */
body:not(.ff-aberta) .ff-lista { display: none !important; }
/* o C mais embaixo */
.ff-c { top: 44px !important; }
body:not(.ff-aberta) .ff-abre { top: 110px !important; }
#ff-ponto-fundo { top: 156px !important; } #ff-ponto-fumaca { top: 182px !important; }
.ff .zoom { top: 220px !important; }
/* 11/10/2026: C menor */
.ff-c { font-size: 26px !important; }
/* 11/10/2026: o canto do cartão escapava do arredondado (o desfoque não respeitava o recorte): recorte forçado em todas as camadas */
.cartao .foto { isolation: isolate; transform: translateZ(0); -webkit-mask-image: -webkit-radial-gradient(white, black); mask-image: radial-gradient(white, black); }
.cartao .borra, .cartao .borra i, .cartao .foto::after, .cartao .capa { border-radius: 34px; }
.cartao .borra { overflow: hidden; height: 100%; bottom: 0; }
/* 11/10/2026: o C mais embaixo; o squircle um tiquinho menor, no mesmo lugar, sem a linha de dentro */
.ff-c { top: 58px !important; }
body:not(.ff-aberta) .ff-abre { left: 20px !important; top: 111px !important; width: 16px !important; height: 16px !important; }
.ff-abre svg rect:nth-child(2) { display: none; }
/* 11/10/2026: fundo da tela FFF7E9 (teste); os dois pontinhos mais juntos e de cores levemente diferentes */
html, body, #tela2, #tela3 { background: #FFF7E9 !important; }
body.na-capa, body.na-capa #tela1 { background: #512313 !important; }
#ff-ponto-fundo { top: 158px !important; } #ff-ponto-fumaca { top: 174px !important; }
#ff-ponto-fundo i, #ff-ponto-fundo i.anel { background: #FFFBF3 !important; }
#ff-ponto-fumaca i, #ff-ponto-fumaca i.anel { background: #E8C9A8 !important; }
/* 11/10/2026: ◐ e Aa um bocadinho mais separados */
body:not(.ff-aberta) .ff-par { gap: 10px !important; }
/* 11/10/2026: o fundo dos cartões na mesma cor do fundo do site */
.cartao { background: #FFF7E9 !important; }
.cartao .capa { background-color: #FFF7E9 !important; }
/* 11/10/2026: a borda dos cartões (FFF7E9) com 50% de opacidade */
.cartao { background: rgba(255,247,233,.5) !important; }
/* 11/10/2026: a foto do perfil um pouco mais longe dos controles */
body:not(.ff-aberta) .ff-baixo { bottom: 80px !important; }
/* 11/10/2026: o C um pouco mais para cima (6px) */
.ff-c { top: 52px !important; }
/* 11/10/2026: "SEPARA FOTO PERFIL DOS CONTROLE UM POUCO": os controles ficam onde estavam; só a foto desce um pouco */
body:not(.ff-aberta) .ff-baixo { bottom: 64px !important; }
body:not(.ff-aberta) .ff-pe { bottom: 14px !important; }
/* 11/10/2026: o bloco ◐ + Aa sobe junto (mesma distância entre os dois), mais afastado da foto, que fica parada */
body:not(.ff-aberta) .ff-baixo { bottom: 94px !important; }
/* 11/10/2026: o squircle volta à forma e ao tamanho de antes (18px), sem a linha de dentro */
body:not(.ff-aberta) .ff-abre { left: 19px !important; width: 18px !important; height: 18px !important; }
.ff-abre svg { width: 18px !important; height: 18px !important; }
/* 11/10/2026: respiro embaixo: a foto sobe (fora da curva da pílula) e o bloco ◐ + Aa sobe junto, mesma separação */
body:not(.ff-aberta) .ff-pe { bottom: 42px !important; }
body:not(.ff-aberta) .ff-baixo { bottom: 112px !important; }
/* o C mais em cima, maior, sem transparência */
.ff-c { top: 40px !important; font-size: 32px !important; opacity: 1 !important; color: #FFFBF3 !important; }
/* 11/10/2026: borda dos cartões bem mais transparente (10%); o subtítulo desce, o título fica onde está */
.cartao { background: rgba(255,247,233,.1) !important; }
.cartao .nomes p { position: relative; top: 7px; }
/* 11/10/2026: título e subtítulo na cor lele (não branco puro); depois de separados, os dois descem juntos, como um bloco */
.cartao h2 { color: #FFF7E9 !important; }
.cartao .nomes p { color: rgba(255,247,233,.7) !important; }
.cartao .rodape { bottom: 20px !important; }

/* 11/10/2026: cópias de teste da grade (canga.club/a … /e) */
body.grade #tela2 .lista { display: grid !important; grid-template-columns: repeat(var(--grade), minmax(0, 1fr)); gap: 32px; padding: 72px 64px 96px; align-content: start; }
body.grade .cartao { width: 100% !important; max-width: none; }
body.grade .cartao .foto { height: auto; aspect-ratio: 370 / 260; }
body.grade.grade-1 #tela2 .lista { padding: 72px 18% 96px; }
body.grade.grade-5 #tela2 .lista { gap: 24px; padding: 64px 48px 96px; }
body.grade.grade-5 .cartao h2, body.grade.grade-4 .cartao h2 { font-size: 14px; }
/* 11/10/2026: o nome e o tamanho dos cartões na Satoshi, com sombra marrom */
@font-face { font-family: 'Satoshi'; src: url(/fonts/Satoshi-1.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url(/fonts/Satoshi-2.woff2) format('woff2'); font-weight: 500; font-display: swap; }
.cartao h2, .cartao .nomes p { font-family: 'Satoshi', 'General Sans', sans-serif !important; text-shadow: 0 1px 2px rgba(81,35,19,.85), 0 2px 10px rgba(81,35,19,.6); }
/* 11/10/2026: ◐ e Aa juntos de novo, na distância que tinham (sem o espaço extra); o bloco continua longe da foto */
body:not(.ff-aberta) .ff-par { gap: 0 !important; }
body:not(.ff-aberta) .ff-baixo { bottom: 122px !important; }
/* mais escurinho nos cartões */
.cartao .foto::after { background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.12) 25%, rgba(0,0,0,.34) 55%, rgba(0,0,0,.58)) !important; }
/* 11/10/2026: o C um pouco mais para baixo */
.ff-c { top: 48px !important; }
/* 11/10/2026: ◐ e Aa bem juntos */
body:not(.ff-aberta) .ff-baixo .ff-b { height: 26px !important; }
body:not(.ff-aberta) .ff-baixo { bottom: 128px !important; }

/* 11/10/2026: o squircle menor e mais para cima */
body:not(.ff-aberta) .ff-abre { left: 21px !important; top: 100px !important; width: 14px !important; height: 14px !important; }
.ff-abre svg { width: 14px !important; height: 14px !important; }
/* 11/10/2026: a foto desce um pouco (subiu demais); o bloco ◐ + Aa desce junto */
body:not(.ff-aberta) .ff-pe { bottom: 30px !important; }
body:not(.ff-aberta) .ff-baixo { bottom: 116px !important; }

/* 11/10/2026: o zoom longe do nome do arquivo; os dois mais suaves (não 100%) */
body.no-design .topo { top: 340px !important; }
.ff .zoom { opacity: .6; }
.titulo { opacity: .6 !important; }
/* 11/10/2026: ◐, Aa e foto descem juntos (bloco); depois o ◐ sobe um pouco */
body:not(.ff-aberta) .ff-pe { bottom: 22px !important; }
body:not(.ff-aberta) .ff-baixo { bottom: 108px !important; }
body:not(.ff-aberta) #fundo-b { margin-bottom: 6px; }
/* o squircle: menor e mais para cima (de novo, para valer em todas as regras) */
body:not(.ff-aberta) .ff .ff-abre { left: 21px !important; top: 96px !important; width: 14px !important; height: 14px !important; }
body:not(.ff-aberta) .ff .ff-abre svg { width: 14px !important; height: 14px !important; }
/* 11/10/2026: nome do arquivo bem menor e bem separado do zoom */
body.no-design .titulo { font-size: 10px !important; letter-spacing: .04em; }
/* 11/10/2026: no design: o nome do arquivo no meio da pílula (de cima a baixo); o zoom vai para baixo do nome, acima do ◐ */
body.no-design .topo { top: 15px !important; bottom: 15px !important; height: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; align-content: center !important; padding: 0 !important; }
body.no-design .titulo, body.no-design #titulo { font-size: 10px !important; max-height: calc(100vh - 460px) !important; }
body.no-design .ff .zoom { top: auto !important; bottom: 190px !important; }
/* 11/10/2026: no design, o fundo de trabalho na cor da borda dos cartões dos projetos (FFF7E9 a 10% sobre o marrom = #62382A) */
body.no-design, body.no-design .mesa, html:has(body.no-design) { background: #62382A !important; }
/* 11/10/2026: nome do arquivo com as letras mais afastadas (fonte continua pequena); squircle mais para cima */
body.no-design .titulo, body.no-design #titulo { letter-spacing: .16em !important; }
body:not(.ff-aberta) .ff .ff-abre { top: 84px !important; }
/* 11/10/2026: tudo no trilho com a mesma opacidade do zoom (60%), menos o C */
.ff-baixo, .ff-pe, .ff .ff-abre, .ff-ponto { opacity: .6 !important; }
.ff-ponto:hover, .ff .ff-abre:hover, .ff-baixo .ff-b:hover, .ff-anel:hover { opacity: 1; }
/* 11/10/2026: letras do nome do arquivo ainda mais afastadas */
body.no-design .titulo, body.no-design #titulo { letter-spacing: .3em !important; }
/* 11/10/2026: a barra de edição na cor do trilho (marrom #512313), letras e ícones creme */
.barra { background: #512313 !important; color: #FFFBF3 !important; box-shadow: 0 8px 30px rgba(81,35,19,.35) !important; }
.barra button, .barra select, .barra .tam, .barra label { color: #FFFBF3 !important; }
.barra select option { color: #512313; }
/* 11/10/2026: a barra de edição em cima, não embaixo */
.barra { top: 18px !important; bottom: auto !important; }
/* 11/10/2026: com a ferramenta de edição aberta (barra à vista), a fumaça do mouse some */
body:has(#barra:not([hidden])) #fluido-caixa { opacity: 0 !important; transition: opacity .3s; }
#fluido-caixa { transition: opacity .3s; }
/* 11/10/2026: letras do nome do arquivo mais espaçadas */
body.no-design .titulo, body.no-design #titulo { letter-spacing: .45em !important; max-height: calc(100vh - 380px) !important; }

/* 11/10/2026: a cor atual marcada com um anel creme na barra */
.barra .paleta button.on, #b-cor-bola.on { box-shadow: 0 0 0 2px #512313, 0 0 0 4px #FFF7E9 !important; transform: scale(1.15); }
/* nome do arquivo no trilho: maior, para enxergar */
body.no-design .titulo, body.no-design #titulo { font-size: 12px !important; letter-spacing: .35em !important; opacity: .75 !important; }

/* 11/10/2026: lista de fontes da barra maior */
.barra select { font-size: 16px !important; max-width: 220px; }
.barra select option, .barra select optgroup { font-size: 16px; }
/* 11/10/2026: nome do arquivo um pouco menor (10px), mesmo espaçamento; o zoom dentro de uma pílula bem translúcida */
body.no-design .titulo, body.no-design #titulo { font-size: 10px !important; }
.ff .zoom { left: 10px !important; width: 36px !important; padding: 8px 0 !important; border-radius: 999px; background: rgba(255,247,233,.08) !important; box-shadow: inset 0 0 0 1px rgba(255,247,233,.12); }
.ff .zoom button { width: 36px !important; }
/* ===== 11/10/2026: trilho ABERTO arrumado (capricho) ===== */
/* no design, aberto: o nome do arquivo e o zoom saem; volta a lista de atalhos */
body.ff-aberta.no-design .topo { display: none !important; }
body.ff-aberta.no-design .ff-lista { display: flex !important; }
body.ff-aberta .ff .zoom { display: none !important; }
/* aberto: C e squircle na mesma linha; pontinhos embaixo do C, alinhados a ele */
body.ff-aberta .ff-c { left: 15px !important; top: 48px !important; width: 56px; }
body.ff-aberta .ff .ff-abre { left: 284px !important; top: 58px !important; width: 18px !important; height: 18px !important; }
body.ff-aberta #ff-ponto-fundo, body.ff-aberta #ff-ponto-fumaca { left: 14px !important; }
body.ff-aberta #ff-ponto-fundo { top: 112px !important; } body.ff-aberta #ff-ponto-fumaca { top: 138px !important; }
body.ff-aberta .ff-lista { top: 190px !important; bottom: 220px; height: auto !important; }
/* rodapé aberto: ◐ Aa na mesma coluna da foto; nome com respiro, nas letras certas */
body.ff-aberta .ff-baixo { left: 22px !important; bottom: 108px !important; }
body.ff-aberta .ff-par { background: rgba(255,247,233,.08) !important; padding: 4px !important; gap: 2px !important; }
body.ff-aberta .ff-pe { left: 24px !important; bottom: 34px !important; gap: 14px !important; }
body.ff-aberta .ff-anel { width: 44px !important; height: 44px !important; }
.ff-pe .ff-nome { gap: 3px; }
.ff-pe .ff-nome i { font-family: Inter, sans-serif !important; font-size: 11px !important; font-weight: 400 !important; letter-spacing: .04em; color: rgba(255,247,233,.5) !important; }
.ff-pe .ff-nome b { font-family: 'Skaters', Inter, sans-serif !important; font-size: 17px !important; font-weight: 400 !important; letter-spacing: .02em; color: #FFF7E9 !important; line-height: 1.1; }
/* 11/10/2026: trilho escondido: o C sem fundo; nome do arquivo com as letras bem mais afastadas */
body.ff-escondida .ff-c { background: none !important; box-shadow: none !important; }
body.no-design .titulo, body.no-design #titulo { letter-spacing: .7em !important; }
/* 11/10/2026: nome do arquivo: cor FFF7E9, letras menores, mais distância entre elas, opacidade menor */
body.no-design .topo .titulo, body.no-design .topo #titulo { color: #FFF7E9 !important; font-size: 9px !important; letter-spacing: .9em !important; opacity: .45 !important; }
/* 11/10/2026: o nome do arquivo cabe entre os pontinhos e o zoom (nome longo termina em …, sem encostar em nada) */
body.no-design .topo { top: 205px !important; bottom: 300px !important; }
body.no-design .topo .titulo, body.no-design .topo #titulo { max-height: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
/* 11/10/2026: trilho aberto, a lista no mesmo tratamento do nome do arquivo: cor FFF7E9, letra pequena, bem espaçada, opacidade baixa */
body.ff-aberta .ff .ff-item { color: #FFF7E9 !important; opacity: .55; font-size: 10px !important; letter-spacing: .32em !important; text-transform: lowercase; height: 30px !important; gap: 14px !important; font-family: Inter, sans-serif; }
body.ff-aberta .ff .ff-item:hover { opacity: 1; }
body.ff-aberta .ff .ff-item svg { width: 13px !important; height: 13px !important; opacity: 1 !important; fill: currentColor; color: #FFF7E9; }
body.ff-aberta .ff .ff-item.ff-nosso { color: #FFF7E9 !important; }
/* C e squircle na mesma linha */
body.ff-aberta .ff .ff-abre { top: 62px !important; }
/* rodapé: nome no mesmo tom e tamanho menor */
body.ff-aberta .ff-pe .ff-nome b { font-size: 14px !important; color: #FFF7E9 !important; opacity: .75; letter-spacing: .06em; }
body.ff-aberta .ff-pe .ff-nome i { font-size: 10px !important; letter-spacing: .2em !important; }
body.ff-aberta .ff-baixo .ff-b { color: #FFF7E9 !important; }
/* 11/10/2026: aberto: squircle na mesma linha do C */
body.ff-aberta .ff .ff-abre { top: 42px !important; }
/* ===== 11/10/2026: trilho aberto: TUDO numa coluna só, alinhado à esquerda (24px); letras Satoshi, FFF7E9, sem opacidade, pequenas e espaçadas ===== */
body.ff-aberta .ff-c { left: 24px !important; width: auto !important; text-align: left !important; top: 40px !important; }
body.ff-aberta .ff .ff-abre { left: 28px !important; top: 100px !important; width: 16px !important; height: 16px !important; }
body.ff-aberta #ff-ponto-fundo, body.ff-aberta #ff-ponto-fumaca { left: 22px !important; }
body.ff-aberta #ff-ponto-fundo { top: 136px !important; } body.ff-aberta #ff-ponto-fumaca { top: 160px !important; }
body.ff-aberta .ff-lista { top: 210px !important; }
body.ff-aberta .ff .ff-item { padding-left: 28px !important; gap: 16px !important; font-family: 'Satoshi', Inter, sans-serif !important; font-size: 10px !important; letter-spacing: .32em !important; color: #FFF7E9 !important; opacity: 1 !important; }
body.ff-aberta .ff .ff-item svg { opacity: 1 !important; color: #FFF7E9 !important; }
body.ff-aberta .ff-lista { -webkit-mask-image: none !important; mask-image: none !important; }
body.ff-aberta .ff-baixo { left: 24px !important; opacity: 1 !important; }
body.ff-aberta .ff-par { padding: 0 !important; background: none !important; gap: 14px !important; }
body.ff-aberta .ff-pe { left: 24px !important; opacity: 1 !important; }
body.ff-aberta .ff-pe .ff-nome b, body.ff-aberta .ff-pe .ff-nome i { font-family: 'Satoshi', Inter, sans-serif !important; color: #FFF7E9 !important; opacity: 1 !important; font-size: 10px !important; letter-spacing: .32em !important; font-weight: 500 !important; }
body.ff-aberta .ff-pe .ff-nome i { font-weight: 400 !important; }
body.ff-aberta .ff-baixo .ff-b, body.ff-aberta .ff-anel { color: #FFF7E9 !important; border-color: #FFF7E9 !important; }
body.ff-aberta .ff-ponto, body.ff-aberta .ff .ff-abre { opacity: 1 !important; }
/* 11/10/2026: trilho aberto mais estreito, mais espaço entre as linhas, tudo começando no mesmo x (24px) */
body.ff-aberta .ff { --w: 240px; }
body.ff-aberta .ff .ff-abre { left: 24px !important; }
body.ff-aberta #ff-ponto-fundo, body.ff-aberta #ff-ponto-fumaca { left: 13px !important; }
body.ff-aberta .ff .ff-item { padding-left: 24px !important; height: 40px !important; }
body.ff-aberta .ff-baixo { left: 15px !important; }
body.ff-aberta .tela iframe, body.ff-aberta #tela2 .lista, body.ff-aberta #tela3 iframe, body.ff-aberta .topo, body.ff-aberta .painel-letras { left: 270px !important; }
body.ff-aberta #tela3 iframe { width: calc(100% - 285px) !important; }
body.ff-aberta .mesa { padding-left: 270px !important; }
/* 11/10/2026: zoom (o conjunto) bem menor; os pontinhos (juntos) mais para cima, perto do squircle */
.ff .zoom { transform: scale(.72); transform-origin: center bottom; }
body:not(.ff-aberta) #ff-ponto-fundo { top: 122px !important; } body:not(.ff-aberta) #ff-ponto-fumaca { top: 138px !important; }
/* 11/10/2026: letras do trilho aberto menores */
body.ff-aberta .ff .ff-item, body.ff-aberta .ff-pe .ff-nome b, body.ff-aberta .ff-pe .ff-nome i { font-size: 8.5px !important; }
/* 11/10/2026: nome do arquivo no centro da pílula, fonte bem menor, tamanho máximo fixo (nome maior é cortado) */
body.no-design .topo { top: 15px !important; bottom: 15px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
body.no-design .topo .titulo, body.no-design .topo #titulo { font-size: 7.5px !important; letter-spacing: .7em !important; max-height: 240px !important; overflow: hidden !important; text-overflow: clip !important; white-space: nowrap !important; }
/* 11/10/2026: a mesma opacidade para tudo no trilho fechado (o C igual aos outros) */
body:not(.ff-aberta) .ff-c, body:not(.ff-aberta) .ff .ff-abre, body:not(.ff-aberta) .ff-ponto, body:not(.ff-aberta) .ff .zoom, body:not(.ff-aberta) .ff-baixo, body:not(.ff-aberta) .ff-pe, body.no-design .topo .titulo, body.no-design .topo #titulo { opacity: .6 !important; }
/* 11/10/2026: o escurinho fica POR CIMA do desfoque (antes o desfoque clareava a base e o nome sumia nas capas claras) */
.cartao .borra { z-index: 1; }
.cartao .foto::after { z-index: 2; background: linear-gradient(rgba(41,16,8,0) 35%, rgba(41,16,8,.45) 65%, rgba(41,16,8,.78)) !important; height: 70% !important; }
.cartao .rodape { z-index: 3 !important; }
/* teste com 1 por linha: o cartão do tamanho de meia tela, centralizado */
body.grade.grade-1 #tela2 .lista { grid-template-columns: minmax(0, 560px) !important; justify-content: center; padding: 72px 64px 96px !important; }

/* ===== 11/10/2026: grades de teste certas: a tela dividida em N x N (N colunas e N linhas cabendo na tela) ===== */
body.grade #tela2 .lista { --pad: 40px; --gap: 24px; padding: var(--pad) !important; gap: var(--gap) !important;
  grid-template-columns: repeat(var(--grade), minmax(0, 1fr)) !important; justify-content: stretch !important;
  grid-auto-rows: calc((100vh - 30px - 2 * var(--pad) - (var(--grade) - 1) * var(--gap)) / var(--grade)); }
body.grade.grade-1 #tela2 .lista { --pad: 24px; }
body.grade.grade-4 #tela2 .lista { --gap: 16px; --pad: 28px; }
body.grade .cartao { width: 100% !important; height: 100%; box-sizing: border-box; padding: 8px !important; border-radius: 28px !important; display: flex; }
body.grade.grade-4 .cartao { padding: 6px !important; border-radius: 22px !important; }
body.grade .cartao .foto { flex: 1; height: auto !important; aspect-ratio: auto !important; border-radius: 22px !important; }
body.grade.grade-4 .cartao .foto { border-radius: 17px !important; }
body.grade .cartao .borra, body.grade .cartao .borra i { height: 100% !important; }
body.grade.grade-4 .cartao h2 { font-size: 12px !important; } body.grade.grade-4 .cartao .nomes p { font-size: 10px !important; }
body.grade.grade-1 .cartao h2 { font-size: 22px !important; } body.grade.grade-1 .cartao .nomes p { font-size: 14px !important; }
/* 11/10/2026: grade 1: um cartão ocupando a tela toda (sem o limite antigo de 560px) */
body.grade.grade-1 #tela2 .lista { grid-template-columns: minmax(0, 1fr) !important; justify-content: stretch !important; }

/* 11/10/2026: o escurinho marrom fica POR CIMA do desfoque (o desfoque clareava a base e o nome sumia) */
.cartao .borra { z-index: 1; }
.cartao .foto::after { z-index: 2; height: 70% !important; background: linear-gradient(rgba(41,16,8,0) 30%, rgba(41,16,8,.5) 65%, rgba(41,16,8,.82)) !important; }
.cartao .rodape { z-index: 3 !important; }
/* 11/10/2026: grade 1: o cartão cabe inteiro na tela (o respiro de cima era maior que a conta) */
body.grade #tela2 .lista { padding: var(--pad) !important; }
/* 11/10/2026: o texto do cartão com respiro dos lados: só a faixa do meio (até onde ela marcou, ~58% da largura) */
.cartao .rodape { padding: 0 21% !important; }
.cartao .nomes { max-width: 100%; }
.cartao h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* grade 1: o respiro certo (a regra antiga de cima ganhava) */
body.grade.grade-1 #tela2 .lista, body.grade.grade-2 #tela2 .lista, body.grade.grade-3 #tela2 .lista, body.grade.grade-4 #tela2 .lista { padding: var(--pad) !important; }