/* ═══ HEADER ÚNICO DO SITE ═══════════════════════════════════════════════ */ .hdr{position:fixed;top:0;left:0;right:0;z-index:80;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); background:transparent;border-bottom:1px solid transparent;transition:background .45s ease,border-color .45s ease} .hdr-in{max-width:1440px;margin:0 auto;padding:0 clamp(20px,4vw,40px);height:80px;display:flex;align-items:center;gap:clamp(14px,2.4vw,36px)} .hdr-logo{display:flex;align-items:center;flex:0 0 auto} .hdr-logo-art{position:relative;display:block;width:124px;height:59px} .hdr-logo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:left center;transition:opacity .35s ease} .hdr-logo-img--light{opacity:1} .hdr-logo-img--color{opacity:0} .hdr-actions{display:flex;align-items:center;gap:12px;margin-left:auto;flex:0 0 auto} .hdr-ico{display:flex;align-items:center;justify-content:center;width:40px;height:40px; border:1px solid rgba(245,213,202,.28);color:rgba(255,249,247,.9);transition:border-color .3s ease,color .3s ease} .hdr-ico:hover{border-color:var(--gold);color:var(--gold-lt)} html[data-scrolled="1"] .hdr,.hdr--solid{background:rgba(255,249,247,.94);border-bottom-color:var(--line)} html[data-scrolled="1"] .hdr-logo-img--light,.hdr--solid .hdr-logo-img--light{opacity:0} html[data-scrolled="1"] .hdr-logo-img--color,.hdr--solid .hdr-logo-img--color{opacity:1} html[data-scrolled="1"] .navlink,.hdr--solid .navlink{color:var(--ink)} html[data-scrolled="1"] .hdr-ico,.hdr--solid .hdr-ico{color:var(--ink);border-color:var(--line-strong)} .nav-main{flex:1 1 auto;min-width:0;display:flex;justify-content:center} .nav-row{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:clamp(10px,1.6vw,26px)} .nav-item{position:relative;display:flex;align-items:center} .navlink{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:rgba(255,249,247,.9);padding:30px 0;border-bottom:1px solid transparent; transition:color .3s ease,border-color .3s ease} .navlink:hover,.nav-item:focus-within>.navlink{color:var(--gold)} .navlink.is-current{border-bottom-color:var(--gold);color:var(--gold)} .navlink-caret{width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor; transform:rotate(45deg) translateY(-2px);opacity:.7;transition:transform .3s ease} .nav-item:hover .navlink-caret,.nav-item:focus-within .navlink-caret{transform:rotate(225deg) translateY(-2px)} .drop{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px); opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,transform .28s ease,visibility .28s; padding-top:2px;z-index:90} .has-drop:hover>.drop,.has-drop:focus-within>.drop{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)} .drop-in{background:var(--bg-2);border:1px solid var(--line);box-shadow:0 24px 60px rgba(44,29,73,.18); display:grid;gap:clamp(20px,2.4vw,38px);padding:clamp(22px,2.2vw,32px)} /* o painel largo ancora no header, não no item — senão transborda a viewport. Isso faz o "top:100%" do .drop--mega calcular contra o .hdr (mais alto que o item), abrindo um vão morto entre o link e o painel: o mouse perde o :hover no meio do caminho e o menu fecha antes de chegar. Corrigido puxando a caixa para cima (margin-top negativo) e compensando com padding-top, para a área de hover ficar contínua sem mover o painel visível do lugar. */ .nav-item--mega{position:static} .drop--mega{left:50%;margin-top:-14px;padding-top:16px;transform:translateX(-50%) translateY(8px);width:min(94vw,1120px)} .has-drop:hover>.drop--mega,.has-drop:focus-within>.drop--mega{transform:translateX(-50%) translateY(0)} .drop--mega .drop-in{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(190px,.85fr);width:100%} .drop-in--list{grid-template-columns:1fr;width:max-content;min-width:270px;gap:2px;padding:14px} .drop-link{display:flex;flex-direction:column;gap:3px;padding:11px 13px;transition:background .3s ease} .drop-link:hover{background:var(--gold-mist)} .drop-link-t{font-size:14.5px;font-weight:400;color:var(--ink)} .drop-link-s{font-size:12.5px;color:var(--muted);line-height:1.45} .mega-col{display:flex;flex-direction:column;gap:12px;min-width:0} .mega-col-h{display:flex;flex-direction:column;gap:3px;padding-bottom:11px;border-bottom:1px solid var(--line)} .mega-col-t{font-family:var(--font-display);font-size:17px;font-weight:400;color:var(--ink);transition:color .3s ease} .mega-col-h:hover .mega-col-t{color:var(--gold-dk)} .mega-col-s{font-size:11.5px;color:var(--muted);line-height:1.4} .mega-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px} .mega-list a{display:block;font-size:13.5px;font-weight:300;color:var(--muted);padding:5px 8px;margin:0 -8px;transition:color .25s ease,background .25s ease} .mega-list a:hover{color:var(--ink);background:var(--gold-mist)} .mega-feature{display:flex;flex-direction:column;gap:10px;padding:20px;background:var(--bg-3);align-self:start} .mega-feature p{margin:0;font-size:13px;line-height:1.55;color:var(--muted)} /* ═══ SELETOR DE IDIOMA ═══════════════════════════════════════════════════ */ .lang-switch{position:relative} .lang-switch-trigger{width:auto;padding:0 12px;gap:6px;cursor:pointer;background:none;font:inherit} .lang-switch-code{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em} .lang-switch-drop{left:auto;right:0;transform:translateY(8px)} .has-drop:hover>.lang-switch-drop,.has-drop:focus-within>.lang-switch-drop{transform:translateY(0)} .lang-switch-drop .drop-in--list{min-width:170px} .lang-switch-opt.is-current{background:var(--gold-mist)} .lang-switch-opt.is-current .drop-link-t{color:var(--gold-dk)} .drawer-langs{display:flex;gap:8px;padding:16px 22px;border-bottom:1px solid var(--line)} .drawer-lang-opt{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;padding:8px 12px; border:1px solid var(--line);color:var(--muted);transition:border-color .25s ease,color .25s ease} .drawer-lang-opt.is-current{border-color:var(--gold);color:var(--gold-dk)} .drawer-state,.drawer-veil,.drawer{display:none} .burger{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center; border:1px solid rgba(245,213,202,.28);cursor:pointer} .burger>span{display:block;width:18px;height:1px;background:rgba(255,249,247,.92)} .burger>span:last-child{width:11px;background:var(--gold);align-self:flex-end;margin-right:13px} html[data-scrolled="1"] .burger>span,.hdr--solid .burger>span{background:var(--ink)} html[data-scrolled="1"] .burger>span:last-child,.hdr--solid .burger>span:last-child{background:var(--gold-dk)} html[data-scrolled="1"] .burger,.hdr--solid .burger{border-color:var(--line-strong)} .burger:focus-visible,.drawer-x:focus-visible{outline:2px solid var(--gold);outline-offset:3px} @media (max-width:1140px){ .nav-main{display:none} .hdr-cta{display:none} .burger{display:flex} .drawer-veil{display:block;position:fixed;inset:0;z-index:88;background:rgba(44,29,73,.58); opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s} .drawer{display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;z-index:89; width:min(90vw,380px);background:var(--bg-2);border-left:1px solid var(--line); transform:translateX(101%);transition:transform .38s cubic-bezier(.16,1,.3,1);overflow-y:auto} #lp-drawer:checked~.drawer-veil{opacity:1;visibility:visible} #lp-drawer:checked~.drawer{transform:none} .drawer-top{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line)} .drawer-x{font-size:26px;line-height:1;cursor:pointer;color:var(--muted);padding:0 4px} .drawer-nav{display:flex;flex-direction:column;padding:8px 0;flex:1 1 auto} .drawer-nav details{border-bottom:1px solid var(--line)} .drawer-nav summary{list-style:none;cursor:pointer;padding:15px 22px;font-family:var(--font-display);font-size:17px; display:flex;align-items:center;justify-content:space-between} .drawer-nav summary::-webkit-details-marker{display:none} .drawer-nav summary::after{content:"";width:6px;height:6px;border-right:1px solid var(--gold);border-bottom:1px solid var(--gold); transform:rotate(45deg);transition:transform .3s ease} .drawer-nav details[open] summary::after{transform:rotate(225deg)} .drawer-sub{display:flex;flex-direction:column;padding:0 22px 14px} /* min-height:44px é o alvo de toque recomendado (Apple HIG/Material) — só padding:8px 0 media ~31px de altura real, apertado numa lista de 6-8 itens colados um no outro no menu mobile. */ .drawer-sub a{display:flex;align-items:center;min-height:44px;padding:8px 0;font-size:14px;font-weight:300;color:var(--muted)} .drawer-sub a:hover{color:var(--gold-dk)} .drawer-sub-all{color:var(--gold-dk);font-weight:400} .drawer-flat{padding:15px 22px;font-family:var(--font-display);font-size:17px;border-bottom:1px solid var(--line)} .drawer-foot{display:flex;flex-direction:column;gap:10px;padding:20px 22px;border-top:1px solid var(--line)} } .subnav{position:sticky;top:80px;z-index:60;background:rgba(255,249,247,.94);backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} .subnav-in{display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;padding:12px clamp(20px,4vw,40px);max-width:1440px;margin:0 auto; transition:mask-image .2s ease,-webkit-mask-image .2s ease} .subnav-in::-webkit-scrollbar{display:none} .subnav-in>a{flex:0 0 auto;padding:5px 0;border-bottom:1px solid transparent;color:var(--muted);transition:color .25s ease,border-color .25s ease} .subnav-in>a:hover{color:var(--gold-dk);border-bottom-color:var(--gold)} .subnav-in>a.is-active{color:var(--gold-dk);border-bottom-color:var(--gold)} /* Sinaliza que há mais itens fora da área visível (scroll horizontal) com um esmaecimento nas bordas — só aparece quando o conteúdo realmente transborda (classe aplicada via JS, ver functions.js) para não recortar o texto à toa. */ .subnav-in.is-scrollable{ -webkit-mask-image:linear-gradient(to right,#000,#000 calc(100% - 34px),transparent); mask-image:linear-gradient(to right,#000,#000 calc(100% - 34px),transparent); } .subnav-in.is-scrollable.is-scrolled{ -webkit-mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 34px),transparent); mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 34px),transparent); } .subnav-in.is-scrollable.is-at-end{ -webkit-mask-image:linear-gradient(to right,transparent,#000 24px,#000); mask-image:linear-gradient(to right,transparent,#000 24px,#000); } @media (max-width:1140px){.subnav{top:70px}} @media (max-width:760px){ .subnav-in{gap:16px;padding:10px 16px} .subnav-in>a{font-size:13px} .subnav-in.is-scrollable{ -webkit-mask-image:linear-gradient(to right,#000,#000 calc(100% - 22px),transparent); mask-image:linear-gradient(to right,#000,#000 calc(100% - 22px),transparent); } .subnav-in.is-scrollable.is-scrolled{ -webkit-mask-image:linear-gradient(to right,transparent,#000 14px,#000 calc(100% - 22px),transparent); mask-image:linear-gradient(to right,transparent,#000 14px,#000 calc(100% - 22px),transparent); } .subnav-in.is-scrollable.is-at-end{ -webkit-mask-image:linear-gradient(to right,transparent,#000 14px,#000); mask-image:linear-gradient(to right,transparent,#000 14px,#000); } } @media (max-width:760px){.hdr-in{height:70px}.hdr-logo-art{width:108px;height:51px}} /* cartões que são links ganham afordância */ .card-p--link{position:relative} .card-p--link::after{content:"→";position:absolute;top:clamp(22px,2vw,30px);right:clamp(22px,2vw,30px); font-size:17px;color:var(--gold);opacity:0;transform:translateX(-6px);transition:opacity .35s ease,transform .35s ease} .card-p--link:hover::after{opacity:1;transform:none} /* rodapé — o