/* ========================================================================== CHAVEIRO DM CHAVES E CARIMBOS - $10,000 LUXURY DIGITAL EXPERIENCE STYLES ========================================================================== */ /* Design Tokens & Theme Variables */ :root { /* Obsidian & Gold Champagne Palette */ --bg-obsidian: #070709; --bg-night: #0e0e14; --bg-glass: rgba(18, 18, 26, 0.72); --bg-glass-card: rgba(22, 22, 32, 0.65); --gold-champagne: #F59E0B; --gold-light: #FFE57F; --gold-amber: #D97706; --gold-glow: rgba(245, 158, 11, 0.25); --gold-border: rgba(245, 158, 11, 0.16); --text-bright: #F9FAFB; --text-body: #9CA3AF; /* era #6B7280 = 4,16:1 no obsidiano, abaixo do mínimo AA (4,5) para o texto pequeno em que ele é usado: labels de formulário, rodapé e métricas. */ --text-muted: #8B93A1; /* Duas famílias por cor: a "viva" para ícones/texto sobre fundo escuro (onde ela tem contraste de sobra) e a "deep" para superfícies com texto branco em cima, onde a original reprovava em WCAG AA. */ --waze-blue: #00bcd4; --waze-deep: #067a91; /* branco em cima: 5,00:1 */ --wa-green: #25d366; --wa-deep: #0f7d6f; /* branco em cima: 5,02:1 */ --danger-red: #ef4444; --danger-deep: #c81e1e; /* branco em cima: 5,74:1 */ /* Typography A display era a Syne, um tipo geométrico muito largo — os números ("60min", "4.8") e a marca saíam com aparência esticada na horizontal. Passou a usar a mesma família do corpo no peso 800: some o efeito esticado, o conjunto fica coerente e ainda economiza o download de uma família inteira. */ --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-stamp: 'Special Elite', cursive, monospace; /* Radii & Shadows */ --radius-pill: 100px; --radius-lg: 24px; --radius-md: 16px; --radius-sm: 10px; --shadow-obsidian: 0 25px 60px -15px rgba(0, 0, 0, 0.8); --shadow-gold: 0 15px 40px -10px rgba(245, 158, 11, 0.3); } /* Reset & Smooth Typography Core */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; /* O fundo vive no para que os orbs (z-index:-1) fiquem visíveis acima dele e abaixo do conteúdo do . */ background-color: var(--bg-obsidian); } body { /* transparente de propósito: deixa os .ambient-glow aparecerem */ background-color: transparent; color: var(--text-body); font-family: var(--font-sans); line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Compensa o header fixo ao navegar por âncora — sem isto o título da seção para debaixo da navbar flutuante. */ :target, section[id] { scroll-margin-top: 6.5rem; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); color: var(--text-bright); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; } a { color: inherit; text-decoration: none; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } /* Ambient Glow Orbs position:fixed (não absolute) por dois motivos: não entram no cálculo de scrollWidth — antes os 600px de largura geravam overflow horizontal no celular — e dispensam o `top:1200px` mágico que quebrava em qualquer viewport diferente da do autor. */ .ambient-glow { position: fixed; width: min(600px, 90vw); height: min(600px, 90vw); border-radius: 50%; filter: blur(140px); pointer-events: none; z-index: -1; opacity: 0.4; } .orb-1 { top: -100px; right: -100px; background: radial-gradient(circle, rgba(245, 158, 11, 0.25) 0%, transparent 70%); } .orb-2 { bottom: -150px; left: -150px; background: radial-gradient(circle, rgba(217, 119, 6, 0.2) 0%, transparent 70%); } /* Utility Containers */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } .text-center { text-align: center; } .gold-gradient-text { background: linear-gradient(135deg, #FFF7C2 0%, #F59E0B 50%, #D97706 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .gold-pill-tag { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 2px; color: var(--gold-champagne); background: rgba(245, 158, 11, 0.08); border: 1px solid var(--gold-border); padding: 0.35rem 1.1rem; border-radius: var(--radius-pill); margin-bottom: 1rem; text-transform: uppercase; } /* Top Announcement Pill Bar */ .top-announcement { background-color: var(--bg-night); border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding: 0.5rem 0; font-size: 0.82rem; } .announcement-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; } .announcement-badge { display: flex; align-items: center; gap: 0.6rem; color: var(--text-body); } .pulse-dot { width: 8px; height: 8px; background-color: var(--gold-champagne); border-radius: 50%; box-shadow: 0 0 10px var(--gold-champagne); animation: pulse-dot-anim 1.8s infinite; } @keyframes pulse-dot-anim { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.5; } 100% { transform: scale(1); opacity: 1; } } .phone-link { color: var(--gold-champagne); font-weight: 600; } /* Floating Frosted Island Navbar No topo da página o header se posiciona ABAIXO da barra de anúncio — antes ele era `top:1.2rem` fixo e cobria o anúncio pela metade. `--ann-h` é medida pelo script (a barra quebra em duas linhas no celular, então a altura varia). Ao rolar, o anúncio sai de cena e o header assume o topo. */ .island-header { position: fixed; top: calc(var(--ann-h, 40px) + 0.7rem); left: 50%; transform: translateX(-50%); width: min(1180px, 92%); z-index: 1000; transition: top 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .island-header.scrolled { top: 0.7rem; } .island-nav-container { background: rgba(14, 14, 20, 0.75); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-pill); padding: 0.6rem 1.4rem; display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; box-shadow: var(--shadow-obsidian); transition: background-color 0.4s ease, padding 0.4s ease; } .island-header.scrolled .island-nav-container { background: rgba(8, 8, 12, 0.92); padding: 0.45rem 1.2rem; } .island-nav { min-width: 0; } .brand-logo { display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0; } /* Agora é a logo real do negócio (antes era um "DM" em gradiente via CSS). */ .brand-badge { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; display: block; flex-shrink: 0; border: 1px solid var(--gold-border); box-shadow: var(--shadow-gold); } .brand-name { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: #ffffff; letter-spacing: -0.02em; display: block; white-space: nowrap; } .brand-tag { font-size: 0.68rem; color: var(--gold-champagne); font-weight: 700; letter-spacing: 1px; display: block; margin-top: -3px; white-space: nowrap; } .nav-links { display: flex; align-items: center; gap: 0.35rem; list-style: none; } /* nowrap + gap enxuto: com gap de 1.5rem os seis itens não caíam na largura do header e cada rótulo de duas palavras quebrava em duas linhas. */ .nav-item, .nav-link-item { font-size: 0.85rem; font-weight: 500; color: var(--text-body); padding: 0.45rem 0.7rem; border-radius: var(--radius-pill); white-space: nowrap; display: block; } .nav-item.active { color: #ffffff; background: rgba(245, 158, 11, 0.1); } .nav-item:hover, .nav-link-item:hover { color: #ffffff; } .highlight-item { color: var(--gold-champagne); font-weight: 700; } .nav-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } /* --wa-deep é mais escuro que o #25d366 da marca: texto branco sobre o verde original dava 1,98:1 de contraste (reprova em WCAG AA por larga margem). */ .btn-island-cta { background: linear-gradient(135deg, var(--wa-deep) 0%, #0b6b5f 100%); color: #ffffff; font-weight: 700; font-size: 0.85rem; padding: 0.55rem 1.2rem; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; box-shadow: 0 4px 15px rgba(11, 107, 95, 0.4); } .btn-island-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(11, 107, 95, 0.6); } .mobile-menu-btn { display: none; background: none; border: none; color: #ffffff; font-size: 1.4rem; cursor: pointer; /* alvo de toque mínimo 44x44 */ width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; } .mobile-menu-btn:hover { background: rgba(255, 255, 255, 0.08); } /* Luxury Hero Section */ .hero-luxury { position: relative; padding: 10rem 0 5rem; } .hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 3.5rem; align-items: center; } /* Filho de grid tem `min-width:auto` por padrão, ou seja, ele se recusa a encolher abaixo do próprio min-content. A linha de métricas media 456px de min-content e empurrava a coluna inteira do hero para fora da tela de 390px — era isso que cortava a manchete. */ .hero-grid > *, .studio-workspace > *, .concierge-card > *, .location-luxury-grid > *, .footer-top > * { min-width: 0; } .google-badge-pill { display: inline-flex; align-items: center; gap: 0.6rem; background: var(--bg-glass); border: 1px solid var(--gold-border); padding: 0.4rem 1rem; border-radius: var(--radius-pill); font-size: 0.82rem; margin-bottom: 1.5rem; backdrop-filter: blur(12px); } .stars-gold { color: var(--gold-champagne); font-size: 0.85rem; } .badge-val { font-weight: 800; color: #ffffff; } .badge-sub { color: var(--text-body); } .hero-heading { font-size: 3.4rem; font-weight: 800; letter-spacing: -0.04em; margin-bottom: 1rem; } /* "Ligue já." é a ação da headline e não pode quebrar no meio — sem isto, "Ligue" fica numa linha e "já." sozinho na seguinte. */ .hero-heading .gold-gradient-text { white-space: nowrap; } /* Segunda linha da headline: mesma frase, hierarquia menor. Fica dentro do

porque é parte da chamada, mas não pode competir com "Ligue já." / .hero-heading-linha2 { display: block; font-size: 0.5em; font-weight: 700; letter-spacing: -0.02em; color: var(--text-bright); margin-top: 0.6rem; } / Linha de serviços: fora do

de propósito — o título já é longo, e uma lista de serviços dentro dele atrapalharia a leitura e o SEO. / .hero-servicos { font-size: 0.92rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold-champagne); margin-bottom: 1.5rem; } .hero-subtext { font-size: 1.15rem; color: var(--text-body); margin-bottom: 2.2rem; max-width: 600px; line-height: 1.7; } .hero-subtext strong { color: var(--gold-champagne); } / Button System Luxury / .btn-luxury { display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem; font-family: var(--font-sans); font-weight: 700; padding: 0.95rem 2rem; border-radius: var(--radius-pill); font-size: 0.98rem; cursor: pointer; border: none; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .btn-primary-gold { background: linear-gradient(135deg, #FFF5C0 0%, #F59E0B 60%, #D97706 100%); color: #070709; } .btn-primary-gold:hover { transform: translateY(-3px); box-shadow: var(--shadow-gold); } .btn-glass { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); color: #ffffff; backdrop-filter: blur(12px); } .btn-glass:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--gold-champagne); color: var(--gold-champagne); } .glow-gold { box-shadow: var(--shadow-gold); } .hero-button-group { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 3rem; } .hero-metrics { display: flex; align-items: center; flex-wrap: wrap; gap: 1.2rem 1.8rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.08); } .metric-box { display: flex; flex-direction: column; min-width: 0; flex: 0 1 auto; } .metric-num { font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; color: var(--gold-champagne); line-height: 1; } .metric-num small { font-size: 1.1rem; } .metric-label { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.2rem; } .metric-divider { width: 1px; height: 35px; background-color: rgba(255, 255, 255, 0.1); } .glass-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--gold-border); box-shadow: var(--shadow-obsidian); } .hero-main-img { width: 100%; height: 440px; object-fit: cover; } / Enquadramento das fotos da loja: o assunto (a placa amarela com os serviços) fica no terço superior, então o corte centralizado do object-fit cortava justamente a informação que faz a foto valer a pena. / .enquadra-placa { object-position: center 20%; } .card-overlay-gradient { position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 7, 9, 0.9) 0%, transparent 60%); } .floating-glass-chip { position: absolute; bottom: 1.5rem; left: 1.5rem; right: 1.5rem; background: rgba(14, 14, 20, 0.82); backdrop-filter: blur(20px); border: 1px solid var(--gold-border); border-radius: var(--radius-md); padding: 0.9rem 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .chip-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(245, 158, 11, 0.15); color: var(--gold-champagne); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; } .chip-info { display: flex; flex-direction: column; } .chip-info strong { font-size: 0.88rem; color: #ffffff; } .chip-info span { font-size: 0.75rem; color: var(--text-muted); } .chip-waze-btn { background-color: var(--waze-deep); color: #ffffff; padding: 0.45rem 0.9rem; border-radius: var(--radius-pill); font-size: 0.78rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.4rem; } / Velvet Emergency Bar / .velvet-emergency { background: radial-gradient(ellipse at 50% 50%, rgba(239, 68, 68, 0.15) 0%, rgba(7, 7, 9, 1) 100%); border-top: 1px solid rgba(239, 68, 68, 0.25); border-bottom: 1px solid rgba(239, 68, 68, 0.25); padding: 2.2rem 0; } .emergency-flex { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; } .emergency-badge { color: var(--danger-red); font-family: var(--font-display); font-weight: 800; font-size: 0.78rem; letter-spacing: 1.5px; margin-bottom: 0.3rem; } .emergency-text-group h2 { font-size: 1.6rem; } .emergency-text-group p { color: var(--text-body); font-size: 0.95rem; } .btn-emergency-pulse { background: linear-gradient(135deg, var(--danger-deep) 0%, #a81a1a 100%); color: #ffffff; font-weight: 800; padding: 0.9rem 2rem; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 0.6rem; box-shadow: 0 0 25px rgba(200, 30, 30, 0.45); } .btn-emergency-pulse:hover { transform: translateY(-2px); box-shadow: 0 0 35px rgba(200, 30, 30, 0.65); } / Bento Grid Services Section / .services-bento-section { padding: 7rem 0; } .section-head { margin-bottom: 4rem; } .head-title { font-size: 2.8rem; margin-bottom: 0.8rem; } .head-subtitle { font-size: 1.1rem; color: var(--text-body); max-width: 620px; margin: 0 auto; } .bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; } .bento-card { position: relative; background: var(--bg-glass-card); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: var(--radius-lg); padding: 2.2rem; overflow: hidden; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; } .bento-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(245, 158, 11, 0.12), transparent 40%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .bento-card:hover::before { opacity: 1; } .bento-card:hover { transform: translateY(-6px); border-color: var(--gold-border); box-shadow: var(--shadow-obsidian); } .bento-span-2 { grid-column: span 2; } / O último card ficava sozinho numa fileira de 3 colunas, deixando dois terços de vazio. Em faixa cheia ele fecha a grade de propósito. / .bento-span-3 { grid-column: span 3; } .bento-card-wide .bento-content { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .bento-card-wide .bento-icon-gold { margin-bottom: 0; flex-shrink: 0; } .bento-card-wide .bento-text { flex: 1 1 320px; min-width: 0; } .bento-card-wide h3 { margin-bottom: 0.35rem; } .bento-card-wide p { margin-bottom: 0; } .bento-card-wide .bento-link { margin-top: 0; flex-shrink: 0; } .bento-hero-card { display: grid; grid-template-columns: 1fr 1.1fr; padding: 0; } .bento-img-bg { position: relative; height: 100%; } .bento-img-bg img { width: 100%; height: 100%; object-fit: cover; } / Vídeo do serviço no card grande. O arquivo é vertical (320x568) e a coluna no desktop mede ~360px, então fica praticamente 1:1 — sem upscale visível. Os controles nativos desenham na borda do elemento, não do quadro, então continuam visíveis mesmo com object-fit: cover. / .bento-video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; } .bento-hero-card .bento-content { padding: 2.5rem; } .bento-badge { display: inline-block; font-size: 0.7rem; font-weight: 800; letter-spacing: 1.5px; color: var(--gold-champagne); background: rgba(245, 158, 11, 0.1); padding: 0.2rem 0.7rem; border-radius: 4px; margin-bottom: 1rem; } .badge-green { color: #10b981; background: rgba(16, 185, 129, 0.1); } / Foto de topo nos cards de serviço. Sangra até a borda do card: o padding fica no .bento-content, então a imagem precisa de margens negativas do mesmo tamanho para encostar nas bordas. / .bento-foto { display: block; width: calc(100% + 4.4rem); margin: -2.2rem -2.2rem 1.4rem; height: 190px; object-fit: cover; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .bento-icon-gold { width: 48px; height: 48px; border-radius: 12px; background: rgba(245, 158, 11, 0.12); color: var(--gold-champagne); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 1.2rem; } .bento-icon-red { width: 48px; height: 48px; border-radius: 12px; background: rgba(239, 68, 68, 0.15); color: var(--danger-red); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 1.2rem; } .bento-content h3 { font-size: 1.4rem; margin-bottom: 0.8rem; } .bento-content p { font-size: 0.95rem; color: var(--text-body); margin-bottom: 1.5rem; flex-grow: 1; } .bento-bullets { list-style: none; margin-bottom: 1.5rem; } .bento-bullets li { font-size: 0.88rem; color: var(--text-body); display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; } .bento-bullets i { color: var(--gold-champagne); font-size: 0.8rem; } .bento-link { font-weight: 700; font-size: 0.92rem; color: var(--gold-champagne); display: inline-flex; align-items: center; gap: 0.5rem; margin-top: auto; } .bento-link:hover { gap: 0.8rem; } .link-danger { color: var(--danger-red); } / ========================================================================== FAIXA DESLIZANTE DE TRABALHOS REAIS (marquee) ========================================================================== / .faixa-trabalhos { padding: 3rem 0 4rem; overflow: hidden; } .faixa-trabalhos .gold-pill-tag { margin-bottom: 2rem; } / A máscara apaga as bordas: sem ela as fotos "nascem" e "somem" cortadas em seco na beirada da tela. / .faixa-janela { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); } / O espaçamento é margem no item, não `gap` do flex, de propósito. Com `gap`, a largura total é (10 fotos + 9 espaços) e a metade dá "5 fotos + 4,5 espaços" — meio espaço a menos do que uma cópia real, o que faz a emenda saltar 8px a cada volta. Com margem em cada item, a metade é exatamente "5 fotos + 5 margens" e o laço fecha certo. / .faixa-trilho { display: flex; align-items: stretch; width: max-content; list-style: none; animation: faixa-correr 46s linear infinite; } / -50% é exatamente o comprimento de uma cópia da lista, então o salto de volta ao início cai sobre uma imagem idêntica e não se percebe a emenda. / @keyframes faixa-correr { from { transform: translateX(0); } to { transform: translateX(-50%); } } / Pausa ao passar o mouse ou ao focar por teclado, para dar tempo de olhar. / .faixa-janela:hover .faixa-trilho, .faixa-janela:focus-within .faixa-trilho { animation-play-state: paused; } .faixa-item { flex: 0 0 auto; margin-right: 1rem; } .faixa-item img { display: block; height: 300px; width: auto; border-radius: var(--radius-md); border: 1px solid var(--gold-border); object-fit: cover; } / ========================================================================== A LOJA DE VERDADE — bloco humanizado + carrossel de fotos reais ========================================================================== / .oficina-section { padding: 7rem 0; background: linear-gradient(180deg, transparent 0%, rgba(14, 14, 20, 0.6) 40%, transparent 100%); } .oficina-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 2.5rem; align-items: start; } .oficina-grid > { min-width: 0; } /* --- cartão do dono --- / .dono-card { background: var(--bg-glass-card); backdrop-filter: blur(20px); border: 1px solid var(--gold-border); border-radius: var(--radius-lg); padding: 2.2rem; text-align: center; box-shadow: var(--shadow-obsidian); } .dono-logo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold-champagne); box-shadow: var(--shadow-gold); margin-bottom: 1rem; } .dono-nome { font-family: var(--font-display); font-size: 1.8rem; margin-bottom: 0.15rem; } .dono-handle { display: inline-block; font-size: 0.88rem; font-weight: 700; color: var(--gold-champagne); margin-bottom: 1.2rem; } .dono-handle:hover { text-decoration: underline; } .dono-fala { font-size: 1rem; line-height: 1.7; color: var(--text-bright); font-style: italic; margin-bottom: 1.5rem; } .dono-selos { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; font-size: 0.88rem; color: var(--text-body); } .dono-selos i { color: var(--gold-champagne); margin-right: 0.4rem; } / --- carrossel --- scroll-snap nativo: arrasta com o dedo no celular sem biblioteca nenhuma, e continua funcionando se o JS falhar (os botões é que somem). / .carrossel { position: relative; } .carrossel-viewport { display: flex; gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; border-radius: var(--radius-lg); / esconde a barra de rolagem sem impedir o gesto / scrollbar-width: none; -ms-overflow-style: none; } .carrossel-viewport::-webkit-scrollbar { display: none; } .carrossel-viewport:focus-visible { outline: 3px solid var(--gold-champagne); outline-offset: 4px; } .slide { position: relative; flex: 0 0 100%; scroll-snap-align: center; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--gold-border); background: var(--bg-night); } .slide img { display: block; width: 100%; height: 460px; object-fit: cover; } .slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1.4rem 1.2rem; background: linear-gradient(to top, rgba(7, 7, 9, 0.94) 25%, transparent 100%); color: var(--text-body); font-size: 0.92rem; line-height: 1.5; } .slide figcaption strong { display: block; color: #ffffff; font-size: 1.05rem; margin-bottom: 0.2rem; } .carrossel-btn { position: absolute; top: calc(230px - 24px); width: 48px; height: 48px; border-radius: 50%; background: rgba(10, 10, 15, 0.85); backdrop-filter: blur(12px); border: 1px solid var(--gold-border); color: var(--gold-champagne); font-size: 1.05rem; cursor: pointer; display: none; align-items: center; justify-content: center; transition: background-color 0.25s ease, transform 0.25s ease; z-index: 3; } / só aparecem com JS ativo — sem JS o usuário rola o carrossel com o dedo / .js-on .carrossel-btn { display: flex; } .carrossel-btn:hover { background: var(--gold-champagne); color: #070709; } .carrossel-btn[disabled] { opacity: 0.35; cursor: default; } .carrossel-btn.prev { left: -18px; } .carrossel-btn.next { right: -18px; } .carrossel-pontos { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.2rem; } .carrossel-ponto { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 1px solid var(--gold-border); background: rgba(255, 255, 255, 0.15); cursor: pointer; transition: background-color 0.25s ease, width 0.25s ease; } .carrossel-ponto[aria-selected="true"] { background: var(--gold-champagne); width: 26px; border-radius: var(--radius-pill); } / Stamp Studio Section / .stamp-studio-section { background-color: var(--bg-night); padding: 7rem 0; border-top: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .studio-workspace { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } .studio-panel-controls { background: var(--bg-glass-card); backdrop-filter: blur(20px); border: 1px solid var(--gold-border); border-radius: var(--radius-lg); padding: 2.2rem; } .panel-header { display: flex; align-items: center; gap: 0.8rem; color: var(--gold-champagne); font-size: 1.2rem; margin-bottom: 1.8rem; } .input-group-luxury { margin-bottom: 1.3rem; } .input-group-luxury label { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 0.4rem; } .input-group-luxury input[type="text"], .input-group-luxury select { width: 100%; background: var(--bg-obsidian); border: 1px solid rgba(255, 255, 255, 0.1); color: #ffffff; padding: 0.85rem 1.1rem; border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 0.95rem; transition: all 0.3s ease; min-height: 46px; } / Seta própria: sem isto o select herda o widget claro do sistema, que destoa do painel escuro. O padding à direita reserva o espaço da seta. / .input-group-luxury select, .form-field-luxury select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23F59E0B' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem; text-overflow: ellipsis; cursor: pointer; } / O menu aberto é desenhado pelo sistema; sem isto, em alguns navegadores as opções saem em texto branco sobre fundo branco. / .input-group-luxury select option, .form-field-luxury select option { background: #14141c; color: #ffffff; } .input-group-luxury input[type="text"]:focus, .input-group-luxury select:focus { outline: none; border-color: var(--gold-champagne); box-shadow: 0 0 15px var(--gold-glow); } .grid-inputs-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .luxury-range { width: 100%; accent-color: var(--gold-champagne); min-height: 44px; } / O slider não dava nenhum retorno numérico — o usuário mexia sem saber em que escala parou. / .range-row { display: flex; align-items: center; gap: 0.8rem; } .range-value { font-family: var(--font-display); font-weight: 800; font-size: 0.9rem; color: var(--gold-champagne); background: rgba(245, 158, 11, 0.1); border: 1px solid var(--gold-border); border-radius: var(--radius-sm); padding: 0.2rem 0.55rem; min-width: 44px; text-align: center; flex-shrink: 0; font-variant-numeric: tabular-nums; } .studio-panel-preview { background: var(--bg-glass-card); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-lg); padding: 2.2rem; display: flex; flex-direction: column; height: 100%; } .preview-top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.8rem; font-size: 0.85rem; color: var(--text-muted); } .preview-status i { color: #10b981; } .time-badge { background: rgba(16, 185, 129, 0.15); color: #10b981; padding: 0.3rem 0.8rem; border-radius: var(--radius-pill); font-weight: 700; } .canvas-paper-surface { background: #fcfcfc; background-image: radial-gradient(#d1d5db 1px, transparent 1px); background-size: 18px 18px; border-radius: var(--radius-md); padding: 3.5rem 2rem; display: flex; align-items: center; justify-content: center; min-height: 260px; margin-bottom: 1.8rem; box-shadow: inset 0 2px 10px rgba(0,0,0,0.08); / cresce junto com o painel de controles ao lado; sem isto sobrava um vão morto entre o papel e a linha de preço / flex: 1 1 auto; } .stamp-press-effect { color: #0d47a1; font-family: var(--font-stamp); text-align: center; transform: rotate(-1.5deg); transition: color 0.3s ease; max-width: 100%; } / "Carimbada": o elemento se chamava stamp-press-effect mas nunca prensava nada. Dispara a cada mudança nos campos, ~220ms. / .stamp-press-effect.pressing { animation: stamp-press-anim 0.22s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes stamp-press-anim { 0% { transform: rotate(-1.5deg) scale(1); } 40% { transform: rotate(-1.5deg) scale(0.955); filter: saturate(1.5) contrast(1.15); } 100% { transform: rotate(-1.5deg) scale(1); } } .stamp-line { overflow-wrap: anywhere; } .stamp-box-frame { border: 4px solid currentColor; padding: 0.8rem 1.8rem; border-radius: 6px; display: inline-block; } .stamp-line { line-height: 1.3; text-transform: uppercase; letter-spacing: 1px; } .l-primary { font-weight: 700; font-size: 1.25rem; } .l-secondary { font-size: 0.95rem; } .l-tertiary { font-size: 0.85rem; } .preview-bottom-bar { margin-top: auto; } .price-calculator-display { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; } .price-caption { font-size: 0.9rem; color: var(--text-muted); } .price-amount { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; color: var(--gold-champagne); } / Concierge VIP Section / .concierge-section { padding: 7rem 0; } .concierge-card { background: var(--bg-glass-card); backdrop-filter: blur(24px); border: 1px solid var(--gold-border); border-radius: var(--radius-lg); padding: 3.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; box-shadow: var(--shadow-obsidian); } .concierge-left h2 { font-size: 2.4rem; margin-bottom: 1rem; } .concierge-left p { color: var(--text-body); font-size: 1.05rem; margin-bottom: 2rem; } .concierge-features { display: flex; flex-direction: column; gap: 0.9rem; } .c-feat { display: flex; align-items: center; gap: 0.8rem; font-size: 0.95rem; color: #ffffff; } .c-feat i { color: var(--gold-champagne); } .form-field-luxury { margin-bottom: 1.3rem; } .form-field-luxury label { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 0.5rem; } .form-field-luxury select { width: 100%; background: var(--bg-obsidian); border: 1px solid rgba(255, 255, 255, 0.1); color: #ffffff; padding: 0.9rem 1.1rem; border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 0.95rem; } .c-estimate-display { background: var(--bg-obsidian); border: 1px dashed var(--gold-border); padding: 1.1rem; border-radius: var(--radius-sm); margin-bottom: 1.5rem; text-align: center; } .est-title { font-size: 0.72rem; letter-spacing: 1.5px; color: var(--text-muted); margin-bottom: 0.3rem; } .est-val { font-weight: 700; color: var(--gold-champagne); font-size: 1rem; } / Reputation 4.8 Section / .reputation-section { background-color: var(--bg-night); padding: 7rem 0; border-top: 1px solid rgba(255, 255, 255, 0.06); } .reputation-score-box { background: var(--bg-glass-card); border: 1px solid var(--gold-border); border-radius: var(--radius-lg); padding: 2.5rem; display: grid; grid-template-columns: 0.8fr 1.2fr 0.8fr; gap: 2.5rem; align-items: center; margin-bottom: 3.5rem; } .score-left-col { text-align: center; } .big-rating { font-family: var(--font-display); font-size: 4rem; font-weight: 800; color: #ffffff; line-height: 1; } .stars-gold-lg { color: var(--gold-champagne); font-size: 1.2rem; margin: 0.5rem 0; } .score-sub { font-size: 0.88rem; color: var(--text-muted); } .score-center-bars { display: flex; flex-direction: column; gap: 0.6rem; } .score-line-item { display: flex; align-items: center; gap: 0.8rem; font-size: 0.85rem; color: var(--text-muted); } .bar-track { flex-grow: 1; height: 8px; background: var(--bg-obsidian); border-radius: 10px; overflow: hidden; } .bar-fill { height: 100%; background: var(--gold-champagne); } .testimonials-luxury-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; } .testi-card { background: var(--bg-glass-card); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: var(--radius-md); padding: 2rem; } .testi-stars { color: var(--gold-champagne); font-size: 0.85rem; margin-bottom: 1rem; } .testi-quote { font-size: 0.98rem; color: var(--text-bright); font-style: italic; margin-bottom: 1.5rem; } .testi-author { display: flex; align-items: center; gap: 0.8rem; } .author-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--gold-champagne); color: #070709; font-weight: 800; display: flex; align-items: center; justify-content: center; } .testi-author div { display: flex; flex-direction: column; } .testi-author strong { font-size: 0.9rem; color: #ffffff; } .testi-author span { font-size: 0.78rem; color: var(--text-muted); } / Location Section Luxury / .location-luxury-section { padding: 7rem 0; } .location-luxury-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; } .loc-text-col h2 { font-size: 2.4rem; margin-bottom: 1rem; } .loc-desc { color: var(--text-body); margin-bottom: 2rem; } .loc-details-list { display: flex; flex-direction: column; gap: 1.2rem; margin-bottom: 2.2rem; } .loc-item { display: flex; gap: 1rem; } .loc-icon { width: 42px; height: 42px; border-radius: 10px; background: rgba(245, 158, 11, 0.12); color: var(--gold-champagne); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; } .loc-item div { display: flex; flex-direction: column; } .loc-item strong { font-size: 0.95rem; color: #ffffff; } .loc-item span { font-size: 0.9rem; color: var(--text-body); } .loc-nav-btns { display: flex; gap: 1rem; flex-wrap: wrap; } .btn-waze-luxury { background: var(--waze-deep); color: #ffffff; font-weight: 700; padding: 0.9rem 1.8rem; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 0.6rem; } .map-glass-card { background: var(--bg-glass-card); border: 1px solid var(--gold-border); padding: 0.6rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-obsidian); } / Luxury Footer / .luxury-footer { background-color: #040406; border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 5rem; } .footer-top { display: grid; grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr; gap: 3rem; margin-bottom: 4rem; } .footer-summary { font-size: 0.9rem; color: var(--text-muted); margin: 1.2rem 0; } .social-pills { display: flex; gap: 0.8rem; } .social-pills a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--gold-champagne); display: flex; align-items: center; justify-content: center; } .social-pills a:hover { background: var(--gold-champagne); color: #070709; } .footer-links-col h4, .footer-contact-col h4 { font-size: 1.1rem; margin-bottom: 1.4rem; color: #ffffff; } .footer-links-col ul li { margin-bottom: 0.7rem; list-style: none; } .footer-links-col a { font-size: 0.9rem; color: var(--text-muted); } .footer-links-col a:hover { color: var(--gold-champagne); } .footer-contact-col p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 0.8rem; } .footer-bottom-bar { background-color: #020203; padding: 1.5rem 0; border-top: 1px solid rgba(255, 255, 255, 0.04); font-size: 0.85rem; color: var(--text-muted); } .footer-bottom-flex { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .gold-slogan { color: var(--gold-champagne); font-weight: 800; letter-spacing: 1px; } / Floating WhatsApp Luxury / .whatsapp-floating-luxury { position: fixed; bottom: 2rem; right: 2rem; width: 62px; height: 62px; background-color: var(--wa-deep); color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; box-shadow: 0 10px 30px rgba(15, 125, 111, 0.5); z-index: 999; } .wa-glow-aura { position: absolute; inset: 0; border-radius: 50%; background-color: var(--wa-deep); opacity: 0.5; animation: wa-aura-anim 2s infinite; z-index: -1; } @keyframes wa-aura-anim { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.6); opacity: 0; } } / A tooltip não tinha estado nenhum — ficava permanentemente visível, ocupando espaço fixo na tela do celular. Agora só aparece em hover/foco e no mobile some de vez (lá quem convida ao toque é a barra fixa). / .wa-tooltip { position: absolute; right: 74px; background: var(--bg-night); color: #ffffff; padding: 0.45rem 0.9rem; border-radius: 8px; font-size: 0.8rem; font-weight: 700; white-space: nowrap; border: 1px solid var(--gold-border); opacity: 0; transform: translateX(8px); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; } .whatsapp-floating-luxury:hover .wa-tooltip, .whatsapp-floating-luxury:focus-visible .wa-tooltip { opacity: 1; transform: translateX(0); } / Scroll Reveal Classes `.js-on` é adicionado ao pelo script logo no início. Sem JS a regra inteira não se aplica e o conteúdo nasce visível — antes, se o script falhasse, a página ficava em branco (opacity:0 sem nada para reverter). / .js-on .reveal { opacity: 0; transform: translateY(35px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .js-on .reveal.active { opacity: 1; transform: translateY(0); } .js-on .delay-1 { transition-delay: 0.15s; } .js-on .delay-2 { transition-delay: 0.3s; } / ========================================================================== Foco visível — não havia nenhum estilo de foco no site inteiro, o que torna a navegação por teclado praticamente impossível num fundo escuro. ========================================================================== / :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--gold-champagne); outline-offset: 3px; border-radius: var(--radius-sm); } .island-nav-container :focus-visible, .whatsapp-floating-luxury:focus-visible { outline-offset: 2px; } / ========================================================================== Menu mobile (painel deslizante) ========================================================================== / .mobile-nav-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 86vw); background: rgba(10, 10, 15, 0.98); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-left: 1px solid var(--gold-border); z-index: 1200; padding: 5.5rem 1.5rem 2rem; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); overflow-y: auto; display: none; } .mobile-nav-panel.open { transform: translateX(0); } .mobile-nav-panel ul { list-style: none; display: flex; flex-direction: column; gap: 0.25rem; } .mobile-nav-panel a { display: flex; align-items: center; min-height: 48px; padding: 0.6rem 0.9rem; border-radius: var(--radius-sm); color: var(--text-bright); font-weight: 600; font-size: 1rem; } .mobile-nav-panel a:hover, .mobile-nav-panel a.active { background: rgba(245, 158, 11, 0.12); color: var(--gold-champagne); } .mobile-nav-close { position: absolute; top: 1.2rem; right: 1.2rem; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: #ffffff; font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; } .mobile-nav-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 1150; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; display: none; } .mobile-nav-backdrop.open { opacity: 1; pointer-events: auto; } body.nav-locked { overflow: hidden; } / ========================================================================== Barra fixa de ação no celular — para chaveiro de emergência, "ligar agora" é a ação de maior conversão e precisa estar sempre ao alcance do polegar. ========================================================================== / .mobile-action-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; gap: 0.6rem; padding: 0.6rem 0.8rem calc(0.6rem + env(safe-area-inset-bottom, 0px)); background: rgba(10, 10, 15, 0.96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid var(--gold-border); } .mobile-action-bar a { flex: 1 1 0; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--radius-pill); font-weight: 800; font-size: 0.95rem; padding: 0.5rem 1rem; } .mab-call { background: linear-gradient(135deg, #FFF5C0 0%, #F59E0B 60%, #D97706 100%); color: #070709; } .mab-wa { background: linear-gradient(135deg, var(--wa-deep) 0%, #0b6b5f 100%); color: #ffffff; } / ========================================================================== Movimento reduzido — respeita quem configurou o sistema para menos animação (enjoo/vertigem). Havia duas animações infinitas rodando sem exceção. ========================================================================== / @media (prefers-reduced-motion: reduce) { , ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } html { scroll-behavior: auto; } .js-on .reveal { opacity: 1; transform: none; } .pulse-dot, .wa-glow-aura { animation: none; } .wa-glow-aura { opacity: 0; } /* A regra global acima zera a duração de toda animação. Na faixa isso a deixaria congelada em translateX(-50%), ou seja, no meio do trilho. Aqui ela perde a animação de vez e vira uma tira que a pessoa arrasta. / .faixa-trilho { animation: none !important; transform: none !important; width: auto; } .faixa-janela { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } } / Responsive Adjustments / @media (max-width: 992px) { .hero-grid, .studio-workspace, .concierge-card, .location-luxury-grid { grid-template-columns: 1fr; } .bento-grid { grid-template-columns: 1fr; } / Precisa resetar os DOIS spans. Um item com `span 3` dentro de um grid de uma coluna não encolhe: ele cria três colunas implícitas e espreme todos os cards da seção. / .bento-span-2, .bento-span-3 { grid-column: span 1; } .bento-hero-card { grid-template-columns: 1fr; } / Em coluna única a mídia passaria a ocupar a largura inteira do card (~667px no tablet) e o vídeo de 320px apareceria esticado. Aqui ele vira uma faixa de altura fixa, com o vídeo contido e centralizado sobre preto. / .bento-img-bg { height: 420px; background: #000; } .bento-video { width: auto; max-width: 100%; height: 100%; margin: 0 auto; object-fit: contain; } .reputation-score-box { grid-template-columns: 1fr; } .testimonials-luxury-grid { grid-template-columns: 1fr; } .oficina-grid { grid-template-columns: 1fr; } / setas por dentro do quadro: fora dele elas sairiam da tela / .carrossel-btn.prev { left: 10px; } .carrossel-btn.next { right: 10px; } .footer-top { grid-template-columns: 1fr 1fr; } .hero-heading { font-size: 2.5rem; } } @media (max-width: 768px) { .nav-links { display: none; } .mobile-menu-btn { display: inline-flex; } .mobile-nav-panel, .mobile-nav-backdrop { display: block; } / No celular o botão do header vira só o ícone: o rótulo "WhatsApp VIP" empurrava o botão de menu para fora da tela. Vira um círculo de 44px igual ao do menu — antes ficava 41x35 ao lado de um alvo de 44x44 e, mesmo com os centros alinhados, a diferença de tamanho fazia a dupla parecer torta. / .btn-island-cta span { display: none; } .btn-island-cta { width: 44px; height: 44px; padding: 0; border-radius: 50%; font-size: 1.15rem; justify-content: center; flex-shrink: 0; } / "CHAVES & CARIMBOS" media 219px com nowrap — sozinho ele estourava a largura do header e empurrava o botão de menu para fora da tela. / .brand-tag { display: none; } .brand-name { font-size: 1rem; } .island-nav-container { padding: 0.5rem 0.85rem; } / Rede de segurança: a marca pode encolher e, no limite, truncar — o que NÃO pode é voltar a empurrar o botão de menu para fora da tela. / .brand-logo { min-width: 0; gap: 0.55rem; flex-shrink: 1; overflow: hidden; } .brand-info { min-width: 0; overflow: hidden; } .brand-name { overflow: hidden; text-overflow: ellipsis; } .grid-inputs-two { grid-template-columns: 1fr; } .footer-top { grid-template-columns: 1fr; } / No celular a barra fixa já oferece WhatsApp e telefone; manter também o botão flutuante deixava três acessos ao WhatsApp empilhados no mesmo canto, e o flutuante ainda cobria o botão de telefone do hero. / .mobile-action-bar { display: flex; } .whatsapp-floating-luxury { display: none; } .luxury-footer { padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); } .hero-luxury { padding: 8rem 0 3rem; } .head-title { font-size: 2rem; } .concierge-left h2, .loc-text-col h2 { font-size: 1.85rem; } .concierge-card { padding: 2rem 1.4rem; } .studio-panel-controls, .studio-panel-preview, .bento-card { padding: 1.6rem; } / o padding do card muda aqui, então a sangria da foto muda junto / .bento-foto { width: calc(100% + 3.2rem); margin: -1.6rem -1.6rem 1.2rem; height: 165px; } .bento-hero-card .bento-content { padding: 1.6rem; } .emergency-flex, .footer-bottom-flex { text-align: center; justify-content: center; } .oficina-section { padding: 4.5rem 0; } .dono-card { padding: 1.6rem; } .slide img { height: 340px; } .carrossel-btn { top: calc(170px - 22px); width: 44px; height: 44px; } .btn-emergency-pulse, .hero-button-group .btn-luxury { width: 100%; } } @media (max-width: 480px) { / Syne é uma display bem larga: "CHAVEIRO DM" ocupa 190px a 1rem, o que não cabe ao lado dos dois botões numa tela de 360px. / .brand-name { font-size: 0.8rem; } .brand-badge { width: 34px; height: 34px; font-size: 0.95rem; } .island-nav-container { padding: 0.45rem 0.7rem; } .hero-heading { font-size: 2.05rem; } .hero-subtext { font-size: 1.02rem; } / As três métricas viram grade de 3 colunas iguais que encolhem junto, em vez de uma linha flex que se recusava a caber. */ .hero-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; } .metric-divider { display: none; } .metric-num { font-size: 1.6rem; } .metric-num small { font-size: 0.85rem; } .metric-label { font-size: 0.7rem; line-height: 1.3; } .faixa-item img { height: 200px; } .faixa-trabalhos { padding: 2.5rem 0 3rem; } .google-badge-pill { flex-wrap: wrap; border-radius: var(--radius-md); } .floating-glass-chip { flex-wrap: wrap; left: 0.8rem; right: 0.8rem; bottom: 0.8rem; padding: 0.8rem; } .chip-waze-btn { width: 100%; justify-content: center; min-height: 44px; } .container { padding: 0 1.1rem; } .loc-nav-btns .btn-luxury, .loc-nav-btns .btn-waze-luxury { width: 100%; justify-content: center; } .score-line-item { font-size: 0.78rem; } }

porque é parte da chamada, mas não pode competir com "Ligue já." */ .hero-heading-linha2 { display: block; font-size: 0.5em; font-weight: 700; letter-spacing: -0.02em; color: var(--text-bright); margin-top: 0.6rem; } /* Linha de serviços: fora do

porque é parte da chamada, mas não pode competir com "Ligue já." / .hero-heading-linha2 { display: block; font-size: 0.5em; font-weight: 700; letter-spacing: -0.02em; color: var(--text-bright); margin-top: 0.6rem; } / Linha de serviços: fora do