:root { color-scheme: light dark; --sand: #f3f0e6; --paper: #fffdf7; --forest: #17372f; --forest-raised: #21463c; --dry-green: #526b59; --clay: #9b542f; --clay-hover: #7d3f22; --ink: #242923; --muted: #596158; --line: #c9c7b9; --focus: #005fcc; --on-dark: #fffdf7; --max-width: 76rem; --reading-width: 46rem; --radius-small: 0.35rem; --space-page: clamp(1.15rem, 4vw, 3.5rem); --space-section: clamp(4.75rem, 9vw, 8.5rem); --shadow: 0 0.8rem 2.5rem rgb(23 55 47 / 10%); } @media (prefers-color-scheme: dark) { :root { --sand: #17201c; --paper: #202b26; --forest: #b9d8c6; --forest-raised: #d2e8dc; --dry-green: #9fbaa7; --clay: #e19a72; --clay-hover: #f2b28c; --ink: #f1f3ec; --muted: #c5cbc2; --line: #4a5b52; --focus: #85b9ff; --on-dark: #142019; --shadow: 0 0.8rem 2.5rem rgb(0 0 0 / 25%); } } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; overflow-x: hidden; background: var(--sand); color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 1rem; line-height: 1.65; text-rendering: optimizeLegibility; } a { color: inherit; } svg { display: block; max-width: 100%; } .shell { width: min(100% - (2 * var(--space-page)), var(--max-width)); margin-inline: auto; } .section { padding-block: var(--space-section); } .skip-link { position: fixed; z-index: 20; inset: 0 auto auto 0; padding: 0.8rem 1rem; background: var(--focus); color: var(--on-dark); transform: translateY(-110%); } .skip-link:focus { transform: translateY(0); } :focus-visible { outline: 0.2rem solid var(--focus); outline-offset: 0.22rem; } .site-header { position: sticky; z-index: 10; top: 0; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--sand) 92%, transparent); backdrop-filter: blur(0.7rem); } .header-inner { min-height: 5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .brand { display: inline-flex; flex-direction: column; text-decoration: none; line-height: 1; } .brand-name { color: var(--forest); font-size: 1.45rem; font-weight: 760; letter-spacing: -0.05em; } .brand-description { margin-top: 0.3rem; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.08em; } nav { display: flex; align-items: center; gap: clamp(0.5rem, 2vw, 1.5rem); } .header-link { min-height: 2.75rem; display: inline-flex; align-items: center; padding-inline: 0.25rem; font-weight: 650; text-decoration: none; } .button { min-height: 3.25rem; display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.15rem; border: 1px solid var(--forest); border-radius: var(--radius-small); background: var(--forest); color: var(--on-dark); font-weight: 720; text-align: center; text-decoration: none; } .button:hover { background: var(--forest-raised); } .button-small { min-height: 2.75rem; padding-block: 0.55rem; font-size: 0.9rem; } .text-link { min-height: 2.75rem; display: inline-flex; align-items: center; color: var(--forest); font-weight: 720; text-underline-offset: 0.28rem; } .hero { padding-block: clamp(4rem, 10vw, 8.5rem); } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr); align-items: center; gap: clamp(2rem, 7vw, 7rem); } .context-line { margin: 0 0 1.2rem; color: var(--clay); font-weight: 720; } h1, h2, h3, p { overflow-wrap: break-word; } /* `hyphens` age ANTES do `overflow-wrap`: se uma palavra longa não couber, ela é hifenizada (o dá o dicionário) em vez de cortada no meio sem sinal nenhum. O `break-word` fica como última rede, para o layout nunca estourar na horizontal. */ h1, h2, h3 { margin-top: 0; color: var(--forest); line-height: 1.08; letter-spacing: -0.035em; hyphens: auto; } /* Os dois números do

são MEDIDOS, e são duas restrições independentes — a palavra mais longa do título é "empreendimento": · max-width: ela mede 14,12ch nesta pilha de fontes, então qualquer valor em `ch` abaixo disso a parte no meio em QUALQUER tamanho de fonte. O 13ch original fazia exatamente isso. 16ch dá ~13% de folga para as fontes dos outros sistemas (a proporção palavra/"0" muda entre Segoe UI, Roboto e San Francisco), e ainda é medida curta de manchete. · piso do clamp: a 360 px o contêiner do título tem 323 px, e a palavra só cabe aí até 40 px. 2.4rem = 38,4 px. */ h1 { max-width: 16ch; margin-bottom: 1.5rem; font-size: clamp(2.4rem, 6vw, 5.3rem); font-weight: 740; } /* Teto medido a 1920 px: o h2 mais apertado é o do bloco de processo, numa coluna de 462 px, e a palavra mais longa dele ("acompanhamento") só cabe até 56,3 px. 3.3rem = 52,8 px deixa ~6% de folga. Os outros dezesseis títulos da página têm folga de sobra neste valor. */ h2 { margin-bottom: 1.15rem; font-size: clamp(2rem, 4vw, 3.3rem); font-weight: 720; } h3 { margin-bottom: 0.8rem; font-size: clamp(1.25rem, 2vw, 1.55rem); } .hero-lead { max-width: 43rem; margin: 0; color: var(--muted); font-size: clamp(1.08rem, 1.8vw, 1.35rem); } .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; } .territory { min-width: 0; padding: clamp(1rem, 3vw, 2rem); border-left: 1px solid var(--line); color: var(--dry-green); } .territory svg { width: 100%; } .territory path, .territory ellipse { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; } .territory ellipse:last-child { fill: var(--clay); stroke: var(--clay); opacity: 0.8; } .territory p { max-width: 18rem; margin: 1.5rem 0 0; color: var(--forest); font-size: 1.1rem; font-weight: 700; } .inside-view { border-block: 1px solid var(--line); background: var(--forest); color: var(--on-dark); } .inside-view-layout { display: grid; grid-template-columns: minmax(12rem, 0.55fr) minmax(0, 1.45fr); gap: clamp(2rem, 7vw, 7rem); } .experience-period { margin: 0; color: var(--clay); font-weight: 760; } .inside-view h2 { max-width: 16ch; color: var(--on-dark); } .inside-view-layout > div > p { max-width: var(--reading-width); margin-bottom: 0; font-size: clamp(1.08rem, 1.7vw, 1.25rem); } .section-heading { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(16rem, 1.1fr); align-items: end; gap: 2rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); } .section-heading h2, .section-heading p { margin-bottom: 0; } .section-heading p { max-width: var(--reading-width); color: var(--muted); } .services { border-top: 1px solid var(--line); background: var(--paper); } .service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); } .service { min-width: 0; padding: clamp(1.5rem, 3vw, 2.5rem); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); } .service p { max-width: 44rem; margin: 0; color: var(--muted); } .service ul { margin: 1.1rem 0 0; padding-left: 1.2rem; color: var(--muted); } .service li + li { margin-top: 0.65rem; } .service li::marker { color: var(--clay); } .process { background: var(--forest); color: var(--on-dark); } .process h2 { color: var(--on-dark); } .process-layout { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(20rem, 1.15fr); gap: clamp(3rem, 8vw, 8rem); } .process .section-heading { display: block; margin: 0; } .process .section-heading p { color: var(--on-dark); opacity: 0.82; } .process-list { margin: 0; padding: 0; list-style: none; counter-reset: steps; } .process-list li { counter-increment: steps; display: grid; grid-template-columns: 3.5rem 1fr; gap: 0 1rem; padding: 1.4rem 0; border-top: 1px solid color-mix(in srgb, var(--on-dark) 30%, transparent); } .process-list li::before { content: counter(steps, decimal-leading-zero); grid-row: 1 / 3; color: var(--clay); font-weight: 760; } .process-list strong { color: var(--on-dark); font-size: 1.18rem; } .process-list span { opacity: 0.82; } .work-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); } .work-list article { min-width: 0; padding: clamp(1.3rem, 2.5vw, 2rem); background: var(--sand); } .work-list span { display: block; margin-bottom: 2.5rem; color: var(--clay); font-size: 0.86rem; font-weight: 700; } .work-list p { margin-bottom: 0; color: var(--muted); } .software-note { border-block: 1px solid var(--line); background: var(--paper); } .software-layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 7vw, 7rem); } .software-layout h2 { font-size: clamp(1.8rem, 3.4vw, 3.1rem); } .software-layout p { max-width: var(--reading-width); margin-top: 0; font-size: 1.12rem; } .profile-layout { display: grid; grid-template-columns: minmax(15rem, 0.72fr) minmax(0, 1.28fr); align-items: start; gap: clamp(2.5rem, 8vw, 8rem); } .profile-intro { padding-top: 0.75rem; border-top: 0.3rem solid var(--clay); } .profile-copy { max-width: 42rem; } .profile-name { margin-bottom: 0.35rem; color: var(--clay); font-size: 1.35rem; font-weight: 760; } .profile-title { margin: 0; color: var(--muted); font-weight: 680; } .contact { background: var(--clay); color: var(--on-dark); } .contact h2 { max-width: 15ch; color: var(--on-dark); } .contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.72fr); align-items: end; gap: clamp(2.5rem, 8vw, 8rem); } .contact-layout p { max-width: 38rem; margin-bottom: 0; } .contact-links { display: flex; flex-direction: column; font-style: normal; } .contact-links a, .contact-links span { min-height: 3.5rem; display: flex; align-items: center; border-top: 1px solid color-mix(in srgb, var(--on-dark) 45%, transparent); } .contact-links a { font-weight: 720; text-underline-offset: 0.25rem; } .site-footer { padding-block: 2rem; background: var(--forest); color: var(--on-dark); } .footer-inner { display: flex; justify-content: space-between; gap: 1rem 2rem; } .footer-inner p { margin: 0; font-size: 0.9rem; } .error-page { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; } .error-main { display: grid; place-items: center; padding-block: var(--space-section); } .error-card { max-width: 46rem; } .error-code { margin: 0 0 0.75rem; color: var(--clay); font-size: 1rem; font-weight: 750; } .error-card h1 { max-width: 12ch; } .error-card > p { max-width: 38rem; color: var(--muted); font-size: 1.12rem; } @media (max-width: 62rem) { .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.6fr); gap: 2rem; } .work-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 47.99rem) { .header-link { display: none; } .hero-grid, .inside-view-layout, .section-heading, .process-layout, .software-layout, .profile-layout, .contact-layout { grid-template-columns: 1fr; } .territory { width: min(100%, 28rem); padding: 1.5rem 0 0; border-top: 1px solid var(--line); border-left: 0; } .territory svg { max-height: 18rem; } .process .section-heading { margin-bottom: 1rem; } } @media (max-width: 35rem) { .header-inner { min-height: 4.5rem; } .brand-description { display: none; } .button-small { max-width: 11.5rem; line-height: 1.15; } .service-grid, .work-list { grid-template-columns: 1fr; } .footer-inner { flex-direction: column; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }