@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.relative{position:relative}.start{inset-inline-start:var(--spacing)}.table{display:table}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}}:root{--verde-nordeste:#1b6b3a;--verde-folha:#7da500;--amarelo-feira:#f5c518;--laranja-calor:#e8621a;--vermelho-briga:#d42b2b;--azul-profundo:#1a4f8a;--preto-asfalto:#1a1a1a;--creme-mandioca:#f5edd8;--container:1280px}*{box-sizing:border-box;margin:0;padding:0}html{background:var(--verde-nordeste);color:var(--creme-mandioca);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;font-family:Nunito,sans-serif}body{background:#10291c;min-width:320px;min-height:100vh;overflow-x:hidden}a{color:inherit;-webkit-tap-highlight-color:transparent;text-decoration:none}.site-header{z-index:50;position:fixed;top:22px;left:20px;right:20px}.nav{width:min(100%,1152px);min-height:72px;color:var(--creme-mandioca);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#1a1a1ad1;border:1px solid #ffffff24;border-radius:999px;align-items:center;gap:34px;margin:0 auto;padding:10px 12px 10px 22px;display:flex;box-shadow:0 14px 36px #1a1a1a29}.brand{flex:none;align-items:center;width:160px;height:44px;display:flex;overflow:hidden}.brand img{width:158px;height:auto;display:block}.nav-links{color:#f5edd8b8;letter-spacing:.13em;text-transform:uppercase;align-items:center;gap:28px;margin-left:auto;font-size:10px;font-weight:900;display:flex}.nav-links a{transition:color .18s}.nav-links a:hover,.nav-links a:focus-visible{color:var(--amarelo-feira)}.nav-cta{background:var(--amarelo-feira);min-height:46px;color:var(--preto-asfalto);letter-spacing:.09em;text-transform:uppercase;border-radius:999px;justify-content:center;align-items:center;gap:11px;padding:0 22px;font-size:10px;font-weight:900;transition:background-color .18s,transform .18s;display:inline-flex;position:relative;overflow:hidden}.nav-cta:before{content:"";opacity:0;background:#ffffff52;transition:opacity .26s,transform .26s;position:absolute;inset:0;transform:translateY(100%)}.nav-cta:hover,.nav-cta:focus-visible{transform:translateY(-2px)}.nav-cta:hover:before,.nav-cta:focus-visible:before{opacity:1;transform:translateY(0)}.nav-cta span,.nav-cta b{z-index:1;position:relative}.nav-cta b{font-size:16px}.hero{isolation:isolate;background:var(--verde-nordeste);align-items:flex-start;min-height:0;padding:106px 48px 22px;display:flex;position:relative;overflow:hidden}.light-band{z-index:-1;background:#f5edd807;width:21vw;min-width:220px;height:135%;position:absolute;top:-14%;right:12%;transform:rotate(11deg)}.hero-inner{width:min(100%, var(--container));margin:0 auto;position:relative}.stamp{background:var(--creme-mandioca);width:fit-content;color:var(--preto-asfalto);letter-spacing:.13em;text-transform:uppercase;border-radius:999px;align-items:center;gap:9px;margin-bottom:clamp(18px,2.5vh,30px);padding:7px 15px 7px 10px;font-family:JetBrains Mono,monospace;font-size:10px;font-weight:700;transition:transform .25s;display:inline-flex;transform:rotate(-2deg)}.stamp:hover{transform:rotate(.5deg)translateY(-2px)}.stamp img{object-fit:contain;width:28px;height:22px;display:block}.hero-title{letter-spacing:-.025em;text-transform:uppercase;max-width:1230px;font-family:Bebas Neue,sans-serif;font-size:clamp(4rem,7.75vw,7.85rem);font-weight:400;line-height:.81}.title-line{width:fit-content;padding:.14em 0 .08em;animation:.85s cubic-bezier(.16,1,.3,1) both title-reveal;display:block;overflow:hidden}.title-line+.title-line{margin-top:-.11em}.title-line-two{animation-delay:.1s}.title-line-three{animation-delay:.2s}.hero-bottom{border-top:1px solid #f5edd852;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;gap:24px;margin-top:clamp(16px,2.2vh,26px);padding-top:clamp(16px,2.2vh,24px);display:grid}.hero-copy{color:#f5edd8f0;grid-column:1/span 8;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:36px;max-width:920px;font-size:clamp(14px,1.12vw,17px);font-weight:700;line-height:1.52;display:grid}.hero-actions{z-index:2;justify-content:flex-end;align-items:center;gap:18px;display:flex;position:absolute;top:38%;right:0}.leaf-cta{width:172px;height:150px;color:var(--creme-mandioca);text-align:center;letter-spacing:.04em;text-transform:uppercase;flex:none;justify-content:center;align-items:center;padding:28px;font-family:Bebas Neue,sans-serif;font-size:18px;line-height:.94;transition:transform .45s cubic-bezier(.16,1,.3,1);display:inline-flex;position:relative}.leaf-cta img{z-index:0;object-fit:contain;filter:saturate(1.08)brightness(1.08);width:170px;height:150px;transition:transform .5s cubic-bezier(.16,1,.3,1);position:absolute;inset:0;transform:rotate(-8deg)scale(1.14)}.leaf-cta:after{z-index:1;background:var(--laranja-calor);content:"";border-radius:48% 52% 46% 54%;width:112px;height:74px;position:absolute;transform:rotate(-4deg)}.leaf-cta span{z-index:2;position:relative}.leaf-cta:hover,.leaf-cta:focus-visible{transform:translateY(-4px)}.leaf-cta:hover img,.leaf-cta:focus-visible img{transform:rotate(-2deg)scale(1.2)}.secondary-cta{color:#f5edd8e0;border-bottom:1px solid #f5edd86b;padding:10px 0 7px;font-size:11px;font-weight:900;transition:color .18s,border-color .18s,opacity .18s}.secondary-cta:hover,.secondary-cta:focus-visible{color:var(--amarelo-feira);border-color:var(--amarelo-feira)}.section-cut{background:var(--laranja-calor);height:6px}.fit-section{color:var(--preto-asfalto);background:#fffdf7;padding:clamp(46px,4.5vw,64px) 48px;position:relative;overflow:hidden}.fit-section:after{display:none}.fit-inner{width:min(100%, var(--container));grid-template-columns:4.7fr 7.3fr;align-items:start;gap:clamp(38px,4.4vw,68px);margin:0 auto;display:grid}.fit-header{position:sticky;top:130px}.section-label{width:fit-content;color:var(--preto-asfalto);letter-spacing:.16em;text-transform:uppercase;margin-bottom:24px;padding-top:11px;font-family:JetBrains Mono,monospace;font-size:11px;font-weight:700}.section-label:before{background:var(--laranja-calor);content:"";width:38px;height:5px;margin-bottom:16px;display:block}.fit-header h2{max-width:590px;color:var(--verde-nordeste);letter-spacing:-.025em;text-transform:uppercase;font-family:Bebas Neue,sans-serif;font-size:clamp(3.4rem,4.65vw,4.9rem);font-weight:400;line-height:.88}.signal-list{border-top:2px solid var(--preto-asfalto);border-bottom:2px solid var(--preto-asfalto);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.signal-row{border-bottom:1px solid #1a1a1a6b;grid-template-columns:54px 1fr;align-content:center;gap:8px 16px;min-height:148px;padding:18px;transition:color .22s,padding .35s cubic-bezier(.16,1,.3,1);display:grid}.signal-row:nth-child(odd){border-right:1px solid #1a1a1a6b}.signal-row:nth-child(3),.signal-row:nth-child(4){border-bottom:0}.signal-row:hover{padding-left:22px;padding-right:22px}.signal-row:first-child:hover{background:var(--laranja-calor);color:#fffefc}.signal-row:nth-child(2):hover{background:var(--vermelho-briga);color:#fffefc}.signal-row:nth-child(3):hover{background:var(--azul-profundo);color:#fffefc}.signal-row:nth-child(4):hover{background:var(--verde-nordeste);color:#fffefc}.signal-number{color:var(--laranja-calor);grid-row:1/span 2;font-family:Bebas Neue,sans-serif;font-size:clamp(2.5rem,3.2vw,3.6rem);line-height:.8;transition:color .22s}.signal-row:nth-child(2) .signal-number{color:var(--vermelho-briga)}.signal-row:nth-child(3) .signal-number{color:var(--azul-profundo)}.signal-row:nth-child(4) .signal-number{color:var(--verde-nordeste)}.signal-row:hover .signal-number{color:currentColor}.signal-row h3{letter-spacing:-.01em;text-transform:uppercase;max-width:310px;font-family:Bebas Neue,sans-serif;font-size:clamp(1.5rem,1.95vw,2.1rem);font-weight:400;line-height:.98}.signal-row p{grid-column:2;max-width:570px;font-size:clamp(13px,1vw,16px);font-weight:700;line-height:1.55}.menu-section{background:var(--azul-profundo);color:#fffefc;padding:clamp(42px,4.2vw,58px) 48px clamp(46px,4.5vw,64px);position:relative;overflow:hidden}.menu-section:before{display:none}.menu-inner{width:min(100%, var(--container));margin:0 auto;position:relative}.menu-header{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;gap:24px;display:grid;position:relative}.menu-label{color:var(--amarelo-feira);letter-spacing:.16em;text-transform:uppercase;padding-top:12px;font-family:JetBrains Mono,monospace;font-size:11px;font-weight:700;position:absolute;top:0;left:0}.menu-label:before{background:var(--amarelo-feira);content:"";width:38px;height:5px;margin-bottom:16px;display:block}.menu-header h2{text-align:center;letter-spacing:-.035em;text-transform:uppercase;grid-column:1/-1;font-family:Bebas Neue,sans-serif;font-size:clamp(3.7rem,5.5vw,5.6rem);font-weight:400;line-height:.82}.product-index{border-top:2px solid #fffefc;margin-top:clamp(22px,2.5vw,34px)}.product-index a{border-bottom:1px solid #fffefc8a;grid-template-columns:86px 1fr auto 54px;align-items:center;gap:22px;min-height:68px;padding:16px 0;transition:padding .3s cubic-bezier(.16,1,.3,1),background-color .18s,color .18s;display:grid}.product-index a:hover,.product-index a:focus-visible{background:var(--amarelo-feira);color:var(--preto-asfalto);padding-left:20px;padding-right:20px}.product-number{color:var(--amarelo-feira);font-family:Bebas Neue,sans-serif;font-size:2.45rem;transition:color .18s}.product-index a:hover .product-number,.product-index a:focus-visible .product-number{color:var(--laranja-calor)}.product-index strong{letter-spacing:-.01em;text-transform:uppercase;font-family:Bebas Neue,sans-serif;font-size:clamp(1.8rem,2.55vw,2.75rem);font-weight:400;line-height:.9}.product-index em{color:var(--amarelo-feira);letter-spacing:.12em;text-transform:uppercase;font-family:JetBrains Mono,monospace;font-size:9px;font-style:normal;font-weight:700}.product-index a:hover em,.product-index a:focus-visible em{color:var(--preto-asfalto)}.product-index b{font-size:24px}.menu-cta{background:var(--laranja-calor);color:var(--preto-asfalto);letter-spacing:.08em;text-transform:uppercase;align-items:center;gap:28px;width:fit-content;min-height:50px;margin-top:clamp(24px,2.7vw,36px);padding:0 28px;font-size:12px;font-weight:900;transition:background-color .18s,transform .18s;display:inline-flex}.menu-cta:hover,.menu-cta:focus-visible{background:var(--amarelo-feira);transform:translate(5px)}.menu-cta b{font-size:20px}.projects-callout{color:var(--preto-asfalto);background:#fffdf7;padding:clamp(48px,5vw,72px) 48px}.projects-callout-inner,.people-callout-inner{width:min(100%, var(--container));grid-template-columns:5fr 7fr;align-items:start;gap:clamp(42px,5.5vw,82px);margin:0 auto;display:grid}.projects-label,.people-label{letter-spacing:.16em;text-transform:uppercase;margin-bottom:20px;font-family:JetBrains Mono,monospace;font-size:11px;font-weight:700}.projects-label:before,.people-label:before{background:var(--laranja-calor);content:"";width:38px;height:5px;margin-bottom:16px;display:block}.projects-callout h2,.people-callout h2{letter-spacing:-.025em;text-transform:uppercase;font-family:Bebas Neue,sans-serif;font-size:clamp(3.5rem,5.1vw,5.5rem);font-weight:400;line-height:.88}.projects-callout h2 strong,.people-callout h2 strong{color:var(--verde-nordeste);font-weight:400;display:block}.projects-callout-copy>p:last-of-type{max-width:560px;margin-top:24px;font-size:clamp(14px,1.1vw,17px);font-weight:700;line-height:1.6}.projects-callout-copy>a,.people-callout-content>a{border-bottom:3px solid var(--laranja-calor);width:fit-content;color:var(--vermelho-briga);letter-spacing:.08em;text-transform:uppercase;align-items:center;gap:26px;margin-top:28px;padding-bottom:8px;font-size:12px;font-weight:900;transition:color .18s,gap .22s;display:inline-flex}.projects-callout-copy>a:hover,.projects-callout-copy>a:focus-visible,.people-callout-content>a:hover,.people-callout-content>a:focus-visible{color:var(--vermelho-briga);gap:34px}.projects-proof{border-top:2px solid var(--preto-asfalto);border-bottom:2px solid var(--preto-asfalto)}.projects-proof a{border-bottom:1px solid #1a1a1a61;grid-template-columns:54px 1fr auto;align-items:center;gap:18px;min-height:112px;padding:18px 0;transition:padding .22s,color .18s;display:grid}.projects-proof a:last-child{border-bottom:0}.projects-proof a:hover,.projects-proof a:focus-visible{color:var(--verde-nordeste);padding-left:14px;padding-right:14px}.projects-proof span{color:var(--vermelho-briga);font-family:Bebas Neue,sans-serif;font-size:2.65rem}.projects-proof strong{text-transform:uppercase;font-family:Bebas Neue,sans-serif;font-size:clamp(1.75rem,2.3vw,2.55rem);font-weight:400;line-height:.95}.projects-proof em{letter-spacing:.1em;text-align:right;text-transform:uppercase;font-family:JetBrains Mono,monospace;font-size:9px;font-style:normal;font-weight:700}.people-callout{background:var(--verde-nordeste);color:#fffdf7;padding:clamp(48px,5vw,72px) 48px}.people-callout h2 strong{color:var(--amarelo-feira)}.people-label{color:#ffe073}.people-label:before{background:var(--amarelo-feira)}.people-callout-content>p{max-width:700px;font-size:clamp(15px,1.25vw,18px);font-weight:700;line-height:1.6}.people-list{border-top:1px solid #fffdf775;border-bottom:1px solid #fffdf775;margin-top:28px}.people-list p{border-bottom:1px solid #fffdf747;grid-template-columns:1fr 1fr;align-items:center;gap:18px;min-height:58px;display:grid}.people-list p:last-child{border-bottom:0}.people-list strong{letter-spacing:.01em;text-transform:uppercase;font-family:Bebas Neue,sans-serif;font-size:1.65rem;font-weight:400}.people-list span{color:#ffe073;letter-spacing:.1em;text-transform:uppercase;font-family:JetBrains Mono,monospace;font-size:10px;font-weight:700}.people-callout-content>a{border-color:var(--amarelo-feira);color:#ffe073}.people-callout-content>a:hover,.people-callout-content>a:focus-visible{color:#ffe073}.manifesto-callout{border-bottom:6px solid var(--laranja-calor);color:var(--preto-asfalto);background:#fffdf7;padding:clamp(46px,4.6vw,66px) 48px}.manifesto-callout-inner{width:min(100%, var(--container));grid-template-columns:1.7fr 7.8fr 2.5fr;align-items:end;gap:24px;margin:0 auto;display:grid}.manifesto-label{letter-spacing:.16em;text-transform:uppercase;align-self:start;padding-top:10px;font-family:JetBrains Mono,monospace;font-size:11px;font-weight:700}.manifesto-label:before{background:var(--laranja-calor);content:"";width:38px;height:5px;margin-bottom:16px;display:block}.manifesto-callout h2{letter-spacing:-.025em;text-transform:uppercase;font-family:Bebas Neue,sans-serif;font-size:clamp(3.15rem,4.35vw,4.9rem);font-weight:400;line-height:.9}.manifesto-callout h2 span,.manifesto-callout h2 strong{display:block}.manifesto-callout h2 strong{color:var(--verde-nordeste);font-weight:400}.manifesto-callout a{border-bottom:3px solid var(--laranja-calor);width:fit-content;color:var(--vermelho-briga);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;align-items:center;gap:26px;padding-bottom:8px;font-size:12px;font-weight:900;transition:color .18s,gap .22s;display:inline-flex}.manifesto-callout a:hover,.manifesto-callout a:focus-visible{color:var(--vermelho-briga);gap:34px}.manifesto-callout a b{font-size:20px}.final-contact{background:var(--preto-asfalto);color:#fffdf7;padding:clamp(52px,5.4vw,78px) 48px}.final-contact-inner{width:min(100%, var(--container));grid-template-columns:7fr 5fr;align-items:end;gap:clamp(44px,6vw,90px);margin:0 auto;display:grid}.final-contact-label{color:var(--amarelo-feira);letter-spacing:.16em;text-transform:uppercase;margin-bottom:20px;font-family:JetBrains Mono,monospace;font-size:11px;font-weight:700}.final-contact-label:before{background:var(--amarelo-feira);content:"";width:38px;height:5px;margin-bottom:16px;display:block}.final-contact h2{letter-spacing:-.028em;text-transform:uppercase;font-family:Bebas Neue,sans-serif;font-size:clamp(3.8rem,5.9vw,6.2rem);font-weight:400;line-height:.86}.final-contact h2 strong{color:var(--amarelo-feira);font-weight:400;display:block}.final-contact-action p{color:#fffdf7d1;max-width:580px;font-size:clamp(15px,1.25vw,18px);font-weight:700;line-height:1.65}.final-contact-action a{background:var(--laranja-calor);color:var(--preto-asfalto);letter-spacing:.08em;text-transform:uppercase;align-items:center;gap:32px;width:fit-content;min-height:52px;margin-top:28px;padding:0 28px;font-size:12px;font-weight:900;transition:background-color .18s,transform .18s;display:inline-flex}.final-contact-action a:hover,.final-contact-action a:focus-visible{background:var(--amarelo-feira);transform:translate(5px)}.site-footer{color:#fffdf7;background:#10291c;padding:42px 48px 22px}.footer-inner,.footer-meta{width:min(100%, var(--container));margin:0 auto}.footer-inner{grid-template-columns:4fr 5fr 3fr;align-items:start;gap:42px;display:grid}.footer-brand img{width:142px;height:auto;display:block}.footer-brand p{color:#fffdf7a3;max-width:260px;margin-top:16px;font-size:13px;font-weight:700;line-height:1.5}.footer-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 28px;display:grid}.footer-nav a,.footer-contact a{color:#fffdf7bd;width:fit-content;font-size:12px;font-weight:800;transition:color .18s}.footer-nav a:hover,.footer-nav a:focus-visible,.footer-contact a:hover,.footer-contact a:focus-visible{color:var(--amarelo-feira)}.footer-contact{flex-direction:column;align-items:flex-start;gap:18px;display:flex}.footer-contact>a{border-bottom:1px solid #fffdf757;padding-bottom:7px}.footer-contact div{gap:20px;display:flex}.footer-meta{color:#fffdf799;letter-spacing:.04em;border-top:1px solid #fffdf72e;justify-content:space-between;gap:24px;margin-top:34px;padding-top:18px;font-size:10px;font-weight:700;display:flex}.footer-meta a{transition:color .18s}.footer-meta a:hover,.footer-meta a:focus-visible{color:#fffdf7}@keyframes title-reveal{0%{opacity:0;transform:translateY(.6em)}to{opacity:1;transform:translateY(0)}}@media (width<=980px){.site-header{left:14px;right:14px}.nav{padding-left:18px}.nav-links{display:none}.hero{align-items:flex-start;padding:112px 24px 26px}.hero-title{font-size:clamp(4rem,13.1vw,7.4rem)}.hero-bottom{grid-template-columns:1fr}.hero-copy,.hero-actions{grid-column:1}.hero-copy{grid-template-columns:1fr;gap:8px;max-width:760px}.hero-actions{justify-content:flex-start;gap:26px;position:static}.fit-section{padding-left:24px;padding-right:24px}.fit-inner{grid-template-columns:1fr;gap:52px}.fit-header{position:static}.fit-header h2{max-width:780px}.signal-row{grid-template-columns:1fr 4fr}.signal-row p{grid-column:2}.menu-section{padding-left:24px;padding-right:24px}.menu-header{grid-template-columns:1fr;gap:34px}.menu-label{position:static}.menu-header h2{text-align:center;grid-column:1}.product-index a{grid-template-columns:70px 1fr auto 44px}.projects-callout,.people-callout{padding-left:24px;padding-right:24px}.projects-callout-inner,.people-callout-inner{grid-template-columns:1fr;gap:38px}.manifesto-callout{padding-left:24px;padding-right:24px}.manifesto-callout-inner{grid-template-columns:1fr;align-items:start;gap:26px}.manifesto-callout h2{max-width:860px}.manifesto-desktop-break{display:none}.final-contact,.site-footer{padding-left:24px;padding-right:24px}.final-contact-inner{grid-template-columns:1fr;align-items:start;gap:34px}.footer-inner{grid-template-columns:1fr 1fr}.footer-contact{grid-column:1/-1}}@media (width<=560px){.site-header{top:10px;left:9px;right:9px}.nav{gap:10px;min-height:60px;padding:8px 8px 8px 12px}.brand{width:112px;height:38px}.brand img{width:110px}.nav-cta{min-height:40px;margin-left:auto;padding:0 12px;font-size:8px}.nav-cta b{display:none}.hero{min-height:0;padding:84px 16px 20px}.stamp{letter-spacing:.07em;margin-bottom:17px;padding:5px 10px 5px 7px;font-size:7.5px}.stamp img{width:24px;height:20px}.hero-title{font-size:clamp(3.18rem,15.8vw,5.25rem);line-height:.84}.hero-bottom{gap:16px;margin-top:16px;padding-top:18px}.hero-copy{font-size:14px}.hero-copy p:last-child{display:block}.hero-actions{gap:16px}.leaf-cta{width:126px;height:112px;padding:20px;font-size:14px}.leaf-cta img{width:126px;height:112px}.leaf-cta:after{width:82px;height:52px}.secondary-cta{font-size:11px}.section-cut{height:5px}.fit-section{padding:44px 16px 54px}.fit-section:after{display:none}.fit-header{margin-bottom:0}.section-label{font-size:9px}.fit-header h2{font-size:clamp(3.35rem,15vw,5rem)}.signal-list{grid-template-columns:1fr}.signal-row:nth-child(odd){border-right:0}.signal-row:nth-child(3){border-bottom:1px solid #1a1a1a6b}.signal-row{grid-template-columns:58px 1fr;gap:12px;min-height:0;padding:27px 0 30px}.signal-row:hover{padding-left:12px;padding-right:12px}.signal-number{align-self:start;padding-top:3px;font-size:3rem}.signal-row h3{font-size:2.2rem}.signal-row p{grid-column:2;font-size:14px}.menu-section{padding:46px 16px 54px}.menu-section:before{right:-55%}.menu-header{gap:27px}.menu-label{font-size:9px}.menu-header h2{font-size:clamp(4.2rem,20vw,6.3rem);line-height:.8}.product-index{margin-top:46px}.product-index a{grid-template-columns:42px 1fr 28px;gap:10px;min-height:74px}.product-number{font-size:2.25rem}.product-index strong{font-size:clamp(1.9rem,9vw,2.7rem)}.product-index em{display:none}.menu-cta{justify-content:space-between;width:100%;margin-top:32px;padding:0 20px;font-size:10px}.projects-callout,.people-callout{padding:44px 16px 50px}.projects-callout h2,.people-callout h2{font-size:clamp(3.45rem,15vw,5rem)}.projects-proof a{grid-template-columns:42px 1fr;gap:12px;min-height:0;padding:22px 0}.projects-proof em{text-align:left;grid-column:2}.people-list p{grid-template-columns:1fr;gap:4px;padding:14px 0}.manifesto-callout{padding:44px 16px 48px}.manifesto-label{font-size:9px}.manifesto-callout h2{font-size:clamp(3.4rem,15vw,5rem)}.manifesto-callout a{font-size:10px}.final-contact{padding:46px 16px 50px}.final-contact h2{font-size:clamp(3.6rem,15.5vw,5.2rem)}.final-contact-action a{justify-content:space-between;width:100%;padding:0 20px;font-size:10px}.site-footer{padding:36px 16px 20px}.footer-inner{grid-template-columns:1fr;gap:30px}.footer-contact{grid-column:1}.footer-nav{gap:14px 18px}.footer-meta{flex-direction:column;margin-top:28px}}.mobile-nav{display:none}.page-shell{width:min(100%, var(--container));margin:0 auto}.page-hero{border-bottom:6px solid var(--laranja-calor);padding:158px 48px 76px}.page-hero-green{background:var(--verde-nordeste);color:#fffdf7}.page-hero-blue{background:var(--azul-profundo);color:#fffdf7}.page-hero-white{color:var(--preto-asfalto);background:#fffdf7}.page-kicker{letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px;font-family:JetBrains Mono,monospace;font-size:11px;font-weight:700}.page-kicker:before{background:var(--laranja-calor);content:"";width:38px;height:5px;margin-bottom:14px;display:block}.page-hero h1{letter-spacing:-.03em;text-transform:uppercase;max-width:1100px;font-family:Bebas Neue,sans-serif;font-size:clamp(4.8rem,8vw,8.7rem);font-weight:400;line-height:.84}.page-hero h1 strong,.section-heading h2 strong,.statement-section h2 strong,.contact-band h2 strong{color:var(--amarelo-feira);font-weight:400;display:block}.page-hero-white h1 strong{color:var(--verde-nordeste)}.page-intro{border-top:1px solid;max-width:760px;margin-top:30px;padding-top:22px;font-size:clamp(16px,1.35vw,20px);font-weight:700;line-height:1.55}.editorial-section{color:var(--preto-asfalto);background:#fffdf7;padding:clamp(54px,6vw,86px) 48px}.section-heading{grid-template-columns:3fr 9fr;gap:40px;margin-bottom:52px;display:grid}.section-heading h2,.statement-section h2,.contact-band h2{letter-spacing:-.025em;text-transform:uppercase;font-family:Bebas Neue,sans-serif;font-size:clamp(3.8rem,5.8vw,6.3rem);font-weight:400;line-height:.88}.section-heading h2 strong{color:var(--verde-nordeste)}.service-list,.project-list,.lab-list{border-top:2px solid var(--preto-asfalto)}.service-list article,.project-list article,.lab-list>a,.lab-list>article{border-bottom:1px solid #1a1a1a59;grid-template-columns:110px 1fr;gap:26px;padding:34px 0;display:grid}.service-list article>span,.project-list article>span,.lab-list>a>span,.lab-list>article>span{color:var(--laranja-calor);font-family:Bebas Neue,sans-serif;font-size:3.4rem;line-height:1}.service-list h3,.project-list h2,.lab-list h3,.people-page h2{color:var(--verde-nordeste);text-transform:uppercase;margin:6px 0 10px;font-family:Bebas Neue,sans-serif;font-size:clamp(2.6rem,4vw,4.5rem);font-weight:400;line-height:.94}.service-list h4,.people-page h3{max-width:760px;margin-bottom:12px;font-size:18px;line-height:1.4}.service-list article div>p:last-child,.project-list article div>p,.lab-list>a div>p:last-child,.lab-list>article div>p:last-child,.people-page article>p:not(.eyebrow){max-width:780px;font-size:16px;font-weight:700;line-height:1.65}.eyebrow{letter-spacing:.13em;text-transform:uppercase;font-family:JetBrains Mono,monospace;font-weight:700;font-size:10px!important}.project-list article strong{color:var(--azul-profundo);letter-spacing:.08em;text-transform:uppercase;margin-top:18px;font-family:JetBrains Mono,monospace;font-size:10px;display:block}.statement-section{background:var(--azul-profundo);color:#fffdf7;padding:58px 48px}.people-page{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 54px;display:grid}.people-page article{border-top:2px solid var(--preto-asfalto);padding:34px 0}.people-page article:last-child{grid-column:1/-1}.people-page article>p:not(.eyebrow)+p{margin-top:12px}.manifesto-page{background:var(--verde-nordeste);color:#fffdf7;padding:64px 48px}.manifesto-page article{border-top:1px solid #fffdf773;grid-template-columns:1fr 4fr 4fr;gap:34px;padding:34px 0;display:grid}.manifesto-page article h2{text-transform:uppercase;font-family:Bebas Neue,sans-serif;font-size:clamp(2.5rem,4vw,4.3rem);font-weight:400;line-height:.92}.manifesto-page article>p:last-child{font-size:16px;font-weight:700;line-height:1.65}.manifesto-page blockquote{color:var(--amarelo-feira);text-transform:uppercase;max-width:1050px;margin:54px 0 12px;font-family:Bebas Neue,sans-serif;font-size:clamp(3.8rem,6.6vw,6.6rem);line-height:.9}.manifesto-page blockquote span{display:block}.contact-band{background:var(--preto-asfalto);color:#fffdf7;padding:58px 48px}.contact-band .page-shell{grid-template-columns:1fr 7fr auto;align-items:end;gap:32px;display:grid}.button-link,.contact-page button{background:var(--laranja-calor);color:var(--preto-asfalto);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border:0;align-items:center;gap:24px;min-height:52px;padding:0 26px;font:900 12px Nunito,sans-serif;display:inline-flex}.contact-grid{grid-template-columns:4fr 7fr;gap:70px;display:grid}.contact-grid h2{text-transform:uppercase;font-family:Bebas Neue,sans-serif;font-size:clamp(3.2rem,5vw,5.5rem);font-weight:400;line-height:.9}.direct-contact a{text-transform:uppercase;font-family:Bebas Neue,sans-serif;font-size:clamp(2.1rem,2.65vw,3rem);font-weight:400;line-height:.95}.contact-grid>div>p:last-child{margin-top:22px;font-weight:700;line-height:1.65}.contact-page form{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;display:grid}.contact-page label{letter-spacing:.1em;text-transform:uppercase;gap:8px;font-family:JetBrains Mono,monospace;font-size:10px;font-weight:700;display:grid}.contact-page .field-business,.contact-page .field-context,.contact-page .consent,.contact-page button{grid-column:1/-1}.contact-page button{justify-self:start;min-width:220px}.contact-page input:not([type=checkbox]),.contact-page textarea{border:0;border-bottom:2px solid var(--preto-asfalto);width:100%;color:var(--preto-asfalto);background:0 0;border-radius:0;padding:13px 4px;font:700 16px Nunito,sans-serif}.contact-page .consent{text-transform:none;align-items:center;display:flex}.direct-contact{background:var(--amarelo-feira);color:var(--preto-asfalto);padding:54px 48px}.direct-contact .page-shell{grid-template-columns:2.4fr 4.8fr 4.8fr;align-items:end;gap:32px;display:grid}.direct-contact .page-kicker{margin-bottom:0}.direct-contact a{border-top:2px solid;width:100%;padding-top:14px}.legal-page{color:var(--preto-asfalto);background:#fffdf7;padding:64px 48px}.legal-page .page-shell{max-width:900px}.legal-page h2{text-transform:uppercase;margin-top:32px;font:400 2.3rem Bebas Neue,sans-serif}.legal-page p{margin-top:8px;font-size:16px;font-weight:700;line-height:1.7}@media (width<=980px){.mobile-nav{margin-left:auto;display:block}.mobile-nav summary{letter-spacing:.1em;text-transform:uppercase;cursor:pointer;padding:12px;font-size:10px;font-weight:900;list-style:none}.mobile-nav summary::-webkit-details-marker{display:none}.mobile-nav>div{background:var(--preto-asfalto);border-radius:20px;width:min(320px,100vw - 28px);padding:18px;display:grid;position:absolute;top:78px;right:0;box-shadow:0 18px 38px #00000047}.mobile-nav a{text-transform:uppercase;border-bottom:1px solid #ffffff24;padding:13px 8px;font-size:12px;font-weight:800}.page-hero,.editorial-section,.statement-section,.manifesto-page,.contact-band,.direct-contact,.legal-page{padding-left:24px;padding-right:24px}.section-heading,.contact-band .page-shell,.contact-grid{grid-template-columns:1fr;gap:32px}.manifesto-page article{grid-template-columns:70px 1fr}.manifesto-page article>p:last-child{grid-column:2}}@media (width<=640px){.nav{gap:8px;min-height:62px;padding:8px 10px 8px 14px}.brand{width:112px;height:38px}.brand img{width:112px}.nav-cta{display:none}.page-hero{padding-top:124px;padding-bottom:48px}.page-hero h1{font-size:clamp(3.7rem,18vw,5.8rem)}.section-heading h2,.statement-section h2,.contact-band h2{font-size:3.5rem}.service-list article,.project-list article,.lab-list>a,.lab-list>article{grid-template-columns:58px 1fr;gap:14px;padding:26px 0}.service-list article>span,.project-list article>span,.lab-list>a>span,.lab-list>article>span{font-size:2.6rem}.people-page{grid-template-columns:1fr}.people-page article:last-child{grid-column:auto}.manifesto-page article{grid-template-columns:1fr;gap:12px}.manifesto-page article>p:last-child{grid-column:1}.contact-page form{grid-template-columns:1fr}.contact-page label,.contact-page label:nth-child(4),.contact-page .consent,.contact-page button{grid-column:1}.direct-contact a{overflow-wrap:anywhere;font-size:2.25rem}}@media (width<=1180px) and (width>980px){.contact-band .page-shell{grid-template-columns:140px minmax(0,1fr);align-items:start;gap:20px 32px}.contact-band .page-kicker{grid-row:1/span 2}.contact-band h2{grid-column:2}.contact-band .button-link{grid-column:2;justify-self:start}}@media (width<=980px){.direct-contact .page-shell{grid-template-columns:1fr 1fr}.direct-contact .page-kicker{grid-column:1/-1}}@media (width<=640px){.direct-contact .page-shell{grid-template-columns:1fr}.direct-contact .page-kicker{grid-column:1}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.contact-form-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.contact-form-status{color:var(--verde-nordeste);letter-spacing:0;text-transform:none;grid-column:1/-1;font-family:Nunito,sans-serif;font-size:14px;font-weight:800;line-height:1.4}.contact-form-status.is-error{color:#9f1d1d}.contact-page .consent a{text-decoration:underline;text-underline-offset:3px}.contact-page button:disabled{cursor:wait;opacity:.65}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}

/* ================================================================
/* ================================================================
   PATCH — index.html — migração pra paleta guaraná + forma orgânica
   Colar no FIM de assets/site.css. Ordem importa: este bloco precisa
   vir depois de todas as regras originais, senão não sobrescreve.
   Todo par de cor abaixo foi calculado (WCAG), não estimado:
   contraste real medido, não copiado do doc de outra paleta.
   ================================================================ */

:root{
  /* Os 5 tokens do sistema — únicos aprovados pra fundo/texto/UI. */
  --superficie-clara: #F8FBF9;
  --verde-folha: #1B6B3A;
  --vermelho-capsula: #C8332B;
  --branco-arilo: #FFFDF7;
  --preto-semente: #1C1310;

  /* Rebind dos nomes antigos pros 5 tokens — evita reescrever ~100
     ocorrências de var() no arquivo compilado. */
  --verde-nordeste: var(--verde-folha);
  --preto-asfalto: var(--preto-semente);
  --vermelho-briga: var(--vermelho-capsula);
  --creme-mandioca: var(--branco-arilo);
}

/* --amarelo-feira, --laranja-calor, --azul-profundo não têm substituto
   1:1 — cada um tinha um PAPEL estrutural diferente (fundo de seção,
   hover, destaque). Resolvidos um a um abaixo. Testado: nenhum destes
   é reaproveitado como acento — nenhum passou o checklist de origem
   real (eram "bonito e genérico", não extraídos de nada específico). */

/* ---- Nav: fundo escuro vira preto-semente (já cai via rebind).
   Hover de link testado: verde-folha sobre preto-semente = 2.79:1,
   REPROVA. Vermelho-capsula sobre preto-semente = 3.45:1, também
   reprova pra texto pequeno. Solução: hover não muda cor de texto,
   vira chip de fundo — mesma lógica do .stamp e do .nav-cta. */
.nav-links a{ transition: background-color .18s, color .18s; border-radius: 999px; padding: 4px 10px; margin: -4px -10px; }
.nav-links a:hover, .nav-links a:focus-visible{
  background: var(--branco-arilo);
  color: var(--preto-semente);
}
.nav-cta{ background: var(--verde-folha) !important; color: var(--branco-arilo) !important; }
/* 6.43:1, testado. Nav-cta deixa de ser amarelo — vermelho fica
   reservado pro fechamento (.final-contact), nunca no cabeçalho fixo
   que fica sobre o hero verde o tempo todo — vermelho + verde nunca
   se tocam, e o header flutua por cima da seção verde na rolagem. */

/* ---- Stamp (badge do hero): creme sai, entra superfície clara. */
.stamp{ background: var(--superficie-clara) !important; color: var(--preto-semente) !important; }

/* ---- Fit-section (Quando faz sentido): fundo já cai por --creme-mandioca
   apontar pra branco-arilo, mas o correto aqui é superfície, não arilo
   (arilo é pra TEXTO sobre cor, não fundo de página). Corrigindo: */
.fit-section, .projects-callout, .manifesto-callout, .legal-page{ background: var(--superficie-clara) !important; }

/* ---- Signal-row: numeração removida do HTML (decisão travada —
   "Quando faz sentido" não é sequência real). Grid ajustado pra não
   colapsar o alinhamento (era 54px 1fr reservando coluna do número). */
.signal-list{ grid-template-columns: 1fr; }
.signal-row, .signal-row:nth-child(odd){ grid-template-columns: 1fr; border-right: 0 !important; }
.signal-row:nth-child(3),.signal-row:nth-child(4){ border-bottom: 1px solid color-mix(in srgb, var(--preto-semente) 42%, transparent); }
.signal-row-last, .signal-row:last-child{ border-bottom: 0 !important; }
/* Hover unificado — antes cada linha tinha uma cor diferente (laranja,
   vermelho, azul, verde) amarrada ao número. Sem número, 4 cores
   separadas viram decoração sem função. Um hover só, do sistema. */
.signal-row:hover{ background: var(--verde-folha) !important; color: var(--branco-arilo) !important; }
@media (max-width: 560px){
  .signal-row{ grid-template-columns: 1fr; }
}

/* ---- Menu-section (Cardápio): era fundo azul-profundo — cor sem
   equivalente no sistema de 5. Não criamos 6ª cor estrutural (travado
   na conversa anterior). Vira seção clara, como o resto do corpo. */
.menu-section{ background: var(--superficie-clara) !important; color: var(--preto-semente) !important; }
.menu-label{ color: var(--verde-folha) !important; }
.menu-label:before{ background: var(--verde-folha) !important; }
.menu-header h2{ color: var(--preto-semente) !important; }
.product-index{ border-top: 2px solid var(--preto-semente) !important; }
.product-index a{ border-bottom: 1px solid color-mix(in srgb, var(--preto-semente) 54%, transparent) !important; }
.product-index a:hover, .product-index a:focus-visible{
  background: var(--verde-folha) !important; color: var(--branco-arilo) !important;
}
.product-number{ color: var(--verde-folha) !important; }
.product-index a:hover .product-number, .product-index a:focus-visible .product-number{ color: var(--branco-arilo) !important; }
.product-index em{ color: var(--verde-folha) !important; }
.product-index a:hover em, .product-index a:focus-visible em{ color: var(--branco-arilo) !important; }
.menu-cta{ background: var(--vermelho-capsula) !important; color: var(--branco-arilo) !important; }
.menu-cta:hover, .menu-cta:focus-visible{ background: var(--verde-folha) !important; }

/* ---- Projects / People: strong/hl já usa var(--verde-nordeste), cai
   certo pelo rebind. Segunda cor (--amarelo-feira em people/final-contact)
   precisa virar vermelho-capsula pra manter as duas seções visualmente
   distintas — mas o próprio doc já bane vermelho tocando verde, então
   people-callout (fundo verde) NÃO pode usar vermelho no texto por cima.
   Correção: people-callout usa branco-arilo puro no .hl, sem segunda cor. */
.people-callout h2 .hl{ color: var(--branco-arilo) !important; }
.people-label{ color: var(--branco-arilo) !important; }
.people-label:before{ background: var(--branco-arilo) !important; }
.people-callout-content>a{ border-color: var(--branco-arilo) !important; color: var(--branco-arilo) !important; }

/* .final-contact já é fundo vermelho — o .hl ali usa amarelo-feira no
   inline <style> do head. Amarelo sai, vira arilo (branco sobre vermelho,
   5.21:1, já travado no doc). */
.final-contact-label{ color: var(--branco-arilo) !important; }
.final-contact-label:before{ background: var(--branco-arilo) !important; }
.final-contact-action a{ background: var(--branco-arilo) !important; color: var(--vermelho-capsula) !important; }
.final-contact h2 .hl{ color: var(--branco-arilo) !important; }
/* O <style> inline no <head> vem DEPOIS do link do site.css no documento —
   empata em especificidade e venceria por ordem. Os !important acima
   e abaixo garantem que este patch prevaleça mesmo assim. */
.wa-float:focus-visible{ outline: 3px solid var(--branco-arilo) !important; outline-offset: 3px; }
/* ---- Regra base do .wa-float nunca tinha sido colada no site.css —
   só o override do focus-visible (acima) existia, corrigindo uma
   regra base que não estava em lugar nenhum. Colando agora, já na
   paleta guaraná. */
.wa-float{
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--verde-folha);
  box-shadow: 0 6px 20px #00000038;
}
.wa-float svg{ width: 28px; height: 28px; fill: var(--branco-arilo); }
@media (width <= 640px){
  .wa-float{ right: 1rem; bottom: 1rem; }
}

