.site-header { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 2.5rem; height: var(--header-h); padding: 0 var(--pad-x); background: rgba(7,17,15,.08); transition: background var(--motion-normal) ease, backdrop-filter var(--motion-normal) ease, border-color var(--motion-normal) ease; border-bottom: 1px solid transparent; }
.site-header.is-scrolled { background: rgba(7,17,15,.78); backdrop-filter: blur(16px); border-color: rgba(241,243,235,.1); }
.brand { display: inline-flex; align-items: baseline; gap: .55rem; flex-shrink: 0; }
.desktop-nav { display: flex; align-items: center; gap: clamp(1.1rem, 2vw, 2.2rem); margin-inline: auto; }
.desktop-nav a { position: relative; color: var(--paper-muted); font: 500 .62rem var(--font-mono); letter-spacing: .09em; text-transform: uppercase; transition: color .3s ease; }
.desktop-nav a::after { content: ''; position: absolute; right: 0; bottom: -.65rem; left: 0; height: 1px; background: var(--lime); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease-expo); }
.desktop-nav a:hover, .desktop-nav a.is-active { color: var(--paper); }
.desktop-nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.header-cta { flex-shrink: 0; }
.header-progress { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: transparent; }
.header-progress span { display: block; width: 100%; height: 100%; background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform .12s linear; }
.site-header:not(.is-scrolled) .header-progress { opacity: .35; }
.menu-toggle { display: none; align-items: center; gap: .5rem; color: var(--paper); font: 500 .66rem var(--font-mono); text-transform: uppercase; }
.menu-toggle svg { width: 19px; }
.mobile-menu { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; padding: 1.5rem var(--pad-x); background: var(--ink); opacity: 0; pointer-events: none; transform: translateY(-1rem); transition: opacity .4s ease, transform .5s var(--ease-expo); }
.mobile-menu.is-open { opacity: 1; pointer-events: auto; transform: none; }
.mobile-menu-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.mobile-menu-top button svg { width: 23px; color: var(--lime); }
.mobile-menu nav { display: flex; flex-direction: column; padding-top: 3rem; }
.mobile-menu nav a { display: flex; align-items: baseline; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); font: 500 clamp(2.4rem, 10vw, 4.5rem)/.95 var(--font-display); text-transform: uppercase; }
.mobile-menu nav a span { color: var(--lime); font: .65rem var(--font-mono); }
.mobile-menu-footer { margin-top: auto; color: var(--paper-muted); line-height: 1.7; }
.horizontal-scroll { overflow: hidden; }
.horizontal-track { display: flex; width: max-content; }
.panel { position: relative; display: block; flex: 0 0 100vw; min-height: 100vh; overflow: hidden; background: var(--ink); }
.panel::before { content: ''; position: absolute; top: var(--header-h); right: var(--pad-x); left: var(--pad-x); z-index: 1; height: 1px; background: linear-gradient(90deg, var(--lime), transparent 34%, rgba(241,243,235,.12) 70%, transparent); opacity: .45; pointer-events: none; }
.panel-inner { position: relative; width: 100%; min-height: 100vh; padding: var(--header-h) var(--pad-x) 3rem; }
.panel-hero { background: var(--ink); }
/* Hero fotográfico: a imagem vem de inc/assets.php (inline style), aqui só o enquadramento. */
.panel-hero.has-hero-media { background-repeat: no-repeat; background-size: cover; background-position: center right; }
.panel-hero.has-hero-media::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(5,10,8,.95) 0%, rgba(5,10,8,.84) 30%, rgba(5,10,8,.54) 56%, rgba(5,10,8,.2) 82%, rgba(5,10,8,.1) 100%); pointer-events: none; }
.hero-grid, .contact-grid { position: absolute; inset: 0; opacity: .7; }
.panel-hero .hero-grid { z-index: 1; }
.panel-hero.has-hero-media .hero-grid { opacity: .12; background-image: linear-gradient(rgba(199,243,107,.34) 1px, transparent 1px), linear-gradient(90deg, rgba(199,243,107,.34) 1px, transparent 1px); }
.hero-inner { position: relative; z-index: 2; display: flex; align-items: center; gap: 4vw; padding-top: calc(var(--header-h) + 1rem); }
.panel-hero .scroll-cue { z-index: 3; }
.panel-hero.has-hero-media .hero-visual::before { opacity: .5; }
.panel-hero.has-hero-media .hero-visual { opacity: .78; }
.hero-copy { position: relative; z-index: 2; width: min(53vw, 790px); padding-top: 2vh; }
.hero-copy h1 { max-width: 12ch; margin: var(--space-5) 0 var(--space-5); font-size: clamp(64px, 5.3vw, 86px); line-height: var(--lh-display); letter-spacing: -.015em; }
.hero-copy h1 span, .hero-copy h1 strong { display: block; }
.hero-copy h1 strong { color: var(--lime); font-weight: 500; }
.hero-lead { color: var(--paper); font: 500 clamp(.68rem, 1vw, .85rem)/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.hero-lead b { color: var(--lime); font-weight: 400; }
.hero-description { max-width: 33rem; margin-top: var(--space-5); color: var(--paper-muted); font-size: .88rem; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-6); }
.hero-visual { position: relative; flex: 1; height: min(70vh, 680px); min-width: 30vw; }
.hero-visual::before { content: ''; position: absolute; inset: 15%; border-radius: 50%; background: radial-gradient(circle, rgba(31,107,81,.3), transparent 65%); filter: blur(18px); }
.hero-orbit { position: absolute; border: 1px solid rgba(199,243,107,.22); border-radius: 50%; transform: rotate(-24deg); }
.orbit-one { inset: 12% 4%; border-right-color: transparent; }
.orbit-two { inset: 25% -2%; border-left-color: transparent; transform: rotate(54deg); }
/* A marca ocupa a área de céu, acima e à esquerda das pessoas: no enquadramento
   padrão do tema elas ficam na faixa central-baixa da direita. Trocar a foto no
   admin pode pedir um reajuste destes dois valores. */
