/* Ajustes específicos do site institucional sobre a base compartilhada (../_shared/base.css) */ /* Largura de conteúdo do institucional — mais generosa que o padrão de 1180px da base compartilhada, pra aproveitar melhor telas grandes (tela cheia). .wrap e os "inner" de header/footer usam a mesma medida, assim tudo — logo, nav, títulos de seção, footer — fica alinhado na mesma borda. */ :root{--container-max:1320px;--container-pad:clamp(16px, 4.5vw, 28px);--edge-pad:max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));} .wrap{max-width:var(--container-max);padding:0 var(--container-pad);} .site-header-inner,.site-footer-inner{max-width:var(--container-max);} /* Rodapé institucional ganha uma 4ª coluna ("Serviços", com os 7 links de 3D/IT) que os outros sites da rede não têm — por isso o grid muda aqui, não em base.css (que fica idêntico em todos os sites). Só no desktop: abaixo de 880px o base.css já derruba pra 1 coluna, e essa regra teria a mesma especificidade — teria que vir DEPOIS pra não quebrar o empilhamento mobile, então preferimos travar num media query próprio em vez de disputar ordem de cascata. */ @media (min-width:881px){ .site-footer-inner{grid-template-columns:1.1fr 0.9fr 1fr 0.9fr;} } /* A faixa de status (topo, com o nome do site e os ícones sociais) é uma barra de fundo edge-to-edge — isso é intencional, ela deve pintar até a borda da janela. O problema era o CONTEÚDO dela: base.css usa um padding fixo de 28px, então o texto/ícones ficavam bem mais pra fora do que o menu principal logo abaixo (que já segue a régua de --container-max). Aqui só o padding lateral muda pra acompanhar essa régua — o fundo continua indo de ponta a ponta normalmente. */ .status-ribbon{padding-left:var(--edge-pad);padding-right:var(--edge-pad);} /* Evita que o header fixo cubra o topo das seções ao navegar por âncora (#mais-vendidos, #catalogo, #sustentabilidade). */ html{scroll-padding-top:78px;} /* Hero em vídeo — mesmo esquema de banner da Vincere (vincere.lafym.studio), adaptado à paleta do institucional. Troque assets/video/hero.mp4 pelo vídeo definitivo. Altura e tipografia usam clamp() (escala contínua entre um mínimo e um máximo, com base na largura da viewport) em vez de um salto único de breakpoint em 880px — isso evita tanto "vídeo gigante" em celulares grandes quanto um corte abrupto exatamente em 880px. IMPORTANTE: usamos min-height (não height fixo) + o próprio .hero.hero-video como flex container centralizando o conteúdo. Com height fixo + overflow:hidden, num celular estreito o conteúdo (eyebrow + título + texto + 2 botões) podia precisar de mais altura do que o clamp reservava, e a sobra ficava cortada em cima e embaixo (o eyebrow sumia, o botão "nosso_compromisso" aparecia partido). Com min-height, a seção nunca fica menor que o clamp, mas cresce se o conteúdo precisar — nunca corta nada. */ .hero.hero-video{position:relative;overflow:hidden;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;min-height:clamp(320px, 52vw, 520px);} .hero-video-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;} .hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg, rgba(46,32,24,.55) 0%, rgba(46,32,24,.78) 100%);z-index:1;} .hero-video .hero-inner{position:relative;z-index:2;width:100%;max-width:720px;margin:0 auto;padding:clamp(24px, 6vw, 36px) clamp(20px, 5vw, 28px);text-align:center;display:flex;flex-direction:column;align-items:center;} .hero-video .eyebrow.on-dark{color:var(--blue-light);} .hero-video h1{color:#fff;font-size:clamp(23px, 4.4vw + 8px, 42px);line-height:1.16;margin:0 0 clamp(10px, 2vw, 18px);max-width:640px;} .hero-video h1 .accent{color:var(--blue-light);} .hero-video .sub{color:#E7DFD3;font-size:clamp(13px, 1.6vw + 9px, 16px);max-width:560px;margin:0 0 clamp(16px, 3vw, 30px);} .hero-video .hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;} .btn-outline-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,0.45);} .btn-outline-dark:hover{background:rgba(255,255,255,0.08);border-color:#fff;} /* Hero compacto — mesmo componente do banner da Home (vídeo + scrim + texto centralizado), só que com ~metade da altura. Usado no topo das páginas internas (FAQ, Contato) pra dar a mesma identidade visual da Home nelas — sem isso, essas páginas tinham pouco conteúdo cobrindo a área do topo e a grade sutil de fundo do body (--grid-line) ficava grande e visível ("quadriculado"). Com o hero cobrindo essa área com fundo opaco, o efeito some, igual já acontecia na Home. */ .hero-video.hero-video--compact{min-height:clamp(180px, 22vw, 260px);} .hero-video--compact .hero-inner{padding-top:clamp(16px, 3vw, 22px);padding-bottom:clamp(16px, 3vw, 22px);} .hero-video--compact .eyebrow{margin-bottom:10px;} .hero-video--compact h1{font-size:clamp(21px, 2.2vw + 12px, 30px);margin:0 0 clamp(6px, 1.2vw, 10px);} .hero-video--compact .sub{margin:0 0 clamp(10px, 2vw, 16px);} /* Vitrines em thumb — usado no "Top 10 mais vendidos" e em "Nossas coleções", pra manter a mesma linguagem visual nas duas seções: cartão com cor/foto sólida que dá lugar a um trecho de vídeo no hover, dentro de uma esteira com rolagem horizontal e setas prev/next. Troque cores/fotos/vídeos pelos definitivos assim que tiver os assets reais de cada item. */ .thumb-showcase{background:var(--ink);padding:clamp(40px, 8vw, 70px) 0 clamp(32px, 6vw, 60px);overflow:hidden;} .thumb-showcase + .thumb-showcase{padding-top:10px;} .thumb-showcase-head h2{color:#fff;font-size:clamp(22px, 4vw + 10px, 30px);margin:0 0 6px;} .thumb-showcase-head h2 .thin{font-weight:400;color:#C9BCA8;} .thumb-showcase-head p{margin:0;font-size:14px;color:#A8917E;} /* O texto de apoio muda conforme o dispositivo: "passe o mouse" não faz sentido em quem só tem toque (não existe preview em vídeo no celular, ver app.js/setupThumbHoverVideo). Por padrão mostra a versão de toque; a media query troca pra versão de mouse só quando hover real existe. */ .mouse-copy{display:none;} .touch-copy{display:inline;} @media (hover:hover) and (pointer:fine){ .mouse-copy{display:inline;} .touch-copy{display:none;} } /* A esteira antes era full-bleed (ia até a borda real da janela, com cards "vazando" pra fora da coluna central que alinha o resto do site). Agora o wrapper fica contido na mesma largura de --container-max, centralizado e com overflow:hidden — nenhum card aparece além dessa borda, nem em repouso nem no meio da rolagem. O fundo escuro da seção continua full-bleed (isso é só cor, não conteúdo), só os cards ficam contidos. */ .thumb-scroll-wrap{position:relative;margin:clamp(22px, 4vw, 36px) auto 0;max-width:var(--container-max);overflow:hidden;} .thumb-track{display:flex;align-items:center;gap:clamp(10px, 2.5vw, 22px);overflow-x:auto;scroll-behavior:smooth;padding:clamp(16px, 4vw, 24px) var(--container-pad);scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-padding-left:var(--container-pad);} /* Esmaecimento nas pontas — sinaliza visualmente que sempre pode ter mais um card pra rolar ali (agora que a rolagem é só por arrasto/toque, sem setas). Sobre o fundo escuro vazio ele é invisível, só aparece por cima dos cards. Também escala com clamp(): em 70px fixo, num card de celular de ~120px de largura o esmaecimento cobria mais da metade do card (ficava com cara de "cortado"/apagado). Agora acompanha a largura da tela. */ .thumb-scroll-wrap::before,.thumb-scroll-wrap::after{content:"";position:absolute;top:0;bottom:0;width:clamp(26px, 8vw, 70px);z-index:4;pointer-events:none;} .thumb-scroll-wrap::before{left:0;background:linear-gradient(to right, var(--ink) 10%, rgba(46,32,24,0) 100%);} .thumb-scroll-wrap::after{right:0;background:linear-gradient(to left, var(--ink) 10%, rgba(46,32,24,0) 100%);} .thumb-track::-webkit-scrollbar{display:none;} /* Cursor de "mão" sinaliza que dá pra clicar e arrastar (ver app.js) — no touch isso não aparece, a rolagem por toque já é nativa. */ .thumb-track{cursor:grab;} .thumb-track.is-dragging{cursor:grabbing;} .thumb-track.is-dragging .thumb-item{pointer-events:none;} /* Em telas de toque, o carrossel se comporta como uma prateleira de app de streaming: o dedo solta e o card mais próximo "encaixa" (scroll-snap), em vez de parar num ponto qualquer no meio de dois cards. Só ativa em pointer:coarse pra não interferir no arrasto de mouse do desktop, que já foi testado e funciona sem snap. */ @media (pointer:coarse){ .thumb-track{scroll-snap-type:x mandatory;} .thumb-item{scroll-snap-align:start;} } /* .thumb-rank era um irmão flex antes do card (com margem negativa pra "espiar" por trás dele) — isso empurrava a caixa do .thumb-item pra direita em ~22px, então a fileira do Top 10 nunca alinhava com o título ou com a fileira "Nossas coleções" (que não tem numeração) por baixo. Agora o número é um selo posicionado por cima/atrás do card (não ocupa espaço no layout), então a borda esquerda do .thumb-item é a borda do card em ambas as vitrines — mesma referência de alinhamento nas duas. */ .thumb-item{flex:0 0 auto;position:relative;text-decoration:none;} /* Selo do número (Top 10) — escala com clamp() em vez de pular de 68px pra 48px exatamente em 880px; assim celulares grandes (ex: 820px) não ficam nem "gigante demais" nem "cortado de repente". */ .thumb-rank{position:absolute;left:clamp(-20px, calc(-1.5vw - 8px), -14px);top:50%;transform:translateY(-50%);font-family:var(--display);font-weight:700;font-size:clamp(42px, 10vw, 68px);line-height:1;color:var(--blue);opacity:.9;user-select:none;pointer-events:none;z-index:1;} /* Card — largura fluida (clamp) + aspect-ratio fixo (mantém a proporção 150:195 sem precisar recalcular a altura em cada breakpoint). Piso subiu de 104px pra 124px: card pequeno demais não parece catálogo de streaming, parece lista de ícone — 124px com o gap mais justo (acima) deixa ~2,5 cards visíveis por vez no celular, que é a proporção usada por apps tipo Netflix/Spotify nas prateleiras horizontais. */ .thumb-card{position:relative;z-index:2;width:clamp(124px, 32vw, 150px);aspect-ratio:150/195;border-radius:8px;overflow:hidden;background:#0d0d0d;box-shadow:0 18px 34px rgba(0,0,0,.45);flex:0 0 auto;} .thumb-card-color{position:absolute;inset:0;transition:opacity .35s ease;} .thumb-card-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .35s ease;} .thumb-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease;} /* O preview em vídeo só existe em dispositivos com mouse de verdade (hover:hover + pointer:fine) — em telas de toque não há JS ligando o vídeo (ver app.js), então sem essa media query um "hover fantasma" de toque deixaria o card com opacity:1 num