/* Hokazi - tema novo, parte 1 (2026-10-06): molduras dos botoes, barra do topo e capa. Carregar DEPOIS do styles.css.
   Rascunho: ainda nao esta no site publicado. */

/* ---------- molduras (9 fatias: cantos recortados para dentro, linha dupla fina) ---------- */
:root{
  --hk-rosa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ff8fcc'/%3E%3Cstop offset='.5' stop-color='%23e94aa0'/%3E%3Cstop offset='1' stop-color='%23c2338a'/%3E%3C/linearGradient%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.42'/%3E%3Cstop offset='.48' stop-color='%23fff' stop-opacity='.04'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='.10'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M8 .6H56A7.4 7.4 0 0 0 63.4 8V56A7.4 7.4 0 0 0 56 63.4H8A7.4 7.4 0 0 0 .6 56V8A7.4 7.4 0 0 0 8 .6Z' fill='url(%23g)' stroke='%23ffe1f2' stroke-width='1.1'/%3E%3Cpath d='M9.500 4.200H54.500A5.300 5.300 0 0 0 59.800 9.500V54.500A5.300 5.300 0 0 0 54.500 59.800H9.500A5.300 5.300 0 0 0 4.200 54.500V9.500A5.300 5.300 0 0 0 9.500 4.200Z' fill='url(%23s)' stroke='%23fff' stroke-opacity='.62' stroke-width='.7'/%3E%3C/svg%3E");
  --hk-escuro:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23341a38' stop-opacity='.93'/%3E%3Cstop offset='1' stop-color='%23180b1c' stop-opacity='.95'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M8 .6H56A7.4 7.4 0 0 0 63.4 8V56A7.4 7.4 0 0 0 56 63.4H8A7.4 7.4 0 0 0 .6 56V8A7.4 7.4 0 0 0 8 .6Z' fill='url(%23g)' stroke='%23e39ac6' stroke-width='1.1'/%3E%3Cpath d='M9.500 4.200H54.500A5.300 5.300 0 0 0 59.800 9.500V54.500A5.300 5.300 0 0 0 54.500 59.800H9.500A5.300 5.300 0 0 0 4.200 54.500V9.500A5.300 5.300 0 0 0 9.500 4.200Z' fill='none' stroke='%23e39ac6' stroke-opacity='.38' stroke-width='.7'/%3E%3C/svg%3E");
  --hk-selo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='42'%3E%3Cpath d='M14 .6H50L63 21 50 41.400H14L1 21Z' fill='%23180b1c' fill-opacity='.86' stroke='%23d58bb8' stroke-width='1'/%3E%3C/svg%3E");
}

