/* ===== Motion primitives (U2) ===== Built only from the tokens above. The .reveal hidden state is gated behind html.reveal-ready (set by site.js), so every surface stays fully visible when JS is off or IntersectionObserver is missing. site.js toggles .is-visible once per element (reveal-once). */ html.reveal-ready .reveal { opacity: 0; transform: translateY(var(--reveal-rise)); transition: opacity var(--dur-slow) var(--ease-athletic), transform var(--dur-slow) var(--ease-athletic), filter var(--dur-slow) var(--ease-athletic); transition-delay: calc(var(--i, 0) * var(--reveal-stagger)); } /* Variant hidden states. */ html.reveal-ready .reveal.reveal--blur { filter: blur(8px); } html.reveal-ready .reveal.reveal--hero { transform: translateY(var(--reveal-rise-hero)); } html.reveal-ready .reveal.reveal--pop { transform: translateY(var(--reveal-rise-hero)) scale(0.96); } /* Revealed state — declared after every variant hidden state so it wins on equal specificity and resets all of them, not just the base. */ html.reveal-ready .reveal.is-visible { opacity: 1; transform: none; filter: none; } /* Masked line reveal (hero headline): the wrapper stays put; inner lines rise from behind an overflow:hidden mask. */ .reveal--mask { overflow: hidden; } html.reveal-ready .reveal.reveal--mask { opacity: 1; transform: none; } html.reveal-ready .reveal.reveal--mask .reveal-line { display: block; transform: translateY(110%); transition: transform var(--dur-slow) var(--ease-athletic); transition-delay: calc(var(--i, 0) * var(--reveal-stagger)); will-change: transform; } html.reveal-ready .reveal.reveal--mask.is-visible .reveal-line { transform: translateY(0); } /* Accent line draw-in. */ html.reveal-ready .reveal-accent { transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-slow) var(--ease-athletic); transition-delay: calc(var(--i, 0) * var(--reveal-stagger)); } html.reveal-ready .reveal-accent.is-visible { transform: scaleX(1); } /* Tactile press — on any clickable. */ .pressable { transition: transform var(--dur-fast) var(--ease-smooth); } .pressable:active { transform: scale(0.98); } /* Hover-depth helper. */ .hoverable { transition: transform var(--dur-base) var(--ease-smooth), box-shadow var(--dur-base) var(--ease-smooth), border-color var(--dur-base) var(--ease-smooth); } .hoverable:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); } /* ===== Reduced motion — global hard rule (U2, R14) ===== !important so it wins over every motion rule regardless of source order, including later units. Decorative motion collapses to final state. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } html.reveal-ready .reveal, html.reveal-ready .reveal.reveal--mask .reveal-line, html.reveal-ready .reveal-accent { opacity: 1 !important; transform: none !important; filter: none !important; } [data-parallax] { transform: none !important; } } /* U3 — home hero: room for descenders beneath the mask clip. */ .hero h1.reveal--mask { padding-bottom: 0.12em; } :root { --bg: #141416; --surface: #1f2023; --surface-2: #2d2f34; --text: #ededf0; --muted: #b0b2b8; --line: #36383e; --gold: #d4b17a; --gold-2: #8c6f31; --surface-card: #18191d; --shadow: 0 24px 80px rgba(0, 0, 0, 0.32); --logo-filter: invert(1); --hero-overlay: linear-gradient(90deg, rgba(20, 20, 22, 0.96) 0%, rgba(20, 20, 22, 0.78) 42%, rgba(20, 20, 22, 0.22) 100%); /* About callout + Sobre page: themed tokens. The literal values are mirrored in the body[data-theme="bright"] block so they flip with the global theme. (Referencing var(--bg) here would freeze to the dark value, because the bright overrides live on , not on :root.) */ --about-bg: #0d0e11; --about-surface: #121316; --about-deep: #08090c; --about-panel: #18191d; --about-panel-line: #26282d; --about-overlay: rgba(15, 16, 19, 0.86); --about-text: #ededf0; --about-muted: #c0c2c7; --about-line: #26282d; --about-num: rgba(212, 177, 122, 0.28); --about-num-solid: #d4b17a; --about-cta-bg: #d4b17a; --about-cta-text: #141416; --about-display: "Oswald", "Arial Narrow", Impact, sans-serif; --about-scrim-l: linear-gradient(90deg, rgba(10, 11, 14, 0.98) 0%, rgba(10, 11, 14, 0.88) 40%, rgba(10, 11, 14, 0.12) 78%); --about-scrim-r: linear-gradient(270deg, rgba(10, 11, 14, 0.98) 0%, rgba(10, 11, 14, 0.88) 40%, rgba(10, 11, 14, 0.12) 78%); /* Consultoria page: themed tokens, mirrored in body[data-theme="bright"] so they flip with the global theme (same rationale as --about-* above). Photographic overlays stay dark in both themes for light-text legibility. */ --consultoria-bg: #101113; --consultoria-deep: #08090b; --consultoria-surface: #17181b; --consultoria-surface-2: #22242a; --consultoria-text: #f0f0f2; --consultoria-muted: #b5b7be; --consultoria-line: #303238; --consultoria-display: "Oswald", "Arial Narrow", Impact, sans-serif; } body[data-theme="bright"] { --bg: #f6f3ee; --surface: #eee9df; --surface-2: #d6c9b6; --text: #191a1a; --muted: #706a5d; --line: #d7cdbc; --gold: #d4b17a; --gold-2: #d4b17a; --surface-card: #efeae0; /* Shadows stay dark in bright mode too — the previous warm low-opacity tint read as a washed-out halo against the light background instead of grounding the hero/images/cards. */ --shadow: 0 24px 80px rgba(0, 0, 0, 0.28); --logo-filter: none; /* The hero photographic overlay stays dark in both themes (like the consultoria hero) so the image reads with depth and the hero text stays light — a light scrim here washed the photo out. Home hero text is forced light in bright mode (see the bright .hero overrides after the .hero rules). */ --hero-overlay: linear-gradient(90deg, rgba(20, 20, 22, 0.96) 0%, rgba(20, 20, 22, 0.78) 42%, rgba(20, 20, 22, 0.22) 100%); --about-bg: #f6f3ee; --about-surface: #efeae0; --about-deep: #ebe4d6; --about-panel: #f1ece3; --about-panel-line: #e2d9c8; --about-overlay: rgba(246, 243, 238, 0.92); --about-text: #191a1a; --about-muted: #706a5d; --about-line: #ddd3c2; --about-num: rgba(138, 113, 80, 0.38); --about-num-solid: #d4b17a; --about-cta-bg: #d4b17a; --about-cta-text: #1d150a; --about-display: "Oswald", "Arial Narrow", Impact, sans-serif; --about-scrim-l: linear-gradient(90deg, rgba(246, 243, 238, 0.97) 0%, rgba(246, 243, 238, 0.82) 44%, rgba(246, 243, 238, 0.22) 100%); --about-scrim-r: linear-gradient(270deg, rgba(246, 243, 238, 0.97) 0%, rgba(246, 243, 238, 0.82) 44%, rgba(246, 243, 238, 0.22) 100%); --consultoria-bg: #f6f3ee; --consultoria-deep: #ebe4d6; --consultoria-surface: #efeae0; --consultoria-surface-2: #d6c9b6; --consultoria-text: #191a1a; --consultoria-muted: #706a5d; --consultoria-line: #ddd3c2; } /* The muted-paragraph rules (.section-heading p, .consultoria-callout-copy p, .product-panel p) outrank the base .section-kicker / .card-label gold by specificity, so those kickers fall back to --muted. Every kicker text field must read as gold in both themes, so force them back to --gold (the brand gold #d4b17a in both themes) with a selector specific enough to win. body always carries a data-theme, so [data-theme] matches both. */ body[data-theme] .section-kicker, body[data-theme] .card-label { color: var(--gold); } /* Sobre full-bleed photo sections (hero / metodo / hoje / final CTA) keep the dark photographic treatment in bright mode too — the bright scrims/overlays washed the photos to a light gradient and the dark text lost legibility. By re-pointing the --about-* photo tokens to their dark-theme values *locally on .about-bleed*, every descendant (scrim background, text, step badges, the floating goals panel) flips to the dark treatment at once, while the non-photo .about-block sections stay light. The scrim tokens are consumed by the inline background-image on the same .about-bleed element, so redefining them here reaches that too. */ body[data-theme="bright"] .about-bleed { --about-bg: #0d0e11; --about-text: #ededf0; --about-muted: #c0c2c7; --about-panel: #18191d; --about-panel-line: #26282d; --about-overlay: rgba(15, 16, 19, 0.86); --about-scrim-l: linear-gradient(90deg, rgba(10, 11, 14, 0.98) 0%, rgba(10, 11, 14, 0.88) 40%, rgba(10, 11, 14, 0.12) 78%); --about-scrim-r: linear-gradient(270deg, rgba(10, 11, 14, 0.98) 0%, rgba(10, 11, 14, 0.88) 40%, rgba(10, 11, 14, 0.12) 78%); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, Arial, Helvetica, sans-serif; transition: background 0.2s ease, color 0.2s ease; } body[data-theme="dark"] .logo, body[data-theme="dark"] .footer-logo { mix-blend-mode: screen; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } .shell { width: min(var(--container), calc(100vw - 2 * var(--gutter))); margin: 0 auto; } .narrow { width: min(840px, calc(100vw - 2 * var(--gutter))); } .site-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(16px); } .site-header .shell { width: min(1420px, calc(100vw - 48px)); } .nav { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand-link { flex: 0 0 auto; } .logo { width: 172px; height: 52px; object-fit: contain; filter: var(--logo-filter); } .nav-links, .nav-actions, .hero-actions, .inline-actions, .footer-links { display: flex; align-items: center; } .nav-links { margin-left: auto; justify-content: flex-end; gap: 22px; color: var(--muted); font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; } .nav-links a, .footer-links a { position: relative; transition: color 0.2s ease; } .nav-links a { transition: color 0.2s ease, transform 0.18s ease; } .nav-links a:hover, .footer-links a:hover { color: var(--gold); } .nav-links a:hover { transform: translateY(-1px); } .nav-links a:active { transform: translateY(0) scale(0.95); } /* Active page = gold text + a persistent underline (replaces the old square marker, Design nr 2). The footer menu mirrors the header. The underline is the shared ::after rule near end-of-file: drawn in on hover, held for the active page. */ .nav-links a[aria-current="page"], .footer-links a[aria-current="page"] { color: var(--gold); } /* The home page remaps --gold to the warmer #d4b17a, but the header and footer menus are global and style their hover + active highlight with --gold. On non-home bright pages --gold is the duller default, so the menu highlight read differently than on home. Pin both menus' bright-mode highlight to --gold-2 (#d4b17a) on every page so the menus look identical everywhere. */ body[data-theme="bright"] .nav-links a:hover, body[data-theme="bright"] .nav-links a[aria-current="page"], body[data-theme="bright"] .footer-links a:hover, body[data-theme="bright"] .footer-links a[aria-current="page"] { color: var(--gold-2); } @media (prefers-reduced-motion: reduce) { .nav-links a:hover, .nav-links a:active { transform: none; } } .nav-actions { gap: 10px; } .outline-btn, .solid-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--control-h); border: 1px solid var(--gold); border-radius: var(--radius-control); padding: 12px 18px; background: transparent; color: var(--text); font-size: var(--fs-xs); font-weight: 900; line-height: 1; text-transform: uppercase; cursor: pointer; transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease; } .outline-btn:hover, .solid-btn:hover { transform: translateY(-1px); } .solid-btn { background: var(--gold); color: var(--bg); } /* ===== Button interactions (U5) ===== Tokenised hover/press for the shared button classes: solid lifts + glows, outline morphs to a gold fill, all press on tap, arrows nudge. The opt-in .btn-sweep wipes a gold fill across (combine with outline for "fill+morph"). The global reduced-motion rule neutralises all of it. */ .outline-btn, .solid-btn { position: relative; transition: transform var(--dur-base) var(--ease-smooth), background var(--dur-base) var(--ease-smooth), color var(--dur-base) var(--ease-smooth), border-color var(--dur-base) var(--ease-smooth), box-shadow var(--dur-base) var(--ease-smooth); } .solid-btn:hover, .solid-btn:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-gold); } .outline-btn:hover, .outline-btn:focus-visible { transform: translateY(-2px); } .outline-btn:active, .solid-btn:active { transform: scale(0.98); transition-duration: var(--dur-fast); } .outline-btn > span[aria-hidden="true"], .solid-btn > span[aria-hidden="true"], .outline-btn > svg, .solid-btn > svg { transition: transform var(--dur-base) var(--ease-smooth); } .outline-btn:hover > span[aria-hidden="true"], .solid-btn:hover > span[aria-hidden="true"], .outline-btn:hover > svg, .solid-btn:hover > svg { transform: translateX(4px); } /* Opt-in fill-sweep (combine with .outline-btn for the "fill+morph" feel). */ .btn-sweep { overflow: hidden; isolation: isolate; } .btn-sweep::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gold); transform: translateX(-101%); transition: transform var(--dur-base) var(--ease-smooth); } .btn-sweep:hover::before, .btn-sweep:focus-visible::before { transform: translateX(0); } .btn-sweep.outline-btn:hover, .btn-sweep.outline-btn:focus-visible { color: var(--bg); background: transparent; } .theme-toggle { position: fixed; right: clamp(16px, 2.5vw, 34px); bottom: clamp(16px, 2.5vw, 34px); z-index: 40; display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid var(--gold); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--bg) 88%, transparent); color: var(--text); box-shadow: var(--shadow); cursor: pointer; backdrop-filter: blur(14px); transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease; } .theme-toggle:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--surface) 92%, transparent); } .theme-icon { display: none; width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } body[data-theme="dark"] .sun-icon, body[data-theme="bright"] .moon-icon { display: block; } .hero { position: relative; min-height: 760px; height: calc(100svh - 72px); max-height: none; display: grid; align-items: center; overflow: hidden; border-bottom: 1px solid var(--line); background-image: var(--hero-overlay), url("/static/images/source-0.jpg"); background-size: cover, contain; background-position: center, right center; background-repeat: no-repeat; } .hero-content { padding: 72px 0; } .section-kicker, .card-label { margin: 0 0 16px; color: var(--gold); font-size: var(--fs-xs); font-weight: 900; letter-spacing: 0; text-transform: uppercase; } .hero h1 { width: min(670px, 100%); margin: 0; font-size: var(--h1); font-weight: 300; line-height: 1; } .page-hero h1 { width: min(760px, 100%); margin: 0; font-size: var(--text-display); font-weight: 300; line-height: 0.98; text-transform: uppercase; } .page-hero h1 strong { color: var(--gold); font-weight: 300; } .hero h1 strong { color: var(--gold); font-weight: 300; } .hero-copy, .page-hero p, .section-copy p, .section-heading p, .featured-copy p, .info-card p, .product-panel p, .post-card p, .empty-state p, .site-footer p { color: var(--muted); font-size: var(--fs-base); line-height: var(--lh-relaxed); } /* Kicker/label size lock (UI-consistency pass): the muted-paragraph rule above (.section-heading p / .section-copy p, specificity 0,1,1) otherwise out-ranks the base .section-kicker (0,1,0), so a kicker inside a heading renders at body-copy size on pages with no page-specific re-assertion (e.g. blog). Match that specificity so every kicker reads at the label size; home keeps its larger emphasis via the more specific body.page-home rule. */ p.section-kicker, p.card-label { font-size: var(--fs-xs); } .hero-copy { max-width: 470px; margin: 24px 0 0; } /* The home hero overlay is dark in both themes (see --hero-overlay), so its text must stay light in bright mode — otherwise the heading (--text) and lede (--muted) would be near-black on a dark photo. Scoped to .hero, which is home-only (other pages use .page-hero with no photo scrim). */ body[data-theme="bright"] .hero h1 { color: #ededf0; } body[data-theme="bright"] .hero-copy { color: #c7c9cf; } body[data-theme="bright"] .hero .outline-btn { color: #ededf0; } .hero-actions, .inline-actions { gap: 12px; flex-wrap: wrap; margin-top: 32px; } .feature-strip { border-bottom: 1px solid var(--line); background: var(--surface); } .feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .feature-grid article { min-height: 124px; padding: 20px 22px; border-left: 1px solid var(--line); } .feature-grid article:last-child { border-right: 1px solid var(--line); } .feature-grid span, .process-list span { color: var(--gold); font-size: var(--fs-xs); font-weight: 900; } .feature-grid h2, .process-list h2 { margin: 12px 0 8px; font-size: 14px; line-height: 1.2; text-transform: uppercase; } .feature-grid p, .process-list p { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.55; } .section-block { scroll-margin-top: 180px; padding: var(--section-y) 0; border-bottom: 1px solid var(--line); } .alt-section { background: var(--surface); } .section-heading { margin-bottom: 34px; } .section-heading.constrained { max-width: 760px; } .section-heading h2, .section-copy h2, .featured-copy h3, .info-card h3, .product-panel h3, .post-card h2, .empty-state h2, .article-shell h1 { margin: 0; font-weight: 300; line-height: 1.05; text-transform: uppercase; } .section-heading h2, .section-copy h2, .article-shell h1 { font-size: var(--h2); } .editorial-grid, .split-section, .products-grid, .consultoria-grid, .page-hero-grid { display: grid; gap: var(--gap-lg); } .editorial-grid { grid-template-columns: 0.8fr 1.2fr; align-items: end; } .featured-post { display: grid; gap: 24px; } .media-frame { overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); box-shadow: var(--shadow); } .media-frame img { width: 100%; height: 100%; object-fit: cover; } .media-frame.wide { aspect-ratio: 16 / 9; } .media-frame.portrait { aspect-ratio: 4 / 5; } .media-frame.square { aspect-ratio: 1 / 1; } .featured-copy, .section-copy { max-width: var(--measure); } .latest-content-layout { display: grid; gap: 28px; } .content-heading-row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(260px, 0.55fr); gap: 28px; align-items: end; } .content-heading-row .section-heading { margin-bottom: 0; } .content-description { margin: 0 0 4px; color: var(--muted); font-size: var(--fs-md); line-height: 1.65; } .content-filter-row { display: flex; flex-wrap: wrap; gap: 10px; } .content-filter { min-height: 42px; padding: 0 18px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 72%, transparent); color: var(--muted); cursor: pointer; font: inherit; font-size: var(--fs-xs); font-weight: 900; text-transform: uppercase; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .content-filter:hover, .content-filter:focus-visible, .content-filter.is-active { border-color: var(--gold); background: var(--gold); color: var(--bg); outline: none; } /* Gold-filled buttons take their label from --bg so it reads dark on gold. In bright mode --bg flips light, washing the label out against the gold; pin it to the dark ink so it stays legible, matching the dark-theme look. */ body[data-theme="bright"] .solid-btn, body[data-theme="bright"] .content-filter:hover, body[data-theme="bright"] .content-filter:focus-visible, body[data-theme="bright"] .content-filter.is-active { color: #141416; } .content-panels, .content-panel { display: grid; gap: 18px; } .content-panel[hidden], .content-card[hidden], .content-carousel-controls[hidden], .tall-row[hidden] { display: none; } .content-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-sm); } .content-card { position: relative; min-height: 520px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); box-shadow: var(--shadow); isolation: isolate; } .content-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; } .content-card::after { position: absolute; inset: 0; z-index: 1; content: ""; background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 18%, rgba(0, 0, 0, 0.78) 100%); } .content-card-media, .content-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; } .content-card-media img { object-fit: cover; transition: transform 0.35s ease; } .content-card:hover .content-card-media img, .content-card:focus-visible .content-card-media img { transform: scale(1.04); } .content-card-copy { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; display: grid; gap: 8px; padding: var(--pad-card-sm); } .content-card-copy strong { color: var(--gold); font-size: var(--fs-2xs); font-weight: 900; letter-spacing: 0; text-transform: uppercase; } .content-card-title { /* The card always sits on a dark photo + dark gradient overlay, so the title must stay light regardless of theme (it would otherwise inherit the black --text in bright mode). Matches the white .content-card-subtitle below. */ color: #fff; font-size: var(--h4); font-weight: 400; line-height: 1.08; text-transform: uppercase; } .content-card-subtitle { color: rgba(255, 255, 255, 0.82); font-size: var(--fs-sm); line-height: 1.45; } .content-carousel-controls { display: flex; justify-content: flex-end; gap: 10px; } .content-carousel-btn { width: 44px; height: 44px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; font: inherit; font-size: var(--fs-lg); font-weight: 900; transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease; } .content-carousel-btn:hover, .content-carousel-btn:focus-visible { border-color: var(--gold); color: var(--gold); outline: none; } .content-carousel-btn:disabled { cursor: default; opacity: 0.38; } .split-section { grid-template-columns: 0.9fr 1.1fr; align-items: center; } .cards-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .consultoria-callout { padding: clamp(60px, 6.4vw, 92px) 0; background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--bg) 96%, transparent)), var(--bg); } /* Wider than the default .shell (1180px) so the callout fills more of the page. */ .consultoria-callout .shell { width: min(1320px, calc(100vw - 48px)); } .consultoria-callout-grid { display: grid; grid-template-columns: 0.82fr 1.12fr 0.92fr; min-height: clamp(420px, 42vw, 600px); align-items: stretch; overflow: hidden; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 86%, transparent); box-shadow: var(--shadow); } .consultoria-callout-media { position: relative; min-height: 400px; border-right: 1px solid var(--line); background: var(--surface-2); } .consultoria-callout-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; } .consultoria-callout-copy, .consultoria-callout-proof { display: flex; flex-direction: column; justify-content: center; } .consultoria-callout-copy { padding: clamp(32px, 3.6vw, 52px); } .consultoria-callout-copy .section-kicker { margin-bottom: 14px; } .consultoria-callout-copy h2 { max-width: 560px; margin: 0; font-size: var(--h3); font-weight: 300; line-height: 1.04; text-transform: uppercase; } .consultoria-callout-copy h2 span { display: block; color: var(--gold); } .consultoria-callout-copy p, .consultoria-callout-proof p, .consultoria-reasons { color: var(--muted); font-size: 14px; line-height: 1.5; } .consultoria-callout-copy > p { max-width: 430px; margin: 22px 0 0; font-size: var(--fs-base); line-height: 1.6; } .consultoria-callout-action { display: grid; justify-items: start; gap: 10px; margin-top: 22px; } .consultoria-callout-action span { max-width: 360px; color: color-mix(in srgb, var(--muted) 86%, var(--text)); font-size: var(--fs-2xs); line-height: 1.5; } .consultoria-callout-proof { padding: clamp(32px, 3vw, 48px); border-left: 1px solid var(--line); background: color-mix(in srgb, var(--surface-2) 44%, transparent); } .consultoria-callout-proof p { margin: 0 0 6px; color: var(--text); font-size: 17px; font-weight: 800; line-height: 1.4; } .consultoria-reasons { margin: 0; padding: 0; list-style: none; } .consultoria-reasons li { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); font-size: var(--fs-base); line-height: 1.55; } .consultoria-reasons-num { flex: 0 0 auto; color: var(--gold); font-size: var(--fs-sm); font-weight: 900; } .info-card, .post-card, .empty-state, .application-form, .product-panel { border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 84%, transparent); padding: var(--pad-card); } .info-card ul { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: var(--fs-sm); } .info-card li { padding-top: 10px; border-top: 1px solid var(--line); } .cta-card { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; } .products-grid { grid-template-columns: 0.8fr 1fr 1fr; align-items: stretch; } .product-panel { display: flex; flex-direction: column; gap: 24px; } /* Let the text column fill the panel's stretched height so the CTA can anchor to the bottom-right corner of the card (works with or without an image above it). */ .product-panel > div:last-child { flex: 1; display: flex; flex-direction: column; } .product-panel .outline-btn { margin-top: auto; align-self: flex-end; } /* The products heading column carries the "ver todos" CTA at its foot, so the button fills the empty space under the title and bottom-aligns with the cards beside it. */ .products-grid .section-heading { display: flex; flex-direction: column; margin-bottom: 0; } .products-more-cta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; min-height: clamp(80px, 9vw, 104px); padding: clamp(22px, 2.4vw, 30px); border: 1px solid var(--gold); border-radius: var(--radius-control); background: transparent; color: var(--text); font-size: clamp(13px, 1.05vw, 15px); font-weight: 900; letter-spacing: 0.05em; line-height: 1.2; text-transform: uppercase; transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease; } .products-more-cta svg { flex: 0 0 auto; width: var(--icon-lg); height: var(--icon-lg); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s ease; } .products-more-cta:hover { transform: translateY(-1px); background: var(--gold); color: var(--bg); } .products-more-cta:hover svg { transform: translateX(4px); } .page-hero { padding: 96px 0 72px; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 34%), var(--bg); } .page-hero.compact { min-height: 420px; display: grid; align-items: center; } .consultoria-hero { padding-bottom: 88px; } .page-hero-grid { grid-template-columns: 1.05fr 0.95fr; align-items: center; } .post-list { display: grid; gap: 18px; } .post-card h2 { font-size: var(--h3); } .post-card { display: grid; gap: 18px; } .article-shell { padding: var(--section-y) 0; } .back-link { margin: 0 0 28px; color: var(--gold); font-size: var(--fs-xs); font-weight: 900; text-transform: uppercase; } .article-excerpt { color: var(--muted); font-size: var(--fs-lg); line-height: 1.6; } .article-cover { margin: 34px 0; } .article-body { color: var(--text); font-size: var(--fs-md); line-height: 1.8; } .rich-copy { color: var(--muted); font-size: var(--fs-base); line-height: 1.7; } .rich-copy p:first-child { margin-top: 0; } .rich-copy p:last-child { margin-bottom: 0; } .article-body a, .rich-copy a { color: var(--gold); text-decoration: underline; } .article-body figure, .rich-copy figure { margin: 32px 0; } .article-body img, .rich-copy img { width: auto; height: auto; max-width: 100%; border: 1px solid var(--line); } .article-body figure.media, .rich-copy figure.media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; } .article-body figure.media iframe, .rich-copy figure.media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .article-body table, .rich-copy table { width: 100%; margin: 28px 0; border-collapse: collapse; font-size: var(--fs-base); } .article-body th, .article-body td, .rich-copy th, .rich-copy td { border: 1px solid var(--line); padding: 12px 14px; text-align: left; } .consultoria-grid { grid-template-columns: 0.95fr 1.05fr; align-items: start; } .process-list { display: grid; gap: 18px; margin-top: 34px; } .process-list article { border-top: 1px solid var(--line); padding-top: 20px; } .application-form { position: sticky; top: 96px; display: grid; gap: 18px; } .application-form h2 { margin: 0 0 6px; font-size: 30px; font-weight: 300; text-transform: uppercase; } .form-row { display: grid; grid-template-columns: 1fr 0.45fr; gap: 14px; } .form-field, .checkbox-field { display: grid; gap: 8px; } .form-field label, .checkbox-field label { color: var(--muted); font-size: var(--fs-xs); font-weight: 900; text-transform: uppercase; } .form-field input, .form-field textarea { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--bg); color: var(--text); padding: 13px 14px; font: 500 15px/1.4 Inter, Arial, Helvetica, sans-serif; } .form-field textarea { min-height: 126px; resize: vertical; } .checkbox-field { grid-template-columns: auto 1fr; align-items: start; } .checkbox-field input { margin-top: 2px; } .checkbox-field .errorlist, .form-field .errorlist { grid-column: 1 / -1; } .errorlist { margin: 0; padding: 0; list-style: none; color: #f2a7a7; font-size: var(--fs-sm); } .full-btn { width: 100%; } .site-footer { padding: 42px 0; border-top: 1px solid var(--line); } .footer-grid { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .footer-logo { width: 150px; height: auto; filter: var(--logo-filter); } .site-footer p { margin: 16px 0 0; } .footer-links { gap: 18px; color: var(--muted); font-size: var(--fs-xs); font-weight: 900; text-transform: uppercase; } /* About callout (home) + Sobre page ----------------------------------- */ /* Shared editorial primitives */ .about-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 22px; color: var(--gold); font-size: 12px; font-weight: 900; letter-spacing: 0.22em; text-transform: uppercase; } .about-eyebrow::after { content: ""; width: 38px; height: 1px; background: currentColor; opacity: 0.6; } .about-eyebrow--bare::after { content: none; } .about-chapter { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0 0 18px; } .about-num { font-family: var(--about-display); font-size: clamp(28px, 4.2vw, 56px); font-weight: 500; line-height: 0.9; color: var(--about-num-solid); } .about-chapter-label { color: var(--gold); font-size: clamp(12px, 1.3vw, 16px); font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; } /* Giant outlined chapter numeral (block 06) */ .about-shell-num { position: relative; } .about-ghost-num { position: absolute; top: -12px; left: clamp(-56px, -3.5vw, -16px); font-family: var(--about-display); font-size: clamp(150px, 17.5vw, 250px); font-weight: 600; line-height: 0.8; color: transparent; -webkit-text-stroke: 2px var(--about-num); pointer-events: none; user-select: none; } .about-chapter--rail { margin: 0 0 clamp(18px, 2.8vw, 34px); } .about-chapter--inline { margin-bottom: clamp(18px, 2.8vw, 34px); } .about-num-offset { padding-left: clamp(0px, 16vw, 0px); } .about-h { margin: 0; font-family: var(--about-display); font-weight: 600; line-height: 1.04; letter-spacing: 0.005em; text-transform: uppercase; color: var(--about-text); } .about-h em { color: var(--gold); font-style: normal; } .about-h--xl { font-size: clamp(34px, 4.6vw, 62px); } .about-h--lg { font-size: clamp(30px, 3.8vw, 59px); } .about-h--md { font-size: clamp(24px, 2.6vw, 38px); } .about-rule { display: block; width: 54px; height: 2px; margin: 22px 0; background: var(--gold); } .about-lead, .about-col-copy p, .about-bleed-content p { color: var(--about-muted); font-size: clamp(16px, 1.6vw, 20px); line-height: 1.8; } .about-gold-line { color: var(--gold); font-weight: 700; } /* Win over the .about-col-copy p / .about-bleed-content p muted colour so the gold emphasis lines actually read gold (blocks 1.2, 2, 3). */ .about-col-copy p.about-gold-line, .about-bleed-content p.about-gold-line { color: var(--gold); font-size: clamp(16px, 1.8vw, 22px); } /* The bare eyebrow ("A pergunta") is a

inside .about-col-copy, so the muted .about-col-copy p rule (0,2,0) overrides the gold .about-eyebrow base. Re-assert gold so this kicker reads gold in both themes, like the other section kickers. */ .about-col-copy p.about-eyebrow--bare { color: var(--gold); } .about-icon { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* Full-bleed photo sections (hero / metodo / hoje / final CTA) */ .about-bleed { position: relative; background-color: var(--about-bg); background-size: cover; background-position: center; } .about-bleed > .shell { position: relative; z-index: 1; padding: clamp(72px, 9vw, 132px) 0; } .about-bleed-content { max-width: 560px; } .about-method-content { max-width: 720px; } .about-final-content { max-width: 780px; } .about-bleed--right .about-bleed-content { margin-left: auto; } /* Bleed-band chapter markers (metodo / hoje) read larger than the hero one */ .about-bleed .about-num { font-size: clamp(36px, 4.2vw, 56px); } /* Hero (Sobre page) */ .about-hero { min-height: 760px; height: calc(100svh - 72px); max-height: none; background-position: 58% center; } /* Cap the Sobre hero on tall monitors; min-height/svh still govern below. */ #sobre-pergunta { max-height: 800px; } .about-hero > .shell { display: flex; min-height: inherit; align-items: center; } .about-hero-grid { display: grid; grid-template-columns: auto 1fr; column-gap: clamp(32px, 4.5vw, 64px); row-gap: clamp(40px, 6vw, 80px); max-width: 760px; } .about-hero-grid .about-eyebrow { grid-column: 1 / -1; margin: 0; } .about-hero .about-chapter { margin: 0; padding-top: 6px; } .about-hero .about-num { font-size: clamp(24px, 4.2vw, 56px); } .about-hero .about-h--xl { max-width: 530px; } .about-hero .about-hero-copy > p { max-width: 560px; margin: 0; color: var(--about-text); opacity: 0.82; line-height: 1.85; } .about-hero .about-hero-copy p + p { margin-top: 18px; } .about-hero .about-hero-copy h1 { margin-bottom: clamp(28px, 3.5vw, 48px); } /* Home callout: split layout — photo left, solid panel right */ .about-callout { display: grid; grid-template-columns: minmax(0, 0.96fr) minmax(0, 1fr); min-height: clamp(520px, 46vw, 700px); background: var(--about-bg); } .about-callout-media { position: relative; } .about-callout-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .about-callout-panel { display: flex; align-items: center; padding: clamp(56px, 7vw, 104px) clamp(28px, 6vw, 110px) clamp(56px, 7vw, 104px) clamp(28px, 4.5vw, 76px); } .about-callout-content { max-width: 520px; } .about-callout .about-eyebrow { display: block; max-width: 19ch; margin: 0 0 clamp(22px, 2.6vw, 36px); font-size: 13px; line-height: 1.75; letter-spacing: 0.22em; } .about-callout .about-eyebrow::after { content: none; } /* Home (page-home) kicker texts all read at 18px — hero, latest content, consultoria, products card labels, and the about-callout eyebrow. Scoped to the home body and placed after the per-section overrides above (e.g. the 13px .about-callout .about-eyebrow) so equal-specificity rules lose on source order and every home kicker lands on 18px. */ body.page-home .section-kicker, body.page-home .card-label, body.page-home .about-eyebrow { font-size: var(--fs-md); } .about-callout .about-h { max-width: 16ch; font-size: clamp(34px, 4.1vw, 58px); line-height: 1.06; } .about-callout .about-h em { color: inherit; } .about-callout .about-rule { width: clamp(68px, 7vw, 104px); height: 3px; margin: clamp(24px, 2.6vw, 36px) 0; } .about-callout-content > p:not(.about-eyebrow) { max-width: 44ch; margin: 0 0 16px; color: var(--about-muted); font-size: 16px; line-height: 1.65; } .about-callout .solid-btn { border-color: var(--about-cta-bg); background: var(--about-cta-bg); color: var(--about-cta-text); padding: 16px 26px; letter-spacing: 0.12em; } .about-callout-action { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 3vw, 44px); } .cta-arrow { display: inline-flex; align-items: center; gap: 10px; } .cta-arrow svg { width: var(--icon-md); height: var(--icon-md); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Generic block + split layout */ .about-block { padding: clamp(72px, 9vw, 124px) 0; background: var(--about-bg); } .about-block--alt { background: var(--about-deep); } .about-flow > * + * { margin-top: clamp(44px, 6vw, 84px); } .about-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; } .about-col-copy { max-width: 540px; text-align: left; justify-self: start; } /* Block 01: copy wider than the floating quote */ .about-split--quote { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } /* Block 02: copy left, image cards right */ .about-busca-grid { display: grid; grid-template-columns: minmax(230px, 1fr) minmax(0, 2.5fr); gap: clamp(28px, 4vw, 56px); align-items: start; } /* Block 06: narrow copy + three roomy cards */ .about-split--impacto { grid-template-columns: minmax(230px, 1fr) minmax(0, 3.1fr); } /* Pull quotes: full-width rounded panel band */ .about-pullquote { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(24px, 4vw, 64px); margin: 0; padding: clamp(26px, 3vw, 38px) clamp(28px, 5vw, 96px); border: 1px solid var(--about-panel-line); border-radius: var(--radius-card); background: var(--about-panel); text-align: center; } .about-pullquote p { margin: 0; font-size: clamp(17px, 1.7vw, 22px); font-weight: 400; line-height: 1.5; color: var(--about-text); } .about-pullquote em { color: var(--gold); font-style: normal; } .about-quotemark { font-family: Georgia, "Times New Roman", serif; font-size: clamp(46px, 4.4vw, 70px); font-weight: 700; line-height: 1; color: color-mix(in srgb, var(--gold) 85%, transparent); } .about-quotemark--end { align-self: center; } /* Side quote (origem): free-floating, no panel */ .about-quote { margin: 0; padding: 0; max-width: 420px; } .about-quote p { margin: 10px 0; font-size: clamp(20px, 1.9vw, 26px); font-weight: 300; font-style: italic; line-height: 1.75; color: var(--about-text); } .about-quote .about-quotemark { display: block; font-size: clamp(46px, 4.4vw, 70px); } .about-quote .about-quotemark--end { text-align: right; } /* Stat cards (origem): one rounded panel with internal dividers */ .about-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(40px, 5vw, 64px); border: 1px solid var(--about-line); border-radius: var(--radius-card); background: var(--about-surface); overflow: hidden; } .about-stat { display: grid; gap: 10px; justify-items: center; text-align: center; padding: clamp(28px, 3vw, 42px) 22px; } .about-stat + .about-stat { border-left: 1px solid var(--about-line); } .about-stat .about-icon { width: 54px; height: 54px; stroke-width: 1.4; } .about-stat h3 { margin: 4px 0 0; font-size: 15px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--about-text); } .about-stat p { margin: 0; color: var(--about-muted); font-size: 14px; line-height: 1.55; } /* Image cards (busca): portrait, borderless, centered captions */ .about-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 0; } .about-card { display: flex; flex-direction: column; background: var(--about-surface); overflow: hidden; } .about-card-media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--surface-2); } .about-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .about-card-body { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 24px 16px 28px; } .about-card .about-icon { width: 38px; height: 38px; stroke-width: 1.5; } .about-card h3 { margin: 2px 0 0; font-size: 14px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--about-text); } .about-card p { margin: 0; color: var(--about-muted); font-size: 13px; line-height: 1.55; } /* Radial system diagram (descoberta): two gold rings, dots on the outer ring, labels outside. Children order is fixed by the template: ring, inner ring, core, 6 dots (nth-child 4-9), 6 labels (nth-child 10-15). */ .about-system { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 460px; margin: 0 auto; } /* Span the full shell (like blocks 01/02/06) so the copy column aligns to the chapter rail / left gutter instead of being inset by a centered container. */ #b-cap-03 .about-split { align-items: center; } #b-cap-03 .about-col-copy { max-width: 470px; } #b-cap-03 .about-system-wrap { display: grid; align-items: center; min-height: 100%; } #b-cap-03 .about-system { max-width: 520px; } #b-cap-03 .about-pullquote { margin-top: clamp(34px, 5vw, 30px); } .about-system-ring { position: absolute; inset: 16%; border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); border-radius: var(--radius-pill); } .about-system-ring--inner { inset: 29%; } .about-system-core { position: absolute; inset: 31%; display: grid; place-items: center; padding: 12px; color: var(--gold); font-size: clamp(12px, 1.3vw, 20px); font-weight: 800; letter-spacing: 0.1em; line-height: 1.45; text-align: center; text-transform: uppercase; } .about-system-dot { position: absolute; width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--gold); transform: translate(-50%, -50%); } .about-system-dot:nth-child(4) { top: 16%; left: 50%; } .about-system-dot:nth-child(5) { top: 33%; left: 79.4%; } .about-system-dot:nth-child(6) { top: 67%; left: 79.4%; } .about-system-dot:nth-child(7) { top: 84%; left: 50%; } .about-system-dot:nth-child(8) { top: 67%; left: 20.6%; } .about-system-dot:nth-child(9) { top: 33%; left: 20.6%; } .about-node { position: absolute; width: max-content; color: var(--about-text); font-size: clamp(11px, 1.5vw, 18px); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .about-node:nth-child(10) { top: 9%; left: 50%; transform: translate(-50%, -50%); } .about-node:nth-child(11) { top: 33%; left: 83.5%; transform: translate(0, -50%); } .about-node:nth-child(12) { top: 67%; left: 83.5%; transform: translate(0, -50%); } .about-node:nth-child(13) { top: 91%; left: 50%; transform: translate(-50%, -50%); } .about-node:nth-child(14) { top: 67%; left: 16.5%; transform: translate(-100%, -50%); } .about-node:nth-child(15) { top: 33%; left: 16.5%; transform: translate(-100%, -50%); } .about-system-fallback { display: none; } /* Process steps (metodo) */ /* Method steps: horizontal connected timeline (matches bloco 4 reference) */ .about-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(6px, 0.8vw, 14px); margin-top: clamp(36px, 4vw, 56px); } #sobre-metodo { background-position: 36% center; } #sobre-metodo .shell { display: flex; justify-content: flex-end; } #sobre-metodo .about-method-intro { max-width: 720px; } #sobre-metodo .about-method-intro p { font-size: clamp(15px, 1.8vw, 20px); } #sobre-metodo .about-steps { margin-top: clamp(30px, 3.5vw, 48px); } .about-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 clamp(2px, 0.6vw, 10px); text-align: center; } /* connector chevron between consecutive steps, centered on the badge row */ .about-step:not(:last-child)::after { content: ""; position: absolute; top: clamp(52px, calc(10px + 6.25vw), 81px); left: 100%; width: 9px; height: 9px; border-top: 2px solid color-mix(in srgb, var(--gold) 65%, transparent); border-right: 2px solid color-mix(in srgb, var(--gold) 65%, transparent); transform: translate(-50%, -50%) rotate(45deg); } .about-step-badge { display: grid; place-items: center; width: clamp(56px, 6.5vw, 74px); height: clamp(56px, 6.5vw, 74px); border: 1px solid color-mix(in srgb, var(--gold) 75%, transparent); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--about-panel) 70%, transparent); } .about-step-badge .about-icon { width: 26px; height: 26px; stroke: var(--about-text); } .about-step-num { font-family: var(--about-display); color: var(--gold); font-size: clamp(16px, 3vw, 34px); font-weight: 700; line-height: 1; letter-spacing: 0.12em; } .about-step h3 { margin: 2px 0 0; font-size: clamp(12.5px, 1.4vw, 14.5px); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); } .about-step p { margin: 0; color: var(--about-muted); font-size: clamp(12px, 1.4vw, 15px); line-height: 1.5; } .about-method-tagline { margin: clamp(40px, 5vw, 64px) 0 0; padding-top: clamp(20px, 2.5vw, 30px); border-top: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); color: var(--about-text); font-size: 13px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; text-align: center; } /* The tagline

sits in .about-bleed-content, whose `p` rule (0,1,1) outweighs .about-method-tagline (0,1,0); an id-scoped rule must win so the desktop size applies. Mobile stays at 13px (clamp min). */ #sobre-metodo .about-method-tagline { font-size: clamp(13px, 1.4vw, 17px); } .about-method-tagline em { color: var(--gold); font-style: normal; } .about-transition-rule { position: relative; display: grid; place-items: center; min-height: clamp(42px, 5vw, 76px); background: var(--about-bg); } .about-transition-rule::before { content: ""; width: min(760px, calc(100vw - 48px)); height: 1px; background: linear-gradient( 90deg, transparent, color-mix(in srgb, var(--gold) 58%, transparent), transparent ); } .about-transition-rule span { position: absolute; width: 8px; height: 8px; border: 1px solid var(--gold); transform: rotate(45deg); background: var(--about-bg); } /* Goals (hoje): rounded translucent panel floating over the photo band */ .about-goals-band { margin-top: clamp(40px, 5vw, 64px); padding: clamp(36px, 4vw, 56px) clamp(16px, 2.5vw, 36px); border: 1px solid var(--about-panel-line); border-radius: var(--radius-card); background: var(--about-overlay); } #sobre-busca .about-pullquote { margin-top: clamp(36px, 5vw, 72px); } #sobre-hoje > .shell { padding: clamp(42px, 5vw, 40px) 0; } #sobre-hoje > .shell + .shell { padding-top: 0; } #sobre-hoje .about-goals-band { margin-top: clamp(18px, 2.5vw, 0px); padding: clamp(22px, 2.6vw, 0px) clamp(14px, 2vw, 28px); border-radius: var(--radius-card); } #sobre-hoje .about-goals-band > h3 { margin-bottom: clamp(20px, 2.5vw, 30px); } #sobre-hoje .about-pullquote { margin-top: clamp(24px, 3.5vw, 44px); } .about-goals-band > h3 { margin: 0 0 clamp(28px, 3vw, 40px); font-size: clamp(18px, 2vw, 26px); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; text-align: center; color: var(--about-text); } .about-goals-band > h3 em { color: var(--gold); font-style: normal; } .about-goals { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; list-style: none; } .about-goal { display: grid; justify-items: center; align-content: start; gap: 14px; padding: 0 clamp(12px, 1.8vw, 26px); text-align: center; } .about-goal + .about-goal { border-left: 1px solid var(--about-line); } .about-goal .about-icon { width: 52px; height: 52px; stroke-width: 1.1; } .about-goal h4 { margin: 4px 0 0; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--about-text); } .about-goal p { margin: 0; color: var(--about-muted); font-size: 12.5px; line-height: 1.5; } /* Testimonials (prova) — bloco 06 carousels */ #sobre-impacto .about-split--impacto { grid-template-columns: minmax(230px, 1fr) minmax(0, 3.1fr); align-items: start; gap: clamp(40px, 5vw, 84px); } #sobre-impacto .about-col-copy { max-width: 540px; } #sobre-impacto .about-chapter { margin-bottom: 18px; } /* Right column: two stacked carousels */ .about-impacto-stack { display: flex; flex-direction: column; gap: clamp(30px, 3.4vw, 50px); min-width: 0; } .about-carousel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .about-carousel-label { display: block; color: var(--gold); font-size: 13px; font-weight: 900; letter-spacing: 0.22em; text-transform: uppercase; } .about-carousel-sub { display: block; margin-top: 5px; color: var(--about-muted); font-size: 13.5px; line-height: 1.5; } .about-carousel-head .content-carousel-controls { flex: none; } .about-carousel-viewport { overflow: hidden; } .about-carousel-track { display: flex; gap: 20px; transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: transform; } .about-carousel-item { flex: 0 0 calc((100% - 40px) / 3); min-width: 0; } .about-testimonial { display: grid; gap: 16px; padding: 28px 26px; border: 1px solid var(--about-line); border-radius: var(--radius-card); background: var(--about-surface); } figure.about-testimonial.about-carousel-item { margin: 0; align-content: start; } /* Transformation media cards (3:4 portrait) */ .about-media-card { position: relative; margin: 0; aspect-ratio: 3 / 4; border: 1px solid var(--about-line); border-radius: var(--radius-card); overflow: hidden; background: var(--about-surface); } .about-media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .about-media-play { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-pill); border: 1px solid var(--gold); background: color-mix(in srgb, #08090c 52%, transparent); backdrop-filter: blur(3px); pointer-events: none; } .about-media-caption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 4px; padding: 18px 16px 15px; pointer-events: none; background: linear-gradient( to top, rgba(8, 9, 12, 0.94), rgba(8, 9, 12, 0.5) 52%, transparent ); } .about-media-tag { color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; } .about-media-caption strong { color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .about-media-detail { color: var(--about-muted); font-size: 11px; letter-spacing: 0.04em; } /* Video cards are