/* ================================================================
   FORMA — tirar a cara de builder (grid retangular, hairline reto)
   ================================================================ */

/* Corte reto entre hero e fit-section vira levantada orgânica —
   a seção clara "sobe" por cima do verde, sem barra de cor sólida. */
.section-cut{ display: none; }
.fit-section{
  border-radius: 46% 54% 0 0 / 64px 64px 0 0;
  margin-top: -1px;
  position: relative;
}

/* Leaf-cta já tem blob assimétrico (48% 52% 46% 54%) — replicar esse
   gesto no badge do hero, que hoje é retângulo de cantos retos. */
.stamp{ border-radius: 999px; } /* já era pill — mantém, é o padrão certo */

/* Product-index e signal-row ganham leve respiro assimétrico no hover,
   quebrando o grid perfeito sem quebrar o alinhamento de leitura. */
.product-index a:hover, .product-index a:focus-visible{
  border-radius: 18px 4px 18px 4px;
}
.signal-row:hover{
  border-radius: 4px 24px 4px 24px;
}

/* ---- Achado: ".projects-callout-copy>a,.people-callout-content>a" é
   UMA regra só no CSS original, com color:var(--vermelho-briga) sobre
   fundo verde do people-callout. Isso já era vermelho tocando verde
   em produção, antes desta revisão — a regra sem exceção do doc já
   estava sendo quebrada sem ninguém perceber. .people-callout-content>a
   já foi corrigido acima (vira arilo). Fica faltando o lado do projects,
   que fica em seção clara e pode manter vermelho sem violar nada: */
