*/ .t-lab { --brand:#0B2247; --brand-deep:#061638; --brand-tint:#E7EAF3; --accent:#B8975A; --accent-deep:#9C7D45; --accent-soft:#EFE5CC; } .t-starmed { --brand:#163A3D; --brand-deep:#0E2A2C; --brand-tint:#E9EEEC; --accent:#C2A45A; --accent-deep:#A8893F; --accent-soft:#F0E7D2; } .t-renoveja { --brand:#16715A; --brand-deep:#0F5544; --brand-tint:#E3F2EC; --accent:#1D9E75; --accent-deep:#0F6E56; --accent-soft:#DCF1E8; } .t-mascote { --brand:#3B2F4E; --brand-deep:#2A2138; --brand-tint:#EFEAF1; --accent:#E0936A; --accent-deep:#C57A52; --accent-soft:#FAE9DC; } section[id] { scroll-margin-top: 86px; } /* ---------- 2. Reset ----------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--sans); background: var(--offwhite); color: var(--text); line-height: 1.7; font-size: 17px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul { list-style: none; padding: 0; } button { font: inherit; cursor: pointer; border: none; background: none; } input, textarea, select { font: inherit; color: inherit; } /* Foco visível premium: mesmo token em todo elemento interativo. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; } /* ---------- 3. Typography ------------------------------------------------ */ h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.12; letter-spacing: -0.01em; color: var(--ink); } .h-display { font-size: clamp(2.4rem, 5.6vw, 4.3rem); line-height: 1.04; letter-spacing: -0.02em; } h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); } h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); } h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.2; } h4 { font-size: 1.1rem; line-height: 1.3; } p { color: var(--text); } strong { font-weight: 600; color: var(--ink); } .lead { font-size: clamp(1.08rem, 1.6vw, 1.3rem); line-height: 1.6; color: var(--text-muted); } .muted { color: var(--text-muted); } .balance { text-wrap: balance; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); } .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--accent); display: inline-block; } .eyebrow--center { justify-content: center; } /* Eyebrow sobre fundo escuro usa o gold puro (#B8975A = 4,34:1 sobre petrol, AA large text) */ .on-dark .eyebrow, .hero--dark .eyebrow, .bg-brand .eyebrow, .bg-ink .eyebrow { color: var(--accent); } /* ---------- 4. Layout ---------------------------------------------------- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: 880px; } .section { padding-block: clamp(64px, 9vw, 128px); } .section--tight { padding-block: clamp(48px, 6vw, 84px); } .section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 60px); } .section-head--center { margin-inline: auto; text-align: center; } .section-head .eyebrow { margin-bottom: 18px; } .section-head p { margin-top: 18px; } .grid { display: grid; gap: clamp(18px, 2.4vw, 28px); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-auto { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 72px); align-items: center; } /* surfaces / theme contexts */ .bg-white { background: var(--white); } .bg-sand { background: var(--sand-2); } .bg-tint { background: var(--brand-tint); } .bg-brand { background: var(--brand); } .bg-ink { background: var(--ink); } .on-dark, .bg-brand, .bg-ink { color: var(--on-dark); } .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--on-dark); } .on-dark p, .on-dark li { color: var(--on-dark-mut); } .divider { border: 0; height: 1px; background: var(--line); } /* ---------- 5. Buttons --------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--sans); font-weight: 600; font-size: .98rem; letter-spacing: .005em; padding: 15px 28px; border-radius: 999px; cursor: pointer; transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); white-space: normal; text-align: center; border: 1.5px solid transparent; } .btn svg, .btn .ico { width: 18px; height: 18px; flex: none; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; } /* Focus específico do botão: anel mais grosso, offset, e em superfície gold trocamos o ring petrol pelo ring branco-creme para contrastar com o fundo. */ .btn:focus-visible { outline: none; box-shadow: var(--focus-ring), 0 0 0 1px var(--white) inset; } .btn.btn--gold:focus-visible { box-shadow: 0 0 0 3px var(--brand-deep), 0 0 0 5px var(--accent-soft); } .btn--primary { background: var(--brand); color: var(--on-dark); box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--brand) 80%, #000); } .btn--primary:hover { background: var(--brand-deep); } /* Bump de especificidade igual ao seletor de nav (0,2,1) para vencer .nav-links a */ .btn.btn--gold, .nav-links a.btn--gold { background: var(--accent); color: var(--brand-deep); } .btn.btn--gold:hover, .nav-links a.btn--gold:hover { background: var(--accent-deep); color: var(--brand-deep); box-shadow: var(--shadow-md); } .btn--ghost { background: transparent; color: var(--brand); border-color: var(--line-strong); } .btn--ghost:hover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, transparent); } .btn--light { background: transparent; color: var(--on-dark); border-color: var(--line-dark); } .btn--light:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); } .btn--wa { background: #25D366; color: #06351c; } .btn--wa:hover { background: #1eb155; color: #fff; } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; } .btn-row--center { justify-content: center; } .textlink { color: var(--brand); font-weight: 600; display: inline-flex; align-items: center; gap: 7px; border-bottom: 1px solid transparent; transition: gap .2s var(--ease), border-color .2s var(--ease); white-space: nowrap; } .textlink svg { flex: none; width: 18px; height: 18px; } .textlink:hover { gap: 11px; border-color: var(--accent); } .on-dark .textlink { color: var(--accent); } /* ---------- 6. Header / Nav --------------------------------------------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; transition: background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); border-bottom: 1px solid transparent; } .site-header.is-solid { background: color-mix(in srgb, var(--offwhite) 88%, transparent); backdrop-filter: saturate(140%) blur(12px); border-bottom-color: var(--line); box-shadow: var(--shadow-sm); } .nav { display: flex; align-items: center; justify-content: space-between; height: 76px; transition: height .25s var(--ease-standard); } .site-header.is-scrolled .nav { height: 60px; } .brandmark { display: inline-flex; align-items: baseline; gap: 9px; font-family: var(--serif); font-weight: 500; font-size: 1.28rem; color: var(--ink); letter-spacing: -.01em; } .brandmark .mark { font-family: var(--serif); font-weight: 600; color: var(--brand); } .brandmark .tag { font-family: var(--sans); font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint); } .site-header.is-on-hero:not(.is-solid) .brandmark, .site-header.is-on-hero:not(.is-solid) .brandmark .mark { color: var(--on-dark); } /* Brandmark com a logo oficial Akiko Advisory (imagem). */ .brandmark--logo { gap: 0; padding: 4px 0; } .brandmark--logo img { display: block; height: 54px; width: auto; object-fit: contain; transition: height .25s var(--ease-standard), filter .25s var(--ease-standard); } .brandmark--logo .logo-dark { display: none; } .site-header.is-on-hero:not(.is-solid) .brandmark--logo .logo-dark { display: block; } .site-header.is-on-hero:not(.is-solid) .brandmark--logo .logo-light { display: none; } .site-header:not(.is-on-hero) .brandmark--logo .logo-dark, .site-header.is-solid .brandmark--logo .logo-dark { display: block; } .site-header:not(.is-on-hero) .brandmark--logo .logo-light, .site-header.is-solid .brandmark--logo .logo-light { display: none; } /* Quando o header está sobre o hero (escuro) E não-solid, mostra a variante clara */ .site-header.is-on-hero:not(.is-solid) .brandmark--logo .logo-dark { display: none; } .site-header.is-on-hero:not(.is-solid) .brandmark--logo .logo-light { display: block; } .site-header.is-scrolled .brandmark--logo img { height: 44px; } @media (max-width: 620px) { .brandmark--logo img { height: 56px; } .site-header.is-scrolled .brandmark--logo img { height: 46px; } } /* nav links viram claros no hero, EXCETO o CTA (mantém ink sobre dourado) */ .site-header.is-on-hero:not(.is-solid) .nav-links a:not(.btn) { color: var(--on-dark-mut); } .site-header.is-on-hero:not(.is-solid) .nav-toggle span { background: var(--on-dark); } .nav-links { display: flex; align-items: center; gap: 30px; } .nav-links a { font-size: .95rem; font-weight: 500; color: var(--text-muted); transition: color .2s; position: relative; } .nav-links a:hover, .nav-links a.is-active { color: var(--brand); } .nav-links a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--accent); border-radius: 2px; } .nav-cta { margin-left: 6px; } .nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 12px; z-index: 120; } .nav-toggle span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease), opacity .3s var(--ease); } .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2) { opacity: 0; } .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 900px) { .nav-toggle { display: flex; } .nav-links { position: fixed; inset: 0 0 0 auto; width: min(320px, 84vw); flex-direction: column; align-items: flex-start; justify-content: center; gap: 22px; background: var(--white); padding: 40px; transform: translateX(110%); transition: transform .4s var(--ease); box-shadow: var(--shadow-lg); } .nav-links.is-open { transform: translateX(0); } .nav-links a { font-size: 1.15rem; color: var(--ink); } .nav-cta { margin: 8px 0 0; } .nav-backdrop { position: fixed; inset: 0; background: rgba(10,28,28,.45); opacity: 0; visibility: hidden; transition: opacity .3s; z-index: 90; } .nav-backdrop.is-open { opacity: 1; visibility: visible; } } /* ---------- 7. Hero ------------------------------------------------------ */ .hero { position: relative; padding-top: clamp(120px, 17vh, 180px); padding-bottom: clamp(64px, 9vw, 120px); overflow: hidden; } .hero--dark { background: var(--brand-deep); color: var(--on-dark); } .hero--dark h1 { color: var(--on-dark); } .hero__inner { position: relative; z-index: 2; max-width: 820px; } .hero__inner--wide { max-width: 960px; } .hero .eyebrow { margin-bottom: 20px; } .hero p.lead { margin-top: 22px; max-width: 60ch; } .hero--dark .lead { color: var(--on-dark-mut); } .hero .support { margin-top: 22px; max-width: 64ch; font-size: 1.02rem; } .hero--dark .support { color: var(--on-dark-mut); } .hero .btn-row { margin-top: 30px; } /* Hero split layout — texto à esquerda, portrait à direita */ .hero--split .hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(36px, 5vw, 72px); align-items: center; } .hero__copy { min-width: 0; } .hero__portrait { min-width: 0; display: flex; justify-content: center; } .hero__proof { display: grid; gap: 12px; margin: 26px 0 0; padding: 0; } .hero__proof li { display: flex; align-items: flex-start; gap: 12px; color: var(--on-dark); font-size: 1rem; line-height: 1.5; } .hero__proof li svg { flex: none; width: 22px; height: 22px; color: var(--accent); margin-top: 2px; } .hero__proof strong { color: var(--on-dark); font-weight: 600; } .hero__micro { margin-top: 18px; font-size: .92rem; color: var(--on-dark-mut); display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .hero__micro strong { color: var(--accent); font-weight: 600; } @media (max-width: 900px) { .hero--split .hero__grid { grid-template-columns: 1fr; gap: 40px; } } /* decorative backdrop */ .hero__art { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .9; } .hero__art svg { position: absolute; } .glow { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; } /* ---------- 8. Cards ----------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 3vw, 34px); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); height: 100%; display: flex; flex-direction: column; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: var(--accent); } .card .card__ico { width: 50px; height: 50px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); margin-bottom: 20px; } .card .card__ico svg { width: 24px; height: 24px; } .card h3 { margin-bottom: 10px; } .card p { color: var(--text-muted); font-size: 1rem; } .card__link { margin-top: auto; padding-top: 18px; } /* brand ecosystem card */ .brandcard { position: relative; overflow: hidden; padding: 0; border-radius: var(--radius-lg); } .brandcard__top { padding: 30px 30px 26px; color: var(--on-dark); position: relative; overflow: hidden; } .brandcard__top h3 { color: var(--on-dark); position: relative; z-index: 2; } .brandcard__kicker { position: relative; z-index: 2; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; opacity: .85; margin-bottom: 14px; display: block; } .brandcard__body { padding: 24px 30px 30px; } .brandcard__body p { color: var(--text-muted); } .brandcard__body .card__link { padding-top: 20px; } /* numbered steps — grid fixo 4→2→1 (sem órfão) */ .steps { counter-reset: step; } .step { position: relative; padding-left: 4px; } .step__n { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--brand); width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--accent); background: var(--accent-soft); display: grid; place-items: center; margin-bottom: 18px; box-shadow: var(--shadow-sm); } .step h4 { margin-bottom: 8px; font-family: var(--sans); font-weight: 600; color: var(--ink); } .step p { color: var(--text-muted); font-size: .98rem; } /* Conector horizontal entre passos (desktop apenas) */ #como-funciona .grid-auto { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { #como-funciona .grid-auto { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { #como-funciona .grid-auto { grid-template-columns: 1fr; } } /* feature list with check */ .checklist { display: grid; gap: 14px; } .checklist--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 40px); } @media (max-width: 620px) { .checklist--cols { grid-template-columns: 1fr; } } .checklist li { display: flex; gap: 14px; align-items: flex-start; } .checklist .ck { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; margin-top: 2px; } .checklist .ck svg { width: 15px; height: 15px; } .checklist li span { color: var(--text-muted); } .on-dark .checklist li span { color: var(--on-dark-mut); } .on-dark .checklist .ck { background: rgba(255,255,255,.1); color: var(--accent); } /* pill chips */ .chips { display: flex; flex-wrap: wrap; gap: 10px; } .chip { font-size: .9rem; font-weight: 500; padding: 9px 16px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); color: var(--text-muted); } .on-dark .chip { background: rgba(255,255,255,.06); border-color: var(--line-dark); color: var(--on-dark-mut); } /* ---------- 9. Services (priced) ---------------------------------------- */ .service { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(26px, 3vw, 38px); height: 100%; display: flex; flex-direction: column; transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s; box-shadow: var(--shadow-sm); } .service:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-4px); border-color: var(--accent); } .service .btn-row, .service .card__link { margin-top: auto; } .service__num { font-family: var(--serif); font-size: .95rem; color: var(--gold-ink); font-weight: 600; } .service h3 { margin: 6px 0 14px; } .service__desc { color: var(--text-muted); font-size: 1rem; } .service__desc strong { color: var(--ink); font-weight: 600; } .service__deliver { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--line-strong); } .service__deliver h4 { font-family: var(--sans); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 12px; } .service__price { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; } .service__price .amount { font-family: var(--serif); font-size: clamp(1.7rem, 2.4vw, 2.1rem); font-weight: 600; color: var(--ink); line-height: 1; letter-spacing: -.01em; display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: nowrap; white-space: nowrap; } .service__price .amount .from { font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); } .service__price .amount .num { white-space: nowrap; } .service__price .label { font-size: .82rem; color: var(--text-faint); } .service__anchor { margin-top: 10px; font-size: .85rem; color: var(--text-muted); font-style: italic; } .service.is-featured { border-color: var(--accent); border-width: 2px; box-shadow: var(--shadow-lg); position: relative; z-index: 2; transform: translateY(-6px); background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 50%, var(--white)) 0%, var(--white) 35%); } .service.is-featured:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg), var(--shadow-card-hover); } @media (max-width: 620px) { .service.is-featured { transform: none; } .service.is-featured:hover { transform: translateY(-4px); } } .service__badge { position: absolute; top: -13px; left: 28px; background: var(--accent); color: var(--brand-deep); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; box-shadow: var(--shadow-md); } /* ---------- 10. Audience / two-col feature ------------------------------ */ .feature { display: grid; gap: 14px; } .feature h3 { display: flex; align-items: center; gap: 12px; } .feature h3 .ico { width: 40px; height: 40px; border-radius: 11px; background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; flex: none; } .feature h3 .ico svg { width: 21px; height: 21px; } /* note / disclaimer */ .note { border-left: 3px solid var(--accent); background: var(--accent-soft); padding: 20px 24px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .note p { color: var(--ink-soft); font-size: .98rem; } .note strong { color: var(--ink); } .on-dark .note { background: rgba(255,255,255,.06); } .on-dark .note p { color: var(--on-dark-mut); } .on-dark .note strong { color: var(--on-dark); } /* stat */ .stat { text-align: left; } .stat .num { font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 600; color: var(--brand); line-height: 1; } .on-dark .stat .num { color: var(--accent); } .stat .lbl { color: var(--text-muted); margin-top: 8px; font-size: .95rem; } .on-dark .stat .lbl { color: var(--on-dark-mut); } /* quote */ .quote { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.3; font-weight: 500; color: var(--ink); letter-spacing: -.01em; } .on-dark .quote { color: var(--on-dark); } .quote .accent { color: var(--accent-deep); } .on-dark .quote .accent { color: var(--accent); } /* ---------- 11. FAQ ------------------------------------------------------ */ .faq { border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 4px; cursor: pointer; list-style: none; font-family: var(--serif); font-size: 1.18rem; font-weight: 500; color: var(--ink); } .faq summary::-webkit-details-marker { display: none; } .faq summary .pm { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; transition: transform .3s var(--ease), border-color .3s, background .3s; position: relative; } .faq summary .pm::before, .faq summary .pm::after { content: ""; position: absolute; background: var(--brand); border-radius: 2px; } .faq summary .pm::before { width: 12px; height: 2px; } .faq summary .pm::after { width: 2px; height: 12px; transition: transform .3s var(--ease); } .faq details[open] summary .pm { background: var(--brand); border-color: var(--brand); } .faq details[open] summary .pm::before, .faq details[open] summary .pm::after { background: var(--on-dark); } .faq details[open] summary .pm::after { transform: rotate(90deg); } .faq .faq__a { padding: 0 4px 26px; } .faq .faq__a p { color: var(--text-muted); max-width: 70ch; } /* ---------- 12. CTA band ------------------------------------------------- */ .cta-band { position: relative; overflow: hidden; } .cta-band__inner { position: relative; z-index: 2; text-align: center; max-width: 760px; margin-inline: auto; } .cta-band h2 { color: var(--on-dark); } .cta-band p { color: var(--on-dark-mut); margin-top: 18px; } .cta-band .btn-row { margin-top: 34px; justify-content: center; } /* ---------- 13. Form ----------------------------------------------------- */ .form { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(26px, 3.5vw, 44px); box-shadow: var(--shadow); } .form__grid { display: grid; gap: 18px; } .field { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .field label { font-size: .85rem; font-weight: 600; color: var(--ink); letter-spacing: .01em; } .field label .req { color: var(--accent-deep); } .field input, .field textarea, .field select { /* color/background fixos: jamais herdar --on-dark da seção .on-dark */ color: var(--ink); background: var(--white); caret-color: var(--brand); border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; font-size: 16px; /* 16px evita zoom iOS */ min-height: 48px; transition: border-color .2s, background .2s, box-shadow .2s; width: 100%; max-width: 100%; box-sizing: border-box; } .field input::placeholder, .field textarea::placeholder { color: #6B7670; opacity: 1; } .field select { text-overflow: ellipsis; } .field select option { color: var(--ink); background: var(--white); } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent-deep); background: var(--white); box-shadow: var(--focus-ring); } .field textarea { resize: vertical; min-height: 120px; } .form__note { font-size: .85rem; color: var(--text-faint); margin-top: 4px; } .form__feedback { font-size: .92rem; margin-top: 6px; min-height: 1.2em; } .form__feedback.is-ok { color: #0E6B50; font-weight: 600; } .form__feedback.is-err { color: #B23A48; font-weight: 600; } /* ---------- 14. Footer --------------------------------------------------- */ .site-footer { background: var(--ink); color: var(--on-dark-mut); padding-block: clamp(56px, 7vw, 84px) 36px; } .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; } .footer-brand .brandmark { color: var(--on-dark); margin-bottom: 16px; } .footer-brand .brandmark .mark { color: var(--accent); } .footer-brand .brandmark--logo img { height: 72px; } @media (max-width: 620px) { .footer-brand .brandmark--logo img { height: 58px; } } .footer-brand p { color: var(--on-dark-mut); font-size: .96rem; max-width: 36ch; } .footer-col h4 { font-family: var(--sans); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark); margin-bottom: 16px; } .footer-col a, .footer-col li { display: block; font-size: .96rem; color: var(--on-dark-mut); margin-bottom: 11px; transition: color .2s; } .footer-col a:hover { color: var(--accent); } .footer-bottom { margin-top: clamp(40px, 5vw, 56px); padding-top: 26px; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; align-items: center; font-size: .85rem; } .footer-bottom .sig { color: var(--on-dark); font-family: var(--serif); } .footer-legal { font-size: .8rem; color: var(--text-faint); max-width: 70ch; margin-top: 18px; line-height: 1.6; } /* ---------- 15. Floating WhatsApp --------------------------------------- */ .fab { position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px); z-index: 95; display: inline-flex; align-items: center; gap: 0; background: #25D366; color: #06351c; border-radius: 999px; padding: 15px; box-shadow: 0 16px 36px -12px rgba(8,53,28,.5); transition: gap .3s var(--ease), padding .3s var(--ease), transform .25s var(--ease); font-weight: 600; } .fab svg { width: 26px; height: 26px; flex: none; } .fab .fab__label { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .35s var(--ease); font-size: .95rem; } .fab:hover { gap: 10px; padding-inline: 20px; transform: translateY(-2px); } .fab:hover .fab__label { max-width: 180px; } @media (max-width: 620px) { .fab { padding: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); } .fab .fab__label { display: none; } } /* ---------- 15a. Sticky bottom bar (mobile) ---------------------------- */ .stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 96; display: none; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--offwhite) 94%, transparent); backdrop-filter: saturate(160%) blur(12px); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(13,28,28,.08); transform: translateY(110%); transition: transform .35s var(--ease-standard); } .stickybar.is-visible { transform: translateY(0); } .stickybar .btn { width: 100%; padding: 13px 22px; font-size: .98rem; box-shadow: var(--shadow-md); } @media (max-width: 620px) { .stickybar { display: block; } } /* ---------- 15b. Portrait — removido; substituído pelo componente .dossier (seção 19.3) ---------- */ /* ---------- 16. Reveal animation (suave, sem fantasma) ------------------ */ .reveal { opacity: .35; transform: translateY(12px); transition: opacity .45s var(--ease), transform .45s var(--ease); } .reveal.is-in { opacity: 1; transform: none; } .reveal[data-d="1"] { transition-delay: .04s; } .reveal[data-d="2"] { transition-delay: .08s; } .reveal[data-d="3"] { transition-delay: .12s; } .reveal[data-d="4"] { transition-delay: .16s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ---------- 17. Misc utilities ------------------------------------------ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .text-center { text-align: center; } .mt-s { margin-top: 14px; } .mt-m { margin-top: 26px; } .mt-l { margin-top: 44px; } .maxw-prose { max-width: 64ch; } .skip-link { position: absolute; left: 16px; top: -60px; background: var(--brand); color: #fff; padding: 10px 18px; border-radius: 8px; z-index: 200; transition: top .2s; } .skip-link:focus { top: 16px; } /* ---------- 17b. Pain list & case cards --------------------------------- */ .painlist { display: grid; gap: 14px; margin-top: clamp(20px, 3vw, 32px); } .painlist li { position: relative; padding-left: 34px; color: var(--text); } .painlist li::before { content: ""; position: absolute; left: 0; top: .82em; width: 18px; height: 2px; background: var(--accent); border-radius: 2px; } .case { display: flex; flex-direction: column; gap: 14px; height: 100%; padding: clamp(22px, 3vw, 30px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .case:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--accent); } .case[id] { scroll-margin-top: 96px; } .case__kicker { font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); } .case h3 { margin-top: 2px; } .case dl { display: grid; gap: 12px; margin: 4px 0 0; } .case dl > div { display: grid; gap: 3px; } .case dt { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); } .case dd { margin: 0; color: var(--text-muted); font-size: .98rem; } .case__status { padding-top: 6px; display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; color: var(--text); } .case__status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; } .case__visual { margin: -8px -8px 8px; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; background: var(--brand-tint); position: relative; } .case__visual svg { width: 100%; height: 100%; display: block; } .case__metric { margin-top: 6px; font-size: .92rem; color: var(--text-muted); padding: 10px 14px; background: var(--brand-tint); border-radius: var(--radius-sm); } .case__metric strong { color: var(--brand); font-weight: 600; } /* ---------- 17a. Diferenciais list ---------- */ .differentials { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.2vw, 28px) clamp(28px, 4vw, 52px); } .differentials li { display: flex; gap: 16px; align-items: baseline; padding-bottom: 18px; border-bottom: 1px solid var(--line); } .differentials .num { font-family: var(--serif); font-weight: 500; color: var(--accent-deep); font-size: clamp(1.2rem, 1.5vw, 1.45rem); min-width: 2.2em; line-height: 1; letter-spacing: .02em; } .differentials p { color: var(--text); line-height: 1.55; font-size: 1rem; margin: 0; } .differentials strong { color: var(--ink); font-weight: 600; } @media (max-width: 720px) { .differentials { grid-template-columns: 1fr; gap: 14px; } } /* ---------- 17b1. Addon cards (serviços adicionais) ---------- */ .addon { padding: clamp(20px, 2.4vw, 26px); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); transition: border-color .25s var(--ease), transform .25s var(--ease); } .addon:hover { border-color: var(--accent); transform: translateY(-2px); } .addon h4 { font-family: var(--serif); font-weight: 500; font-size: 1.02rem; color: var(--ink); margin-bottom: 8px; line-height: 1.3; } .addon p { color: var(--text-muted); font-size: .94rem; line-height: 1.55; } /* ---------- 17b2. Persona cards (Para Quem) ---------- */ .persona { padding: clamp(22px, 2.6vw, 30px); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .persona:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow); } .persona__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--brand-tint); color: var(--brand); margin-bottom: 18px; } .persona__ico svg { width: 22px; height: 22px; } .persona h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.1rem, 1.35vw, 1.22rem); color: var(--ink); position: relative; padding-bottom: 14px; margin-bottom: 12px; line-height: 1.25; } .persona h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 2px; background: var(--accent); border-radius: 2px; } .persona p { color: var(--text-muted); font-size: .98rem; line-height: 1.6; } .persona p em { color: var(--ink-soft); font-style: italic; } /* ---------- 17c. Credentials strip (autoridade acima da dobra) ---------- */ .creds-strip { background: var(--offwhite); padding: clamp(20px, 2.6vw, 32px) 0; border-bottom: 1px solid var(--line); } .creds-strip__label { text-align: center; font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 14px; } .creds { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(14px, 2.4vw, 28px) clamp(22px, 4vw, 56px); } .creds li { display: inline-flex; align-items: baseline; gap: 8px; position: relative; } .creds li + li::before { content: ""; position: absolute; left: clamp(-12px, -1.8vw, -22px); top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); transform: translateY(-50%); } .creds__role { font-family: var(--serif); font-weight: 500; color: var(--ink); font-size: clamp(.95rem, 1.1vw, 1.05rem); letter-spacing: .005em; } .creds__sub { color: var(--text-muted); font-size: clamp(.88rem, 1.05vw, .98rem); } .creds__sub::before { content: "·"; color: var(--accent); margin-right: 6px; font-weight: 700; } /* ---------- 17d. CTA microcopy ---------------------------------------- */ .cta-micro { margin-top: 14px; font-size: .9rem; color: var(--text-muted); line-height: 1.5; } .on-dark .cta-micro { color: var(--on-dark-mut); } .cta-micro strong { color: var(--ink); font-weight: 600; } .on-dark .cta-micro strong { color: var(--accent); } /* ---------- 17e. Testimonials ---------------------------------------- */ .testimonial { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(26px, 3vw, 36px); display: flex; flex-direction: column; gap: 18px; height: 100%; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .testimonial:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow); } .testimonial.is-featured { border-color: var(--accent); box-shadow: var(--shadow); background: var(--accent-soft); } .testimonial__quote { width: 28px; height: 28px; color: var(--accent); opacity: .9; } .testimonial blockquote { margin: 0; } .testimonial blockquote p { font-family: var(--serif); font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.55; color: var(--ink-soft); font-style: italic; } .testimonial figcaption { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 2px; } .testimonial figcaption strong { color: var(--ink); font-weight: 600; font-size: .95rem; } .testimonial figcaption span { color: var(--text-muted); font-size: .85rem; } /* ---------- 17f. B2B card (institucional) ---------------------------- */ .b2b-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(26px, 3vw, 38px); box-shadow: var(--shadow); } .b2b-card h3 { font-family: var(--serif); font-weight: 500; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .b2b-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .b2b-list li { position: relative; padding-left: 22px; font-size: .98rem; color: var(--text-muted); line-height: 1.55; } .b2b-list li::before { content: ""; position: absolute; left: 0; top: .58em; width: 10px; height: 2px; background: var(--accent); border-radius: 2px; } .b2b-list strong { color: var(--ink); font-weight: 600; } .b2b-list__foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .88rem; color: var(--text-faint); } /* ---------- 17h. Legal page (Política de Privacidade) ---------------- */ .legal h1 { font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1.1; } .legal h2 { font-size: clamp(1.2rem, 1.8vw, 1.4rem); font-family: var(--sans); font-weight: 600; letter-spacing: -.005em; color: var(--ink); padding-top: 6px; border-top: 1px solid var(--line); padding-bottom: 4px; } .legal p, .legal li { max-width: 72ch; color: var(--text); line-height: 1.65; } .legal .painlist li { color: var(--text); } .legal .painlist li::before { background: var(--accent); } .legal a { color: var(--brand); border-bottom: 1px solid var(--accent); } .legal a:hover { background: var(--accent-soft); } /* ---------- 17g. Form check (consent LGPD) --------------------------- */ .field--check { padding-top: 4px; } .check { display: flex; align-items: flex-start; gap: 12px; font-size: .9rem; color: var(--text-muted); line-height: 1.5; cursor: pointer; } .check input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--accent-deep); cursor: pointer; } .check a { color: var(--brand); font-weight: 600; border-bottom: 1px solid var(--accent); } .check a:hover { border-bottom-color: var(--brand); } /* ---------- 18. Responsive ---------------------------------------------- */ @media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } .split { grid-template-columns: minmax(0, 1fr); gap: 36px; } .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 620px) { body { font-size: 16px; } .grid-2, .grid-3 { grid-template-columns: 1fr; } .footer-top { grid-template-columns: 1fr; } .btn { width: 100%; } .btn-row .btn { flex: 1 1 100%; } .service__badge { left: 50%; transform: translateX(-50%); } /* ---------- 18a. Carrossel mobile (serviços + cases) ----------------- */ /* Snap+peek: cards viram um carrossel horizontal com peek de ~12% do próximo. Mantém a leitura tátil ("isto é um produto, deslize") em vez de stack monótono. */ #servicos > .container > .grid-3, #cases > .container > .grid-3 { display: flex; flex-direction: row; grid-template-columns: none; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 14px; /* sangra para fora do container para o peek "vazar" na borda */ margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); padding-block: 18px 22px; scroll-padding-inline-start: var(--gutter); } #servicos > .container > .grid-3::-webkit-scrollbar, #cases > .container > .grid-3::-webkit-scrollbar { display: none; } #servicos > .container > .grid-3 > *, #cases > .container > .grid-3 > * { flex: 0 0 88%; /* deixa 12% para o peek do próximo */ max-width: 360px; scroll-snap-align: start; } /* Card destacado mantém destaque dentro do carrossel sem translate (evita clipping) */ .service.is-featured { transform: none; } .service.is-featured:hover { transform: translateY(-4px); } /* Indicador sutil de "tem mais para o lado" */ #servicos > .container > .grid-3::after, #cases > .container > .grid-3::after { content: ""; flex: 0 0 8px; } } /* ========================================================================== 19. CLINICAL VENTURE LAB — camada de elevação (v4 · 2026-06-15) Direção: editorial-institucional. Atmosfera nas zonas escuras, objeto de marca proprietário (dossiê clínico) no lugar de foto, ritmo dramático no problema, galeria escura para a prova de execução. Nada de stock, nada de IA. ========================================================================== */ /* ---------- 19.0 Tokens da elevação ------------------------------------- */ :root { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); --gold-line: rgba(184,151,90,.34); } /* ---------- 19.1 Atmosfera nas seções escuras --------------------------- */ /* Textura de grão sutil + dot-grid científico só onde há fundo profundo. Mantém as seções claras 100% limpas (legibilidade do corpo intacta). */ .hero--dark, .section.bg-brand, .site-footer { position: relative; isolation: isolate; } .hero--dark::after, .section.bg-brand::after, .site-footer::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--grain); background-size: 180px 180px; opacity: .08; mix-blend-mode: soft-light; } .section.bg-brand > .container, .site-footer > .container { position: relative; z-index: 1; } /* dot-grid de blueprint, esmaecendo — atmosfera de laboratório, não ruído */ .hero--dark .hero__art { background-image: radial-gradient(rgba(184,151,90,.12) 1px, transparent 1.4px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(130% 90% at 72% 18%, #000 0%, transparent 72%); mask-image: radial-gradient(130% 90% at 72% 18%, #000 0%, transparent 72%); } /* ---------- 19.2 Hero — composição mais editorial ----------------------- */ /* Eyebrow dourado com contraste AA conforme o fundo (corrige WCAG em sand/petróleo) */ .bg-sand .eyebrow { color: var(--gold-ink-sand); } .on-dark .eyebrow, .hero--dark .eyebrow, .section.bg-brand .eyebrow { color: #C2A45A; } .hero .h-display { letter-spacing: -.025em; } /* respiro: a lead do hero um pouco mais contida e clara */ .hero__copy .lead { color: var(--on-dark); opacity: .92; } /* ---------- 19.3 Dossiê clínico (objeto de marca; substitui a foto) ----- */ .dossier { position: relative; width: 100%; max-width: 420px; margin-inline: auto; } .dossier__frame { position: absolute; z-index: 1; pointer-events: none; left: 22px; right: -16px; top: 22px; bottom: -18px; border: 1.5px solid var(--accent); border-radius: var(--radius-lg); opacity: .65; } .dossier__card { position: relative; z-index: 2; overflow: hidden; border-radius: var(--radius-lg); padding: clamp(26px, 3vw, 36px); color: var(--on-dark); border: 1px solid rgba(244,241,234,.14); background: radial-gradient(120% 92% at 100% 0%, rgba(184,151,90,.16), transparent 52%), linear-gradient(168deg, #122E5C 0%, #061638 58%, #03102B 100%); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 26px); } /* anéis concêntricos decorativos (cirúrgico/alvo) */ .dossier__card::before { content: ""; position: absolute; z-index: 0; pointer-events: none; right: -86px; top: -86px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, transparent 0 46%, var(--gold-line) 46% 47%, transparent 47% 62%, var(--gold-line) 62% 63%, transparent 63% 79%, var(--gold-line) 79% 80%, transparent 80%); opacity: .3; } .dossier__card > * { position: relative; z-index: 1; } .dossier__head { display: flex; align-items: center; gap: 15px; } .dossier__seal { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-weight: 600; font-size: 1.3rem; letter-spacing: .01em; color: var(--accent); border: 1.5px solid rgba(184,151,90,.55); background: radial-gradient(circle at 32% 26%, rgba(184,151,90,.22), transparent 72%); } /* foto real da Dra. dentro do selo (pequena, circular, com aro dourado) */ .dossier__seal--photo { padding: 0; overflow: hidden; background: var(--brand-deep); border-color: rgba(184,151,90,.75); box-shadow: 0 0 0 4px rgba(184,151,90,.12); } .dossier__seal--photo picture { width: 100%; height: 100%; display: block; } .dossier__seal--photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 18%; border-radius: 50%; } .dossier--cv .dossier__seal--photo { width: 76px; height: 76px; } .dossier__name { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.22rem; color: var(--on-dark); line-height: 1.12; } .dossier__role { display: block; margin-top: 6px; font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-mut); } /* diagrama da transformação — visualiza a própria proposta de valor */ .dossier__flow { display: grid; gap: 0; padding: 2px 0; } .dossier__flow li { position: relative; display: flex; align-items: center; gap: 16px; padding: 11px 0; } .dossier__flow li::before { content: ""; position: absolute; left: 5.25px; top: -50%; width: 1.5px; height: 100%; background: linear-gradient(180deg, rgba(184,151,90,.25), var(--accent)); } .dossier__flow li:first-child::before { display: none; } .dossier__flow .node { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--accent); background: #061638; z-index: 1; } .dossier__flow li.is-key .node { background: var(--accent); box-shadow: 0 0 0 4px rgba(184,151,90,.18); } .dossier__flow .lbl { font-size: .98rem; color: var(--on-dark-mut); letter-spacing: .005em; } .dossier__flow li.is-key .lbl { color: var(--on-dark); font-weight: 600; } .dossier__flow .lbl small { display: block; font-size: .72rem; color: var(--on-dark-mut); opacity: .8; font-weight: 400; letter-spacing: .02em; margin-top: 1px; } .dossier__foot { display: flex; align-items: center; gap: 11px; padding-top: 18px; border-top: 1px solid var(--line-dark); font-size: .82rem; color: var(--on-dark-mut); letter-spacing: .01em; } .dossier__foot .live { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #5BD08A; box-shadow: 0 0 0 4px rgba(91,208,138,.16); } .dossier__foot strong { color: var(--on-dark); font-weight: 600; } /* variante "CV" — linha do tempo de credenciais (seção Autoridade) */ .dossier--cv .cv-list { display: grid; } .dossier--cv .cv-list li { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line-dark); } .dossier--cv .cv-list li:last-child { border-bottom: 0; padding-bottom: 0; } .dossier--cv .cv-list .mk { position: relative; flex: none; width: 11px; height: 11px; margin-top: 6px; border-radius: 50%; border: 1.5px solid var(--accent); background: #061638; } .dossier--cv .cv-list li:not(:last-child) .mk::after { content: ""; position: absolute; left: 50%; top: 14px; width: 1.5px; height: 30px; background: var(--gold-line); transform: translateX(-50%); } .dossier--cv .cv-list .inst { display: block; font-family: var(--serif); font-weight: 500; color: var(--on-dark); font-size: 1.02rem; line-height: 1.25; } .dossier--cv .cv-list .desc { display: block; font-size: .8rem; color: var(--on-dark-mut); letter-spacing: .02em; margin-top: 2px; } .dossier--cv .cv-list .desc b { color: var(--accent); font-weight: 600; } @media (max-width: 900px) { .dossier { max-width: 360px; } .dossier__frame { left: 16px; right: -10px; top: 16px; bottom: -12px; } } /* ---------- 19.4 Problema — "manifesto" / ledger de risco --------------- */ /* Drama sem fundo escuro (a galeria de cases é a âncora escura do meio). Statement serifado forte + riscos numerados em régua editorial. */ #problema { background: var(--sand-2); } #problema .section-head h2 { font-size: clamp(2rem, 4vw, 3.05rem); line-height: 1.06; } #problema .section-head .lead strong { color: var(--ink); } #problema .lead--statement { font-family: var(--serif); font-weight: 500; font-style: normal; font-size: clamp(1.25rem, 2.3vw, 1.75rem); line-height: 1.32; color: var(--ink); letter-spacing: -.01em; } #problema .lead--statement .accent { color: var(--gold-ink-sand); } #problema .painlist { counter-reset: pain; border-top: 1px solid var(--line-strong); margin-top: clamp(28px, 4vw, 44px); gap: 0; } #problema .painlist li { counter-increment: pain; position: relative; padding: clamp(18px, 2.4vw, 24px) 0 clamp(18px, 2.4vw, 24px) clamp(56px, 7vw, 76px); border-bottom: 1px solid var(--line-strong); color: var(--ink-soft); font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.5; } #problema .painlist li::before { content: counter(pain, decimal-leading-zero); position: absolute; left: 0; top: clamp(16px, 2.2vw, 22px); width: auto; height: auto; background: none; border-radius: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--gold-ink-sand); line-height: 1; letter-spacing: .01em; } #problema .painlist li strong { color: var(--ink); } /* ---------- 19.5 Cases — galeria escura (âncora escura do meio) --------- */ /* As provas de execução viram "prints" claros suspensos sobre petróleo profundo — leitura de galeria/portfólio premium. */ #cases .section-head .lead { color: var(--on-dark-mut); } #cases .muted { color: var(--on-dark-mut); } .section.bg-brand .case { background: linear-gradient(180deg, #FFFFFF 0%, #FCFBF7 100%); border-color: rgba(244,241,234,.10); box-shadow: var(--shadow), 0 28px 60px -34px rgba(0,0,0,.55); } .section.bg-brand .case:hover { border-color: var(--accent); box-shadow: var(--shadow-card-hover), 0 30px 64px -30px rgba(0,0,0,.6); } /* o cartão é claro mesmo dentro da galeria escura: o texto interno NÃO herda on-dark */ .section.bg-brand .case h3, .section.bg-brand .case h4 { color: var(--ink); } .section.bg-brand .case dd { color: var(--text-muted); } .section.bg-brand .case dt { color: var(--text-muted); } .section.bg-brand .case__status { color: var(--text); } .section.bg-brand .case__metric strong { color: var(--brand); } /* ---------- 19.6 "Para quem" ------------------------------------------- */ /* Índice numerado removido de propósito: o device "01/02/03" fica reservado ao risk-ledger do Problema e à lista de Diferenciais, para não virar tique. */ /* ---------- 19.7 Serviços — Tier 2 ainda mais dominante ----------------- */ .service.is-featured::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); border-radius: var(--radius) var(--radius) 0 0; } .service__badge { background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%); } /* ---------- 19.8 Micro-refinos editoriais ------------------------------- */ /* régua dourada fina abaixo do título de seção centralizado — assinatura */ .section-head--center .eyebrow--center { position: relative; } /* divisor superior fino em seções claras alternadas para estrutura editorial */ #solucao, #diferenciais { position: relative; } #solucao::before, #diferenciais::before { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: 0; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent 60%); } /* hover dos textlinks dentro da galeria escura: sublinhado dourado visível */ .section.bg-brand .case .textlink { color: var(--brand); } /* foco visível reforçado também em cartões clicáveis do dossiê (a11y) */ .dossier a:focus-visible { box-shadow: var(--focus-ring); border-radius: 8px; } /* ---------- 19.9 Mobile — mensagem primeiro, dossiê depois -------------- */ /* No celular o headline + CTA precisam vir antes do dossiê (CTA acima da dobra). O objeto de marca entra como reforço logo abaixo. */ @media (max-width: 900px) { .hero--split .hero__portrait { order: 0; margin-top: 6px; } .hero--split .hero__copy { order: -1; } } @media (max-width: 620px) { /* headline forte, porém sem empurrar tudo: leve contenção no mobile */ .hero .h-display { font-size: clamp(2.15rem, 8.6vw, 2.9rem); line-height: 1.06; } /* dossiê ocupa a largura confortavelmente, sem moldura vazando */ .dossier { max-width: 100%; } .dossier__frame { right: -8px; bottom: -10px; } } /* ========================================================================== 19.10 — Correções pós-QA (responsivo, ritmo e disciplina de gold) ========================================================================== */ /* (a) Preço do Tier 2 ("R$ 3.500–6.000") não estoura o card do carrossel a 320px */ @media (max-width: 600px) { .service__price .amount { font-size: 1.42rem; } .service__price .amount .num { white-space: normal; } } /* (b) Tablet 621–900px: as grades de 3 itens (serviços/cases/depoimentos) empilham em 1 coluna em vez de virar "2 + 1 órfão". */ @media (min-width: 621px) and (max-width: 900px) { #servicos > .container > .grid-3, #servicos .addons > .grid-3, #cases > .container > .grid-3, #depoimentos > .container > .grid-3 { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; } .service.is-featured { transform: none; } .service.is-featured:hover { transform: translateY(-4px); } } /* (c) Dossiê CV: respiro extra em telas muito estreitas */ @media (max-width: 520px) { .dossier__card { padding: 22px; } } /* (d) Institucional vira faixa escura premium (ritmo + gravidade B2B). O b2b-card permanece claro e "flutua" — texto interno NÃO herda on-dark. */ #institucional .b2b-card h3 { color: var(--ink); } #institucional .b2b-card .b2b-list li { color: var(--text-muted); } #institucional .b2b-card .b2b-list strong { color: var(--ink); } #institucional .b2b-card .b2b-list__foot { color: var(--text-faint); } #institucional .b2b-card { box-shadow: var(--shadow), 0 28px 60px -34px rgba(0,0,0,.5); } /* (e) Card RenoveJá: logo real numa "placa de marca" clara (azul suave do próprio logo) */ .case__visual--logo { background: linear-gradient(135deg, #EAF3FC 0%, #D8E9F7 100%); display: grid; place-items: center; padding: clamp(14px, 2.6vw, 22px); } .case__visual--logo img { width: auto; height: auto; max-width: 60%; max-height: 84%; object-fit: contain; } /* variante quente (logo Mascote, laranja) — recortado edge-to-edge, então limita pela altura */ .case__visual--logo.case__visual--logo-warm { background: linear-gradient(135deg, #FFF1E4 0%, #FBDEC2 100%); } .case__visual--logo-warm img { max-width: 54%; max-height: 92%; } /* variante fria (logo Starmed, azul-marinho — wordmark horizontal) */ .case__visual--logo.case__visual--logo-cool { background: linear-gradient(135deg, #EDF1F7 0%, #DBE4F0 100%); } .case__visual--logo-cool img { max-width: 90%; max-height: 70%; } /* (f) Três frentes de atuação — índice numerado nas addon cards */ .addon { position: relative; } .addon__n { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.05rem; color: var(--gold-ink); letter-spacing: .04em; line-height: 1; margin-bottom: 10px; } /* ============================================================================ 20) Análise Express — sistema de novos componentes (v6, 2026-06-16) Tier-card, pricing ladder, locked-preview, multi-step form, admin table, status badges. Reusa tokens existentes; nada de cores novas. ============================================================================ */ /* ----- Banda de promoção da Análise Express na home ---------------------- */ .express-promo { position: relative; isolation: isolate; border-radius: var(--radius-lg); background: radial-gradient(120% 92% at 0% 0%, rgba(184,151,90,.10), transparent 52%), linear-gradient(168deg, #122E5C 0%, #061638 70%, #03102B 100%); color: var(--on-dark); padding: clamp(36px, 5vw, 64px); overflow: hidden; box-shadow: var(--shadow-lg); } .express-promo::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--grain); opacity: .35; pointer-events: none; } .express-promo > * { position: relative; z-index: 1; } .express-promo .eyebrow { color: var(--accent); } .express-promo h2 { color: var(--on-dark); max-width: 22ch; } .express-promo .lead { color: var(--on-dark-mut); max-width: 60ch; } .express-promo__steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-block: 28px; } .express-promo__step { padding: 16px 18px; border-radius: var(--radius); background: rgba(244, 241, 234, .04); border: 1px solid rgba(244, 241, 234, .08); backdrop-filter: blur(2px); } .express-promo__step .n { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.1rem; color: var(--accent); letter-spacing: .04em; margin-bottom: 6px; line-height: 1; } .express-promo__step strong { display: block; color: var(--on-dark); font-weight: 600; font-size: .96rem; margin-bottom: 4px; } .express-promo__step span { display: block; font-size: .82rem; color: var(--on-dark-mut); line-height: 1.45; } @media (max-width: 900px) { .express-promo__steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .express-promo__steps { grid-template-columns: 1fr; gap: 10px; } } /* ----- Pricing ladder (5 tiers lado-a-lado) ----------------------------- */ .ladder { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; align-items: stretch; } .ladder-tier { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px 22px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .ladder-tier:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); } .ladder-tier.is-entry { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft) inset, var(--shadow); } .ladder-tier__badge { position: absolute; top: -12px; left: 22px; background: var(--accent); color: var(--brand-deep); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; box-shadow: var(--shadow-md); } .ladder-tier__label { font-family: var(--serif); font-weight: 500; font-size: 1.08rem; color: var(--brand); letter-spacing: -.005em; } .ladder-tier__price { font-family: var(--serif); font-weight: 600; font-size: clamp(1.4rem, 2vw, 1.7rem); color: var(--ink); line-height: 1.1; } .ladder-tier__when { font-size: .88rem; color: var(--text-muted); line-height: 1.5; flex: 1; } .ladder-tier__cta { margin-top: auto; font-family: var(--sans); font-weight: 600; font-size: .85rem; letter-spacing: .01em; color: var(--brand); border-top: 1px solid var(--line); padding-top: 14px; text-decoration: none; transition: color .15s var(--ease); } .ladder-tier__cta:hover { color: var(--gold-ink); } .ladder-tier__cta::after { content: " →"; } @media (max-width: 1000px) { .ladder { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .ladder { grid-template-columns: 1fr; } } /* ----- Locked preview (documento bloqueado) ---------------------------- */ .locked-doc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-block: 28px; } .locked-doc { position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius); background: linear-gradient(180deg, var(--sand-2) 0%, var(--white) 100%); border: 1px solid var(--line); padding: 18px 16px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; filter: blur(2.5px) saturate(.7); opacity: .58; transition: filter .3s var(--ease), opacity .3s var(--ease); user-select: none; } .locked-doc::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(11,34,71,.04) 100%); pointer-events: none; } .locked-doc__lock { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 50%; background: var(--brand-deep); color: var(--accent); display: grid; place-items: center; box-shadow: 0 8px 20px rgba(6,22,56,.35); filter: blur(0); z-index: 2; } .locked-doc__lock svg { width: 18px; height: 18px; } .locked-doc__title { font-family: var(--serif); font-weight: 500; font-size: .92rem; color: var(--ink); line-height: 1.3; } .locked-doc__desc { font-size: .76rem; color: var(--text-muted); line-height: 1.4; } @media (max-width: 900px) { .locked-doc-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } } @media (max-width: 520px) { .locked-doc-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .locked-doc { padding: 14px 12px; } } /* Preview card real (página 1 liberada) */ .preview-card { background: var(--white); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 48px); box-shadow: var(--shadow-lg); max-width: 720px; margin-inline: auto; } .preview-card header { border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 22px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; } .preview-card header .label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); font-weight: 600; } .preview-card header h3 { font-family: var(--serif); font-weight: 500; font-size: 1.4rem; color: var(--ink); margin: 4px 0 0; } .preview-card header time { font-size: .82rem; color: var(--text-faint); } .preview-section { margin-block: 22px; } .preview-section h4 { font-family: var(--sans); font-weight: 600; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin: 0 0 8px; } .preview-section p { font-size: .96rem; line-height: 1.6; color: var(--text); margin: 0; } /* ----- Status badges ---------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: .04em; font-family: var(--sans); white-space: nowrap; } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; } .badge--pending { background: #FDF3E2; color: #87571E; } .badge--review { background: #E7EAF3; color: #2C3A5C; } .badge--ready { background: #DCF1E8; color: #0F6E56; } .badge--unlocked { background: #EFE5CC; color: var(--gold-ink); } .badge--delivered{ background: #C8E6D8; color: #0A5A41; } .badge--converted{ background: #E0D8EF; color: #4A3870; } .badge--paid { background: #D9F0E0; color: #0A5A30; } .badge--rejected { background: #FBE0DD; color: #8B2914; } /* ----- Multi-step form -------------------------------------------------- */ .express-form { max-width: 720px; margin-inline: auto; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 48px); box-shadow: var(--shadow); } .stepper { display: flex; align-items: center; gap: 8px; margin-bottom: 32px; } .stepper__pill { flex: 1; height: 4px; border-radius: 2px; background: var(--line); transition: background .3s var(--ease); } .stepper__pill.is-done { background: var(--accent); } .stepper__pill.is-active { background: linear-gradient(90deg, var(--accent) 50%, var(--line) 50%); } .stepper__label { font-size: .78rem; color: var(--text-muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; } .step-panel { display: none; } .step-panel.is-active { display: block; animation: stepFadeIn .35s var(--ease) both; } @keyframes stepFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .step-panel h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.4rem, 2.4vw, 1.8rem); color: var(--ink); margin: 0 0 6px; letter-spacing: -.01em; } .step-panel .step-lead { font-size: .98rem; color: var(--text-muted); margin-bottom: 24px; line-height: 1.55; } .field-row { display: grid; gap: 16px; margin-bottom: 16px; } .field-row.cols-2 { grid-template-columns: 1fr 1fr; } @media (max-width: 520px) { .field-row.cols-2 { grid-template-columns: 1fr; } } .field-block { display: flex; flex-direction: column; gap: 6px; } .field-block label { font-size: .82rem; font-weight: 600; color: var(--text); letter-spacing: .005em; } .field-block .hint { font-size: .78rem; color: var(--text-faint); margin-top: -2px; } .field-block input, .field-block select, .field-block textarea { font-family: var(--sans); font-size: .98rem; color: var(--ink); background: var(--white); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 13px 14px; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); width: 100%; } .field-block input:focus, .field-block select:focus, .field-block textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); } .field-block textarea { min-height: 110px; resize: vertical; font-family: var(--sans); line-height: 1.55; } .field-block .error-msg { font-size: .8rem; color: #8B2914; display: none; } .field-block.has-error input, .field-block.has-error select, .field-block.has-error textarea { border-color: #8B2914; box-shadow: 0 0 0 3px rgba(139, 41, 20, .12); } .field-block.has-error .error-msg { display: block; } .consent-list { display: grid; gap: 14px; margin-block: 8px; } .consent-item { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 14px; background: var(--sand-2); border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease); } .consent-item:has(input:checked) { background: var(--white); border-color: var(--brand); } .consent-item input[type="checkbox"] { margin: 4px 0 0; accent-color: var(--brand); width: 18px; height: 18px; } .consent-item label { font-size: .88rem; color: var(--text); line-height: 1.45; cursor: pointer; } .consent-item a { color: var(--gold-ink); text-decoration: underline; text-decoration-color: rgba(135, 106, 56, .35); text-underline-offset: 2px; } .upload-zone { border: 1.5px dashed var(--line-strong); border-radius: var(--radius); padding: 32px 20px; text-align: center; background: var(--sand-2); transition: border-color .15s var(--ease), background .15s var(--ease); cursor: pointer; } .upload-zone:hover, .upload-zone.is-drag { border-color: var(--brand); background: var(--white); } .upload-zone__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--brand-tint); color: var(--brand); display: inline-grid; place-items: center; margin-bottom: 12px; } .upload-zone__hint { font-size: .82rem; color: var(--text-faint); margin-top: 4px; } .upload-list { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; list-style: none; padding: 0; } .upload-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .88rem; } .upload-list .file-rm { background: none; border: 0; cursor: pointer; color: var(--text-faint); font-size: 1.2rem; line-height: 1; padding: 2px 6px; border-radius: 4px; } .upload-list .file-rm:hover { color: #8B2914; background: rgba(139,41,20,.06); } .step-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); } .step-nav .btn { min-width: 0; } .step-nav__save { font-size: .78rem; color: var(--text-faint); display: flex; align-items: center; gap: 6px; } .step-nav__save::before { content: "•"; color: var(--accent); } .summary-card { background: var(--sand-2); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; } .summary-card dt { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; margin-top: 12px; } .summary-card dd { margin: 4px 0 0; color: var(--ink); font-size: .94rem; line-height: 1.5; } .summary-card dt:first-child { margin-top: 0; } .price-final { display: flex; justify-content: space-between; align-items: baseline; padding: 20px 24px; background: var(--brand); color: var(--on-dark); border-radius: var(--radius); margin-bottom: 20px; } .price-final .label { font-size: .9rem; color: var(--on-dark-mut); } .price-final .amount { font-family: var(--serif); font-weight: 500; font-size: 1.8rem; color: var(--on-dark); letter-spacing: -.01em; } .success-icon { width: 80px; height: 80px; border-radius: 50%; background: var(--accent-soft); color: var(--gold-ink); display: grid; place-items: center; margin: 8px auto 20px; } .success-icon svg { width: 38px; height: 38px; } /* ----- Admin table ------------------------------------------------------ */ .admin-shell { min-height: 100vh; background: var(--offwhite); padding: 28px clamp(20px, 4vw, 48px); } .admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; padding-bottom: 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; gap: 16px; } .admin-header__brand { display: flex; align-items: center; gap: 14px; } .admin-header__brand img { height: 40px; width: auto; } .admin-header__brand .label { font-family: var(--sans); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; } .admin-header__meta { font-size: .85rem; color: var(--text-muted); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .admin-filters { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .admin-filters button { background: var(--white); border: 1px solid var(--line); padding: 8px 14px; border-radius: 999px; font-size: .82rem; color: var(--text-muted); font-weight: 600; cursor: pointer; transition: all .15s var(--ease); } .admin-filters button:hover { border-color: var(--brand); color: var(--brand); } .admin-filters button.is-active { background: var(--brand); color: var(--on-dark); border-color: var(--brand); } .admin-table { width: 100%; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); border-collapse: separate; border-spacing: 0; overflow: hidden; } .admin-table th { text-align: left; padding: 14px 16px; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; background: var(--sand-2); border-bottom: 1px solid var(--line); } .admin-table td { padding: 14px 16px; font-size: .9rem; color: var(--text); border-bottom: 1px solid var(--line); vertical-align: middle; } .admin-table tr:last-child td { border-bottom: 0; } .admin-table tr:hover td { background: var(--sand-2); } .admin-table .cell-name strong { display: block; color: var(--ink); font-weight: 600; } .admin-table .cell-name span { font-size: .8rem; color: var(--text-faint); } .admin-table .cell-action { text-align: right; } .admin-table .cell-action button { background: var(--brand); color: var(--on-dark); border: 0; padding: 7px 14px; border-radius: 999px; font-size: .8rem; font-weight: 600; cursor: pointer; font-family: var(--sans); } .admin-table .cell-action button:hover { background: var(--brand-deep); } @media (max-width: 900px) { .admin-table thead { display: none; } .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; width: 100%; } .admin-table tr { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; } .admin-table tr:hover td { background: transparent; } .admin-table td { border: 0; padding: 8px 16px; } .admin-table .cell-name { padding-top: 16px; } .admin-table .cell-action { padding-bottom: 16px; } } /* ----- Atalho de seções "express" tematizadas -------------------------- */ .section--express { background: var(--white); } .section--express-soft { background: var(--sand-2); } .section--express-dark { background: var(--brand-deep); color: var(--on-dark); } .section--express-dark h2 { color: var(--on-dark); } .section--express-dark .lead { color: var(--on-dark-mut); } /* ----- Method 5-step (Método Akiko) ------------------------------------ */ .method-list { display: grid; gap: 10px; counter-reset: methodc; list-style: none; padding: 0; margin: 0; } .method-list li { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); counter-increment: methodc; } .method-list li:last-child { border-bottom: 0; } .method-list li::before { content: "0" counter(methodc); font-family: var(--serif); font-weight: 500; font-size: 1.4rem; color: var(--gold-ink); letter-spacing: .02em; line-height: 1; align-self: start; padding-top: 3px; } .method-list h3 { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; color: var(--ink); margin: 0 0 6px; letter-spacing: -.005em; } .method-list p { font-size: .94rem; color: var(--text-muted); margin: 0; line-height: 1.55; } @media (max-width: 520px) { .method-list li { grid-template-columns: 44px 1fr; gap: 14px; padding: 18px 0; } .method-list li::before { font-size: 1.2rem; } } /* ----- Footer institucional (endereço Faria Lima) ---------------------- */ .footer-institutional { margin-top: 18px; font-size: .82rem; line-height: 1.6; color: var(--on-dark-mut); } .footer-institutional strong { color: var(--on-dark); font-weight: 500; display: block; margin-bottom: 4px; } /* ============================================================================ 21) Landing de conversão (Google Ads) — /analise-gratuita (v7, 2026-06-16) Página dedicada, sem nav, foco único: capturar o lead. Mobile-first. ============================================================================ */ /* Header minimalista (logo + 1 prova, sem nav que distraia) */ .lp-header { position: sticky; top: 0; z-index: 90; background: color-mix(in srgb, var(--brand-deep) 92%, transparent); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid rgba(244,241,234,.10); } .lp-header .container { display: flex; align-items: center; justify-content: space-between; height: 62px; } .lp-header img { height: 40px; width: auto; } .lp-header__trust { font-size: .8rem; color: var(--on-dark-mut); font-weight: 500; display: flex; align-items: center; gap: 8px; } .lp-header__trust svg { width: 15px; height: 15px; color: var(--accent); flex: none; } @media (max-width: 620px) { .lp-header__trust { display: none; } } /* Hero da LP — copy à esquerda, form à direita (empilha no mobile) */ .lp-hero { position: relative; isolation: isolate; background: radial-gradient(120% 90% at 0% 0%, rgba(31,58,120,.45), transparent 55%), radial-gradient(100% 80% at 100% 100%, rgba(184,151,90,.10), transparent 60%), linear-gradient(168deg, #0F2A55 0%, #061638 70%, #03102B 100%); color: var(--on-dark); padding: clamp(36px, 6vw, 72px) 0 clamp(48px, 7vw, 88px); overflow: hidden; } .lp-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--grain); opacity: .4; pointer-events: none; } .lp-hero > .container { position: relative; z-index: 1; } .lp-hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 64px); align-items: center; } @media (max-width: 920px) { .lp-hero__grid { grid-template-columns: 1fr; gap: 32px; } } .lp-hero .eyebrow { color: var(--accent); } .lp-hero h1 { color: var(--on-dark); font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.08; letter-spacing: -.015em; margin: 10px 0 0; } .lp-hero__sub { font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.55; color: var(--on-dark-mut); margin-top: 18px; max-width: 52ch; } .lp-hero__proof { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; } .lp-hero__proof li { display: flex; align-items: flex-start; gap: 11px; font-size: .98rem; color: var(--on-dark); } .lp-hero__proof svg { width: 20px; height: 20px; color: var(--accent); flex: none; margin-top: 1px; } /* Card do formulário (a estrela da página) */ .lp-form-card { background: var(--white); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 34px); box-shadow: var(--shadow-lg); border: 1px solid rgba(244,241,234,.5); } .lp-form-card__head { text-align: center; margin-bottom: 20px; } .lp-form-card__badge { display: inline-block; background: var(--accent-soft); color: var(--gold-ink); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; margin-bottom: 12px; } .lp-form-card h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.3rem, 2.2vw, 1.55rem); color: var(--ink); margin: 0; letter-spacing: -.01em; } .lp-form-card__sub { font-size: .9rem; color: var(--text-muted); margin-top: 6px; } .lp-form .field-block { margin-bottom: 13px; } .lp-form .field-block label { font-size: .8rem; font-weight: 600; color: var(--text); margin-bottom: 5px; display: block; } .lp-form input, .lp-form select, .lp-form textarea { width: 100%; font-family: var(--sans); font-size: .98rem; color: var(--ink); background: var(--white); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 12px 13px; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } .lp-form input:focus, .lp-form select:focus, .lp-form textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); } .lp-form textarea { min-height: 70px; resize: vertical; line-height: 1.5; } .lp-form .field-block.has-error input, .lp-form .field-block.has-error select, .lp-form .field-block.has-error textarea { border-color: #8B2914; box-shadow: 0 0 0 3px rgba(139,41,20,.12); } .lp-form .error-msg { font-size: .78rem; color: #8B2914; display: none; margin-top: 4px; } .lp-form .field-block.has-error .error-msg { display: block; } .lp-form button[type="submit"] { width: 100%; justify-content: center; margin-top: 8px; font-size: 1rem; padding: 16px; } .lp-form__micro { font-size: .76rem; color: var(--text-faint); text-align: center; margin-top: 12px; line-height: 1.5; } .lp-form__micro svg { width: 12px; height: 12px; vertical-align: -1px; } /* Estado de sucesso (thank-you) */ .lp-form-success { text-align: center; display: none; } .lp-form-success.is-on { display: block; animation: stepFadeIn .4s var(--ease) both; } .lp-form.is-sent { display: none; } /* Barra de confiança (selos) */ .trust-bar { background: var(--brand-deep); color: var(--on-dark-mut); padding: 18px 0; } .trust-bar .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px clamp(18px, 4vw, 40px); text-align: center; } .trust-bar span { font-size: .84rem; font-weight: 500; letter-spacing: .01em; display: inline-flex; align-items: center; gap: 8px; } .trust-bar span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; } .trust-bar span:first-child::before { display: none; } /* Blocos de conteúdo da LP reutilizam .section / .card existentes. Passos simples (3) da LP: */ .lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 760px) { .lp-steps { grid-template-columns: 1fr; gap: 14px; } } .lp-step { text-align: center; padding: 28px 22px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); } .lp-step__n { width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 16px; background: var(--brand); color: var(--on-dark); display: grid; place-items: center; font-family: var(--serif); font-weight: 500; font-size: 1.2rem; } .lp-step h3 { font-size: 1.1rem; margin: 0 0 6px; } .lp-step p { font-size: .92rem; color: var(--text-muted); margin: 0; line-height: 1.5; } /* Reversão de risco — faixa de destaque */ .risk-reversal { background: var(--sand-2); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: clamp(24px, 3vw, 36px); display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; } @media (max-width: 620px) { .risk-reversal { grid-template-columns: 1fr; gap: 14px; } } .risk-reversal__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--white); color: var(--gold-ink); display: grid; place-items: center; box-shadow: var(--shadow-sm); } .risk-reversal h3 { margin: 0 0 6px; font-size: 1.2rem; } .risk-reversal p { margin: 0; color: var(--text-muted); font-size: .96rem; line-height: 1.55; } /* CTA fixo no mobile (sticky bottom) — só aparece em telas pequenas */ .lp-sticky-cta { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--brand-deep) 96%, transparent); backdrop-filter: blur(8px); border-top: 1px solid rgba(244,241,234,.12); box-shadow: 0 -8px 24px rgba(6,22,56,.3); } .lp-sticky-cta a { width: 100%; justify-content: center; font-size: 1rem; padding: 15px; } @media (max-width: 920px) { .lp-sticky-cta { display: block; } body.lp-page { padding-bottom: 76px; } /* espaço pro sticky não cobrir o footer */ } /* Footer legal mínimo da LP */ .lp-footer { background: var(--ink); color: var(--on-dark-mut); padding: 32px 0; text-align: center; font-size: .82rem; line-height: 1.6; } .lp-footer a { color: var(--accent); } .lp-footer__legal { max-width: 70ch; margin: 0 auto 14px; opacity: .85; } /* ============================================================================ 22) Landing de conversão v2 — alto impacto / orientada a ação (2026-06-16) Topbar de escassez, hero com âncora de valor, mockup do entregável (PDF), strip de métricas, prova social, CTA com brilho, reveal em cascata. ============================================================================ */ /* ----- Topbar de escassez (acima do header) --------------------------- */ .scarcity-bar { background: linear-gradient(90deg, var(--gold-deep), var(--accent), var(--gold-deep)); background-size: 200% 100%; animation: scarcityShimmer 6s linear infinite; color: #1A1206; text-align: center; font-size: .86rem; font-weight: 600; letter-spacing: .01em; padding: 9px 16px; position: relative; z-index: 95; } .scarcity-bar strong { font-weight: 700; } .scarcity-bar .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #C0392B; margin-right: 7px; vertical-align: 1px; animation: pulseDot 1.6s ease-in-out infinite; } @keyframes scarcityShimmer { to { background-position: 200% 0; } } @keyframes pulseDot { 0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,43,.6); } 50% { box-shadow: 0 0 0 5px rgba(192,57,43,0); } } /* ----- Reveal em cascata (entrada da página) -------------------------- */ .reveal-up { opacity: 0; transform: translateY(22px); animation: revealUp .7s var(--ease-out) forwards; } .reveal-up.d1 { animation-delay: .08s; } .reveal-up.d2 { animation-delay: .18s; } .reveal-up.d3 { animation-delay: .30s; } .reveal-up.d4 { animation-delay: .42s; } .reveal-up.d5 { animation-delay: .54s; } @keyframes revealUp { to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .reveal-up { opacity: 1; transform: none; animation: none; } .scarcity-bar { animation: none; } } /* ----- Hero v2: âncora de valor + headline maior ---------------------- */ .lp-hero h1 .hl { color: var(--accent); font-style: italic; } .value-anchor { display: inline-flex; align-items: baseline; gap: 12px; margin: 22px 0 6px; padding: 10px 18px; background: rgba(184,151,90,.12); border: 1px solid rgba(184,151,90,.35); border-radius: 999px; } .value-anchor .was { color: var(--on-dark-mut); text-decoration: line-through; text-decoration-color: var(--accent); font-size: .98rem; } .value-anchor .now { color: var(--accent); font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; text-transform: uppercase; } /* ----- Mockup do entregável (PDF de 1 página) ------------------------- */ .deliverable-visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 340px; perspective: 1400px; } .deliverable-doc { position: relative; width: min(300px, 78%); aspect-ratio: 1 / 1.32; background: #fff; border-radius: 10px; box-shadow: 0 40px 90px -30px rgba(3,12,40,.7), 0 8px 24px rgba(3,12,40,.4); transform: rotateY(-16deg) rotateX(6deg) rotateZ(2deg); transform-style: preserve-3d; animation: docFloat 6s ease-in-out infinite; padding: 22px 20px; overflow: hidden; } @keyframes docFloat { 0%, 100% { transform: rotateY(-16deg) rotateX(6deg) rotateZ(2deg) translateY(0); } 50% { transform: rotateY(-13deg) rotateX(5deg) rotateZ(1.5deg) translateY(-12px); } } .deliverable-doc__head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1.5px solid #E7DFCE; padding-bottom: 10px; margin-bottom: 14px; } .deliverable-doc__logo { font-family: var(--serif); font-weight: 600; font-size: .78rem; letter-spacing: .12em; color: #0B2247; } .deliverable-doc__tag { font-size: .54rem; letter-spacing: .14em; text-transform: uppercase; color: #9C7D45; font-weight: 700; } .deliverable-doc__sec { margin-bottom: 13px; } .deliverable-doc__sec h5 { font-family: var(--sans); font-weight: 700; font-size: .58rem; letter-spacing: .09em; text-transform: uppercase; color: #0B2247; margin: 0 0 5px; display: flex; align-items: center; gap: 5px; } .deliverable-doc__sec h5::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: #B8975A; flex: none; } .deliverable-doc__sec .ln { height: 4px; border-radius: 2px; background: #E7DFCE; margin-bottom: 4px; } .deliverable-doc__sec .ln.w90 { width: 90%; } .deliverable-doc__sec .ln.w75 { width: 75%; } .deliverable-doc__sec .ln.w60 { width: 60%; } .deliverable-doc__sec .ln.w100 { width: 100%; } .deliverable-doc__sign { position: absolute; bottom: 16px; left: 20px; right: 20px; border-top: 1px solid #E7DFCE; padding-top: 8px; font-family: var(--serif); font-style: italic; font-size: .56rem; color: #6C7672; } /* Selo GRÁTIS */ .deliverable-seal { position: absolute; top: 14px; right: -6px; z-index: 3; background: var(--accent); color: #1A1206; font-weight: 800; font-size: .82rem; letter-spacing: .08em; padding: 9px 16px; border-radius: 6px; transform: rotate(7deg); box-shadow: 0 10px 24px -6px rgba(184,151,90,.6); } .deliverable-seal small { display: block; font-size: .5rem; font-weight: 600; opacity: .75; letter-spacing: .1em; } @media (max-width: 920px) { .deliverable-visual { min-height: 300px; margin-top: 8px; } .deliverable-doc { width: min(260px, 70%); } } /* ----- Strip de métricas (prova rápida) ------------------------------- */ .metrics-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); } .metric { background: var(--white); padding: 26px 18px; text-align: center; } .metric__n { font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--brand); line-height: 1; letter-spacing: -.01em; } .metric__l { font-size: .82rem; color: var(--text-muted); margin-top: 8px; line-height: 1.35; } @media (max-width: 620px) { .metrics-strip { grid-template-columns: 1fr 1fr; } } /* ----- Prova: os 3 produtos reais ------------------------------------- */ .proof-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; } @media (max-width: 760px) { .proof-products { grid-template-columns: 1fr; } } .proof-product { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 8px; transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .proof-product:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); } .proof-product__logo { height: 34px; display: flex; align-items: center; } .proof-product__logo img { max-height: 34px; max-width: 130px; width: auto; object-fit: contain; } .proof-product h4 { font-size: 1rem; margin: 4px 0 0; } .proof-product p { font-size: .86rem; color: var(--text-muted); margin: 0; line-height: 1.5; } .proof-product .live-tag { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #0F6E56; display: inline-flex; align-items: center; gap: 5px; } .proof-product .live-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #1D9E75; box-shadow: 0 0 0 3px rgba(29,158,117,.18); } /* ----- CTA com brilho/pulso ------------------------------------------- */ .btn--glow { position: relative; box-shadow: 0 0 0 0 rgba(184,151,90,.5); animation: ctaPulse 2.4s ease-in-out infinite; } .btn--glow:hover { animation-play-state: paused; } @keyframes ctaPulse { 0%, 100% { box-shadow: 0 8px 28px -8px rgba(184,151,90,.5), 0 0 0 0 rgba(184,151,90,.45); } 50% { box-shadow: 0 8px 28px -8px rgba(184,151,90,.7), 0 0 0 12px rgba(184,151,90,0); } } @media (prefers-reduced-motion: reduce) { .btn--glow { animation: none; } } /* ----- "Como é o diagnóstico" — destaque grande do entregável --------- */ .deliverable-feature { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 5vw, 64px); align-items: center; } @media (max-width: 880px) { .deliverable-feature { grid-template-columns: 1fr; gap: 28px; } .deliverable-feature .deliverable-visual { order: -1; } } /* ----- Form card: faixa de garantia no topo --------------------------- */ .lp-form-card__guarantee { background: var(--brand); color: var(--on-dark); margin: -34px -34px 20px; padding: 12px 20px; text-align: center; font-size: .82rem; font-weight: 600; letter-spacing: .02em; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .lp-form-card__guarantee .free { color: var(--accent); font-weight: 800; } @media (max-width: 620px) { .lp-form-card__guarantee { margin: -24px -24px 18px; } } /* ----- Seletor de idioma (PT / EN) na lp-header ----------------------- */ .lp-header .container { gap: 16px; } .lang-switch { display: inline-flex; align-items: center; border: 1px solid rgba(244,241,234,.22); border-radius: 999px; overflow: hidden; flex: none; } .lang-switch a { font-size: .78rem; font-weight: 700; letter-spacing: .04em; padding: 6px 12px; color: var(--on-dark-mut); text-decoration: none; transition: background .15s var(--ease), color .15s var(--ease); } .lang-switch a.is-active { background: var(--accent); color: #1A1206; } .lang-switch a:not(.is-active):hover { color: var(--on-dark); } /* No mobile, esconde o selo de confiança do header e mantém só o idioma */ @media (max-width: 620px) { .lp-header__trust { display: none; } .lang-switch a { padding: 6px 10px; font-size: .74rem; } } /* ============================================================================ 23) Landing fodástica — elevação cinematográfica v3 (2026-06-16) Atmosfera aurora viva, dot-grid, linha de pulso (ECG, assinatura médica), monograma, form de vidro com borda dourada, mockup do PDF com profundidade e brilho, reveal on scroll, micro-interações premium. Escopo: .lp-page / .lp-hero — não toca o site institucional. ============================================================================ */ /* ----- Seleção e scrollbar refinadas (só nas LPs) --------------------- */ .lp-page ::selection { background: rgba(184,151,90,.32); color: var(--ink); } /* ----- Hero: atmosfera cinematográfica -------------------------------- */ .lp-page .lp-hero { background: #050F2B; } .lp-hero__atmos { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .lp-hero__aurora { position: absolute; inset: -35%; background: radial-gradient(38% 48% at 18% 22%, rgba(31,58,120,.62), transparent 70%), radial-gradient(32% 42% at 82% 16%, rgba(184,151,90,.20), transparent 72%), radial-gradient(46% 56% at 72% 88%, rgba(16,42,92,.66), transparent 72%); filter: blur(24px); animation: auroraDrift 20s ease-in-out infinite alternate; } @keyframes auroraDrift { 0% { transform: translate3d(-2%, -1%, 0) scale(1); } 100% { transform: translate3d(3%, 2%, 0) scale(1.1); } } .lp-hero__dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(244,241,234,.075) 1px, transparent 1.4px); background-size: 32px 32px; -webkit-mask-image: radial-gradient(82% 78% at 50% 28%, #000 30%, transparent 78%); mask-image: radial-gradient(82% 78% at 50% 28%, #000 30%, transparent 78%); } .lp-hero__mono { position: absolute; right: -4%; bottom: -22%; font-family: var(--serif); font-weight: 600; font-style: italic; font-size: 52vh; line-height: 1; color: rgba(184,151,90,.05); user-select: none; letter-spacing: -.04em; } /* Linha de pulso (ECG) — assinatura visual da advisory médica */ .lp-hero__pulse { position: absolute; left: 0; right: 0; top: 38%; width: 100%; height: 120px; opacity: .5; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .lp-hero__pulse path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1400; stroke-dashoffset: 1400; filter: drop-shadow(0 0 6px rgba(184,151,90,.6)); animation: ecgDraw 4.5s ease-out .3s forwards, ecgGlow 3s ease-in-out 5s infinite; } @keyframes ecgDraw { to { stroke-dashoffset: 0; } } @keyframes ecgGlow { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } @media (prefers-reduced-motion: reduce) { .lp-hero__aurora { animation: none; } .lp-hero__pulse path { stroke-dashoffset: 0; animation: none; } } /* O conteúdo do hero acima da atmosfera */ .lp-hero > .container { position: relative; z-index: 2; } /* Headline com mais drama editorial */ .lp-page .lp-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; } .lp-page .lp-hero h1 .hl { position: relative; white-space: nowrap; } .lp-page .lp-hero h1 .hl::after { content: ""; position: absolute; left: 0; right: 0; bottom: .08em; height: .14em; background: linear-gradient(90deg, transparent, rgba(184,151,90,.55), transparent); border-radius: 2px; } /* Value anchor com mais presença */ .lp-page .value-anchor { box-shadow: 0 0 0 1px rgba(184,151,90,.18), 0 12px 30px -16px rgba(184,151,90,.5); backdrop-filter: blur(4px); } /* ----- Form de vidro com borda dourada -------------------------------- */ .lp-page .lp-form-card { position: relative; background: linear-gradient(180deg, #fff, #fdfbf6); box-shadow: 0 40px 90px -40px rgba(3,12,40,.85), 0 4px 18px rgba(3,12,40,.3); } .lp-page .lp-form-card::before { content: ""; position: absolute; inset: -1.5px; z-index: -1; border-radius: inherit; background: linear-gradient(150deg, rgba(184,151,90,.9), rgba(184,151,90,.15) 40%, transparent 70%); } .lp-page .lp-form-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); } .lp-page .lp-form input, .lp-page .lp-form textarea { background: #fcfaf5; transition: border-color .15s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); } .lp-page .lp-form input:focus, .lp-page .lp-form textarea:focus { background: #fff; box-shadow: 0 0 0 3px var(--brand-tint), 0 6px 18px -10px rgba(11,34,71,.4); } /* ----- CTA com varredura de brilho ------------------------------------ */ .lp-page .btn--glow { position: relative; overflow: hidden; } .lp-page .btn--glow::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-18deg); animation: ctaShine 3.6s ease-in-out 1.5s infinite; } @keyframes ctaShine { 0% { left: -120%; } 55% { left: 130%; } 100% { left: 130%; } } @media (prefers-reduced-motion: reduce) { .lp-page .btn--glow::after { animation: none; display: none; } } /* ----- Mockup do PDF cinematográfico ---------------------------------- */ .deliverable-doc::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; border-radius: inherit; transform: translate(14px, 16px) rotateZ(-1deg); box-shadow: 0 30px 60px -30px rgba(3,12,40,.5); opacity: .55; } .deliverable-doc__shine { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; } .deliverable-doc__shine::before { content: ""; position: absolute; top: -60%; left: -40%; width: 50%; height: 220%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent); transform: rotate(8deg); animation: docShine 6s ease-in-out 2s infinite; } @keyframes docShine { 0% { left: -50%; } 45% { left: 130%; } 100% { left: 130%; } } .deliverable-visual::after { content: ""; position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%); width: 62%; height: 30px; border-radius: 50%; background: radial-gradient(ellipse, rgba(3,12,40,.28), transparent 70%); filter: blur(6px); z-index: -1; } @media (prefers-reduced-motion: reduce) { .deliverable-doc { animation: none; } .deliverable-doc__shine::before { animation: none; } } /* ----- Reveal on scroll (corpo da página) ----------------------------- */ .reveal-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); } .reveal-on-scroll.in-view { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal-on-scroll { opacity: 1; transform: none; } } /* ----- Micro-interações premium nos cards ----------------------------- */ .lp-page .persona, .lp-page .lp-step, .lp-page .metric { transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease); } .lp-page .persona:hover, .lp-page .lp-step:hover { transform: translateY(-6px); box-shadow: 0 22px 50px -28px rgba(11,34,71,.55); border-color: rgba(184,151,90,.5); } .lp-page .proof-product { position: relative; overflow: hidden; } .lp-page .proof-product::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent), transparent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); } .lp-page .proof-product:hover::before { transform: scaleX(1); } /* ----- Trust bar: leve brilho dourado no separador -------------------- */ .lp-page .trust-bar span::before { box-shadow: 0 0 6px rgba(184,151,90,.7); } /* ----- Divisor com monograma entre seções ----------------------------- */ .section-rule { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 8px 0; color: var(--accent); } .section-rule::before, .section-rule::after { content: ""; height: 1px; width: min(120px, 22vw); background: linear-gradient(90deg, transparent, rgba(184,151,90,.5)); } .section-rule::after { background: linear-gradient(90deg, rgba(184,151,90,.5), transparent); } .section-rule span { font-family: var(--serif); font-style: italic; font-size: 1.1rem; opacity: .85; }