isolada. Não aplicar em : mesma especificidade de :root (0,1,0), e aí quem vence passa a depender da ordem no arquivo. Os valores são os originais do site, para que /evento/, /comunidade/ e /livro/ fiquem pixel-idênticas ao aprovado. ============================================================ */ .brand-lp { --accent: #16A88E; --accent-deep: #0E7A67; --accent-soft: #2FB8A0; --accent-lift: #1DB79A; --accent-sink: #0F9A83; --accent-rgb: 22, 168, 142; --accent-deep-rgb: 14, 122, 103; --accent-soft-rgb: 47, 184, 160; --mint: #E7F4F0; --mint-line: rgba(22, 168, 142, .25); --cta-from: #1DB79A; --cta-mid: #16A88E; --cta-to: #0F9A83; --cta-hover-from: #16A88E; --cta-hover-to: #0E7A67; --cta-shadow-rgb: 22, 168, 142; --cta-shadow-near-rgb: 11, 90, 76; --cta-sheen: rgba(255, 255, 255, .24); --cta-sheen-hover: rgba(255, 255, 255, .18); --ink: #23282A; --ink-lift: #2C3234; --ink-panel: #3A4042; --ink-rgb: 35, 40, 42; --ink-72: rgba(35, 40, 42, .72); --ink-60: rgba(35, 40, 42, .62); --ink-50: rgba(35, 40, 42, .5); --ink-45: rgba(35, 40, 42, .45); --line: rgba(31, 36, 37, .1); --mist: #F5F6F6; } /* ============ MONOGRAMA FAZ MORAR ============ */ /* Dois nós para que quadrado e glifo sejam recoloridos separadamente. Cor via CSS, nunca fill="var()" como atributo — inconsistente entre engines. */ .mono__bg { fill: var(--mono-bg, #2E2E30); } .mono__fg { fill: var(--mono-fg, #FFFFFF); } /* Sobre fundo escuro o quadrado charcoal sumiria: inverte. */ .on-dark .mono { --mono-bg: #FFFFFF; --mono-fg: #2E2E30; } /* Marca d'água: só o glifo, sem o quadrado. Um quadrado sólido a 7% de opacidade vira mancha sem forma — o contorno é que carrega a marca. */ .mono--mark .mono__bg { display: none; } .mono--mark .mono__fg { fill: var(--mono-mark, var(--accent)); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--sans); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { text-decoration: none; color: inherit; } img, svg { display: block; max-width: 100%; } .container { max-width: 1280px; margin: 0 auto; padding-left: 40px; padding-right: 40px; } .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .24em; color: var(--accent-deep); } .eyebrow--onDark { color: var(--accent-soft); } /* ============ NAV ============ */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .nav__inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 16px 40px; } .nav__brand { display: flex; align-items: center; gap: 11px; font-family: var(--serif); font-size: 19px; white-space: nowrap; } /* ============ CO-BRANDING (páginas Leilão & Prosa) ============ */ /* A marca-mãe e a sub-marca lado a lado, separadas por um filete. */ .nav__brands { display: flex; align-items: center; gap: 14px; min-width: 0; } .nav__brands-sep { flex: none; width: 1px; height: 26px; background: var(--line); } /* O "&" da sub-marca em itálico verde, como no evento. */ .nav__brand--lp em { font-style: italic; color: var(--accent); } /* Duas assinaturas + menu + ações não cabem na mesma barra. A nav recolhe em dois estágios: primeiro a marca-mãe fica só no monograma (o menu ainda aparece até 1024px), depois a sub-marca também, sobrando os dois símbolos. Assim as duas marcas seguem presentes em qualquer largura. */ @media (max-width: 1150px) { .nav__brands { gap: 12px; } .nav__brands .nav__brand:first-child span { display: none; } } @media (max-width: 560px) { .nav__brands { gap: 8px; } .nav__brands .nav__brand--lp span { display: none; } .nav__brands-sep { height: 22px; } } .nav__links { display: flex; gap: 30px; font-size: 15px; font-weight: 600; color: var(--ink-72); } .nav__links a { position: relative; padding-bottom: 3px; transition: color .25s var(--ease); } .nav__links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } .nav__links a:hover { color: var(--ink); } .nav__links a:hover::after { transform: scaleX(1); } .nav__links a.is-active { color: var(--accent-deep); } .nav__links a.is-active::after { transform: scaleX(1); } .nav__actions { display: flex; gap: 14px; align-items: center; } .nav__login { font-size: 15px; font-weight: 600; color: var(--ink-72); transition: color .25s var(--ease); } .nav__login:hover { color: var(--ink); } .nav__cta { padding: 11px 20px; background: linear-gradient(180deg, var(--ink-lift) 0%, var(--ink) 100%); color: #FFFFFF; border-radius: 10px; font-size: 14px; font-weight: 600; letter-spacing: .01em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 6px 16px -8px rgba(var(--ink-rgb), .5); transition: background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); } .nav__cta:hover { background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 20px -8px rgba(var(--accent-deep-rgb), .5); } /* ============ BREADCRUMB ============ */ .crumb { max-width: 1280px; margin: 0 auto; padding: 28px 40px 0; font-size: 13px; color: var(--ink-45); font-weight: 600; } .crumb a { color: var(--ink-45); transition: color .25s var(--ease); } .crumb a:hover { color: var(--accent-deep); } .crumb__here { color: var(--accent-deep); } .crumb__sep { margin: 0 8px; } .crumb--onDark, .crumb--onDark a { color: rgba(255, 255, 255, .45); } .crumb--onDark a:hover { color: var(--accent-soft); } .crumb--onDark .crumb__here { color: var(--accent-soft); } /* ============ BOTÕES ============ */ .btn { display: inline-block; border-radius: 12px; font-size: 16px; letter-spacing: .01em; transition: background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); } .btn--primary { background: linear-gradient(180deg, var(--cta-from) 0%, var(--cta-mid) 52%, var(--cta-to) 100%); color: #FFFFFF; padding: 16px 32px; font-weight: 600; box-shadow: inset 0 1px 0 var(--cta-sheen), 0 1px 2px rgba(var(--cta-shadow-near-rgb), .25), 0 12px 26px -12px rgba(var(--cta-shadow-rgb), .6); } .btn--primary:hover { background: linear-gradient(180deg, var(--cta-hover-from) 0%, var(--cta-hover-to) 100%); transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--cta-sheen-hover), 0 2px 4px rgba(var(--cta-shadow-near-rgb), .22), 0 16px 32px -12px rgba(var(--cta-shadow-rgb), .55); } .btn--primary:active { transform: translateY(0); box-shadow: inset 0 2px 4px rgba(var(--cta-shadow-near-rgb), .25); } .btn--ghost { padding: 16px 30px; border: 1px solid rgba(var(--ink-rgb),.16); font-weight: 600; color: var(--ink); background: transparent; } .btn--ghost:hover { border-color: rgba(var(--ink-rgb),.45); background: rgba(var(--ink-rgb),.04); transform: translateY(-1px); } .btn--ghost-light { padding: 16px 30px; border: 1px solid rgba(255, 255, 255, .28); font-weight: 600; color: #FFFFFF; background: transparent; } .btn--ghost-light:hover { border-color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .06); transform: translateY(-1px); } /* ============ HERO DE SERVIÇO — BASE ============ */ .svc-hero { max-width: 1280px; margin: 0 auto; padding: 0 40px; } .svc-hero__grid { display: grid; gap: 56px; padding: 40px 0 64px; align-items: center; } .svc-hero__title { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 4.6vw, 58px); line-height: 1.04; letter-spacing: -.015em; margin: 16px 0 0; } .svc-hero__desc { font-size: 18px; line-height: 1.6; color: var(--ink-60); max-width: 520px; margin: 22px 0 0; } .svc-hero__actions { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; } /* Variante A — card de fato escuro */ .svc-hero--a .svc-hero__grid { grid-template-columns: 1.1fr .9fr; } .fact-card { background: var(--ink); border-radius: 20px; padding: 44px; color: #FFFFFF; position: relative; overflow: hidden; } .fact-card__mark { position: absolute; right: -30px; bottom: -30px; opacity: .12; pointer-events: none; } .fact-card__label { font-size: 13px; font-weight: 600; letter-spacing: .16em; color: var(--accent-soft); } .fact-card__value { font-family: var(--serif); font-size: clamp(40px, 4.6vw, 58px); line-height: 1.05; margin-top: 14px; } .fact-card__note { font-size: 15px; color: rgba(255, 255, 255, .7); line-height: 1.55; margin-top: 14px; max-width: 300px; } /* Variante B — hero escuro editorial */ .svc-hero--b { max-width: none; padding: 0; background: var(--ink); color: #FFFFFF; position: relative; overflow: hidden; } .svc-hero--b .svc-hero__inner { max-width: 1280px; margin: 0 auto; padding: 0 40px 72px; } .svc-hero--b .svc-hero__content { max-width: 760px; padding-top: 40px; } .svc-hero--b .svc-hero__desc { color: rgba(255, 255, 255, .65); } .svc-hero--b .svc-hero__mark { position: absolute; right: -70px; top: -70px; opacity: .07; pointer-events: none; } .fact-inline { display: flex; align-items: baseline; gap: 22px; margin-top: 44px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .14); flex-wrap: wrap; } .fact-inline__value { font-family: var(--serif); font-size: clamp(40px, 4.2vw, 54px); color: var(--accent-soft); line-height: 1; } .fact-inline__text { max-width: 380px; } .fact-inline__label { font-size: 12px; font-weight: 600; letter-spacing: .16em; color: rgba(255, 255, 255, .5); } .fact-inline__note { font-size: 14px; color: rgba(255, 255, 255, .7); line-height: 1.5; margin-top: 4px; } /* Variante C — card de fato menta */ .svc-hero--c .svc-hero__grid { grid-template-columns: 1.05fr .95fr; } .fact-card--mint { background: var(--mint); border: 1px solid var(--mint-line); border-radius: 20px; padding: 44px; color: var(--accent-deep); position: relative; overflow: hidden; } .fact-card--mint .fact-card__mark svg path { fill: var(--accent); } .fact-card--mint .fact-card__label { color: var(--accent-deep); opacity: .75; } .fact-card--mint .fact-card__value { color: var(--accent-deep); } .fact-card--mint .fact-card__note { color: rgba(var(--accent-deep-rgb), .8); } /* Variante D — fato tipográfico gigante */ .svc-hero--d .svc-hero__grid { grid-template-columns: 1.05fr .95fr; } .fact-giant { border: 1px solid var(--line); border-radius: 20px; padding: 48px 44px; text-align: left; position: relative; } .fact-giant::before { content: ""; position: absolute; top: 0; left: 44px; width: 64px; height: 3px; background: var(--accent); } .fact-giant__label { font-size: 13px; font-weight: 600; letter-spacing: .16em; color: var(--ink-50); } .fact-giant__value { font-family: var(--serif); font-size: clamp(56px, 7vw, 92px); line-height: 1; color: var(--accent-deep); margin-top: 16px; letter-spacing: -.02em; } .fact-giant__note { font-size: 15px; color: var(--ink-60); line-height: 1.55; margin-top: 18px; max-width: 320px; } /* ============ O QUE ESTÁ INCLUÍDO — VARIANTES ============ */ .inc { border-top: 1px solid var(--line); } .inc__inner { max-width: 1280px; margin: 0 auto; padding: 80px 40px; } .inc__title { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.3vw, 42px); line-height: 1.05; margin: 12px 0 44px; max-width: 600px; } /* A — grade 2x2 com moldura */ .inc--grid { background: var(--mist); } .inc--grid .inc__list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; } .inc--grid .inc__item { background: var(--paper); padding: 34px 36px; display: flex; gap: 18px; align-items: flex-start; } .inc__check { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--mint); color: var(--accent-deep); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; } .inc__item-title { font-weight: 700; font-size: 18px; } .inc__item-desc { font-size: 14px; color: var(--ink-60); margin-top: 7px; line-height: 1.55; } /* B — linhas editoriais numeradas */ .inc--rows { background: var(--paper); } .inc--rows .inc__item { display: grid; grid-template-columns: 90px 300px 1fr; gap: 32px; align-items: baseline; padding: 30px 0; border-top: 1px solid var(--line); } .inc--rows .inc__item:last-child { border-bottom: 1px solid var(--line); } .inc__num { font-family: var(--serif); font-size: 30px; color: var(--accent-soft); } .inc--rows .inc__item-title { font-size: 20px; } .inc--rows .inc__item-desc { margin-top: 0; font-size: 15px; } /* C — chips soltos em 2 colunas, fundo mist */ .inc--loose { background: var(--mist); } .inc--loose .inc__list { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 64px; } .inc--loose .inc__item { display: flex; gap: 18px; align-items: flex-start; } .inc--loose .inc__item-title { font-size: 19px; } /* D — bento com primeiro card menta */ .inc--bento { background: var(--paper); } .inc--bento .inc__list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .inc--bento .inc__item { border: 1px solid var(--line); border-radius: 16px; padding: 34px 36px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .inc--bento .inc__item:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(var(--ink-rgb),.08); } .inc--bento .inc__item--hi { background: var(--mint); border-color: var(--mint-line); } .inc--bento .inc__item--hi .inc__item-title { color: var(--accent-deep); } .inc--bento .inc__check { margin-bottom: 16px; background: var(--paper); } .inc--bento .inc__item--hi .inc__check { background: var(--paper); } /* ============ COMO FUNCIONA — VARIANTES ============ */ .how__title { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.3vw, 42px); line-height: 1.05; margin: 12px 0 44px; max-width: 560px; } /* A / D — bloco escuro 3 colunas */ .how--dark { background: var(--ink); color: #FFFFFF; position: relative; overflow: hidden; } .how--dark .how__inner { max-width: 1280px; margin: 0 auto; padding: 80px 40px; position: relative; z-index: 1; } .how--dark .how__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .how--dark .how__step { border-top: 2px solid var(--accent-soft); padding-top: 24px; } .how--dark.how--left .how__step { border-top: 0; border-left: 2px solid var(--accent-soft); padding-top: 0; padding-left: 24px; } .how__num { font-family: var(--serif); font-size: 26px; color: var(--accent-soft); } .how__name { font-family: var(--sans); font-weight: 700; font-size: 19px; margin-top: 12px; color: inherit; } .how__desc { font-size: 14px; color: rgba(255, 255, 255, .6); margin-top: 8px; line-height: 1.55; } .how--dark .how__mark { position: absolute; right: -60px; bottom: -60px; opacity: .07; pointer-events: none; } /* B — timeline vertical clara */ .how--timeline { background: var(--paper); border-top: 1px solid var(--line); } .how--timeline .how__inner { max-width: 1280px; margin: 0 auto; padding: 80px 40px; } .how--timeline .how__list { max-width: 720px; position: relative; } .how--timeline .how__step { position: relative; padding: 0 0 40px 56px; } .how--timeline .how__step::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: -8px; width: 2px; background: var(--mint-line); } .how--timeline .how__step:last-child { padding-bottom: 0; } .how--timeline .how__step:last-child::before { display: none; } .how--timeline .how__step::after { content: ""; position: absolute; left: 4px; top: 6px; width: 16px; height: 16px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 5px var(--mint); } .how--timeline .how__num { font-size: 22px; color: var(--accent-deep); } .how--timeline .how__desc { color: var(--ink-60); } /* C — 3 colunas claras com números gigantes */ .how--light { background: var(--paper); border-top: 1px solid var(--line); } .how--light .how__inner { max-width: 1280px; margin: 0 auto; padding: 80px 40px; } .how--light .how__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } .how--light .how__step { padding: 0 36px; border-left: 1px solid var(--line); } .how--light .how__step:first-child { padding-left: 0; border-left: 0; } .how--light .how__num { font-size: clamp(44px, 4.4vw, 60px); color: var(--accent-soft); line-height: 1; } .how--light .how__name { color: var(--ink); } .how--light .how__desc { color: var(--ink-60); } /* ============ CTA FINAL — VARIANTES ============ */ .cta { max-width: 1280px; margin: 0 auto; padding: 80px 40px; } .cta__title { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3vw, 38px); line-height: 1.08; } .cta__note { font-size: 16px; color: var(--ink-60); line-height: 1.6; margin: 16px 0 0; max-width: 520px; } /* A / C — grid com card menta */ .cta--card .cta__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; } .cta__box { background: var(--mint); border: 1px solid var(--mint-line); border-radius: 18px; padding: 36px; } .cta__box-name { font-family: var(--serif); font-size: 24px; color: var(--accent-deep); line-height: 1.15; } .cta__box .btn--primary { display: block; text-align: center; margin-top: 22px; padding: 16px; border-radius: 10px; } .cta__box-wa { display: block; text-align: center; margin-top: 12px; font-weight: 600; font-size: 14px; color: var(--accent-deep); transition: color .25s var(--ease); } .cta__box-wa:hover { color: var(--accent); } /* B — banda escura */ .cta--dark .cta__band { border-radius: 22px; padding: 56px 52px; background: var(--ink); color: #FFFFFF; display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; position: relative; overflow: hidden; } .cta--dark .cta__note { color: rgba(255, 255, 255, .7); } .cta__band-mark { position: absolute; left: -50px; top: -50px; opacity: .08; pointer-events: none; } .cta__band-actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; position: relative; z-index: 1; } .cta__band-actions .btn--primary { text-align: center; white-space: nowrap; } .cta__band-wa { text-align: center; font-weight: 600; font-size: 14px; color: var(--accent-soft); transition: color .25s var(--ease); } .cta__band-wa:hover { color: #FFFFFF; } /* D — banda menta */ .cta--mint .cta__band { border-radius: 22px; padding: 52px; background: var(--mint); border: 1px solid var(--mint-line); display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; } .cta--mint .cta__title { color: var(--accent-deep); } .cta--mint .cta__note { color: rgba(var(--ink-rgb),.65); margin-top: 12px; } /* ============ FOOTER COMPACTO ============ */ .footer-c { border-top: 1px solid var(--line); background: var(--mist); } .footer-c__inner { max-width: 1280px; margin: 0 auto; padding: 48px 40px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px; align-items: center; } .footer-c__brand { display: flex; align-items: center; gap: 11px; font-family: var(--serif); font-size: 17px; } .footer-c__legal { font-size: 13px; color: var(--ink-50); } .footer-c__legal a { transition: color .25s var(--ease); } .footer-c__legal a:hover { color: var(--accent-deep); } /* ============ MENU MOBILE ============ */ /* Abaixo de 1024px a .nav__links some. Sem este bloco o site fica sem navegação alguma no celular — só o logo e o WhatsApp. */ .nav__toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 0 9px; border: 1px solid var(--line); border-radius: 10px; background: transparent; cursor: pointer; flex: none; } .nav__toggle-bar { display: block; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform .25s var(--ease); } .nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) { transform: translateY(3.25px) rotate(45deg); } .nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); } .nav__drawer { display: flex; flex-direction: column; padding: 4px 40px 20px; border-top: 1px solid var(--line); background: var(--paper); opacity: 0; transform: translateY(-6px); transition: opacity .22s var(--ease), transform .22s var(--ease); } /* Vence a regra de display acima — o drawer nasce fora da árvore. */ .nav__drawer[hidden] { display: none; } .nav__drawer.is-open { opacity: 1; transform: none; } .nav__drawer a { padding: 14px 0; font-size: 16px; font-weight: 600; color: var(--ink-72); border-bottom: 1px solid var(--line); } .nav__drawer a:last-child { border-bottom: 0; } .nav__drawer .nav__drawer-cta { margin-top: 16px; padding: 14px 20px; text-align: center; border-radius: 10px; background: linear-gradient(180deg, var(--ink-lift) 0%, var(--ink) 100%); color: #FFFFFF; border-bottom: 0; box-shadow: inset 0 1px 0 var(--cta-sheen); } body.nav-open { overflow: hidden; } @media (max-width: 1024px) { .nav__toggle { display: flex; } } @media (max-width: 640px) { .nav__drawer { padding: 4px 24px 20px; } } /* ============ NAVEGAÇÃO DO RODAPÉ ============ */ /* Cobre as 20 páginas internas (a home entra pelo brand). Junto com o menu mobile, é o que tira 11 páginas da dependência de uma única fonte. */ .footer-c__nav { max-width: 1280px; margin: 0 auto; padding: 56px 40px 8px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; } .footer-c__col { display: flex; flex-direction: column; font-size: 14px; color: var(--ink-60); } .footer-c__col-title { color: var(--ink); font-weight: 700; margin-bottom: 12px; } .footer-c__col a { position: relative; align-self: flex-start; line-height: 2.05; transition: color .25s var(--ease); } .footer-c__col a::after { content: ""; position: absolute; left: 0; bottom: 4px; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } .footer-c__col a:hover { color: var(--accent-deep); } .footer-c__col a:hover::after { transform: scaleX(1); } /* Com a grade acima, a linha marca+legal passa a ser a base do rodapé. */ .footer-c__nav + .footer-c__inner { padding-top: 26px; border-top: 1px solid rgba(var(--ink-rgb), .08); } /* Variante enxuta do /evento/: é LP de tráfego pago, então o rodapé serve de saída para quem rolou até o fim sem se inscrever, não de menu. */ .footer-c__thin { max-width: 1280px; margin: 0 auto; padding: 0 40px 40px; display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 13px; font-weight: 600; color: var(--ink-50); } .footer-c__thin a { transition: color .25s var(--ease); } .footer-c__thin a:hover { color: var(--accent-deep); } .footer-c--lean .footer-c__inner { padding-bottom: 22px; } /* ============ ITENS DE LISTA QUE VIRAM LINK ============ */ /* Onde não existe página de destino, o item continua

e sem afordância. A diferença visível é o que separa "não é link" de "link quebrado". */ .inc__item--link .inc__item-title { transition: color .25s var(--ease); } .inc__item--link:hover .inc__item-title { color: var(--accent-deep); } .inc__go { display: inline-block; font-size: 14px; font-weight: 600; color: var(--accent-deep); margin-top: 12px; transition: transform .25s var(--ease); } .inc__item--link:hover .inc__go { transform: translateX(4px); } /* Na variante rows a seta vai dentro do

: a grade tem 3 colunas e um 4º filho cairia numa coluna implícita. / .inc--rows .incitem-title .incgo { margin-top: 0; margin-left: 8px; } / .inc--grid .inclist tem overflow:hidden para arredondar os cantos, e um outline com offset positivo seria cortado nas bordas. / .inc--grid .incitem--link:focus-visible { outline-offset: -3px; } .inc--grid .incitem--link:hover { background: rgba(var(--accent-rgb), .04); } / O check já é --mint e sumiria contra o tint do hover. / .inc--grid .incitem--link:hover .inccheck { background: var(--paper); } / ============ SUCESSO DE FORMULÁRIO (seções escuras) ============ / .form-success { text-align: center; padding: 24px 8px; } .form-successico { width: 56px; height: 56px; margin: 0 auto; border-radius: 999px; background: rgba(var(--accent-soft-rgb),.15); border: 1px solid rgba(var(--accent-soft-rgb),.4); color: var(--accent-soft); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; } .form-successtitle { font-family: var(--serif); font-weight: 400; font-size: 26px; color: #FFFFFF; margin-top: 18px; } .form-successtext { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .7); margin-top: 10px; max-width: 340px; margin-left: auto; margin-right: auto; } / ============ ACESSIBILIDADE / MOVIMENTO ============ / a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } , ::before, ::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ============ RESPONSIVO ============ */ @media (max-width: 1024px) { .navlinks { display: none; } .svc-hero--a .svc-herogrid, .svc-hero--c .svc-herogrid, .svc-hero--d .svc-herogrid { grid-template-columns: 1fr; gap: 40px; padding: 32px 0 56px; } .inc--rows .incitem { grid-template-columns: 64px 1fr; } .inc--rows .incitem-desc { grid-column: 2; } .how--dark .howgrid, .how--light .howgrid { grid-template-columns: 1fr; gap: 28px; } .how--light .howstep { padding: 0 0 0 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 24px; } .how--light .howstep:first-child { border-top: 0; padding-top: 0; } .cta--card .ctagrid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .navinner { padding: 14px 24px; } .navlogin { display: none; } .container, .crumb, .svc-hero { padding-left: 24px; padding-right: 24px; } .svc-hero--b .svc-heroinner { padding: 0 24px 56px; } .incinner, .how--dark .howinner, .how--timeline .howinner, .how--light .howinner { padding: 64px 24px; } .cta { padding: 64px 24px; } .cta--dark .ctaband, .cta--mint .ctaband { padding: 40px 28px; } .ctaband-actions { width: 100%; } .inc--grid .inclist, .inc--loose .inclist, .inc--bento .inclist { grid-template-columns: 1fr; } .inc--loose .inclist { gap: 28px; } .inc--rows .incitem { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; } .fact-card, .fact-card--mint { padding: 32px 28px; } .fact-giant { padding: 36px 28px; } .fact-giant::before { left: 28px; } .svc-heroactions .btn { width: 100%; text-align: center; } .footer-cinner { padding: 40px 24px; } }