.projects-callout-copy>a{ border-color: var(--vermelho-capsula) !important; color: var(--vermelho-capsula) !important; }
.projects-label:before{ background: var(--verde-folha) !important; }
.secondary-cta:hover, .secondary-cta:focus-visible{ color: var(--branco-arilo) !important; border-color: var(--branco-arilo) !important; }

/* Manifesto (teaser na home — a página manifesto.html fica de fora
   desta conversa). Acento órfão de laranja vira vermelho-capsula,
   antecipando visualmente o fechamento vermelho logo abaixo. */
.manifesto-callout{ border-bottom-color: var(--vermelho-capsula) !important; }
.manifesto-label:before{ background: var(--vermelho-capsula) !important; }

/* ---- CTA do hero (blob laranja, zona de sotaque aprovada) — testado:
   branco-arilo sobre o laranja do blob = 3.33:1, REPROVA pra texto
   normal (o texto do CTA é 18px peso 400, não conta como "grande" na
   regra WCAG). Preto-semente sobre o mesmo laranja = 5.39:1, passa.
   Troquei a cor do texto, não a cor do blob — o sotaque continua livre,
   só a leitura em cima dele precisa ser garantida. */
.leaf-cta{ color: var(--preto-semente) !important; }

@media (prefers-reduced-motion: reduce){
  .product-index a, .signal-row{ transition: none; }
}

