* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); }
::-webkit-scrollbar { width: 0; height: 0; }
[data-scroll] { scrollbar-width: none; -ms-overflow-style: none; }
[data-art]::-webkit-scrollbar { width: 0; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes galIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes scrollLine { 0% { transform: translateY(-100%); } 100% { transform: translateY(400%); } }
@keyframes menuDrop { from { clip-path: inset(0 0 100% 0); transform: scale(1.025); } to { clip-path: inset(0 0 0% 0); transform: scale(1); } }
@keyframes menuClose { from { clip-path: inset(0 0 0% 0); transform: scale(1); opacity: 1; } to { clip-path: inset(0 0 100% 0); transform: scale(1.015); opacity: 0.9; } }
@keyframes menuLink { from { opacity: 0; transform: translateY(40px); filter: blur(7px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes menuFade { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
[data-sc-label] { display: none !important; }
/* o escurecimento vale só para a foto — antes ficava no [data-card] e apagava
junto a tag, o título e o subtítulo que ficam por cima */
[data-card] > [data-parallax] { filter: brightness(var(--cardb)) grayscale(var(--cardg)); transition: filter .7s cubic-bezier(.22,1,.36,1); }
[data-card]:hover > [data-parallax] { filter: brightness(1) grayscale(0); }
/* ===== HOME — PROJETOS (1 por vez): palco fixo + fundo dinâmico =====
Regra de ouro do efeito de máscara: NENHUM ancestral do título pode ter
transform / filter / perspective / will-change:transform / backdrop-filter,
senão o background-attachment:fixed deixa de se referir à viewport e o
recorte da imagem dentro das letras perde o alinhamento com o fundo. Por
isso o box é centralizado por 'top' calculado (e não por translate). */
[data-stage] { position: relative; height: 100vh; width: 100vw; overflow: hidden; }
/* cada projeto é uma camada de fundo empilhada; só a atual fica opaca.
A imagem tem duas saídas: --bgd (desktop) e --bgm (mobile) — ver media query. */
[data-bg] { position: absolute; inset: 0; background-image: var(--bgd); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transition: opacity .85s cubic-bezier(.22,1,.36,1); will-change: opacity; }
/* O CARD que se transforma na seção "Sobre": cresce em escala com --about-t
(0 = card do projeto, 1 = viewport inteira). SEM transform (preserva o
alinhamento da máscara do título) — a geometria é interpolada por calc(). */
[data-herobox] { --about-t: 0; position: absolute; z-index: 6; background: #e3e7eb; overflow: hidden; cursor: pointer;
left: calc(5.05vw * (1 - var(--about-t)));
top: calc(4.75vh * (1 - var(--about-t)));
width: calc(40.5vw + 59.5vw * var(--about-t));
height: calc(90.5vh + 9.5vh * var(--about-t));
border-radius: calc(6px * (1 - var(--about-t)));
box-shadow: 0 50px 100px -60px rgba(0,0,0,calc(0.6 * (1 - var(--about-t)))); }
/* conteúdo do box: cada slide ocupa o box inteiro e faz crossfade */
[data-heroslide] { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(40px,4.3vw,82px); opacity: 0; pointer-events: none; transition: opacity .7s cubic-bezier(.22,1,.36,1); }
[data-heroeyebrow] { font: 500 clamp(11px,0.64vw,12.2px)/1.2 'halyard-display','Halyard Display','Helvetica Neue',Helvetica,Arial,sans-serif; color: #000; }
[data-herotitle] { display: inline-block; margin-top: clamp(14px,1.45vw,24px); font: 700 clamp(44px,4.8vw,92px)/1.0 'halyard-display','Halyard Display','Helvetica Neue',Helvetica,Arial,sans-serif; letter-spacing: -0.03em; color: #000; }
/* MÁSCARA: preenchimento transparente revelando a imagem de fundo através das
letras. Fica dentro de @supports para que navegadores sem background-clip:text
mantenham o título legível (preto) em vez de sumir. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
[data-herotitle] { background-image: var(--maskd); background-size: cover; background-position: center; background-attachment: fixed; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
}
[data-herodesc] { margin: 0; max-width: 52%; font: 400 clamp(14px,1vw,19px)/1.51 'halyard-display','Halyard Display','Helvetica Neue',Helvetica,Arial,sans-serif; color: #000; }
[data-heroarrow] { position: absolute; right: clamp(30px,3vw,58px); bottom: clamp(30px,3vw,58px); width: clamp(58px,6.6vw,128px); color: #000; pointer-events: none; transition: transform .5s cubic-bezier(.22,1,.36,1); }
[data-heroarrow] svg { display: block; width: 100%; height: auto; }
[data-herobox]:hover [data-heroarrow] { transform: translate(6px,6px); }
/* ── CAMADAS DO CARD: conteúdo do PROJETO some, conteúdo do SOBRE surge ──
Só opacidade (nada de filter/transform aqui — quebraria a máscara do título
durante o fade). clamp+calc leem --about-t herdado do card. */
[data-hero-project] { position: absolute; inset: 0; opacity: clamp(0, calc(1 - var(--about-t) * 2.4), 1); }
[data-hero-about] { position: absolute; inset: 0; opacity: clamp(0, calc((var(--about-t) - 0.5) * 2.2), 1); pointer-events: none; }
/* ── SOBRE MIM (Figma 4:2): fundo = o próprio card claro; foto à direita,
coluna de texto à esquerda, botão preto, seta. Posições em vw/vh porque, no
fim da animação, o card É a viewport. ── */
/* Alinhamento (Figma): foto, seta e botão compartilham a MESMA linha de baixo. */
[data-about-photo] { position: absolute; right: 11.3vw; top: 11.6vh; bottom: 11.6vh; width: 34.2vw; background-size: cover; background-position: center 30%; background-repeat: no-repeat; border-radius: 5px; }
/* coluna de texto ocupa do topo até a linha de baixo; texto no topo, botão embaixo */
[data-about-copy] { position: absolute; left: 9.6vw; top: 12.8vh; bottom: 11.6vh; width: clamp(280px, 31vw, 600px); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
[data-about-eyebrow] { font: 500 clamp(11px,0.64vw,12.2px)/1.2 'halyard-display','Halyard Display','Helvetica Neue',Helvetica,Arial,sans-serif; color: #000; }
[data-about-title] { margin: clamp(8px,0.9vw,14px) 0 0; font: 500 clamp(46px,4.8vw,92px)/1.07 'halyard-display','Halyard Display','Helvetica Neue',Helvetica,Arial,sans-serif; letter-spacing: -0.02em; color: #000; }
[data-about-bio] { margin: clamp(24px,3.2vh,44px) 0 0; max-width: 22vw; font: 300 clamp(14px,1vw,19px)/1.51 'halyard-display','Halyard Display','Helvetica Neue',Helvetica,Arial,sans-serif; color: #000; }
[data-about-bio] + [data-about-bio] { margin-top: clamp(12px,1.4vh,20px); }
[data-about-cta] { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: clamp(14px,1.5vh,19px) clamp(36px,4.6vw,88px); background: #000; color: #fff; border-radius: 8px; font: 400 clamp(14px,1vw,19px)/1 'halyard-display','Halyard Display','Helvetica Neue',Helvetica,Arial,sans-serif; text-decoration: none; transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; }
[data-about-cta]:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0,0,0,0.28); }
[data-about-arrow] { position: absolute; left: 44vw; bottom: 11.6vh; width: clamp(58px,7.3vw,141px); color: #000; pointer-events: none; }
[data-about-arrow] svg { display: block; width: 100%; height: auto; }
/* CHROME (Figma): em TODAS as telas o hamburger fica no canto superior direito,
a assinatura some e aparecem as redes. Home = redes no canto inferior direito;
projeto e contato = redes no topo-esquerdo, com uma seta de "voltar". */
[data-hamburger] { left: auto; right: 30px; }
[data-nametag] { display: none !important; }
/* redes sociais: coluna no canto inferior direito (home). Cor via --sv (r,g,b):
na home o JS anima branco→preto conforme o "Sobre" abre; nas demais o CSS força preto. */
[data-homesocial] { position: fixed; right: 30px; bottom: 40px; z-index: 40; display: flex; flex-direction: column; gap: 12px; }
[data-homesocial] a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(var(--sv,255,255,255),0.32); display: flex; align-items: center; justify-content: center; color: rgba(var(--sv,255,255,255),0.82); text-decoration: none; cursor: pointer; transition: border-color .35s ease, color .35s ease, transform .35s cubic-bezier(.22,1,.36,1); }
[data-homesocial] a:hover { border-color: rgba(var(--sv,255,255,255),1); color: rgba(var(--sv,255,255,255),1); transform: translateY(-3px); }
/* projeto + contato: redes pretas (fundo claro) */
[data-homesocial]:not([data-view="gallery"]) { --sv: 0,0,0 !important; }
/* ao rolar (case/contato) a barra de topo fica preta — redes viram brancas
(senão preto-no-preto some, que era o "não aparecem no scroll") */
[data-homesocial]:not([data-view="gallery"])[data-scrolled="true"] { --sv: 255,255,255 !important; }
/* a seta de "voltar" só existe fora da home (na home você já está na home) */
[data-homesocial][data-view="gallery"] [data-homeback] { display: none; }
/* a seta fica SEM círculo — só o ícone (à esquerda das redes) */
[data-homeback] { border: none !important; width: auto !important; border-radius: 0 !important; }
/* Capa do case: largura cheia (100%). No mobile fica 16/9 (estava bom); no
desktop a altura é fixada pela ALTURA da viewport (58vh) — não pela largura,
senão em telas largas o 16/9 volta a ficar altíssimo. */
/* thumbnails da galeria em proporção natural (não força quadrado): alinha ao
topo para os itens não esticarem à altura da linha */
[data-case-gallery] { align-items: start; }
[data-case-cover] { aspect-ratio: 16 / 9; }
@media (min-width: 821px) {
[data-case-cover] { aspect-ratio: auto; height: 58vh; }
/* projeto e contato (desktop): redes no topo-esquerdo, em linha, formando uma
barra de topo com o hamburger à direita (na home seguem no canto inferior direito) */
[data-homesocial]:not([data-view="gallery"]) { left: 30px; top: 30px; right: auto; bottom: auto; flex-direction: row; }
}
[data-contactgrid] { align-items: center; }
[data-c-form] { --fg: #111111; --fgrgb: 17,17,17; position: relative; background: #ffffff; border: 1px solid rgba(0,0,0,0.05); border-radius: 22px; padding: 44px 40px; box-shadow: 0 24px 60px -34px rgba(0,0,0,0.3), 0 4px 14px -8px rgba(0,0,0,0.08); }
[data-c-formhead] { display: none !important; }
/* headline carrega a seção sozinha — sem eyebrow; o "?" herda a cor do título
(o span traz color:#db285e inline, daí o inherit forçado) */
[data-c-eyebrow] { display: none !important; }
[data-c-head] span { color: inherit !important; }
/* no desktop a assinatura fica em caixa alta; o mobile usa o texto como está */
[data-nametag-name] { text-transform: uppercase; }
/* A barra do topo vale para todas as larguras: transparente por padrão,
preenchida de preto quando a página rola. Quando ela preenche, o chrome
inteiro precisa virar branco — senão some contra o preto. */
[data-nametag-name], [data-nametag-role] { transition: color .35s ease; }
[data-hamburger] span { transition: background-color .35s ease, transform .45s cubic-bezier(.65,0,.35,1); }
[data-nametag][data-scrolled="true"] [data-nametag-name] { color: #ffffff !important; }
[data-nametag][data-scrolled="true"] [data-nametag-role] { color: rgba(255,255,255,0.5) !important; }
[data-hamburger][data-scrolled="true"] span { background: rgba(255,255,255,0.95) !important; }
/* menu aberto vence tudo: fundo claro, X preto */
[data-hamburger][data-menu="open"] span { background: #0a0a0a !important; }
/* MENU FULLSCREEN — itens como linhas editoriais: índice, rótulo e seta,
separados por filetes. Cores de fundo do menu ficam como estão. */
[data-menunav] { display: flex; flex-direction: column; border-top: 1px solid rgba(var(--fgrgb),0.16); }
[data-menuitem] { position: relative; display: flex; align-items: center; gap: clamp(18px,2.4vw,40px); padding: clamp(12px,1.7vh,24px) 0; text-decoration: none; color: var(--fg); border-bottom: 1px solid rgba(var(--fgrgb),0.16); transition: color .4s ease, padding-left .5s cubic-bezier(.22,1,.36,1); }
/* bullet desenhado em CSS: tamanho e centro verticais previsíveis,
ao contrário do glifo • que varia de baseline conforme a fonte */
[data-menuindex] { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: rgba(var(--fgrgb),0.32); transition: background-color .4s ease, transform .45s cubic-bezier(.22,1,.36,1); }
[data-menulabel] { font: 500 clamp(40px,7.2vw,96px)/1.04 'halyard-display','Halyard Display','Helvetica Neue',Helvetica,Arial,sans-serif; letter-spacing: -0.04em; }
[data-menuarrow] { margin-left: auto; display: flex; opacity: 0; transform: translateX(-18px); transition: opacity .4s ease, transform .5s cubic-bezier(.22,1,.36,1); }
[data-menuitem]:hover { color: #db285e; padding-left: clamp(10px,1.4vw,22px); }
[data-menuitem]:hover [data-menuindex] { background: #db285e; transform: scale(1.45); }
[data-menuitem]:hover [data-menuarrow] { opacity: 1; transform: translateX(0); }
[data-menucontact] { text-align: right; }
[data-menucontactlabel] { font: 600 10px/1 'halyard-display','Halyard Display','Helvetica Neue',Helvetica,Arial,sans-serif; letter-spacing: .18em; text-transform: uppercase; color: rgba(var(--fgrgb),0.42); margin-bottom: 10px; }
[data-menumail] { font: 400 15px/1 'halyard-display','Halyard Display','Helvetica Neue',Helvetica,Arial,sans-serif; color: rgba(var(--fgrgb),0.72); text-decoration: none; border-bottom: 1px solid rgba(var(--fgrgb),0.28); padding-bottom: 4px; transition: color .3s ease, border-color .3s ease; }
[data-menumail]:hover { color: #db285e; border-color: #db285e; }
[data-formgrid] { gap: 22px 20px !important; }
[data-c-form] label > div { color: rgba(0,0,0,0.5) !important; margin-bottom: 9px !important; letter-spacing: 0 !important; }
[data-c-form] input, [data-c-form] textarea { border: 1px solid rgba(0,0,0,0.14) !important; border-radius: 10px !important; background: #fff !important; padding: 12px 14px !important; font-size: 14px !important; color: #111 !important; transition: border-color .22s ease, box-shadow .22s ease !important; }
[data-c-form] input::placeholder, [data-c-form] textarea::placeholder { color: rgba(0,0,0,0.32); }
[data-c-form] input:focus, [data-c-form] textarea:focus { border-color: #db285e !important; box-shadow: 0 0 0 3px rgba(219,40,94,0.12) !important; }
[data-c-submit] { width: 100% !important; justify-content: center !important; padding: 15px !important; border-radius: 12px !important; margin-top: 26px !important; background: #0a0a0a !important; border-color: #0a0a0a !important; color: #fff !important; }
@media (max-width: 820px) {
/* CHROME MOBILE — barra mais baixa, nome grande à direita em uma linha e
hamburger compacto à esquerda. As cores vêm das regras globais. */
[data-mobilebar] { height: 78px !important; }
[data-nametag] { left: auto !important; right: 22px !important; top: 26px !important; text-align: right !important; }
[data-nametag-name] { white-space: nowrap !important; font-size: 26px !important; line-height: 1 !important; letter-spacing: -0.02em !important; text-transform: none !important; }
[data-nametag-role] { display: none !important; }
/* hamburger sempre à direita (todas as telas); redes à esquerda */
[data-hamburger] { left: auto !important; right: 22px !important; top: 19px !important; gap: 9px !important; }
[data-hamburger] span { width: 34px !important; }
/* o translate do X é calculado para o passo do desktop (2px + gap 13px = 15px);
aqui o gap é 9px, então o passo é 11px — sem isso os traços não se cruzam no centro */
[data-hamburger][data-menu="open"] span:nth-child(1) { transform: translateY(11px) rotate(45deg) !important; }
[data-hamburger][data-menu="open"] span:nth-child(3) { transform: translateY(-11px) rotate(-45deg) !important; }
/* menu fullscreen no mobile: rodapé empilhado e seta menor */
[data-menuwrap] { padding: 0 24px !important; }
[data-menuitem] { gap: 16px !important; padding: 16px 0 !important; }
[data-menuarrow] svg { width: 22px !important; height: 22px !important; }
[data-menufoot] { flex-direction: column !important; align-items: flex-start !important; gap: 28px !important; }
[data-menucontact] { text-align: left !important; }
/* conteúdo começa abaixo da barra de 78px */
[data-casehead] { padding-top: 106px !important; }
/* galeria do case empilha no mobile (agora é de tamanho variável) */
[data-case-gallery] { grid-template-columns: 1fr !important; }
[data-card] { flex-basis: 100vw !important; }
/* 100vh no mobile conta a área atrás da barra do navegador, então o rodapé
do card ficava escondido. dvh usa a altura realmente visível. */
@supports (height: 100dvh) {
[data-scroll], [data-card], [data-about], [data-stage] { height: 100dvh !important; }
[data-herobox] { height: calc(45.6dvh + 54.4dvh * var(--about-t)) !important; bottom: calc(7.6dvh * (1 - var(--about-t))) !important; }
}
/* mais respiro entre o texto do card e a borda de baixo */
[data-cardtext] { bottom: 60px !important; }
/* O swipe é tratado por JS. Sem isto o navegador "rouba" o gesto no meio do
movimento e o scroll de volta não responde — precisa valer também no painel
"Sobre", que cobre a tela inteira quando revelado. */
[data-scroll], [data-about], [data-stage] { touch-action: none !important; }
/* ── HOME projetos no mobile: o box desce para a parte de baixo (Figma) e a
navegação passa a ser vertical (o gesto é tratado no JS). Mesma lógica
visual do desktop — box fixo, fundo e textos dinâmicos, título vazado. */
/* no mobile o fundo (e a máscara do título) usam a imagem "Mobile" do projeto */
[data-bg] { background-image: var(--bgm) !important; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
[data-herotitle] { background-image: var(--maskm) !important; }
}
[data-herobox] { right: auto !important; top: auto !important;
left: calc(7.4vw * (1 - var(--about-t))) !important;
bottom: calc(7.6vh * (1 - var(--about-t)));
width: calc(85.6vw + 14.4vw * var(--about-t)) !important;
height: calc(45.6vh + 54.4vh * var(--about-t));
box-shadow: 0 30px 70px -40px rgba(0,0,0,calc(0.6 * (1 - var(--about-t)))) !important; }
[data-heroslide] { padding: clamp(26px,8vw,38px) clamp(26px,8.6vw,40px) !important; }
[data-heroeyebrow] { font-size: 11.5px !important; }
[data-herotitle] { font-size: clamp(34px,11vw,46px) !important; margin-top: clamp(10px,3vw,16px) !important; }
[data-herodesc] { max-width: 76% !important; font-size: clamp(13px,3.6vw,14.5px) !important; line-height: 1.55 !important; }
[data-heroarrow] { width: clamp(46px,14vw,64px) !important; right: clamp(18px,5vw,26px) !important; bottom: clamp(18px,5vw,26px) !important; }
/* SOBRE MIM no mobile (Figma 4:56): foto no topo, texto abaixo, sem botão.
Reseta o 'bottom' do desktop (aqui não seguem a linha de baixo). */
[data-about-photo] { left: 15.4vw; right: auto; top: 11.2vh; bottom: auto; width: 71vw; height: 29.2vh; background-position: center 24%; }
[data-about-copy] { left: 15.4vw; top: 43vh; bottom: auto; width: 70vw; justify-content: flex-start; }
[data-about-title] { font-size: clamp(34px,11vw,46px); margin-top: clamp(8px,2.5vw,14px); }
[data-about-bio] { max-width: 62vw; margin-top: clamp(18px,4vh,30px); font-size: clamp(12.5px,3.4vw,14px); }
[data-about-bio] + [data-about-bio] { margin-top: clamp(10px,2.4vh,16px); }
[data-about-cta] { display: none; }
[data-about-arrow] { left: auto; right: 8vw; top: auto; bottom: 9vh; width: clamp(46px,16vw,68px); }
/* redes sociais da home no mobile: linha no topo esquerdo (Figma) */
[data-homesocial] { right: auto !important; left: 22px; top: 24px; bottom: auto; flex-direction: row; gap: 10px; }
[data-homesocial] a { width: 34px; height: 34px; }
[data-homesocial] a svg { width: 15px; height: 15px; }
/* No desktop a roda desce para avançar; no celular o dedo sobe. A linha do
indicador roda ao contrário para combinar com o gesto real. */
[data-scrollline] { animation-direction: reverse !important; }
/* e a ordem inverte junto: primeiro o traço, depois a palavra "Scroll" */
/* o indicador sobe para a área da imagem (acima do box branco), como no Figma */
[data-scrollhint] { flex-direction: column-reverse !important; right: 34px !important; top: 29% !important; }
/* MENU FULLSCREEN — mesmo movimento de cima para baixo, porém leve.
No desktop o painel é revelado com clip-path animado e os itens com
filter: blur(); as duas coisas exigem rasterizar de novo a cada frame e
engasgam em GPU de celular. Aqui o painel DESLIZA de cima (translateY),
que roda no compositor — o movimento é o mesmo, sem o custo. */
@keyframes menuDrop { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes menuClose { from { transform: translateY(0); } to { transform: translateY(-100%); } }
@keyframes menuLink { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
/* sem hover no touch, a foto ficaria escura o tempo todo — clareia a base */
[data-card] > [data-parallax] { filter: brightness(0.78) grayscale(0.12) !important; }
[data-cardcat] { font-size: 12px !important; margin-bottom: 12px !important; }
[data-cardtitle] { font-size: 34px !important; }
[data-cardsub] { font-size: 16px !important; line-height: 1.5 !important; max-width: 100% !important; }
/* padding-top empurra a janela para baixo da barra de 78px — antes ela
centralizava na viewport inteira e a borda encostava no chrome */
[data-about] { align-items: center !important; justify-content: center !important; padding: 78px 0 0 !important; background: url(../img/eu_mobile.jpg) 50% 0% / cover no-repeat,#0a0a0a !important; }
[data-aboutwindow] { width: 83.6vw !important; height: 84.6vh !important; aspect-ratio: auto !important; border-radius: 9px !important; }
[data-aboutcard] { top: auto !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 48.9% !important; justify-content: flex-start !important; padding: 9.5% 17.2% 6.5% 17.2% !important; border-radius: 9px !important; }
[data-name] { font-size: clamp(22px,7.14vw,30px) !important; letter-spacing: -0.02em !important; }
[data-subtitle] { font-size: clamp(9px,2.56vw,11px) !important; margin-top: 2% !important; }
[data-bio-text], [data-p2-truncated] { font-size: clamp(10px,2.91vw,12.5px) !important; }
[data-bio-text] { margin-top: 5% !important; }
[data-p2-truncated] { margin-top: 4% !important; }
[data-vermais] { display: none !important; }
[data-p2-full] { display: none !important; }
[data-p2-truncated] { display: block !important; }
[data-contactrow] { flex-wrap: nowrap !important; gap: 8px !important; margin-top: 5% !important; }
[data-contactrow] > div { gap: 5px !important; flex-wrap: nowrap !important; }
[data-contactbtn] { padding: 11px 13px !important; font-size: 11px !important; gap: 6px !important; white-space: nowrap; flex-shrink: 0; }
[data-contactbtn] svg { width: 12px !important; height: 12px !important; flex-shrink: 0; }
[data-contactrow] a[aria-label] { width: 23px !important; height: 23px !important; flex-shrink: 0; }
[data-contactrow] a[aria-label] svg { width: 11px !important; height: 11px !important; }
/* mobile radial glow: pull it to the top-right so it frames the headline instead of bleeding off-canvas */
[data-contactroot] { background: radial-gradient(ellipse 90% 42% at 78% 12%,rgba(219,40,94,0.42),transparent 62%),#e3e7eb !important; }
[data-c-topbar] { display: block !important; }
[data-contactwrap] { padding: 106px 20px calc(56px + env(safe-area-inset-bottom)) !important; align-items: flex-start !important; }
/* the grid becomes a column here, so the desktop `align-items:center` would
shrink-wrap every child instead of centering columns — must be stretch */
[data-contactgrid] { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; }
[data-contactgrid] > div:first-child { display: contents !important; }
/* eyebrow e "?" seguem as regras globais: oculto e preto em toda largura */
[data-c-head] { font-size: clamp(40px,11.5vw,58px) !important; line-height: 1.0 !important; order: 1 !important; letter-spacing: -0.04em !important; text-align: center !important; }
[data-c-lead] { order: 2 !important; margin-top: 18px !important; max-width: none !important; font-size: 15px !important; line-height: 1.6 !important; text-align: center !important; }
/* botão com largura de conteúdo e centralizado, em vez de esticar na coluna */
[data-c-actions] { order: 3 !important; margin-top: 26px !important; gap: 14px !important; flex-direction: column !important; align-items: center !important; }
[data-c-pill] { justify-content: center !important; padding: 16px 32px !important; width: auto !important; }
[data-c-actions] a[href^="mailto:"] { align-self: center !important; padding: 6px 0 8px !important; }
[data-c-form] { order: 4 !important; margin-top: 38px !important; padding: 24px 18px !important; border-radius: 18px !important; box-shadow: 0 24px 50px -28px rgba(0,0,0,0.55) !important; }
/* redes sociais e localização lado a lado, o par centralizado na coluna:
as duas colunas têm largura de conteúdo (nada de flex:1, que esticava a
segunda e jogava o texto para a esquerda com sobra à direita) */
[data-c-info] { order: 5 !important; margin-top: 40px !important; gap: 20px !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start !important; justify-content: center !important; text-align: center !important; }
[data-c-info] > div { flex: 0 0 auto !important; }
/* em telas bem estreitas o texto encolhe e quebra, em vez de furar a margem */
[data-c-info] > div:last-child { flex: 0 1 auto !important; min-width: 0 !important; }
[data-c-info] a[aria-label] { width: 44px !important; height: 44px !important; }
[data-c-info] > div:first-child > div { gap: 10px !important; flex-wrap: nowrap !important; justify-content: center !important; }
[data-formgrid] { grid-template-columns: 1fr !important; gap: 18px !important; }
[data-c-form] input, [data-c-form] textarea { font-size: 16px !important; }
[data-c-form] textarea { min-height: 104px !important; }
[data-c-submit] { margin-top: 22px !important; padding: 16px !important; }
/* 13vw deixava títulos longos gigantes e colados na margem do case */
[data-h1] { font-size: 10vw !important; line-height: 1.02 !important; }
[data-case-gallery] { gap: 14px !important; }
}