/* ---------- botao grande da capa (icone + duas linhas) ---------- */
.hk-btn{position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:15px;min-width:292px;height:70px;padding:0 14px;
  border:20px solid transparent;border-image:var(--hk-rosa) 20 fill/20px stretch;color:#fff!important;text-decoration:none;cursor:pointer;background:none;
  filter:drop-shadow(0 0 10px #ff4fae8c) drop-shadow(0 5px 12px #00000080);transition:transform .16s ease,filter .16s ease}
.hk-btn:hover{transform:translateY(-1px);filter:drop-shadow(0 0 18px #ff78c8) drop-shadow(0 7px 14px #00000090) brightness(1.06)}
.hk-btn:active{transform:translateY(1px);filter:drop-shadow(0 0 6px #ff4fae80) brightness(.96)}
.hk-btn::before,.hk-btn::after{content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;background:#fff;transform:rotate(45deg);box-shadow:0 0 6px #ffb0dd}
.hk-btn::before{left:-23px}.hk-btn::after{right:-23px}
.hk-btn svg{width:26px;height:26px;flex:none;color:#ffd9ee;filter:drop-shadow(0 1px 1px #7a1650)}
.hk-btn-txt{display:flex;flex-direction:column;align-items:center;line-height:1;text-shadow:0 1px 2px #7a165099}
.hk-btn-txt strong{font:400 19px Optimus,Georgia,serif;letter-spacing:2.2px;text-transform:uppercase;white-space:nowrap}
.hk-btn-txt small{margin-top:7px;font:10px Georgia,serif;letter-spacing:3.5px;text-transform:uppercase;color:#ffe6f4;white-space:nowrap}
.hk-btn-escuro{border-image-source:var(--hk-escuro);filter:drop-shadow(0 0 6px #c9609f55) drop-shadow(0 5px 12px #00000090)}
.hk-btn-escuro:hover{filter:drop-shadow(0 0 14px #ff78c8aa) drop-shadow(0 7px 14px #00000090) brightness(1.18)}
.hk-btn-escuro::before,.hk-btn-escuro::after{background:#f0a6d2}
.hk-btn-escuro svg{color:#ff8fd0}
.hk-btn-escuro .hk-btn-txt small{color:#dcaecb}
@media(max-width:899px){.hk-btn{min-width:0;flex:1;height:58px;gap:8px;padding:0 4px;border-width:16px;border-image-width:16px}.hk-btn svg{width:20px;height:20px}.hk-btn-txt strong{font-size:13px;letter-spacing:1.2px}.hk-btn-txt small{font-size:8px;letter-spacing:2px;margin-top:5px}.hk-btn::before,.hk-btn::after{display:none}}

/* ---------- barra do topo (computador) ---------- */
@media(min-width:1101px){
  .navigation{height:76px!important;padding-inline:max(22px,calc((100vw - 1500px)/2))!important;justify-content:flex-start!important;gap:0!important;
    background:linear-gradient(180deg,#0a050cf5,#170a1aee)!important;border-bottom:1px solid #6e2a57!important;box-shadow:0 10px 26px #000000aa!important;
    backdrop-filter:blur(10px);font-size:13px!important;letter-spacing:1.2px!important;text-transform:uppercase;color:#f6e6f0!important}
  .navigation::before{content:"Hokazi";align-self:stretch;display:flex;align-items:center;padding-left:72px;margin-right:auto;
    background:url("assets/images/hokazi-h.png") left center/auto 62px no-repeat;font:22px Optimus,Georgia,serif;letter-spacing:4px;color:#ffe3f3;
    text-shadow:0 0 14px #ff5fb4aa,0 2px 4px #000;filter:drop-shadow(0 0 8px #ff4fae55)}
  .navigation::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;pointer-events:none;
    background:linear-gradient(90deg,transparent 0,#ff6cc0 18%,#ffc3e3 50%,#ff6cc0 82%,transparent 100%);opacity:.75}
  .navigation>a,.navigation>.nav-placeholder,.navigation>.nav-account{position:relative;flex:0 0 auto!important;padding:10px 15px!important;border-bottom:0!important;min-height:0!important}
  .navigation>*+*::before{content:"";position:absolute;left:-4px;top:50%;width:6px;height:6px;transform:translateY(-50%) rotate(45deg);background:#a8407a;box-shadow:0 0 6px #ff5fb4aa}
  .navigation>a{color:#f6e6f0}
  .navigation>a:hover{color:#fff!important;text-shadow:0 0 10px #ff8fd0,0 0 22px #ff4fae!important}
  .navigation>a[aria-current="page"]{color:#ff8fd0!important;text-shadow:0 0 12px #ff4faeaa!important}
  .navigation>a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:-4px;height:2px;background:linear-gradient(90deg,transparent,#ff6cc0,transparent);box-shadow:0 0 10px #ff6cc0}
  .navigation .nav-placeholder{color:#b996ab!important}
  .navigation .nav-placeholder small{color:#8e6c81!important}
  .navigation .nav-account>a,.navigation .nav-logout button{color:#ffb3dc!important;padding:6px 6px!important;border-bottom:0!important}
}
@media(min-width:1500px){
  .navigation{font-size:14px!important;letter-spacing:1.6px!important}
  .navigation>a,.navigation>.nav-placeholder,.navigation>.nav-account{padding:10px 22px!important}
}
/* tablet e celular: mesma barra de antes, nas cores novas */
@media(max-width:1100px){
  .navigation{background:linear-gradient(180deg,#0a050cf7,#170a1af2)!important;border-bottom:1px solid #6e2a57!important;text-transform:uppercase}
  .navigation>a[aria-current="page"]{color:#ff8fd0!important}
}

/* ---------- capa ---------- */
.masthead{max-width:none!important;margin:0!important;isolation:isolate;overflow:hidden;
  background:linear-gradient(90deg,#0c0510f2 0,#0c0510c4 26%,#0c051040 52%,#0c051000 70%),linear-gradient(0deg,#120813 0,#12081300 18%),url("assets/images/hokazi-capa.jpg") center top/cover no-repeat!important}
.masthead .hero-art{display:none!important}
@font-face{font-family:"Kaushan Script";src:url("assets/fonts/KaushanScript-Regular.ttf") format("truetype");font-display:swap}
.wordmark>p:first-child{color:#f1dbe9!important;text-shadow:0 1px 4px #000}
.wordmark :is(h1,.hero-name){font-size:0!important;line-height:0!important;letter-spacing:0!important;color:transparent!important;text-shadow:none!important;
  background:url("assets/images/hokazi-logo2.png") center/contain no-repeat;filter:drop-shadow(0 0 14px #ff8fd03d) drop-shadow(0 6px 12px #00000099)}
.wordmark .flourish{display:none}
.wordmark .tagline{color:#fff!important;text-shadow:0 2px 8px #000}
.server-status{display:inline-flex!important;align-items:center;height:44px;margin:0 0 22px!important;padding:0 16px!important;border-radius:0!important;color:#fff!important;font:17px Georgia,serif!important;box-sizing:border-box;
  background:none!important;box-shadow:none!important;border:12px solid transparent!important;border-image:var(--hk-escuro) 20 fill/12px stretch!important}
.server-status:before{width:9px!important;height:9px!important;margin-right:11px!important;background:#5fe07a!important;box-shadow:0 0 6px #5fe07a}
.hero-actions{gap:20px!important}
.masthead .launch-mark{background:none!important;border:12px solid transparent!important;border-image:var(--hk-escuro) 20 fill/12px stretch!important;box-shadow:none!important;color:#fff!important;transform:none!important}

@media(min-width:900px){
  .masthead{height:640px!important}
  .masthead .petals{inset:76px 0 0}
  .wordmark{top:132px!important;left:max(3%,calc(50% - 690px))!important;right:auto!important;width:640px!important;padding:0!important;background:none!important;text-align:center}
  .wordmark>p:first-child{display:flex;align-items:center;justify-content:center;gap:14px;margin:0;font:13px Arial,sans-serif!important;letter-spacing:5px!important}
  .wordmark>p:first-child::before,.wordmark>p:first-child::after{content:"\25C6";display:flex;align-items:center;width:84px;font-size:7px;letter-spacing:0;color:#d48fb8}
  .wordmark>p:first-child::before{justify-content:flex-end;background:linear-gradient(90deg,transparent,#d48fb8) left center/72px 1px no-repeat}
  .wordmark>p:first-child::after{justify-content:flex-start;background:linear-gradient(270deg,transparent,#d48fb8) right center/72px 1px no-repeat}
  .wordmark :is(h1,.hero-name){height:250px;margin:0 0 -6px!important}
  .wordmark .tagline{margin:0 0 22px!important;font:30px "Kaushan Script",Georgia,serif!important;letter-spacing:.5px}
  .wordmark .tagline::after{content:"";display:block;width:66%;height:5px;margin:14px auto 0;border-radius:50%;transform:rotate(-.5deg);background:linear-gradient(90deg,transparent,#d93d95 18%,#ff86c9 50%,#d93d95 82%,transparent)}
  .hero-actions{margin-top:0!important;flex-wrap:nowrap!important;justify-content:center}
  .masthead .launch-mark{top:auto!important;bottom:92px!important;left:auto!important;right:max(3%,calc(50% - 690px))!important}
}
@media(max-width:899px){
  .masthead{background:linear-gradient(180deg,#0c051099 0,#0c0510d9 45%,#120813 100%),url("assets/images/hokazi-capa.jpg") 78% top/cover no-repeat!important}
  .wordmark :is(h1,.hero-name){height:120px;margin:4px 0 0!important}
  .hero-actions{padding:0 4px}
}
/* celular: capa mais alta para caberem os botoes; selo de lancamento logo abaixo do menu */
@media(max-width:899px){
  .masthead{height:650px!important}
  .masthead .launch-mark{top:118px!important;bottom:auto!important;left:auto!important;right:4%!important;border-width:10px!important;border-image-width:10px!important}
}

/* ================= v3 (2026-10-06): transicao suave da capa e menu como no desenho, com brilho DISCRETO =================
   (a v2 exagerou no brilho e nas animacoes; guardada em deploy/tema/tema-topo_v2_brilhante.css) */

/* ---- capa: a imagem some aos poucos no fundo da pagina (sem linha de corte) ---- */
.masthead{background:none!important;overflow:visible!important}
.masthead::before{content:"";position:absolute;inset:0 0 -90px 0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,#0c0510f2 0,#0c0510c4 26%,#0c051040 52%,#0c051000 70%),url("assets/images/hokazi-capa.jpg") center top/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 52%,#0009 72%,#0003 88%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 52%,#0009 72%,#0003 88%,transparent 100%)}
@media(max-width:899px){.masthead::before{background:linear-gradient(180deg,#0c051099 0,#0c0510d9 45%,#0c0510f2 100%),url("assets/images/hokazi-capa.jpg") 78% top/cover no-repeat}}
body{background:#110712 radial-gradient(ellipse 1200px 900px at 50% 1250px,#24112a 0,#180b1a 55%,#110712 100%) no-repeat!important;background-attachment:scroll!important}
html{background:#110712}
.masthead .petals{inset:76px 0 -90px 0!important;overflow:visible}
.petals i{background:#f3a9cf99!important}

/* ---- menu (computador): linhas finas, pouco brilho ---- */
@media(min-width:1101px){
  .navigation{height:80px!important;overflow:visible;background:linear-gradient(180deg,#09040bf7,#140916f2)!important;border-bottom:0!important;box-shadow:0 8px 22px #00000088!important;
    font-size:13px!important;letter-spacing:1.4px!important;color:#f2e6ee!important}
  .navigation>a{color:#f2e6ee;text-shadow:0 1px 3px #000!important;transition:color .2s ease}
  .navigation>a:hover{color:#ffb3dc!important;text-shadow:0 1px 3px #000!important}
  /* separadores: estrelinha pequena e apagada */
  .navigation>*+*::before{content:"\2726";left:-6px;width:auto;height:auto;transform:translateY(-52%);background:none;box-shadow:none;
    font:9px/1 Georgia,serif;color:#8a4672;text-shadow:none;letter-spacing:0}
  /* item atual: rosa, com a linha fina e o losango no meio */
  .navigation>a[aria-current="page"]{color:#ff7cc4!important;text-shadow:0 0 10px #ff4fae40,0 1px 3px #000!important}
  .navigation>a[aria-current="page"]::after{content:"\25C6";left:6px;right:6px;bottom:-9px;height:12px;box-shadow:none;filter:none;
    font:7px/12px Georgia,serif;text-align:center;letter-spacing:0;color:#ffd0ea;text-shadow:0 0 4px #ff6cc0;
    background:linear-gradient(90deg,transparent,#e8559f 22%,#ff9fd2 50%,#e8559f 78%,transparent) center/100% 1px no-repeat}
  .navigation>a:not([aria-current])::after{content:none}
  /* linha de baixo: um fio rosa apagado com dois losangos pequenos */
  .navigation::after{height:9px;bottom:-5px;opacity:1;box-shadow:none;
    background:linear-gradient(90deg,transparent 0,#7d335f 10%,#b4508a 50%,#7d335f 90%,transparent 100%) center/100% 1px no-repeat,
      linear-gradient(45deg,transparent 42%,#c9609f 42% 58%,transparent 58%) 24% 50%/7px 7px no-repeat,linear-gradient(-45deg,transparent 42%,#c9609f 42% 58%,transparent 58%) 24% 50%/7px 7px no-repeat,
      linear-gradient(45deg,transparent 42%,#c9609f 42% 58%,transparent 58%) 76% 50%/7px 7px no-repeat,linear-gradient(-45deg,transparent 42%,#c9609f 42% 58%,transparent 58%) 76% 50%/7px 7px no-repeat}
  /* H: aura escura e discreta atras, respirando bem devagar */
  .navigation::before{padding-left:92px;font-size:21px;letter-spacing:4px;color:#f6e3ee;text-shadow:0 1px 3px #000;filter:none;
    background:url("assets/images/hokazi-h.png") 12px center/auto 62px no-repeat,radial-gradient(circle,#c2338a55 0,#8a1f6233 40%,transparent 66%) -6px center/100px 100px no-repeat;
    animation:hk-aura 7s ease-in-out infinite}
}
@keyframes hk-aura{0%,100%{background-size:auto 62px,92px 92px;background-position:12px center,-2px center}50%{background-size:auto 62px,112px 112px;background-position:12px center,-12px center}}

/* ---- pouca coisa viva: so a luz verde do servidor ---- */
.server-status:before{animation:hk-vivo 2.4s ease-in-out infinite}
@keyframes hk-vivo{0%,100%{box-shadow:0 0 5px #4fe06a}50%{box-shadow:0 0 11px #4fe06a}}
.paper,.side-card,.fx-grupo,.fx-cartao,.fx-post{transition:border-color .25s ease}
.side-card:hover,.fx-grupo:hover,.fx-cartao:hover,.fx-post:hover{border-color:#8a3a6e!important}
@media(prefers-reduced-motion:reduce){.navigation::before,.server-status:before{animation:none!important}}

/* ---------- v5 (2026-10-06): detalhes finos da capa como no desenho; logo original do usuario ---------- */
.wordmark :is(h1,.hero-name){background-image:url("assets/images/hokazi-logo.png")!important;filter:drop-shadow(0 0 16px #ff3fa655) drop-shadow(0 6px 12px #00000099)!important}
@media(min-width:900px){
  .wordmark :is(h1,.hero-name){height:232px!important;margin:-16px 0 0!important}
  .wordmark>p:first-child{position:relative;z-index:1;white-space:nowrap;margin:0!important;gap:15px!important;font:600 14px "Segoe UI",Arial,sans-serif!important;letter-spacing:3.6px!important;color:#fff!important;text-shadow:0 1px 3px #000!important}
  .wordmark>p:first-child::before,.wordmark>p:first-child::after{content:""!important;flex:none;width:62px!important;height:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='62' height='12' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='44' y2='0'%3E%3Cstop offset='0' stop-color='%23d0649c' stop-opacity='0'/%3E%3Cstop offset='.55' stop-color='%23c85c96' stop-opacity='.75'/%3E%3Cstop offset='1' stop-color='%23ea82b9'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 6H58' stroke='url(%23f)' stroke-width='1'/%3E%3Cpath d='M55 5.400L61 6L55 6.600Z' fill='%23ea82b9'/%3E%3Cpath d='M48 1.200L53 6L48 10.800L43 6Z' stroke='%23d76da6' stroke-width='1'/%3E%3Ccircle cx='48' cy='6' r='1.300' fill='%23f2a3cd'/%3E%3C/svg%3E") center/62px 12px no-repeat!important}
  .wordmark>p:first-child::after{transform:scaleX(-1)}
  .wordmark .tagline::after{width:470px!important;height:34px!important;margin:2px auto -4px!important;border-radius:0!important;transform:none!important;background:url("assets/images/hokazi-pincelada.png") center/100% 100% no-repeat!important}
}
/* ---------- v10 (2026-10-06): capa PADRAO em todas as paginas (tela larga), em duas camadas:
   fundo = capa do usuario sem logo, de ponta a ponta; por cima, o bloco logo+frase+selo+botoes recortado do desenho de
   referencia, em tamanho menor. Os dois links da capa ficam invisiveis por cima dos botoes pintados. ---------- */
@media(max-width:899px){.hk-so-capa,.hk-capa-larga{display:none!important}}
@media(min-width:900px){
  .fx-capa{display:none!important}
  .masthead{--bw:min(37vw,700px);height:calc(80px + 32vw)!important}
  .masthead~*{position:relative;z-index:1}
  .masthead::before{inset:80px 0 auto 0!important;height:35.57vw;background:url("assets/images/hokazi-capa-limpa.jpg") center top/100% 100% no-repeat!important;
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 70%,#000000d8 77%,#000000a0 83%,#00000060 89%,#0000002c 94%,#0000000c 98%,transparent 100%)!important;
    mask-image:linear-gradient(180deg,#000 0,#000 70%,#000000d8 77%,#000000a0 83%,#00000060 89%,#0000002c 94%,#0000000c 98%,transparent 100%)!important}
  .masthead .wordmark{position:absolute!important;top:calc(80px + 2.2vw)!important;left:max(4vw,calc(50% - 760px))!important;right:auto!important;width:var(--bw)!important;height:calc(var(--bw)*.7256)!important;margin:0!important;padding:0!important;
    background:url("assets/images/hokazi-bloco.png") center/100% 100% no-repeat!important}
  .masthead .wordmark>p,.masthead .wordmark :is(h1,.hero-name),.masthead .wordmark .flourish,.masthead .launch-mark{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap}
  .masthead .hero-actions{display:block!important;margin:0!important;padding:0!important}
  .masthead .hero-actions>a{position:absolute!important;display:block!important;min-width:0!important;min-height:0!important;padding:0!important;border:0!important;border-image:none!important;filter:none!important;background:none!important;box-shadow:none;border-radius:6px!important;transform:none!important;font-size:0!important;color:transparent!important;text-shadow:none!important;transition:background .15s ease,box-shadow .15s ease}
  .masthead .hero-actions>a>*{display:none!important}
  .masthead .hero-actions>a::before,.masthead .hero-actions>a::after{display:none!important}
  .masthead .hero-actions>a:first-child{left:5.1%;top:80.3%;width:46.8%;height:15.5%}
  .masthead .hero-actions>a:last-child{left:54.5%;top:81.7%;width:40.7%;height:12.8%}
  .masthead .hero-actions>a:hover,.masthead .hero-actions>a:focus-visible{background:#ffffff1c!important;box-shadow:0 0 18px #ff8fd066!important}
}
/* ---------- v11 (2026-10-06): capa compacta (o quadro central aparece logo ao entrar; a imagem continua de fundo por
   tras dos paineis) e marca do topo (H + HOKAZI) recortada do desenho de referencia, sem aura nem animacao. ---------- */
@media(min-width:900px){
  .masthead{--bw:min(30vw,540px);height:calc(80px + var(--bw)*.7256 + 18px)!important}
  .masthead .wordmark{top:86px!important}
}
@media(min-width:1101px){
  .navigation::before{content:""!important;align-self:flex-start!important;flex:none;width:230px;height:145px;padding:0!important;margin-right:auto;pointer-events:none;
    background:url("assets/images/hokazi-marca.png") left top/230px 145px no-repeat!important;animation:none!important;filter:none!important;text-shadow:none!important}
}

/* v12 (2026-10-06): fio do menu liso, sem os losangos (apareciam como "x") */
@media(min-width:1101px){.navigation::after{background:linear-gradient(90deg,transparent 0,#7d335f 10%,#b4508a 50%,#7d335f 90%,transparent 100%) center/100% 1px no-repeat!important}}

/* v13 (2026-10-06): bloco do logo alinhado com a borda esquerda dos quadros da pagina (coluna de 1180 px) */
@media(min-width:900px){.masthead .wordmark{left:max(2vw,calc(50% - 590px - var(--bw)*.047))!important}}

/* v14 (2026-10-06): quadro da pagina de Updates e do Forum com a mesma largura do Inicio (1180 px) */
@media(min-width:1101px){
  .updates-layout{grid-template-columns:228px minmax(0,1fr)!important;gap:22px!important;width:min(1180px,94%)!important;padding-top:0!important;margin-top:-2px!important}
  main.fx{width:min(1180px,94%)!important;max-width:1180px!important}
}

/* v15 (2026-10-06): bloco do logo recortado mais alto (820x640) para o anel pincelado aparecer inteiro */
@media(min-width:900px){
  .masthead{height:calc(112px + var(--bw)*.7256)!important}
  .masthead .wordmark{top:calc(100px - var(--bw)*.0549)!important;height:calc(var(--bw)*.7805)!important}
  .masthead .hero-actions>a:first-child{top:81.2%!important;height:15%!important}
  .masthead .hero-actions>a:last-child{top:82.5%!important;height:12.4%!important}
}

/* v16 (2026-10-06): menu do topo - brilho maior no item sob o mouse e sublinhado que desliza (menu-topo.js) */
@media(min-width:1101px){
  .navigation>a,.navigation .nav-account a{transition:color .18s ease,text-shadow .18s ease}
  .navigation>a:hover,.navigation>a:focus-visible,.navigation .nav-account a:hover{color:#ffc4e6!important;text-shadow:0 0 6px #ff8fd0,0 0 16px #ff4faecc,0 0 30px #ff4fae66!important}
  .navigation.hk-fio-ativo>a[aria-current="page"]::after{content:none!important}
  .hk-nav-fio{position:absolute;left:0;top:0;height:9px;width:0;opacity:0;pointer-events:none;
    background:linear-gradient(90deg,transparent,#ff7cc4 30%,#ffd3ec 50%,#ff7cc4 70%,transparent) center/100% 1px no-repeat;filter:drop-shadow(0 0 5px #ff5fb4);
    transition:transform .32s cubic-bezier(.3,.8,.3,1),width .32s cubic-bezier(.3,.8,.3,1),opacity .2s ease}
  .hk-nav-fio::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:#ffe3f3;transform:rotate(45deg);box-shadow:0 0 6px #ff7cc4}
}
@media(prefers-reduced-motion:reduce){.hk-nav-fio{transition:none}}