/* ================================================================
   ADENDO — revisão visual (2ª rodada)
   ================================================================ */

/* ---- Achado de forma: o traço reto de 38×5px antes de cada rótulo
   (Quando faz sentido, Cardápio, Projetos, Quem faz, Manifesto,
   Vamos conversar) é o mesmo elemento repetido 6 vezes — retângulo
   fixo, zero variação. É exatamente a "cara de builder" que a
   referência apontou. Vira o blob do guaraná, pequeno, reaproveitando
   a mesma técnica assimétrica do .leaf-cta:after em vez de inventar
   forma nova — reforça o fruto como elemento de sistema, não só cursor. */
.section-label:before{ background: var(--verde-folha) !important; }

/* ---- Achado da auditoria: .nav, body e .site-footer usam hex FIXO
   (#1a1a1ad1, #10291c) em vez de var() — por isso nenhum dos dois
   patches os alcançou. #10291c em particular não é nem a paleta antiga
   nem a nova: é uma terceira cor solta, nunca catalogada em lugar
   nenhum, que ninguém tinha visto até a auditoria rodar getComputedStyle. */
.nav{ background: color-mix(in srgb, var(--preto-semente) 82%, transparent) !important; }
body{ background: var(--preto-semente) !important; }
.site-footer{ background: var(--preto-semente) !important; }

