/* Bulb Hub — base do site novo (rascunho, 2026-10-10)
   Fonte da verdade: Figma QDHkZaB7DBYamOgZkSWRmY. A mudança anda num sentido só: Figma → site.

   Escala: o desktop foi desenhado em 1440 px e o celular em 390 px. Toda medida do layout é
   escrita como calc(N * var(--px)), com N em pixels do Figma. Entre 768 e 1440 px a página
   encolhe proporcionalmente; acima de 1440 ela para de crescer e o conteúdo fica centralizado,
   com os fundos indo até a borda. Abaixo de 768 px vale o desenho de celular (390 px). */

@font-face{font-family:"Futura CXB";src:url("/assets/fonts/FuturaCondensedExtraBold.otf") format("opentype");font-weight:400 900;font-style:normal;font-display:swap;}
@font-face{font-family:"Helvetica Neue Site";src:local("Helvetica Neue"),local("HelveticaNeue");font-weight:400;}
@font-face{font-family:"Helvetica Neue Site";src:local("Helvetica Neue Bold"),local("HelveticaNeue-Bold");font-weight:700;}
@font-face{font-family:"Helvetica Neue Site";src:local("Helvetica Neue Light"),local("HelveticaNeue-Light");font-weight:300;}

:root{
  --laranja:#f37021; --escuro:#141414; --claro:#f0efef; --branco:#ffffff; --offwhite:#f1f1f1;
  --display:"Futura CXB","Futura","Arial Narrow",sans-serif;
  --corpo:"Helvetica Neue Site","Helvetica Neue",Helvetica,Arial,sans-serif;
  --acento:"Cormorant Garamond","Cormorant",Georgia,serif;
  --ease:cubic-bezier(.2,.7,.1,1);
  --px:min(1px, calc(100vw / 1440));
  --largura:calc(1440 * var(--px));
}
@media (max-width:767px){ :root{ --px:calc(100vw / 390); --largura:100vw; } }

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{font-family:var(--corpo);color:var(--escuro);background:var(--claro);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img,video,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
ul,ol{list-style:none;}

/* Seção: o fundo vai até a borda, o miolo tem a largura do quadro do Figma */
.secao{position:relative;width:100%;}
.miolo{position:relative;width:var(--largura);margin:0 auto;}
.t-laranja{background:var(--laranja);color:var(--branco);}
.t-escuro{background:var(--escuro);color:var(--branco);}
.t-claro{background:var(--claro);color:var(--escuro);}
.t-branco{background:var(--branco);color:var(--escuro);}

/* Tipografia — estilos de texto do Figma (Type/…) */
.display{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.06em;line-height:.96;}
.d200{font-size:calc(200 * var(--px));} .d140{font-size:calc(140 * var(--px));}
.d104{font-size:calc(104 * var(--px));} .d80{font-size:calc(80 * var(--px));}
.d64{font-size:calc(64 * var(--px));} .d48{font-size:calc(48 * var(--px));line-height:1;}
.d40{font-size:calc(40 * var(--px));line-height:1;} .d32{font-size:calc(32 * var(--px));line-height:1;}
.acento{font-family:var(--acento);font-style:italic;font-weight:300;letter-spacing:-.03em;line-height:1.1;}
.a48{font-size:calc(48 * var(--px));} .a36{font-size:calc(36 * var(--px));} .a26{font-size:calc(26 * var(--px));}
.h20,.h16,.h14,.h12{font-weight:700;line-height:1.25;letter-spacing:-.03em;}
.h20{font-size:calc(20 * var(--px));} .h16{font-size:calc(16 * var(--px));}
.h14{font-size:calc(14 * var(--px));} .h12{font-size:calc(12 * var(--px));}
.b18,.b16,.b15{font-weight:400;line-height:1.5;letter-spacing:-.03em;}
.b18{font-size:calc(18 * var(--px));} .b16{font-size:calc(16 * var(--px));} .b15{font-size:calc(15 * var(--px));}
.c12{font-size:calc(12 * var(--px));line-height:1.4;letter-spacing:-.03em;}
.caixa-alta{text-transform:uppercase;}
.link{text-decoration:underline;text-underline-offset:.3em;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* Cabeçalho (componente Header/Desktop 3:17 e Header/Mobile 3:38)
   Interações (11/10): o texto do link rola no hover; um traço (.marcador) desliza até o link sob o
   mouse e volta para a página atual; ao rolar a página, a barra encolhe e ganha sombra (.compacto,
   site.js); as redes da Bulb ficam no lugar do PT / EN. */
.topo{position:fixed;top:0;left:0;right:0;z-index:50;pointer-events:none;}
.topo .barra{pointer-events:auto;width:calc(var(--largura) - 64 * var(--px));margin:calc(20 * var(--px)) auto 0;
  background:var(--laranja);border:1px solid rgba(255,255,255,.2);border-radius:calc(16 * var(--px));
  display:flex;align-items:center;justify-content:space-between;padding:calc(12 * var(--px)) calc(14 * var(--px));color:var(--branco);
  box-shadow:0 0 0 rgba(20,20,20,0);
  transition:width .6s var(--ease),margin .6s var(--ease),padding .6s var(--ease),box-shadow .6s var(--ease);}
.topo.compacto .barra{width:calc(var(--largura) - 240 * var(--px));margin-top:calc(12 * var(--px));padding-top:calc(8 * var(--px));padding-bottom:calc(8 * var(--px));
  box-shadow:0 calc(12 * var(--px)) calc(32 * var(--px)) rgba(20,20,20,.16);}
.topo .lado{width:calc(140 * var(--px));display:flex;align-items:center;}
.topo .logo img{width:calc(40 * var(--px));height:auto;transition:transform .6s cubic-bezier(.3,1.6,.5,1),width .6s var(--ease);}
.topo .logo:hover img{transform:rotate(-12deg) scale(1.06);}
.topo.compacto .logo img{width:calc(34 * var(--px));}
.topo .menu{display:flex;gap:calc(44 * var(--px));position:relative;}
.topo .menu a,.topo .abre{font-weight:700;font-size:calc(12 * var(--px));line-height:1.25;letter-spacing:-.03em;}
/* texto que rola: a cópia vem por baixo numa sombra do próprio texto */
.topo .menu a,.rodape .coluna a,.rodape .sobe{display:inline-block;overflow:hidden;height:1.25em;line-height:1.25;vertical-align:top;}
.topo .menu a>span,.rodape .coluna a>span,.rodape .sobe>span{display:block;text-shadow:0 1.25em 0 currentColor;transition:transform .5s var(--ease);}
.topo .menu a:hover>span,.topo .menu a:focus-visible>span,.rodape .coluna a:hover>span,.rodape .sobe:hover>span{transform:translateY(-1.25em);}
/* traço: sem JS, a página atual ganha o sublinhado; com JS, o traço desliza */
.topo .menu a[aria-current=page]{box-shadow:inset 0 -1px 0 currentColor;}
.js .topo .menu a[aria-current=page]{box-shadow:none;}
.topo .marcador{position:absolute;left:0;bottom:calc(-7 * var(--px));height:2px;width:0;border-radius:2px;background:var(--branco);opacity:0;
  transition:left .45s var(--ease),width .45s var(--ease),opacity .3s;}
.topo .marcador.ve{opacity:1;}
.topo .lado-redes{justify-content:flex-end;gap:calc(6 * var(--px));}
.topo .redes-menu{display:none;}
.rede{display:inline-flex;align-items:center;justify-content:center;width:calc(30 * var(--px));height:calc(30 * var(--px));border-radius:50%;color:var(--branco);
  transition:background .3s var(--ease),color .3s var(--ease),transform .45s cubic-bezier(.3,1.6,.5,1);}
.rede svg{width:calc(17 * var(--px));height:calc(17 * var(--px));fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.rede svg .cheio{fill:currentColor;stroke:none;}
.rede:hover,.rede:focus-visible{background:var(--branco);color:var(--laranja);transform:translateY(-2px) rotate(-6deg);}
.topo .abre{display:none;align-items:center;gap:10px;}
.topo .abre svg{width:18px;height:16px;overflow:visible;}
.topo .abre path{stroke:currentColor;stroke-width:1.6;transition:transform .45s var(--ease),opacity .3s;transform-origin:9px 8px;}
.topo.aberto .abre .l1{transform:translateY(7px) rotate(45deg);}
.topo.aberto .abre .l2{opacity:0;}
.topo.aberto .abre .l3{transform:translateY(-7px) rotate(-45deg);}
@media (max-width:767px){
  .topo .barra,.topo.compacto .barra{width:calc(358 * var(--px));margin-top:calc(12 * var(--px));border-radius:calc(14 * var(--px));
    padding-top:calc(12 * var(--px));padding-bottom:calc(12 * var(--px));}
  .topo .logo img,.topo.compacto .logo img{width:calc(34 * var(--px));}
  .topo .menu,.topo .lado-redes{display:none;}
  .topo .marcador{display:none;}
  .topo .abre{display:flex;font-size:12px;}
  .topo.aberto .menu{display:flex;flex-direction:column;gap:18px;position:absolute;top:calc(100% + 8px);left:calc(16 * var(--px));right:calc(16 * var(--px));
    background:var(--escuro);border-radius:14px;padding:24px;pointer-events:auto;animation:menuAbre .45s var(--ease) both;}
  .topo.aberto .menu a{font-family:var(--display);font-size:40px;text-transform:uppercase;letter-spacing:-.06em;line-height:1;height:auto;overflow:visible;
    animation:menuItem .5s var(--ease) both;}
  .topo.aberto .menu a>span{text-shadow:none;}
  .topo.aberto .menu a[aria-current=page]{color:var(--laranja);box-shadow:none;}
  .topo.aberto .menu a:nth-child(2){animation-delay:.04s;} .topo.aberto .menu a:nth-child(3){animation-delay:.08s;}
  .topo.aberto .menu a:nth-child(4){animation-delay:.12s;} .topo.aberto .menu a:nth-child(5){animation-delay:.16s;}
  .topo.aberto .menu a:nth-child(6){animation-delay:.2s;} .topo.aberto .menu a:nth-child(7){animation-delay:.24s;}
  .topo.aberto .redes-menu{display:flex;gap:8px;padding-top:12px;border-top:1px solid rgba(255,255,255,.2);animation:menuItem .5s var(--ease) .26s both;}
  .topo.aberto .redes-menu .rede{width:40px;height:40px;}
  .topo.aberto .redes-menu .rede svg{width:22px;height:22px;}
}
@keyframes menuAbre{from{opacity:0;transform:translateY(-8px) scale(.98);}to{opacity:1;transform:none;}}
@keyframes menuItem{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* Rodapé (Footer/Desktop 3:55 e Footer/Mobile 3:85)
   Interações (11/10): links com o mesmo texto que rola do cabeçalho; a marca BULB HUB® sobe letra a
   letra, de trás de uma linha, quando o rodapé aparece; o logo gira de leve; "voltar ao topo". */
.rodape{background:var(--escuro);color:var(--branco);position:relative;z-index:2;overflow:hidden;}
.rodape .miolo{display:flex;flex-direction:column;gap:calc(56 * var(--px));padding:calc(72 * var(--px)) calc(48 * var(--px)) calc(32 * var(--px));}
.rodape .cima{display:flex;justify-content:space-between;align-items:flex-start;}
/* logo em loop sobre preto: "lighten" deixa o preto virar o escuro do rodapé; as bordas se desfazem */
.rodape-logo{display:block;width:calc(216 * var(--px));height:calc(162 * var(--px));margin:calc(-32 * var(--px)) 0 calc(-16 * var(--px)) calc(-40 * var(--px));} /* 25% e depois mais 10% menor (12/10) */
.rodape-logo video{width:100%;height:100%;object-fit:cover;mix-blend-mode:lighten;
  -webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent);mask-image:radial-gradient(closest-side,#000 70%,transparent);}
.rodape .colunas{display:flex;gap:calc(120 * var(--px));}
.rodape .coluna{display:flex;flex-direction:column;align-items:flex-start;gap:calc(12 * var(--px));}
.rodape .coluna .tit{font-size:calc(14 * var(--px));line-height:1.25;letter-spacing:-.03em;}
.rodape .coluna a{font-weight:700;font-size:calc(12 * var(--px));letter-spacing:-.03em;}
.rodape .coluna a:hover,.rodape .sobe:hover{color:var(--laranja);}
.rodape .coluna a>span,.rodape .sobe>span{transition:transform .5s var(--ease),color .3s;}
.rodape .marca{font-weight:700;font-size:calc(240 * var(--px));line-height:.9;letter-spacing:-.06em;white-space:nowrap;
  overflow:hidden;padding-top:.04em;margin-top:-.04em;}
/* a marca sobe de trás de uma linha, como um letreiro: as letras saem de baixo quase juntas (atraso
   pequeno, sem pulo nem cor), e o movimento acompanha a rolagem nos dois sentidos */
.rodape .marca span{display:inline-block;--k:clamp(0, (var(--e,1) * 3 - var(--i) * .045) / .75, 1);
  translate:0 calc((1 - var(--k)) * 105%);}
.rodape .fio{height:1px;background:var(--branco);}
.rodape .base{display:flex;justify-content:space-between;align-items:center;}
.rodape .direitos{display:flex;gap:calc(24 * var(--px));align-items:center;}
.rodape .base{font-size:calc(12 * var(--px));line-height:1.4;letter-spacing:-.03em;}
.rodape .sobe{font-weight:700;font-size:calc(12 * var(--px));}
@media (max-width:767px){
  .rodape .miolo{gap:calc(36 * var(--px));padding:calc(48 * var(--px)) calc(20 * var(--px)) calc(24 * var(--px));}
  .rodape .cima{flex-direction:column;gap:calc(36 * var(--px));}
  .rodape-logo{width:calc(135 * var(--px));height:calc(101 * var(--px));margin:calc(-16 * var(--px)) 0 calc(-11 * var(--px)) calc(-24 * var(--px));}
  .rodape .colunas{gap:calc(20 * var(--px));}
  .rodape .marca{font-weight:400;font-size:calc(60 * var(--px));}
  .rodape .base{flex-direction:column;align-items:flex-start;gap:calc(6 * var(--px));}
  .rodape .base>.sobe{order:3;margin-top:calc(8 * var(--px));}
}
@media (prefers-reduced-motion: reduce){
  .topo .barra,.topo .menu a>span,.rodape .coluna a>span,.rodape .marca span,.topo .marcador{transition:none;}
}

/* Utilidades de layout usadas pelas páginas */
.desk{display:revert;} .cel{display:none !important;}
@media (max-width:767px){ .desk{display:none !important;} .cel{display:revert !important;} }
.botao{display:inline-flex;align-items:center;justify-content:center;background:var(--laranja);color:var(--branco);border-radius:999px;
  padding:calc(18 * var(--px)) calc(30 * var(--px));font-weight:700;font-size:calc(14 * var(--px));letter-spacing:-.03em;text-transform:uppercase;transition:transform .3s var(--ease);}
.botao:hover{transform:translateY(-2px);}
.pilula{display:inline-block;border-radius:999px;padding:calc(6 * var(--px)) calc(12 * var(--px));font-weight:700;font-size:calc(12 * var(--px));letter-spacing:-.03em;text-transform:uppercase;}