/* ========================================================================== Gramado Grill — LP de Eventos Sistema visual extraído do arquivo original do cliente (.fig + PDF de export): - Cores amostradas por pixel dos renders do protótipo. - Tipografia e escala lidas dos registros de fonte do .fig e dos spans do PDF: Montserrat Light no H1 do hero; Inter (Light/Regular/Medium) em todo o resto. - Tema único (dark), assumido: é uma identidade de marca fechada, então todas as cores são explícitas em tokens, sem depender do tema do sistema. ========================================================================== */ :root { /* ---- Cor ---- */ --bg: #0b1b1c; --bg-soft: #0e2220; --bg-footer: #081514; --card-light: #f2f2f0; /* Superfície opaca dos cards escuros: eles ficam por cima dos recortes decorativos, então não podem ser translúcidos (o recorte vazaria). */ --surface: #11221f; --green-accent: #3caa69; --green-accent-light: #6ee39d; --green-text: #6cb984; /* Neutros com leve viés verde do fundo — cinza escolhido, não herdado. */ --text-primary: #ffffff; --text-muted: #a8bcb2; --text-dark: #17231f; --text-dark-muted: #55625c; --border-soft: rgba(168, 188, 178, 0.16); --danger: #d64545; /* ---- Tipo ---- */ --font-display: "Montserrat", "Segoe UI", system-ui, sans-serif; --font-body: "Inter", "Segoe UI", system-ui, sans-serif; /* Escala derivada do design (valores do protótipo em canvas de 1920px). */ --fs-hero: clamp(2.25rem, 4.2vw, 3.75rem); /* 60px */ --fs-h2: clamp(1.875rem, 3.4vw, 3.125rem); /* 50px */ --fs-h2-form: clamp(1.75rem, 3vw, 2.8125rem); /* 45px */ --fs-h2-card: clamp(1.625rem, 2.7vw, 2.5rem); /* 40px */ --fs-lead: clamp(1.125rem, 1.6vw, 1.5625rem); /* 25px */ --fs-body: clamp(1.0625rem, 1.35vw, 1.375rem); /* 22px */ --fs-list: clamp(1rem, 1.25vw, 1.3125rem); /* 21px */ --fs-faq: clamp(0.975rem, 1.15vw, 1.2rem); /* 19px */ --fs-ui: clamp(0.95rem, 1vw, 1.125rem); /* 18px */ --fs-label: 1.05rem; /* 16.7px */ --fs-sm: 1rem; /* 16px */ --fs-xs: 0.875rem; /* 14px */ /* ---- Layout ---- */ --container: 1360px; --gutter: 24px; --space-section: clamp(64px, 8vw, 118px); --space-block: clamp(28px, 3.4vw, 48px); /* ---- Movimento ---- */ --reveal-travel: 26px; --reveal-dur: 620ms; --reveal-step: 70ms; --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1); --radius-lg: 24px; --radius-md: 14px; --radius-sm: 8px; --shadow-card: 0 20px 45px rgba(0, 0, 0, 0.35); --shadow-photo: 0 22px 48px rgba(0, 0, 0, 0.42); --shadow-cutout: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.55)); } * { box-sizing: border-box; } html { scroll-behavior: smooth; /* `clip` e não `hidden`: apara os recortes que vazam pelas laterais do mesmo jeito, mas NÃO transforma o em container de rolagem — o que atrapalhava a detecção de scroll e travava as animações. */ overflow-x: clip; } body { margin: 0; width: 100%; overflow-x: clip; background: var(--bg); color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-body); font-weight: 300; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3, h4 { font-family: var(--font-body); font-weight: 300; margin: 0; line-height: 1.18; text-wrap: balance; } h1 strong, h2 strong, h3 strong { font-weight: 700; } p { margin: 0; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .section-pad { padding: var(--space-section) 0; } section { position: relative; } .eyebrow { display: inline-block; color: var(--green-text); letter-spacing: 0.16em; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; margin-bottom: 16px; } .text-accent { color: var(--green-text); } .text-muted { color: var(--text-muted); } /* ---- Foco visível (o protótipo é omisso; requisito de acessibilidade) ---- Sem `border-radius` aqui: essa propriedade alteraria o raio do PRÓPRIO elemento ao focar (transformaria o botão pill em retângulo). O outline já acompanha o raio do elemento sozinho. */ :focus-visible { outline: 3px solid var(--green-accent-light); outline-offset: 3px; } /* Sobre as superfícies claras o verde neon dá 1,43:1 — abaixo do mínimo de 3:1 para indicador de foco, e isso acontece justamente dentro do formulário. O verde escuro dá 4,7:1 sobre #F2F2F0. */ .form-card :focus-visible, .space-card :focus-visible { outline-color: #1e7a48; } /* ---------------------------------- Camadas decorativas ---------------------------------- Recortes PNG que atravessam as bordas das seções, como no protótipo. pointer-events:none é obrigatório: o espeto cruza a área do formulário e, sem isso, engoliria os cliques nos campos. ------------------------------------------------------------------------------------- */ .decor { position: absolute; pointer-events: none; user-select: none; z-index: 3; filter: var(--shadow-cutout); } /* Seções que hospedam recortes vazando pelas laterais. `overflow-x: clip` apara na horizontal (o recorte é cortado pela borda da tela, como no protótipo) sem virar container de rolagem e sem afetar o eixo vertical — que precisa continuar visível para o recorte furar o card. */ .hero, .space-section, .needs, .testimonials, .form-section { overflow-x: clip; overflow-y: visible; } /* ---------------------------------- Revelação em scroll ---------------------------------- Dois conceitos, nada mais: .reveal → o próprio elemento aparece [data-reveal] → os filhos diretos aparecem escalonados (o container nunca some) Usa `translate` (propriedade independente) e NÃO `transform`. Motivo concreto: .photo-a, .photo-b, .space-card__espeto e .needs__media img.main têm rotate() próprio — com `transform: translateY()` a colagem perderia os ângulos ao ser revelada e nunca mais voltaria. `translate` compõe em vez de sobrescrever. ------------------------------------------------------------------------------------- */ .js .reveal, .js [data-reveal] > * { opacity: 0; translate: 0 var(--reveal-travel); transition: opacity var(--reveal-dur) linear, translate var(--reveal-dur) var(--reveal-ease); transition-delay: calc(var(--reveal-i, 0) * var(--reveal-step)); } .js .reveal.is-visible, .js [data-reveal].is-visible > * { opacity: 1; translate: none; } /* Promove só enquanto falta entrar; depois a própria transição sustenta. O `will-change` permanente anterior deixava camadas de GPU vivas para sempre. */ .js .reveal:not(.is-visible), .js [data-reveal]:not(.is-visible) > * { will-change: opacity, translate; } /* Ritmo por seção: blocos grandes viajam menos e esperam mais entre tempos; grades de cards correm mais, senão viram desfile. */ .space-card { --reveal-step: 120ms; --reveal-travel: 30px; } .problem-list { --reveal-step: 95ms; --reveal-travel: 22px; } .benefits__grid { --reveal-step: 70ms; --reveal-travel: 20px; } .reviews-grid { --reveal-step: 60ms; --reveal-travel: 22px; } /* Salto de âncora: quem clicou no CTA não está lendo o caminho. Sem isto, os 3 CTAs + scroll-behavior:smooth disparam a página inteira em cascata durante a rolagem (estroboscópio). Ver initScrollReveal(). */ .reveal-instant .reveal, .reveal-instant [data-reveal] > * { transition: none !important; transition-delay: 0s !important; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .reveal, .js [data-reveal] > * { opacity: 1; translate: none; transition: none; transition-delay: 0s; will-change: auto; } } /* ---------------------------------- Buttons ---------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: none; cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-ui); letter-spacing: 0.07em; text-transform: uppercase; text-decoration: none; min-height: 56px; padding: 18px 40px; border-radius: 999px; position: relative; /* box-shadow fora da lista: nunca é alterado, era transição morta. */ transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), filter 0.2s ease; /* Sem o retângulo cinza do iOS/Android atropelando o :active desenhado, e sem a espera de double-tap-to-zoom. */ -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; } .btn-primary { background: linear-gradient(135deg, var(--green-accent-light), var(--green-accent)); color: #08201a; box-shadow: 0 14px 34px rgba(62, 190, 122, 0.3); } /* Glow sem repaint: a sombra fica sempre rasterizada no pseudo-elemento e só a opacidade dela anima — que é composta na GPU. Transicionar `box-shadow` diretamente repintaria a cada frame. */ .btn-primary::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 18px 42px rgba(62, 190, 122, 0.48); opacity: 0; transition: opacity 0.2s ease; } .btn-primary:hover::after, .btn-primary:focus-visible::after { opacity: 1; } .btn-primary:hover { transform: translateY(-2px); filter: saturate(1.06) brightness(1.04); } /* No mobile não existe hover: o :active é o ÚNICO feedback tátil. Timing assimétrico — a pressão é instantânea (o dedo já está lá), a soltura respira. */ .btn-primary:active { transform: translateY(1px) scale(0.985); filter: brightness(0.97); transition-duration: 0.06s; } .btn-block { width: 100%; } /* aria-disabled em vez de disabled: mantém o foco de quem submeteu por teclado. */ .btn[aria-disabled="true"] { cursor: default; filter: saturate(0.55) brightness(0.96); transform: none !important; } .btn[aria-disabled="true"]::after { opacity: 0 !important; } /* ---------------------------------- Hero ---------------------------------- */ .hero { position: relative; padding: 44px 0 clamp(80px, 9vw, 130px); background: radial-gradient(ellipse at 76% 22%, #142c28 0%, var(--bg) 60%); } .hero__grid { display: grid; /* Coluna de texto mais larga que a de reserva: no design o H1 ocupa ~740px e o texto avança sobre a borda esfumada da foto. */ grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; position: relative; z-index: 2; } /* Fundo da hero: a foto ocupa a seção inteira, de borda a borda, sem moldura nem cantos arredondados. A coluna direita do grid fica vazia só para o texto não correr por cima da carne, que é o ponto de destaque da imagem. */ /* A caixa da foto é deslocada para a direita para que a carne — o ponto de destaque — caia na metade direita do quadro, como no protótipo, deixando a área do texto limpa. A máscara dissolve a borda esquerda no fundo, de modo que não existe emenda visível nem moldura. O excedente à direita é aparado pelo `overflow-x: clip` da hero. */ .hero__media { position: absolute; top: 0; bottom: 0; left: 24%; right: -6%; z-index: 0; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 17%); mask-image: linear-gradient(to right, transparent 0%, #000 17%); } .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 0; } /* Escurecimento sobre a foto: forte à esquerda, onde fica o texto, e transparente à direita, para a carne manter o destaque. */ .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 100deg, rgba(11, 27, 28, 0.92) 0%, rgba(11, 27, 28, 0.86) 30%, rgba(11, 27, 28, 0.48) 48%, rgba(11, 27, 28, 0.12) 66%, rgba(11, 27, 28, 0) 80% ), linear-gradient(to bottom, rgba(11, 27, 28, 0.35) 0%, rgba(11, 27, 28, 0) 22%), linear-gradient(to top, var(--bg) 0%, rgba(11, 27, 28, 0) 18%); } .hero__logo { width: clamp(160px, 14vw, 210px); margin-bottom: clamp(28px, 3.5vw, 44px); } .hero__title { font-family: var(--font-display); font-size: var(--fs-hero); font-weight: 300; line-height: 1.14; letter-spacing: -0.01em; color: var(--text-primary); max-width: 21ch; } .hero__subtitle { margin-top: 24px; max-width: 44ch; color: var(--text-muted); font-size: var(--fs-lead); line-height: 1.55; } .hero__subtitle strong { color: var(--green-text); font-weight: 600; } .hero__cta { margin-top: clamp(28px, 3vw, 40px); } /* ---------------------------------- Checklist ---------------------------------- */ .checklist { list-style: none; margin: var(--space-block) 0 0; padding: 0; display: grid; gap: 12px; } .checklist li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--fs-list); } .checklist .check-icon { flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--green-accent); color: #fff; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; margin-top: 5px; } /* ---------------------------------- Card claro "espaço ideal" ---------------------------------- */ .space-section { padding: var(--space-section) 0; } .space-card { position: relative; background: var(--card-light); color: var(--text-dark); border-radius: var(--radius-lg); padding: clamp(36px, 4.4vw, 64px); padding-right: clamp(36px, 4.4vw, 64px); display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 48px; align-items: center; box-shadow: var(--shadow-card); /* Os recortes precisam furar as bordas do card. */ overflow: visible; } .space-card h2 { font-size: var(--fs-h2-card); color: var(--text-dark); } .space-card p.text-muted { color: var(--text-dark-muted); margin-top: var(--space-block); font-size: var(--fs-sm); max-width: 44ch; } /* Colagem em camadas: alecrim atrás, duas fotos rotacionadas em sentidos opostos, espeto cruzando por cima e saindo além da borda direita. */ .space-card__collage { position: relative; min-height: clamp(300px, 34vw, 430px); } .space-card__collage img { border-radius: var(--radius-md); box-shadow: var(--shadow-photo); } .space-card__collage .alecrim { position: absolute; left: -6%; top: -14%; width: 42%; z-index: 1; border-radius: 0; box-shadow: none; transform: rotate(-16deg); filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.4)); pointer-events: none; } .space-card__collage .photo-a { position: absolute; left: 0; bottom: -8%; width: 62%; z-index: 2; transform: rotate(-4deg); } .space-card__collage .photo-b { position: absolute; right: 4%; top: -22%; width: 56%; z-index: 3; transform: rotate(4deg); } /* O PNG de origem já vem na diagonal (ponta metálica embaixo à direita), então a rotação aqui é só um ajuste fino — girar muito o deixa horizontal. */ .space-card__espeto { right: -7%; top: 30%; width: 34%; z-index: 4; transform: rotate(6deg); } /* ---------------------------------- Marquee ---------------------------------- */ /* A faixa DEVE bater duro contra o escuro — ela é a pontuação entre capítulos. O box-shadow não suaviza a pancada: só assenta a faixa *sobre* a página, em vez de parecer um buraco recortado nela. */ .marquee { overflow: hidden; background: linear-gradient(90deg, var(--green-accent-light), var(--green-accent)); padding: 16px 0; position: relative; z-index: 5; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.22), 0 12px 34px rgba(0, 0, 0, 0.3); /* As palavras dissolvem nas laterais em vez de serem cortadas a guilhotina. É o detalhe que separa "faixa rolando" de "faixa bem feita". */ -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%); } /* O movimento é feito em JS (requestAnimationFrame), não por @keyframes. Motivo: a animação CSS não rodava na máquina do cliente e eu não consegui reproduzir o problema — com rAF a posição é escrita em código, some o estado "paused" que travava, e o loop é embrulhado na metade exata, sem salto. O sentido invertido da 2ª faixa vira um sinal +1/-1 no JS. */ .marquee__track { display: flex; width: max-content; will-change: transform; } .marquee__track span { display: inline-flex; align-items: center; white-space: nowrap; font-weight: 600; font-size: 1.05rem; letter-spacing: 0.2em; text-transform: uppercase; color: #0b1b1c; padding: 0 22px; } .marquee__track span::after { content: "•"; margin-left: 22px; opacity: 0.55; letter-spacing: 0; } /* ---------------------------------- Seção da dor ---------------------------------- */ .problem { padding: var(--space-section) 0 clamp(170px, 17vw, 260px); overflow: visible; /* `isolate` prende o backdrop do `screen` das camadas de fogo ao fundo desta seção, para o efeito não depender do que está pintado embaixo no documento. */ isolation: isolate; background: var(--bg); } /* ---------------------------------- Fogo da seção da dor ---------------------------------- A arte chamas.webp tem fundo PRETO CHAPADO (conferido: cantos em rgb(0,0,0), 56% do topo quase-preto). Com `opacity` ela escurecia a base da seção e criava uma costura horizontal dura na junção com .solution; com `mix-blend-mode: screen` o preto vira transparente e a arte passa a EMITIR luz. O núcleo brilhante da arte está a 97% da altura — por isso `object-position: center bottom`: o enquadramento centralizado anterior mostrava o halo liso e descartava justamente o fogo. Todo o movimento é transform/opacity: roda na compositor thread e sobrevive ao scroll em celular. Os valores DESTA regra são o estado de repouso — é o que se vê sem JS e em prefers-reduced-motion. ------------------------------------------------------------------------------------- */ .problem__flame { position: absolute; left: 0; right: 0; /* Fica DENTRO da seção. Sangrar para fora criava uma faixa clara na junção: `isolation: isolate` confina o blend ao box de .problem, então a parte que vazava compunha contra outro fundo. A dissolução da base resolve a costura sem precisar atravessar a fronteira. */ bottom: 0; width: 100%; /* Faixa baixa: o fogo é o rodapé luminoso da seção, não um fundo atrás da copy. Mais alto que isto e as duas últimas linhas ficam sobre laranja. */ height: clamp(170px, 24%, 300px); object-fit: cover; object-position: center bottom; /* `screen` amplifica muito: 0.2 aqui rende mais que 0.5 com opacity puro. */ opacity: 0.2; mix-blend-mode: screen; z-index: 0; pointer-events: none; transform-origin: 50% 100%; /* dissolve nas DUAS pontas — sem isso a base fica opaca e a emenda aparece */ /* Desvanece mais cedo no topo: a parte visível do fogo tem de terminar ABAIXO da frase de fechamento, que antes ficava dentro da faixa. */ -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 28%, #000 55%, transparent 78%); mask-image: linear-gradient(to top, transparent 0%, #000 28%, #000 55%, transparent 78%); animation: flame-breathe 7.3s ease-in-out infinite; } /* Camada posterior: mesma arte espelhada e desfocada, em outro ritmo. As duas velocidades são o que faz o conjunto ler como fogo. Sem alteração no HTML — reutiliza o arquivo já em cache. */ .problem::before { content: ""; position: absolute; left: -3%; right: -3%; bottom: 0; height: clamp(190px, 28%, 350px); z-index: 0; pointer-events: none; background: url("../assets/img/chamas.webp") center bottom / cover no-repeat; mix-blend-mode: screen; opacity: 0.1; filter: blur(10px) saturate(1.08); transform: scaleX(-1); transform-origin: 50% 100%; -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 16%, #000 60%, transparent 94%); mask-image: linear-gradient(to top, transparent 0%, #000 16%, #000 60%, transparent 94%); animation: flame-drift 11.7s ease-in-out infinite; } /* A camada de brasas é genérica: qualquer seção com data-embers a recebe. */ [data-embers] { position: relative; } /* A camada de trás anima só translate: um layer grande com blur re-rasteriza a cada mudança de escala, e é aí que doeria. */ @keyframes flame-drift { 0% { transform: scaleX(-1) translate3d(0, 0, 0); opacity: 0.08; } 38% { transform: scaleX(-1) translate3d(-14px, -8px, 0); opacity: 0.15; } 69% { transform: scaleX(-1) translate3d(11px, -3px, 0); opacity: 0.09; } 100% { transform: scaleX(-1) translate3d(0, 0, 0); opacity: 0.08; } } /* A da frente é nítida e pequena o bastante para escalar sem custo. transform-origin na base: fogo cresce para cima, não a partir do centro. */ @keyframes flame-breathe { 0% { transform: scale(1); translate: 0 0; opacity: 0.20; } 21% { transform: scale(1.032); translate: -0.5% -1.1%; opacity: 0.27; } 44% { transform: scale(1.008); translate: 0.4% 0.3%; opacity: 0.18; } 68% { transform: scale(1.046); translate: 0.8% -1.5%; opacity: 0.29; } 86% { transform: scale(1.014); translate: -0.3% -0.4%; opacity: 0.22; } 100% { transform: scale(1); translate: 0 0; opacity: 0.20; } } /* ---- Brasas ---- */ .embers { position: absolute; left: 0; right: 0; bottom: 0; height: 52%; z-index: 0; overflow: hidden; /* .problem é overflow:visible — as brasas precisam ser contidas aqui */ pointer-events: none; } /* Gradiente radial em vez de box-shadow: um raster só, com queda suave. */ .ember { position: absolute; bottom: -14px; left: var(--x); width: var(--size); height: var(--size); border-radius: 50%; opacity: 0; background: radial-gradient( circle, rgba(255, 240, 205, 0.95) 0%, rgba(255, 154, 60, 0.85) 38%, rgba(255, 110, 35, 0) 70% ); animation: ember-rise var(--dur) linear var(--delay) infinite; } @keyframes ember-rise { 0% { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; } 9% { opacity: var(--peak); } 55% { transform: translate3d(calc(var(--drift) * 0.42), calc(var(--rise) * 0.62), 0) scale(1); } 84% { opacity: calc(var(--peak) * 0.32); } 100% { transform: translate3d(var(--drift), var(--rise), 0) scale(0.48); opacity: 0; } } /* Mobile: a camada posterior desfocada sai — é a única que custa GPU de verdade. */ @media (max-width: 680px) { .problem::before { display: none; } } .problem__inner { position: relative; z-index: 1; max-width: 820px; text-align: center; } .problem__title { font-size: var(--fs-h2); } .problem-list { list-style: none; margin: clamp(38px, 4.5vw, 58px) 0 0; padding: 0; display: grid; gap: 26px; text-align: left; } .problem-list li { display: flex; gap: 16px; color: var(--text-muted); font-size: var(--fs-list); line-height: 1.5; } .problem-list .warn-icon { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; margin-top: 4px; } .problem__closing { margin-top: clamp(38px, 4.5vw, 58px); color: var(--text-muted); font-size: var(--fs-sm); font-style: italic; max-width: 62ch; margin-left: auto; margin-right: auto; } /* ---------------------------------- Solução ---------------------------------- */ .solution { padding: var(--space-section) 0; } .solution__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 70px); align-items: center; } .solution h2 { font-size: var(--fs-h2); max-width: 13ch; } .solution p { margin-top: 20px; color: var(--text-muted); max-width: 46ch; font-size: var(--fs-sm); } .solution p strong { color: var(--text-primary); font-weight: 600; } .solution .btn { margin-top: var(--space-block); } .solution__photos { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; } .solution__photos img { border-radius: var(--radius-md); width: 100%; height: 100%; object-fit: cover; box-shadow: var(--shadow-photo); } .solution__photos .tall { grid-row: span 2; aspect-ratio: 3 / 4; } .solution__photos .short { aspect-ratio: 4 / 3; } /* ---------------------------------- "Tudo o que precisa" ---------------------------------- */ .needs { padding: 0 0 var(--space-section); } .needs__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 70px); align-items: center; } .needs__media { position: relative; } .needs__media img.main { border-radius: var(--radius-md); width: 100%; transform: rotate(-2deg); box-shadow: var(--shadow-photo); } /* O alecrim fica atrás da costela, espiando por cima — no protótipo ele não cobre a foto. */ .needs__media .alecrim { position: absolute; width: clamp(120px, 15vw, 190px); top: -12%; right: 6%; z-index: -1; transform: rotate(14deg); filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.45)); pointer-events: none; } .needs h2 { font-size: var(--fs-h2); max-width: 12ch; } .needs__lead { margin-top: 16px; color: var(--text-muted); font-size: var(--fs-lead); max-width: 30ch; } /* ---------------------------------- Benefícios ---------------------------------- */ .benefits { padding: var(--space-section) 0; text-align: center; } .benefits h2 { font-size: var(--fs-h2); max-width: 20ch; margin: 0 auto; } .benefits__sub { margin-top: 12px; color: var(--text-muted); font-size: var(--fs-lead); } .benefits__grid { margin-top: clamp(38px, 4.5vw, 60px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; text-align: left; } .benefit-card { border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: clamp(26px, 2.6vw, 34px); position: relative; overflow: hidden; background: var(--surface); } .benefit-card { transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.28s ease, background-color 0.28s ease; } .benefit-card__icon { transition: background-color 0.28s ease, transform 0.28s ease; } /* @media (hover: hover): sem isso o estado gruda no toque (o iOS mantém o hover até você tocar em outro lugar). Os cards NÃO são clicáveis, então nada de cursor:pointer nem elevação grande — o hover só marca hierarquia. */ @media (hover: hover) { .benefit-card:hover { transform: translateY(-4px); border-color: rgba(110, 227, 157, 0.34); background-color: #132a25; } /* scaleX e não width: width num pseudo absoluto dispara layout+paint. */ .benefit-card:hover::before { transform: scaleX(1.7); } .benefit-card:hover .benefit-card__icon { background-color: rgba(110, 227, 157, 0.2); transform: scale(1.05); } } /* Barra de acento no topo do card — está assim no protótipo do cliente. */ .benefit-card::before { content: ""; position: absolute; top: 0; left: clamp(26px, 2.6vw, 34px); width: 40px; height: 4px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--green-accent-light), var(--green-accent)); transform-origin: left center; transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); } .benefit-card__icon { width: 50px; height: 50px; border-radius: 12px; background: rgba(110, 227, 157, 0.13); color: var(--green-text); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .benefit-card h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 10px; } .benefit-card p { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.55; } /* ---------------------------------- CTA de fechamento ---------------------------------- */ .closing-cta { /* Cede o respiro para .testimonials, que agora usa esse espaço como a própria transição (o "prato" abaixo). */ padding: 0 0 clamp(24px, 3vw, 40px); text-align: center; } .closing-cta__inner { max-width: 900px; margin: 0 auto; position: relative; z-index: 1; } .closing-cta h2 { font-size: var(--fs-h2); } .closing-cta p { margin-top: 24px; color: var(--text-muted); font-size: var(--fs-lead); line-height: 1.85; } .closing-cta .btn { margin-top: var(--space-block); } /* ---------------------------------- Depoimentos ---------------------------------- */ /* Prato de prova social: elevação de fundo tão lenta que não tem borda, começando e terminando em --bg. Amortece o salto de luminância do CTA escuro para a parede de cards brancos, sem precisar de linha nem de um 3º marquee. (Usa o --bg-soft que estava declarado e parado desde o início.) */ .testimonials { padding: clamp(48px, 6vw, 90px) 0 var(--space-section); text-align: center; background: linear-gradient( to bottom, var(--bg) 0%, var(--bg-soft) 15%, var(--bg-soft) 84%, var(--bg) 100% ); } .testimonials h2 { font-size: var(--fs-h2); max-width: 22ch; margin: 0 auto; } .testimonials__badge { display: inline-block; margin-top: 18px; padding: 9px 20px; border-radius: 999px; border: 1px solid var(--border-soft); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-text); font-weight: 600; } .reviews-grid { margin-top: clamp(38px, 4.5vw, 58px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; text-align: left; position: relative; z-index: 2; } /* Cards no formato dos prints de avaliação do Google: fundo branco, texto escuro, estrelas douradas e o resumo de notas em caixa cinza. */ .review-card { background: #ffffff; color: #202124; border-radius: 10px; padding: 20px 22px; display: flex; flex-direction: column; gap: 11px; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3); text-align: left; position: relative; transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); } /* São 6 cards, mas só um recebe hover por vez — e a sombra já está rasterizada, então o hover só muda opacity. Nenhum repaint em cascata. */ .review-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.48); opacity: 0; transition: opacity 0.28s ease; } @media (hover: hover) { .review-card:hover { transform: translateY(-3px); } .review-card:hover::after { opacity: 1; } } .review-card__head { display: flex; align-items: center; gap: 12px; } .review-card__avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 1.05rem; color: #fff; background: #5f6368; flex: none; } /* Cores variadas nos avatares, como nas avaliações reais. */ .reviews-grid .review-card:nth-child(1) .review-card__avatar { background: #d93025; } .reviews-grid .review-card:nth-child(2) .review-card__avatar { background: #1a73e8; } .reviews-grid .review-card:nth-child(3) .review-card__avatar { background: #e8710a; } .reviews-grid .review-card:nth-child(4) .review-card__avatar { background: #188038; } .reviews-grid .review-card:nth-child(5) .review-card__avatar { background: #9334e6; } .reviews-grid .review-card:nth-child(6) .review-card__avatar { background: #c5221f; } .review-card__name { font-weight: 500; font-size: 0.95rem; color: #202124; } .review-card__meta { font-size: 0.78rem; color: #70757a; } .review-card__stars { color: #fbbc04; font-size: 0.85rem; letter-spacing: 2px; } .review-card__stars span { color: #70757a; font-size: 0.78rem; letter-spacing: 0; margin-left: 8px; } .review-card__context { font-size: 0.78rem; color: #70757a; } .review-card__text { font-size: 0.88rem; color: #3c4043; line-height: 1.6; } .review-card__tags { margin-top: auto; background: #f1f3f4; border-radius: 8px; padding: 12px 14px; font-size: 0.8rem; color: #3c4043; display: flex; flex-wrap: wrap; gap: 4px 10px; } /* Bife flutuante entrando pela borda esquerda da tela, aparado pela viewport. Ancorado ao rodapé da seção: cai naturalmente na transição para o formulário, sem depender de offsets calculados sobre uma seção alta. */ .decor-steak { left: -6%; /* Negativo: atravessa a fronteira e se enfia sob a coluna do formulário. Com o valor positivo anterior ele flutuava no padding, sem tocar nada. */ bottom: clamp(-70px, -5vw, -24px); width: clamp(220px, 24vw, 400px); z-index: 1; transform: rotate(-6deg); } /* ---------------------------------- Formulário ---------------------------------- */ .form-section { padding: 0 0 var(--space-section); } .form-section__grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(40px, 5vw, 72px); position: relative; z-index: 2; } .form-section h2 { font-size: var(--fs-h2-form); margin-top: 6px; max-width: 15ch; } .steps { list-style: none; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; display: grid; gap: 26px; } .steps li { display: flex; gap: 18px; align-items: flex-start; } .steps__num { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: center; font-size: 0.92rem; color: var(--green-text); font-weight: 600; } .steps p { color: var(--text-muted); font-size: var(--fs-sm); padding-top: 7px; } /* Espeto na dobra dos depoimentos, lado direito (o bife ocupa o esquerdo). Antes ficava no formulário, atrás do card — e por isso quase não aparecia. */ .decor-espeto { right: -9%; top: 4%; width: clamp(240px, 26vw, 440px); z-index: 1; transform: rotate(-30deg); } .form-card { background: var(--card-light); color: var(--text-dark); border-radius: var(--radius-lg); padding: clamp(26px, 3.2vw, 44px); box-shadow: var(--shadow-card); position: relative; z-index: 3; } .field { margin-bottom: 20px; } .field label { display: block; font-size: var(--fs-label); font-weight: 500; margin-bottom: 8px; color: var(--text-dark); } .field input[type="text"], .field input[type="tel"], .field input[type="number"], .field select { width: 100%; min-height: 52px; padding: 14px 16px; border-radius: var(--radius-sm); border: 1.5px solid #d8dcd8; font-family: var(--font-body); font-size: 1rem; background: #fff; color: var(--text-dark); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .field input:focus, .field select:focus { outline: none; border-color: var(--green-accent); box-shadow: 0 0 0 4px rgba(60, 170, 105, 0.16); } .field input:focus-visible, .field select:focus-visible { outline: none; } .field.has-error input, .field.has-error select { border-color: var(--danger); } .field__error { display: block; color: var(--danger); font-size: 0.82rem; margin-top: 0; max-height: 0; opacity: 0; overflow: hidden; translate: 0 -3px; transition: opacity 0.18s ease, translate 0.18s ease, max-height 0.18s ease, margin-top 0.18s ease; } .field.has-error .field__error { max-height: 3em; /* mensagens são fixas e curtas; o teto nunca é atingido */ opacity: 1; margin-top: 7px; translate: none; } /* Estado de acerto só nos dois campos mascarados, onde o usuário genuinamente não sabe se acertou o formato. Verde em tudo faria o verde perder sentido. */ .field.is-valid input { border-color: #a9d4bb; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233CAA69' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 42px; } .form-status { margin: 0 0 12px; font-size: 0.85rem; color: var(--danger); } .form-status:empty { display: none; } .btn__spinner { display: none; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(8, 32, 26, 0.28); border-top-color: #08201a; animation: btn-spin 0.7s linear infinite; } .btn[data-state="loading"] .btn__spinner { display: block; } @keyframes btn-spin { to { transform: rotate(360deg); } } .radio-row { display: flex; gap: 24px; } .radio-option { display: flex; align-items: center; gap: 9px; font-size: 1rem; cursor: pointer; min-height: 44px; } .radio-option input { width: 20px; height: 20px; accent-color: var(--green-accent); } .form-note { font-size: 0.8rem; color: var(--text-dark-muted); margin-top: 16px; text-align: center; } /* ---------------------------------- FAQ ---------------------------------- */ .faq { padding: 0 0 var(--space-section); } .faq h2 { text-align: center; font-size: var(--fs-h2); margin-bottom: clamp(34px, 4vw, 52px); } .faq-list { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; } .faq-item { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); } .faq-item__q { width: 100%; background: none; border: none; color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-faq); font-weight: 400; text-align: left; padding: 22px 24px; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 18px; cursor: pointer; } .faq-item__q .chevron { transition: transform 0.25s ease; flex: none; color: var(--green-text); } .faq-item[data-open="true"] .chevron { transform: rotate(180deg); } /* grid-template-rows 0fr→1fr interpola até a altura REAL do conteúdo, sem JS e sem medição. O `max-height` fixo anterior tinha ~57% da animação de tempo morto (o valor caía de 280 para a altura real sem nada mudar na tela) e cortaria silenciosamente qualquer resposta futura mais longa. O padding NÃO anima: assim a altura-alvo é conhecida em t=0 e a interpolação é honesta, sem dois ritmos brigando. */ .faq-item__a { display: grid; grid-template-rows: 0fr; visibility: hidden; color: var(--text-muted); font-size: var(--fs-sm); transition: grid-template-rows 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.28s; } .faq-item__a-inner { overflow: hidden; min-height: 0; /* obrigatório: itens de grid têm min-height auto */ padding: 0 24px; } .faq-item[data-open="true"] .faq-item__a { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s; } .faq-item[data-open="true"] .faq-item__a-inner { padding-bottom: 22px; } @media (prefers-reduced-motion: reduce) { .faq-item__a, .faq-item__q .chevron { transition: none; } } /* ---------------------------------- Rodapé ---------------------------------- */ .site-footer { padding: 36px 0; background: var(--bg-footer); border-top: 1px solid var(--border-soft); position: relative; z-index: 5; } .site-footer .container { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; } .site-footer__credit { font-size: var(--fs-xs); color: var(--text-muted); } .site-footer__logo { height: 44px; } .site-footer__social { display: flex; gap: 14px; } .site-footer__social a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: center; color: var(--green-text); text-decoration: none; transition: background 0.2s ease, color 0.2s ease; } .site-footer__social a:hover { background: var(--green-accent); color: #08201a; } /* ---------------------------------- Página de agradecimento ---------------------------------- */ .thanks { min-height: 100vh; display: flex; flex-direction: column; } .thanks__hero { flex: 1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; position: relative; overflow: hidden; } .thanks__media { position: relative; height: 100%; min-height: 440px; } .thanks__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .thanks__content { padding: clamp(44px, 6vw, 76px) clamp(24px, 5vw, 80px); position: relative; z-index: 2; } .thanks__logo { width: clamp(150px, 13vw, 190px); margin-bottom: var(--space-block); } .thanks__content h1 { font-family: var(--font-display); font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 700; line-height: 1.18; } .thanks__content p { margin-top: 22px; max-width: 48ch; color: var(--text-muted); font-size: var(--fs-sm); } .thanks__content .btn { margin-top: var(--space-block); } .thanks__phone { margin-top: 18px; font-size: var(--fs-sm); color: var(--text-muted); } .thanks__phone a { color: var(--green-text); font-weight: 600; text-decoration: none; white-space: nowrap; border-bottom: 1px solid rgba(108, 185, 132, 0.4); transition: border-color 0.2s ease, color 0.2s ease; } @media (hover: hover) { .thanks__phone a:hover { color: var(--green-accent-light); border-color: var(--green-accent-light); } } /* ============================== Responsivo ============================== */ @media (max-width: 1100px) { .space-card__espeto { right: -26%; width: 66%; } .decor-espeto { right: -16%; } } @media (max-width: 980px) { .hero__grid, .space-card, .solution__grid, .needs__grid, .form-section__grid { grid-template-columns: 1fr; } /* Empilhado, a foto volta a cobrir a seção inteira como fundo. */ .hero__media { top: 0; bottom: 0; left: 0; right: 0; width: auto; height: auto; -webkit-mask-image: none; mask-image: none; } .hero__media img { object-position: 62% center; } /* Escurecimento vertical: o texto ocupa a largura toda, então o degradê cobre a coluna inteira e não só um lado. Medido com o texto oculto (para ler o fundo real, e não o anti-aliasing das letras): 5,3:1 sobre a área mais clara da foto — acima do mínimo de 4,5:1. É o ponto em que a foto ainda aparece e o texto continua legível. */ .hero::after { background: linear-gradient( to bottom, rgba(11, 27, 28, 0.5) 0%, rgba(11, 27, 28, 0.78) 42%, rgba(11, 27, 28, 0.93) 76%, var(--bg) 100% ); } .benefits__grid, .reviews-grid { grid-template-columns: repeat(2, 1fr); } /* O espeto volta ao mobile (o export do Figma mostra ele lá), agora ancorado ao RODAPÉ do card: abaixo da colagem só existe padding, então ele não tem como cobrir texto. Antes ficava escondido por precaução. */ .space-card__espeto { top: auto; bottom: clamp(-56px, -7vw, -30px); right: clamp(-40px, -5vw, -18px); width: clamp(150px, 40vw, 240px); transform: rotate(14deg); } /* Empilhado, a colagem sai de `position: absolute` e vira fluxo. Motivo concreto: com as fotos absolutas ancoradas em `bottom:0` / `top:-8%` dentro de um container mais baixo que elas, elas escapavam PARA CIMA e cobriam o parágrafo do card entre ~440 e 730px de largura. Em fluxo isso deixa de ser questão de acertar `min-height` e passa a ser estruturalmente impossível. A sobreposição entre as duas fotos (que o mobile do Figma mantém) vem de `margin` negativa, que não escapa do container. */ .space-card__collage { position: relative; min-height: 0; margin-top: var(--space-block); display: flex; align-items: flex-start; isolation: isolate; } /* 56% + 56% − 12% de sobreposição = 100% da largura disponível. As duas somam exatamente o container, então nada transborda em nenhuma largura. */ .space-card__collage .photo-a, .space-card__collage .photo-b { position: static; width: 56%; max-width: 56%; flex: none; aspect-ratio: 4 / 5; object-fit: cover; } .space-card__collage .photo-a { margin-top: 22px; z-index: 1; transform: rotate(-4deg); } .space-card__collage .photo-b { margin-left: -12%; z-index: 2; transform: rotate(4deg); } /* O alecrim continua absoluto, mas ancorado ao TOPO da colagem e atrás de tudo — não tem como alcançar o texto acima. */ .space-card__collage .alecrim { position: absolute; width: 34%; left: 2%; top: -18px; z-index: 0; } .decor-steak { width: 220px; } .thanks__hero { grid-template-columns: 1fr; } .thanks__media { min-height: 260px; order: -1; } } @media (max-width: 680px) { .hero { padding: 32px 0 64px; text-align: center; } .hero__grid { justify-items: center; } .hero__title { max-width: none; } .hero__subtitle { margin-left: auto; margin-right: auto; } /* Recortes de seção saem no celular (atravessariam a coluna única de texto). O espeto do card NÃO sai — ele aparece no mobile do Figma e agora tem lugar seguro, ancorado ao rodapé do card (ver bloco ≤980px). */ .decor-steak, .decor-espeto { display: none; } .space-card__collage .alecrim { width: 38%; } .benefits__grid, .reviews-grid { grid-template-columns: 1fr; } .btn { width: 100%; padding: 18px 24px; } .site-footer .container { justify-content: center; text-align: center; } .thanks__content { text-align: center; } .thanks__content p { margin-left: auto; margin-right: auto; } } /* ============================== Acabamento ============================== */ /* Seleção de texto na cor da marca (o padrão é o azul do sistema). #08201a sobre #3CAA69 = 8,4:1. */ ::selection { background: var(--green-accent); color: #08201a; text-shadow: none; } /* Os parágrafos têm largura travada em `ch`, que é exatamente onde nascem as linhas órfãs de uma palavra. Os títulos já usam `balance`. */ p, li { text-wrap: pretty; } /* Só nos campos mascarados: com dígitos de largura proporcional a string inteira "respira" lateralmente enquanto o usuário digita. Nos demais lugares com números da página (1–4 dos passos, "5/5") é imperceptível. */ .field input[type="tel"], #data, #convidados { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } /* Recolorir sem afinar: `scrollbar-width: thin` reduziria o alvo de arraste. */ html { scrollbar-color: #2c4640 var(--bg); } /* Autofill do Chrome pinta o campo de azul/amarelo e arrebenta o card claro. O transition longo impede o navegador de reaplicar o fundo. */ .field input:-webkit-autofill, .field input:-webkit-autofill:hover, .field input:-webkit-autofill:focus { -webkit-text-fill-color: var(--text-dark); -webkit-box-shadow: 0 0 0 1000px #fff inset; transition: background-color 9999s ease-in-out 0s; } /* O