.section-label:before,
.menu-label:before,
.projects-label:before,
.people-label:before,
.manifesto-label:before,
.final-contact-label:before{
  width: 15px !important;
  height: 12px !important;
  border-radius: 62% 38% 55% 45% / 45% 60% 40% 55% !important;
  transform: rotate(-7deg);
  margin-bottom: 14px !important;
}

/* ================================================================
   PATCH — trocar-ideia.html — remove amarelo-feira e retângulo reto
   Colar no FIM de assets/site.css, depois do ADENDO. Todo contraste
   abaixo foi calculado (WCAG), não estimado.
   ================================================================ */

/* ---- .direct-contact usava amarelo-feira como fundo de seção inteira.
   Amarelo está fora do sistema sem exceção (regra da paleta), não é
   questão de contraste — o par com preto-semente até passava fácil
   (~11.2:1). Vira superfície clara + preto-semente, mesmo padrão de
   qualquer seção clara do site. */
.direct-contact{
  background: var(--superficie-clara) !important;
  color: var(--preto-semente) !important;
}

/* ---- .page-hero h1 strong também usava amarelo-feira — calculado:
   amarelo sobre verde-folha = 4.0:1, não bate o piso de 4.5:1 do
   projeto (passa raspando o AA-large de 3:1, só isso).
   Testado antes (comentário do patch da index): preto-semente sobre
   verde-folha = 2.79:1, reprova. Vermelho não pode tocar verde.
   Dos 5 tokens, só branco-arilo/superfície-clara passam sobre
   verde-folha (6.43:1) — e é a cor que o H1 já usa por padrão.
   Resultado: no hero verde não sobra uma 2ª cor válida pra
   diferenciar a segunda linha do H1. Corrigido pra não usar mais
   amarelo; a distinção visual das duas linhas fica sem cor por
   enquanto — se quiser recuperar o efeito de destaque, precisa de
   outro recurso (peso, itálico, quebra) ou repensar o fundo dessa
   seção, não dá pra resolver só no CSS dentro das regras atuais. */
.page-hero-green h1 strong{
  color: inherit !important;
}

/* ---- .page-kicker:before ficou de fora do adendo anterior (que só
   pegou section-label, menu-label, projects-label, people-label,
   manifesto-label, final-contact-label). Mesmo tratamento: sai o
   retângulo reto em laranja-calor, entra o blob do guaraná em
   verde-folha — mesma técnica do .leaf-cta:after. */
.page-kicker:before{
  background: var(--verde-folha) !important;
}
.page-kicker:before{
  width: 15px !important;
  height: 12px !important;
  border-radius: 62% 38% 55% 45% / 45% 60% 40% 55% !important;
  transform: rotate(-7deg);
  margin-bottom: 14px !important;
}

/* ---- .contact-page button ("Enviar contexto") usava laranja-calor
   como fundo de CTA inteiro. Decisão travada depois desta revisão:
   laranja é sotaque pontual, nunca cor de botão/CTA. Alinhando com o
   mesmo tratamento do .nav-cta (verde-folha + branco-arilo, 6.43:1,
   já testado). Não toquei em .button-link — mesma classe compartilhada
   que aparece em .contact-band, página ainda não auditada; escopo aqui
   é só o botão do formulário desta página. */
.contact-page button{
  background: var(--verde-folha) !important;
  color: var(--branco-arilo) !important;
}

/* ================================================================
   PATCH — cardapio.html
   Colar no FIM de assets/site.css, depois do patch da trocar-ideia.
   ================================================================ */

/* ---- Achado: o handoff mandava colar estas duas regras no site.css
   junto com o resto do bloco <style> inline do index.html. Nunca
   foram coladas — grep confirma ausência total no arquivo. Não é só
   problema do cardápio: qualquer página do site está rodando sem
   quebra equilibrada de título e sem skip-link estilizado. Colando
   agora porque cardápio depende das duas. */
h1, h2 { text-wrap: balance; }
.skip-link {
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: 999;
  padding: .75rem 1.25rem;
  background: var(--verde-folha);
  color: var(--branco-arilo);
  font: inherit;
}
.skip-link:focus { left: 0; }

/* ---- .editorial-section é a mesma seção clara que .fit-section,
   .projects-callout, .manifesto-callout e .legal-page — ficou de fora
   do patch que migrou essas quatro pra --superficie-clara. Mesmo
   descuido, mesmo fix. */
.editorial-section{ background: var(--superficie-clara) !important; }

/* ---- .contact-band h2 strong usava --amarelo-feira, fora do sistema
   de 5 tokens sem exceção (a regra não abre exceção por passar
   contraste). Corrigido pra branco-arilo, mesmo tratamento de
   .final-contact-label e .people-label sobre fundo escuro. */
.contact-band h2 strong{ color: var(--branco-arilo) !important; }

/* ---- Três <strong> de H2/H1 de duas cores viraram <span class="hl">
   nesta revisão (page-hero h1, section-heading h2, contact-band h2).
   .hl ainda não tinha regra própria pra essas três classes — só pra
   projects/people/manifesto/final-contact, que são da home. Cada uma
   testada contra o fundo real da seção:
   - page-hero-green: fundo verde-folha, h1 já é branco-arilo por
     padrão — .hl herda a mesma cor, sem 2ª cor (a mesma limitação já
     documentada no patch da trocar-ideia: no verde não sobra 2ª cor
     válida sem violar contraste ou a regra de vermelho+verde).
   - section-heading: fundo agora superfície clara (fix acima) — verde
     passa fácil, mesmo valor que .fit-header h2 já usa.
   - contact-band: fundo preto-semente — branco-arilo, 16.7:1 aprox
     (mesmo par preto/claro já travado no doc, invertido). */
.page-hero-green h1 .hl{ color: var(--branco-arilo); font-weight: 400; display: block; }
.section-heading h2 .hl{ color: var(--verde-folha); font-weight: 400; display: block; }
.contact-band h2 .hl{ color: var(--branco-arilo); font-weight: 400; display: block; }

/* ================================================================
   PATCH — quem-faz.html
   ================================================================ */
/* .statement-section não tinha aparecido em nenhuma página até agora.
   Fundo é --azul-profundo (cor de sotaque, não faz parte dos 5 tokens,
   mas já é usada assim em .menu-section da home — não é uma 6ª cor
   nova, é reaproveitamento de um padrão existente). Texto já é
   branco-arilo por padrão na classe; .hl segue o mesmo valor, sem
   precisar de 2ª cor nova. */
.statement-section h2 .hl{ color: var(--branco-arilo); font-weight: 400; display: block; }

/* ---- .button-link (compartilhada com .contact-band em trocar-ideia,
   quem-faz, projetos, manifesto, laboratorio) usava laranja-calor
   como fundo de CTA inteiro. Confirmado com Flavia: a regra "laranja
   é sotaque pontual, nunca cor de botão/CTA" vale pra TODAS as
   páginas, sem exceção por classe compartilhada. Mesmo tratamento já
   dado a .nav-cta, .menu-cta e .contact-page button — verde-folha +
   branco-arilo, 6.43:1, já testado. */
.button-link{
  background: var(--verde-folha) !important;
  color: var(--branco-arilo) !important;
}
/* ---- Padronizando hover/focus-visible, ausente até aqui — .nav-cta e
   .menu-cta têm feedback no hover, .button-link não tinha nenhum.
   Não copiei o padrão de troca de cor do .menu-cta (background muda
   pra verde-folha no hover) porque .button-link aparece em páginas
   ainda não auditadas (quem-faz, projetos, manifesto, laboratorio) e
   não sei em que fundo cada uma coloca esse botão — trocar cor às
   cegas pode empurrar vermelho ou verde pra cima de um fundo que já é
   verde ou vermelho ali. Fiquei só no movimento (mesmo gesto do
   .nav-cta), que é seguro em qualquer fundo. Se quiser cor no hover
   também, dá pra fechar por página conforme cada uma for auditada. */
.button-link:hover, .button-link:focus-visible{
  transform: translate(5px);
}
/* ================================================================
   PATCH — projetos.html
   ================================================================ */
.page-hero-white h1 .hl{ color: var(--verde-folha); font-weight: 400; display: block; }
.manifesto-page blockquote{ color: var(--branco-arilo) !important; }
/* ================================================================
   PATCH — laboratorio.html
   Colar no FIM de assets/site.css, depois do patch de projetos.html.
   ================================================================ */

/* ---- .page-hero-blue ainda não tinha .hl próprio. Testado:
   branco-arilo sobre azul-profundo = 8.16:1, passa fácil. Verde-folha
   sobre o mesmo azul = 1.27:1, preto-semente = 2.2:1 — nenhum dos dois
   passa. Mesma limitação já documentada pro hero verde: no azul também
   não sobra 2ª cor válida, o .hl herda a cor branca padrão do h1. */
.page-hero-blue h1 .hl{ color: var(--branco-arilo); font-weight: 400; display: block; }

