/* A barra, o sino, o rodapé e os convites — o site inteiro, app incluído
   (fio-cabecalho.js, 19/09/2026). Os temas das páginas soltas estão em
   fio-temas.css; aqui só as peças, com as variáveis de cada tema. */

.fio-barra{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--papel) 90%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--linha);font-family:Inter,system-ui,sans-serif;color:var(--tinta)}
.fio-barra[hidden],.fio-rodape[hidden],.fio-sub[hidden],.fio-faixa[hidden]{display:none!important}
.fio-barra .dentro{max-width:72rem;margin:0 auto;padding:0 16px;height:58px;display:flex;align-items:center;gap:18px}
.fio-barra .logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--tinta);flex-shrink:0;margin-right:10px}
.fio-barra .logo img{width:22px;height:22px}
.fio-barra .logo span{font-family:Literata,Georgia,serif;font-size:19px;letter-spacing:-.01em}
.fio-barra nav.largo{display:flex;align-items:center;gap:4px}
.fio-barra .largo-cantos{margin-left:auto}
.fio-barra .m{background:none;border:none;padding:8px 10px;border-radius:8px;cursor:pointer;font:inherit;font-size:.86rem;color:var(--tinta-2);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.fio-barra .m:hover,.fio-barra .aberto>.m{color:var(--tinta);background:color-mix(in srgb,var(--tinta) 6%,transparent)}
.fio-barra .m[aria-current=page]{color:var(--acento)}
.fio-barra .m svg{opacity:.75;transition:transform .15s}
.fio-barra .aberto>.m>svg:last-child{transform:rotate(180deg)}
.fio-barra .cantos{display:flex;align-items:center;gap:4px}
.fio-barra .ico{width:38px;height:38px;display:grid;place-items:center;border-radius:999px;background:none;border:none;color:var(--tinta-2);cursor:pointer;position:relative;text-decoration:none}
.fio-barra .ico:hover{background:color-mix(in srgb,var(--tinta) 7%,transparent);color:var(--tinta)}
.fio-barra .ico.adm{color:var(--acento)}
.fio-barra .ico[aria-current=page]{background:color-mix(in srgb,var(--acento) 12%,transparent)}
.fio-sino .num{position:absolute;top:3px;right:2px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--acento);color:var(--sobre-acento,#fff);font:600 10px/17px Inter,system-ui,sans-serif;text-align:center;border:2px solid var(--papel);box-sizing:content-box}
.fio-sino .num[hidden]{display:none}
.fio-barra .perfil{color:var(--tinta);padding:5px 8px 5px 5px;margin-left:4px}
.fio-barra .avatar{width:28px;height:28px;border-radius:999px;display:grid;place-items:center;background:var(--acento);color:var(--sobre-acento,#fff);font:600 13px/1 Inter,system-ui,sans-serif}
.botao-conta{display:inline-flex;align-items:center;justify-content:center;background:var(--acento);color:var(--sobre-acento,#fff)!important;border:none;border-radius:999px;padding:8px 16px;font:500 .84rem Inter,system-ui,sans-serif;text-decoration:none;cursor:pointer;white-space:nowrap}
.botao-conta:hover{filter:brightness(1.08)}
.botao-conta.grande{padding:12px 22px;font-size:.95rem}
.botao-conta:disabled{opacity:.7;cursor:default}

/* os menus que abrem */
.fio-susp{position:relative}
.fio-painel{position:absolute;top:calc(100% + 8px);left:-8px;z-index:40;min-width:290px;background:var(--papel);border:1px solid var(--linha);border-radius:14px;box-shadow:0 18px 40px -18px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.06);padding:8px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .14s,transform .14s,visibility .14s}
.fio-susp.direita .fio-painel{left:auto;right:-6px}
.fio-susp.aberto .fio-painel{opacity:1;visibility:visible;transform:none}
/* ponte invisível entre o botão e o menu, para o mouse não "cair" no vão */
.fio-susp.aberto .fio-painel::before{content:'';position:absolute;left:0;right:0;top:-10px;height:10px}
.fio-lista a,.fio-lista button{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;padding:10px 12px;border-radius:9px;text-decoration:none;color:var(--tinta);background:none;border:none;font:inherit;font-size:.9rem;cursor:pointer}
.fio-lista a:hover,.fio-lista a:focus-visible,.fio-lista button:hover{background:color-mix(in srgb,var(--tinta) 6%,transparent);outline:none}
.fio-lista strong{font-weight:600;font-size:.9rem}
.fio-lista span{font-size:.78rem;color:var(--tinta-2);line-height:1.35}
.fio-lista.curta{min-width:240px}
.fio-lista.curta a,.fio-lista.curta button{padding:9px 12px;font-size:.88rem}
.fio-lista .quem{display:flex;flex-direction:column;gap:2px;padding:10px 12px 12px;margin-bottom:6px;border-bottom:1px solid var(--linha)}
.fio-lista .quem strong{font-size:.95rem}
.selo-plano{align-self:flex-start;margin-top:6px;font-size:.7rem!important;letter-spacing:.04em;border:1px solid var(--linha);border-radius:999px;padding:1px 9px;color:var(--tinta-2)}
.selo-plano.pago{border-color:var(--acento);color:var(--acento)!important}

/* o sino */
.fio-sino-conteudo{width:min(390px,calc(100vw - 24px))}
.fio-sino-conteudo .topo{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 6px}
.fio-sino-conteudo .topo strong{font-size:1rem}
.fio-sino-conteudo .link,.fio-modal .link{background:none;border:none;color:var(--acento);font:inherit;font-size:.8rem;cursor:pointer;padding:4px;text-decoration:none}
.fio-sino-conteudo .filtros{display:flex;gap:6px;padding:2px 10px 10px}
.fio-sino-conteudo .filtros button{border:1px solid var(--linha);background:none;color:var(--tinta-2);border-radius:999px;padding:4px 12px;font:inherit;font-size:.78rem;cursor:pointer}
.fio-sino-conteudo .filtros [aria-selected=true]{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}
.fio-sino-conteudo .lista{list-style:none;margin:0;padding:0;max-height:min(60vh,460px);overflow:auto}
.fio-sino-conteudo li a{display:flex;gap:12px;align-items:flex-start;padding:10px;border-radius:10px;text-decoration:none;color:var(--tinta);position:relative}
.fio-sino-conteudo li a:hover{background:color-mix(in srgb,var(--tinta) 5%,transparent)}
.fio-sino-conteudo li.novo a{background:color-mix(in srgb,var(--acento) 7%,transparent)}
.fio-sino-conteudo .ic{flex:none;width:34px;height:34px;border-radius:999px;display:grid;place-items:center;background:color-mix(in srgb,var(--tinta) 8%,transparent);color:var(--tinta-2)}
.fio-sino-conteudo .ic-seguranca{background:color-mix(in srgb,#c0392b 16%,transparent);color:#c0392b}
.fio-sino-conteudo .ic-boasvindas,.fio-sino-conteudo .ic-titulo{background:color-mix(in srgb,#b08d57 22%,transparent);color:#9a7328}
.fio-sino-conteudo .txt{display:flex;flex-direction:column;gap:2px;min-width:0;padding-right:14px}
.fio-sino-conteudo .txt b{font-weight:600;font-size:.86rem;line-height:1.3}
.fio-sino-conteudo .txt span{font-size:.8rem;color:var(--tinta-2);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fio-sino-conteudo time{font-size:.72rem;color:var(--acento);margin-top:2px}
.fio-sino-conteudo .ponto{position:absolute;right:10px;top:50%;width:9px;height:9px;margin-top:-4px;border-radius:999px;background:var(--acento)}
.fio-sino-conteudo .vazio{padding:26px 16px;text-align:center;color:var(--tinta-2);font-size:.86rem;line-height:1.5;margin:0}
.fio-sino-conteudo .todas{display:block;text-align:center;padding:10px;margin-top:6px;border-top:1px solid var(--linha);font-size:.84rem;color:var(--acento);text-decoration:none}

/* celular */
.fio-barra .curto{display:none;margin-left:auto;gap:2px;align-items:center}
.fio-menu{border-top:1px solid var(--linha);max-height:calc(100dvh - 58px);overflow:auto;padding:6px 0 14px}
.fio-menu .grupo{padding:6px 16px;border-bottom:1px solid var(--linha)}
.fio-menu .grupo:last-child{border-bottom:none}
.fio-menu .grupo p{margin:8px 0 2px;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-2)}
.fio-menu a,.fio-menu button{display:block;width:100%;text-align:left;padding:11px 0;font:inherit;font-size:15px;color:var(--tinta);text-decoration:none;border:none;background:none;cursor:pointer}
/* 23/10/2026: com Planos e Ajuda a barra larga só cabia de 1060 px para cima; 26/10, com Minha leitura, de 1180 px */
@media (max-width:1180px){.fio-barra nav.largo,.fio-barra .largo-cantos{display:none}.fio-barra .curto{display:flex}}

/* a sub-barra: as seções de dentro de uma área (comunidade, para você…) */
.fio-sub{border-bottom:1px solid var(--linha);background:var(--papel)}
.fio-sub .dentro{max-width:72rem;margin:0 auto;padding:0 16px;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.fio-sub a,.fio-sub button{font:inherit;font-family:Inter,system-ui,sans-serif;font-size:14px;color:var(--tinta-2);text-decoration:none;padding:11px 12px;border:none;background:none;border-bottom:2px solid transparent;white-space:nowrap;cursor:pointer;margin-bottom:-1px}
.fio-sub [aria-current=page],.fio-sub [aria-selected=true]{color:var(--tinta);border-bottom-color:var(--acento)}

/* a faixa de quem ainda não tem conta */
.fio-faixa{background:color-mix(in srgb,var(--acento) 9%,var(--papel));border-bottom:1px solid color-mix(in srgb,var(--acento) 25%,var(--linha));font-family:Inter,system-ui,sans-serif}
.fio-faixa .dentro{max-width:72rem;margin:0 auto;padding:8px 16px;display:flex;align-items:center;gap:14px;font-size:.86rem;color:var(--tinta)}
.fio-faixa p{margin:0;flex:1}
.fio-faixa .ico{width:32px;height:32px;display:grid;place-items:center;border:none;background:none;color:var(--tinta-2);cursor:pointer;border-radius:999px}

/* o lembrete que aparece no canto */
.fio-lembrete{position:fixed;left:16px;bottom:16px;z-index:50;max-width:min(360px,calc(100vw - 32px));background:var(--papel);color:var(--tinta);border:1px solid var(--linha);border-left:4px solid var(--acento);border-radius:12px;padding:14px 40px 14px 16px;box-shadow:0 18px 40px -16px rgba(0,0,0,.45);font:14px/1.45 Inter,system-ui,sans-serif;transform:translateY(20px);opacity:0;transition:transform .25s,opacity .25s}
.fio-lembrete.visivel{transform:none;opacity:1}
.fio-lembrete strong{display:block;margin-bottom:4px}
.fio-lembrete p{margin:0 0 8px;color:var(--tinta-2);font-size:13px}
.fio-lembrete a{color:var(--acento);font-weight:500;text-decoration:none}
.fio-lembrete .fechar,.fio-modal .fechar{position:absolute;top:8px;right:8px;width:30px;height:30px;display:grid;place-items:center;border:none;background:none;color:var(--tinta-2);cursor:pointer;border-radius:999px}

/* a janela dos planos */
.fio-modal-fundo{position:fixed;inset:0;z-index:60;background:rgba(10,8,6,.55);display:grid;place-items:center;padding:16px;animation:fio-surge .2s}
@keyframes fio-surge{from{opacity:0}}
.fio-modal{position:relative;width:min(640px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:var(--papel);color:var(--tinta);border-radius:18px;padding:28px 26px 22px;box-shadow:0 30px 70px -20px rgba(0,0,0,.6);font-family:Inter,system-ui,sans-serif}
.fio-modal .olho{margin:0 0 6px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--acento)}
.fio-modal h2{margin:0 0 8px;font:500 1.55rem/1.2 Literata,Georgia,serif}
.fio-modal .sub{margin:0 0 18px;color:var(--tinta-2);font-size:.92rem;line-height:1.5}
.fio-modal .cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:18px}
.fio-modal .cartao{position:relative;border:1px solid var(--linha);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:4px}
.fio-modal .cartao.destaque{border-color:var(--acento);box-shadow:0 0 0 1px var(--acento) inset}
.fio-modal .fita{position:absolute;top:-10px;left:12px;background:var(--acento);color:var(--sobre-acento,#fff);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:2px 9px}
.fio-modal .preco{font:500 1.3rem Literata,Georgia,serif}
.fio-modal .preco small{font-size:.75rem;color:var(--tinta-2);font-family:Inter,system-ui,sans-serif}
.fio-modal ul{margin:6px 0 0;padding-left:18px;font-size:.8rem;color:var(--tinta-2);line-height:1.5}
.fio-modal .acoes{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.fio-modal .ja{font-size:.86rem;color:var(--tinta-2)}

/* opinião: escolhas legíveis, um toque por resposta e envio só após conteúdo */
.fio-modal-opiniao{width:min(680px,100%)}
.fio-opcoes-opiniao{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 18px}
.fio-opcao-opiniao{display:grid;grid-template-columns:38px 1fr;align-items:center;gap:11px;min-height:78px;padding:12px;border:1px solid var(--linha);border-radius:14px;background:transparent;color:inherit;cursor:pointer;font:inherit;text-align:left;transition:border-color .15s,background .15s,transform .15s}
.fio-opcao-opiniao:hover{border-color:color-mix(in srgb,var(--acento) 60%,var(--linha));transform:translateY(-1px)}
.fio-opcao-opiniao:focus-visible{outline:3px solid color-mix(in srgb,var(--acento) 30%,transparent);outline-offset:2px}
.fio-opcao-opiniao[aria-pressed=true]{border-color:var(--acento);background:color-mix(in srgb,var(--acento) 9%,var(--papel));box-shadow:0 0 0 1px var(--acento) inset}
.fio-opiniao-icone{width:38px;height:38px;display:grid;place-items:center;border-radius:999px;background:color-mix(in srgb,var(--acento) 10%,var(--papel));color:var(--acento);font-weight:700;font-size:1.05rem}
.fio-opiniao-texto{display:flex;flex-direction:column;gap:3px;line-height:1.25}
.fio-opiniao-texto strong{font-size:.92rem;font-weight:650}
.fio-opiniao-texto small{font-size:.76rem;line-height:1.35;color:var(--tinta-2)}
.fio-opiniao-label{display:block;margin:0 0 7px;font-size:.84rem;font-weight:600}
.fio-opiniao-label span{font-weight:400;color:var(--tinta-2)}
.fio-opiniao-campo{width:100%;box-sizing:border-box;resize:vertical;margin:0 0 8px;padding:11px 12px;border:1px solid var(--linha);border-radius:10px;background:transparent;color:inherit;font:inherit;line-height:1.45}
.fio-opiniao-campo:focus{outline:2px solid color-mix(in srgb,var(--acento) 35%,transparent);border-color:var(--acento)}
.fio-modal-opiniao .botao-conta:disabled{opacity:.45;cursor:not-allowed}
@media (max-width:600px){
  .fio-modal-fundo:has(.fio-modal-opiniao){place-items:end center;padding:0}
  .fio-modal-opiniao{width:100%;max-height:92dvh;border-radius:20px 20px 0 0;padding:24px 18px calc(18px + env(safe-area-inset-bottom))}
  .fio-opcoes-opiniao{grid-template-columns:1fr;gap:8px}
  .fio-opcao-opiniao{min-height:66px}
}

/* o rodapé */
.fio-rodape{margin-top:64px;border-top:1px solid var(--linha);background:color-mix(in srgb,var(--tinta) 3%,var(--papel));color:var(--tinta-2);font:14px/1.55 Inter,system-ui,sans-serif}
.fio-rodape .dentro{max-width:72rem;margin:0 auto;padding:44px 16px 28px;display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:32px}
.fio-rodape .logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--tinta);margin-bottom:10px}
.fio-rodape .logo img{width:22px;height:22px}
.fio-rodape .logo span{font:19px Literata,Georgia,serif;color:var(--tinta)}
.fio-rodape .sobre p{margin:0 0 12px;max-width:40ch}
.fio-rodape .selos-rodape{display:flex;flex-wrap:wrap;gap:6px}
.fio-rodape .selos-rodape span{border:1px solid var(--linha);border-radius:999px;padding:2px 10px;font-size:.74rem}
.fio-rodape .presente-rodape{margin-top:12px;font-size:.82rem}
.fio-rodape .presente-rodape a{color:var(--acento);text-decoration:underline}
.fio-rodape .compartilhar-rodape{margin-top:6px;min-height:44px;padding:0 18px;border:1px solid var(--acento);border-radius:999px;background:transparent;color:var(--acento);font:inherit;font-size:.86rem;font-weight:600;cursor:pointer}
.fio-rodape .compartilhar-rodape:hover{background:var(--acento);color:#fff}
.fio-rodape h2{margin:0 0 12px;font:600 .76rem Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta)}
.fio-rodape ul{list-style:none;margin:0;padding:0}
.fio-rodape li{margin:0 0 8px}
.fio-rodape a{color:var(--tinta-2);text-decoration:none}
.fio-rodape a:hover{color:var(--tinta);text-decoration:underline}
.fio-rodape .baixo{max-width:72rem;margin:0 auto;padding:18px 16px 30px;border-top:1px solid var(--linha);font-size:.8rem}
.fio-rodape .baixo p{margin:0 0 6px;max-width:92ch}
.fio-rodape .baixo a{color:var(--acento)}
@media (max-width:760px){.fio-rodape .dentro{grid-template-columns:1fr 1fr}.fio-rodape .sobre{grid-column:1/-1}}
/* 29/10/2026: alvo de toque de 44 px (os links do rodapé tinham 17 px de altura, e
   "ver tudo", "sorteie um" e as etiquetas de assunto, 17) e campo com fonte de 16 px
   (com 15 px o iPhone dá zoom ao tocar no campo). Só em tela de toque. */
@media (pointer:coarse){
  .fio-rodape li{margin:0}
  .fio-rodape li a,.fio-rodape .presente-rodape a{display:inline-flex;align-items:center;min-height:44px}
  .fio-rodape .baixo a{display:inline-block;padding:12px 0;margin:-12px 0}
  a.miudo,button.miudo,.miudo>a,.miudo>button{display:inline-flex;align-items:center;min-height:44px}
  /* "ver todos →" e "filtrar milhares →" das estantes: área maior sem mexer no alinhamento */
  a.italic.ml-auto{padding:14px 0 14px 12px;margin:-14px 0}
  /* o leitor: "← acervo" (só a seta no celular, 19 px), a Ajuda (32 px), o − e + dos
     Ajustes (28 px) e as opções de leitura e de letra (33–38 px) */
  button.miudo{min-width:44px;justify-content:center}
  .fio-ajuda-revisao{min-width:44px;min-height:44px;justify-content:center}
  button.w-7.h-7{width:44px;height:44px}
  button.rounded.text-left{min-height:44px}
  .fio-barra .curto .ico{min-width:44px;min-height:44px}
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px!important}
}
/* o canto enquanto não se sabe quem está entrado (evita o "criar conta" piscar) */
.fio-barra .esperando{display:inline-block;width:118px;height:34px}

/* 23/10/2026: o "pular para o conteúdo" só aparece com o foco do teclado */
.fio-pular{position:absolute;left:-9999px;top:8px;z-index:1000;background:var(--papel);color:var(--tinta);border:2px solid var(--acento);border-radius:8px;padding:8px 14px;font:500 .9rem Inter,system-ui,sans-serif}
.fio-pular:focus{left:8px}
#main:focus{outline:none}

/* 23/10/2026: a apresentação de #raiz é para quem lê sem JavaScript (robôs); com JS, o app entra no lugar sem ela piscar */
.com-js .fio-apresenta{visibility:hidden}

/* 23/10/2026: a bolinha "revisando traduções agora" (fio-cabecalho.js, etiquetaRevisao) */
.fio-revisao{position:fixed;right:24px;bottom:72px;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:8px;font:500 13px/1.4 Inter,system-ui,sans-serif}
.fio-revisao .rv-bolinha{position:relative;display:inline-flex;align-items:center;gap:0;height:52px;min-width:52px;max-width:52px;padding:0 13px;overflow:hidden;white-space:nowrap;border-radius:999px;border:1px solid var(--linha);background:var(--papel);color:var(--acento);box-shadow:0 4px 18px rgba(0,0,0,.16);cursor:pointer;transition:max-width .28s ease,padding .28s ease,gap .28s ease}
.fio-revisao .rv-bolinha::after{content:'';position:absolute;inset:-1px;border-radius:999px;border:2px solid var(--acento);opacity:0;animation:rv-anel 3.2s ease-out infinite;pointer-events:none}
@keyframes rv-anel{0%{opacity:.45;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.35)}}
.fio-revisao .rv-icone{display:grid;place-items:center;flex:0 0 26px}
.fio-revisao .rv-giro{transform-origin:12px 12px;animation:rv-gira 6s linear infinite}
@keyframes rv-gira{to{transform:rotate(360deg)}}
.fio-revisao .rv-rotulo{color:var(--tinta);opacity:0;transition:opacity .2s}
.fio-revisao:hover .rv-bolinha,.fio-revisao:focus-within .rv-bolinha,.fio-revisao .rv-bolinha[aria-expanded="true"]{max-width:300px;padding:0 38px 0 14px;gap:8px}
.fio-revisao:hover .rv-rotulo,.fio-revisao:focus-within .rv-rotulo,.fio-revisao .rv-bolinha[aria-expanded="true"] .rv-rotulo{opacity:1}
.fio-revisao .rv-fechar{position:absolute;right:9px;bottom:15px;width:22px;height:22px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--tinta-2);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .15s}
.fio-revisao:hover .rv-fechar,.fio-revisao:focus-within .rv-fechar{opacity:1;pointer-events:auto}
.fio-revisao .rv-fechar:hover{background:var(--linha);color:var(--tinta)}
@media (hover:none){.fio-revisao .rv-fechar{display:none}}
@media (prefers-reduced-motion:reduce){.fio-revisao .rv-giro,.fio-revisao .rv-bolinha::after{animation:none}}
.fio-revisao .rv-cartao{width:min(340px,calc(100vw - 32px));margin:0;box-sizing:border-box;padding:14px 16px;border-radius:14px;border:1px solid var(--linha);background:var(--papel);color:var(--tinta);box-shadow:0 8px 28px rgba(0,0,0,.18);font-weight:400}
.fio-revisao .rv-cartao strong{display:block;font:600 15px/1.3 Literata,Georgia,serif;margin-bottom:6px}
.fio-revisao .rv-cartao p{margin:0 0 8px;color:var(--tinta-2)}
.fio-revisao .rv-cartao .rv-pergunta{color:var(--tinta);font-weight:600;margin-top:4px}
.fio-revisao .rv-fichas{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.fio-revisao .rv-ficha{border:1px solid var(--linha);border-radius:999px;padding:5px 10px;background:transparent;color:var(--tinta);font:inherit;font-size:12.5px;cursor:pointer}
.fio-revisao .rv-ficha[aria-pressed="true"]{background:var(--acento);border-color:var(--acento);color:#fff}
.fio-revisao .rv-trecho{font-size:12px}
.fio-revisao textarea,.fio-revisao .rv-email{width:100%;box-sizing:border-box;font:inherit;font-size:13px;padding:8px;border-radius:8px;border:1px solid var(--linha);background:transparent;color:var(--tinta);resize:vertical}
.fio-revisao .rv-email{margin-top:6px;resize:none}
.fio-revisao .rv-acoes{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:8px}
.fio-revisao .rv-link{background:none;border:0;color:var(--tinta-2);cursor:pointer;font:inherit;font-size:12.5px;text-decoration:underline}
.fio-revisao .rv-saida{font-size:12px;margin:6px 0 0}
@media (max-width:600px){.fio-revisao{bottom:80px;right:18px}}
@media print{.fio-revisao{display:none}}

/* 23/10/2026: Ajuda, o neon que mostra para onde a bolinha foi, e o tour */
.fio-ajuda-revisao{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;background:transparent;color:var(--tinta);border:1px solid var(--linha);border-radius:999px;padding:6px 12px 6px 6px;font:inherit;font-size:13px;cursor:pointer}
.fio-ajuda-revisao .q{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--acento);color:#fff;font-weight:700;font-size:12px}
.fio-ajuda-revisao:hover{border-color:var(--acento)}
.fio-susp[data-chave=ajuda] .fio-lista button{display:flex;flex-direction:column;align-items:flex-start;width:100%;text-align:left;background:none;border:0;font:inherit;color:inherit;cursor:pointer}
.fio-dica{margin:6px 0 0;padding:10px 12px 4px;border-top:1px solid var(--linha);font-size:12.5px;line-height:1.45;color:var(--tinta-2);max-width:300px}
.fio-neon{position:relative;z-index:61;animation:fio-neon 1.1s ease-in-out 4;border-color:#e0313f!important}
@keyframes fio-neon{0%,100%{box-shadow:0 0 0 1px #e0313f,0 0 6px 1px rgba(224,49,63,.55)}50%{box-shadow:0 0 0 2px #ff4d5a,0 0 18px 6px rgba(255,60,75,.75)}}
.fio-voo{position:fixed;z-index:200;width:28px;height:28px;border-radius:50%;background:var(--acento);box-shadow:0 0 14px 4px rgba(224,49,63,.6);transition:transform .6s cubic-bezier(.5,0,.3,1),opacity .6s;pointer-events:none}
.fio-tour{position:fixed;inset:0;z-index:150;background:rgba(20,14,10,.48);padding:16px;pointer-events:auto}
.fio-tour .cartao{position:fixed;z-index:153;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100% - 32px));box-sizing:border-box;background:var(--papel);color:var(--tinta);border:1px solid color-mix(in srgb,var(--acento) 35%,var(--linha));border-radius:16px;padding:22px 22px 18px;box-shadow:0 18px 50px rgba(0,0,0,.3);font:15px/1.55 Inter,system-ui,sans-serif}
.fio-tour-destaque{position:relative!important;z-index:152!important;outline:4px solid var(--acento)!important;outline-offset:5px;border-radius:10px;box-shadow:0 0 0 9px color-mix(in srgb,var(--acento) 22%,transparent),0 8px 30px rgba(0,0,0,.3)!important}
.fio-barra:has(.fio-tour-destaque){z-index:151}
.fio-tour .passo{margin:0 0 4px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--acento)}
.fio-tour h2{margin:0 0 10px;font:600 22px/1.25 Literata,Georgia,serif}
.fio-tour p{margin:0 0 12px;color:var(--tinta-2)}
.fio-tour .pontos{display:flex;gap:6px;margin:4px 0 16px}
.fio-tour .pontos span{width:7px;height:7px;border-radius:50%;background:var(--linha)}
.fio-tour .pontos span.on{background:var(--acento);width:20px;border-radius:4px}
.fio-tour .acoes{display:flex;align-items:center;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.fio-tour .pular{margin-right:auto;background:none;border:0;color:var(--tinta-2);text-decoration:underline;cursor:pointer;font:inherit;font-size:13px}
.fio-tour .voltar{background:none;border:1px solid var(--linha);border-radius:999px;padding:8px 14px;color:var(--tinta);cursor:pointer;font:inherit;font-size:14px}
@media (max-width:600px){.fio-ajuda-revisao{padding:5px;gap:0;font-size:0}.fio-ajuda-revisao .q{font-size:12px}}
@media (max-width:640px){.fio-tour{display:flex;align-items:flex-end;justify-content:center}.fio-tour .cartao{position:relative;left:auto!important;top:auto!important;transform:none;width:100%;max-height:72vh;overflow:auto;margin:0}.fio-tour-destaque{outline-width:3px!important;outline-offset:2px}}
@media (prefers-reduced-motion:reduce){.fio-neon{animation:none;box-shadow:0 0 0 2px #e0313f}}
.fio-barra:has(.fio-neon){z-index:151}
/* a bolinha sobe enquanto o aviso de cookies está na tela */
body:has(.fio-lembrete) .fio-revisao{bottom:150px}
/* 30/10/2026: o cartão "instalar no iPhone" é mais alto que os outros lembretes */
body:has(.fio-lembrete-instalar) .fio-revisao,body:has(.fio-convite-app) .fio-revisao{display:none}
/* o convite para instalar (30/10/2026): fonte de 16 px e toque de 44 px */
.fio-lembrete.fio-convite-app{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.4;padding:14px}
.fio-convite-app img{flex:none;width:44px;height:44px;border-radius:10px}
.fio-convite-app strong{font-size:16px;margin-right:34px}
.fio-convite-app p{font-size:15px;margin:0 34px 10px 0}
.fio-convite-app .botoes{display:flex;gap:8px;flex-wrap:wrap}
.fio-convite-app .botoes button{min-height:44px;padding:0 14px;border-radius:999px;font:500 16px/1 Inter,system-ui,sans-serif;cursor:pointer}
.fio-convite-app .sim{background:var(--acento);color:var(--papel);border:none}
.fio-convite-app .nao{background:none;color:var(--tinta);border:1px solid var(--linha)}
.fio-convite-app .fechar{width:44px;height:44px;top:2px;right:2px}

/* 26/10/2026 (auditoria no celular): no leitor estreito a bolinha cobria o texto; o relato
   continua no botão de Ajuda (?) da barra do leitor */
@media (max-width:700px){html.fio-no-leitor .fio-revisao,html.fio-no-leitor .fio-lembrete{display:none}}
.fio-404{max-width:1100px;margin:14px auto 0;padding:10px 14px;border:1px solid var(--linha);border-left:4px solid var(--acento);border-radius:10px;background:var(--papel);color:var(--tinta);font:14px/1.5 Inter,system-ui,sans-serif;width:calc(100% - 32px)}
.fio-404-end{font-family:ui-monospace,Consolas,monospace;font-size:13px;word-break:break-all}

/* 26/10/2026 (fase 2): migalhas nas páginas soltas, montadas por fio-cabecalho.js */
.fio-migalhas{max-width:72rem;margin:0 auto;padding:12px 16px 0;font:13px/1.4 Inter,system-ui,sans-serif;color:var(--tinta-2)}
.fio-migalhas ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.fio-migalhas li+li::before{content:"›";margin-right:4px;opacity:.6}
.fio-migalhas a{color:inherit;text-decoration:none}
.fio-migalhas a:hover{color:var(--acento);text-decoration:underline}
.fio-migalhas [aria-current=page]{color:var(--tinta)}
.fio-404-links{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px}
.fio-404-links a,.fio-404-busca{color:var(--acento);font:inherit;background:none;border:none;padding:0;cursor:pointer;text-decoration:underline}

/* 26/10/2026: a faixa de manutenção do Mural (servidor/comunicados.mjs), acima da barra */
.fio-faixa-mural{background:color-mix(in srgb,var(--dourado,#b8862f) 22%,var(--papel));border-bottom:1px solid var(--linha);color:var(--tinta);font:14px/1.45 Inter,system-ui,sans-serif}
.fio-faixa-mural .dentro{max-width:72rem;margin:0 auto;padding:9px 44px 9px 16px;position:relative}
.fio-faixa-mural a{color:var(--acento);margin-left:8px}
.fio-faixa-mural .ate{color:var(--tinta-2)}
.fio-faixa-mural .fechar{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:none;background:none;font-size:20px;line-height:1;color:var(--tinta-2);cursor:pointer;padding:4px 8px}

/* 26/10/2026: o sino refeito (fio-cabecalho.js, conteudoSino): o item é botão e abre a mensagem aqui */
.fio-sino-conteudo li .item{display:flex;gap:12px;align-items:flex-start;width:100%;padding:10px;border-radius:10px;border:0;background:none;color:var(--tinta);font:inherit;text-align:left;cursor:pointer;position:relative}
.fio-sino-conteudo li .item:hover,.fio-sino-conteudo li .item:focus-visible{background:color-mix(in srgb,var(--tinta) 7%,transparent);outline:none}
.fio-sino-conteudo li.novo .item{background:color-mix(in srgb,var(--acento) 9%,transparent)}
.fio-sino-conteudo li.novo .item:hover{background:color-mix(in srgb,var(--acento) 15%,transparent)}
.fio-sino-conteudo .aberto{padding:4px 12px 12px;max-height:min(62vh,480px);overflow:auto}
.fio-sino-conteudo .aberto .cab{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px}
.fio-sino-conteudo .aberto .cab strong{display:block;font-size:1rem;line-height:1.3;color:var(--tinta)}
.fio-sino-conteudo .aberto time{display:block}
.fio-sino-conteudo .aberto .corpo{margin:0 0 14px;font-size:.92rem;line-height:1.55;color:var(--tinta);white-space:pre-line}
.fio-sino-conteudo .aberto .botao-conta{display:inline-block;text-decoration:none}
/* no celular a caixa do sino é uma folha da largura da tela, logo abaixo da barra */
@media (max-width:1180px){
  .fio-barra .dentro{position:relative}
  .fio-barra .curto .fio-susp[data-chave=sino]{position:static}
  .fio-barra .curto .fio-susp[data-chave=sino] .fio-painel{left:8px;right:8px;top:calc(100% + 2px);min-width:0}
  .fio-barra .curto .fio-sino-conteudo{width:auto}
}
/* Ajuda: os dois primeiros itens são botões e perdiam o destaque ao passar o mouse */
.fio-susp[data-chave=ajuda] .fio-lista button:hover,.fio-susp[data-chave=ajuda] .fio-lista button:focus-visible{background:color-mix(in srgb,var(--tinta) 6%,transparent);outline:none}
/* 26/10/2026: os grupos do menu do perfil */
.fio-lista .grupo-perfil{margin:8px 12px 2px;font:600 10.5px/1.2 Inter,system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-2)}
.fio-lista .sair{margin-top:6px;border-top:1px solid var(--linha)!important;border-radius:0 0 9px 9px!important}

/* 27/10/2026 (testador no celular): aviso de cookies e bolinha cobriam conteúdo */
.fio-lembrete .cookie-curto{display:none}
@media (max-width:640px){
  .fio-lembrete.fio-lembrete-cookies{left:0;right:0;bottom:0;max-width:none;border-radius:0;border-left:0;border-top:1px solid var(--linha);min-height:44px;padding:4px 48px 4px 14px;display:flex;align-items:center;box-shadow:0 -6px 18px -12px rgba(0,0,0,.4)}
  .fio-lembrete-cookies p{font-size:13px;margin:0;color:var(--tinta-2)}
  .fio-lembrete-cookies .cookie-longo{display:none}
  .fio-lembrete-cookies .cookie-curto{display:inline}
  .fio-lembrete-cookies .fechar{top:0;right:0;width:44px;height:44px}
  body:has(.fio-menu) .fio-lembrete-cookies{display:none}
  body:has(.fio-lembrete-cookies) .fio-revisao{bottom:60px}
  .fio-revisao{right:12px;bottom:16px;transition:transform .25s,opacity .25s}
  .fio-revisao .rv-bolinha{height:44px;min-width:44px;max-width:44px;padding:0 9px}
  html.fio-descendo .fio-revisao:not(:has(.rv-cartao)){transform:translateY(160%);opacity:0;pointer-events:none}
}

/* 31/10/2026: quem chega pelos vídeos (?origem=) abre com um livro, no lugar do destaque do dia */
html.fio-entrada .fio-hero{display:none}
.fio-entrada-livro{display:flex;gap:22px;align-items:center;max-width:720px;margin:22px auto 6px;padding:0 16px}
.fio-entrada-livro img{width:130px;height:auto;flex:none;border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.2)}
.fio-entrada-livro h1{margin:0 0 4px;font:500 clamp(1.5rem,5vw,2.1rem)/1.2 Literata,Georgia,serif;color:var(--tinta)}
.fio-entrada-livro .autor{margin:0 0 10px;font:500 14px/1.3 Inter,system-ui,sans-serif;color:var(--tinta-2)}
.fio-entrada-livro .chamada{margin:0 0 16px;font:400 16px/1.5 Literata,Georgia,serif;color:var(--tinta)}
.fio-entrada-livro .botao-conta{display:inline-block}
.fio-entrada-livro .limite{margin:12px 0 0;font:400 13px/1.45 Inter,system-ui,sans-serif;color:var(--tinta-2)}
@media (max-width:480px){.fio-entrada-livro{gap:14px;align-items:flex-start}.fio-entrada-livro img{width:92px}}