.hero-sun { position: absolute; top: 30%; left: 36%; display: flex; align-items: center; justify-content: center; width: min(21vw, 290px); aspect-ratio: 1; border: 1px solid var(--lime); border-radius: 50%; color: var(--lime); box-shadow: 0 0 80px rgba(199,243,107,.08); transform: translate(-50%, -50%); }
.hero-sun::before { content: ''; position: absolute; inset: 8%; border: 1px dashed rgba(199,243,107,.4); border-radius: 50%; }
.dsa-motion-mark { display: block; width: clamp(104px, 11vw, 176px); height: auto; max-width: 70%; object-fit: contain; }
.hero-sun small { position: absolute; right: 12%; bottom: 16%; font: .6rem var(--font-mono); }
.hero-axis { position: absolute; background: rgba(199,243,107,.25); }
.axis-h { top: 50%; right: 0; left: 0; height: 1px; }.axis-v { top: 0; bottom: 0; left: 50%; width: 1px; }
.hero-data { position: absolute; color: var(--paper-muted); font-size: .58rem; line-height: 1.7; }.data-a { top: 8%; left: 3%; }
/* Safe area: os dados técnicos não encostam na borda do painel. */
.data-b { right: var(--space-5); bottom: 19%; }.data-b b { color: var(--lime); font-size: .82rem; font-weight: 400; }.hero-tag { right: var(--space-5); top: 8%; color: var(--lime); }
.scroll-cue { position: absolute; bottom: 2.5rem; left: var(--pad-x); z-index: 2; color: var(--paper-muted); }.scroll-cue span { display: inline-block; margin-left: .7rem; color: var(--lime); font-size: 1.1rem; }
.panel-about { background: var(--paper); color: var(--ink); }.about-inner { padding-top: var(--header-h); }.panel-about .section-stamp { color: #68746b; }.panel-about .section-stamp span { color: var(--green); }.about-year { position: absolute; top: 21%; left: 7%; color: transparent; -webkit-text-stroke: 1px rgba(7,17,15,.18); font-size: clamp(14rem, 30vw, 33rem); line-height: .7; }
.about-copy { position: absolute; top: 28%; left: 29%; z-index: 1; }.about-copy h2, .evolution-copy h2, .solar-heading h2, .process-copy h2, .lsf-copy h2, .solutions-heading h2, .projects-heading h2, .pillars-heading h2, .contact-copy h2 { margin: var(--space-4) 0 var(--space-5); font-size: clamp(4rem, 7vw, 8rem); line-height: var(--lh-heading); }.about-copy p:not(.eyebrow) { max-width: 24rem; color: #5d6860; font-size: .88rem; line-height: 1.7; }.about-copy em { color: var(--green); }
.timeline-wrap { position: absolute; right: 8%; bottom: 15%; left: 8%; }.timeline-line { height: 1px; background: rgba(7,17,15,.25); }.timeline-line span { display: block; width: 20%; height: 2px; background: var(--green); }.timeline-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 1.3rem; }.timeline-items div { position: relative; padding-top: 1.2rem; border-top: 1px solid rgba(7,17,15,.25); }.timeline-items div::before { content: ''; position: absolute; top: -.35rem; left: 0; width: .6rem; height: .6rem; border-radius: 50%; background: var(--green); }.timeline-items b, .timeline-items small { display: block; font: .6rem var(--font-mono); }.timeline-items b { color: var(--green); }.timeline-items strong { display: block; margin: .5rem 0; font: 500 1.5rem/1 var(--font-display); text-transform: uppercase; }.timeline-items small { color: #78837a; }
.panel-evolution { background: var(--green); }.evolution-bg { position: absolute; inset: 0; overflow: hidden; }.evolution-ring { position: absolute; top: 50%; left: 53%; width: 76vw; aspect-ratio: 1; border: 1px solid rgba(241,243,235,.22); border-radius: 50%; transform: translate(-50%,-50%); }.evolution-ring::after { content: ''; position: absolute; inset: 9%; border: 1px solid rgba(199,243,107,.3); border-radius: 50%; }.evolution-cross::before, .evolution-cross::after { content: ''; position: absolute; background: rgba(241,243,235,.17); }.evolution-cross::before { top: 0; bottom: 0; left: 53%; width: 1px; }.evolution-cross::after { top: 50%; right: 0; left: 0; height: 1px; }.evolution-inner { display: flex; align-items: center; }.evolution-copy { position: relative; z-index: 2; margin-left: 11vw; }.evolution-copy p:not(.eyebrow) { max-width: 16rem; color: rgba(241,243,235,.68); font-size: .85rem; line-height: 1.7; }.evolution-copy em { color: var(--lime); }.pillar-scan { position: absolute; top: 31%; right: 15%; display: flex; align-items: center; gap: 1.2rem; color: var(--lime); }.pillar-scan::before { content: ''; width: 7rem; height: 1px; background: var(--lime); }.pillar-scan .scan-number { font-size: 4rem; }.pillar-scan p { line-height: 1.5; }.scan-line { position: absolute; top: -8rem; left: 3rem; width: 1px; height: 15rem; background: rgba(199,243,107,.5); }.evolution-pills { position: absolute; right: 7%; bottom: 14%; display: flex; gap: .5rem; }.evolution-pills span { padding: .55rem .75rem; border: 1px solid rgba(241,243,235,.26); color: var(--paper); font: .58rem var(--font-mono); }
.panel-solar { min-width: 150vw; background: #0a1815; }
/* O topo livra o selo da seção (.section-stamp, absoluto), e as folgas são
   proporcionais à altura: a composição inteira — texto, escala e a faixa de
   quatro imagens — tem de caber numa viewport de 800px sem corte. */
.solar-inner { display: flex; flex-direction: column; padding-top: calc(var(--header-h) + clamp(2.5rem, 7vh, 5rem)); padding-bottom: clamp(1rem, 3vh, 3rem); }
.solar-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: clamp(2rem, 5vw, 6rem); margin-left: 5vw; }
/* Respiro mínimo entre o bloco de texto e a faixa de imagens: em telas de 800px
   o "auto" da faixa sobra pouco e o CTA encostava nos blocos. */
.solar-top { margin-bottom: clamp(1.5rem, 3vh, 3rem); }
.solar-heading h2 { font-size: clamp(4.5rem, 8vw, 9rem); }
/* Margens menores que o padrão dos outros painéis: aqui a headline tem três
   linhas e divide a altura com a faixa de imagens. */
.solar-heading h2 { margin: .6rem 0 1rem; }
.solar-heading em { color: var(--lime); }
/* O layout segue a quantidade de parágrafos que o template realmente montou.
   Um bloco: coluna única com medida de leitura confortável (não uma coluna
   estreita sobrando ao lado). Dois: duas colunas. */
.solar-heading__text { display: grid; gap: clamp(1.5rem, 3vw, 3rem); }
.solar-heading__text[data-blocks="1"] { grid-template-columns: minmax(0, 38rem); }
.solar-heading__text[data-blocks="2"] { grid-template-columns: repeat(2, minmax(0, 24rem)); }
.solar-heading__text p { color: var(--paper-muted); font-size: .84rem; line-height: 1.7; }
.solar-heading__cta { margin-top: clamp(1.4rem, 3vh, 2.2rem); }
.solar-scale { display: flex; align-items: center; gap: 1rem; padding-top: .5rem; color: var(--paper-muted); white-space: nowrap; }
.solar-scale i { display: block; width: clamp(4rem, 8vw, 10rem); height: 1px; background: var(--lime); }
/* margin-right 0: a faixa de blocos usa o mesmo trilho direito da escala de
   impacto (o padding do painel). margin-top auto empurra a faixa para a base. */
.solar-cards { display: flex; align-items: stretch; gap: 2px; margin: auto 0 clamp(1.5rem, 4vh, 3rem) 5vw; }
.panel-process { min-width: 140vw; background: var(--paper); color: var(--ink); }.panel-process .section-stamp { color: #68746b; }.panel-process .section-stamp span { color: var(--green); }.process-inner { padding-top: 18vh; }.process-copy { margin-left: 6vw; }.process-copy h2 { font-size: clamp(4.2rem, 7vw, 8rem); }.process-copy em { color: var(--green); }.process-copy p:last-child { color: var(--green); font: 500 .7rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }.process-diagram { position: absolute; top: 13%; right: 6vw; width: min(55vw, 760px); aspect-ratio: 1; }.process-orbit { position: absolute; inset: 9%; border: 1px solid rgba(7,17,15,.2); border-radius: 50%; }.process-orbit::before, .process-orbit::after { content: ''; position: absolute; inset: 14%; border: 1px dashed rgba(31,107,81,.4); border-radius: 50%; }.process-orbit::after { inset: 37%; border-style: solid; border-color: var(--green); }.process-center { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 9rem; aspect-ratio: 1; border: 1px solid var(--green); border-radius: 50%; color: var(--green); text-align: center; transform: translate(-50%,-50%); }.process-center strong { font-size: 1.4rem; }.process-center svg { position: absolute; right: 14%; top: 16%; width: 15px; }.process-node { position: absolute; display: grid; grid-template-columns: 2.2rem auto; column-gap: .55rem; align-items: center; width: 10.5rem; color: #617069; }.process-node span { grid-row: span 2; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 1px solid rgba(7,17,15,.3); border-radius: 50%; color: var(--green); font: .58rem var(--font-mono); }.process-node b { font: 500 1.3rem/1 var(--font-display); text-transform: uppercase; }.process-node small { font-size: .62rem; }.node-active { color: var(--ink); }.node-active span { background: var(--lime); border-color: var(--lime); }.panel-lsf { min-width: 132vw; background: var(--ink-soft); }.lsf-grid { position: absolute; inset: 0; opacity: .55; background-image: linear-gradient(rgba(199,243,107,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(199,243,107,.07) 1px, transparent 1px); background-size: 4rem 4rem; transform: perspective(500px) rotateX(55deg) scale(1.6) translateY(20%); transform-origin: center bottom; }.lsf-copy { position: absolute; top: 25%; left: 8vw; z-index: 2; }.lsf-copy h2 { max-width: 7ch; }.lsf-copy p { max-width: 20rem; color: var(--paper-muted); font-size: .85rem; line-height: 1.7; }.lsf-copy .text-link { margin-top: 2rem; }.steel-visual { position: absolute; top: 23%; right: 12vw; width: 43vw; height: 52vh; }.steel-frame { position: absolute; inset: 0; transform: skewY(-12deg) rotate(-24deg); }.steel-frame i { position: absolute; display: block; width: 1px; height: 100%; background: var(--lime); box-shadow: 0 0 12px rgba(199,243,107,.2); }.steel-frame i:nth-child(1) { left: 5%; }.steel-frame i:nth-child(2) { left: 22%; }.steel-frame i:nth-child(3) { left: 39%; }.steel-frame i:nth-child(4) { left: 56%; }.steel-frame i:nth-child(5) { left: 73%; }.steel-frame i:nth-child(6) { left: 90%; }.steel-frame i:nth-child(7), .steel-frame i:nth-child(8) { top: 46%; left: 0; width: 100%; height: 1px; transform: rotate(25deg); }.steel-frame i:nth-child(8) { top: 20%; transform: rotate(-25deg); }.steel-label { position: absolute; color: var(--lime); font-size: .58rem; }.label-top { top: -1.5rem; left: 9%; }.label-side { top: 46%; right: -3rem; transform: rotate(90deg); }.label-bottom { bottom: -1.5rem; right: 12%; }.metrics { position: absolute; right: 9vw; bottom: 12%; display: flex; gap: 4vw; }.metric { min-width: 7rem; }.metric strong { font: 500 clamp(4rem, 6vw, 6rem)/.8 var(--font-display); }.metric > span { color: var(--lime); font: .7rem var(--font-mono); }.metric p { margin-top: .6rem; color: var(--paper-muted); font-size: .72rem; }.metric sup { color: var(--lime); }.disclaimer { position: absolute; right: 9vw; bottom: 5%; max-width: 31rem; color: rgba(241,243,235,.42); font: .56rem/1.6 var(--font-mono); }
.panel-solutions { min-width: 120vw; background: var(--paper); color: var(--ink); }.panel-solutions .section-stamp { color: #68746b; }.panel-solutions .section-stamp span { color: var(--green); }.solutions-inner { padding-top: 18vh; }.solutions-heading { margin-left: 5vw; }.solutions-heading h2 { font-size: clamp(4rem, 7vw, 7rem); }.solutions-heading em { color: var(--green); }.solution-list { position: absolute; bottom: 9%; left: 5vw; width: 58vw; }.solution-list a { position: relative; display: grid; grid-template-columns: 3rem 1.5fr 1fr 1rem; align-items: center; gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--line-dark); }.solution-list a:last-child { border-bottom: 1px solid var(--line-dark); }.solution-index, .solution-note { color: #6f7d73; font-size: .6rem; }.solution-name { font: 500 clamp(1.55rem, 2.5vw, 2.6rem)/.85 var(--font-display); text-transform: uppercase; transition: color .25s ease, transform .4s var(--ease-expo); }.solution-list a:hover .solution-name { color: var(--green); transform: translateX(.5rem); }.solution-list svg { width: 17px; color: var(--green); }.solutions-aside { position: absolute; right: 10vw; top: 26%; color: var(--green); font-size: .75rem; line-height: 1.8; transform: rotate(90deg); transform-origin: center; }.solutions-aside em { color: #87958a; font-style: normal; }
.panel-projects { min-width: 150vw; background: #0d201b; }
/* Coluna flex em vez de cards ancorados em bottom: em viewport baixa (1366x768)
   o topo de 18vh empurrava a headline para cima dos cards. Com margin-top auto
   a faixa de cards encosta na base sozinha, sem sobrepor o texto. */
.projects-inner { display: flex; flex-direction: column; padding-top: calc(var(--header-h) + clamp(2.5rem, 7vh, 5rem)); padding-bottom: clamp(1rem, 3vh, 3rem); }
.projects-heading { margin-left: 5vw; margin-bottom: clamp(1.5rem, 3vh, 3rem); }.projects-heading h2 { font-size: clamp(4rem, 7vw, 7.5rem); }.project-cards { display: flex; gap: 2rem; margin: auto 5vw 0; }.project-card { position: relative; width: min(34vw, 520px); }.project-placeholder { position: relative; display: grid; place-items: center; height: 37vh; min-height: 17rem; overflow: hidden; border: 1px solid rgba(241,243,235,.2); }.project-placeholder > span { position: relative; z-index: 2; color: var(--lime); font-size: .6rem; }.placeholder-one { background: linear-gradient(135deg, #173e32, #0b1d18 58%, #c46f4d 58%, #9f5e44 72%, #10271f 72%); }.placeholder-one::before { content: ''; position: absolute; width: 74%; height: 65%; border: 1px solid rgba(241,243,235,.55); transform: perspective(500px) rotateY(-22deg) rotateX(8deg); }.placeholder-one .placeholder-shape { position: absolute; width: 30%; height: 55%; background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(199,243,107,.8) 13px 14px); transform: translate(25%, 2%) skewY(-8deg); }.placeholder-two { background: linear-gradient(45deg, #1e4738, #0b1d18 64%); }.placeholder-two::before { content: ''; position: absolute; inset: 13% 11%; border: 1px solid rgba(199,243,107,.6); transform: skewY(8deg); }.placeholder-lines { position: absolute; width: 120%; height: 1px; background: var(--lime); transform: rotate(-25deg); box-shadow: 0 -42px rgba(199,243,107,.45), 0 42px rgba(199,243,107,.45); }.project-meta { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; color: var(--paper-muted); }.project-meta span { font-size: .58rem; }.project-card h3 { margin: .6rem 0 .9rem; font-size: clamp(2.1rem, 3.7vw, 4rem); line-height: var(--lh-heading); }.project-card dl { display: flex; gap: 2rem; color: var(--paper-muted); }.project-card dt { margin-bottom: .3rem; font: .57rem var(--font-mono); text-transform: uppercase; }.project-card dd { margin: 0; font-size: .7rem; }.project-link { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border: 1px solid var(--lime); color: var(--lime); transition: background .3s, color .3s; }.project-link:hover { background: var(--lime); color: var(--ink); }.project-link svg { width: 15px; }
.panel-pillars { min-width: 115vw; background: var(--lime); color: var(--ink); }.panel-pillars .section-stamp { color: #52644a; }.panel-pillars .section-stamp span { color: var(--green); }.pillars-inner { padding-top: 18vh; }.pillars-heading { position: relative; z-index: 2; width: min(31rem, 30vw); margin-left: 5vw; }.pillars-heading h2 { max-width: 7ch; font-size: clamp(4rem, 7vw, 7.5rem); line-height: .86; }.pillars-heading em { color: var(--green); }.pillar-constellation { position: absolute; top: 19%; right: 8vw; width: 48vw; height: 64vh; }.constellation-lines::before, .constellation-lines::after { content: ''; position: absolute; top: 50%; left: 50%; width: 78%; height: 1px; background: rgba(7,17,15,.3); transform: translate(-50%,-50%) rotate(28deg); }.constellation-lines::after { transform: translate(-50%,-50%) rotate(-28deg); }.constellation-node { position: absolute; display: flex; align-items: center; gap: .6rem; font: 500 clamp(1.5rem, 2.4vw, 2.5rem) var(--font-display); text-transform: uppercase; }.constellation-node span { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--ink); border-radius: 50%; font: .6rem var(--font-mono); }.node-engineering { top: 7%; left: 17%; }.node-energy { top: 7%; right: 4%; }.node-tech { bottom: 9%; left: 17%; }.node-sustain { right: 4%; bottom: 9%; }.constellation-core { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 10rem; aspect-ratio: 1; border: 1px solid var(--ink); border-radius: 50%; transform: translate(-50%,-50%); }.constellation-core strong { font: 700 4rem/.7 var(--font-display); letter-spacing: -.08em; }.constellation-core span { font: .55rem var(--font-mono); }.pillars-note { position: absolute; bottom: 12%; left: 5vw; max-width: 21rem; color: rgba(7,17,15,.72); font-size: .82rem; line-height: 1.7; }
.panel-contact { min-width: 100vw; background: var(--ink); }.contact-inner { display: grid; grid-template-columns: 1.4fr .7fr; align-content: center; column-gap: 8vw; padding-top: 20vh; }.contact-copy { position: relative; z-index: 2; margin-left: 5vw; }.contact-copy h2 { font-size: clamp(5rem, 9vw, 10rem); }.contact-copy p:not(.eyebrow) { max-width: 26rem; margin-bottom: 2rem; color: var(--paper-muted); font-size: .88rem; line-height: 1.7; }.contact-side { display: grid; align-content: center; gap: 2rem; padding-top: 4rem; }.contact-block { display: grid; gap: .45rem; border-top: 1px solid var(--line); padding-top: .8rem; }.contact-block span { color: var(--lime); }.contact-block strong { font: 500 1.3rem var(--font-display); text-transform: uppercase; }.contact-block small { color: var(--paper-muted); font-size: .65rem; }.site-footer { position: absolute; right: var(--pad-x); bottom: 2rem; left: var(--pad-x); display: flex; justify-content: space-between; align-items: center; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--paper-muted); }

/* Visual refinements consolidated from Sprint 2 */
.process-track { position: absolute; top: 50%; left: 14%; width: 72%; height: 2px; overflow: hidden; background: rgba(31,107,81,.16); transform: rotate(-26deg); transform-origin: left center; }
.process-track span { display: block; width: 100%; height: 100%; background: var(--lime-deep); transform: scaleX(var(--process-progress, 0)); transform-origin: left; transition: transform var(--motion-normal) var(--ease-out); }
.process-node { transition: color var(--motion-normal) ease, transform var(--motion-normal) var(--ease-out); }
.process-node.is-active { color: var(--ink); transform: translateY(-.15rem); }
.process-node.is-active span { color: var(--ink); background: var(--lime); border-color: var(--lime); }
.process-node.node-1 { top: 25%; left: 2%; }.process-node.node-2 { top: 7%; left: 2%; }.process-node.node-3 { top: 7%; left: 41%; }.process-node.node-4 { top: 25%; right: 3%; }.process-node.node-5 { right: 3%; bottom: 22%; }.process-node.node-6 { bottom: 3%; left: 41%; }.process-node.node-7 { bottom: 22%; left: 2%; }
/* Diagramas radiais têm posições fixas (7 no processo, 4 nos pilares). Itens além do limite
   reaproveitam a última posição e ficam ocultos só no desktop; no mobile a lista é dinâmica
   (classes .process-node-overflow / .constellation-node-overflow revertidas em responsive.css). */
.process-node.process-node-overflow { display: none; }
.constellation-node.constellation-node-overflow { display: none; }
.project-placeholder { transition: transform var(--motion-slow) var(--ease-out), border-color var(--motion-normal) ease; }
.project-placeholder img { width: 100%; height: 100%; object-fit: cover; }
.project-card:hover .project-placeholder { border-color: var(--lime); transform: translateY(-.35rem); }

/* Visual cleanup: a geometria editorial fica; os dados fictícios e o blueprint saem. */
.hero-sun small, .hero-data, .hero-tag, .blueprint, .steel-label { display: none; }
.about-copy { left: 29%; }
.about-copy p:not(.eyebrow) { max-width: 24rem; }
.timeline-wrap { right: 8%; left: 8%; }

/* Processo radial: sete etapas distribuídas com respiro em torno do núcleo. */
.process-diagram { right: 8vw; width: min(48vw, 680px); }
.process-copy { width: min(31rem, 30vw); }
.process-orbit { inset: 16%; }
.process-orbit::before { inset: 12%; }
.process-orbit::after { inset: 36%; }
.process-node.node-1 { top: 1%; right: auto; bottom: auto; left: 35%; }
.process-node.node-2 { top: 9%; right: 2%; bottom: auto; left: auto; }
.process-node.node-3 { top: 40%; right: 0; bottom: auto; left: auto; }
.process-node.node-4 { top: auto; right: 7%; bottom: 6%; left: auto; }
.process-node.node-5 { top: auto; right: auto; bottom: 0; left: 36%; }
.process-node.node-6 { top: auto; right: auto; bottom: 12%; left: 3%; }
.process-node.node-7 { top: 40%; right: auto; bottom: auto; left: 0; }
.process-track { display: none; }

/* Pilares: reserva editorial à esquerda e constelação recuada à direita. */
.pillars-heading { width: min(31rem, 30vw); }
.pillars-heading h2 { max-width: 7ch; line-height: .86; }
.pillar-constellation { top: 19%; right: 8vw; width: 48vw; height: 64vh; }
.constellation-lines::before, .constellation-lines::after { width: 78%; }
.node-engineering { top: 7%; left: 17%; }
.node-energy { top: 7%; right: 4%; }
.node-tech { bottom: 9%; left: 6%; }
.node-sustain { right: 0; bottom: 9%; }

@media (min-width: 1200px) {
  /* Compact narrative: approximately 860vw versus the previous 1207vw. */
  .panel-hero { flex-basis: 100vw; width: 100vw; min-width: 100vw; }
  .panel-about { flex-basis: 72vw; width: 72vw; min-width: 72vw; }
  .panel-evolution { flex-basis: 76vw; width: 76vw; min-width: 76vw; }
  .panel-solar { flex-basis: 98vw; width: 98vw; min-width: 98vw; }
  .panel-process { flex-basis: 90vw; width: 90vw; min-width: 90vw; }
  .panel-lsf { flex-basis: 90vw; width: 90vw; min-width: 90vw; }
  .panel-solutions { flex-basis: 82vw; width: 82vw; min-width: 82vw; }
  .panel-projects { flex-basis: 98vw; width: 98vw; min-width: 98vw; }
  .panel-pillars { flex-basis: 74vw; width: 74vw; min-width: 74vw; }
  .panel-contact { flex-basis: 80vw; width: 80vw; min-width: 80vw; }
  .hero-copy h1 { font-size: clamp(64px, 5.3vw, 86px); max-width: 12ch; }
  .about-copy h2, .evolution-copy h2, .solar-heading h2, .process-copy h2, .lsf-copy h2, .solutions-heading h2, .projects-heading h2, .pillars-heading h2, .contact-copy h2 { font-size: var(--font-heading-lg); line-height: var(--lh-heading); }
  .project-card h3 { font-size: var(--font-heading-md); }
}
.solution-list button { position: relative; display: grid; grid-template-columns: 3rem 1.5fr 1fr; align-items: center; width: 100%; gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--line-dark); color: var(--ink); text-align: left; }
.solution-list button:last-child { border-bottom: 1px solid var(--line-dark); }
.solution-list button:hover .solution-name { color: var(--green); transform: translateX(.5rem); }
.solution-list button:focus-visible { outline: 2px solid var(--lime-deep); outline-offset: 5px; }

/* =========================================================================
   1.2.0 — Campos que passaram a ser renderizados e blocos de excedente.
   Tudo aditivo: cada regra só entra em cena quando o conteúdo existe, então
   a Home com os valores padrão continua idêntica.
   ========================================================================= */

/* Marcos: categoria (A DSA) */
.timeline-items em.timeline-category { display: block; margin-top: .4rem; color: var(--green); font: .55rem var(--font-mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; }

/* Evolução: descrição do pilar dentro do selo */
.evolution-pills span { text-align: left; }
.evolution-pills small { display: block; margin-top: .3rem; color: rgba(241,243,235,.62); font-size: .52rem; letter-spacing: 0; text-transform: none; }

/* Processo: etapas além das 7 posições do diagrama */
.process-overflow { position: absolute; bottom: 7%; left: 6vw; max-width: 36rem; }
.process-overflow__label { display: block; margin-bottom: .6rem; color: var(--green); font-size: .58rem; letter-spacing: .1em; }
.process-overflow__list { display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; margin: 0; padding: 0; list-style: none; }
.process-overflow__list li { display: grid; grid-template-columns: 2rem auto; column-gap: .5rem; align-items: center; min-width: 9rem; }
.process-overflow__list li span { grid-row: span 2; display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid rgba(7,17,15,.3); border-radius: 50%; color: var(--green); font: .55rem var(--font-mono); }
.process-overflow__list li b { font: 500 1.1rem/1 var(--font-display); text-transform: uppercase; color: var(--ink); }
.process-overflow__list li small { color: #617069; font-size: .6rem; }

/* Pilares: descrição no nó e pilares além das 4 posições da constelação */
.constellation-node { flex-wrap: wrap; }
/* Fora do fluxo no desktop: a descrição não pode entrar no cálculo de largura do
   nó, senão os nós ancorados à direita (node-energy/node-sustain) deslizam. */
.constellation-node small { position: absolute; top: 100%; left: 3.1rem; width: max-content; max-width: min(16rem, 34vw); margin-top: .25rem; color: rgba(7,17,15,.7); font: .58rem/1.4 var(--font-mono); text-transform: none; }
.pillars-overflow { position: absolute; right: 8vw; bottom: 5%; max-width: 42vw; }
.pillars-overflow__label { display: block; margin-bottom: .5rem; color: var(--green); font-size: .58rem; letter-spacing: .1em; }
.pillars-overflow__list { display: flex; flex-wrap: wrap; gap: .55rem 1.3rem; margin: 0; padding: 0; list-style: none; }
.pillars-overflow__list li { display: flex; align-items: center; gap: .5rem; }
.pillars-overflow__list li span { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border: 1px solid var(--ink); border-radius: 50%; font: .55rem var(--font-mono); }
.pillars-overflow__list li b { font: 500 1.2rem var(--font-display); text-transform: uppercase; }
.pillars-overflow__list li small { color: rgba(7,17,15,.66); font-size: .6rem; }

/* LSF: métrica com valor não numérico (sem contador animado) */
.metric strong.metric-static { font-size: clamp(2.1rem, 3.4vw, 3.4rem); line-height: 1.05; }

/* Rodapé: redes sociais */
.footer-social { display: inline-flex; align-items: center; gap: .6rem; }
.footer-social__link { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border: 1px solid currentColor; border-radius: 50%; color: inherit; opacity: .68; transition: opacity .25s ease, color .25s ease; }
.footer-social__link:hover, .footer-social__link:focus-visible { opacity: 1; color: var(--lime); }
.footer-social svg { display: block; }

/* =========================================================================
   1.5.1 — Energia Fotovoltaica: segmentos como BLOCOS FOTOGRÁFICOS.
   A imagem, que já morava no repeater, volta a ser o assunto do card: ocupa
   todo o bloco, com overlay em gradiente para o texto ter contraste garantido.
   Quatro blocos de 25%, borda técnica de 1px, sem raio e sem sombra.
   Os cards NÃO são clicáveis: comunicam capacidade, não abrem quatro rotas.
   Por isso não há hover de afordância, cursor de ponteiro, seta nem link.
   ========================================================================= */
.solar-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* flex-basis 0 + grow igual = quatro colunas de 25% exatos, independentemente
     do comprimento do título. min-width:0 impede que um título longo empurre. */
  flex: 1 1 0;
  min-width: 0;
  height: clamp(260px, 32vh, 330px);
  padding: 1.15rem;
  overflow: hidden;
  border: 1px solid rgba(241, 243, 235, .18);
  background: linear-gradient(155deg, #0f241d 0%, #07120f 68%);
  color: var(--paper);
}

.solar-card__media { position: absolute; inset: 0; z-index: -2; }

.solar-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Overlay: transparente no topo, denso na base, onde ficam título e descrição.
   É o que garante o contraste do texto sobre qualquer foto. */
.solar-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 17, 15, .18) 0%, rgba(7, 17, 15, .52) 42%, rgba(7, 17, 15, .93) 100%);
}

/* Fio técnico no topo do bloco. */
.solar-card::after {
  content: '';
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(199, 243, 107, .55), transparent 72%);
}

.solar-card__body { position: relative; display: flex; flex-direction: column; }
.solar-card .card-number { position: absolute; top: auto; bottom: calc(100% + .75rem); left: 0; color: var(--lime); font-size: .62rem; }
.solar-card h3 { margin-top: .1rem; font-size: clamp(1.45rem, 1.75vw, 2.1rem); line-height: .95; overflow-wrap: break-word; }
.solar-card p { max-width: 22rem; margin-top: .5rem; color: rgba(241, 243, 235, .82); font-size: .7rem; line-height: 1.55; }
/* Lado a lado, uma descrição de 3 linhas empurrava só o seu título para cima.
   A reserva de 3 linhas alinha os cinco títulos na mesma altura. No mobile,
   com um card por linha, não há o que alinhar — e a reserva sairia como vão. */
@media (min-width: 768px) { .solar-card p { min-height: calc(1.55em * 3); } }

/* Segmento sem imagem cadastrada: o card volta ao painel de gradiente + ícone,
   sem buraco na composição. */
.solar-card--no-media .card-icon { margin-bottom: auto; color: var(--lime); }
.solar-card--no-media .card-icon svg { width: 24px; height: 24px; stroke-width: 1.1; }
.solar-card--no-media .card-number { position: static; margin-bottom: .6rem; }
.solar-card--no-media .solar-card__body { height: 100%; justify-content: flex-end; }

/* =========================================================================
   1.4.2 — Soluções: lista institucional (sem interação) + chamada editorial.
   ========================================================================= */
/* Um grid substitui o posicionamento absoluto isolado da lista, para que a
   chamada lateral fique alinhada verticalmente com ela. */
.solutions-body { position: absolute; right: 5vw; bottom: 9%; left: 5vw; display: grid; grid-template-columns: 62fr 38fr; gap: clamp(2rem, 5vw, 6rem); align-items: end; }
.solutions-body--single { grid-template-columns: 1fr; }
.solutions-body .solution-list { position: static; right: auto; bottom: auto; left: auto; width: auto; }

/* Itens: conteúdo, não navegação — sem cursor, sem hover, sem foco de link. */
.solution-item { display: grid; grid-template-columns: 3rem 1fr; align-items: center; gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--line-dark); color: var(--ink); cursor: default; }
.solution-item:last-child { border-bottom: 1px solid var(--line-dark); }
.solution-item .solution-name { font: 500 clamp(1.55rem, 2.5vw, 2.6rem)/.85 var(--font-display); text-transform: uppercase; }

/* Chamada lateral: editorial, sem caixa, sem sombra, sem seta. */
.solutions-side { padding-top: 1.1rem; border-top: 1px solid var(--green); }
.solutions-side .eyebrow { color: var(--green); }
.solutions-side h3 { margin: .9rem 0 1rem; font: 500 clamp(1.6rem, 2.1vw, 2.35rem)/1.02 var(--font-display); text-transform: uppercase; }
.solutions-side__text { max-width: 26rem; color: #5d6860; font-size: .85rem; line-height: 1.7; }
.solutions-side__cta { display: inline-block; margin-top: 1.6rem; }

/* O botão de orçamento saiu da seção Contato: o respiro de 2rem que existia
   abaixo do texto era só para separá-lo do botão. */
.contact-copy p:not(.eyebrow):last-child { margin-bottom: 0; }

/* .text-link nasceu para os painéis escuros (color: var(--paper)). Nos painéis
   claros ele ficava com 1.00:1 de contraste — literalmente invisível. */
.panel-solutions .text-link, .panel-process .text-link, .panel-about .text-link, .panel-pillars .text-link { color: var(--green); border-color: rgba(31,107,81,.4); }
.panel-solutions .text-link:hover, .panel-process .text-link:hover, .panel-about .text-link:hover, .panel-pillars .text-link:hover,
.panel-solutions .text-link:focus-visible, .panel-process .text-link:focus-visible, .panel-about .text-link:focus-visible, .panel-pillars .text-link:focus-visible { color: var(--ink); border-color: var(--ink); }

/* Topo da chamada alinhado com a primeira linha da lista. */
.solutions-body { align-items: start; }