/* ---- Achado: .footer-nav a:hover e .footer-contact a:hover ainda
   usam --amarelo-feira (literal #F5C518) — nunca tinham sido pegos
   pelos patches anteriores. Amarelo está fora do sistema sem exceção
   (regra da paleta, não é questão de contraste — o par até passava,
   11.2:1 sobre preto-semente). Troca pro mesmo gesto que .footer-meta
   a:hover já usa: sai da opacidade parcial (#fffdf7bd) pro branco-arilo
   sólido. Mesma lógica, zero cor nova. */
.footer-nav a:hover, .footer-nav a:focus-visible,
.footer-contact a:hover, .footer-contact a:focus-visible{
  color: var(--branco-arilo) !important;
}

/* ================================================================
   PATCH — bloco de FAQ da trocar-ideia.html
   Colar no FIM de assets/site.css, depois do patch de laboratorio.html.
   Ordem importa: .legal-page recebe background !important num patch
   anterior, então estas regras precisam vir depois pra sobrescrever.
   Contrastes calculados, não estimados.
   ================================================================ */

/* .faq-section é modificador de .legal-page — reaproveita a tipografia
   de h2 + p que já existe ali (font 2.3rem Bebas, p 16px/1.7) e troca
   só a cor. A política de privacidade não é afetada: ela não carrega
   esta classe.
   Par testado: branco-arilo sobre verde-folha = 6.43:1. Passa AA.
   (superfície-clara daria 6.28:1, também passaria, mas arilo é o token
   de TEXTO sobre cor — superfície é token de fundo. Mantendo o papel.) */
.faq-section{
  background: var(--verde-folha) !important;
  color: var(--branco-arilo) !important;
}

/* O blob do .page-kicker é verde-folha desde o patch da trocar-ideia —
   em cima de fundo verde ele some. Vira arilo só aqui. */
.faq-section .page-kicker:before{
  background: var(--branco-arilo) !important;
}

/* Mesmo gesto orgânico já aprovado em .fit-section, espelhado: lá a
   seção clara sobe por cima do verde, aqui o verde sobe por cima da
   clara. Reaproveita a técnica existente em vez de inventar forma
   nova — e tira o retângulo reto entre as duas seções. */
.faq-section{
  border-radius: 54% 46% 0 0 / 64px 64px 0 0;
  margin-top: -1px;
  position: relative;
}

/* O primeiro h2 do bloco tem margin-top:32px herdada de .legal-page h2,
   que empurra a primeira pergunta pra longe do rótulo. Zerando só o
   primeiro. */
.faq-section h2:first-of-type{ margin-top: 18px; }
/* ================================================================
   PATCH — index.html (2ª rodada)
   Colar no FIM de assets/site.css, depois do patch de FAQ da
   trocar-ideia.html. Ordem importa: este bloco precisa vencer o
   .faq-section{background:verde !important} colado antes.
   ================================================================ */

/* ---------------------------------------------------------------
   1. ABSORÇÃO DO <style> INLINE DA INDEX
   O bloco inline foi deletado do HTML. Antes de deletar, conferi
   uma a uma quais das suas regras já existiam no site.css:

   JÁ EXISTIAM, com !important, e portanto já venciam o inline —
   o amarelo dele nunca chegou a renderizar em produção:
     .people-callout h2 .hl, .final-contact h2 .hl,
     .wa-float:focus-visible, .final-contact-action a,
     .final-contact-label, .final-contact-label:before
   JÁ EXISTIAM sem conflito: .skip-link, .wa-float, h1/h2 balance
   NÃO EXISTIAM em lugar nenhum — são as três abaixo. Sem elas o
   fechamento da home fica PRETO (a base do site.css manda
   --preto-asfalto em .final-contact) e os dois .hl ficam sem cor.
   --------------------------------------------------------------- */

.final-contact{ background: var(--vermelho-capsula) !important; }
.projects-callout h2 .hl{ color: var(--verde-folha); font-weight: 400; display: block; }
.manifesto-callout h2 .hl{ color: var(--verde-folha); font-weight: 400; display: block; }
/* 6.28:1 sobre superfície clara — já medido, não recalculado. */

.final-contact-action p{ color: var(--branco-arilo) !important; }
/* A base usa #fffdf7d1 (arilo com alpha) sobre vermelho-cápsula.
   Com alpha o par cai abaixo de 5.21:1. Arilo sólido devolve o
   valor travado. */

/* ---------------------------------------------------------------
   2. ÚLTIMO AMARELO VIVO DA PÁGINA
   .people-list span usa #ffe073 literal — nunca foi pego por
   nenhum patch anterior porque não é var(--amarelo-feira), é hex
   solto. Fundo verde-folha: 5.03:1, passa AA. Sai por ser cor
   fora dos 5 tokens, não por contraste.
   A distinção entre nome e função continua existindo por tipo
   (Bebas 1.65rem contra JetBrains Mono 10px caixa alta), não
   precisava de cor pra funcionar.
   --------------------------------------------------------------- */
.people-list span{ color: var(--branco-arilo) !important; }

/* ---------------------------------------------------------------
   3. FAQ DA HOME — variante clara
   O .faq-section padrão é verde-folha. Na home ele cairia entre o
   .manifesto-callout (claro) e o .final-contact (vermelho): verde
   encostando em vermelho, que a regra proíbe sem exceção.
   Variante clara resolve sem inventar cor: mesmos tokens, mesmo
   par preto-semente sobre superfície clara (16.7:1) já travado.
   O gesto de subida orgânica (border-radius + margin-top:-1px) é
   zerado aqui — claro sobre claro não desenha curva nenhuma, e a
   home já empilha três seções claras seguidas sem costura.
   --------------------------------------------------------------- */
.faq-section.faq-clara{
  background: var(--superficie-clara) !important;
  color: var(--preto-semente) !important;
  border-radius: 0;
  margin-top: 0;
}
.faq-section.faq-clara .page-kicker:before{
  background: var(--verde-folha) !important;
}
.faq-section.faq-clara h2{ color: var(--verde-folha); }
/* 6.28:1. Mesmo tratamento de .fit-header h2 e .section-heading h2
   em seção clara — não é cor nova, é o padrão da página. */

/* ---------------------------------------------------------------
   4. MOBILE-NAV
   O CSS da .mobile-nav já existia inteiro no site.css e nunca teve
   HTML na index. Nada a acrescentar aqui — o HTML foi colado na
   página. Estas duas linhas são só o acabamento do <details>, que
   o CSS existente não cobre.
   --------------------------------------------------------------- */
.mobile-nav summary::marker{ content: ""; }
.mobile-nav summary:focus-visible{
  outline: 3px solid var(--branco-arilo);
  outline-offset: 2px;
  border-radius: 999px;
}
.mobile-nav[open] > div{ z-index: 60; }
/* ================================================================
   CORREÇÃO — .signal-list / .signal-row
   Colar depois do patch-index-2.css.

   Origem do bug: ao remover o <span class="signal-number"> do HTML,
   o patch anterior mudou .signal-row para uma coluna, mas deixou
   viva a regra base .signal-row p{grid-column:2}. O p continua
   pedindo a coluna 2, o grid cria coluna implícita, e o h3 fica
   espremido no que sobrou. Também colapsou a lista para 1 coluna,
   o que não tinha relação com a numeração.
   ================================================================ */

/* Lista volta ao 2×2 original — a numeração era interna à linha. */
.signal-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.signal-row:nth-child(odd){
  border-right: 1px solid color-mix(in srgb, var(--preto-semente) 42%, transparent) !important;
}

/* A causa real: soltar o p da coluna 2 fantasma. */
.signal-row p{ grid-column: 1 !important; max-width: 100%; }
.signal-row h3{ max-width: 100%; }

@media (max-width: 980px){
  .signal-row p{ grid-column: 1 !important; }
}
@media (max-width: 560px){
  .signal-list{ grid-template-columns: 1fr; }
  .signal-row:nth-child(odd){ border-right: 0 !important; }
  .signal-row p{ grid-column: 1 !important; }
}
/* ================================================================
   PATCH — cardapio.html
   Colar no FIM de assets/site.css, depois da CORREÇÃO .signal-list.
   ================================================================ */

/* ---- A numeração 01–04 do .service-list FICA: no cardápio existe
   ordem real, "No Mapa" é a porta de entrada. Decisão travada.
   O que sai é a cor. Os números usam --laranja-calor, e laranja é
   sotaque pontual (2–3 pontos por página). Quatro números somados à
   borda laranja do .page-hero dão cinco, acima do limite.
   Preto-semente sobre superfície clara = 16.7:1, já medido. Escolhido
   em vez de verde-folha porque o h3 do item já é verde: número e
   título na mesma cor apagariam a hierarquia que a cor criava.
   Escopo restrito ao .service-list — .project-list perdeu a numeração
   e .lab-list ainda não foi auditada. */
.service-list article > span{
  color: var(--preto-semente) !important;
}
/* ================================================================
   PATCH — laboratorio.html (numeração)
   Colar no FIM de assets/site.css, depois do patch-cardapio.
   Não confundir com o bloco "PATCH — laboratorio.html" que já está
   colado mais acima no arquivo (o do .page-hero-blue h1 .hl e do
   hover amarelo do rodapé). Aquele já está em produção.
   ================================================================ */

/* ---- A numeração 01/02/03 do .lab-list saiu do HTML: três itens
   paralelos, lidos em qualquer ordem, e o terceiro é um marcador de
   "próxima faísca", não um terceiro item de uma sequência.

   Sem este bloco a remoção QUEBRA o layout. A regra base é
   .lab-list>a,.lab-list>article{grid-template-columns:110px 1fr}.
   Com o <span> fora, sobra um filho só (o <div>), que cai na coluna
   de 110px e espreme o conteúdo inteiro. Mesma armadilha do
   .signal-row, conferida antes: nenhum filho de .lab-list tem
   grid-column próprio, então basta colapsar o container. */
.lab-list > a,
.lab-list > article{
  grid-template-columns: 1fr;
}
@media (max-width: 640px){
  .lab-list > a,
  .lab-list > article{
    grid-template-columns: 1fr;
  }
}

/* ---- Utilitário de acessibilidade, novo no projeto.
   Os dois primeiros itens do laboratório abrem em nova aba
   (target="_blank") sem nenhum aviso — quem usa leitor de tela perde
   o contexto quando a aba troca. O texto "(abre em nova aba)" entra
   no HTML e fica invisível na tela.
   Vai reaproveitar na 404.html. */
.visually-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* ================================================================
   PATCH — obrigado.html
   Colar no FIM de assets/site.css, depois do patch-laboratorio-numeracao.
   ================================================================ */

/* ---- BUG: os dois CTAs da .special-page estavam invisíveis.
   .special-page tem background var(--verde-nordeste), que o rebind
   aponta para --verde-folha (#1B6B3A). O patch do quem-faz.html deu
   a .button-link background var(--verde-folha) !important. Mesma cor:
   botão e seção com fundo idêntico, 1:1. Só o texto branco aparecia.

   A regra do special.css que deveria resolver o segundo botão
   (.special-actions .button-link:last-child{background:transparent})
   tem especificidade maior mas não tem !important — e !important
   vence especificidade sempre. Nunca chegou a ser aplicada.

   Solução: mesmo tratamento já aprovado em .final-contact-action a,
   que é o botão sobre fundo vermelho — inverte o par em vez de
   inventar cor. Fundo arilo, texto verde. 6.43:1, par já medido,
   é o mesmo de sempre lido ao contrário.
   Escopo restrito a .special-page — .button-link nas outras páginas
   fica como está, porque lá o fundo é claro ou preto-semente. */
