/* ARQUIVO GERADO - NAO EDITAR DIRETAMENTE. */
/* Tailwind: rode .tailwind\build.cmd apos adicionar classes. */
/* CSS customizado: edite .tailwind\custom.css e rode o build. */

*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}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;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.bottom-0{bottom:0}.bottom-6{bottom:1.5rem}.bottom-8{bottom:2rem}.left-0{left:0}.left-6{left:1.5rem}.right-0{right:0}.top-8{top:2rem}.z-10{z-index:10}.z-20{z-index:20}.col-span-12{grid-column:span 12/span 12}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-14{margin-bottom:3.5rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-20{margin-bottom:5rem}.mb-24{margin-bottom:6rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-px{margin-bottom:1px}.mt-1{margin-top:.25rem}.mt-16{margin-top:4rem}.mt-2{margin-top:.5rem}.mt-20{margin-top:5rem}.mt-24{margin-top:6rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-7{margin-top:1.75rem}.mt-8{margin-top:2rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-full{height:100%}.h-px{height:1px}.min-h-screen{min-height:100vh}.w-10{width:2.5rem}.w-8{width:2rem}.w-full{width:100%}.w-px{width:1px}.min-w-\[2\.5rem\]{min-width:2.5rem}.min-w-\[2\.75rem\]{min-width:2.75rem}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-md{max-width:28rem}.max-w-screen-2xl{max-width:1536px}.max-w-screen-xl{max-width:1280px}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize-none{resize:none}.resize{resize:both}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-10{gap:2.5rem}.gap-12{gap:3rem}.gap-16{gap:4rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-px{gap:1px}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.rounded-full{border-radius:9999px}.rounded-sm{border-radius:.125rem}.border{border-width:1px}.border-y{border-top-width:1px}.border-b,.border-y{border-bottom-width:1px}.border-t{border-top-width:1px}.border-outline-variant{--tw-border-opacity:1;border-color:rgb(34 34 34/var(--tw-border-opacity,1))}.border-white\/20{border-color:hsla(0,0%,100%,.2)}.bg-black{--tw-bg-opacity:1;background-color:rgb(26 24 24/var(--tw-bg-opacity,1))}.bg-primary{--tw-bg-opacity:1;background-color:rgb(93 221 162/var(--tw-bg-opacity,1))}.bg-surface{--tw-bg-opacity:1;background-color:rgb(26 24 24/var(--tw-bg-opacity,1))}.bg-surface-container{--tw-bg-opacity:1;background-color:rgb(22 22 22/var(--tw-bg-opacity,1))}.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}.from-black\/80{--tw-gradient-from:rgba(0,0,0,.8) var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-black\/20{--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(0,0,0,.2) var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.object-cover{-o-object-fit:cover;object-fit:cover}.p-10{padding:2.5rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-7{padding:1.75rem}.p-8{padding:2rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-12{padding-bottom:3rem;padding-top:3rem}.py-16{padding-bottom:4rem;padding-top:4rem}.py-2\.5{padding-bottom:.625rem;padding-top:.625rem}.py-20{padding-bottom:5rem;padding-top:5rem}.py-28{padding-bottom:7rem;padding-top:7rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.py-32{padding-bottom:8rem;padding-top:8rem}.py-4{padding-bottom:1rem;padding-top:1rem}.py-6{padding-bottom:1.5rem;padding-top:1.5rem}.pb-12{padding-bottom:3rem}.pb-20{padding-bottom:5rem}.pb-4{padding-bottom:1rem}.pb-8{padding-bottom:2rem}.pt-10{padding-top:2.5rem}.pt-32{padding-top:8rem}.pt-40{padding-top:10rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.font-body,.font-headline{font-family:Articulate CF,sans-serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.uppercase{text-transform:uppercase}.italic{font-style:italic}.not-italic{font-style:normal}.leading-\[1\.05\]{line-height:1.05}.leading-loose{line-height:2}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-\[\.25em\]{letter-spacing:.25em}.tracking-\[\.2em\]{letter-spacing:.2em}.tracking-\[\.3em\]{letter-spacing:.3em}.tracking-tight{letter-spacing:-.025em}.tracking-tighter{letter-spacing:-.05em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-black{--tw-text-opacity:1;color:rgb(26 24 24/var(--tw-text-opacity,1))}.text-on-primary{--tw-text-opacity:1;color:rgb(0 56 35/var(--tw-text-opacity,1))}.text-on-surface{--tw-text-opacity:1;color:rgb(240 240 240/var(--tw-text-opacity,1))}.text-on-surface-variant{--tw-text-opacity:1;color:rgb(163 163 163/var(--tw-text-opacity,1))}.text-outline{--tw-text-opacity:1;color:rgb(51 51 51/var(--tw-text-opacity,1))}.text-primary{--tw-text-opacity:1;color:rgb(93 221 162/var(--tw-text-opacity,1))}.no-underline{text-decoration-line:none}.placeholder-on-surface-variant\/30::-moz-placeholder{color:hsla(0,0%,64%,.3)}.placeholder-on-surface-variant\/30::placeholder{color:hsla(0,0%,64%,.3)}.placeholder-on-surface-variant\/40::-moz-placeholder{color:hsla(0,0%,64%,.4)}.placeholder-on-surface-variant\/40::placeholder{color:hsla(0,0%,64%,.4)}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-80{opacity:.8}.opacity-\[\.03\]{opacity:.03}.invert{--tw-invert:invert(100%)}.filter,.invert{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)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-700{transition-duration:.7s}.hover\:gap-3:hover{gap:.75rem}.hover\:border-primary:hover{--tw-border-opacity:1;border-color:rgb(93 221 162/var(--tw-border-opacity,1))}.hover\:border-primary\/50:hover{border-color:rgba(93,221,162,.5)}.hover\:bg-primary:hover{--tw-bg-opacity:1;background-color:rgb(93 221 162/var(--tw-bg-opacity,1))}.hover\:bg-primary-container:hover{--tw-bg-opacity:1;background-color:rgb(49 185 129/var(--tw-bg-opacity,1))}.hover\:bg-surface:hover{--tw-bg-opacity:1;background-color:rgb(26 24 24/var(--tw-bg-opacity,1))}.hover\:bg-surface-container:hover{--tw-bg-opacity:1;background-color:rgb(22 22 22/var(--tw-bg-opacity,1))}.hover\:text-on-primary:hover{--tw-text-opacity:1;color:rgb(0 56 35/var(--tw-text-opacity,1))}.hover\:text-primary:hover{--tw-text-opacity:1;color:rgb(93 221 162/var(--tw-text-opacity,1))}.hover\:text-primary-container:hover{--tw-text-opacity:1;color:rgb(49 185 129/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.focus\:border-primary\/40:focus{border-color:rgba(93,221,162,.4)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.group:hover .group-hover\:-translate-x-1{--tw-translate-x:-0.25rem}.group:hover .group-hover\:-translate-x-1,.group:hover .group-hover\:translate-x-1{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:translate-x-1{--tw-translate-x:0.25rem}.group:hover .group-hover\:scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:border-primary{--tw-border-opacity:1;border-color:rgb(93 221 162/var(--tw-border-opacity,1))}.group:hover .group-hover\:bg-primary{--tw-bg-opacity:1;background-color:rgb(93 221 162/var(--tw-bg-opacity,1))}.group:hover .group-hover\:text-primary{--tw-text-opacity:1;color:rgb(93 221 162/var(--tw-text-opacity,1))}.group:hover .group-hover\:opacity-90{opacity:.9}@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width:768px){.md\:bottom-8{bottom:2rem}.md\:left-8{left:2rem}.md\:col-span-4{grid-column:span 4/span 4}.md\:col-span-5{grid-column:span 5/span 5}.md\:col-span-7{grid-column:span 7/span 7}.md\:col-span-8{grid-column:span 8/span 8}.md\:block{display:block}.md\:inline-block{display:inline-block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-end{align-items:flex-end}.md\:items-center{align-items:center}.md\:justify-between{justify-content:space-between}.md\:p-12{padding:3rem}.md\:p-14{padding:3.5rem}.md\:p-8{padding:2rem}.md\:px-12{padding-left:3rem;padding-right:3rem}.md\:px-14{padding-left:3.5rem;padding-right:3.5rem}.md\:py-36{padding-bottom:9rem;padding-top:9rem}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}}@media (min-width:1024px){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:gap-28{gap:7rem}}

/* ===== CUSTOM CSS (Saving) ===== */

/* ─── FONTES ─────────────────────────────
   Articulate CF = fonte base (maioria do site)
   Gotham = títulos grandes / destaque
   Arquivos em assets/fonts/ (caminho relativo a assets/css/saving-main.css) */
@font-face{font-family:'Articulate CF';src:url('../fonts/ArticulatCF-Light.woff2') format('woff2'),url('../fonts/ArticulatCF-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Articulate CF';src:url('../fonts/ArticulatCF-Regular.woff2') format('woff2'),url('../fonts/ArticulatCF-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Articulate CF';src:url('../fonts/ArticulatCF-Medium.woff2') format('woff2'),url('../fonts/ArticulatCF-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Articulate CF';src:url('../fonts/ArticulatCF-DemiBold.woff2') format('woff2'),url('../fonts/ArticulatCF-DemiBold.otf') format('opentype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Articulate CF';src:url('../fonts/ArticulatCF-Bold.woff2') format('woff2'),url('../fonts/ArticulatCF-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Articulate CF';src:url('../fonts/ArticulatCF-ExtraBold.woff2') format('woff2'),url('../fonts/ArticulatCF-ExtraBold.otf') format('opentype');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Gotham';src:url('../fonts/Gotham-Regular.woff2') format('woff2'),url('../fonts/Gotham-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Gotham';src:url('../fonts/Gotham-Medium.woff2') format('woff2'),url('../fonts/Gotham-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Gotham';src:url('../fonts/Gotham-Bold.woff2') format('woff2'),url('../fonts/Gotham-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Gotham';src:url('../fonts/Gotham-Black.woff2') format('woff2'),url('../fonts/Gotham-Black.otf') format('opentype');font-weight:900;font-style:normal;font-display:swap}

/* ─── CUSTOM STYLES ─────────────────────── */
*,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:'Articulate CF',sans-serif;background:#1a1818;color:#f0f0f0;overflow-x:hidden}

  /* Gotham apenas nos títulos grandes / de destaque */
  .hero-headline,
  .case-headline,
  #page-trabalhos-archive h1,
  .partner-name{font-family:'Gotham',sans-serif}

  

  /* ─── GLOBAL AMBIENT BACKGROUND ─────────────────────────────────
     Orb suave que acompanha o mouse — dá sensação de profundidade */
  #ambient-orb{
    position:fixed;inset:0;pointer-events:none;z-index:0;
    background:radial-gradient(700px circle at 50% 40%,
      rgba(93,221,162,.09) 0%,rgba(93,221,162,.04) 35%,transparent 70%);
    transition:background .1s ease;
  }
  /* Grain overlay premium */
  body::after{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    opacity:.9;
  }

  /* ─── PAGES ──────────────────────────────────────────────────── */
  .spa-page{display:none;min-height:100vh;position:relative;z-index:2}
  .page.active{display:block}
  .page-enter{animation:pageEnter .6s cubic-bezier(.22,1,.36,1) forwards}
  @keyframes pageEnter{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

  /* ─── NAV ────────────────────────────────────────────────────── */
  #main-nav{position:fixed;top:0;width:100%;z-index:100;transition:background .4s ease,border-color .4s ease}
  .nav-transparent{background:rgba(0,0,0,0);border-bottom:1px solid transparent}
  .nav-solid{background:rgba(5,5,5,.92);backdrop-filter:blur(24px) saturate(1.5);border-bottom:1px solid rgba(255,255,255,.05)}

  .logo-img{height:28px;width:auto;filter:brightness(1);transition:opacity .3s;mix-blend-mode:screen}
  .logo-img:hover{opacity:.7}

  /* ─── NAV LINKS — underline deslizante ───────────────────────── */
  .nav-link{position:relative;font-family:'Articulate CF',sans-serif;font-weight:600;font-size:.7rem;
    letter-spacing:.18em;text-transform:uppercase;color:#cfcfcf;background:none;border:none;
    text-shadow:0 1px 3px rgba(0,0,0,.45);
    cursor:pointer;transition:color .25s ease;padding:0;text-decoration:none;display:inline-block}
  .nav-link::after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:1px;
    background:#5ddda2;transition:width .35s cubic-bezier(.22,1,.36,1)}
  .nav-link:hover{color:#f0f0f0}
  .nav-link:hover::after,.nav-link.active::after{width:100%}
  .nav-link.active{color:#5ddda2}

  /* ─── GHOST BORDERS ──────────────────────────────────────────── */
  .ghost-border{border:1px solid rgba(255,255,255,.08)}
  .ghost-border-green{border:1px solid rgba(93,221,162,.25);transition:border-color .3s,box-shadow .3s}
  .ghost-border-green:hover{border-color:rgba(93,221,162,.55);box-shadow:0 0 20px rgba(93,221,162,.08)}

  /* ─── NEON GLOW ──────────────────────────────────────────────── */
  .neon-glow{box-shadow:0 0 24px rgba(93,221,162,.2),0 0 60px rgba(93,221,162,.07)}
  .neon-glow:hover{box-shadow:0 0 32px rgba(93,221,162,.35),0 0 80px rgba(93,221,162,.12);transition:box-shadow .4s ease}

  /* ─── MARQUEE ────────────────────────────────────────────────── */
  @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .marquee-track{display:flex;gap:0;white-space:nowrap;animation:marquee 30s linear infinite}
  .marquee-track:hover{animation-play-state:paused}

  /* ─── CASE CAROUSEL ──────────────────────────────────────────── */
  /* ── CAROUSEL MOTION ── */
  .case-slide{display:none;opacity:0;pointer-events:none}

  /* Active slide: clip-path wipe from left */
  .case-slide.active{
    display:grid;
    grid-template-rows:1fr;
    opacity:1;
    pointer-events:auto;
    animation:slideWipeIn .85s cubic-bezier(.76,0,.24,1) forwards
  }

  /* Left panel (brand visual): scale up from slight zoom */
  .case-slide.active .case-panel-left{
    animation:panelReveal .9s cubic-bezier(.22,1,.36,1) forwards
  }

  /* Right panel (text side): fade + lift, delayed */
  .case-slide.active .case-panel-right{
    animation:panelRevealRight 1s cubic-bezier(.22,1,.36,1) .12s forwards;
    opacity:0
  }

  /* Brand label (STUDIOS, AGENCY etc) */
  .case-slide.active .case-eyebrow{
    animation:textReveal .7s cubic-bezier(.22,1,.36,1) .2s forwards;
    opacity:0;transform:translateY(10px)
  }

  /* Brand name SVG */
  .case-slide.active .case-brand{
    animation:textReveal .8s cubic-bezier(.22,1,.36,1) .32s forwards;
    opacity:0;transform:translateY(16px)
  }

  /* Green line under brand */
  .case-slide.active .case-line{
    animation:lineGrow .6s cubic-bezier(.22,1,.36,1) .55s forwards;
    transform:scaleX(0);transform-origin:left;opacity:0
  }

  /* Description text on right */
  .case-slide.active .case-desc{
    animation:textReveal .7s cubic-bezier(.22,1,.36,1) .45s forwards;
    opacity:0;transform:translateY(12px)
  }

  /* Ken Burns on background */
  .case-slide.active .case-bg-img{
    animation:kenBurns 9s ease-out forwards
  }

  /* Progress bar at bottom of active slide */
  .case-progress-bar{
    position:absolute;bottom:0;left:0;height:1px;
    background:linear-gradient(90deg,#5ddda2,rgba(93,221,162,.3));
    width:0%;
    animation:progressFill 5s linear forwards
  }

  /* Corner brackets animated in */
  .case-slide.active .case-corner-tl,
  .case-slide.active .case-corner-br{
    animation:cornerFadeIn .5s ease .6s forwards;
    opacity:0
  }

  @keyframes slideWipeIn{
    from{clip-path:inset(0 100% 0 0);opacity:1}
    to{clip-path:inset(0 0% 0 0);opacity:1}
  }
  @keyframes panelReveal{
    from{transform:scale(1.04);opacity:.4}
    to{transform:scale(1);opacity:1}
  }
  @keyframes panelRevealRight{
    from{opacity:0;transform:translateX(20px)}
    to{opacity:1;transform:translateX(0)}
  }
  @keyframes textReveal{
    from{opacity:0;transform:translateY(var(--ty,12px))}
    to{opacity:1;transform:translateY(0)}
  }
  @keyframes lineGrow{
    from{transform:scaleX(0);opacity:0}
    to{transform:scaleX(1);opacity:1}
  }
  @keyframes kenBurns{
    from{transform:scale(1.08) translateX(6px)}
    to{transform:scale(1) translateX(0px)}
  }
  @keyframes progressFill{
    from{width:0%}
    to{width:100%}
  }
  @keyframes cornerFadeIn{
    from{opacity:0;transform:scale(.85)}
    to{opacity:1;transform:scale(1)}
  }

  /* Carousel logo animations */
  @keyframes ringPulse{
    0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.6}
    50%{transform:translate(-50%,-50%) scale(1.06);opacity:1}
  }
  @keyframes ringRotate{
    from{transform:translate(-50%,-50%) rotate(0deg)}
    to{transform:translate(-50%,-50%) rotate(360deg)}
  }
  @keyframes scanLine{
    0%{opacity:0;transform:translateX(-100%)}
    20%{opacity:1}
    80%{opacity:1}
    100%{opacity:0;transform:translateX(100%)}
  }

  /* ─── HERO GRID ──────────────────────────────────────────────── */
  .hero-grid{
    background-image:
      linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
    background-size:80px 80px;
    animation:gridDrift 20s linear infinite;
  }
  @keyframes gridDrift{
    from{background-position:0 0}
    to{background-position:80px 80px}
  }

  /* ─── WORK CARDS ─────────────────────────────────────────────── */
  .work-card{
    position:relative;overflow:hidden;cursor:pointer;
    transition:transform .55s cubic-bezier(.22,1,.36,1);
  }
  .work-card::before{
    content:"";position:absolute;inset:0;z-index:3;
    background:linear-gradient(135deg,rgba(93,221,162,.06) 0%,transparent 50%);
    opacity:0;transition:opacity .4s ease;
  }
  .work-card:hover{transform:scale(1.012)}
  .work-card:hover::before{opacity:1}
  .work-card:hover img{transform:scale(1.06)}
  .work-card:hover .case-reveal{opacity:1}
  .work-card .overlay{
    position:absolute;inset:0;
    background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.25) 50%,transparent 100%);
    transition:opacity .4s ease;
  }
  .work-card:hover .overlay{opacity:.85}
  .work-card .arrow{
    opacity:0;transition:opacity .35s ease,transform .35s cubic-bezier(.22,1,.36,1);
  }
  .work-card:hover .arrow{opacity:1;transform:translate(3px,-3px)}
  /* Linha de borda que aparece no hover */
  .work-card::after{
    content:"";position:absolute;bottom:0;left:0;width:0;height:2px;
    background:linear-gradient(90deg,#5ddda2,transparent);
    z-index:4;transition:width .5s cubic-bezier(.22,1,.36,1);
  }
  .work-card:hover::after{width:100%}

  /* ─── PARTNER CARDS ──────────────────────────────────────────── */
  .partner-card{
    position:relative;overflow:hidden;cursor:pointer;
    transition:transform .55s cubic-bezier(.22,1,.36,1);
  }
  .partner-card:hover{transform:translateY(-6px)}
  .partner-card:hover img{filter:grayscale(0%) contrast(1.05) !important}
  /* Shimmer scan no hover */
  .partner-card .card-inner::before{
    content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent);
    transition:left .7s ease;z-index:5;pointer-events:none;
  }
  .partner-card:hover .card-inner::before{left:150%}
  /* Borda verde que surge no hover */
  .partner-card .card-inner{
    position:relative;
    border:1px solid rgba(255,255,255,.0);
    transition:border-color .4s ease;
    border-radius:.25rem;overflow:hidden;
  }
  .partner-card:hover .card-inner{border-color:rgba(93,221,162,.2)}
  /* Glow sob o card */
  .partner-card::after{
    content:"";position:absolute;bottom:-20px;left:10%;right:10%;height:40px;
    background:radial-gradient(ellipse,rgba(93,221,162,.15),transparent 70%);
    opacity:0;transition:opacity .5s ease;z-index:-1;
    filter:blur(12px);
  }
  .partner-card:hover::after{opacity:1}

  /* ─── SERVICE ITEMS ──────────────────────────────────────────── */
  .service-item{
    border-bottom:1px solid rgba(255,255,255,.06);
    transition:background .25s ease,padding-left .3s cubic-bezier(.22,1,.36,1);
    position:relative;overflow:hidden;
  }
  .service-item::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
    background:#5ddda2;transform:scaleY(0);transform-origin:bottom;
    transition:transform .35s cubic-bezier(.22,1,.36,1);
  }
  .service-item:hover{background:rgba(255,255,255,.02);padding-left:1.5rem}
  .service-item:hover::before{transform:scaleY(1)}
  .service-item .snum{
    font-family:'Gotham',sans-serif;font-size:clamp(3rem,5vw,4.5rem);
    font-weight:700;color:rgba(255,255,255,.04);line-height:1;
    transition:color .4s ease,transform .4s cubic-bezier(.22,1,.36,1);
  }
  .service-item:hover .snum{color:rgba(93,221,162,.12);transform:translateX(8px)}


  /* ─── LINE REVEAL (hero headlines) ──────────────────────────── */
  .line-reveal-wrap{
    overflow:hidden;
    display:block;
  }
  .line-reveal{
    display:block;
    transform:translateY(110%);
    opacity:0;
    transition:transform .85s cubic-bezier(.16,1,.3,1), opacity .4s ease;
  }
  .line-reveal.visible{
    transform:translateY(0);
    opacity:1;
  }
  /* stagger delays via nth-child on parent */
  .hero-headline .line-reveal-wrap:nth-child(1) .line-reveal{ transition-delay:.05s }
  .hero-headline .line-reveal-wrap:nth-child(2) .line-reveal{ transition-delay:.18s }
  .hero-headline .line-reveal-wrap:nth-child(3) .line-reveal{ transition-delay:.30s }
  .hero-headline .line-reveal-wrap:nth-child(4) .line-reveal{ transition-delay:.42s }
  .hero-headline .line-reveal-wrap:nth-child(5) .line-reveal{ transition-delay:.54s }

  /* eyebrow label reveal */
  .eyebrow-reveal{
    opacity:0;
    transform:translateY(12px);
    transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
    transition-delay:.0s;
  }
  .eyebrow-reveal.visible{ opacity:1; transform:translateY(0) }

  /* body text reveal — fade + slight rise */
  .body-reveal{
    opacity:0;
    transform:translateY(16px);
    transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
  }
  .body-reveal.visible{ opacity:1; transform:translateY(0) }

  /* ─── REVEAL ON SCROLL ───────────────────────────────────────── */
  .reveal{
    opacity:0;
    transform:translateY(36px);
    transition:opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1);
  }
  .reveal.visible{ opacity:1; transform:translateY(0) }

  /* reveal-split: slide in from left */
  .reveal-left{
    opacity:0; transform:translateX(-32px);
    transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
  }
  .reveal-left.visible{ opacity:1; transform:translateX(0) }

  /* reveal-scale: scale up from 96% */
  .reveal-scale{
    opacity:0; transform:scale(.96);
    transition:opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1);
  }
  .reveal-scale.visible{ opacity:1; transform:scale(1) }

  /* Staggered children — improved timing & easing */
  .reveal-group > *{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  }
  .reveal-group.visible > *:nth-child(1){ opacity:1;transform:none;transition-delay:.04s }
  .reveal-group.visible > *:nth-child(2){ opacity:1;transform:none;transition-delay:.13s }
  .reveal-group.visible > *:nth-child(3){ opacity:1;transform:none;transition-delay:.22s }
  .reveal-group.visible > *:nth-child(4){ opacity:1;transform:none;transition-delay:.31s }
  .reveal-group.visible > *:nth-child(5){ opacity:1;transform:none;transition-delay:.40s }
  .reveal-group.visible > *:nth-child(6){ opacity:1;transform:none;transition-delay:.49s }
  .reveal-group.visible > *:nth-child(7){ opacity:1;transform:none;transition-delay:.58s }
  .reveal-group.visible > *:nth-child(8){ opacity:1;transform:none;transition-delay:.67s }
  /* Garante visibilidade de itens alem do 8o (ex.: grade de Trabalhos com 12/pagina) */
  .reveal-group.visible > *{ opacity:1; transform:none; }

  /* stat cards: scale + fade */
  .stat-reveal{
    opacity:0; transform:translateY(20px) scale(.97);
    transition:opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1);
  }
  .stat-reveal.visible{ opacity:1; transform:translateY(0) scale(1) }

  /* divider line: grow from left */
  .line-grow{
    transform:scaleX(0); transform-origin:left;
    transition:transform 1s cubic-bezier(.16,1,.3,1);
    transition-delay:.2s;
  }
  .line-grow.visible{ transform:scaleX(1) }

  /* ─── SKILL / SECTION TAGS ───────────────────────────────────── */
  .skill-tag{
    background:#111;color:#555;
    font-family:'Articulate CF',sans-serif;font-size:.65rem;font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;
    border-radius:999px;border:1px solid #222;
    transition:background .25s,color .25s,border-color .25s;display:inline-block;
  }
  .skill-tag:hover{background:rgba(93,221,162,.08);color:#5ddda2;border-color:rgba(93,221,162,.3)}

  /* ─── GLASS CARD ─────────────────────────────────────────────── */
  .glass-card{
    background:rgba(10,10,10,.75);backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.06);
    transition:border-color .35s,transform .45s cubic-bezier(.22,1,.36,1);
  }
  .glass-card:hover{border-color:rgba(93,221,162,.2);transform:translateY(-4px)}

  /* ─── STAT COUNTER ───────────────────────────────────────────── */
  @keyframes countUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
  .stat-anim{animation:countUp .7s ease forwards}

  /* ─── PROOF HERO ─────────────────────────────────────────────── */
  @keyframes orbBreath{
    0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.7}
    50%{transform:translate(-50%,-50%) scale(1.15);opacity:1}
  }
  .proof-stat{transition:background .3s ease}
  .proof-stat:hover{background:#0d0d0d !important}

  /* ─── FILTER BUTTONS ─────────────────────────────────────────── */
  .filter-btn{
    font-family:'Articulate CF',sans-serif;font-weight:700;font-size:.7rem;
    letter-spacing:.18em;text-transform:uppercase;background:none;border:none;
    cursor:pointer;color:#444;padding:0;
    transition:color .25s ease;position:relative;
  }
  .filter-btn::after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:1px;background:#5ddda2;transition:width .3s ease}
  .filter-btn.active{color:#5ddda2}
  .filter-btn.active::after,.filter-btn:hover::after{width:100%}
  .filter-btn:hover{color:#f0f0f0}

  /* ─── MISC ───────────────────────────────────────────────────── */
  .tag{background:#1a1a1a;color:#666;font-family:'Articulate CF',sans-serif;font-size:.65rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid #222}
  .mobile-menu{display:none;position:fixed;inset:0;background:#1a1818;z-index:90;padding-top:7rem;flex-direction:column;align-items:center;gap:2rem}
  .mobile-menu.open{display:flex}
  .h-line{border-top:1px solid rgba(255,255,255,.06)}

  /* ─── SCROLLBAR ──────────────────────────────────────────────── */
  ::-webkit-scrollbar{width:3px}
  ::-webkit-scrollbar-track{background:#1a1818}
  ::-webkit-scrollbar-thumb{background:rgba(93,221,162,.3);border-radius:2px}
  ::-webkit-scrollbar-thumb:hover{background:rgba(93,221,162,.6)}

  /* ─── CTA BUTTON PULSE ───────────────────────────────────────── */
  @keyframes pulse-border{
    0%,100%{box-shadow:0 0 0 0 rgba(93,221,162,.3)}
    50%{box-shadow:0 0 0 8px rgba(93,221,162,0)}
  }
  .btn-pulse{animation:pulse-border 3s ease infinite}

  /* ─── MARQUEE PAUSE ──────────────────────────────────────────── */
  @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* ─── HERO GRID ──────────────────────────────────────────────── */
  @keyframes gridDrift{from{background-position:0 0}to{background-position:80px 80px}}

  @media(max-width:767px){
    /* ── Hero grid mobile: altura automática ── */
    .hero-grid{min-height:540px !important;height:auto !important}
    .case-slide{display:grid !important;grid-template-columns:1fr !important;grid-template-rows:260px auto !important;align-content:start !important}
    .case-slide:not(.active){display:none !important}
    
    /* Typography */
    .hero-h1{font-size:3rem !important;line-height:.95 !important}
    body{cursor:auto}
    #cursor{display:none}

    /* ── Hero case slider: mobile layout vertical ── */
    .case-panel-right{display:flex !important;flex-direction:column !important;justify-content:center !important;padding:1.5rem 1.25rem !important;min-height:240px !important;position:relative !important}
    .case-panel-left{width:100% !important;height:260px !important;min-height:260px !important;max-height:260px !important;position:relative !important}

    /* ── Hero bottom bar: compact padding ── */
    .case-nav-bar{padding-bottom:1.25rem !important}

    /* ── Quem somos: grid fixes ── */
    .quem-somos-section .md\:col-span-5,
    .quem-somos-section .md\:col-span-7{grid-column:span 12/span 12}

    /* ── Marquee logos: smaller (mas legíveis) ── */
    .marquee-logo-img{height:32px !important;max-width:110px !important}
    .marquee-logo-item{padding:0 14px !important}

    /* ── Footer CTA heading ── */
    footer h2{font-size:clamp(1.6rem,7vw,2.2rem) !important}
  }

  /* ── Nav em tablets (iPad, telas ~768–1099px) ──────────────────────
     O menu do topo troca de hambúrguer para os links horizontais em
     768px (breakpoint "md" do Tailwind), mas nessa faixa a logo + os 7
     itens + o botão Contato não cabem confortavelmente — "Faça Parte"
     quebra em duas linhas e a logo fica colada no "Home", parecendo
     distorcida. Estende o menu hambúrguer até 1099px; só acima disso
     tem espaço de verdade para o menu horizontal completo. */
  @media (min-width:768px) and (max-width:1099px) {
    #main-nav .md\:flex,
    #main-nav .md\:inline-block { display: none !important; }
    #main-nav #hamburger.md\:hidden { display: inline-block !important; }
  }

  /* Clamp transition for team photo */
  .team-card .team-photo{filter:grayscale(100%);transition:filter .6s ease}
  .team-card:hover .team-photo{filter:grayscale(0%)}

  /* ─── LINK/BUTTON HOVER: seta diagonal ──────────────────────── */
  .arrow-link{display:inline-flex;align-items:center;gap:.5rem;transition:gap .3s cubic-bezier(.22,1,.36,1),color .25s}
  .arrow-link .arrow-icon{transition:transform .35s cubic-bezier(.22,1,.36,1)}
  .arrow-link:hover .arrow-icon{transform:translate(3px,-3px)}
  .arrow-link:hover{gap:.75rem}

/* ══ CRITICAL LAYOUT FIX ══════════════════════════════════════════════════════
   Tailwind CDN applies classes async. These rules guarantee the layout renders
   correctly regardless of Tailwind timing.
   ══════════════════════════════════════════════════════════════════════════ */

/* Hero: needs explicit height so absolute children (case-slides) have reference */
.hero-grid {
  position: relative !important;
  height: 100vh !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  overflow: hidden !important;
}

/* Case slides fill the hero */
.hero-grid .case-slide {
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
  width: 100% !important;
}

/* Body and page wrapper */
body { min-height: 100vh !important; background: #1a1818 !important; }
.page-section { display: block !important; }

/* Critical Tailwind utilities used in layout */
.relative  { position: relative !important; }
.absolute  { position: absolute !important; }
.fixed     { position: fixed    !important; }
.inset-0   { inset: 0 !important; }
.overflow-hidden { overflow: hidden !important; }
.w-full    { width: 100% !important; }
.h-full    { height: 100% !important; }
.flex      { display: flex !important; }
.grid      { display: grid !important; }
.items-end     { align-items: flex-end !important; }
.items-center  { align-items: center !important; }
.items-start   { align-items: flex-start !important; }
.justify-between { justify-content: space-between !important; }
.justify-center  { justify-content: center !important; }
.flex-col  { flex-direction: column !important; }
.z-20 { z-index: 20 !important; }
.z-10 { z-index: 10 !important; }



/* ============================================================
   FIX RESPONSIVO MOBILE (adicionado) — corrige os vaos pretos
   e o hero de altura cheia no celular (<=767px).
   ============================================================ */
@media (max-width: 767px){
  /* Secoes deixam de forcar altura de tela cheia -> elimina blocos pretos vazios */
  section.min-h-screen,
  .min-h-screen{ min-height:auto !important; height:auto !important; }
  /* Hero: altura natural com um minimo confortavel */
  .hero-grid{ height:auto !important; min-height:540px !important; }
  /* Conteudo deixa de ficar colado ao rodape da secao */
  section.items-end{ align-items:stretch !important; }
}


/* ============================================================
   FIX RESPONSIVO MOBILE v2 (home) - carrossel + grade de cases
   ============================================================ */
@media (max-width: 767px){
  /* HERO/CARROSSEL: slide ativo sai do absolute e flui acima da
     barra de controles (corrige "VER CASE" sobreposto ao label) */
  section.min-h-screen.items-end{ min-height: auto !important; }
  .case-slide.active{ position: relative !important; inset: auto !important; }

  /* CASES EM DESTAQUE: 4 cards iguais em 2x2 (sem celula vazia) */
  .grid:has(> .work-card.md\:col-span-8){
    grid-template-columns: 1fr 1fr !important;
    gap: 2px !important;
  }
  .grid:has(> .work-card.md\:col-span-8) > .work-card{ grid-column: auto !important; }
  .grid:has(> .work-card.md\:col-span-8) > .md\:col-span-4{ display: contents !important; }
  .grid:has(> .work-card.md\:col-span-8) .work-card{
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    flex: none !important;
  }
}


/* ════════════════════════════════════════════════════════════
   PREMIUM PASS — profundidade, cards, tipografia, micro-interações
   ════════════════════════════════════════════════════════════ */

/* 1) PROFUNDIDADE & TEXTURA ───────────────────────────────── */
/* Vinheta sutil nas bordas (dá foco ao centro) */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9997;
  background:radial-gradient(ellipse 120% 120% at 50% 40%,transparent 60%,rgba(0,0,0,.55) 100%);
}
/* Grão/película sutil sobre tudo */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}
/* Hairline com gradiente para separadores de seção */
.border-t,.border-y{border-top-color:rgba(255,255,255,.08)}
.border-b,.border-y{border-bottom-color:rgba(255,255,255,.08)}

/* 2) CARDS DE TRABALHO ────────────────────────────────────── */
.work-card{transition:transform .55s cubic-bezier(.22,1,.36,1),box-shadow .55s cubic-bezier(.22,1,.36,1)}
.work-card img{
  filter:brightness(.82) saturate(.92) !important;
  transition:filter .6s ease, transform .9s cubic-bezier(.22,1,.36,1), opacity .6s ease !important;
}
.work-card:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 30px 60px -24px rgba(0,0,0,.75)}
.work-card:hover img{filter:brightness(1.06) saturate(1.12) !important;transform:scale(1.07);opacity:1 !important}

/* 3) TIPOGRAFIA & ESPAÇAMENTO ─────────────────────────────── */
/* Títulos de display um pouco mais justos */
.hero-headline,.case-headline,.partner-name{letter-spacing:-.035em}
/* Corpo de texto mais legível */
.font-body{line-height:1.7}
.prose-saving p{margin-bottom:1.25rem}
/* Eyebrows (rótulos verdes) com respiro */
.eyebrow-reveal,.eyebrow{letter-spacing:.28em}

/* 4) BOTÕES & MICRO-INTERAÇÕES ────────────────────────────── */
.ghost-border-green{transition:border-color .35s ease, box-shadow .35s ease, background-color .35s ease, color .35s ease}
.ghost-border-green:hover{
  border-color:rgba(93,221,162,.7);
  box-shadow:0 0 28px rgba(93,221,162,.22), inset 0 0 0 1px rgba(93,221,162,.15);
}
/* Skill tags / tags com leve realce no hover */
.skill-tag{transition:border-color .3s ease, color .3s ease, background-color .3s ease}
.skill-tag:hover{border-color:rgba(93,221,162,.45);color:#cfece0}

/* LENIS (CSS oficial — obrigatório p/ o scroll funcionar) ─── */
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* 5) ENTRADA COREOGRAFADA DO HEADER ───────────────────────── */
@keyframes navIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
html.has-js body:not(.site-entered) #main-nav .logo-img,
html.has-js body:not(.site-entered) #main-nav .nav-link,
html.has-js body:not(.site-entered) #main-nav .ghost-border-green,
html.has-js body:not(.site-entered) #main-nav #hamburger{opacity:0}
html.has-js body.site-entered #main-nav .logo-img{animation:navIn .6s cubic-bezier(.22,1,.36,1) .08s both}
html.has-js body.site-entered #main-nav .nav-link:nth-child(1){animation:navIn .55s cubic-bezier(.22,1,.36,1) .18s both}
html.has-js body.site-entered #main-nav .nav-link:nth-child(2){animation:navIn .55s cubic-bezier(.22,1,.36,1) .24s both}
html.has-js body.site-entered #main-nav .nav-link:nth-child(3){animation:navIn .55s cubic-bezier(.22,1,.36,1) .30s both}
html.has-js body.site-entered #main-nav .nav-link:nth-child(4){animation:navIn .55s cubic-bezier(.22,1,.36,1) .36s both}
html.has-js body.site-entered #main-nav .nav-link:nth-child(5){animation:navIn .55s cubic-bezier(.22,1,.36,1) .42s both}
html.has-js body.site-entered #main-nav .nav-link:nth-child(6){animation:navIn .55s cubic-bezier(.22,1,.36,1) .48s both}
html.has-js body.site-entered #main-nav .nav-link:nth-child(7){animation:navIn .55s cubic-bezier(.22,1,.36,1) .54s both}
html.has-js body.site-entered #main-nav .ghost-border-green{animation:navIn .55s cubic-bezier(.22,1,.36,1) .62s both}
html.has-js body.site-entered #main-nav #hamburger{animation:navIn .55s cubic-bezier(.22,1,.36,1) .35s both}
@media (prefers-reduced-motion: reduce){
  html.has-js body:not(.site-entered) #main-nav .logo-img,
  html.has-js body:not(.site-entered) #main-nav .nav-link,
  html.has-js body:not(.site-entered) #main-nav .ghost-border-green,
  html.has-js body:not(.site-entered) #main-nav #hamburger{opacity:1}
}

/* 6) MARQUEE: fade suave nas bordas laterais ──────────────── */
div:has(> .marquee-track){
  -webkit-mask-image:linear-gradient(90deg,transparent,#1a1818 8%,#1a1818 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#1a1818 8%,#1a1818 92%,transparent);
}

/* 7) Tilt 3D: snap-back suave quando o JS limpa o transform ─ */
.work-card{transform-style:preserve-3d}

/* ── GRID MOSAICO (página Trabalhos) ──────────────────────── */
.cases-mosaic{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-auto-rows:44vw;
  gap:.5rem;
  grid-auto-flow:dense;
}
.cases-mosaic .mo-item{position:relative;overflow:hidden;border-radius:.3rem;display:block}
/* Altura da linha em vw (não px) para a célula 1x1 ficar quadrada em
   qualquer largura de tela — com px ela virava um retângulo horizontal. */
@media (min-width:768px){
  .cases-mosaic{
    grid-template-columns:repeat(3,1fr);
    grid-auto-rows:31vw;
    gap:.65rem;
  }
  .cases-mosaic .mo-wide{grid-column:span 2}
  .cases-mosaic .mo-tall{grid-row:span 2}
  .cases-mosaic .mo-big{grid-column:span 2;grid-row:span 2}
}
@media (min-width:1280px){
  .cases-mosaic{
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:23vw;
  }
}


/* ════════════════════════════════════════════════════════════
   AJUSTES MOBILE (pacote responsivo) — telas <= 767px
   ════════════════════════════════════════════════════════════ */
@media (max-width: 767px){
  /* Espaçamento vertical das seções mais enxuto no celular */
  .py-32{padding-top:4rem !important;padding-bottom:4rem !important}
  .py-28{padding-top:3.5rem !important;padding-bottom:3.5rem !important}
  .md\:py-36{padding-top:3.5rem !important;padding-bottom:3.5rem !important}
  .py-24{padding-top:3rem !important;padding-bottom:3rem !important}
  .py-20{padding-top:2.5rem !important;padding-bottom:2.5rem !important}
  /* Topo de páginas internas: encosta menos no nav fixo, sem exagero */
  .pt-32{padding-top:6rem !important}
  .pt-40{padding-top:6rem !important}

  /* Margens grandes entre blocos reduzidas */
  .mb-24{margin-bottom:3rem !important}
  .mt-24{margin-top:3rem !important}
  .mb-20{margin-bottom:2.5rem !important}
  .mb-16{margin-bottom:2rem !important}

  /* Seções de vídeo (home/audiovisual): respiro confortável */
  #vid-main, #av-main{border-radius:.25rem}

  /* Evita qualquer vazamento horizontal */
  html, body{max-width:100%;overflow-x:hidden}
}