/* ═══════════════════════════════════════════════ INVISACOOK BRASIL — Main Stylesheet Stack: Vite + Vanilla JS + GSAP + Lenis Font: Hanken Grotesk (variable, self-hosted) ═══════════════════════════════════════════════ */ /* ── Fonts ─────────────────────────────────────── */ @font-face { font-family: 'Hanken Grotesk'; src: url('/fonts/HankenGrotesk-VariableFont_wght.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Hanken Grotesk'; src: url('/fonts/HankenGrotesk-Italic-VariableFont_wght.ttf') format('truetype'); font-weight: 100 900; font-style: italic; font-display: swap; } /* ── Tokens ─────────────────────────────────────── */ :root { --c-black: #0d0d0d; --c-white: #f7f5f2; --c-warm-white: #f0ece6; --c-terracota: #e8551f; --c-orange: #f1592a; --c-beige: #d9cfc4; --c-graphite: #3a3733; --c-graphite-light: #6b6560; --c-line: rgba(58, 55, 51, 0.12); --font: 'Hanken Grotesk', system-ui, sans-serif; --track-tight: -0.045em; --nav-h: 56px; --section-gap: clamp(80px, 12vw, 160px); --container-w: 1280px; --container-pad: clamp(24px, 5vw, 80px); /* Sistema único de cantos e sombras — não usar valores soltos */ --radius-sm: 16px; /* miniaturas, chips */ --radius-card: 26px; /* cards, mídias, blocos de conteúdo */ --radius-panel: 34px; /* painéis flutuantes (mega menu, nav mobile) */ --shadow-rest: 0 1px 3px rgba(13, 13, 13, 0.08); /* repouso */ --shadow-lift: 0 20px 36px rgba(13, 13, 13, 0.16); /* destaque/hover */ --shadow-float: 0 16px 40px rgba(13, 13, 13, 0.14); /* painéis fixos */ --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ── Reset ──────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: auto; /* Precisa estar no , não no : no iOS/WebKit, overflow-x no transforma o body no elemento de rolagem (em vez do ) e isso quebra o position:fixed de filhos diretos do body — no nosso caso, o

e o painel do menu mobile, que ficavam sem aparecer corretamente. */ overflow-x: hidden; } body { font-family: var(--font); background: var(--c-white); color: var(--c-black); line-height: 1.7; font-weight: 400; -webkit-font-smoothing: antialiased; } img, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { border: none; background: none; cursor: pointer; font: inherit; } ul { list-style: none; } ::selection { background: var(--c-terracota); color: var(--c-white); } /* ── Container ──────────────────────────────────── */ .container { max-width: var(--container-w); margin-inline: auto; padding-inline: var(--container-pad); } /* ── Typography ─────────────────────────────────── */ h1, h2, h3, h4 { font-weight: 500; letter-spacing: var(--track-tight); line-height: 1.08; } h1 { font-size: clamp(40px, 6.5vw, 92px); } h2 { font-size: clamp(30px, 4.2vw, 58px); } h3 { font-size: clamp(17px, 1.6vw, 21px); font-weight: 500; } h4 { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } p { font-size: clamp(15px, 1.3vw, 16px); color: var(--c-graphite); line-height: 1.75; } em { font-style: italic; font-weight: 300; } .label { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-terracota); margin-bottom: 16px; } .label--light { color: var(--c-beige); } /* ── Buttons ────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; font-size: 14px; font-weight: 500; letter-spacing: 0.04em; border-radius: 980px; transition: all 0.3s var(--ease); white-space: nowrap; } .btn svg { width: 18px; height: 18px; flex-shrink: 0; } .btn--primary { background: var(--c-black); color: var(--c-white); } .btn--primary:hover { background: var(--c-orange); transform: translateY(-2px); } .btn--orange { background: var(--c-orange); color: #fff; } .btn--orange:hover { background: #d94a1f; transform: translateY(-2px); } .btn--ghost { border: 1px solid rgba(247, 245, 242, 0.3); color: var(--c-white); } .btn--ghost:hover { border-color: var(--c-white); background: rgba(247,245,242,0.1); } .btn--wa { background: #25D366; color: #fff; } .btn--wa:hover { background: #1ebe5a; transform: translateY(-2px); } .btn--full { width: 100%; justify-content: center; } /* ── Link arrow ─────────────────────────────────── */ .link-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; letter-spacing: 0.02em; } .link-arrow::after { content: '→'; transition: transform 0.3s var(--ease); } .link-arrow:hover::after { transform: translateX(5px); } .link-arrow--sm { font-size: 13px; } /* ── Section base ───────────────────────────────── */ .section { padding-block: var(--section-gap); } .section__header { margin-bottom: clamp(40px, 6vw, 80px); max-width: 620px; } .section__header--center { text-align: center; max-width: 720px; margin-inline: auto; } .section__header h2 { margin-top: 12px; } .section__header p { margin-top: 20px; color: var(--c-graphite-light); font-size: clamp(16px, 1.8vw, 18px); } /* ═══════════════════════════════════════════════ NAV ═══════════════════════════════════════════════ */ .nav { position: fixed; top: clamp(16px, 2.4vw, 28px); left: clamp(24px, 6vw, 96px); right: clamp(24px, 6vw, 96px); z-index: 100; height: var(--nav-h); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 999px; box-shadow: 0 4px 24px rgba(13,13,13,0.08); } /* O efeito de vidro fica num pseudo-elemento ATRÁS do conteúdo, não no container que envolve a logo/menu. Se o backdrop-filter estivesse na .nav, o Safari/iOS rasterizaria todo o conteúdo (logo e textos) em baixa resolução, deixando as bordas serrilhadas. Como pseudo separado, o vidro continua e a logo/menu renderizam nítidos por cima. */ .nav::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); z-index: 0; } .nav__inner { position: relative; z-index: 1; max-width: var(--container-w); margin-inline: auto; padding-inline: clamp(16px, 2.4vw, 28px); height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .nav__logo { display: flex; align-items: center; } .nav__logo-img { height: 34px; width: auto; /* Sem filter: o SVG já é #0f0f0f. Um `filter` aqui força a rasterização do SVG e, dentro da barra com backdrop-filter, alguns navegadores (Safari/iOS) rasterizam em baixa resolução — deixando a logo borrada. */ } .nav__links { display: flex; align-items: center; gap: clamp(16px, 2.5vw, 36px); } .nav__link { font-size: 13px; font-weight: 450; letter-spacing: 0.01em; color: var(--c-graphite); padding: 6px 14px; border-radius: 980px; transition: background 0.2s var(--ease), color 0.2s var(--ease), opacity 0.2s; } .nav__link:hover { background: rgba(13, 13, 13, 0.06); } .nav__link--cta { padding: 7px 18px; background: var(--c-black); color: var(--c-white); border: 1px solid var(--c-black); border-radius: 980px; transition: all 0.2s var(--ease); } .nav__link--cta:hover { background: var(--c-orange); border-color: var(--c-orange); } .nav__link--spec { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-graphite); opacity: 0.6; } .nav__link--spec:hover { opacity: 1; } .nav__link--shop { padding: 7px 16px; background: var(--c-orange); color: var(--c-white); border-radius: 980px; font-weight: 500; } .nav__link--shop:hover { background: var(--c-black); } /* ── Seletor de idioma ──────────────────────────── */ .nav__lang { display: flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 4px; border-radius: 980px; background: rgba(13, 13, 13, 0.04); } .nav__lang-sep { color: var(--c-graphite-light); font-size: 11px; opacity: 0.5; } .nav__lang-btn { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--c-graphite-light); padding: 5px 9px; border-radius: 980px; transition: background 0.2s var(--ease), color 0.2s var(--ease); } .nav__lang-btn:hover { color: var(--c-black); } .nav__lang-btn.is-active { background: var(--c-black); color: var(--c-white); } /* ── Nav dropdown trigger ───────────────────────── */ .nav__dropdown { position: relative; } .nav__link--has-dropdown { display: inline-flex; align-items: center; gap: 5px; background: none; font-size: 13px; font-weight: 450; letter-spacing: 0.01em; color: var(--c-graphite); padding: 6px 14px; border-radius: 980px; transition: background 0.2s var(--ease), color 0.2s var(--ease), opacity 0.2s; cursor: pointer; } .nav__link--has-dropdown:hover { background: rgba(13, 13, 13, 0.06); } .nav__link--has-dropdown[aria-expanded="true"] { background: rgba(13, 13, 13, 0.06); } .nav__chevron { width: 10px; height: 6px; transition: transform 0.3s var(--ease); flex-shrink: 0; } .nav__link--has-dropdown[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); } /* ═══════════════════════════════════════════════ MEGA MENU ═══════════════════════════════════════════════ */ .mega-menu { position: fixed; left: clamp(24px, 6vw, 96px); right: clamp(24px, 6vw, 96px); top: calc(var(--nav-h) + clamp(16px, 2.4vw, 28px) + 10px); background: var(--c-white); border-radius: var(--radius-panel); box-shadow: var(--shadow-float); z-index: 99; /* animação de entrada */ opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity 0.28s var(--ease), transform 0.28s var(--ease); } .mega-menu--open { opacity: 1; transform: translateY(0); pointer-events: auto; } .mega-menu__inner { max-width: var(--container-w); margin-inline: auto; padding: 36px var(--container-pad) 40px; display: grid; grid-template-columns: 260px 1fr 220px; gap: 0; } .mega-menu__col { padding-inline: 0; } .mega-menu__col + .mega-menu__col { border-left: 1px solid var(--c-line); padding-left: clamp(24px, 4vw, 56px); } .mega-menu__col--intro { padding-right: clamp(24px, 4vw, 56px); } .mega-menu__label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-graphite-light); margin-bottom: 14px; } .mega-menu__desc { font-size: 14px; color: var(--c-graphite); line-height: 1.65; margin-bottom: 24px; } .mega-menu__all { font-size: 13px; font-weight: 500; color: var(--c-black); display: inline-flex; align-items: center; gap: 6px; transition: gap 0.25s var(--ease); } .mega-menu__all:hover { gap: 10px; } /* ── Items do menu ─────────────────────────────── */ .mega-menu__col--items { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; align-content: start; } .mega-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 4px; transition: background 0.2s ease; color: var(--c-black); } .mega-item:hover { background: rgba(13,13,13,0.05); } /* Ícone do cooktop no mega menu — slot de largura fixa para que todos os títulos fiquem alinhados; altura generosa para o desenho aparecer bem. object-fit contain mantém a proporção de cada SVG dentro do slot. */ .mega-item__icon { flex-shrink: 0; width: 64px; height: 58px; object-fit: contain; object-position: center; } /* Selo "Made in Germany" — usado no herói, nas páginas de produto e no rodapé */ .made-in { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; line-height: 1; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-graphite-light); } .made-in__flag { align-self: center; } .made-in__flag { width: 20px; height: 13px; border-radius: 2px; flex-shrink: 0; background: linear-gradient(to bottom, #000 0 33.34%, #dd0000 33.34% 66.67%, #ffce00 66.67% 100%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); } /* Página de produto — logo abaixo do preço */ .pinfo__made-in { margin: -8px 0 24px; } /* Rodapé (fundo escuro) */ .footer__made-in { color: rgba(247, 245, 242, 0.55); margin-top: 16px; } .mega-item strong { display: block; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; } .mega-item span { display: block; font-size: 12px; color: var(--c-graphite-light); margin-top: 1px; } .mega-item--highlight { border: 1px solid var(--c-line); margin-bottom: 4px; } .mega-item--highlight .mega-item__icon { color: var(--c-terracota); } .mega-item__icon { width: 36px; height: 36px; flex-shrink: 0; } .mega-item__icon svg { width: 100%; height: 100%; } .mega-item__icon--sm { width: 28px; height: 28px; } .mega-menu__col--extra { display: flex; flex-direction: column; gap: 2px; justify-content: flex-start; padding-top: 0; } .mega-item--compact { padding: 9px 12px; } .mega-item--compact strong { font-size: 13px; } .mega-item--compact span { font-size: 11px; } .nav__toggle { display: none; flex-direction: column; gap: 5px; padding: 12px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .nav__toggle span { display: block; width: 22px; height: 1.5px; background: var(--c-black); transition: all 0.3s ease; border-radius: 1px; } .nav__toggle--open span:first-child { transform: rotate(45deg) translate(4px, 4px); } .nav__toggle--open span:last-child { transform: rotate(-45deg) translate(4px, -4px); } /* ═══════════════════════════════════════════════ HERO ═══════════════════════════════════════════════ */ .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--c-black); } .hero__media { position: absolute; inset: 0; } .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; z-index: 2; } /* ── Marble animated placeholder ────────────────── Simula câmera lenta sobre bancada escura. Remova quando o vídeo 3D estiver disponível. ─────────────────────────────────────────────── */ .hero__video-placeholder { position: absolute; inset: 0; overflow: hidden; background: #111009; } .hero__marble { position: absolute; inset: -20%; background: radial-gradient(ellipse 120% 80% at 30% 60%, rgba(180,175,168,0.08) 0%, transparent 55%), radial-gradient(ellipse 80% 120% at 75% 20%, rgba(140,135,130,0.06) 0%, transparent 50%), linear-gradient(135deg, #1a1918 0%, #0d0c0b 40%, #141312 100%); animation: marbleDrift 18s ease-in-out infinite alternate; will-change: transform; } .hero__marble--2 { background: radial-gradient(ellipse 60% 40% at 60% 80%, rgba(160,155,150,0.07) 0%, transparent 50%), radial-gradient(ellipse 100% 60% at 10% 30%, rgba(100,97,94,0.09) 0%, transparent 55%); animation: marbleDrift2 22s ease-in-out infinite alternate; } .hero__marble--3 { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E") repeat; opacity: 0.6; animation: none; } @keyframes marbleDrift { 0% { transform: scale(1.05) translate(0%, 0%) rotate(0deg); } 33% { transform: scale(1.08) translate(-1.5%, 1%) rotate(0.3deg); } 66% { transform: scale(1.06) translate(1%, -0.5%) rotate(-0.2deg); } 100% { transform: scale(1.04) translate(-0.5%, 0.8%) rotate(0.1deg); } } @keyframes marbleDrift2 { 0% { transform: scale(1) translate(0%, 0%); opacity: 0.7; } 50% { transform: scale(1.05) translate(2%, -1.5%); opacity: 1; } 100% { transform: scale(0.98) translate(-1%, 1%); opacity: 0.5; } } .hero__bg { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,13,13,0.97) 0%, rgba(13,13,13,0.5) 40%, rgba(13,13,13,0.25) 100%); z-index: 3; } .hero__content { position: relative; z-index: 4; max-width: var(--container-w); width: 100%; margin-inline: auto; padding-inline: var(--container-pad); padding-bottom: clamp(64px, 10vw, 120px); padding-top: calc(var(--nav-h) + 60px); } .hero__overline { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(247, 245, 242, 0.45); margin-bottom: 28px; } .hero__headline { color: var(--c-white); max-width: 680px; margin-bottom: 28px; display: flex; flex-direction: column; gap: 0; font-size: clamp(40px, 5.5vw, 72px); font-weight: 500; letter-spacing: var(--track-tight); line-height: 1.05; } .hero__line { display: block; overflow: hidden; } .hero__line--italic em { color: var(--c-terracota); } .hero__sub { max-width: 460px; color: rgba(247, 245, 242, 0.55); font-size: clamp(14px, 1.2vw, 16px); line-height: 1.7; margin-bottom: 36px; } .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; } .hero__scroll { position: absolute; bottom: 40px; right: var(--container-pad); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 12px; color: rgba(247, 245, 242, 0.3); } .hero__scroll span { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; writing-mode: vertical-rl; } .hero__scroll-line { width: 1px; height: 64px; background: currentColor; transform-origin: top center; } /* ═══════════════════════════════════════════════ INTRO STATEMENT ═══════════════════════════════════════════════ */ .intro-statement { position: relative; height: 100vh; display: flex; align-items: center; background: var(--c-white); overflow: hidden; } .intro-statement__text { font-size: clamp(38px, 7.2vw, 104px); font-weight: 600; letter-spacing: var(--track-tight); line-height: 1.08; color: rgba(13, 13, 13, 0.14); max-width: min(1300px, 92vw); margin: 0 auto; text-align: center; transform-origin: center center; will-change: transform, opacity; } .word-reveal { display: inline-block; transition: color 0.5s ease; } .word-reveal--accent { color: rgba(241, 89, 42, 0.2); } .word-reveal.is-visible { color: var(--c-black); } /* Frase de destaque em degradê preto → laranja (glamour) */ .word-reveal--accent.is-visible { background: linear-gradient(100deg, #1c1c1c 0%, #f1592a 38%, #ff7a3d 68%, #ffab6b 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ═══════════════════════════════════════════════ STORY — scroll pinned storytelling, tela cheia ═══════════════════════════════════════════════ */ .story { position: relative; } .story__sticky { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; } /* Visual (lado esquerdo) */ .story__visual { position: relative; overflow: hidden; } .story__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s var(--ease); } .story__slide--active { opacity: 1; } .story__img { width: 100%; height: 100%; transform: scale(1); will-change: transform; } /* Indicadores */ .story__progress { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 2; } .story__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(247,245,242,0.3); transition: background 0.3s, transform 0.3s; cursor: pointer; } .story__dot--active { background: var(--c-white); transform: scale(1.4); } /* Textos (lado direito) */ .story__texts { display: flex; align-items: center; padding: clamp(40px, 6vw, 96px) clamp(40px, 5vw, 96px); background: var(--c-white); position: relative; overflow: hidden; } .story__text { position: absolute; opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); max-width: 480px; pointer-events: none; } .story__text--active { opacity: 1; transform: translateY(0); position: relative; pointer-events: auto; } .story__text h2 { margin-bottom: 20px; } .story__text p { margin-bottom: 16px; } .story__text .link-arrow { margin-top: 12px; } /* Navegação mobile (setas + dica de deslizar) — só existe no mobile, o desktop usa o scroll-jacking pinado (ver @media 768px mais abaixo). */ .story__mobile-nav { display: none; } /* Spacer que define quanto scroll a animação consome */ .story__spacer { height: 168vh; /* 4 slides × 42vh cada — 1 movimento já avança */ } /* ═══════════════════════════════════════════════ STATS — um número gigante por ideia, estilo Apple ═══════════════════════════════════════════════ */ .stats { padding-block: var(--section-gap); } .stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(56px, 9vw, 128px); justify-items: center; max-width: 1200px; margin-inline: auto; } .stat { display: flex; flex-direction: column; align-items: center; text-align: center; } .stat__num { display: inline-flex; align-items: flex-start; font-size: clamp(90px, 12.5vw, 190px); font-weight: 500; letter-spacing: var(--track-tight); line-height: 0.9; color: var(--c-black); } /* prefixo (+) e sufixo (mm, %) em laranja, elevados como sobrescrito */ .stat__num em { font-style: normal; font-weight: 500; font-size: 0.42em; line-height: 1; color: var(--c-orange); margin-top: 0.18em; margin-left: 0.06em; } .stat__pre { margin-left: 0; margin-right: 0.04em; } .stat__label { margin-top: 20px; max-width: 320px; font-size: clamp(15px, 1.4vw, 17px); color: var(--c-graphite-light); } /* ═══════════════════════════════════════════════ CHAPTER — divisor de seção estilo Apple (quebra preta + laranja) ═══════════════════════════════════════════════ */ .chapter { background: var(--c-white); margin-top: clamp(32px, 5vw, 64px); min-height: clamp(180px, 22vh, 260px); display: flex; align-items: center; justify-content: center; text-align: center; } .chapter__inner { display: flex; justify-content: center; } .chapter__title { color: var(--c-black); font-size: clamp(28px, 4vw, 54px); line-height: 1.12; max-width: 780px; } .chapter__title em { color: var(--c-orange); font-style: normal; } /* ═══════════════════════════════════════════════ BENEFÍCIOS — carrossel horizontal livre, estilo Apple ═══════════════════════════════════════════════ */ .beneficios { position: relative; background: var(--c-white); padding-block: clamp(16px, 2vw, 24px) clamp(48px, 7vw, 88px); overflow: hidden; } .beneficios__track { display: flex; gap: 24px; align-items: stretch; /* todos os cards com a mesma altura (simetria) */ /* Padding lateral = metade da viewport menos meio card, para que o card ativo (inclusive o primeiro e o último) fique sempre centralizado. */ padding-inline: calc(50vw - min(19vw, 175px)); scroll-padding-inline: calc(50vw - min(19vw, 175px)); /* Folga vertical para o anel laranja + elevação do card ativo não serem recortados pelo scroll do carrossel (overflow-x: auto recorta na vertical). */ padding-block: 22px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .beneficios__track::-webkit-scrollbar { display: none; } /* Card único e coeso: imagem no topo (sem recorte) + texto no mesmo bloco. O destaque do card ativo é no card inteiro (anel laranja + elevação). */ .bcard { flex-shrink: 0; scroll-snap-align: center; width: min(38vw, 350px); display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-rest); opacity: 0.62; transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), opacity 0.45s var(--ease); } .bcard--active { opacity: 1; transform: translateY(-6px) scale(1.02); box-shadow: 0 0 0 2px var(--c-orange), var(--shadow-lift); } .bcard__media { aspect-ratio: 4 / 3; background-size: cover; background-position: center; transition: transform 0.6s var(--ease); } .bcard--active .bcard__media { transform: scale(1.05); } .bcard__text { flex: 1; display: flex; flex-direction: column; padding: 22px 24px 26px; } .bcard__num { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-orange); margin-bottom: 12px; } .bcard__text h2 { font-size: clamp(19px, 1.7vw, 24px); color: var(--c-black); margin-bottom: 10px; } .bcard__text p { font-size: 14px; line-height: 1.55; color: var(--c-graphite-light); margin-bottom: 12px; } .bcard__text .link-arrow { color: var(--c-orange); font-size: 13px; margin-top: auto; } .beneficios__nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: clamp(20px, 3vw, 32px); } .beneficios__dots { display: flex; align-items: center; gap: 8px; } .bdot { width: 6px; height: 6px; border-radius: 50%; background: rgba(13, 13, 13, 0.15); transition: background 0.3s var(--ease), transform 0.3s var(--ease); } .bdot:hover { background: rgba(13, 13, 13, 0.35); transform: scale(1.3); } .bdot--active { background: var(--c-orange); transform: scale(1.5); } .bdot--active:hover { background: var(--c-orange); } .bnav-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--c-line); color: var(--c-black); display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.2s var(--ease); } .bnav-btn svg { width: 16px; height: 16px; } .bnav-btn:hover { background: rgba(13, 13, 13, 0.05); border-color: rgba(13, 13, 13, 0.3); transform: scale(1.08); } .bnav-btn:active:not(:disabled) { transform: scale(0.94); } .bnav-btn:disabled { opacity: 0.3; pointer-events: none; } /* ═══════════════════════════════════════════════ MODELOS ═══════════════════════════════════════════════ */ .modelos { padding-block: var(--section-gap); } .modelos__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); margin-bottom: clamp(16px, 2vw, 28px); } /* Card base — bloco arredondado com respiro */ .modelo__card { background: var(--c-warm-white); position: relative; overflow: hidden; display: flex; flex-direction: column; border-radius: var(--radius-card); box-shadow: var(--shadow-rest); transition: background 0.3s ease, transform 0.4s var(--ease), box-shadow 0.4s var(--ease); } .modelo__card:hover { background: #e9e3da; transform: translateY(-4px); box-shadow: var(--shadow-lift); } /* Borda inferior animada */ .modelo__card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--c-terracota); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease); } .modelo__card:hover::after { transform: scaleX(1); } /* Imagem de fundo — ocupa parte superior do card */ .modelo__img { height: 220px; position: relative; overflow: hidden; flex-shrink: 0; background-color: var(--c-warm-white); } /* Escala leve no hover */ .modelo__img { transition: transform 0.6s var(--ease); } .modelo__card:hover .modelo__img { transform: scale(1.03); } /* Info */ .modelo__info { padding: 8px 28px 28px; flex: 1; display: flex; flex-direction: column; } .modelo__header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; } .modelo__num { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--c-terracota); text-transform: uppercase; } .modelo__num--accent { color: var(--c-terracota); font-size: 13px; } .modelo__info h3 { font-size: 20px; } .modelo__info p { font-size: 13px; line-height: 1.6; color: var(--c-graphite); margin-bottom: 14px; flex: 1; } /* Specs inline */ .modelo__specs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .modelo__specs span { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; padding: 4px 10px; border: 1px solid var(--c-line); border-radius: 20px; color: var(--c-graphite-light); background: rgba(255,255,255,0.6); } .modelo__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 4px; } /* CTA principal — botão destacado. O card inteiro é clicável via overlay (padrão "stretched link"): o ::before cobre todo o card (o link fica em posição estática de propósito, para o overlay se ancorar no .modelo__card, que é position:relative). O ::after é a setinha visível. */ .modelo__cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; background: var(--c-graphite); color: #fff; font-size: 13px; font-weight: 500; letter-spacing: 0.01em; transition: background 0.25s var(--ease), transform 0.25s var(--ease); } .modelo__cta::after { content: '→'; transition: transform 0.3s var(--ease); } .modelo__cta::before { content: ''; position: absolute; inset: 0; z-index: 1; } .modelo__card:hover .modelo__cta { background: var(--c-terracota); } .modelo__card:hover .modelo__cta::after { transform: translateX(4px); } .modelo__card--featured .modelo__cta { background: var(--c-orange); } /* Ação secundária ("Ficha técnica") precisa ficar acima do overlay do card para continuar clicável de forma independente. */ .modelo__ficha { position: relative; z-index: 2; } /* Card destaque (3 zonas) */ /* Destaque agora é só o selo laranja + um anel laranja sutil (card claro como os demais, para ficar uniforme e sem a linha escura no rodapé). */ .modelo__card--featured { box-shadow: 0 0 0 2px var(--c-orange), var(--shadow-rest); } .modelo__card--featured:hover { box-shadow: 0 0 0 2px var(--c-orange), var(--shadow-lift); } .modelo__badge { position: absolute; top: 14px; right: 14px; z-index: 2; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-white); background: var(--c-orange); padding: 6px 14px; border-radius: 999px; box-shadow: 0 4px 14px rgba(241, 89, 42, 0.4); } .modelos__kit { display: grid; grid-template-columns: 1fr 1.8fr; min-height: 280px; overflow: hidden; border-radius: var(--radius-card); background: var(--c-black); color: var(--c-white); } .modelos__kit-img { position: relative; overflow: hidden; /* Zoom leve para destacar a panela (recorte pelo overflow do container) */ transform: scale(1.15); } .modelos__kit-content { padding: clamp(36px, 4vw, 56px) clamp(36px, 5vw, 72px); display: flex; flex-direction: column; justify-content: center; } .modelos__kit-content h3 { font-size: clamp(20px, 2.2vw, 28px); color: var(--c-white); margin-bottom: 12px; } .modelos__kit-content p { color: rgba(247,245,242,0.6); font-size: 15px; max-width: 480px; } .modelos__kit-content .link-arrow { margin-top: 20px; color: var(--c-beige); } .modelos__kit-content .link-arrow:hover { color: var(--c-white); } /* ═══════════════════════════════════════════════ LINHA DE PRODUTOS — cards com placeholder de foto ═══════════════════════════════════════════════ */ .linha__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: clamp(16px, 2vw, 28px); } .linha-card { display: flex; flex-direction: column; color: inherit; } .linha-card__media { transition: transform 0.4s var(--ease); } a.linha-card:hover .linha-card__media { transform: translateY(-4px); } a.linha-card:hover h3 { color: var(--c-orange); } .linha-card__media { aspect-ratio: 4 / 3; border-radius: var(--radius-card); background: var(--c-warm-white); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .linha-card__ph { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-graphite-light); opacity: 0.6; } .linha-card h3 { font-size: 16px; margin-bottom: 4px; color: var(--c-black); transition: color 0.2s; } .linha-card p { font-size: 13px; color: var(--c-graphite-light); } /* ═══════════════════════════════════════════════ PROJETOS ═══════════════════════════════════════════════ */ .projetos { background: var(--c-black); color: var(--c-white); padding-block: clamp(48px, 7vw, 96px); } .projetos__header { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 40px; } .projetos__header h2 { color: var(--c-white); } .projetos__header .label { color: var(--c-terracota); } .projetos__sub { max-width: 360px; color: rgba(247,245,242,0.45); font-size: 15px; } .projetos__filters { display: flex; gap: 4px; margin-bottom: 20px; flex-wrap: wrap; } .filter { padding: 9px 18px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(247,245,242,0.35); border: 1px solid rgba(247,245,242,0.1); border-radius: 2px; transition: all 0.25s ease; } .filter:hover { color: var(--c-white); border-color: rgba(247,245,242,0.3); } .filter.active { background: var(--c-white); color: var(--c-black); border-color: var(--c-white); } .projetos__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; } .projeto__item { overflow: hidden; } .projeto__item--wide { grid-column: span 2; } .projeto__item--tall { grid-row: span 2; } .projeto__img { width: 100%; height: 100%; min-height: 260px; position: relative; overflow: hidden; transition: transform 0.6s var(--ease); } .projeto__item:hover .projeto__img { transform: scale(1.03); } .projeto__overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 20px; background: linear-gradient(to top, rgba(13,13,13,0.75) 0%, transparent 55%); opacity: 0; transition: opacity 0.35s ease; } .projeto__img:hover .projeto__overlay { opacity: 1; } .projeto__overlay span { font-size: 12px; font-weight: 500; color: var(--c-white); letter-spacing: 0.06em; } /* ═══════════════════════════════════════════════ ESPECIFICAÇÃO ═══════════════════════════════════════════════ */ .especificacao { background: var(--c-black); color: var(--c-white); padding-block: clamp(48px, 7vw, 96px); } .especificacao__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 8vw, 120px); align-items: center; } .especificacao__text h2 { color: var(--c-white); } .especificacao__text p { color: rgba(247,245,242,0.6); margin-bottom: 24px; } .spec__list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 36px; } .spec__list li { display: flex; align-items: center; gap: 14px; font-size: 14px; color: rgba(247,245,242,0.7); } .spec__list li::before { content: ''; display: block; width: 20px; height: 1px; background: var(--c-terracota); flex-shrink: 0; } .especificacao__img { aspect-ratio: 4/5; border-radius: var(--radius-card); overflow: hidden; } /* ═══════════════════════════════════════════════ FULLBLEED BANNER — faixa de imagem entre seções ═══════════════════════════════════════════════ */ .fullbleed-banner { position: relative; height: clamp(320px, 45vw, 560px); overflow: hidden; } .fullbleed-banner__img { position: absolute; inset: -10%; background-size: cover; background-position: center; transition: transform 0.1s linear; } .fullbleed-banner__overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(13,13,13,0.35) 0%, rgba(13,13,13,0.15) 40%, rgba(13,13,13,0.55) 100% ); } .fullbleed-banner__caption { position: absolute; bottom: clamp(32px, 5vw, 56px); left: clamp(24px, 6vw, 80px); color: rgba(247,245,242,0.85); } .fullbleed-banner__caption p { font-size: clamp(18px, 2.2vw, 28px); font-weight: 300; letter-spacing: var(--track-tight); line-height: 1.35; margin: 0; } /* ═══════════════════════════════════════════════ ATENDIMENTO — centrado, limpo ═══════════════════════════════════════════════ */ .atendimento { padding-block: clamp(48px, 7vw, 96px); background: var(--c-warm-white); } .atendimento .section__header { margin-bottom: clamp(40px, 5vw, 64px); } .atendimento .section__header h2 { font-size: clamp(24px, 3vw, 40px); } /* Dois cards side-by-side */ .atendimento__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; max-width: 960px; margin-inline: auto; } .atendimento__card { background: var(--c-white); padding: clamp(32px, 4vw, 48px); } .atendimento__icon { width: 36px; height: 36px; margin-bottom: 20px; color: var(--c-terracota); } .atendimento__icon svg { width: 100%; height: 100%; } .atendimento__card h3 { font-size: 18px; margin-bottom: 10px; } .atendimento__card > p { margin-bottom: 24px; font-size: 14px; line-height: 1.6; } /* Form */ .contact-form { display: flex; flex-direction: column; gap: 14px; } .form__group { display: flex; flex-direction: column; gap: 5px; } .form__group label { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-graphite-light); } .form__group input, .form__group select, .form__group textarea { font-family: var(--font); font-size: 14px; padding: 11px 14px; border: 1px solid var(--c-line); border-radius: 2px; background: var(--c-warm-white); color: var(--c-black); transition: border-color 0.2s ease, background 0.2s ease; outline: none; -webkit-appearance: none; } .form__group input:focus, .form__group select:focus, .form__group textarea:focus { border-color: var(--c-black); background: var(--c-white); } .form__group textarea { resize: vertical; min-height: 88px; } .field--error { border-color: var(--c-terracota) !important; } .form__note { font-size: 11px; color: var(--c-graphite-light); text-align: center; margin-top: 4px; } /* ═══════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════ */ .footer { background: var(--c-black); color: var(--c-white); padding-top: clamp(28px, 4vw, 48px); padding-bottom: 22px; } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 56px); margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid rgba(247,245,242,0.08); } .footer__logo { width: 210px; max-width: 52vw; height: auto; margin-bottom: 8px; } .footer__brand p { font-size: 13px; color: rgba(247,245,242,0.35); max-width: 240px; } .footer__nav { display: flex; flex-direction: column; gap: 12px; } .footer__nav h4 { color: rgba(247,245,242,0.35); margin-bottom: 4px; font-size: 10px; } .footer__nav a, .footer__contact a { font-size: 14px; color: rgba(247,245,242,0.55); transition: color 0.2s; } .footer__nav a:hover, .footer__contact a:hover { color: var(--c-white); } .footer__contact { display: flex; flex-direction: column; gap: 12px; } .footer__contact h4 { color: rgba(247,245,242,0.35); margin-bottom: 4px; font-size: 10px; } .footer__social { display: flex; gap: 10px; margin-top: 6px; } .footer__social-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(247,245,242,0.18); color: rgba(247,245,242,0.65); transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s; } .footer__social-btn svg { width: 20px; height: 20px; } .footer__social-btn:hover { color: var(--c-white); border-color: var(--c-orange); background: var(--c-orange); transform: translateY(-2px); } .footer__legal { display: flex; flex-wrap: wrap; gap: 8px 24px; } .footer__legal a { font-size: 12px; color: rgba(247,245,242,0.45); transition: color 0.2s; } .footer__legal a:hover { color: var(--c-white); } .footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 12px; } .footer__bottom p { font-size: 12px; color: rgba(247,245,242,0.25); } .footer__credit { font-size: 12px; color: rgba(247,245,242,0.25); transition: color 0.2s; } .footer__credit:hover { color: rgba(247,245,242,0.55); } /* ═══════════════════════════════════════════════ CTA FLUTUANTE ═══════════════════════════════════════════════ */ .floating-cta { position: fixed; right: clamp(24px, 6vw, 96px); bottom: clamp(20px, 3.6vw, 40px); z-index: 500; display: inline-flex; align-items: center; gap: 11px; padding: 7px 7px 7px 20px; background: var(--c-black); color: var(--c-white); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; border-radius: 980px; box-shadow: 0 8px 28px rgba(13, 13, 13, 0.28); cursor: pointer; opacity: 0; transform: translateY(14px); pointer-events: none; transition: background 0.3s var(--ease), transform 0.3s var(--ease), opacity 0.3s var(--ease), box-shadow 0.3s var(--ease); } .floating-cta.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; animation: ctaBreathe 3.6s ease-in-out infinite; } .floating-cta.is-visible::before { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(241, 89, 42, 0.45); animation: ctaPing 3.6s ease-out infinite; pointer-events: none; } .floating-cta:hover { background: var(--c-graphite); animation-play-state: paused; transform: translateY(-3px) scale(1.03); } .floating-cta:hover::before { animation-play-state: paused; opacity: 0; } @keyframes ctaBreathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(0) scale(1.035); } } @keyframes ctaPing { 0% { box-shadow: 0 0 0 0 rgba(241, 89, 42, 0.45); } 70% { box-shadow: 0 0 0 14px rgba(241, 89, 42, 0); } 100% { box-shadow: 0 0 0 0 rgba(241, 89, 42, 0); } } .floating-cta__icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-orange); color: var(--c-white); flex-shrink: 0; transition: transform 0.3s var(--ease); } .floating-cta__icon svg { width: 16px; height: 16px; } .floating-cta:hover .floating-cta__icon { transform: translateX(3px); } @media (max-width: 640px) { .floating-cta { padding: 8px 8px 8px 22px; font-size: 13px; } .floating-cta__icon { width: 32px; height: 32px; } .floating-cta__icon svg { width: 16px; height: 16px; } } @media (prefers-reduced-motion: reduce) { .floating-cta.is-visible { animation: none; } .floating-cta.is-visible::before { animation: none; content: none; } } /* ═══════════════════════════════════════════════ PLACEHOLDERS (substituir por imagens reais) ═══════════════════════════════════════════════ */ .story__img--placeholder, .beneficio-row__img--placeholder, .projeto__img--placeholder, .especificacao__img--placeholder { background: linear-gradient(145deg, #e4ddd5 0%, #cdc4ba 100%); display: flex; align-items: flex-end; } .placeholder-label { font-size: 10px; letter-spacing: 0.06em; color: var(--c-graphite-light); padding: 16px 20px; text-transform: uppercase; } /* ═══════════════════════════════════════════════ NAVEGAÇÃO — MOBILE E TABLET (até 1024px) O menu horizontal do desktop não cabe em tablets: entre 769px e ~1000px (iPad Air 820px, iPad Pro 11" 834px) os links estouravam a barra, jogando a logo para fora e quebrando "Para Arquitetos" em duas linhas. Por isso o menu hambúrguer vale até 1024px, cobrindo todos os iPads em retrato. O JS que trata o botão "Modelos" usa o mesmo limite (ver src/shared.js). ═══════════════════════════════════════════════ */ @media (max-width: 1024px) { :root { --nav-h: 52px; } /* Com o menu aberto, a barra fica opaca (o blur do pseudo é trocado por um fundo sólido) para dar contraste ao botão de fechar sobre o painel branco. */ .nav:has(.nav__links--open)::before { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255, 255, 255, 0.92); } /* Mega menu desktop é hover-only e não cabe em telas pequenas, some no mobile */ .mega-menu { display: none !important; } .nav__links { display: none; position: fixed; top: calc(var(--nav-h) + 28px); left: clamp(16px, 5vw, 24px); right: clamp(16px, 5vw, 24px); bottom: 16px; background: var(--c-white); border-radius: var(--radius-panel); box-shadow: var(--shadow-lift); flex-direction: column; justify-content: center; align-items: center; gap: 28px; z-index: 99; overflow-y: auto; } .nav__links--open { display: flex; } .nav__link { color: var(--c-black); font-size: 20px; font-weight: 400; } .nav__link--spec { font-size: 14px; } .nav__link--cta { background: var(--c-black); color: var(--c-white); } .nav__chevron { display: none; } .nav__toggle { display: flex; } .nav__lang { padding: 3px; gap: 4px; } .nav__lang-btn { font-size: 10px; padding: 4px 7px; } .nav__lang-sep { display: none; } } /* ═══════════════════════════════════════════════ MOBILE — 768px ═══════════════════════════════════════════════ */ @media (max-width: 768px) { /* Story: empilha no mobile, sem pin (scroll-jacking é ruim em touch) */ .story__sticky { grid-template-columns: 1fr; height: auto; position: relative; } .story__visual { height: 68vw; min-height: 260px; position: relative; } .story__slide { position: absolute; } .story__spacer { height: 0; } .story__texts { position: relative; min-height: 280px; padding: 32px 24px 8px; } /* Setas + dica de deslizar — a troca entre as 4 informações (Conceito, Como funciona, Resultado, Na prática) não depende mais de scroll-jacking no mobile: dá pra tocar nas setas, nos pontinhos ou deslizar o dedo. */ .story__mobile-nav { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 4px 24px 28px; } .story__mobile-hint { font-size: 12px; color: var(--c-graphite-light); letter-spacing: 0.01em; } .story__dot { cursor: pointer; } /* Stats: 1 coluna no mobile pra os números grandes respirarem */ .stats__grid { grid-template-columns: 1fr; gap: 40px; } .stat { align-items: center; text-align: center; } .stat__label { margin-inline: auto; } /* Benefícios: carrossel mais compacto no mobile */ .beneficios { padding-block: 16px 24px; } .beneficios__track { scroll-snap-type: x mandatory; padding-inline: calc(50vw - 40vw); scroll-padding-inline: calc(50vw - 40vw); gap: 16px; } .bcard { width: 80vw; opacity: 1; } .bcard__media { aspect-ratio: 4/3; } .modelos__grid { grid-template-columns: 1fr 1fr; } .projetos__header { flex-direction: column; align-items: flex-start; } .projetos__sub { max-width: 100%; } .projetos__grid { grid-template-columns: 1fr 1fr; } .projeto__item--wide { grid-column: span 2; } .projeto__item--tall { grid-row: span 1; } .especificacao__grid { grid-template-columns: 1fr; } .especificacao__img { aspect-ratio: 4/3; } .atendimento__grid { grid-template-columns: 1fr; } .atendimento__card { padding: 28px 24px; } .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } .footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; } } @media (max-width: 480px) { .hero__actions { flex-direction: column; align-items: flex-start; } .modelos__grid { grid-template-columns: 1fr; } .projetos__grid { grid-template-columns: 1fr; } .projeto__item--wide { grid-column: span 1; } .footer__grid { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════ BOTÃO — variante ghost para fundo claro ═══════════════════════════════════════════════ */ .btn--ghost-dark { border: 1px solid var(--c-line); color: var(--c-black); } .btn--ghost-dark:hover { border-color: var(--c-black); background: rgba(13,13,13,0.04); } /* ═══════════════════════════════════════════════ PÁGINAS DE PRODUTO — estilo Electrolux ═══════════════════════════════════════════════ */ .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--c-graphite-light); margin-bottom: clamp(28px, 4vw, 48px); } .breadcrumb a:hover { color: var(--c-black); } .breadcrumb [aria-current] { color: var(--c-black); font-weight: 500; } .pproduto__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; } /* Galeria */ .pgallery__main { aspect-ratio: 4/3; border-radius: var(--radius-card); overflow: hidden; background: var(--c-warm-white); margin-bottom: 16px; } .pgallery__main img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.2s ease; } @media (hover: hover) { .pgallery__main.is-zooming img { transition: transform 0.08s ease-out; } } .pgallery__thumbs { display: flex; gap: 12px; } .pgallery__thumb { width: 84px; height: 84px; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid transparent; opacity: 0.6; transition: opacity 0.2s ease, border-color 0.2s ease; flex-shrink: 0; } .pgallery__thumb { background: var(--c-warm-white); } .pgallery__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; } .pgallery__thumb:hover { opacity: 0.85; } .pgallery__thumb.is-active { opacity: 1; border-color: var(--c-black); } /* Info */ .pinfo { padding-top: 4px; } .pinfo .modelo__num { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--c-terracota); text-transform: uppercase; margin-bottom: 12px; } .pinfo h1 { font-size: clamp(30px, 3.4vw, 44px); margin-bottom: 12px; } .pinfo__tagline { font-size: 17px; color: var(--c-graphite); margin-bottom: 16px; } .pinfo__price { font-size: clamp(26px, 3vw, 34px); font-weight: 600; letter-spacing: var(--track-tight); color: var(--c-black); margin-bottom: 24px; } .pinfo__desc { font-size: 15px; line-height: 1.7; color: var(--c-graphite-light); margin-bottom: 32px; } .pinfo__desc p { margin-bottom: 12px; } .pinfo__desc p:first-child { color: var(--c-graphite); font-weight: 500; } .pinfo__desc ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; } .pinfo__desc li { position: relative; padding-left: 18px; } .pinfo__desc li::before { content: ''; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--c-orange); } .pinfo__actions { display: flex; flex-wrap: wrap; gap: 12px; } /* Specs + dimensões */ .pspecs { padding-block: clamp(48px, 7vw, 96px); border-top: 1px solid var(--c-line); } .pspecs__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; } .pspecs__download { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(24px, 4vw, 40px); padding-top: clamp(24px, 4vw, 40px); border-top: 1px solid var(--c-line); } .pspecs .label { display: block; margin-bottom: 20px; } .pspecs__table + .label { margin-top: 40px; } .pspecs__table { width: 100%; border-collapse: collapse; } .pspecs__table th, .pspecs__table td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--c-line); font-size: 14px; } .pspecs__table th { font-weight: 500; color: var(--c-graphite); width: 45%; } .pspecs__table td { color: var(--c-graphite-light); } .pspecs__table--dim th:not(:first-child), .pspecs__table--dim td { text-align: center; } /* Nota de materiais recomendados (só cooktops) — compacta e centralizada */ .pspecs__note { grid-column: 1 / -1; margin: clamp(24px, 4vw, 40px) auto 0; max-width: 460px; padding: 22px 24px 20px; border-radius: var(--radius-card); background: var(--c-warm-white); border: 1px solid rgba(241, 89, 42, 0.18); text-align: center; } .pspecs__note-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c-orange); color: #fff; margin-bottom: 12px; } .pspecs__note-icon svg { width: 22px; height: 22px; } .pspecs__note-title { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-graphite); margin-bottom: 12px; } .pspecs__note-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .pspecs__note-list li { font-size: 13px; line-height: 1.5; color: var(--c-graphite-light); } /* ═══════════════════════════════════════════════ PÁGINA DE DOCUMENTO (política/termos) ═══════════════════════════════════════════════ */ .pdoc { padding-top: calc(var(--nav-h) + clamp(32px, 5vw, 64px)); } .pdoc__container { max-width: 780px; margin-inline: auto; padding-inline: var(--container-pad); } .pdoc__title { font-size: clamp(30px, 5vw, 52px); margin-top: 14px; } .pdoc__updated { margin-top: 12px; font-size: 13px; color: var(--c-graphite-light); } .pdoc__body { margin-top: clamp(28px, 4vw, 48px); } .pdoc__body h2 { font-size: clamp(20px, 2.4vw, 26px); margin-top: 40px; margin-bottom: 12px; } .pdoc__body h3 { font-size: clamp(16px, 1.8vw, 18px); margin-top: 24px; margin-bottom: 8px; color: var(--c-graphite); } .pdoc__body p { color: var(--c-graphite); line-height: 1.7; margin-bottom: 14px; } .pdoc__body ul, .pdoc__body ol { margin: 0 0 16px 20px; } .pdoc__body li { color: var(--c-graphite); line-height: 1.6; margin-bottom: 6px; } .pdoc__body a { color: var(--c-orange); text-decoration: underline; } .pdoc__body a:hover { color: var(--c-black); } /* ═══════════════════════════════════════════════ SHOWROOMS E PARCEIROS ═══════════════════════════════════════════════ */ .pparceiros-hero { padding-top: calc(var(--nav-h) + clamp(40px, 6vw, 80px)); padding-bottom: 0; } /* Cards logo abaixo do título/subtítulo e CTA mais próximo do fim */ .pparc-block { padding-block: clamp(20px, 3vw, 32px); } .pparc-cta { padding-top: clamp(28px, 4vw, 48px); } .pparceiros-hero__title { font-size: clamp(34px, 6vw, 64px); margin-top: 16px; } .pparceiros-hero__sub { margin-top: 20px; max-width: 620px; color: var(--c-graphite-light); font-size: clamp(16px, 1.8vw, 18px); } .section__header--left { text-align: left; margin-inline: 0; max-width: 620px; } .parc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: clamp(18px, 2vw, 28px); margin-top: clamp(20px, 3vw, 28px); } .parc-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-card); overflow: hidden; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); } .parc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); } .parc-card__logo { display: flex; align-items: center; justify-content: center; height: 128px; padding: 24px 28px; background: var(--c-warm-white); border-bottom: 1px solid var(--c-line); } .parc-card__logo img { max-height: 72px; max-width: 80%; object-fit: contain; } .parc-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; } .parc-card__name { font-size: 19px; color: var(--c-black); margin-bottom: 5px; } .parc-card__city { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-orange); font-weight: 600; } .parc-card__addr { margin-top: 14px; font-size: 13.5px; line-height: 1.55; color: var(--c-graphite-light); } .parc-card__foot { margin-top: auto; padding-top: 18px; display: flex; flex-direction: column; gap: 10px; } .parc-card__contact { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--c-black); transition: color 0.2s; } .parc-card__contact svg { width: 16px; height: 16px; color: var(--c-orange); flex-shrink: 0; } .parc-card__contact:hover { color: var(--c-orange); } .parc-card__site { font-size: 13px; color: var(--c-orange); } .parc-card__site:hover { text-decoration: underline; } /* ═══════════════════════════════════════════════ PÁGINA DE MODELOS (/modelos/) — reaproveita .mega-item (ícone + título + descrição) fora do contexto do mega menu. ═══════════════════════════════════════════════ */ .pmodelos-block { padding-block: clamp(20px, 3vw, 32px); } .pmodelos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(12px, 1.5vw, 20px); margin-top: clamp(20px, 3vw, 28px); } .pmodelos-grid .mega-item { border: 1px solid var(--c-line); border-radius: var(--radius-card); padding: 22px; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } .pmodelos-grid .mega-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); } .pmodelos-grid .mega-item__icon { width: 56px; height: 50px; } .pmodelos-line { padding-block: clamp(20px, 3vw, 32px); border-top: 1px solid var(--c-line); } .pmodelos-line__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: clamp(10px, 1.5vw, 16px); margin-top: clamp(16px, 2vw, 20px); } .pmodelos-line__grid .mega-item--compact { border: 1px solid var(--c-line); border-radius: var(--radius-card); } /* ── Na mídia (embeds de perfil do Instagram) ─────── */ .pmidia { padding-top: clamp(20px, 3vw, 32px); } .insta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: clamp(18px, 2vw, 28px); } .insta-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-card); overflow: hidden; } .insta-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--c-line); } .insta-card__frame { position: relative; width: 100%; height: 540px; background: var(--c-warm-white); } .insta-card__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .insta-card__handle { font-size: 14px; font-weight: 600; color: var(--c-black); } .btn--sm { padding: 9px 18px; font-size: 13px; } /* ── Mini faixa "InvisaCook na mídia" (antes do rodapé) ── */ .media-band { background: var(--c-orange); color: #fff; padding-block: clamp(14px, 2vw, 22px); } .media-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; } .media-band__icon { display: inline-flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; } .media-band__icon svg { width: 22px; height: 22px; } .media-band__text { font-size: clamp(14px, 1.5vw, 16px); font-weight: 500; margin: 0; } .media-band__btn { background: var(--c-black); color: #fff; padding: 9px 18px; font-size: 13px; } .media-band__btn:hover { background: #000; transform: translateY(-2px); } .pparc-cta { text-align: center; } .pparc-cta h2 { font-size: clamp(26px, 4vw, 40px); } .pparc-cta p { margin: 16px auto 28px; max-width: 520px; color: var(--c-graphite-light); } /* Imagem full-bleed */ .pfullbleed { width: 100%; height: clamp(280px, 40vw, 560px); overflow: hidden; } .pfullbleed img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Comparativo */ .pcompare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .pcompare__table { width: 100%; min-width: 720px; border-collapse: collapse; } .pcompare__table th, .pcompare__table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--c-line); font-size: 13px; white-space: nowrap; } .pcompare__table th { font-weight: 500; color: var(--c-graphite); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; } .pcompare__table td { color: var(--c-graphite-light); } .pcompare__row--current { background: rgba(241, 89, 42, 0.08); } .pcompare__row--current td, .pcompare__row--current strong { color: var(--c-black); } .pcompare__row--current strong { color: var(--c-orange); } .pcompare__row--current td:first-child { box-shadow: inset 3px 0 0 var(--c-orange); } @media (max-width: 768px) { .pproduto__grid { grid-template-columns: 1fr; gap: 32px; } .pspecs__grid { grid-template-columns: 1fr; gap: 40px; } .pgallery__main { aspect-ratio: 1/1; } } /* ═══════════════════════════════════════════════ LOJA / E-COMMERCE ═══════════════════════════════════════════════ */ body[data-page="shop"] { background: var(--c-white); } .btn--shop-primary { background: var(--c-orange); color: #fff; } .btn--shop-primary:hover { background: var(--c-black); transform: translateY(-1px); } /* Header */ .shop-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.92); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border-bottom: 1px solid var(--c-line); } .shop-header__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: var(--container-w); margin-inline: auto; padding: 7px clamp(16px, 4vw, 48px); border-bottom: 1px solid var(--c-line); font-size: 12px; } .shop-header__back { color: var(--c-graphite-light); } .shop-header__back:hover { color: var(--c-black); } .shop-header__back::before { content: '← '; } .shop-header__main { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 40px); max-width: var(--container-w); margin-inline: auto; padding: 14px clamp(16px, 4vw, 48px); } .shop-header__logo { flex-shrink: 0; } .shop-header__logo img { height: 38px; width: auto; filter: brightness(0); display: block; } .shop-search { width: clamp(280px, 42vw, 520px); display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 44px; background: var(--c-warm-white); border-radius: 980px; border: 1px solid transparent; transition: border-color 0.2s ease, background 0.2s ease; } .shop-search:focus-within { border-color: var(--c-line); background: #fff; } .shop-search svg { width: 18px; height: 18px; color: var(--c-graphite-light); flex-shrink: 0; } .shop-search input { flex: 1; background: none; border: none; outline: none; font-size: 14px; color: var(--c-black); } .shop-cart-btn { position: relative; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--c-black); flex-shrink: 0; transition: background 0.2s ease; } .shop-cart-btn:hover { background: var(--c-warm-white); } .shop-cart-btn svg { width: 22px; height: 22px; } .shop-cart-btn__count { position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 980px; background: var(--c-orange); color: #fff; font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.5); transition: opacity 0.2s ease, transform 0.2s var(--ease); } .shop-cart-btn__count.is-visible { opacity: 1; transform: scale(1); } .shop-catnav { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 36px); max-width: var(--container-w); margin-inline: auto; padding: 0 clamp(16px, 4vw, 48px) 12px; overflow-x: auto; scrollbar-width: none; } .shop-catnav::-webkit-scrollbar { display: none; } .shop-catnav a { font-size: 13px; font-weight: 500; color: var(--c-graphite); white-space: nowrap; transition: color 0.2s ease; } .shop-catnav a:hover { color: var(--c-orange); } .shop-catnav__hot { color: var(--c-orange) !important; } /* Banner */ .shop-main { max-width: 1280px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 48px); } .shop-banner { position: relative; margin-top: clamp(20px, 3vw, 32px); min-height: clamp(280px, 40vw, 460px); border-radius: var(--radius-card); overflow: hidden; background: var(--c-black); display: flex; align-items: center; } .shop-banner__media { position: absolute; inset: 0; background: linear-gradient(to right, rgba(13,13,13,0.78) 0%, rgba(13,13,13,0.45) 42%, rgba(13,13,13,0.12) 100%), url('/images/banner-ecommerce.jpg') center / cover no-repeat; } .shop-banner__content { position: relative; z-index: 2; padding: clamp(28px, 5vw, 64px); color: #fff; } .shop-banner__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.9; } .shop-banner__title { font-size: clamp(28px, 4vw, 52px); margin: 14px 0 24px; color: #fff; } /* Sections + grid */ .shop-section { padding-block: clamp(40px, 6vw, 72px); } .shop-section__title { font-size: clamp(22px, 2.6vw, 32px); margin-bottom: clamp(20px, 3vw, 32px); } .shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: clamp(16px, 2vw, 28px); } .shop-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-card); overflow: hidden; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } .shop-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); } .shop-card__badge { position: absolute; top: 12px; left: 12px; z-index: 2; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: var(--c-black); padding: 4px 10px; border-radius: 980px; } .shop-card__media { display: block; aspect-ratio: 1/1; background: var(--c-warm-white); overflow: hidden; } .shop-card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.5s var(--ease); } .shop-card:hover .shop-card__media img { transform: scale(1.05); } .shop-card__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 20px; flex: 1; } .shop-card__name { font-size: 15px; font-weight: 500; } .shop-card__price { display: flex; flex-direction: column; gap: 2px; margin-top: auto; } .shop-card__from { font-size: 11px; color: var(--c-graphite-light); } .shop-card__price strong { font-size: 20px; letter-spacing: var(--track-tight); } .shop-card__install { font-size: 11px; color: var(--c-graphite-light); } .shop-card__add { margin-top: 6px; } .shop-card__add.is-added { background: #1a8a4a; } /* Footer simples */ .shop-footer { border-top: 1px solid var(--c-line); margin-top: clamp(40px, 6vw, 80px); } .shop-footer__row { max-width: 1280px; margin-inline: auto; padding: clamp(28px, 4vw, 48px) clamp(16px, 4vw, 48px); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .shop-footer__logo { width: 110px; height: auto; } .shop-footer__links { display: flex; gap: clamp(16px, 3vw, 32px); flex-wrap: wrap; } .shop-footer__links a { font-size: 13px; color: var(--c-graphite-light); } .shop-footer__links a:hover { color: var(--c-black); } .shop-footer__bottom { border-top: 1px solid var(--c-line); padding: 16px clamp(16px, 4vw, 48px); text-align: center; } .shop-footer__bottom p { font-size: 12px; color: var(--c-graphite-light); } /* Cart drawer */ .cart-overlay { position: fixed; inset: 0; background: rgba(13,13,13,0.4); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 200; } .cart-overlay.is-open { opacity: 1; pointer-events: auto; } .cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); background: #fff; z-index: 201; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.4s var(--ease); box-shadow: -8px 0 40px rgba(13,13,13,0.16); } .cart-drawer.is-open { transform: translateX(0); } .cart-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--c-line); } .cart-drawer__head h2 { font-size: 18px; } .cart-drawer__close { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--c-black); } .cart-drawer__close:hover { background: var(--c-warm-white); } .cart-drawer__close svg { width: 20px; height: 20px; } .cart-drawer__body { flex: 1; overflow-y: auto; padding: 8px 24px; } .cart-empty { color: var(--c-graphite-light); text-align: center; padding: 48px 0; font-size: 14px; } .cart-item { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--c-line); } .cart-item img { width: 60px; height: 60px; object-fit: contain; background: var(--c-warm-white); border-radius: var(--radius-sm); flex-shrink: 0; } .cart-item__info { flex: 1; display: flex; flex-direction: column; gap: 3px; } .cart-item__name { font-size: 14px; font-weight: 500; } .cart-item__price { font-size: 13px; color: var(--c-graphite-light); } .cart-item__qty { display: flex; align-items: center; gap: 10px; } .cart-item__qty button { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--c-line); color: var(--c-black); font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; } .cart-item__qty button:hover { border-color: var(--c-black); } .cart-drawer__foot { border-top: 1px solid var(--c-line); padding: 20px 24px; display: flex; flex-direction: column; gap: 12px; } .cart-drawer__subtotal { display: flex; align-items: baseline; justify-content: space-between; } .cart-drawer__subtotal strong { font-size: 20px; letter-spacing: var(--track-tight); } .cart-drawer__continue { font-size: 13px; color: var(--c-graphite-light); } .cart-drawer__continue:hover { color: var(--c-black); } @media (max-width: 640px) { .shop-search { order: 3; flex-basis: 100%; max-width: none; } .shop-header__main { flex-wrap: wrap; } } /* ═══════════════════════════════════════════════ LOJA — página de carrinho ═══════════════════════════════════════════════ */ .shop-header__back--inline { margin-left: auto; } .shop-header__back--inline::before { content: ''; } .cart-page { padding-block: clamp(28px, 4vw, 48px) clamp(48px, 7vw, 88px); } .cart-page__title { font-size: clamp(26px, 3vw, 40px); margin-bottom: clamp(24px, 3vw, 36px); } .cart-page__grid { display: grid; grid-template-columns: 1fr 340px; gap: clamp(24px, 4vw, 48px); align-items: start; } .cart-page__empty { padding: 48px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .cart-page__empty p { color: var(--c-graphite-light); } .cart-row { display: grid; grid-template-columns: 92px 1fr auto auto; align-items: center; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--c-line); } .cart-row__media { display: block; } .cart-row__media img { width: 92px; height: 92px; object-fit: contain; background: var(--c-warm-white); border-radius: var(--radius-sm); } .cart-row__info { display: flex; flex-direction: column; gap: 5px; } .cart-row__name { font-size: 15px; font-weight: 500; } .cart-row__name:hover { color: var(--c-orange); } .cart-row__unit { font-size: 13px; color: var(--c-graphite-light); } .cart-row__remove { align-self: flex-start; font-size: 12px; color: var(--c-graphite-light); text-decoration: underline; } .cart-row__remove:hover { color: var(--c-black); } .cart-row__qty { display: flex; align-items: center; gap: 10px; } .cart-row__qty button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--c-line); color: var(--c-black); font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; } .cart-row__qty button:hover { border-color: var(--c-black); } .cart-row__total { font-weight: 500; letter-spacing: var(--track-tight); min-width: 90px; text-align: right; } .cart-page__summary { position: sticky; top: 24px; border: 1px solid var(--c-line); border-radius: var(--radius-card); padding: 24px; display: flex; flex-direction: column; gap: 16px; } .cart-page__subtotal { display: flex; align-items: baseline; justify-content: space-between; } .cart-page__subtotal strong { font-size: 22px; letter-spacing: var(--track-tight); } .cart-page__continue { text-align: center; font-size: 13px; color: var(--c-graphite-light); } .cart-page__continue:hover { color: var(--c-black); } /* ═══════════════════════════════════════════════ LOJA — página de produto do e-commerce ═══════════════════════════════════════════════ */ .shopprod { padding-bottom: clamp(48px, 7vw, 88px); } .shopprod__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; } .shopprod__info { padding-top: 8px; } .shopprod__info h1 { font-size: clamp(26px, 3vw, 40px); margin-bottom: 16px; } .shopprod__price { display: flex; flex-direction: column; gap: 3px; margin-bottom: 24px; } .shopprod__price strong { font-size: 30px; letter-spacing: var(--track-tight); } .shopprod__install { font-size: 13px; color: var(--c-graphite-light); } .shopprod__desc { font-size: 15px; line-height: 1.7; color: var(--c-graphite-light); margin-bottom: 28px; max-width: 460px; } .shopprod__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; } @media (max-width: 768px) { .cart-page__grid { grid-template-columns: 1fr; } .cart-page__summary { position: static; } .cart-row { grid-template-columns: 72px 1fr auto; grid-template-areas: "media info qty" "media total total"; gap: 12px 16px; } .cart-row__media { grid-area: media; } .cart-row__media img { width: 72px; height: 72px; } .cart-row__info { grid-area: info; } .cart-row__qty { grid-area: qty; } .cart-row__total { grid-area: total; text-align: left; min-width: 0; } .shopprod__grid { grid-template-columns: 1fr; gap: 28px; } } /* ═══════════════════════════════════════════════ CHAT (widget DashM/Marina) Esconde o botão e o balão próprios do widget — o chat é aberto pelo botão "Fale com um especialista" que já roda durante o scroll. ═══════════════════════════════════════════════ */ .adri-fab, .adri-teaser { display: none !important; }