.special-page .special-actions .button-link{
  background: var(--branco-arilo) !important;
  color: var(--verde-folha) !important;
  border: 0 !important;
}

/* Segundo botão volta a ser secundário, agora de verdade. Fundo da
   seção aparecendo, texto e contorno em arilo: 6.43:1 no texto.
   A borda subiu de rgba(255,253,247,.48) para arilo sólido — a
   versão com alpha dava 2.72:1 contra o verde, abaixo do piso de
   3:1 que o WCAG pede para contorno de componente. Sem isso o botão
   secundário some para quem tem baixa visão. */
.special-page .special-actions .button-link:last-child{
  background: transparent !important;
  color: var(--branco-arilo) !important;
  border: 1px solid var(--branco-arilo) !important;
}

/* Hover: o secundário preenche, o primário escurece o suficiente
   para dar retorno sem sair dos 5 tokens. */
.special-page .special-actions .button-link:hover,
.special-page .special-actions .button-link:focus-visible{
  transform: translate(5px);
}
.special-page .special-actions .button-link:last-child:hover,
.special-page .special-actions .button-link:last-child:focus-visible{
  background: var(--branco-arilo) !important;
  color: var(--verde-folha) !important;
}

/* ---- .special-code:before ficou de fora do adendo que trocou o
   retângulo reto de 38×5px pelo blob do guaraná. O adendo pegou
   section-label, menu-label, projects-label, people-label,
   manifesto-label, final-contact-label e page-kicker — .special-code
   nunca apareceu em nenhuma página auditada até agora. Mesmo gesto. */
.special-code:before{
  width: 15px !important;
  height: 12px !important;
  border-radius: 62% 38% 55% 45% / 45% 60% 40% 55% !important;
  transform: rotate(-7deg);
  margin-bottom: 14px !important;
}
/* ================================================================
   PATCH — manifesto.html
   Colar no FIM de assets/site.css, depois do patch-obrigado.
   ================================================================ */

/* ---- A numeração 01/02/03 do .manifesto-page saiu do HTML: são três
   convicções paralelas, lidas em qualquer ordem, não uma sequência.

   Sem este bloco a remoção QUEBRA o layout, e de dois jeitos
   diferentes por breakpoint:

   Desktop: .manifesto-page article{grid-template-columns:1fr 4fr 4fr}.
   A primeira coluna era do número. Com dois filhos, o h2 cai no 1fr
   e fica com 1/9 da largura.

   Até 980px: {grid-template-columns:70px 1fr} mais
   article>p:last-child{grid-column:2}. O h2 iria para os 70px.
   Conferido antes de mexer: o <p> é o único filho com grid-column
   próprio — mesma armadilha do .signal-row e do .lab-list. */
.manifesto-page article{
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
}

@media (max-width: 980px){
  .manifesto-page article{
    grid-template-columns: 1fr;
  }
  .manifesto-page article > p:last-child{
    grid-column: 1;
  }
}

/* 640px já era coluna única com o p na coluna 1 na base — nada a
   fazer ali. */
/* ================================================================
   PATCH — index.html (3ª rodada)
   Colar no FIM de assets/site.css, depois do patch-manifesto.
   ÚLTIMO bloco do projeto. Depois disto vem o build e a reescrita
   do CSS do zero.
   ================================================================ */

/* ---- A numeração 01/02 do .projects-proof saiu do HTML. Dois
   destaques não são sequência — a decisão ficou pendente de fechar
   junto com projetos.html, e projetos.html perdeu a numeração.
   Agora as duas listas batem.

   Sem este bloco a remoção QUEBRA o layout.
   Desktop: .projects-proof a{grid-template-columns:54px 1fr auto}.
   Com o <span> fora sobram <strong> e <em>: o strong cai nos 54px.

   Até 560px: {grid-template-columns:42px 1fr} mais
   .projects-proof em{grid-column:2}. Conferido antes de mexer — o
   <em> é o único filho com grid-column próprio. Mesma armadilha do
   .signal-row, do .lab-list e do .manifesto-page. */
.projects-proof a{
  grid-template-columns: minmax(0, 1fr) auto;
}

@media (max-width: 560px){
  .projects-proof a{
    grid-template-columns: 1fr;
  }
  .projects-proof em{
    grid-column: 1;
  }
}
/* ================================================================
   PATCH — hierarquia de títulos (auditoria HeadingsMap)
   Colar no FIM de assets/site.css, depois do patch-index-3.
   ================================================================ */

/* ---------------------------------------------------------------
   1. BUG EM PRODUÇÃO: dois .hl da home sem display:block

   O .hl tem display:block em oito regras do arquivo. Nestas duas,
   não — elas só carregam cor. Entrou quando o <style> inline da
   index foi deletado: o patch de absorção conferiu que a COR já
   existia com !important e concluiu que a regra estava coberta,
   mas o inline também trazia o display:block, que não existia em
   lugar nenhum do site.css.

   Efeito na tela, hoje: o span fica inline e a cor dele é a mesma
   do texto base (branco-arilo sobre verde e sobre vermelho). Sem
   quebra e sem cor, as duas metades do H2 encostam:
     "Tem gentepensando junto com você."
     "Se o negócio é bom por dentro,ele precisa aparecer..."
   O espaço foi adicionado no HTML das nove páginas, mas o que
   resolve de verdade é a quebra.
   --------------------------------------------------------------- */
.people-callout h2 .hl,
.final-contact h2 .hl{
  display: block;
  font-weight: 400;
}

/* ---------------------------------------------------------------
   2. FAQ: rótulo vira H2, perguntas viram H3

   Antes: "Perguntas frequentes" era <p class="page-kicker"> e as
   cinco perguntas eram <h2> — no mesmo nível das seções principais
   da página. A region tinha aria-label mas nenhum heading, então
   quem navega por títulos no leitor de tela via cinco perguntas
   soltas sem saber que formavam um bloco.

   Agora: <h2 class="page-kicker">Perguntas frequentes</h2> e cada
   pergunta em <h3>. As regras abaixo mantêm exatamente a aparência
   anterior — o kicker continua com cara de kicker, a pergunta
   continua com cara de pergunta. Nada muda na tela.

   Escopo em .faq-section. A politica-de-privacidade.html usa
   .legal-page sem .faq-section e não é afetada.

   Observação honesta: isso NÃO muda o rich result de FAQ. O
   FAQPage é JSON-LD, independente de heading — e o Google
   restringiu esse rich result a sites de governo e saúde em 2023.
   O ganho real é leitor de tela e extração por LLM, que leem a
   hierarquia do HTML.
   --------------------------------------------------------------- */
.faq-section h2.page-kicker{
  margin-top: 0;
  margin-bottom: 18px;
  font: 700 11px "JetBrains Mono", monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.faq-section h3{
  margin-top: 32px;
  font: 400 2.3rem "Bebas Neue", sans-serif;
  text-transform: uppercase;
}

.faq-section h3:first-of-type{
  margin-top: 18px;
}

/* A variante clara pintava o h2 de verde-folha. Agora quem carrega
   o texto da pergunta é o h3. */
.faq-section.faq-clara h3{ color: var(--verde-folha); }
.faq-section.faq-clara h2.page-kicker{ color: var(--preto-semente); }
/* 6.28:1 e 16.7:1 sobre superfície clara. Pares já medidos. */

/* ================================================================
   PATCH — index.html — passo de 11/08/2026
   Colar no FIM de assets/site.css, DEPOIS de todos os blocos que já
   estão lá. Ordem importa: sem isso, não sobrescreve.
   Subir junto com o index.html revisado. O cache-buster já foi
   trocado para ?v=20260811-1 no index.html — sem isso a mudança
   não acontece (nginx + navegador servem a versão velha).
   ================================================================ */


/* ---- 2. .product-index perdeu a coluna do número (01–04).
   Três definições de grid no bundle, uma por breakpoint — as três
   precisam cair juntas, senão o link desmonta em 980px e em 560px.
   Verificado: nenhum filho de .product-index a usa grid-column,
   então não há o bug de índice deslocado que já apareceu cinco vezes.
   .product-index só existe no index.html — blast radius zero. */
.product-index a{ grid-template-columns: 1fr auto 54px !important; }
@media (width <= 980px){
  .product-index a{ grid-template-columns: 1fr auto 44px !important; }
}
@media (width <= 560px){
  .product-index a{ grid-template-columns: 1fr 28px !important; }
}

/* ---- 3. Creme-mandioca #F5EDD8 vivo no hero e na nav.
   Não caiu no rebind de tokens porque está como hex solto com alpha,
   não como var(). É cor da paleta deletada, rodando em produção.
   Trocado por --branco-arilo mantendo as mesmas opacidades.
   color-mix já é usado neste arquivo, não é dependência nova. */
.nav-links{
  color: color-mix(in srgb, var(--branco-arilo) 72%, transparent) !important;
}
.light-band{
  background: color-mix(in srgb, var(--branco-arilo) 3%, transparent) !important;
}
.hero-bottom{
  border-top-color: color-mix(in srgb, var(--branco-arilo) 32%, transparent) !important;
}
.hero-copy{
  color: color-mix(in srgb, var(--branco-arilo) 94%, transparent) !important;
}
.secondary-cta{
  color: color-mix(in srgb, var(--branco-arilo) 88%, transparent) !important;
  border-bottom-color: color-mix(in srgb, var(--branco-arilo) 42%, transparent) !important;
}
/* ================================================================
   PATCH — páginas de serviço (/servicos/)
   Colar no FIM de assets/site.css, depois de todos os blocos.
   Bumpar cache.site de 20260811-1 para 20260812-1 no site.json.

   Nenhuma classe aqui colide com as dez páginas existentes:
   .hero--servico, .bloco, .bloco--escuro, .grid-servico,
   .btn, .btn--primary, .faq-servico, .label, .servico-*,
   .contact-band-inner — todas inéditas no site.
   ================================================================ */

/* ---- Hero da página de serviço ---------------------------------
   NÃO herda .hero (que é flex + padding menor, exclusivo da home).
   Segue o mesmo par visual do .page-hero-green: verde-folha +
   branco-arilo, 6.43:1 — par já medido e travado.
   Padding superior: 158px, igual ao .page-hero das dez páginas,
   valor seguro testado contra o header fixo.                    */
.hero--servico {
  background: var(--verde-folha);
  color: var(--branco-arilo);
  padding: 158px 48px 72px;
  border-bottom: 6px solid var(--vermelho-capsula);
}

/* .eyebrow já existe (font-size:10px !important, JetBrains Mono,
   uppercase). Adiciona flex pra alinhar o ícone do guaraná.     */
.servico-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}
.servico-eyebrow img {
  width: 20px;
  height: auto;
}

