/* ========================================================================== Projeto Leve · Nic Fernandes Identidade: Brand Board v2 ("menos spa, mais treino") Fontes: Cormorant Garamond (títulos) + Karla (corpo) ========================================================================== */ /* Fontes hospedadas aqui em vez de vir do Google: o CSS do fonts.googleapis.com bloqueava a renderização por ~900ms no mobile. São variáveis, então os cinco cortes do Cormorant e os dois da Karla saem de três arquivos. Ambas são OFL — self-host é permitido pela licença. */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/cormorant-garamond-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; font-display: swap; src: url('/fonts/cormorant-garamond-latin-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Karla'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/fonts/karla-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --cafe: #3A2E26; --cafe-profundo: #2E241D; --cafe-medio: #574838; --terracota: #A85A3E; --terracota-clara: #D98B66; --offwhite: #F7F1EA; --areia: #EDE4D8; --salvia: #A8B5A0; --rosa: #D9A5A0; --texto: #3A2E26; /* contraste AA: --texto-suave e para fundo claro (4.6:1 sobre areia), --texto-terciario para fundo escuro (4.8:1 sobre cafe) */ --texto-suave: #6E6459; --texto-terciario: #A89B8E; --borda: #E3D6C4; --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Karla', system-ui, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--sans); color: var(--texto); background: var(--offwhite); -webkit-font-smoothing: antialiased; /* sem isso o iOS infla o corpo do texto quando o celular vira para landscape */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; } em { font-style: italic; } /* Reveal de entrada (substitui o aos.css, que vinha de CDN e bloqueava a renderização). O esconde-esconde só vale sob .js-reveal, classe posta por um script inline no : sem JS, ou se o script.js não assumir em 3s, nada some. */ .js-reveal [data-aos] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .js-reveal [data-aos].aos-animate { opacity: 1; transform: none; } /* animação em loop só roda enquanto o elemento está por perto (ver script.js) */ .fora-de-vista { animation-play-state: paused; } a:focus-visible, button:focus-visible { outline: 2px solid var(--terracota); outline-offset: 3px; } /* Componentes de seção compartilhados */ .secao-eyebrow { font-size: 12px; letter-spacing: 4px; text-transform: uppercase; font-weight: 700; color: var(--terracota); margin-bottom: 22px; } .secao-eyebrow-salvia { color: var(--salvia); } .secao-h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(38px, 5vw, 64px); line-height: 1.08; color: var(--cafe); } .secao-h2 em { color: var(--terracota); } .secao-intro { font-size: 18px; line-height: 1.7; color: var(--texto-suave); max-width: 52ch; margin-top: 20px; } /* ========================================================================== Topbar ========================================================================== */ .topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 100; transition: background 0.3s ease, padding 0.3s ease; } .topbar-inner { max-width: 1240px; margin: 0 auto; padding: 28px clamp(20px, 5vw, 48px); display: flex; align-items: center; justify-content: space-between; gap: 16px; transition: padding 0.3s ease; } .topbar-fixa { position: fixed; background: rgba(58, 46, 38, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .topbar-fixa .topbar-inner { padding-top: 14px; padding-bottom: 14px; } .topbar-fixa .marca-nome { font-size: 20px; } .marca { display: flex; align-items: baseline; gap: 12px; } .marca-simbolo { transform: translateY(4px); flex-shrink: 0; } .marca-nome { font-family: var(--serif); font-weight: 400; font-size: 26px; color: var(--offwhite); letter-spacing: 0.5px; transition: font-size 0.3s ease; } .marca-nome em { color: var(--salvia); } .marca-assinatura { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--texto-terciario); font-weight: 700; } /* ========================================================================== Hero · Type Hero sobre café ========================================================================== */ .hero { position: relative; background: var(--cafe); min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding: clamp(120px, 16vh, 170px) 0 clamp(120px, 14vh, 160px); } .hero-inner { position: relative; z-index: 2; max-width: 1240px; width: 100%; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); } .hero-eyebrow { font-size: clamp(11px, 1.2vw, 13px); letter-spacing: 4px; text-transform: uppercase; font-weight: 700; color: var(--salvia); margin-bottom: clamp(24px, 4vh, 40px); } .eyebrow-sep { color: var(--terracota-clara); padding: 0 6px; } .hero-headline { font-family: var(--serif); font-weight: 500; font-size: clamp(52px, 9.2vw, 122px); line-height: 0.98; color: var(--offwhite); letter-spacing: -0.5px; max-width: 14ch; } .hero-headline em { font-weight: 400; color: var(--terracota-clara); } .hero-tagline-row { display: flex; align-items: center; gap: 22px; margin-top: clamp(28px, 4.5vh, 44px); } .hero-tagline-rule { width: 64px; height: 2px; background: var(--terracota); flex-shrink: 0; } .hero-tagline { font-size: clamp(12px, 1.3vw, 14px); letter-spacing: 3px; text-transform: uppercase; /* 700: a Karla é carregada em 400 e 700, e 600 caía em peso sintetizado */ font-weight: 700; color: var(--areia); } .hero-sub { font-size: clamp(16px, 1.7vw, 19px); line-height: 1.65; color: var(--areia); max-width: 560px; margin-top: clamp(20px, 3vh, 30px); font-weight: 400; } .hero-ctas { display: flex; flex-wrap: wrap; align-items: stretch; gap: 18px; margin-top: clamp(32px, 5vh, 48px); } .btn-primary { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 3px; background: var(--terracota); color: var(--offwhite); text-decoration: none; padding: 18px 34px; overflow: hidden; isolation: isolate; transition: color 0.3s ease; } .btn-primary::after { content: ""; position: absolute; inset: 0; background: var(--offwhite); transform: scaleX(0); transform-origin: left; transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1); z-index: -1; } .btn-primary:hover { color: var(--cafe); } .btn-primary:hover::after { transform: scaleX(1); } .btn-primary strong { font-size: 14px; letter-spacing: 3px; text-transform: uppercase; font-weight: 700; } .btn-primary span { font-size: 12.5px; color: currentColor; opacity: 0.75; } .btn-ghost { display: flex; flex-direction: column; justify-content: center; gap: 3px; text-decoration: none; padding: 18px 26px; border: 1px solid var(--cafe-medio); transition: border-color 0.3s ease, background 0.3s ease; } .btn-ghost:hover { border-color: var(--salvia); background: rgba(168, 181, 160, 0.08); } .btn-ghost strong { font-size: 13px; letter-spacing: 1px; font-weight: 700; color: var(--offwhite); } .btn-ghost span { font-size: 12.5px; color: var(--salvia); } .hero-micro { margin-top: 22px; font-size: 12.5px; letter-spacing: 0.5px; color: var(--texto-terciario); } /* Símbolo coração + folha · Draw SVG pós-load */ .hero-simbolo { position: absolute; right: clamp(-80px, -2vw, 20px); bottom: clamp(-60px, -4vh, -20px); width: clamp(280px, 34vw, 520px); height: auto; z-index: 1; opacity: 0.55; pointer-events: none; } .draw { stroke-dasharray: 1; stroke-dashoffset: 1; fill: none; } .is-loaded .draw-1 { animation: desenhar 1.6s cubic-bezier(0.5, 0, 0.3, 1) 0.15s forwards; } .is-loaded .draw-2 { animation: desenhar 1.2s cubic-bezier(0.5, 0, 0.3, 1) 0.9s forwards; } @keyframes desenhar { to { stroke-dashoffset: 0; } } /* ========================================================================== Ponte · card sobreposto (Overlap) ========================================================================== */ .ponte { position: relative; z-index: 3; max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); } .ponte-card { background: #FFFFFF; border: 1px solid var(--borda); padding: clamp(28px, 4vw, 44px) clamp(28px, 5vw, 56px); max-width: 560px; margin-top: clamp(-72px, -6vh, -48px); display: flex; flex-direction: column; gap: 10px; box-shadow: 0 24px 60px rgba(46, 36, 29, 0.12); } .ponte-traco { width: 40px; height: 2px; background: var(--salvia); } .ponte-frase { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(24px, 3vw, 32px); line-height: 1.25; color: var(--cafe); } .ponte-origem { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; font-weight: 700; color: var(--texto-suave); } /* ========================================================================== Dor · Editorial em duas colunas ========================================================================== */ .dor { background: var(--offwhite); padding: clamp(90px, 12vh, 150px) 0 clamp(100px, 14vh, 170px); } .dor-grid { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 7vw, 110px); align-items: start; } .dor-esq { position: sticky; top: 80px; } .dor-headline { font-family: var(--serif); font-weight: 500; font-size: clamp(38px, 5vw, 64px); line-height: 1.08; color: var(--cafe); } .dor-headline em { color: var(--terracota); } /* Régua da semana */ .semana { display: flex; gap: clamp(6px, 1vw, 12px); margin-top: clamp(32px, 5vh, 48px); flex-wrap: wrap; } .dia { font-size: clamp(11px, 1.1vw, 13px); letter-spacing: 2.5px; text-transform: uppercase; font-weight: 700; padding: 10px 14px; border: 1px solid var(--borda); color: var(--texto-suave); background: transparent; transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease; } .semana-ativa .dia-feita:nth-child(1) { transition-delay: 0ms; } .semana-ativa .dia-feita:nth-child(2) { transition-delay: 120ms; } .semana-ativa .dia-quebra { transition-delay: 240ms; } .semana-ativa .dia-feita { color: var(--offwhite); background: var(--salvia); border-color: var(--salvia); } .dia-quebra { position: relative; } .semana-ativa .dia-quebra { color: var(--offwhite); background: var(--terracota); border-color: var(--terracota); } .dia-quebra::after { content: ""; position: absolute; left: 10%; right: 10%; top: 50%; height: 1.5px; background: var(--offwhite); transform: rotate(-8deg) scaleX(0); transform-origin: left; transition: transform 0.4s ease 480ms; } .semana-ativa .dia-quebra::after { transform: rotate(-8deg) scaleX(1); } .semana-legenda { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--texto-suave); margin-top: 14px; } /* Coluna narrativa */ .dor-dir { display: flex; flex-direction: column; gap: clamp(20px, 3vh, 28px); padding-top: 8px; } .dor-dir p { font-size: clamp(16px, 1.6vw, 18px); line-height: 1.75; color: var(--cafe-medio); max-width: 58ch; } .dor-stats { display: flex; gap: clamp(32px, 5vw, 64px); padding: clamp(24px, 4vh, 36px) 0; border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); margin: 8px 0; flex-wrap: wrap; } .stat { display: flex; flex-direction: column; gap: 8px; max-width: 240px; } .stat-num { font-family: var(--serif); font-weight: 500; font-size: clamp(48px, 5.5vw, 72px); line-height: 1; color: var(--terracota); } .stat-desc { font-size: 13.5px; line-height: 1.55; color: var(--texto-suave); } .dor-fecho { font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 2.8vw, 32px) !important; line-height: 1.3 !important; color: var(--cafe) !important; } .dor-fecho em { color: var(--terracota); } /* ========================================================================== Virada · Poster sálvia ========================================================================== */ .virada { position: relative; background: var(--salvia); padding: clamp(100px, 14vh, 160px) 0; overflow: hidden; } .virada-simbolo { position: absolute; top: -60px; right: -40px; width: 380px; height: auto; opacity: 0.18; pointer-events: none; } .virada-inner { position: relative; max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); } .virada-headline { font-family: var(--serif); font-weight: 500; font-size: clamp(48px, 7.5vw, 96px); line-height: 1.02; letter-spacing: -0.5px; display: flex; flex-direction: column; } .linha-mask { display: block; overflow: hidden; padding-bottom: 0.08em; } .linha { display: block; transform: translateY(105%); transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .virada-revelada .linha { transform: translateY(0); } .virada-revelada .linha-2 { transition-delay: 140ms; } .linha-1 { color: var(--cafe); } .linha-2 { color: var(--offwhite); } .linha-2 em { color: var(--cafe); } .virada-texto { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-top: clamp(48px, 7vh, 72px); } .virada-col { display: flex; flex-direction: column; gap: 24px; } .virada-col p { font-size: clamp(16px, 1.6vw, 18px); line-height: 1.75; color: var(--cafe); opacity: 0.88; max-width: 52ch; } .virada-fecho { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 72px; } .virada-regua { width: 48px; height: 1.5px; background: var(--cafe); } .virada-tagline { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(24px, 3vw, 34px); color: var(--offwhite); } /* ========================================================================== Método · Bento Box ========================================================================== */ .metodo { background: var(--offwhite); padding: clamp(100px, 13vh, 150px) 0; } .metodo-inner { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); } .bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; margin-top: 64px; } .bento-celula { padding: 48px; position: relative; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .bento-p1 { grid-column: 1 / 8; background: #FFFFFF; border: 1px solid var(--borda); } .bento-widget { grid-column: 8 / 13; background: var(--cafe); padding: 40px; } .bento-p2 { grid-column: 1 / 7; background: var(--areia); } .bento-p3 { grid-column: 7 / 13; background: #FFFFFF; border: 1px solid var(--borda); border-top: 3px solid var(--salvia); } .bento-p1:hover, .bento-p2:hover, .bento-p3:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(46, 36, 29, 0.10); } .pilar-icone { width: 40px; height: auto; margin-bottom: 20px; } .pilar-num { display: block; font-size: 12px; letter-spacing: 3px; font-weight: 700; color: var(--terracota); margin-bottom: 10px; } .pilar-tag { display: inline-block; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; background: var(--salvia); color: var(--offwhite); padding: 4px 10px; margin-bottom: 12px; } .pilar-titulo { font-family: var(--serif); font-weight: 600; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; color: var(--cafe); margin-bottom: 18px; } .bento-celula p { font-size: 16px; line-height: 1.7; color: var(--cafe-medio); } .bento-celula p + p { margin-top: 14px; } /* Widget de versões */ /* .bento-celula p (0,1,1) vence uma classe sozinha; sem o pai no seletor, o título e o tempo caem para 16px em café-médio sobre café = ilegível */ .bento-widget .widget-titulo { font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1.3; color: var(--offwhite); margin-bottom: 22px; } .bento-widget .widget-titulo em { color: var(--salvia); font-style: italic; } .widget-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; } .pill { font-family: var(--sans); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; /* min-height 44px: alvo de toque confortável no celular */ display: inline-flex; align-items: center; min-height: 44px; padding: 9px 16px; background: transparent; border: 1px solid var(--cafe-medio); color: var(--areia); cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .pill:hover { border-color: var(--salvia); } .pill-ativa { background: var(--salvia); color: var(--cafe); border-color: var(--salvia); } .widget-lista { list-style: none; display: flex; flex-direction: column; } .widget-lista li { position: relative; font-size: 14px; color: var(--areia); padding: 8px 0 8px 28px; max-height: 40px; opacity: 1; overflow: hidden; transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease; } .widget-lista li::before { content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 1px; background: var(--salvia); } [data-versao="media"] .some-media, [data-versao="reduzida"] .some-reduzida { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; } .bento-widget .widget-tempo { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--salvia); margin-top: 20px; } /* ========================================================================== Comunidade · Floating Cards ========================================================================== */ .comunidade { background: var(--areia); padding: clamp(100px, 13vh, 150px) 0; overflow: hidden; } .comunidade-inner { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .comunidade-texto .secao-eyebrow { color: var(--salvia); } .comunidade-texto p { font-size: clamp(16px, 1.6vw, 18px); line-height: 1.75; color: var(--cafe-medio); margin-top: 20px; max-width: 54ch; } .comunidade-regra { font-family: var(--serif) !important; font-style: italic; font-size: 22px !important; line-height: 1.5 !important; color: var(--cafe) !important; border-left: 2px solid var(--salvia); padding-left: 20px; } .comunidade-mural { display: flex; flex-direction: column; } .msg { background: #FFFFFF; border: 1px solid var(--borda); border-radius: 14px 14px 14px 4px; padding: 16px 20px; box-shadow: 0 12px 32px rgba(46, 36, 29, 0.08); width: min(300px, 100%); margin-top: -8px; opacity: 0; transform: translateY(24px) rotate(0deg); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .msg:first-child { margin-top: 0; } .mural-visivel .msg { opacity: 1; } .mural-visivel .msg-1 { transform: translateY(0) rotate(-2deg); transition-delay: 0ms; } .mural-visivel .msg-2 { transform: translateY(0) translateX(40px) rotate(1.5deg); transition-delay: 120ms; } .mural-visivel .msg-3 { transform: translateY(0) translateX(12px) rotate(-1deg); transition-delay: 240ms; } .mural-visivel .msg-4 { transform: translateY(0) translateX(56px) rotate(2deg); transition-delay: 360ms; } .mural-visivel .msg:hover { transform: translateY(0) rotate(0deg) scale(1.02); transition-delay: 0ms; } .mural-visivel .msg-2:hover { transform: translateY(0) translateX(40px) rotate(0deg) scale(1.02); } .mural-visivel .msg-3:hover { transform: translateY(0) translateX(12px) rotate(0deg) scale(1.02); } .mural-visivel .msg-4:hover { transform: translateY(0) translateX(56px) rotate(0deg) scale(1.02); } .msg-autor { display: block; font-size: 12px; font-weight: 700; color: var(--salvia); margin-bottom: 4px; } .msg p { font-size: 14px; line-height: 1.5; color: var(--cafe); } .msg-nota { display: block; font-size: 10.5px; color: var(--texto-suave); margin-top: 6px; } .msg-tag { display: inline-block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; color: var(--terracota); margin-top: 8px; } .mural-nota { font-size: 12px; color: var(--texto-suave); margin-top: 24px; } /* ========================================================================== Depoimentos · Strip horizontal com drag ========================================================================== */ .depoimentos { position: relative; background: #FFFFFF; padding: clamp(90px, 12vh, 140px) 0; } .depoimentos-cabecalho { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); } /* Recuo à esquerda alinha ao container; à direita só o gutter, pro strip sangrar e ter curso de arraste. scroll-padding põe o primeiro snap point no offset 0. */ .strip { --strip-recuo: clamp(20px, calc((100% - 1240px) / 2 + 48px), 400px); display: flex; gap: 28px; overflow-x: auto; /* sem contain, chegar ao fim do strip passa o gesto adiante e a página inteira anda de lado no celular */ overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline-start: var(--strip-recuo); padding: 48px clamp(20px, 5vw, 48px) 48px var(--strip-recuo); cursor: grab; scrollbar-width: none; } .strip::-webkit-scrollbar { display: none; } .strip.arrastando { cursor: grabbing; scroll-snap-type: none; } .quote-card { min-width: clamp(300px, 38vw, 460px); background: var(--offwhite); border: 1px solid var(--borda); padding: 44px 40px; scroll-snap-align: start; user-select: none; } .quote-aspas { display: block; font-family: var(--serif); font-weight: 600; font-size: 64px; line-height: 0.4; color: var(--salvia); margin-bottom: 24px; } .quote-texto { font-family: var(--serif); font-style: italic; font-size: clamp(19px, 1.8vw, 22px); line-height: 1.5; color: var(--cafe-medio); } .quote-autora { display: block; position: relative; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--terracota); margin-top: 28px; padding-top: 16px; } .quote-autora::before { content: ""; position: absolute; top: 0; left: 0; width: 24px; height: 1px; background: var(--salvia); } .strip-progresso { width: 120px; height: 2px; background: var(--borda); margin: 8px auto 0; overflow: hidden; } #strip-barra { display: block; width: 0%; height: 100%; background: var(--terracota); transition: width 0.15s linear; } .cursor-arraste { position: fixed; top: 0; left: 0; width: 56px; height: 56px; border-radius: 50%; background: var(--cafe); color: var(--offwhite); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 90; opacity: 0; transform: translate(-50%, -50%) scale(0.6); transition: opacity 0.25s ease, transform 0.25s ease; } .cursor-arraste.visivel { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* ========================================================================== Como Funciona · Timeline ========================================================================== */ .funciona { background: var(--offwhite); padding: clamp(100px, 13vh, 150px) 0; } .funciona-grid { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); display: grid; grid-template-columns: 5fr 7fr; gap: clamp(48px, 8vw, 100px); align-items: start; } .funciona-esq { position: sticky; top: 100px; } .funciona-nota { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--terracota); margin-top: 24px; } .timeline { position: relative; padding-left: 0; } .timeline-trilho, .timeline-progresso { position: absolute; left: 20px; top: 0; width: 2px; height: 100%; } .timeline-trilho { background: var(--borda); } .timeline-progresso { background: var(--terracota); height: 0%; transition: height 0.1s linear; } .passo { position: relative; padding-left: 56px; margin-bottom: 72px; } .passo:last-child { margin-bottom: 0; } .passo-num { position: absolute; left: 40px; top: -18px; font-family: var(--serif); font-weight: 600; font-size: clamp(48px, 5vw, 64px); line-height: 1; color: var(--borda); z-index: 0; transition: color 0.4s ease; } .passo-marcador { position: absolute; left: 15px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--offwhite); border: 2px solid var(--borda); transition: border-color 0.4s ease, background 0.4s ease; } .passo-ativo .passo-num { color: var(--terracota); } .passo-ativo .passo-marcador { border-color: var(--terracota); background: var(--terracota); } .passo-titulo { position: relative; z-index: 1; font-family: var(--sans); font-weight: 700; font-size: 17px; color: var(--cafe); margin-bottom: 10px; } .passo p { position: relative; z-index: 1; font-size: 16px; line-height: 1.7; color: var(--cafe-medio); max-width: 46ch; } /* ========================================================================== Quem sou eu · Split café ========================================================================== */ .quem { background: var(--cafe); padding: clamp(110px, 14vh, 160px) 0; } .quem-grid { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); display: grid; grid-template-columns: 5fr 7fr; gap: clamp(48px, 7vw, 90px); align-items: center; } .quem-foto { position: relative; aspect-ratio: 4 / 5; } /* Cortina de revelação. Era um clip-path no próprio figure, mas elemento totalmente clipado não dispara o lazy load da imagem no Chrome: a foto simplesmente nunca carregava. A cortina faz o mesmo movimento por cima. */ .quem-foto::before { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--cafe); transform-origin: right center; transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); } .quem-foto.revelada::before { transform: scaleX(0); } .quem-foto::after { content: ""; position: absolute; inset: 0; transform: translate(16px, 16px); border: 1px solid var(--salvia); z-index: -1; opacity: 0; transition: opacity 0.5s ease 0.2s; } .quem-foto.revelada::after { opacity: 1; } /* a foto é 3:4 e a moldura é 4:5, então o cover corta ~7% da altura; object-position mantém o corte na base, preservando o rosto */ .quem-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; background: var(--cafe-medio); } .quem-h2 { color: var(--offwhite); } .quem-h2 em { color: var(--terracota-clara); } .quem-texto p { font-size: clamp(16px, 1.6vw, 18px); line-height: 1.75; color: var(--areia); opacity: 0.92; max-width: 58ch; margin-top: 18px; } .nutri-card { background: rgba(247, 241, 234, 0.05); border: 1px solid var(--cafe-medio); padding: 28px 32px; margin-top: 40px; } .nutri-label { display: block; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; font-weight: 700; color: var(--salvia); margin-bottom: 14px; } .nutri-linha { display: flex; gap: 20px; align-items: flex-start; } .nutri-foto { width: 64px; height: 64px; flex-shrink: 0; background: rgba(247, 241, 234, 0.06); border: 1px solid var(--cafe-medio); display: flex; align-items: center; justify-content: center; } .nutri-foto svg { width: 34px; height: auto; } .nutri-card p { font-size: 15px !important; margin-top: 0 !important; line-height: 1.65 !important; } .quem-credencial { position: relative; font-size: 12px !important; color: var(--texto-terciario) !important; margin-top: 28px !important; padding-left: 28px; opacity: 1 !important; } .quem-credencial::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 16px; height: 1px; background: var(--cafe-medio); } /* Logo da marca-mãe (direção 1C do Brand Board v1, adaptada a fundo escuro) */ .logo-mae { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 48px; } .logo-mae-coracao { width: 34px; height: auto; } .logo-mae-nome { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 3.4vw, 44px) !important; line-height: 1.05; color: var(--offwhite) !important; margin-top: 0 !important; opacity: 1 !important; display: flex; align-items: baseline; gap: 3px; } .logo-mae-nome em { color: var(--terracota-clara); } .logo-mae-halteres { display: flex; align-items: center; gap: 14px; } .logo-mae-haltere { width: 44px; height: auto; } .logo-mae-regua { width: 36px; height: 1px; background: var(--salvia); } .logo-mae-cargo { font-size: 11px; letter-spacing: 4px; text-transform: uppercase; font-weight: 700; color: var(--texto-terciario); margin-top: 2px; } /* ========================================================================== Planos · Grid assimétrico + marquee ========================================================================== */ /* ========================================================================== Modelo · inimigo comum + ancoragem ========================================================================== */ .modelo { background: var(--cafe); padding: clamp(100px, 13vh, 150px) clamp(24px, 5vw, 64px); } .modelo-inner { max-width: 1192px; margin: 0 auto; } .modelo-eyebrow { color: var(--terracota-clara); } .modelo-headline { font-family: var(--serif); font-weight: 500; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.1; color: var(--offwhite); margin-bottom: clamp(48px, 6vw, 76px); } .modelo-headline em { font-style: italic; color: var(--terracota-clara); } .modelo-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 80px); align-items: start; } .modelo-texto p { font-size: 17px; line-height: 1.75; color: rgba(237, 228, 216, 0.85); margin-bottom: 22px; } .modelo-destaque { font-family: var(--serif); font-size: clamp(21px, 2.2vw, 26px) !important; line-height: 1.4 !important; color: var(--offwhite) !important; border-left: 2px solid var(--salvia); padding-left: 24px; } .modelo-forte { color: var(--offwhite) !important; margin-bottom: 0 !important; } /* gráfico das duas linhas */ .curva { background: var(--cafe-profundo); border: 1px solid var(--cafe-medio); padding: 26px 24px 22px; } .curva-titulo { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 700; color: var(--texto-terciario); margin-bottom: 18px; } .curva svg { width: 100%; height: auto; display: block; } .curva-linha { stroke-dasharray: 1; stroke-dashoffset: 1; } .curva-pacote { stroke-dasharray: 7 5; stroke-dashoffset: 0; opacity: 0; } .curva.aos-animate .curva-mensal { animation: desenhar 1.1s ease 0.25s forwards; } .curva.aos-animate .curva-pacote { animation: revelarPacote 1.1s ease 0.75s forwards; } @keyframes revelarPacote { to { opacity: 1; } } .curva-rotulo { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; } .curva-rotulo-mensal { fill: var(--salvia); } .curva-rotulo-pacote { fill: var(--texto-terciario); } .curva-eixo { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; fill: var(--texto-terciario); } .curva-nota { font-size: 12.5px; line-height: 1.5; color: var(--texto-terciario); margin-top: 14px; } /* ancoragem */ .ancora { margin-top: clamp(56px, 7vw, 84px); border-top: 1px solid var(--cafe-medio); padding-top: clamp(32px, 4vw, 48px); } .ancora-linha { font-size: 16px; line-height: 1.7; color: var(--texto-terciario); max-width: 62ch; } .ancora-linha strong { color: var(--areia); font-weight: 700; } @media (max-width: 860px) { .modelo-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .modelo-destaque { padding-left: 16px; } .curva { padding: 20px 16px 18px; } /* o SVG encolhe junto com o container: sem compensar, o texto do gráfico cai para ~9px reais e fica ilegível */ .curva-rotulo { font-size: 13px; letter-spacing: 1px; } .curva-eixo { font-size: 12px; letter-spacing: 0.5px; } } .planos { background: var(--offwhite); padding: 0 0 clamp(100px, 13vh, 150px); } .marquee { background: var(--terracota); height: 52px; display: flex; align-items: center; overflow: hidden; } /* will-change + camada própria: sem isso o mobile descarta a animação quando a memória aperta e a faixa congela */ .marquee-track { display: flex; white-space: nowrap; will-change: transform; backface-visibility: hidden; animation: rolar 22s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-track span { font-size: 13px; letter-spacing: 3px; text-transform: uppercase; font-weight: 700; /* branco puro: o offwhite sobre terracota parava em 4.46:1 */ color: #FFFFFF; } @keyframes rolar { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } .planos-inner { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); } .planos-cabecalho { text-align: center; margin: 72px auto 56px; } .planos-cabecalho .secao-eyebrow { margin-bottom: 14px; } .planos-grid { display: grid; grid-template-columns: 5.5fr 6.5fr; gap: 32px; align-items: stretch; max-width: 1080px; margin: 0 auto; } .plano { display: flex; flex-direction: column; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .plano-leve { background: #FFFFFF; border: 1px solid var(--borda); padding: 48px 44px; } .plano-leve:hover { transform: translateY(-6px); } .plano-completo { position: relative; background: var(--cafe); padding: 56px 48px; transform: translateY(-20px); box-shadow: 0 32px 72px rgba(46, 36, 29, 0.18); } .plano-completo:hover { transform: translateY(-26px); } .plano-selo { position: absolute; top: -14px; right: 32px; background: var(--salvia); color: var(--cafe); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; padding: 6px 14px; transform: rotate(2deg); } .plano-nome { font-family: var(--serif); font-weight: 600; font-size: 30px; color: var(--cafe); } .plano-leve .plano-nome em { color: var(--terracota); } .plano-completo .plano-nome { color: var(--offwhite); } .plano-completo .plano-nome em { color: var(--salvia); } .plano-preco { display: flex; align-items: baseline; gap: 6px; margin: 18px 0 28px; } .preco-valor { font-family: var(--serif); font-weight: 500; font-size: clamp(52px, 5vw, 64px); line-height: 1; color: var(--cafe); } .plano-completo .preco-valor { color: var(--offwhite); } .preco-periodo { font-size: 14px; color: var(--texto-suave); } /* o card do Completo tem fundo cafe, entao inverte o tom */ .plano-completo .preco-periodo { color: var(--texto-terciario); } .plano-lista { list-style: none; display: flex; flex-direction: column; gap: 12px; flex-grow: 1; } .plano-lista li { position: relative; font-size: 15px; line-height: 1.6; color: var(--cafe-medio); padding-left: 28px; } .plano-completo .plano-lista li { color: var(--areia); } .plano-lista li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 16px; height: 1px; background: var(--salvia); } .plano-comparativo { font-size: 14px; line-height: 1.65; color: var(--areia); opacity: 0.85; border-top: 1px solid var(--cafe-medio); padding-top: 20px; margin-top: 24px; } .btn-plano { position: relative; display: block; text-align: center; text-decoration: none; font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 700; padding: 18px 24px; margin-top: 28px; overflow: hidden; isolation: isolate; transition: color 0.3s ease; } .btn-plano::after { content: ""; position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1); z-index: -1; } .btn-plano-outline { border: 1px solid var(--cafe); color: var(--cafe); } .btn-plano-outline::after { background: var(--cafe); } .btn-plano-outline:hover { color: var(--offwhite); } .btn-plano-outline:hover::after { transform: scaleX(1); } .btn-plano-cheio { background: var(--terracota); color: var(--offwhite); } .btn-plano-cheio::after { background: var(--offwhite); } .btn-plano-cheio:hover { color: var(--cafe); } .btn-plano-cheio:hover::after { transform: scaleX(1); } .planos-destaque { text-align: center; font-size: 16px; color: var(--cafe); margin-top: 48px; } .planos-destaque em { font-family: var(--serif); font-size: 20px; color: var(--terracota); } .planos-anual { text-align: center; font-size: 14px; line-height: 1.7; color: var(--texto-suave); max-width: 640px; margin: 24px auto 0; } .planos-anual strong { color: var(--cafe); } .conversa-card { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; background: var(--areia); border: 1px solid var(--borda); max-width: 720px; margin: 56px auto 0; padding: 28px 36px; scroll-margin-top: 100px; } .conversa-card p { font-size: 15px; line-height: 1.65; color: var(--cafe-medio); max-width: 44ch; } .conversa-card strong { color: var(--cafe); } .btn-conversa { flex-shrink: 0; position: relative; text-decoration: none; font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 700; color: var(--terracota); border: 1px solid var(--terracota); padding: 14px 24px; overflow: hidden; isolation: isolate; transition: color 0.3s ease; } .btn-conversa::after { content: ""; position: absolute; inset: 0; background: var(--terracota); transform: scaleX(0); transform-origin: left; transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1); z-index: -1; } .btn-conversa:hover { color: var(--offwhite); } .btn-conversa:hover::after { transform: scaleX(1); } /* ========================================================================== Garantia · Single Focus ========================================================================== */ .garantia { background: var(--areia); padding: clamp(100px, 13vh, 150px) 0; } .garantia-inner { max-width: 680px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); text-align: center; } .garantia-inner p { font-size: 17px; line-height: 1.75; color: var(--cafe-medio); margin-top: 20px; } .garantia-inner .secao-h2 { margin-top: 40px; } .selo { position: relative; width: 180px; height: 180px; margin: 0 auto; } .selo-giro { width: 100%; height: 100%; animation: girar 24s linear infinite; } @keyframes girar { to { transform: rotate(360deg); } } .selo-texto { font-family: var(--sans); font-size: 11px; letter-spacing: 4px; text-transform: uppercase; font-weight: 700; fill: var(--terracota); } .selo-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } .selo-num { font-family: var(--serif); font-weight: 600; font-size: 56px; line-height: 1; color: var(--cafe); } .selo-dias { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; font-weight: 700; color: var(--cafe-medio); } /* ========================================================================== FAQ · Índice editorial ========================================================================== */ .faq { background: #FFFFFF; padding: clamp(90px, 12vh, 140px) 0; } .faq-inner { max-width: 880px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); } .faq-lista { margin-top: 48px; } .faq-item { border-bottom: 1px solid var(--borda); } .faq-pergunta { width: 100%; display: grid; grid-template-columns: 64px 1fr 32px; align-items: center; gap: 0; padding: 26px 0; background: none; border: none; cursor: pointer; text-align: left; font-family: var(--sans); } .faq-num { font-family: var(--serif); font-weight: 500; font-size: 26px; color: var(--texto-suave); transition: color 0.25s ease; } .faq-pergunta:hover .faq-num, .faq-aberta .faq-num { color: var(--terracota); } .faq-q { font-size: clamp(16px, 1.6vw, 18px); font-weight: 700; color: var(--cafe); line-height: 1.4; } .faq-mais { position: relative; width: 14px; height: 14px; justify-self: end; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .faq-mais::before, .faq-mais::after { content: ""; position: absolute; background: var(--cafe); } .faq-mais::before { left: 0; top: 50%; width: 14px; height: 1.5px; transform: translateY(-50%); } .faq-mais::after { left: 50%; top: 0; width: 1.5px; height: 14px; transform: translateX(-50%); } .faq-aberta .faq-mais { transform: rotate(45deg); } .faq-resposta { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s ease; } .faq-aberta .faq-resposta { grid-template-rows: 1fr; } .faq-resposta-inner { overflow: hidden; } .faq-resposta-inner p { font-size: 16px; line-height: 1.7; color: var(--cafe-medio); max-width: 60ch; padding: 0 0 26px 64px; } /* ========================================================================== CTA Final · Poster café ========================================================================== */ .final { background: var(--cafe); padding: clamp(120px, 16vh, 180px) 0; } .final-inner { max-width: 820px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); text-align: center; } .final-headline { font-family: var(--serif); font-weight: 500; font-size: clamp(40px, 5.6vw, 72px); line-height: 1.05; color: var(--offwhite); } .final-headline em { color: var(--terracota-clara); } .final-inner > p { font-size: 17px; line-height: 1.7; color: var(--areia); opacity: 0.9; max-width: 56ch; margin: 24px auto 0; } .final-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 48px; } .final-fecho { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 64px; } .final-simbolo { width: 44px; height: auto; animation: respirar 5s ease-in-out infinite; } @keyframes respirar { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } .final-tagline { font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--terracota-clara); } /* ========================================================================== Footer ========================================================================== */ .rodape { background: var(--cafe-profundo); padding: 48px 0 28px; } .rodape-inner { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; } .rodape-marcas { display: flex; align-items: center; gap: 16px; } .logo-mae-mini { margin-top: 0; gap: 5px; } .logo-mae-mini .logo-mae-coracao { width: 22px; } .logo-mae-mini .logo-mae-nome { font-size: 24px !important; } .logo-mae-mini .logo-mae-haltere { width: 32px; } .logo-mae-mini .logo-mae-regua { width: 22px; } .logo-mae-mini .logo-mae-cargo { font-size: 9px; letter-spacing: 3px; } .rodape-sep { width: 1px; height: 36px; background: var(--cafe-medio); } .rodape-lockup { display: flex; flex-direction: column; gap: 2px; } .rodape-nome { font-family: var(--serif); font-size: 22px; color: var(--offwhite); } .rodape-nome em { color: var(--salvia); } .rodape-por { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; font-weight: 700; color: var(--texto-terciario); } .rodape-links { display: flex; gap: 28px; } .rodape-links a { position: relative; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--texto-terciario); text-decoration: none; /* padding vertical leva o link aos 44px de alvo de toque sem deslocar o texto */ display: inline-flex; align-items: center; min-height: 44px; padding: 13px 0; transition: color 0.25s ease; } .rodape-links a::after { content: ""; position: absolute; left: 0; bottom: 9px; width: 100%; height: 1px; background: var(--salvia); transform: scaleX(0); transform-origin: left; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .rodape-links a:hover { color: var(--salvia); } .rodape-links a:hover::after { transform: scaleX(1); } .rodape-tagline { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--terracota-clara); } .rodape-linha { max-width: 1240px; margin: 28px auto 0; padding: 20px clamp(20px, 5vw, 48px) 0; border-top: 1px solid var(--cafe-medio); } .rodape-linha p { text-align: center; font-size: 11px; line-height: 1.7; color: var(--texto-terciario); } /* ========================================================================== Movimento reduzido ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } /* parada no meio, a faixa lê como travada; mostra um grupo só, centrado */ .marquee { height: auto; padding: 14px clamp(16px, 5vw, 32px); } .marquee-track { animation: none; width: 100%; justify-content: center; } .marquee-track span:last-child { display: none; } .marquee-track span { white-space: normal; text-align: center; line-height: 1.8; } .selo-giro { animation: none; } .final-simbolo { animation: none; } .draw { stroke-dasharray: none; stroke-dashoffset: 0; } .is-loaded .draw-1, .is-loaded .draw-2 { animation: none; } .linha { transform: none; transition: none; } .quem-foto::before { transform: scaleX(0); transition: none; } .msg { opacity: 1; transition: none; } .mural-visivel .msg { transition: none; } /* o reveal entrega o conteúdo direto, sem deslizar */ .js-reveal [data-aos] { opacity: 1; transform: none; transition: none; } } /* ========================================================================== Responsivo ========================================================================== */ @media (max-width: 900px) { .marca-assinatura { display: none; } .hero-simbolo { right: -100px; bottom: -50px; width: 320px; opacity: 0.3; } .dor-grid { grid-template-columns: 1fr; } .dor-esq { position: static; } .virada-texto { grid-template-columns: 1fr; gap: 24px; } .virada-simbolo { width: 220px; opacity: 0.12; } .bento { grid-template-columns: 1fr; } .bento-p1, .bento-widget, .bento-p2, .bento-p3 { grid-column: 1 / -1; } .bento-celula { padding: 32px; } .comunidade-inner { grid-template-columns: 1fr; gap: 48px; } .mural-visivel .msg-2 { transform: translateY(0) translateX(16px) rotate(1.5deg); } .mural-visivel .msg-3 { transform: translateY(0) translateX(8px) rotate(-1deg); } .mural-visivel .msg-4 { transform: translateY(0) translateX(24px) rotate(2deg); } .funciona-grid { grid-template-columns: 1fr; } .funciona-esq { position: static; } .timeline { padding-left: 0; } .passo { padding-left: 40px; } .passo-num { font-size: 40px; left: 32px; } .quem-grid { grid-template-columns: 1fr; } .quem-foto { max-width: 420px; } .planos-grid { grid-template-columns: 1fr; } .plano-completo { order: -1; transform: translateY(0); } .plano-completo:hover { transform: translateY(-6px); } .marquee { height: 44px; } .marquee-track span { font-size: 11px; } .conversa-card { flex-direction: column; align-items: flex-start; } } @media (max-width: 560px) { .hero-ctas { flex-direction: column; align-items: stretch; } .btn-primary, .btn-ghost { text-align: left; } .ponte-card { margin-top: -40px; } .quote-card { min-width: 82vw; } .faq-pergunta { grid-template-columns: 40px 1fr 24px; } .faq-num { font-size: 20px; } .faq-resposta-inner p { padding-left: 40px; } .final-ctas { flex-direction: column; align-items: stretch; } .rodape-inner { flex-direction: column; align-items: flex-start; } } /* ========================================================================== Refinos mobile (ambas as versões) ========================================================================== */ @media (max-width: 560px) { .hero-headline { font-size: clamp(38px, 11.5vw, 52px); } .hero-headline br { display: none; } .virada-headline { font-size: clamp(34px, 10.5vw, 48px); } .final-headline { font-size: clamp(32px, 9.5vw, 40px); } .dia { padding: 8px 10px; letter-spacing: 2px; } .stat-num { font-size: 44px; } .selo { width: 140px; height: 140px; } .selo-num { font-size: 44px; } .plano-leve, .plano-completo { padding: 36px 28px; } .plano-selo { right: 20px; } .quote-card { padding: 32px 26px; } .conversa-card { padding: 24px; } .bento-widget { padding: 28px 24px; } .nutri-linha { flex-direction: column; } .comunidade-regra { font-size: 19px !important; } }