.hero--servico h1 {
  letter-spacing: -.03em;
  text-transform: uppercase;
  max-width: 900px;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(4.8rem, 8vw, 8.7rem);
  font-weight: 400;
  line-height: .84;
}
/* No hero verde não sobra 2ª cor válida (limitação documentada
   no projeto: só branco-arilo passa 4.5:1 sobre verde-folha).
   .hl herda a cor base; diferenciação vem da quebra de linha.   */
.hero--servico h1 .hl {
  color: var(--branco-arilo);
  font-weight: 400;
  display: block;
}

.servico-lead {
  max-width: 640px;
  margin-top: 28px;
  font-size: clamp(16px, 1.35vw, 20px);
  font-weight: 700;
  line-height: 1.55;
  color: color-mix(in srgb, var(--branco-arilo) 90%, transparent);
}
.servico-cta {
  margin-top: 32px;
}

/* ---- Botão -----------------------------------------------------
   Par padrão: verde-folha + branco-arilo, 6.43:1, mesmo de
   .nav-cta, .button-link e .contact-page button.               */
.btn--primary {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 52px;
  padding: 0 28px;
  background: var(--verde-folha);
  color: var(--branco-arilo);
  font: 900 12px "Nunito", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  transition: background-color .18s, transform .18s;
}
.btn--primary:hover,
.btn--primary:focus-visible {
  transform: translate(5px);
}

/* No hero verde o botão inverte: arilo + verde. Mesmo gesto
   de .final-contact-action a (botão sobre fundo colorido).
   6.43:1 lido ao contrário — par já medido.                    */
.hero--servico .btn--primary {
  background: var(--branco-arilo) !important;
  color: var(--verde-folha) !important;
}
.hero--servico .btn--primary:hover,
.hero--servico .btn--primary:focus-visible {
  background: var(--superficie-clara) !important;
}

/* ---- Seções de conteúdo ---------------------------------------- */
.bloco {
  background: var(--superficie-clara);
  color: var(--preto-semente);
  padding: clamp(52px, 5.5vw, 80px) 48px;
}
.bloco--escuro {
  background: var(--preto-semente);
  color: var(--branco-arilo);
}

/* ---- Rótulo de seção -------------------------------------------
   Mesmo papel de .section-label e .page-kicker; mesmo blob do
   guaraná (62% 38% 55% 45% / 45% 60% 40% 55%, 15×12px, −7deg)
   já definido como padrão do sistema no adendo de revisão visual. */
.label {
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 18px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--verde-folha);
}
.label:before {
  background: var(--verde-folha);
  content: "";
  width: 15px;
  height: 12px;
  border-radius: 62% 38% 55% 45% / 45% 60% 40% 55%;
  transform: rotate(-7deg);
  margin-bottom: 14px;
  display: block;
}
/* Variantes de cor do rótulo conforme o fundo da seção         */
.bloco--escuro .label,
.contact-band .label {
  color: var(--branco-arilo);
}
.bloco--escuro .label:before,
.contact-band .label:before {
  background: var(--branco-arilo);
}

.bloco h2 {
  letter-spacing: -.025em;
  text-transform: uppercase;
  max-width: 780px;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(3.2rem, 4.8vw, 5.2rem);
  font-weight: 400;
  line-height: .9;
  margin-bottom: 24px;
}
/* Superfície clara: verde-folha sobre #F8FBF9 = 6.28:1. Passa. */
.bloco h2 .hl {
  color: var(--verde-folha);
  font-weight: 400;
  display: block;
}
/* Preto-semente: não sobra 2ª cor válida (mesma limitação do
   hero verde, já documentada). .hl herda branco-arilo.         */
.bloco--escuro h2 .hl {
  color: var(--branco-arilo);
}

.bloco > p {
  max-width: 700px;
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 700;
  line-height: 1.65;
}
.bloco > p + p {
  margin-top: 16px;
}

/* ---- Grid de serviço -------------------------------------------
   2 colunas no desktop. O gap de 1px com background no container
   cria a grade sem border extra em cada artigo.                 */
.grid-servico {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 36px;
  background: color-mix(in srgb, var(--branco-arilo) 16%, transparent);
}
.grid-servico article {
  background: var(--preto-semente);
  padding: 32px;
}
.grid-servico h3 {
  text-transform: uppercase;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(1.8rem, 2.2vw, 2.4rem);
  font-weight: 400;
  line-height: .94;
  color: var(--branco-arilo);
  margin-bottom: 12px;
}
.grid-servico p {
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 700;
  line-height: 1.6;
  color: color-mix(in srgb, var(--branco-arilo) 80%, transparent);
}

/* ---- FAQ da página de serviço ----------------------------------
   Diferente de .faq-section (verde-folha) e .faq-section.faq-clara
   (superfície clara sem borda topo). Esta variante tem borda topo
   em preto-semente para separar do .bloco anterior.
   Usa <details>/<summary> nativos — sem JS, sem polyfill.       */
.faq-servico {
  background: var(--superficie-clara);
  color: var(--preto-semente);
  padding: clamp(48px, 5vw, 72px) 48px;
  border-top: 2px solid var(--preto-semente);
}
.faq-servico > h2 {
  letter-spacing: -.025em;
  text-transform: uppercase;
  max-width: 780px;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(2.8rem, 3.8vw, 4rem);
  font-weight: 400;
  line-height: .9;
  margin-bottom: 32px;
}
.faq-servico details {
  border-bottom: 1px solid color-mix(in srgb, var(--preto-semente) 28%, transparent);
}
.faq-servico details:first-of-type {
  border-top: 1px solid color-mix(in srgb, var(--preto-semente) 28%, transparent);
}
.faq-servico summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 0;
}
.faq-servico summary::-webkit-details-marker { display: none; }
.faq-servico summary::marker { content: ""; }
.faq-servico summary h3 {
  text-transform: uppercase;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(1.6rem, 2vw, 2.2rem);
  font-weight: 400;
  line-height: .94;
  color: var(--verde-folha);
  transition: color .18s;
}
/* Quando aberto: pergunta vira preto, resposta aparece embaixo  */
.faq-servico details[open] summary h3 {
  color: var(--preto-semente);
}
.faq-servico details > p {
  max-width: 680px;
  padding-bottom: 24px;
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 700;
  line-height: 1.65;
}

/* ---- Contact-band nas páginas de serviço -----------------------
   .contact-band já recebe background (preto-semente via patches
   anteriores) e color (branco-arilo). O .page-shell das dez
   páginas cria um grid de 3 colunas — as páginas de serviço não
   usam .page-shell, usam .contact-band-inner como container
   simples sem grid. Escopo seguro: .contact-band > .page-shell
   não é afetado porque .contact-band-inner é classe nova.       */
.contact-band-inner {
  width: min(100%, var(--container));
  margin: 0 auto;
}
/* O h2 das dez páginas já tem font-size e line-height via CSS
   base. Só ajustamos max-width aqui pra não fugir do container. */
.contact-band-inner h2 {
  max-width: 860px;
}
/* .contact-band h2 .hl já tem color:branco-arilo + display:block
   via patch anterior — não precisamos repetir.                  */
.contact-band-inner > p {
  max-width: 640px;
  margin-top: 20px;
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 700;
  line-height: 1.65;
  color: color-mix(in srgb, var(--branco-arilo) 85%, transparent);
}
.contact-band-inner > .btn--primary {
  margin-top: 28px;
}

/* ---- Responsivo ------------------------------------------------ */
@media (width <= 980px) {
  .hero--servico,
  .bloco,
  .faq-servico {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media (width <= 640px) {
  .hero--servico {
    padding-top: 124px;
    padding-bottom: 48px;
  }
  .hero--servico h1 {
    font-size: clamp(3.7rem, 18vw, 5.8rem);
  }
  .grid-servico {
    grid-template-columns: 1fr;
  }
  .bloco,
  .faq-servico {
    padding-left: 16px;
    padding-right: 16px;
  }
}
/* ================================================================
   PATCH - .service-link (cardapio.html)
   Colar no FIM de assets/site.css, depois do patch das paginas
   de servico.
   Comentarios sem acento de proposito: Add-Content no PowerShell
   5.1 grava em ASCII por padrao e trocaria os acentos por "?".
   ================================================================ */

/* ---- CORRECAO PRIMEIRO, ESTILO DEPOIS.
   A regra base do bundle e:
     .service-list article div>p:last-child{
       max-width:780px;font-size:16px;font-weight:700;line-height:1.65}
   A descricao do card era o ultimo <p> e pegava essa regra. Com o
   <p class="service-link"> colado depois dela nos cards 01, 02 e 04,
   a descricao deixou de ser :last-child e perdeu o estilo, que foi
   parar no paragrafo do link. Bug ja em producao desde a sessao 6.
   O card 03 e o unico ainda correto - e deixa de ser assim que o
   link entrar.
   Aqui a descricao passa a ser alvo por exclusao, sem depender de
   posicao. Especificidade (0,3,3) contra (0,2,3) da regra base:
   vence por especificidade, nao por ordem, entao continua valendo
   mesmo se alguem reordenar o arquivo. Sem !important.
   O :not(.eyebrow) preserva o comportamento atual do eyebrow, que
   hoje nao e alcancado pela regra base.                          */
.service-list article div > p:not(.eyebrow):not(.service-link) {
  max-width: 780px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.65;
}

/* ---- O link em si.
   Cor: verde-folha, 6.28:1 sobre --superficie-clara (fundo do
   .editorial-section apos o patch que migrou a secao). Medido.
   Nao usa vermelho-capsula, apesar do precedente de
   .projects-callout-copy>a: o h3 do card ja e verde (via
   --verde-nordeste, que e alias de --verde-folha desde o patch de
   tokens), e vermelho ao lado dele coloca as duas cores no mesmo
   campo visual.
   Nao usa laranja: a borda do .page-hero do cardapio ja consome a
   cota da pagina, motivo pelo qual o patch anterior tirou o laranja
   dos numeros 01-04.
   Geometria copiada de .projects-callout-copy>a para o link nao
   parecer de outra familia: inline-flex, caixa alta, 12px/900,
   letter-spacing .08em, gap que abre no hover.
   Escopo restrito a .service-list. .project-list e .lab-list nao
   usam a classe.                                                 */
.service-list .service-link {
  margin-top: 18px;
}
.service-list .service-link > a {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  padding-bottom: 6px;
  color: var(--verde-folha);
  border-bottom: 2px solid color-mix(in srgb, var(--verde-folha) 38%, transparent);
  font: 900 12px "Nunito", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: gap .22s, border-color .18s;
}
.service-list .service-link > a:hover,
.service-list .service-link > a:focus-visible {
  gap: 20px;
  border-bottom-color: var(--verde-folha);
}
/* A seta e <b aria-hidden="true"> - o negrito do user agent somado
   ao 900 do link engrossa demais o glifo.                        */
.service-list .service-link > a b {
  font-weight: 400;
  line-height: 1;
}

@media (max-width: 640px) {
  .service-list .service-link {
    margin-top: 14px;
  }
  .service-list .service-link > a {
    gap: 10px;
    font-size: 11px;
  }
  .service-list .service-link > a:hover,
  .service-list .service-link > a:focus-visible {
    gap: 14px;
  }
}