/* === tailwind.css === */ *,: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.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;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;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}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;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-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color: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{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.pointer-events-none{pointer-events:none}.\!visible{visibility:visible!important}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.inset-y-0{top:0;bottom:0}.left-0{left:0}.right-\[clamp\(1\.5rem\2c 4vw\2c 3rem\)\]{right:clamp(1.5rem,4vw,3rem)}.top-0{top:0}.top-\[clamp\(1\.5rem\2c 4vh\2c 3rem\)\]{top:clamp(1.5rem,4vh,3rem)}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.-ml-\[1px\]{margin-left:-1px}.mb-1{margin-bottom:.25rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.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}.ml-auto{margin-left:auto}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-2{height:.5rem}.h-7{height:1.75rem}.h-full{height:100%}.h-px{height:1px}.min-h-\[100dvh\]{min-height:100dvh}.min-h-screen{min-height:100vh}.w-1\.5{width:.375rem}.w-1\/2{width:50%}.w-10{width:2.5rem}.w-12{width:3rem}.w-2{width:.5rem}.w-8{width:2rem}.w-\[1px\]{width:1px}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-6xl{max-width:72rem}.max-w-7xl{max-width:80rem}.max-w-\[1500px\]{max-width:1500px}.max-w-full{max-width:100%}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}.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))}@keyframes ping{75%,to{transform:scale(2);opacity:0}}.animate-ping{animation:ping 1s cubic-bezier(0,0,.2,1) infinite}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-grab{cursor:grab}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.resize{resize:both}.snap-x{scroll-snap-type:x var(--tw-scroll-snap-strictness)}.snap-mandatory{--tw-scroll-snap-strictness:mandatory}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-10{gap:2.5rem}.gap-12{gap:3rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.scroll-smooth{scroll-behavior:smooth}.rounded-full{border-radius:9999px}.rounded-sm{border-radius:.125rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-l-0{border-left-width:0}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-\[\#8D7A65\]\/40{border-color:hsla(32,17%,47%,.4)}.border-\[\#B8A38E\]{--tw-border-opacity:1;border-color:rgb(184 163 142/var(--tw-border-opacity,1))}.border-\[var\(--border-color\)\]{border-color:var(--border-color)}.bg-\[\#2C2C2C\]{--tw-bg-opacity:1;background-color:rgb(44 44 44/var(--tw-bg-opacity,1))}.bg-\[\#B8A38E\]{--tw-bg-opacity:1;background-color:rgb(184 163 142/var(--tw-bg-opacity,1))}.bg-\[var\(--bg-abismo\)\]{background-color:var(--bg-abismo)}.bg-\[var\(--bg-alt\)\]{background-color:var(--bg-alt)}.bg-\[var\(--bg-color\)\]{background-color:var(--bg-color)}.bg-\[var\(--text-color\)\]{background-color:var(--text-color)}.p-4{padding:1rem}.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-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.pb-0{padding-bottom:0}.pb-4{padding-bottom:1rem}.text-center{text-align:center}.text-right{text-align:right}.font-serif{font-family:ui-serif,Georgia,Cambria,Times New Roman,Times,serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[8px\]{font-size:8px}.text-\[9px\]{font-size:9px}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-light{font-weight:300}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.normal-case{text-transform:none}.italic{font-style:italic}.leading-\[1\.15\]{line-height:1.15}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-\[0\.14em\]{letter-spacing:.14em}.tracking-\[0\.18em\]{letter-spacing:.18em}.tracking-\[0\.25em\]{letter-spacing:.25em}.tracking-\[0\.28em\]{letter-spacing:.28em}.tracking-\[0\.2em\]{letter-spacing:.2em}.tracking-\[0\.3em\]{letter-spacing:.3em}.tracking-tight{letter-spacing:-.025em}.tracking-widest{letter-spacing:.1em}.text-\[\#111\]{--tw-text-opacity:1;color:rgb(17 17 17/var(--tw-text-opacity,1))}.text-\[\#1C1C1A\]{--tw-text-opacity:1;color:rgb(28 28 26/var(--tw-text-opacity,1))}.text-\[\#4A3F35\]{--tw-text-opacity:1;color:rgb(74 63 53/var(--tw-text-opacity,1))}.text-\[\#B8A38E\]{--tw-text-opacity:1;color:rgb(184 163 142/var(--tw-text-opacity,1))}.text-\[\#E8D5C4\]{--tw-text-opacity:1;color:rgb(232 213 196/var(--tw-text-opacity,1))}.text-\[var\(--text-color\)\]{color:var(--text-color)}.text-\[var\(--text-muted\)\]{color:var(--text-muted)}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity,1))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-20{opacity:.2}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-80{opacity:.8}.opacity-90{opacity:.9}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-2xl,.shadow-\[0_0_10px_rgba\(184\2c 163\2c 142\2c 0\.8\)\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_0_10px_rgba\(184\2c 163\2c 142\2c 0\.8\)\]{--tw-shadow:0 0 10px hsla(30,23%,64%,.8);--tw-shadow-colored:0 0 10px var(--tw-shadow-color)}.shadow-\[0_0_30px_rgba\(184\2c 163\2c 142\2c 0\.35\)\]{--tw-shadow:0 0 30px hsla(30,23%,64%,.35);--tw-shadow-colored:0 0 30px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_8px_30px_rgba\(184\2c 163\2c 142\2c 0\.35\)\]{--tw-shadow:0 8px 30px hsla(30,23%,64%,.35);--tw-shadow-colored:0 8px 30px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[5px_0_20px_rgba\(0\2c 0\2c 0\2c 0\.45\)\]{--tw-shadow:5px 0 20px rgba(0,0,0,.45);--tw-shadow-colored:5px 0 20px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[inset_0_0_10px_rgba\(0\2c 0\2c 0\2c 0\.05\)\]{--tw-shadow:inset 0 0 10px rgba(0,0,0,.05);--tw-shadow-colored:inset 0 0 10px var(--tw-shadow-color)}.shadow-\[inset_0_0_10px_rgba\(0\2c 0\2c 0\2c 0\.05\)\],.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-\[\#3D3228\]\/20{--tw-ring-color:rgba(61,50,40,.2)}.blur{--tw-blur:blur(8px)}.blur,.drop-shadow-lg{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)}.drop-shadow-lg{--tw-drop-shadow:drop-shadow(0 10px 8px rgba(0,0,0,.04)) drop-shadow(0 4px 3px rgba(0,0,0,.1))}.drop-shadow-md{--tw-drop-shadow:drop-shadow(0 4px 3px rgba(0,0,0,.07)) drop-shadow(0 2px 2px rgba(0,0,0,.06))}.drop-shadow-md,.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)}.backdrop-blur-\[10px\]{--tw-backdrop-blur:blur(10px)}.backdrop-blur-\[10px\],.backdrop-blur-md{backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px)}.backdrop-filter{backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-1000{transition-duration:1s}.hover\:bg-\[\#B8A38E\]:hover{--tw-bg-opacity:1;background-color:rgb(184 163 142/var(--tw-bg-opacity,1))}.hover\:bg-\[var\(--cursor-focus\)\]:hover{background-color:var(--cursor-focus)}.hover\:text-\[\#F5F5F3\]:hover{--tw-text-opacity:1;color:rgb(245 245 243/var(--tw-text-opacity,1))}.hover\:opacity-80:hover{opacity:.8}@media (min-width:640px){.sm\:col-span-2{grid-column:span 2/span 2}.sm\:w-auto{width:auto}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:gap-4{gap:1rem}.sm\:border-l{border-left-width:1px}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-4{padding-top:1rem;padding-bottom:1rem}.sm\:pl-8{padding-left:2rem}.sm\:text-left{text-align:left}.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}}@media (min-width:768px){.md\:mx-0{margin-left:0;margin-right:0}.md\:mb-10{margin-bottom:2.5rem}.md\:mb-16{margin-bottom:4rem}.md\:mb-3{margin-bottom:.75rem}.md\:mb-4{margin-bottom:1rem}.md\:mb-6{margin-bottom:1.5rem}.md\:mb-8{margin-bottom:2rem}.md\:mt-6{margin-top:1.5rem}.md\:flex{display:flex}.md\:h-1\.5{height:.375rem}.md\:h-10{height:2.5rem}.md\:h-12{height:3rem}.md\:h-8{height:2rem}.md\:w-1\.5{width:.375rem}.md\:w-1\/2{width:50%}.md\:w-10{width:2.5rem}.md\:w-12{width:3rem}.md\:w-6{width:1.5rem}.md\:w-8{width:2rem}.md\:w-auto{width:auto}.md\:flex-row{flex-direction:row}.md\:flex-col{flex-direction:column}.md\:items-end{align-items:flex-end}.md\:justify-end{justify-content:flex-end}.md\:gap-6{gap:1.5rem}.md\:gap-8{gap:2rem}.md\:self-start{align-self:flex-start}.md\:p-16{padding:4rem}.md\:px-10{padding-left:2.5rem;padding-right:2.5rem}.md\:px-12{padding-left:3rem;padding-right:3rem}.md\:px-5{padding-left:1.25rem;padding-right:1.25rem}.md\:py-16{padding-top:4rem;padding-bottom:4rem}.md\:py-20{padding-top:5rem;padding-bottom:5rem}.md\:py-28{padding-top:7rem;padding-bottom:7rem}.md\:py-32{padding-top:8rem;padding-bottom:8rem}.md\:py-5{padding-top:1.25rem;padding-bottom:1.25rem}.md\:py-6{padding-top:1.5rem;padding-bottom:1.5rem}.md\:text-left{text-align:left}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-\[10px\]{font-size:10px}.md\:text-\[13px\]{font-size:13px}.md\:text-\[9px\]{font-size:9px}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-sm{font-size:.875rem;line-height:1.25rem}.md\:text-xs{font-size:.75rem;line-height:1rem}}@media (min-width:1024px){.lg\:col-span-1{grid-column:span 1/span 1}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:gap-12{gap:3rem}.lg\:text-4xl{font-size:2.25rem;line-height:2.5rem}.lg\:text-5xl{font-size:3rem;line-height:1}.lg\:text-\[2\.35rem\]{font-size:2.35rem}}@media (min-width:1280px){.xl\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.xl\:text-\[2\.65rem\]{font-size:2.65rem}}@media (min-width:1536px){.\32xl\:text-\[2\.85rem\]{font-size:2.85rem}} /* === glid-core.css === */ :root { /* Visão: Cashmere (Light/Gold) */ --bg-color: #FAFAF8; --bg-alt: #F2EFEA; /* Fundo alternativo para alívio cognitivo */ --bg-abismo: #EBE7E1; /* Fundo terroso leve para o Abismo */ /* Banner Ticker com a exata cor do Preloader (Gradiente de Ouro Cashmere) */ --marquee-bg: linear-gradient(90deg, var(--radial-1) 0%, var(--radial-2) 50%, var(--radial-3) 100%); --marquee-text: #2C2C2C; /* Texto escuro contrastante no banner */ --text-color: #1C1C1A; --border-color: rgba(28, 28, 26, 0.16); --radial-1: #E8D5C4; --radial-2: #B8A38E; --radial-3: #8D7A65; --lantern-glow: rgba(232, 213, 196, 0.4); --logo-shimmer: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.6) 50%, transparent 80%); --shadow-rgb: 0, 0, 0; --stitch-glow: #F5F5F3; --btn-glass: rgba(245, 245, 243, 0.05); --btn-hover-bg: rgba(44, 44, 44, 0.08); --cursor-focus: rgba(44, 44, 44, 0.04); --gold-accent: #9A7858; --grid-line: rgba(154, 120, 88, 0.14); --gold-gradient: linear-gradient(135deg, #C4A882 0%, #9A7858 48%, #6E5438 100%); /* Sistema de Elevação de Cartões (Tons Pastéis Claros para Cashmere) */ --card-0-bg: #F5F3F0; /* Osso */ --card-1-bg: #EFECE7; /* Areia */ --card-2-bg: #E8E4DD; /* Argila clara */ --card-3-bg: #DFDAD2; /* Taupe suave */ --card-5-bg: #D5CFC6; /* Cinza quente pastel */ --mouse-x: 50%; --mouse-y: 50%; --parallax-x: 0px; --parallax-y: 0px; --shadow-x: 0px; --shadow-y: 0px; --tilt-x: 0deg; --tilt-y: 0deg; } [data-theme="obsidian"] { /* Visão: Obsidian (Dark/Chrome) */ --bg-color: #050505; --bg-alt: #0A0A0A; /* Quebra o preto absoluto */ --bg-abismo: #0F0F0F; /* Elevação escura */ /* Banner Ticker com a exata cor do Preloader Escuro (Gradiente Obsidian) */ --marquee-bg: linear-gradient(90deg, var(--radial-1) 0%, var(--radial-2) 50%, var(--radial-3) 100%); --marquee-text: var(--gold-accent); /* Texto dourado no banner escuro */ --text-color: #F4F2EE; --border-color: rgba(244, 242, 238, 0.14); --radial-1: #1a1a1a; --radial-2: #0a0a0a; --radial-3: #000000; --lantern-glow: rgba(255, 255, 255, 0.05); --logo-shimmer: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.8) 50%, transparent 80%); --shadow-rgb: 255, 255, 255; --stitch-glow: #F8F9FA; --btn-glass: rgba(255, 255, 255, 0.02); --btn-hover-bg: rgba(255, 255, 255, 0.08); --cursor-focus: rgba(255, 255, 255, 0.05); --gold-accent: #E8D5C4; --grid-line: rgba(232, 213, 196, 0.06); --gold-gradient: linear-gradient(135deg, #E8D5C4 0%, #B8A38E 50%, #8D7A65 100%); /* Elevação Escura — contraste legível contra o fundo */ --card-0-bg: #121212; --card-1-bg: #151515; --card-2-bg: #181818; --card-3-bg: #1C1C1C; --card-5-bg: #202020; } * { transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease; -webkit-tap-highlight-color: transparent; } body { margin: 0; overflow: hidden; background-color: var(--bg-color); font-family: var(--font-body, 'DM Sans', system-ui, sans-serif); } #preloader, .logo-container, .logo-shimmer, .monogram-pattern, .lantern-glow { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .elegant-scrollbar { overflow-x: auto; padding-bottom: 1.5rem; } .elegant-scrollbar::-webkit-scrollbar { height: 3px; } .elegant-scrollbar::-webkit-scrollbar-track { background: var(--grid-line); border-radius: 4px; } .elegant-scrollbar::-webkit-scrollbar-thumb { background: var(--gold-accent); border-radius: 4px; } @media (min-width: 768px) { .elegant-scrollbar::-webkit-scrollbar { height: 4px; } } .paper-grain { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0; background: radial-gradient(ellipse 85% 55% at 12% 18%, rgba(232, 213, 196, 0.09), transparent 58%), radial-gradient(ellipse 70% 45% at 88% 82%, rgba(184, 163, 142, 0.07), transparent 55%), radial-gradient(ellipse 50% 35% at 50% 50%, rgba(245, 245, 243, 0.04), transparent 70%); transition: opacity 2s ease-in-out; } .paper-grain.active { opacity: 1; } [data-theme="obsidian"] .paper-grain.active { background: radial-gradient(ellipse 85% 55% at 12% 18%, rgba(232, 213, 196, 0.06), transparent 58%), radial-gradient(ellipse 70% 45% at 88% 82%, rgba(184, 163, 142, 0.05), transparent 55%), radial-gradient(ellipse 50% 35% at 50% 50%, rgba(255, 255, 255, 0.02), transparent 70%); } /* DEGRADAÇÃO GRACIOSA P/ LEGACY */ .legacy-mode .reveal-on-scroll { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } .legacy-mode .backdrop-blur-[10px], .legacy-mode .backdrop-blur-sm { backdrop-filter: none !important; background-color: var(--bg-color) !important; } .legacy-mode .mix-blend-mode { mix-blend-mode: normal !important; opacity: 0.05 !important; } .legacy-mode .custom-cursor { display: none !important; } .legacy-mode * { animation-play-state: paused !important; } .legacy-mode .hero-aura, .legacy-mode .lantern-glow, .legacy-mode .logo-shimmer { display: none !important; animation: none !important; } .legacy-mode .logo-container { filter: none !important; transform: none !important; } .legacy-mode #acervo-slider, .legacy-mode #pricing-slider { display: block !important; white-space: nowrap !important; } .legacy-mode .drag-item { display: inline-block !important; vertical-align: top; white-space: normal; min-width: 80vw; margin-right: 20px; flex: none !important; } .legacy-mode .portfolio-video { display: none !important; } .legacy-mode .marquee-content { animation: none !important; flex-wrap: wrap; justify-content: center; width: 100%; gap: 2rem; padding: 2rem 0; } /* ========================================= 1. PRELOADER / FRONTIER ========================================= */ #preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), var(--radial-1) 0%, var(--radial-2) 35%, var(--radial-3) 100%); display: flex; justify-content: center; align-items: center; z-index: 9999; overflow: hidden; cursor: pointer; transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.85, 0, 0.15, 1), background 0.5s ease; will-change: transform, opacity; } .theme-toggle-btn { color: var(--text-color); font-size: 10px; text-transform: uppercase; letter-spacing: 0.3em; cursor: pointer; opacity: 0.72; transition: opacity 0.3s, letter-spacing 0.3s; display: flex; align-items: center; gap: 8px; } .theme-toggle-btn:hover { opacity: 1; letter-spacing: 0.4em; } .theme-indicator { position: relative; width: 6px; height: 6px; border-radius: 50%; background-color: var(--text-color); transition: transform 0.3s; } .theme-indicator::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; border: 1px solid var(--text-color); opacity: 0; } .pulse-active .theme-indicator::after { animation: ringPulse 2s infinite ease-out; } @keyframes ringPulse { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(3.5); opacity: 0; } } .monogram-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .monogram-pattern { position: absolute; width: 300%; height: 300%; top: -100%; left: -100%; background-image: url('https://glid.carrd.co/assets/images/image03.png?v=951bca55'); background-size: 90px; background-repeat: repeat; transform: rotate(-45deg) translate(var(--parallax-x), var(--parallax-y)); transition: transform 0.2s ease-out; will-change: transform; } [data-theme="obsidian"] .monogram-pattern { mix-blend-mode: screen; filter: grayscale(100%) invert(1); } .base-mono { opacity: 0.04; } .reveal-mono { opacity: 0.20; z-index: 2; -webkit-mask-image: radial-gradient(1200px circle at var(--mouse-x) var(--mouse-y), black 10%, transparent 65%); mask-image: radial-gradient(1200px circle at var(--mouse-x) var(--mouse-y), black 10%, transparent 65%); } .lantern-glow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(1000px circle at var(--mouse-x) var(--mouse-y), var(--lantern-glow), transparent 60%); pointer-events: none; z-index: 1; will-change: background; } .logo-container { position: relative; width: clamp(240px, 50vw, 360px); margin-bottom: 1.25rem; z-index: 10; filter: drop-shadow(var(--shadow-x) var(--shadow-y) 25px rgba(var(--shadow-rgb), 0.12)); transform: perspective(1000px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x)); transition: filter 0.1s ease-out, transform 0.1s ease-out; will-change: filter, transform; transform-style: preserve-3d; } .logo-base { width: 100%; height: auto; display: block; } .logo-shimmer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--logo-shimmer); background-size: 200% 100%; -webkit-mask-image: url('https://glid.carrd.co/assets/images/image03.png?v=951bca55'); mask-image: url('https://glid.carrd.co/assets/images/image03.png?v=951bca55'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; animation: metallicSweep 6s infinite ease-in-out; } @keyframes metallicSweep { 0% { background-position: 200% 0; opacity: 0; } 10% { opacity: 1; } 35% { background-position: -200% 0; opacity: 1; } 50%, 100% { background-position: -200% 0; opacity: 0; } } .mag-wrap { padding: 16px 30px 8px; z-index: 20; } .preloader-stack { min-height: auto; justify-content: center; padding: 1.5rem 1rem; box-sizing: border-box; } .preloader-welcome { margin-top: 0.75rem; margin-bottom: 0; padding: 0 1rem; line-height: 1.4; } .preloader-progress { width: min(12rem, 58vw); height: 2px; margin-top: 1.15rem; background: rgba(var(--shadow-rgb), 0.12); border-radius: 1px; overflow: hidden; z-index: 10; } .preloader-progress__bar { display: block; width: 0; height: 100%; background: var(--gold-accent-strong, var(--gold-accent)); border-radius: inherit; transition-property: width; transition-timing-function: linear; } .preloader-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .preloader-skip { margin-top: 1rem; z-index: 20; background: none; border: none; cursor: pointer; font-size: 9px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--text-color); opacity: 0.75; text-decoration: underline; text-decoration-color: rgba(var(--shadow-rgb), 0.35); text-underline-offset: 0.35em; padding: 0.5rem 1rem; min-height: 44px; transition: opacity 0.25s ease, color 0.25s ease; } .preloader-skip:hover { opacity: 0.92; color: var(--text-color); } [data-theme="obsidian"] .preloader-skip { color: var(--gold-accent); opacity: 0.78; text-decoration-color: rgba(232, 213, 196, 0.42); } [data-theme="obsidian"] .preloader-skip:hover { opacity: 0.95; color: #F4F2EE; } #preloader .identity-text, #preloader .preloader-welcome { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.1); } #preloader .identity-text, #preloader .preloader-skip, #preloader .theme-toggle-btn { font-family: var(--font-display, 'Cormorant Garamond', Georgia, 'Times New Roman', serif); } #preloader .identity-text, #preloader .preloader-welcome { font-size: 11px; letter-spacing: 0.26em; } #preloader .theme-toggle-btn { font-size: 9px; } @media (min-width: 768px) { #preloader .identity-text, #preloader .preloader-welcome { font-size: 12px; letter-spacing: 0.30em; } #preloader .theme-toggle-btn { font-size: 10px; } } [data-theme="obsidian"] #preloader .identity-text, [data-theme="obsidian"] #preloader .preloader-welcome { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45); } #preloader.is-soft-exit { transition-duration: 0.45s, 0.45s, 0.5s; } #preloader { cursor: pointer; } .elite-btn .elite-btn-loading { display: none; } .elite-btn.is-loading { pointer-events: none; letter-spacing: 0.45em !important; border-color: rgba(var(--shadow-rgb), 0.35); background-color: var(--btn-hover-bg); } .elite-btn.is-loading .elite-btn-label { display: none; } .elite-btn.is-loading .elite-btn-loading { display: inline; } .elite-btn { background: var(--btn-glass); border: 1px solid rgba(var(--shadow-rgb), 0.15); color: var(--text-color); padding: clamp(0.9rem, 2.5vh, 1.2rem) clamp(2rem, 6vw, 3.5rem); font-size: 12px; text-transform: uppercase; letter-spacing: 0.6em; font-weight: 600; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; backdrop-filter: blur(2px); cursor: pointer; } .elite-btn:hover { border-color: rgba(var(--shadow-rgb), 0.4); letter-spacing: 0.8em; transform: scale(1.02); background-color: var(--btn-hover-bg); backdrop-filter: blur(8px); } .identity-text { color: var(--text-color); opacity: 0.88; font-size: 12px; text-transform: uppercase; letter-spacing: 0.30em; font-weight: 300; font-family: var(--font-display, 'Cormorant Garamond', Georgia, 'Times New Roman', serif); text-align: center; margin-top: 0.75rem; margin-bottom: 1.25rem; padding: 0 1.5rem; z-index: 10; line-height: 1.6; } .dna-highlight { font-weight: 700; opacity: 1; letter-spacing: 0.38em; font-style: italic; color: var(--gold-accent-strong, #6E5438); } [data-theme="obsidian"] .dna-highlight { color: var(--gold-accent); } .stitch-container { position: relative; width: 120px; height: 1px; background-color: rgba(var(--shadow-rgb), 0.1); overflow: hidden; margin-bottom: 1.25rem; z-index: 10; } .stitch-line { position: absolute; width: 100%; height: 100%; background: var(--stitch-glow); box-shadow: 0 0 12px var(--stitch-glow); animation: stitchFlow 4s infinite ease-in-out; } @keyframes stitchFlow { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .custom-cursor { display: none !important; } @media (max-width: 768px) { #preloader { cursor: auto; } .mag-wrap { padding: 15px; } } .exit-ritual { transform: scale(1.1) !important; opacity: 0 !important; filter: blur(10px); pointer-events: none; } /* ========================================= 2. FUNIL MAIN CONTENT ========================================= */ #main-content { background-color: var(--bg-color); color: var(--text-color); position: relative; z-index: 10; } .arch-grid { background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px); background-size: 25vw 100%; } .hero-aura { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70vw; height: 70vw; max-width: 800px; max-height: 800px; background: var(--gold-accent); border-radius: 50%; filter: blur(150px); opacity: 0.08; pointer-events: none; z-index: 0; animation: pulseAura 8s ease-in-out infinite alternate; } @keyframes pulseAura { 0% { opacity: 0.05; transform: translate(-50%, -50%) scale(0.9); } 100% { opacity: 0.12; transform: translate(-50%, -50%) scale(1.1); } } .gold-gradient-text { background: var(--gold-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .gold-gradient-bg { background: var(--gold-gradient); } .haptic-press { box-shadow: inset 2px 2px 5px rgba(0,0,0,0.4), inset -1px -1px 3px rgba(255,255,255,0.1); transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s; } .haptic-press:hover { transform: scale(0.98); box-shadow: inset 4px 4px 8px rgba(0,0,0,0.6), inset -2px -2px 6px rgba(255,255,255,0.1); } .haptic-press:active { transform: scale(0.95); } .reveal-on-scroll { opacity: 0; transform: translateY(20px); filter: blur(3px); transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1), transform 800ms cubic-bezier(0.16, 1, 0.3, 1), filter 800ms ease; } .reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); } /* --- MARQUEE INFINITO (AUTHORITY TICKER) --- */ .marquee-container { width: 100%; overflow: hidden; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); background: var(--marquee-bg); position: relative; z-index: 10; transition: background 0.5s ease, border-color 0.5s ease; } .marquee-content { display: flex; width: max-content; animation: scrollMarquee var(--marquee-duration, 48s) linear infinite; } .marquee-content:hover { animation-play-state: paused; } .marquee-item { padding: 1.5rem 0; display: flex; align-items: center; gap: 2.5rem; margin-right: 2.5rem; } .marquee-brand { font-family: 'Didot', 'Bodoni MT', 'Cinzel', 'Playfair Display', serif; font-size: clamp(1rem, 2vw, 1.5rem); text-transform: uppercase; letter-spacing: 0.3em; color: var(--marquee-text); opacity: 0.7; transition: opacity 0.4s, color 0.4s; white-space: nowrap; cursor: default; } a.marquee-brand-link { cursor: pointer; text-decoration: none; color: inherit; display: inline-flex; align-items: center; gap: 0.35rem; } a.marquee-brand-link:hover, a.marquee-brand-link:focus-visible { opacity: 1; color: var(--gold-accent); outline: none; } .marquee-external { font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.55em; letter-spacing: 0; opacity: 0.65; transform: translateY(-0.1em); } a.marquee-brand-link:hover .marquee-external { opacity: 1; } .marquee-brand-block:hover .marquee-brand:not(.marquee-brand-link) { opacity: 1; color: var(--gold-accent); } .marquee-brand:hover { opacity: 1; color: var(--gold-accent); } .marquee-eyebrow { text-align: center; font-size: 8px; text-transform: uppercase; letter-spacing: 0.28em; opacity: 0.45; color: var(--marquee-text); padding: 0.65rem 1rem 0; margin: 0; } .marquee-brand-block { display: inline-flex; flex-direction: column; align-items: center; gap: 0.2rem; vertical-align: middle; } .marquee-brand-tag { font-family: 'DM Sans', system-ui, sans-serif; font-size: 7px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.55; color: var(--gold-accent); font-weight: 600; } .marquee-sep { font-size: 8px; color: #B8A38E; opacity: 0.7; align-self: center; } @keyframes scrollMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } #acervo-slider .card-img-container, .hero-showcase .card-img-container { overflow: hidden; } .portfolio-video { transition: opacity 0.5s ease; } .drag-slider { scroll-behavior: smooth; } .drag-slider.mouse-drag { cursor: grab; } .drag-slider.mouse-drag:active { cursor: grabbing; } .drag-item { scroll-snap-align: center; } .slider-container { cursor: ew-resize; touch-action: pan-y; } #ba-handle, #ba-handle .ba-handle-knob { touch-action: none; } .slider-handle { transform: translateX(-50%); } .process-line { position: absolute; left: 24px; top: 0; bottom: 0; width: 1px; background: var(--border-color); z-index: 0; } @media (min-width: 768px) { .process-line { left: 0; top: 24px; right: 0; bottom: auto; height: 1px; width: 100%; } } /* --- FAQ Accordion CSS --- */ .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.5s ease, opacity 0.5s ease, margin-top 0.5s ease; opacity: 0; } .faq-answer.open { max-height: min(120vh, 2400px); opacity: 1; margin-top: 1rem; } .faq-icon { transition: transform 0.4s ease; } .faq-icon.open { transform: rotate(45deg); color: var(--gold-accent); } .funnel-nav { display: none; gap: 1.5rem; align-items: center; } .funnel-nav a { font-size: 9px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--text-color); opacity: 0.55; transition: opacity 0.3s; } .funnel-nav a:hover { opacity: 1; } @media (min-width: 1024px) { .funnel-nav { display: flex; } } .scarcity-badge { display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; } #glid-sticky-wa { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 90; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity 0.4s ease, transform 0.4s ease; } #glid-sticky-wa.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); } @media (min-width: 768px) { #glid-sticky-wa { display: none; } } /* === responsive.css === */ /* ═══════════════════════════════════════════════════════════ RESPONSIVE — Mobile-first (90% tráfego mobile) Breakpoints: mobile <768 · tablet 768–1023 · desktop 1024+ ═══════════════════════════════════════════════════════════ */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body.glid-entry-locked { overflow: hidden; height: 100%; position: fixed; width: 100%; } img, video { max-width: 100%; height: auto; } /* Safe areas — notch / home indicator */ @supports (padding: env(safe-area-inset-bottom)) { #main-header { padding-top: max(0.75rem, env(safe-area-inset-top)); padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); } #preloader .theme-switcher { top: max(clamp(1.5rem, 4vh, 3rem), env(safe-area-inset-top)) !important; right: max(clamp(1.5rem, 4vw, 3rem), env(safe-area-inset-right)) !important; } #main-content { padding-bottom: max(5.5rem, calc(env(safe-area-inset-bottom) + 4.5rem)); } footer { padding-bottom: max(6rem, calc(env(safe-area-inset-bottom) + 5rem)); } #mobile-funnel-dock { padding-bottom: max(0.65rem, env(safe-area-inset-bottom)); padding-left: max(0.75rem, env(safe-area-inset-left)); padding-right: max(0.75rem, env(safe-area-inset-right)); } } /* ── Barra fixa mobile (conversão) ── */ #mobile-funnel-dock { position: fixed; bottom: 0; left: 0; right: 0; z-index: 85; display: flex; gap: 0.5rem; padding: 0.65rem 0.75rem; background: color-mix(in srgb, var(--bg-color) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--border-color); transform: translateY(110%); opacity: 0; pointer-events: none; transition: transform 0.4s ease, opacity 0.4s ease; } #mobile-funnel-dock.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; } #mobile-funnel-dock button { flex: 1; min-height: 48px; font-size: clamp(10px, 2vw, 12px); font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; border: 1px solid var(--border-color); color: var(--text-color); background: transparent; transition: background 0.2s, color 0.2s; } #mobile-funnel-dock button.dock-wa { flex: 1.35; border-color: transparent; background: var(--gold-gradient); color: #111; font-weight: 700; letter-spacing: 0.14em; } @media (min-width: 768px) { #mobile-funnel-dock { display: none !important; } #main-content { padding-bottom: 0; } footer { padding-bottom: 4rem; } } /* Sticky WA legado — oculto (dock substitui no mobile) */ @media (max-width: 767px) { #glid-sticky-wa { display: none !important; } } .mobile-nav-toggle { display: none; } /* ── Header mobile: dock WA + menu compacto ── */ @media (max-width: 767px) { #main-header .header-wa-cta, #main-header .header-actions { display: none; } #main-header { justify-content: space-between; flex-wrap: wrap; align-items: center; } #main-header.is-nav-open { z-index: 60; } .mobile-nav-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-height: 44px; min-width: 44px; padding: 0.45rem 0.65rem; margin-left: auto; border: 1px solid var(--border-color); border-radius: 2px; background: var(--bg-color); color: var(--text-color); font-family: inherit; font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; } .mobile-nav-toggle__icon { position: relative; width: 14px; height: 10px; } .mobile-nav-toggle__icon::before, .mobile-nav-toggle__icon::after, .mobile-nav-toggle__icon { display: block; } .mobile-nav-toggle__icon::before, .mobile-nav-toggle__icon::after { content: ''; position: absolute; left: 0; width: 14px; height: 1px; background: currentColor; transition: transform 0.2s ease, top 0.2s ease, opacity 0.2s ease; } .mobile-nav-toggle__icon::before { top: 1px; } .mobile-nav-toggle__icon::after { top: 8px; } .mobile-nav-toggle__icon { border-top: 1px solid currentColor; margin-top: 4px; } .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__icon { border-top-color: transparent; } .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__icon::before { top: 4px; transform: rotate(45deg); } .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__icon::after { top: 4px; transform: rotate(-45deg); } .mobile-nav-panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 1; flex-basis: 100%; display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0 clamp(1rem, 4vw, 1.5rem) 0.75rem; background: color-mix(in srgb, var(--bg-color) 97%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border-color); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.1); max-height: 0; overflow: hidden; opacity: 0; pointer-events: none; transition: max-height 0.28s ease, opacity 0.22s ease, padding 0.22s ease; } .mobile-nav-panel.is-open { max-height: min(72vh, 28rem); overflow-y: auto; opacity: 1; pointer-events: auto; padding-top: 0.35rem; } .mobile-nav-panel a { display: flex; align-items: center; min-height: 44px; padding: 0.35rem 0; border-bottom: 1px solid var(--border-color); color: var(--text-color); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; opacity: 0.88; } .mobile-nav-panel a:last-child { border-bottom: none; } body.mobile-nav-open { overflow: hidden; } body.mobile-nav-open::before { content: ''; position: fixed; inset: 0; z-index: 45; background: rgba(12, 10, 8, 0.35); pointer-events: auto; } body.dock-visible .conversion-band__wa, body.dock-visible .site-footer .footer-wa-btn, body.dock-visible .site-footer .footer-wa-link { display: none !important; } body.dock-visible .conversion-band__actions .conversion-band__plans { width: 100% !important; } #main-header { transition: transform 0.28s ease, opacity 0.28s ease; } #main-header.is-compact-hidden { transform: translateY(calc(-100% - env(safe-area-inset-top, 0px))); pointer-events: none; } body.mobile-nav-open #main-header.is-compact-hidden { transform: none; pointer-events: auto; } .mobile-nav-panel__theme { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 44px; margin-top: 0.35rem; padding-top: 0.5rem; border-top: 1px solid var(--border-color); } .mobile-nav-panel__theme-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); opacity: 0.75; } .mobile-nav-panel__theme .theme-toggle-btn { display: inline-flex !important; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.45rem 0.65rem; border: 1px solid var(--border-color); border-radius: 2px; background: var(--bg-color); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; } .zone-cta-final { min-height: 0 !important; padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; } } @media (min-width: 768px) { .mobile-nav-toggle, .mobile-nav-panel { display: none !important; } } /* ── Preloader mobile — conteúdo centralizado na viewport ── */ @media (max-width: 767px) { #preloader { align-items: center; justify-content: center; } .preloader-stack { justify-content: center; padding: 1rem; min-height: auto; } .elite-btn { letter-spacing: 0.32em; width: 100%; max-width: 20rem; min-height: 48px; } .elite-btn:hover { letter-spacing: 0.36em; } #preloader .identity-text, #preloader .preloader-welcome { letter-spacing: 0.24em; padding: 0 0.75rem; font-size: 11px; margin-top: 0.5rem; margin-bottom: 0; } .logo-container { width: clamp(180px, 58vw, 260px); margin-bottom: 0.85rem; } .stitch-container { margin-bottom: 0.85rem; } .mag-wrap { padding: 8px 12px 4px; } .reveal-mono { -webkit-mask-image: radial-gradient(500px circle at var(--mouse-x) var(--mouse-y), black 10%, transparent 65%); mask-image: radial-gradient(500px circle at var(--mouse-x) var(--mouse-y), black 10%, transparent 65%); } } /* ── Header mobile ── */ .header-cta-long { display: none; } .header-cta-short { display: inline; } @media (min-width: 480px) { .header-cta-long { display: inline; } .header-cta-short { display: none; } } @media (max-width: 767px) { #main-header button { min-height: 44px; padding-left: 0.75rem; padding-right: 0.75rem; } } /* ── Hero ── */ #hero-title { text-wrap: balance; overflow-wrap: break-word; } .hero-wa-short, .hero-plans-short { display: none; } .hero-cta-group { width: 100%; max-width: 22rem; } .hero-cta-group button { width: 100%; min-height: 48px; } @media (max-width: 767px) { section[aria-labelledby="hero-title"], section.hero-section { min-height: auto; justify-content: flex-start; align-items: stretch; padding-top: calc(var(--site-header-clearance, 6.25rem) + env(safe-area-inset-top, 0px)); padding-bottom: 2rem; overflow-x: clip; overflow-y: visible; } .hero-copy__eyebrow { display: block; visibility: visible; margin-bottom: 0.5rem; padding-top: 0; font-size: 10px; letter-spacing: 0.18em; line-height: 1.45; opacity: 1; color: #4A3F35; } .hero-copy__lead { padding-top: 0.15rem; } .hero-copy__title { margin-bottom: 0.5rem !important; line-height: 1.12; } .hero-grid { gap: 1.1rem; } .hero-showcase { --showcase-stage-min: clamp(12.5rem, 36vw, 16rem); --showcase-display-w: min(100%, clamp(14rem, 78vw, 19rem)); max-width: min(100%, clamp(14rem, 78vw, 19rem)); margin: 0.65rem auto 0; } .hero-showcase__inner { align-items: center; justify-content: center; } .hero-showcase__stage { width: 100%; } .hero-device-ref { margin-top: 1rem; font-size: 9px; } .hero-grid { gap: 1.5rem; } .hero-wa-long { display: none; } .hero-wa-short { display: inline; } .hero-plans-long { display: none; } .hero-plans-short { display: inline; } .hero-cta-group { max-width: 20rem; width: 100%; margin-top: 0.5rem; } .hero-copy__cta-primary, .hero-copy__cta-secondary { max-width: 20rem; } .hero-cta-group--primary { margin-top: 0.35rem; } #glid-trust-bar:not(.hero-trust-metrics) { gap: 0.85rem 1rem; margin-top: 1rem; } #glid-trust-bar.hero-trust-metrics { gap: 1.25rem 1.75rem; margin-top: 2.5rem; opacity: 0.65; } #glid-trust-bar.hero-trust-metrics .trust-stat { flex: 0 0 calc(50% - 0.5rem); min-width: 0; text-align: center; } #glid-trust-bar.hero-trust-metrics .trust-stat:last-child { flex: 0 0 100%; } .trust-stat { flex: 0 0 calc(50% - 0.5rem); min-width: 0; } .trust-stat-label { font-size: 8px; letter-spacing: 0.14em; opacity: 0.72; } } @media (min-width: 768px) { .hero-wa-short, .hero-plans-short { display: none; } } @media (min-width: 640px) { .hero-cta-group { max-width: none; width: auto; } .hero-cta-group button { width: auto; } } @media (max-width: 389px) { #hero-title { font-size: 1.28rem; letter-spacing: 0.01em; } section[aria-labelledby="hero-title"], section.hero-section { padding-top: calc(var(--site-header-clearance, 6rem) + env(safe-area-inset-top, 0px)); } .hero-copy__eyebrow { font-size: 10px; letter-spacing: 0.16em; margin-bottom: 0.4rem; } .hero-outcome { font-size: 11px; line-height: 1.38; } .hero-copy__cta-primary .hero-wa-cta { padding-top: 0.85rem; padding-bottom: 0.85rem; } .hero-showcase { --showcase-stage-min: clamp(12rem, 34vw, 15rem); } #main-header img { height: 1.625rem; } } @media (min-width: 390px) and (max-width: 767px) { #hero-title { font-size: 1.65rem; } } /* ── Grid de fundo ── */ @media (max-width: 767px) { .arch-grid { background-size: 50vw 100%; } } /* ── Marquee ── */ @media (max-width: 767px) { .marquee-item { gap: 1.25rem; margin-right: 1.25rem; padding: 0.85rem 0; } .marquee-brand { letter-spacing: 0.12em; font-size: 0.8rem; } } /* ── Portfolio · fila única em slides (carrossel) ── */ #acervo-slider { scroll-snap-type: x mandatory; } #acervo-slider .drag-item { flex: 0 0 min(82vw, 220px); scroll-snap-align: start; } @media (min-width: 640px) { #acervo-slider .drag-item { flex: 0 0 188px; } } @media (min-width: 1024px) { #acervo-slider .drag-item { flex: 0 0 200px; scroll-snap-align: center; } #acervo-slider .iphone-16-pro__frame { padding: 0.28rem; border-radius: 1.45rem; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28), 0 4px 10px rgba(0, 0, 0, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 0 0 1.5px rgba(0, 0, 0, 0.45); } #acervo-slider .iphone-16-pro__frame::before { height: 1.5rem; } #acervo-slider .iphone-16-pro__frame::after { height: 1rem; } #acervo-slider .iphone-16-pro__island { top: 0.52rem; height: 0.65rem; max-width: 2.5rem; } #acervo-slider .portfolio-phone-screen { border-radius: 1.25rem; } #acervo-slider .portfolio-phone.mb-4 { margin-bottom: 0; } #acervo-slider .portfolio-card-actions { margin-top: 0.85rem; } } @media (min-width: 1280px) { #acervo-slider .drag-item { flex: 0 0 212px; } } .portfolio-slider-shell { padding-bottom: 1.25rem; margin-bottom: 0.25rem; border-bottom: 1px solid var(--border-color); } /* ── Portfolio scroll bar (tablet+) ── */ .portfolio-scroll-bar { display: none; } @media (min-width: 640px) { .portfolio-scroll-bar { display: block; margin-top: 0.75rem; padding-bottom: 0.25rem; } .portfolio-scroll-bar.is-hidden { display: none; } .portfolio-scroll-track { position: relative; height: 8px; background: var(--grid-line, rgba(184, 163, 142, 0.18)); border-radius: 999px; cursor: pointer; } .portfolio-scroll-thumb { position: absolute; left: 0; top: 0; height: 100%; min-width: 4.5rem; background: linear-gradient(90deg, #9f8265, #b8a38e, #cba381); border-radius: 999px; cursor: grab; box-shadow: 0 0 12px rgba(184, 163, 142, 0.35); transition: filter 0.2s ease, box-shadow 0.2s ease; will-change: transform, width; } .portfolio-scroll-thumb:hover { filter: brightness(1.08); box-shadow: 0 0 16px rgba(184, 163, 142, 0.45); } .portfolio-scroll-thumb.is-dragging { cursor: grabbing; filter: brightness(1.12); } #portfolio .scroll-hint { opacity: 0.75; } } @media (min-width: 640px) and (max-width: 1023px) { .portfolio-scroll-track { height: 6px; } .portfolio-scroll-thumb { min-width: 3.5rem; } } /* Edge fade — indica conteúdo lateral (mobile) */ .portfolio-slider-shell { position: relative; } .portfolio-slider-shell::before, .portfolio-slider-shell::after { content: ''; position: absolute; top: 0; bottom: 2.5rem; width: clamp(1.25rem, 5vw, 2.5rem); pointer-events: none; z-index: 3; } .portfolio-slider-shell::before { left: 0; background: linear-gradient(to right, var(--bg-color) 15%, transparent); } .portfolio-slider-shell::after { right: 0; background: linear-gradient(to left, var(--bg-color) 15%, transparent); } @media (min-width: 640px) { .portfolio-slider-shell::before, .portfolio-slider-shell::after { opacity: 0.65; } } @media (min-width: 1024px) { .portfolio-slider-shell::before, .portfolio-slider-shell::after { display: none; } } .scroll-hint-desktop { display: none; } .portfolio-lead-desktop { display: none; } .planos-intro-desktop { display: none; } @media (min-width: 1024px) { .scroll-hint-mobile { display: none; } .scroll-hint-desktop { display: inline; } .portfolio-lead-mobile { display: none; } .portfolio-lead-desktop { display: inline; } .planos-intro-mobile { display: none; } .planos-intro-desktop { display: inline; } } /* ── Sliders horizontais (planos) ── */ .drag-slider { -webkit-overflow-scrolling: touch; scroll-padding-inline: 1.5rem; } #acervo-slider, #pricing-slider { scrollbar-width: none; } #acervo-slider::-webkit-scrollbar, #pricing-slider::-webkit-scrollbar { display: none; } #pricing-slider .drag-item { scroll-snap-align: center; flex: 0 0 min(88vw, 340px); } @media (min-width: 480px) and (max-width: 767px) { #pricing-slider .drag-item { flex: 0 0 82vw; } } @media (min-width: 768px) { #pricing-slider .drag-item { flex: 0 0 340px; } } @media (min-width: 1024px) { #pricing-slider .drag-item { flex: 0 0 300px; } } @media (min-width: 1536px) { #pricing-slider .drag-item { flex: 1 1 0; min-width: 220px; } } .scroll-hint { display: flex; align-items: center; gap: 0.5rem; animation: scrollHintPulse 2s ease-in-out infinite; } @media (max-width: 767px) { #portfolio .scroll-hint { width: 100%; justify-content: center; margin-top: 0.5rem; font-size: 10px; letter-spacing: 0.18em; } #portfolio h2 { max-width: 100%; } #acervo-slider { scroll-padding-inline: 1rem; } } @keyframes scrollHintPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } /* ── Portfolio touch ── */ @media (hover: none) and (pointer: coarse) { .portfolio-card .card-img-container > .absolute.inset-0.flex { opacity: 0.82 !important; pointer-events: none; } .portfolio-card .card-img-container > .absolute.inset-0.flex span { font-size: 9px; padding: 0.5rem 0.85rem; } } /* ── Before / After ── */ .ba-inner { width: 200%; min-width: 100%; } @media (min-width: 768px) { .ba-inner { width: 600px; } } @media (min-width: 1024px) { .ba-inner { width: 1152px; } } @media (max-width: 767px) { #ba-container { height: var(--ba-height-mobile, min(40dvh, 360px)); min-height: 220px; touch-action: pan-y; } #ba-handle, #ba-handle .ba-handle-knob { touch-action: none; } #ba-container .ba-panel--pro > div, #ba-before .ba-inner > div { max-width: 92%; } #ba-container .ba-panel__title { font-size: 0.7rem; margin-bottom: 0.4rem; } #ba-container .ba-panel__list { gap: 0.25rem; font-size: 10px; } #ba-container .ba-panel__list li:nth-child(n+4) { display: list-item; } #ba-container .ba-panel__foot { font-size: 10px; letter-spacing: 0.12em; padding-top: 0.45rem; line-height: 1.55; } #ba-container .ba-panel__badge { font-size: 10px; margin-bottom: 0.4rem; padding: 0.28rem 0.5rem; } .ba-handle-knob { width: 3rem; height: 3rem; } .ba-hint-full { display: none; } .ba-hint-mobile { display: inline; } } @media (min-width: 768px) { .ba-hint-mobile { display: none; } .ba-hint-full { display: inline; } } /* ── Pricing ── */ .scarcity-badge { max-width: 100%; flex-wrap: wrap; text-align: center; line-height: 1.55; padding-left: 0.75rem; padding-right: 0.75rem; } @media (max-width: 479px) { .scarcity-badge { font-size: 7px; gap: 0.4rem; letter-spacing: 0.12em !important; } } @media (min-width: 768px) and (max-width: 1535px) { #pricing-slider { display: grid; grid-template-columns: repeat(2, 1fr); overflow: visible; scroll-snap-type: none; } #pricing-slider .drag-item { flex: none; width: auto; min-width: 0; } } @media (min-width: 1024px) and (max-width: 1535px) { #pricing-slider { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { #pricing-slider { overflow: visible; scroll-snap-type: none; } } @media (max-width: 1535px) { .pricing-featured { transform: none !important; } } @media (min-width: 1536px) { #pricing-slider { display: grid; grid-template-columns: repeat(6, 1fr); } .pricing-featured { transform: scale(1.03); } } /* ── Vanguarda 2026 ── */ @media (max-width: 767px) { .vanguarda-visual { aspect-ratio: 1 / 1; max-height: 70vw; margin-left: auto; margin-right: auto; } } /* ── Processo ── */ @media (max-width: 767px) { #processo .grid > div { padding-left: 3.5rem; } } /* ── FAQ ── */ #audience, #portfolio, #planos-resumo, #entrega, #pricing, #depoimentos, #processo, #faq, #patamar-local { scroll-margin-top: calc(4.75rem + env(safe-area-inset-top, 0px)); } @media (max-width: 767px) { .faq-item { padding-top: 0.35rem; } .faq-item h4 { padding-right: 2rem; line-height: 1.5; letter-spacing: 0.05em; font-size: 10px; text-wrap: balance; } .faq-icon { flex-shrink: 0; min-width: 2rem; min-height: 2rem; display: flex; align-items: center; justify-content: center; } .faq-answer.open { max-height: min(120vh, 2400px); } .faq-answer p { font-size: 11px; line-height: 1.65; } } @media (max-width: 767px) { .pricing-teaser button { letter-spacing: 0.18em; } .pricing-teaser__cta { padding-left: 0.5rem; padding-right: 0.5rem; } .pricing-teaser .teaser-cta-long { display: none; } .pricing-teaser .teaser-cta-short { display: inline; } } @media (min-width: 768px) { .pricing-teaser .teaser-cta-short { display: none; } } .teaser-cta-short { display: none; } /* ── CTA final ── */ .cta-primary { max-width: calc(100% - 2.5rem); word-break: break-word; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; } @media (max-width: 479px) { .cta-primary { letter-spacing: 0.14em; font-size: 8px; padding: 1rem 1.25rem; } } /* ── Footer ── */ @media (max-width: 639px) { .site-footer .gold-gradient-text { letter-spacing: 0.12em; font-size: 1.25rem; } .site-footer .footer-seals { gap: 0.4rem; } .site-footer .footer-seal { font-size: 7px; padding: 0.4rem 0.55rem; white-space: normal; text-align: left; max-width: calc(50% - 0.25rem); flex: 1 1 calc(50% - 0.25rem); } } /* ── Touch targets ── */ @media (max-width: 767px) { #main-content { overflow-x: clip; max-width: 100%; } .haptic-target button, .elite-btn, .faq-item, #main-header button, .cta-primary, .pricing-teaser button, #acervo-slider .portfolio-card-btn, .portfolio-filter-chip, .pricing-teaser__chip, .planos-risk-link, .pricing-table-note-link, .site-footer .footer-wa-btn, #acervo-slider .portfolio-card__preview-zone { min-height: 44px; } .haptic-target button, .elite-btn, .faq-item, #main-header button, .cta-primary, .pricing-teaser button { font-size: clamp(10px, 2.4vw, 11px); } #acervo-slider .portfolio-card-btn { font-size: 10px; min-height: 44px; padding: 0.55rem 0.65rem; letter-spacing: 0.12em; } .portfolio-filter-chip { font-size: 10px; padding: 0.55rem 0.75rem; min-height: 44px; display: inline-flex; align-items: center; } .pricing-teaser__chip { min-height: 44px; min-width: 5.75rem; padding: 0.6rem 0.85rem; } .pricing-teaser__chip-name { font-size: clamp(10px, 2.2vw, 11px); } .planos-risk-link { padding: 0.35rem 0.15rem; min-height: 44px; display: inline-flex; align-items: center; } .pricing-table-note-link { padding: 0.35rem 0.25rem; min-height: 44px; display: inline-flex; align-items: center; } .site-footer .footer-wa-btn { font-size: 10px; min-height: 44px; padding: 0.55rem 0.85rem; } #acervo-slider .portfolio-card__preview-hint { font-size: 10px; } .plan-compare-scroll-hint { font-size: 10px; letter-spacing: 0.2em; } .testimonial-role, .testimonial-date { font-size: 10px; } .site-footer .footer-seal { font-size: 10px; } } /* ── Performance mobile: reveal sem blur (GPU) ── */ @media (max-width: 767px) { .reveal-on-scroll { transform: translateY(10px); filter: none; } .reveal-on-scroll.is-visible { transform: translateY(0); filter: none; } #mobile-funnel-dock.is-glow-pulse button.dock-wa { animation: none !important; } } /* ── Landscape mobile baixo ── */ @media (max-height: 500px) and (orientation: landscape) { #preloader .logo-container { width: clamp(120px, 28vw, 180px); margin-bottom: 0.5rem; } #preloader .identity-text, #preloader .stitch-container { display: none; } section.min-h-\[100dvh\], section.hero-section { min-height: auto; padding-top: 4.5rem; padding-bottom: 2.5rem; } } /* ── Desktop amplo ── */ @media (min-width: 1536px) { .arch-grid { background-size: 20vw 100%; } } /* === hero-showcase.css === */ /* ═══════════════════════════════════════════════════════════ HERO SHOWCASE — mockup Desktop (Studio Display) + Mobile (iPhone) Escala proporcional ao hero · coluna visual equilibrada ═══════════════════════════════════════════════════════════ */ .hero-grid { position: relative; z-index: 10; width: 100%; max-width: 80rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2rem; } .hero-copy { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; } .hero-copy__lead, .hero-copy__conv, .hero-copy__below { width: 100%; display: flex; flex-direction: column; align-items: center; } .hero-copy__foot--desktop { width: 100%; } .hero-copy__foot { display: flex; flex-direction: column; align-items: center; gap: 0.65rem; width: 100%; margin-top: 0; } /* ── Ancoragem de preço (logo abaixo dos CTAs) ── */ .hero-price-teaser--anchor { margin-top: 1.5rem; margin-left: auto; margin-right: auto; } /* ── Trust bar silenciosa (rodapé da coluna copy) ── */ #glid-trust-bar.hero-trust-metrics { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 2rem; width: 100%; margin-top: 3rem; opacity: 0.65; max-width: 100%; } #glid-trust-bar.hero-trust-metrics .trust-stat { text-align: center; min-width: 0; flex: 0 0 auto; } #glid-trust-bar.hero-trust-metrics .trust-stat-value { font-family: var(--font-body, system-ui, sans-serif); font-size: clamp(0.8125rem, 1.1vw, 0.9375rem); font-weight: 600; line-height: 1.25; background: none !important; -webkit-background-clip: unset !important; background-clip: unset !important; color: var(--text-color) !important; opacity: 0.88; } #glid-trust-bar.hero-trust-metrics .trust-stat-label { font-size: 9px !important; letter-spacing: 0.18em !important; opacity: 0.72 !important; margin-top: 0.25rem; color: var(--text-soft) !important; line-height: 1.35; } #glid-trust-bar.hero-trust-metrics .trust-stat-label .opacity-70 { opacity: 0.85 !important; font-size: 9px; } @media (max-width: 767px) { #glid-trust-bar.hero-trust-metrics { margin-top: 1.25rem; gap: 0.85rem 1rem; padding: 0.4rem 0; opacity: 0.95; } #glid-trust-bar.hero-trust-metrics .trust-stat-label { font-size: 9px !important; letter-spacing: 0.14em !important; opacity: 0.85 !important; } #glid-trust-bar.hero-trust-metrics .trust-stat-value { font-size: clamp(0.95rem, 2vw, 1rem); } } .hero-showcase { --showcase-display-w: min(100%, clamp(19rem, 88vw, 26rem)); --showcase-phone-w: clamp(8.5rem, 42vw, 10.5rem); --showcase-stage-min: clamp(19.55rem, 59.8vw, 25.3rem); --showcase-switch: 3rem; position: relative; width: 100%; max-width: var(--showcase-display-w); margin: 0 auto; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; } .hero-device-ref { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem 0.5rem; margin-top: 1.5rem; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-color); opacity: 0.58; line-height: 1.5; } .hero-device-ref__project { color: #B8A38E; opacity: 1; } .hero-device-ref__viewport { opacity: 0.72; } .hero-showcase__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; width: 100%; } .hero-showcase__stage { position: relative; flex: 1; min-width: 0; min-height: var(--showcase-stage-min); display: flex; align-items: center; justify-content: center; } .hero-showcase__panel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(8px) scale(0.98); transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.42s; pointer-events: none; } .hero-showcase__panel.is-active { position: relative; opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; } .hero-showcase__switcher { display: none; } .hero-showcase__switcher--manual { display: none !important; } @media (min-width: 768px) { .hero-showcase__switcher.hero-showcase__switcher--manual { display: flex !important; flex-direction: row; justify-content: center; align-items: stretch; gap: 0.55rem; margin-top: 1rem; width: 100%; } .hero-showcase__switch-label { font-size: 7px; letter-spacing: 0.14em; } } .hero-showcase__switch-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.32rem; width: var(--showcase-switch); min-height: var(--showcase-switch); padding: 0.45rem 0.35rem; border: 1px solid rgba(184, 163, 142, 0.2); border-radius: 0.55rem; background: rgba(12, 12, 12, 0.42); color: var(--text-color); opacity: 0.5; cursor: pointer; transition: border-color 0.25s, background 0.25s, opacity 0.25s, box-shadow 0.25s, transform 0.2s; } .hero-showcase__switch-btn:hover { opacity: 0.82; border-color: rgba(184, 163, 142, 0.42); } .hero-showcase__switch-btn.is-active { opacity: 1; border-color: rgba(184, 163, 142, 0.6); background: rgba(184, 163, 142, 0.09); box-shadow: 0 0 0 1px rgba(184, 163, 142, 0.1), 0 6px 18px rgba(0, 0, 0, 0.2); } .hero-showcase__switch-btn:active { transform: scale(0.97); } .hero-showcase__switch-btn:focus-visible { outline: 2px solid rgba(184, 163, 142, 0.75); outline-offset: 2px; opacity: 1; } .hero-showcase__switch-icon { width: 1.15rem; height: 1.15rem; color: #B8A38E; } .hero-showcase__switch-label { font-size: 5px; text-transform: uppercase; letter-spacing: 0.12em; line-height: 1.2; text-align: center; } /* ── Apple Studio Display (desktop preview) ── */ .hero-showcase .apple-display { width: 100%; max-width: var(--showcase-display-w); margin: 0 auto; } .hero-showcase .apple-display__housing { padding: 0.5rem 0.5rem 0.58rem; border-radius: 0.85rem; background: linear-gradient(158deg, #646466 0%, #3a3a3c 22%, #1c1c1e 55%, #2e2e30 88%, #525254 100%); border: 1px solid rgba(255, 255, 255, 0.13); box-shadow: 0 28px 56px rgba(0, 0, 0, 0.38), 0 10px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.11); } .hero-showcase .apple-display__screen { aspect-ratio: 16 / 10; border-radius: 0.45rem; overflow: hidden; background: #050505; } .hero-showcase .apple-display__screen img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .hero-showcase .apple-display__chin { display: flex; align-items: center; justify-content: center; height: 0.55rem; margin-top: 0.45rem; } .hero-showcase .apple-display__logo { display: block; width: 0.55rem; height: 0.68rem; opacity: 0.32; color: rgba(255, 255, 255, 0.9); } .hero-showcase .apple-display__neck { width: 0.46rem; height: clamp(2.5rem, 8vw, 3.1rem); margin: 0 auto; background: linear-gradient(90deg, #343436, #5a5a5c 48%, #343436); border-radius: 0 0 3px 3px; box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.06), inset -1px 0 0 rgba(0, 0, 0, 0.2); } .hero-showcase .apple-display__stand { width: 42%; height: 0.32rem; margin: 0 auto; border-radius: 0 0 6px 6px; background: linear-gradient(180deg, #4a4a4c 0%, #2a2a2c 100%); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24); } /* ── iPhone (mobile preview) — altura visual ≈ Studio Display ── */ .hero-showcase .portfolio-phone.iphone-16-pro { position: relative; width: calc(var(--showcase-phone-w) * 1.15); margin: 0 auto; } .hero-showcase .iphone-16-pro__frame { position: relative; padding: 0.45rem; border-radius: 2.25rem; background: linear-gradient(155deg, #5a5a5c 0%, #2a2a2c 18%, #141416 50%, #1e1e20 78%, #4a4a4c 100%); box-shadow: 0 22px 48px rgba(0, 0, 0, 0.36), 0 8px 18px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 0 0 2px rgba(0, 0, 0, 0.55); } .hero-showcase .iphone-16-pro__frame::before { content: ''; position: absolute; right: -0.14rem; top: 28%; width: 0.2rem; height: 3.5rem; border-radius: 0 2px 2px 0; background: linear-gradient(180deg, #3a3a3c, #1a1a1c); box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.08); z-index: 5; } .hero-showcase .iphone-16-pro__frame::after { content: ''; position: absolute; left: -0.14rem; top: 22%; width: 0.2rem; height: 2.15rem; border-radius: 2px 0 0 2px; background: linear-gradient(180deg, #3a3a3c, #1a1a1c); box-shadow: 1px 0 0 rgba(255, 255, 255, 0.06); z-index: 5; } .hero-showcase .iphone-16-pro__island { position: absolute; top: 0.85rem; left: 50%; transform: translateX(-50%); width: 28%; max-width: 4.5rem; height: 1.1rem; background: #000; border-radius: 999px; z-index: 35; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); } .hero-showcase .portfolio-phone-screen { position: relative; aspect-ratio: 9 / 19.5; width: 100%; border-radius: 1.85rem; overflow: hidden; background: #000; display: flex; align-items: center; justify-content: center; isolation: isolate; } .hero-showcase .portfolio-phone-screen::after { content: ''; position: absolute; bottom: 0.45rem; left: 50%; transform: translateX(-50%); width: 34%; max-width: 5.75rem; height: 0.26rem; background: rgba(255, 255, 255, 0.38); border-radius: 999px; z-index: 28; pointer-events: none; } .hero-showcase .card-img-container { overflow: hidden; } .hero-showcase .portfolio-phone-screen .card-img { position: static; flex: 0 0 auto; display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; object-position: center center; filter: none; } /* ── Mobile: progressive disclosure (promessa → CTA → mockup → resto) ── */ @media (max-width: 767px) { .hero-copy { display: contents; } .hero-copy__lead { order: 1; width: 100%; } .hero-copy__conv { display: contents; } .hero-copy__conv .hero-cta-group { display: contents; } .hero-copy__cta-primary { order: 2; width: 100%; max-width: 20rem; margin: 0.15rem auto 0; } .hero-showcase { order: 3; margin-top: 0.65rem; --showcase-stage-min: clamp(14rem, 42vw, 17rem); --showcase-phone-w: clamp(7.5rem, 38vw, 9.5rem); } .hero-copy__cta-secondary { order: 4; width: 100%; max-width: 20rem; margin: 0.85rem auto 0; } .hero-copy__below { order: 5; width: 100%; } .hero-copy__foot--desktop { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.85rem 1rem; margin-top: 1rem; } .hero-outcome--desktop { display: none; } .hero-price-teaser--anchor { margin-top: 0.75rem; } } /* ── Tablet+: split hero · mockup ocupa coluna inteira ── */ @media (min-width: 768px) { .hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); align-items: center; gap: 2rem 2.5rem; text-align: left; } .hero-copy { align-items: flex-start; text-align: left; } .hero-copy__lead, .hero-copy__conv, .hero-copy__below { align-items: flex-start; } .hero-copy__foot { align-items: flex-start; } .hero-price-teaser--anchor { margin-left: 0; margin-right: auto; } #glid-trust-bar.hero-trust-metrics { justify-content: flex-start; gap: 3rem; margin-top: 4rem; opacity: 0.7; } #glid-trust-bar.hero-trust-metrics .trust-stat { text-align: left; } .hero-device-ref { justify-content: flex-start; margin-top: 0.85rem; margin-bottom: 0; font-size: 9px; } .hero-showcase { --showcase-display-w: min(100%, clamp(20rem, 36vw, 28rem)); --showcase-phone-w: clamp(9.5rem, 13vw, 11.5rem); --showcase-stage-min: clamp(21rem, 46vh, 28rem); --showcase-switch: 3.15rem; max-width: 100%; margin: 0; align-self: center; justify-self: center; width: 100%; } .hero-showcase__inner { align-items: center; justify-content: center; width: 100%; } .hero-cta-group { margin-left: 0; margin-right: auto; margin-top: 0; margin-bottom: 0; } } @media (min-width: 1024px) { .hero-section { padding-top: 5.25rem; padding-bottom: 3.5rem; } .hero-aura { left: 58%; top: 48%; width: min(52vw, 680px); height: min(52vw, 680px); } .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 2.75rem 3.5rem; max-width: 76rem; align-items: center; } .hero-copy { max-width: 36rem; justify-self: start; } .hero-copy__title { max-width: 18ch; margin-bottom: 1.1rem; line-height: 1.12; letter-spacing: 0.015em; } .hero-icp-pills { margin-bottom: 0.75rem; } .hero-outcomes { margin-bottom: 1.25rem; max-width: 31rem; gap: 0.5rem; } .hero-cta-group { margin-bottom: 0; max-width: 34rem; } .hero-copy__foot { margin-top: 0; padding-top: 0; border-top: none; gap: 0.75rem; max-width: 34rem; } .hero-showcase { --showcase-display-w: min(100%, clamp(22rem, 30vw, 32rem)); --showcase-phone-w: clamp(10rem, 10.5vw, 12.5rem); --showcase-stage-min: clamp(20rem, 44vh, 28rem); --showcase-switch: 3.25rem; justify-self: end; max-width: min(100%, 34rem); } .hero-showcase .hero-device-ref { justify-content: center; width: 100%; max-width: none; margin-top: 0.65rem; } } @media (min-width: 1280px) { .hero-grid { max-width: 80rem; gap: 3rem 4.5rem; grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); } .hero-copy { max-width: 38rem; } .hero-copy__title { max-width: 19ch; } .hero-showcase { --showcase-display-w: min(100%, clamp(24rem, 28vw, 34rem)); --showcase-stage-min: clamp(21rem, 46vh, 29rem); max-width: min(100%, 36rem); } } @media (min-width: 1536px) { .hero-grid { max-width: 84rem; gap: 3.25rem 5rem; } .hero-copy__title { font-size: clamp(2.35rem, 2.2vw, 2.85rem) !important; max-width: 20ch; } .hero-showcase { --showcase-display-w: min(100%, 34rem); --showcase-phone-w: 13rem; --showcase-stage-min: clamp(22rem, 48vh, 30rem); } .hero-showcase .apple-display__logo { width: 0.62rem; height: 0.76rem; } } @media (prefers-reduced-motion: reduce) { .hero-showcase__panel { transition: none !important; } } /* === portfolio-showcase.css === */ /* ═══════════════════════════════════════════════════════════ PORTFOLIO SHOWCASE — iPhone mockups + niche tags + scroll bar ═══════════════════════════════════════════════════════════ */ #acervo-slider .portfolio-phone.iphone-16-pro { position: relative; width: 100%; } #acervo-slider .iphone-16-pro__frame, .hero-showcase .iphone-16-pro__frame { position: relative; padding: 0.4rem; border-radius: 2.1rem; background: linear-gradient(155deg, #5a5a5c 0%, #2a2a2c 18%, #141416 50%, #1e1e20 78%, #4a4a4c 100%); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34), 0 6px 14px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 0 0 2px rgba(0, 0, 0, 0.55); } #acervo-slider .iphone-16-pro__frame::before, .hero-showcase .iphone-16-pro__frame::before { content: ''; position: absolute; right: -0.12rem; top: 28%; width: 0.18rem; height: 3.25rem; border-radius: 0 2px 2px 0; background: linear-gradient(180deg, #3a3a3c, #1a1a1c); box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.08); z-index: 5; } #acervo-slider .iphone-16-pro__frame::after, .hero-showcase .iphone-16-pro__frame::after { content: ''; position: absolute; left: -0.12rem; top: 22%; width: 0.18rem; height: 2rem; border-radius: 2px 0 0 2px; background: linear-gradient(180deg, #3a3a3c, #1a1a1c); box-shadow: 1px 0 0 rgba(255, 255, 255, 0.06); z-index: 5; } #acervo-slider .iphone-16-pro__island, .hero-showcase .iphone-16-pro__island { position: absolute; top: 0.78rem; left: 50%; transform: translateX(-50%); width: 28%; max-width: 4.25rem; height: 1.05rem; background: #000; border-radius: 999px; z-index: 35; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); } .card-img--fallback { object-fit: cover; background-color: rgba(184, 163, 142, 0.14); } #acervo-slider .portfolio-phone-screen, .hero-showcase .portfolio-phone-screen { position: relative; aspect-ratio: 9 / 19.5; width: 100%; border-radius: 1.75rem; overflow: hidden; background: #000; display: flex; align-items: center; justify-content: center; isolation: isolate; } #acervo-slider .portfolio-phone-screen::after, .hero-showcase .portfolio-phone-screen::after { content: ''; position: absolute; bottom: 0.4rem; left: 50%; transform: translateX(-50%); width: 34%; max-width: 5.5rem; height: 0.24rem; background: rgba(255, 255, 255, 0.38); border-radius: 999px; z-index: 28; pointer-events: none; } #acervo-slider .card-img-container, .hero-showcase .card-img-container { overflow: hidden; } #acervo-slider .portfolio-card-head { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; margin: 0 0 0.85rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-color); } #acervo-slider .portfolio-card-badge { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; padding: 0.38rem 0.55rem; border-radius: 2px; line-height: 1.2; white-space: nowrap; } #acervo-slider .portfolio-card-name { margin: 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-color); line-height: 1.35; } #acervo-slider .portfolio-card-niche { margin: 0; font-size: 10px; font-weight: 500; letter-spacing: 0.08em; color: #6B5E52; line-height: 1.35; text-transform: none; } [data-theme="obsidian"] #acervo-slider .portfolio-card-niche { color: #C8BDB2; } @media (min-width: 768px) { #acervo-slider .portfolio-card-badge { font-size: 9px; letter-spacing: 0.15em; } #acervo-slider .portfolio-card-name { font-size: 12px; } #acervo-slider .portfolio-card-niche { font-size: 11px; } } #acervo-slider .portfolio-card-badge--available { background: rgba(232, 213, 196, 0.14); color: #5C4F42; border: 1px solid rgba(184, 163, 142, 0.55); } [data-theme="obsidian"] #acervo-slider .portfolio-card-badge--available { color: #FAFAF8; background: rgba(232, 213, 196, 0.12); border-color: rgba(232, 213, 196, 0.42); } #acervo-slider .portfolio-card-badge--live { background: rgba(184, 163, 142, 0.16); color: #3D3530; border: 1px solid rgba(141, 122, 101, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); } [data-theme="obsidian"] #acervo-slider .portfolio-card-badge--live { background: rgba(255, 255, 255, 0.06); color: #FAFAF8; border-color: rgba(232, 213, 196, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); } #acervo-slider .portfolio-card-badge--preview { background: rgba(232, 213, 196, 0.12); color: #4A4038; border: 1px solid rgba(184, 163, 142, 0.45); } [data-theme="obsidian"] #acervo-slider .portfolio-card-badge--preview { background: rgba(255, 255, 255, 0.07); color: #F5F5F3; border-color: rgba(232, 213, 196, 0.4); } .portfolio-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; margin-top: 1rem; } @media (min-width: 768px) { .portfolio-filters { justify-content: flex-start; } } .portfolio-filter-chip { font-family: inherit; font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; padding: 0.45rem 0.65rem; border: 1px solid rgba(141, 122, 101, 0.28); border-radius: 2px; color: #6B5E52; background: transparent; cursor: pointer; white-space: nowrap; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; -webkit-tap-highlight-color: transparent; } .portfolio-filter-chip.is-active { border-color: rgba(141, 122, 101, 0.5); color: #3D3530; background: rgba(232, 213, 196, 0.22); } .portfolio-filter-chip:focus-visible { outline: 2px solid rgba(184, 163, 142, 0.7); outline-offset: 2px; } [data-theme="obsidian"] .portfolio-filter-chip { border-color: rgba(232, 213, 196, 0.28); color: #E8D5C4; } [data-theme="obsidian"] .portfolio-filter-chip.is-active { color: #FAFAF8; background: rgba(232, 213, 196, 0.1); border-color: rgba(232, 213, 196, 0.45); } .portfolio-expand-wrap { display: flex; justify-content: center; margin-top: 1rem; } @media (min-width: 768px) { .portfolio-expand-wrap { justify-content: flex-start; } } .portfolio-expand-btn { font-family: inherit; font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; padding: 0.55rem 0.85rem; border: 1px solid rgba(141, 122, 101, 0.35); border-radius: 2px; color: #5C5248; background: rgba(255, 255, 255, 0.35); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; } .portfolio-expand-btn:hover { background: rgba(232, 213, 196, 0.18); border-color: rgba(141, 122, 101, 0.5); } [data-theme="obsidian"] .portfolio-expand-btn { border-color: rgba(232, 213, 196, 0.28); background: rgba(255, 255, 255, 0.04); color: #F5F5F3; } [data-theme="obsidian"] .portfolio-expand-btn:hover { background: rgba(232, 213, 196, 0.12); } #acervo-slider .portfolio-card[hidden] { display: none !important; } #acervo-slider .card-img--focus-top { object-position: center top; } #acervo-slider .portfolio-card-actions { display: flex; flex-direction: column; gap: 0.45rem; width: 100%; flex-shrink: 0; margin-top: 0.65rem; border: none !important; position: relative; z-index: 3; } #acervo-slider .portfolio-card-actions--single { margin-top: 0.75rem; } #acervo-slider .portfolio-card-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; width: 100%; min-height: 2.125rem; padding: 0.48rem 0.55rem; border: 1px solid rgba(141, 122, 101, 0.38); border-radius: 2px; background: transparent; color: #4A4038; font-family: inherit; font-size: 7px; font-weight: 600; letter-spacing: 0.15em; line-height: 1.35; text-align: center; text-decoration: none; text-transform: uppercase; white-space: normal; word-break: break-word; cursor: pointer; touch-action: manipulation; appearance: none; -webkit-appearance: none; transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease; -webkit-tap-highlight-color: transparent; } @media (min-width: 640px) { #acervo-slider .portfolio-card-btn { min-height: 2.25rem; font-size: 7.5px; letter-spacing: 0.16em; padding: 0.5rem 0.6rem; } } @media (min-width: 1024px) { #acervo-slider .portfolio-card-btn { font-size: 8px; letter-spacing: 0.17em; min-height: 2.35rem; } } #acervo-slider .portfolio-card-btn:focus-visible { outline: 2px solid rgba(184, 163, 142, 0.7); outline-offset: 2px; } #acervo-slider .portfolio-card-btn--primary { border-color: rgba(184, 163, 142, 0.62); background: linear-gradient(180deg, rgba(232, 213, 196, 0.28) 0%, rgba(232, 213, 196, 0.14) 100%); color: #3D3530; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); } #acervo-slider .portfolio-card-btn--primary:hover { background: #B8A38E; border-color: #B8A38E; color: #1C1C1A; box-shadow: none; } #acervo-slider .portfolio-card-btn--secondary, #acervo-slider .portfolio-card-btn--client { border-color: rgba(141, 122, 101, 0.3); background: rgba(255, 255, 255, 0.35); color: #5C5248; } #acervo-slider .portfolio-card-btn--secondary:hover, #acervo-slider .portfolio-card-btn--client:hover { background: rgba(232, 213, 196, 0.18); border-color: rgba(141, 122, 101, 0.5); color: #2C2622; } #acervo-slider .portfolio-card-btn__icon { width: 0.65rem; height: 0.65rem; flex-shrink: 0; opacity: 0.9; } [data-theme="obsidian"] #acervo-slider .portfolio-card-btn--primary { border-color: rgba(232, 213, 196, 0.5); background: linear-gradient(180deg, rgba(232, 213, 196, 0.14) 0%, rgba(232, 213, 196, 0.06) 100%); color: #FAFAF8; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); } [data-theme="obsidian"] #acervo-slider .portfolio-card-btn--primary:hover { background: #B8A38E; border-color: #B8A38E; color: #1C1C1A; } [data-theme="obsidian"] #acervo-slider .portfolio-card-btn--secondary, [data-theme="obsidian"] #acervo-slider .portfolio-card-btn--client { border-color: rgba(232, 213, 196, 0.28); background: rgba(255, 255, 255, 0.04); color: #F5F5F3; } [data-theme="obsidian"] #acervo-slider .portfolio-card-btn--secondary:hover, [data-theme="obsidian"] #acervo-slider .portfolio-card-btn--client:hover { background: rgba(232, 213, 196, 0.12); border-color: rgba(232, 213, 196, 0.45); color: #FAFAF8; } #acervo-slider.drag-slider.mouse-drag .portfolio-card-actions, #acervo-slider.drag-slider.mouse-drag .portfolio-card-btn { cursor: pointer; } #acervo-slider .card-img, #acervo-slider .portfolio-phone-screen .card-img, .hero-showcase .portfolio-phone-screen .card-img { position: static; flex: 0 0 auto; display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; object-position: center center; filter: none; } #acervo-slider .portfolio-card .card-img-container > .absolute.inset-0.flex { border-radius: 1.75rem; } #acervo-slider .portfolio-card { cursor: default; } /* ── Conversão: 1 CTA dominante · demo só no card expandido (mobile) ou hover (desktop) ── */ #acervo-slider .portfolio-card-btn--demo { display: none; } #acervo-slider .portfolio-card__preview-zone { position: relative; width: 100%; border: none; background: transparent; padding: 0; margin: 0; text-align: inherit; cursor: default; -webkit-tap-highlight-color: transparent; } #acervo-slider .portfolio-card__preview-hint { display: none; font-size: 7px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: #8D7A65; text-align: center; width: 100%; margin-top: -0.35rem; margin-bottom: 0.15rem; } @media (max-width: 767px) { #acervo-slider .portfolio-card__preview-zone { cursor: pointer; } #acervo-slider .portfolio-card__preview-zone:focus-visible { outline: 2px solid rgba(184, 163, 142, 0.7); outline-offset: 4px; border-radius: 4px; } #acervo-slider .portfolio-card__preview-hint { display: block; } #acervo-slider .portfolio-card.is-expanded .portfolio-card__preview-hint { display: none; } #acervo-slider .portfolio-card.is-expanded .portfolio-card-btn--demo { display: inline-flex; } } @media (min-width: 768px) { #acervo-slider .portfolio-card:hover .portfolio-card-btn--demo { display: inline-flex; } } /* === conversion.css === */ /* ═══════════════════════════════════════════════════════════ CONVERSION LAYER — Autoridade & prova social ═══════════════════════════════════════════════════════════ */ .section-eyebrow { font-size: clamp(8px, 2.2vw, 10px); text-transform: uppercase; letter-spacing: 0.38em; color: var(--gold-accent-strong, #8D7A65); margin-bottom: 0.75rem; } .section-eyebrow .eyebrow-en { opacity: 0.72; font-weight: 400; color: var(--text-soft, #5C5C56); } /* ── Trust bar (hero) ── */ #glid-trust-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem 2rem; margin-top: 1.5rem; max-width: 36rem; } .trust-stat { text-align: center; min-width: 5.5rem; } .trust-stat-value { display: block; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.25rem, 4vw, 1.75rem); font-weight: 700; line-height: 1.1; background: linear-gradient(135deg, #CBA381 0%, #9F8265 50%, #765D46 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .trust-stat-label { display: block; font-size: 8px; text-transform: uppercase; letter-spacing: 0.2em; opacity: 0.65; margin-top: 0.35rem; line-height: 1.4; } .hero-triagem { opacity: 0.72; line-height: 1.55; } /* ── Audience (para quem é) ── */ .audience-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 64rem; margin: 0 auto; } @media (min-width: 640px) { .audience-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .audience-grid { grid-template-columns: repeat(3, 1fr); } } .audience-card { border: 1px solid var(--border-color); padding: 1.25rem 1.35rem; background: var(--bg-color); transition: background 0.25s ease; } .audience-card:hover { background: var(--cursor-focus); } .audience-card h4 { font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 700; margin-bottom: 0.5rem; color: var(--text-color); } .audience-card p { font-size: 11px; font-weight: 300; line-height: 1.55; opacity: 0.7; color: var(--text-color); } .audience-exclude { max-width: 40rem; margin: 2rem auto 0; padding: 1rem 1.25rem; border: 1px dashed var(--border-color); text-align: center; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.65; line-height: 1.6; } /* ── Case badges ── */ .case-badge { position: absolute; top: 0.65rem; left: 0.65rem; z-index: 25; font-size: 7px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; padding: 0.35rem 0.55rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .case-badge--live { background: rgba(17, 17, 17, 0.82); color: #E8D5C4; border: 1px solid rgba(184, 163, 142, 0.5); } .case-badge--concept { background: rgba(245, 245, 243, 0.88); color: #2C2C2C; border: 1px solid var(--border-color); } [data-theme="obsidian"] .case-badge--concept { background: rgba(10, 10, 10, 0.88); color: #F5F5F3; } /* ── Plan comparator — slider único (6 planos) ── */ .plan-compare-shell { position: relative; max-width: 1500px; margin: 0 auto; } .plan-compare-scroll-hint { margin: 0 0 0.75rem; text-align: center; font-size: 10px; text-transform: uppercase; letter-spacing: 0.28em; color: var(--text-color); opacity: 0.55; } @media (min-width: 1024px) { .plan-compare-scroll-hint { text-align: left; } } .plan-compare-scroll-hint-desktop { display: none; } @media (min-width: 768px) { .plan-compare-scroll-hint-mobile { display: none; } .plan-compare-scroll-hint-desktop { display: inline; } } /* Desktop grid — todos os planos visíveis */ @media (min-width: 1280px) { .plan-compare-scroll-hint { display: none; } #glid-plan-compare.plan-compare-slider { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem 1.35rem; overflow: visible; scroll-snap-type: none; padding-bottom: 0; } #glid-plan-compare .plan-compare-card { flex: none; width: auto; min-width: 0; scroll-snap-align: unset; } #glid-plan-compare .plan-compare-card.is-recommended { transform: none; box-shadow: 0 16px 44px rgba(184, 163, 142, 0.16); } } @media (min-width: 1536px) { #glid-plan-compare.plan-compare-slider { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; } #glid-plan-compare .plan-compare-card.is-recommended { transform: translateY(-4px); } } #glid-plan-compare.plan-compare-slider { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-top: 1.15rem; } #glid-plan-compare.plan-compare-slider::-webkit-scrollbar { display: none; } #glid-plan-compare .plan-compare-card { flex: 0 0 min(84vw, 18.5rem); scroll-snap-align: start; min-height: 100%; } @media (min-width: 640px) { #glid-plan-compare .plan-compare-card { flex-basis: 17.5rem; } } @media (min-width: 1024px) { #glid-plan-compare .plan-compare-card { flex-basis: 18.75rem; scroll-snap-align: center; } } .plan-compare-card { display: flex; flex-direction: column; border: 1px solid var(--border-color); padding: 1.5rem 1.35rem; background: var(--bg-alt); position: relative; z-index: 1; overflow: visible; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .plan-compare-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 0; pointer-events: none; } /* ── Tier luminance ladder (paleta GLID existente) ── */ .plan-compare-card--bio { background: var(--bg-color); border-color: rgba(141, 122, 101, 0.22); } .plan-compare-card--bio::before { background: var(--radial-1); } .plan-compare-card--bio .plan-compare-meta-price { color: #8D7A65; } .plan-compare-card--profissional { background: var(--bg-alt); } .plan-compare-card--profissional::before { background: var(--gold-gradient); } .plan-compare-card--profissional .plan-compare-meta-price { color: #6E5438; } .plan-compare-card--seo { background: var(--card-1-bg); border-color: rgba(141, 122, 101, 0.3); } .plan-compare-card--seo::before { background: var(--radial-2); } .plan-compare-card--seo .plan-compare-meta-price { color: #9A7858; } .plan-compare-card--premium { background: var(--bg-abismo); border-color: rgba(141, 122, 101, 0.34); } .plan-compare-card--premium::before { background: var(--gold-accent); } .plan-compare-card--premium .plan-compare-meta-price { color: #765D46; } .plan-compare-card--multipaginas { background: var(--card-3-bg); border-color: rgba(110, 84, 56, 0.38); } .plan-compare-card--multipaginas::before { background: var(--radial-3); } .plan-compare-card--multipaginas .plan-compare-meta-price { color: #6E5438; } .plan-compare-card--sob-medida { background: #1C1C1A; border-color: rgba(184, 163, 142, 0.55); box-shadow: 0 14px 36px rgba(28, 28, 26, 0.22); } .plan-compare-card--sob-medida::before { background: var(--gold-gradient); } .plan-compare-card--sob-medida .plan-compare-name, .plan-compare-card--sob-medida .plan-compare-meta-value, .plan-compare-card--sob-medida .plan-compare-desc { color: #FAFAF8; } .plan-compare-card--sob-medida .plan-compare-meta-label { color: #E8D5C4; } .plan-compare-card--sob-medida .plan-compare-desc { border-top-color: rgba(250, 250, 248, 0.14); color: #FAFAF8 !important; opacity: 0.88; } .plan-compare-card--sob-medida .plan-compare-meta-price { color: #E8D5C4; } [data-theme="obsidian"] .plan-compare-card--sob-medida { background: #000000; border-color: rgba(232, 213, 196, 0.42); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45); } [data-theme="obsidian"] .plan-compare-card--sob-medida .plan-compare-name, [data-theme="obsidian"] .plan-compare-card--sob-medida .plan-compare-meta-value, [data-theme="obsidian"] .plan-compare-card--sob-medida .plan-compare-desc { color: #F4F2EE; } @media (max-width: 767px) { .plan-compare-card--bio { border-color: rgba(141, 122, 101, 0.3); } .plan-compare-card--seo { border-color: rgba(141, 122, 101, 0.38); } .plan-compare-card--premium { border-color: rgba(141, 122, 101, 0.42); } .plan-compare-card--multipaginas { border-color: rgba(110, 84, 56, 0.48); } } .plan-compare-card.is-recommended { border-color: rgba(184, 163, 142, 0.65); box-shadow: 0 12px 40px rgba(184, 163, 142, 0.12); z-index: 2; } @media (min-width: 768px) { .plan-compare-card.is-recommended { transform: scale(1.02); } } .plan-compare-badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, calc(-100% - 0.3rem)); z-index: 5; background: #111; color: #F5F5F3; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.35rem 0.75rem; white-space: nowrap; border: 1px solid rgba(184, 163, 142, 0.4); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16); } .plan-compare-name { font-family: Georgia, serif; font-size: 1.25rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 1rem; color: var(--text-color); } .plan-compare-meta { display: flex; flex-direction: column; gap: 0.65rem; margin: 0 0 1rem; padding: 0; } .plan-compare-meta-row { display: grid; grid-template-columns: minmax(5.5rem, 0.42fr) 1fr; gap: 0.5rem 0.75rem; align-items: baseline; margin: 0; } .plan-compare-meta-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: #B8A38E; margin: 0; } .plan-compare-meta-value { font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--text-color); margin: 0; } .plan-compare-meta-row--highlight .plan-compare-meta-value { font-family: Georgia, serif; font-size: 1.35rem; font-weight: 700; line-height: 1.2; } .plan-compare-desc { font-size: 12px; font-weight: 400; line-height: 1.55; opacity: 0.78; flex: 1; margin-bottom: 1.25rem; margin-top: 0.15rem; padding-top: 0.85rem; border-top: 1px solid var(--border-color); color: var(--text-color); } .plan-compare-cta { width: 100%; border-top: 1px solid var(--border-color); padding-top: 1rem; font-size: 9px; text-transform: uppercase; letter-spacing: 0.28em; font-weight: 600; color: var(--text-color); background: transparent; transition: background 0.2s, color 0.2s; min-height: 44px; } .plan-compare-cta:hover { background: var(--text-color); color: var(--bg-color); } .plan-compare-cta--ghost { border: 1px solid rgba(141, 122, 101, 0.35); border-top: 1px solid rgba(141, 122, 101, 0.35); border-radius: 2px; padding: 0.85rem 0.55rem; background: rgba(255, 255, 255, 0.2); } .plan-compare-cta--ghost:hover { background: rgba(232, 213, 196, 0.22); color: var(--text-color); border-color: rgba(141, 122, 101, 0.5); } .plan-compare-card--sob-medida .plan-compare-cta--ghost { border-color: rgba(232, 213, 196, 0.42); color: #FAFAF8; background: rgba(255, 255, 255, 0.04); } .plan-compare-card--sob-medida .plan-compare-cta--ghost:hover { background: var(--gold-accent); color: #1C1C1A; border-color: var(--gold-accent); } [data-theme="obsidian"] .plan-compare-cta--ghost { background: rgba(255, 255, 255, 0.03); border-color: rgba(232, 213, 196, 0.28); } [data-theme="obsidian"] .plan-compare-cta--ghost:hover { background: rgba(232, 213, 196, 0.12); color: #FAFAF8; } .plan-compare-card.is-recommended .plan-compare-cta { background: linear-gradient(135deg, #CBA381 0%, #9F8265 50%, #765D46 100%); color: #111; border-top: none; padding-top: 0.85rem; padding-bottom: 0.85rem; } .plan-compare-card.is-recommended .plan-compare-cta:hover { opacity: 0.92; } /* ── Plan comparator · mobile only ── */ @media (max-width: 767px) { #planos-resumo.zone-compare { overflow: visible; padding-top: 1.25rem; padding-bottom: 1.35rem; } #planos-resumo .text-center.mb-8 { margin-bottom: 1rem; } #plan-compare-title { font-size: 1.125rem; letter-spacing: 0.12em; line-height: 1.28; } #planos-resumo .plan-compare-shell { overflow: visible; padding-top: 0.35rem; padding-left: 0.85rem; padding-right: 0.85rem; } #glid-plan-compare.plan-compare-slider { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-top: 1.45rem; padding-bottom: 0.35rem; gap: 0.65rem; scroll-padding-inline: 0.85rem; align-items: stretch; } #glid-plan-compare .plan-compare-card { flex: 0 0 min(92vw, 22.5rem); overflow: visible; padding: 1rem 0.95rem 0.9rem; } .plan-compare-card.is-recommended { padding-top: 1.15rem; } .plan-compare-badge { top: 0; left: 50%; transform: translate(-50%, calc(-100% - 0.2rem)); z-index: 6; width: max-content; max-width: calc(100% - 0.35rem); white-space: normal; text-align: center; line-height: 1.3; letter-spacing: 0.09em; font-size: 8px; padding: 0.3rem 0.5rem; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); } .plan-compare-name { font-size: 1rem !important; letter-spacing: 0.08em; line-height: 1.22; margin-bottom: 0.6rem; margin-top: 0.1rem; } .plan-compare-meta { gap: 0.4rem; margin-bottom: 0.6rem; } .plan-compare-meta-row { grid-template-columns: minmax(4.5rem, 36%) 1fr; gap: 0.3rem 0.45rem; align-items: start; } .plan-compare-meta-label { font-size: 9px !important; letter-spacing: 0.1em !important; line-height: 1.35; } .plan-compare-meta-value { font-size: 11px !important; line-height: 1.4 !important; } .plan-compare-meta-row--highlight .plan-compare-meta-value, .plan-compare-meta-price { font-size: 1.05rem !important; line-height: 1.15 !important; } .plan-compare-desc { font-size: 11px; line-height: 1.42; padding-top: 0.6rem; margin-bottom: 0.75rem; } .plan-compare-cta { letter-spacing: 0.14em; padding-top: 0.7rem; } .plan-compare-card.is-recommended .plan-compare-cta { padding-top: 0.75rem; padding-bottom: 0.75rem; } } /* ── Condições comerciais (sem tabela duplicada) ── */ .pricing-compliance { border: 1px solid var(--border-color); background: var(--bg-alt); padding: 1.25rem 1.35rem; } .pricing-compliance-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; } .pricing-compliance-list li { font-size: 12px; line-height: 1.55; color: var(--text-color); opacity: 0.82; padding-bottom: 0.85rem; border-bottom: 1px solid var(--border-color); } .pricing-compliance-list li:last-child { padding-bottom: 0; border-bottom: none; } .pricing-compliance-cta { display: block; width: 100%; margin-top: 1.1rem; padding: 0.75rem 1rem; border: 1px solid rgba(141, 122, 101, 0.35); border-radius: 2px; background: rgba(255, 255, 255, 0.35); color: var(--text-color); font-family: inherit; font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; } .pricing-compliance-cta:hover { background: rgba(232, 213, 196, 0.18); border-color: rgba(141, 122, 101, 0.5); } /* ── Deliverables (Passo 2 — inclui PWA) ── */ .zone-deliverables { background: var(--zone-deliverables-bg, var(--bg-alt)); } .deliverables-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 640px) { .deliverables-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .deliverables-grid { grid-template-columns: repeat(3, 1fr); } } .deliverable-card { border: 1px solid var(--border-color); padding: 1.25rem 1.35rem; background: var(--bg-color); display: flex; flex-direction: column; gap: 0.65rem; min-height: 100%; transition: border-color 0.25s ease, box-shadow 0.25s ease; } .deliverable-card:hover { border-color: rgba(184, 163, 142, 0.45); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06); } .deliverable-card--pwa { border-color: rgba(184, 163, 142, 0.55); background: linear-gradient(145deg, var(--bg-color) 0%, rgba(184, 163, 142, 0.06) 100%); } .deliverable-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 1px solid rgba(184, 163, 142, 0.35); border-radius: 999px; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #B8A38E; } .deliverable-title { font-family: Georgia, serif; font-size: 0.95rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-color); } .deliverable-desc { font-size: 11px; line-height: 1.55; font-weight: 300; color: var(--text-color); opacity: 0.72; } /* ── Faixa compacta pós-hero (pricing cedo) ── */ .pricing-teaser { border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); background: var(--bg-alt); padding: 1.1rem 1.25rem; } .pricing-teaser__inner { max-width: 44rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; } .pricing-teaser__eyebrow { margin: 0; font-size: clamp(7px, 2vw, 9px); text-transform: uppercase; letter-spacing: 0.28em; color: var(--gold-accent-strong, #8D7A65); opacity: 0.88; } .pricing-teaser__eyebrow-sub { color: var(--text-soft); opacity: 0.85; font-weight: 400; } .pricing-teaser__plans { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; width: 100%; } .pricing-teaser__chip { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; min-width: 5.5rem; padding: 0.55rem 0.85rem; border: 1px solid var(--border-color); border-radius: 0.35rem; background: var(--bg-color); color: var(--text-color); cursor: pointer; transition: border-color 0.2s, background 0.2s, transform 0.15s; } .pricing-teaser__chip:hover { border-color: rgba(184, 163, 142, 0.45); background: var(--cursor-focus); } .pricing-teaser__chip.is-featured { border-color: rgba(184, 163, 142, 0.55); background: rgba(184, 163, 142, 0.08); } .pricing-teaser__chip-name { font-size: clamp(10px, 2vw, 11px); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; opacity: 0.82; line-height: 1.35; text-align: center; max-width: 7.5rem; } .pricing-teaser__chip-price { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(0.85rem, 2.5vw, 1rem); font-weight: 700; letter-spacing: 0.04em; color: var(--text-color); } .pricing-teaser__cta { margin-top: 0.15rem; padding: 0.55rem 1rem; border: none; background: transparent; font-size: clamp(8px, 2.2vw, 10px); text-transform: uppercase; letter-spacing: 0.2em; color: var(--text-muted); cursor: pointer; transition: color 0.2s, opacity 0.2s; } .pricing-teaser__cta:hover { color: var(--text-color); opacity: 0.9; } @media (max-width: 767px) { .pricing-teaser { padding: 0.85rem 1rem; } .pricing-teaser__eyebrow { font-size: 10px; letter-spacing: 0.2em; } .pricing-teaser__plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; flex-wrap: wrap; justify-content: stretch; overflow: visible; mask-image: none; padding-bottom: 0; width: 100%; } .pricing-teaser__chip { flex: initial; width: 100%; min-width: 0; min-height: 44px; padding: 0.5rem 0.45rem; } .pricing-teaser__chip-name { font-size: 9px; letter-spacing: 0.1em; line-height: 1.3; max-width: none; } .pricing-teaser__chip-price { font-size: clamp(0.8rem, 3.5vw, 0.95rem); } .hero-device-ref { display: none; } } /* ── Pricing table (Passo 3 — sem cards monstros) ── */ .zone-close { background: var(--zone-pricing-bg, var(--bg-color)); } .pricing-table { border: 1px solid var(--border-color); background: var(--bg-color); } .pricing-table-head, .pricing-table-row { display: grid; grid-template-columns: minmax(5.5rem, 0.9fr) minmax(0, 1.6fr) minmax(5rem, 0.75fr) minmax(5rem, 0.7fr) minmax(7rem, 0.95fr); gap: 0.75rem 1rem; align-items: center; padding: 0.85rem 1rem; } .pricing-table-head { display: none; font-size: 8px; text-transform: uppercase; letter-spacing: 0.2em; opacity: 0.45; border-bottom: 1px solid var(--border-color); background: var(--bg-alt); } .pricing-table-head-cell { display: flex; flex-direction: column; gap: 0.15rem; } .pricing-table-head-pt { font-weight: 700; letter-spacing: 0.14em; color: var(--text-color); opacity: 0.85; } .pricing-table-head-en { font-size: 7px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.45; font-weight: 500; } @media (min-width: 768px) { .pricing-table-head { display: grid; } } .pricing-table-row { position: relative; border-bottom: 1px solid var(--border-color); } .pricing-table-row:last-child { border-bottom: none; } .pricing-table-row.is-featured { background: rgba(184, 163, 142, 0.07); border-left: 3px solid #B8A38E; padding-left: calc(1rem - 3px); } .pricing-table-badge { position: absolute; top: -0.55rem; left: 1rem; font-size: 7px; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 700; background: #B8A38E; color: #1C1C1A; padding: 0.2rem 0.55rem; } .pricing-table-name { font-family: Georgia, serif; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-color); } .pricing-table-for { font-size: 12px; font-weight: 500; line-height: 1.45; opacity: 0.88; color: var(--text-color); } .pricing-table-price { font-family: Georgia, serif; font-size: 1.05rem; color: var(--text-color); white-space: nowrap; } .pricing-table-prazo { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.65; color: var(--text-color); } .pricing-table-cta { width: 100%; border: 1px solid var(--border-color); background: transparent; color: var(--text-color); font-size: 8px; text-transform: uppercase; letter-spacing: 0.18em; padding: 0.65rem 0.5rem; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .pricing-table-cta:hover { background: var(--text-color); color: var(--bg-color); border-color: var(--text-color); } .pricing-table-row.is-featured .pricing-table-cta { background: linear-gradient(135deg, #B8A38E, #D4BC9A); color: #1C1C1A; border-color: transparent; font-weight: 700; } .pricing-table-note-link { background: none; border: none; padding: 0; font: inherit; color: #B8A38E; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; letter-spacing: inherit; text-transform: inherit; } @media (max-width: 767px) { .pricing-table-row { grid-template-columns: 1fr 1fr; grid-template-areas: "plan price" "for for" "prazo prazo" "cta cta"; gap: 0.5rem 1rem; padding: 1.1rem 1rem 1.25rem; } .pricing-table-plan { grid-area: plan; } .pricing-table-for { grid-area: for; } .pricing-table-price { grid-area: price; text-align: right; } .pricing-table-prazo { grid-area: prazo; } .pricing-table-cta { grid-area: cta; margin-top: 0.35rem; } .pricing-table-cell[data-label]::before { content: attr(data-label); display: block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: #B8A38E; margin-bottom: 0.2rem; } .pricing-table-price[data-label]::before { text-align: right; } .pricing-table-row.is-featured { margin-top: 0.75rem; } } .deliverable-card--domain { border-color: rgba(184, 163, 142, 0.5); background: linear-gradient(145deg, var(--bg-color) 0%, rgba(184, 163, 142, 0.05) 100%); } .domain-inclusion-badge { display: inline-flex; align-items: center; justify-content: center; margin-top: 1rem; padding: 0.5rem 1rem; font-size: 9px; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 700; color: var(--text-color); border: 1px solid rgba(184, 163, 142, 0.45); background: rgba(184, 163, 142, 0.1); } .domain-inclusion-badge--pricing { margin-top: 0.85rem; margin-bottom: 0.25rem; } /* ── Testimonials · Google-style marquee ── */ .testimonials-zone { padding-bottom: 1.25rem; } .testimonials-google-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.55rem 0.85rem; padding: 0.85rem 1rem; border: 1px solid var(--border-color); background: var(--bg-alt); border-radius: 2px; } .testimonials-google-score { margin: 0; font-family: Georgia, serif; font-size: 1.35rem; line-height: 1; color: var(--text-color); } .testimonials-google-score-max { font-size: 0.75rem; opacity: 0.55; font-family: 'DM Sans', system-ui, sans-serif; } .testimonials-google-stars, .testimonial-stars { display: inline-flex; align-items: center; gap: 0.1rem; line-height: 1; } .testimonial-star { font-size: 0.72rem; color: rgba(141, 122, 101, 0.28); } .testimonial-star.is-filled { color: #E8A317; } .testimonials-google-count { margin: 0; width: 100%; text-align: center; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-color); opacity: 0.58; } .testimonials-marquee-shell { width: 100%; overflow: hidden; mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); } #glid-testimonials.testimonials-marquee { display: flex; width: max-content; animation: scrollMarquee var(--testimonials-duration, 42s) linear infinite; } #glid-testimonials.testimonials-marquee:hover { animation-play-state: paused; } .testimonials-marquee-group { display: flex; align-items: stretch; gap: 0.75rem; padding: 0.25rem 0.75rem 0.5rem; } .testimonial-card { flex: 0 0 min(84vw, 17.5rem); border: 1px solid var(--border-color); padding: 1rem 1rem 0.9rem; background: var(--bg-color); display: flex; flex-direction: column; min-height: 100%; border-radius: 2px; box-shadow: 0 8px 24px rgba(28, 28, 26, 0.04); } .testimonial-card__head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.65rem; margin-bottom: 0.75rem; } .testimonial-avatar { width: 2.1rem; height: 2.1rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; color: #3D3530; background: rgba(232, 213, 196, 0.45); border: 1px solid rgba(141, 122, 101, 0.28); } .testimonial-card__meta { min-width: 0; } .testimonial-google-mark { display: inline-flex; align-items: center; gap: 0.2rem; opacity: 0.88; } .testimonial-google-icon { width: 0.95rem; height: 0.95rem; flex-shrink: 0; } .testimonial-google-label { font-size: 8px; font-weight: 600; letter-spacing: 0.08em; color: var(--text-color); opacity: 0.72; } .testimonial-quote { font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.82rem; line-height: 1.5; font-style: normal; opacity: 0.9; flex: 1; margin: 0 0 0.65rem; color: var(--text-color); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .testimonial-result { font-size: 8px; text-transform: uppercase; letter-spacing: 0.14em; color: #9A7858; font-weight: 700; margin: 0 0 0.65rem; padding: 0; border: none; } .testimonial-card__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-top: auto; padding-top: 0.65rem; border-top: 1px solid var(--border-color); } .testimonial-author { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: var(--text-color); margin: 0 0 0.15rem; text-transform: none; } .testimonial-role { font-size: 10px; opacity: 0.58; margin: 0; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.35; } .testimonial-date { font-size: 10px; letter-spacing: 0.06em; color: var(--text-color); opacity: 0.48; white-space: nowrap; } @media (min-width: 768px) { .testimonial-card { flex-basis: 18.5rem; padding: 1.1rem 1.1rem 1rem; } .testimonial-quote { font-size: 0.86rem; -webkit-line-clamp: 5; } .testimonials-google-count { width: auto; text-align: left; } .testimonials-google-bar { justify-content: flex-start; } } @media (prefers-reduced-motion: reduce) { #glid-testimonials.testimonials-marquee { animation: none; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .testimonials-marquee-shell { mask-image: none; } .testimonials-marquee-group { padding-inline: 1rem; } .testimonial-card { scroll-snap-align: start; } } @media (hover: none) and (pointer: coarse) { #glid-testimonials.testimonials-marquee { animation-play-state: paused; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .testimonials-marquee-shell { mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%); } .testimonials-marquee-shell::after { content: 'Deslize — veja depoimentos'; display: block; text-align: center; margin-top: 0.5rem; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-color); opacity: 0.5; } .testimonial-card { scroll-snap-align: start; } } /* ── Founder ── */ .founder-block { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; } @media (min-width: 768px) { .founder-block { flex-direction: row; align-items: flex-start; text-align: left; gap: 2.5rem; } .founder-block .founder-copy { text-align: left; } } .founder-avatar { width: 7.5rem; height: 7.5rem; aspect-ratio: 1 / 1; border-radius: 50%; border: 1px solid #B8A38E; overflow: hidden; flex-shrink: 0; display: grid; place-items: center; background: var(--bg-alt); box-shadow: 0 8px 30px rgba(184, 163, 142, 0.15); } @media (min-width: 768px) { .founder-avatar { width: 9rem; height: 9rem; } } .founder-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 18%; transform: scale(1.02); } .founder-avatar-initials { font-family: Georgia, serif; font-size: 1.75rem; background: linear-gradient(135deg, #CBA381 0%, #9F8265 50%, #765D46 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; } .founder-credentials { font-size: 9px; text-transform: uppercase; letter-spacing: 0.22em; opacity: 0.55; margin-top: 0.5rem; line-height: 1.6; } /* ── Audit proof ── */ .audit-proof-cta { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1rem; font-size: 9px; text-transform: uppercase; letter-spacing: 0.22em; color: #B8A38E; border-bottom: 1px solid rgba(184, 163, 142, 0.4); padding-bottom: 2px; transition: opacity 0.2s; } .audit-proof-cta:hover { opacity: 0.75; } /* ── Footer ── */ .site-footer { background: linear-gradient(180deg, #FAF7F2 0%, #F0E8DC 55%, #E8DFD2 100%); color: #2C2C2C; border-top: 1px solid rgba(184, 163, 142, 0.45); font-size: 11px; font-weight: 400; } [data-theme="obsidian"] .site-footer { background: linear-gradient(180deg, #161616 0%, #101010 100%); color: #F5F5F3; border-top-color: rgba(184, 163, 142, 0.28); } .site-footer .footer-brand-copy { color: #4A4038; line-height: 1.65; max-width: 16rem; font-size: 11px; letter-spacing: 0.02em; } [data-theme="obsidian"] .site-footer .footer-brand-copy { color: rgba(245, 245, 243, 0.72); } .site-footer .footer-col-label { display: block; font-size: 9px; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; color: #8D7A65; margin-bottom: 1.1rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(184, 163, 142, 0.35); } [data-theme="obsidian"] .site-footer .footer-col-label { color: #CBA381; border-bottom-color: rgba(184, 163, 142, 0.22); } .site-footer .footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: #3D3530; } [data-theme="obsidian"] .site-footer .footer-links { color: rgba(245, 245, 243, 0.82); } .site-footer .footer-links--plain { text-transform: none; letter-spacing: 0.04em; font-size: 10px; line-height: 1.6; } .site-footer .footer-links--plans { text-transform: none; letter-spacing: 0.06em; font-size: 10px; } .site-footer .footer-contact-name { font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 9px; color: #2C2C2C; } [data-theme="obsidian"] .site-footer .footer-contact-name { color: #F5F5F3; } .site-footer .footer-links a, .site-footer .footer-wa-link { color: inherit; text-decoration: none; background: none; border: none; padding: 0; font: inherit; cursor: pointer; text-align: left; transition: color 0.2s ease; } .site-footer .footer-links a:hover, .site-footer .footer-wa-link:hover { color: #8D7A65; } [data-theme="obsidian"] .site-footer .footer-links a:hover, [data-theme="obsidian"] .site-footer .footer-wa-link:hover { color: #E8D5C4; } .site-footer .footer-links-cta a { color: #8D7A65; font-weight: 600; letter-spacing: 0.18em; } .site-footer .footer-wa-btn { display: inline-flex; align-items: center; margin-top: 0.25rem; padding: 0.45rem 0.75rem; border: 1px solid rgba(184, 163, 142, 0.55); border-radius: 2px; background: rgba(184, 163, 142, 0.12); color: #5C4838 !important; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; transition: background 0.2s ease, border-color 0.2s ease; } .site-footer .footer-wa-btn:hover { background: rgba(184, 163, 142, 0.22); border-color: #B8A38E; color: #3D3028 !important; } [data-theme="obsidian"] .site-footer .footer-wa-btn { background: rgba(184, 163, 142, 0.08); border-color: rgba(184, 163, 142, 0.35); color: #E8D5C4 !important; } .site-footer .footer-plan-tier { display: inline-block; min-width: 1.35rem; color: #B8A38E; font-weight: 700; font-size: 8px; letter-spacing: 0.08em; } .site-footer .footer-cnpj { margin-top: 0.35rem; font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase; color: #8D7A65; opacity: 0.85; } /* Selos */ .site-footer .footer-seals-wrap { padding: 1.25rem 0 1.5rem; border-top: 1px solid rgba(184, 163, 142, 0.3); border-bottom: 1px solid rgba(184, 163, 142, 0.3); margin-bottom: 1.25rem; } [data-theme="obsidian"] .site-footer .footer-seals-wrap { border-color: rgba(184, 163, 142, 0.18); } .site-footer .footer-seals-title { font-size: 8px; font-weight: 700; letter-spacing: 0.34em; text-transform: uppercase; color: #8D7A65; margin: 0 0 1rem; text-align: center; } .site-footer .footer-seals { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 0.65rem; } .site-footer .footer-seal { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.75rem; border: 1px solid rgba(184, 163, 142, 0.45); border-radius: 2px; background: rgba(255, 255, 255, 0.55); color: #3D3530; font-size: 8px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset; } [data-theme="obsidian"] .site-footer .footer-seal { background: rgba(255, 255, 255, 0.04); border-color: rgba(184, 163, 142, 0.28); color: rgba(245, 245, 243, 0.88); box-shadow: none; } .site-footer .footer-seal-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 1.65rem; height: 1.65rem; padding: 0 0.2rem; border-radius: 50%; background: linear-gradient(135deg, #E8D5C4 0%, #B8A38E 100%); color: #2C2C2C; font-size: 7px; font-weight: 800; letter-spacing: 0; flex-shrink: 0; } .site-footer .footer-seal-icon:first-letter { font-size: inherit; } /* Barra inferior */ .site-footer .footer-bottom { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding-top: 0.25rem; text-align: center; } @media (min-width: 768px) { .site-footer .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; } } .site-footer .footer-copy { margin: 0; font-size: 8px; letter-spacing: 0.28em; text-transform: uppercase; color: #6E5E50; } [data-theme="obsidian"] .site-footer .footer-copy { color: rgba(245, 245, 243, 0.5); } .site-footer .footer-tech-note { margin: 0; font-size: 9px; letter-spacing: 0.1em; text-transform: none; color: #8D7A65; font-weight: 500; } [data-theme="obsidian"] .site-footer .footer-tech-note { color: rgba(203, 163, 129, 0.75); } /* ═══════════════════════════════════════════════════════════ STAKES · urgência · quebra cognitiva (sem fundo preto) ═══════════════════════════════════════════════════════════ */ .zone-stakes { background: var(--zone-stakes-bg); border-top: 1px solid rgba(154, 120, 88, 0.28); border-bottom: 1px solid rgba(154, 120, 88, 0.28); } .zone-proof { background: var(--zone-proof-bg); } .zone-price-spotlight { background: linear-gradient(135deg, #F5EDE4 0%, #E8DDD0 50%, #F0E6DA 100%); border-top: 2px solid var(--gold-accent, #9A7858); border-bottom: 2px solid var(--gold-accent, #9A7858); } .zone-compare { background: var(--zone-compare-bg); } .zone-pricing { background: var(--zone-pricing-bg); } .zone-cta-final { background: var(--zone-cta-bg); color: #FAF7F2; border-top: 1px solid rgba(228, 212, 196, 0.35); } .zone-cta-final h2, .zone-cta-final p { color: #FAF7F2; } .stakes-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 56rem; margin: 0 auto; } @media (min-width: 640px) { .stakes-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .stakes-grid { grid-template-columns: repeat(4, 1fr); } } .stakes-card { border: 1px solid var(--stakes-card-border); background: var(--stakes-card-bg); padding: 1.25rem 1.15rem; border-left: 3px solid var(--gold-accent-strong, #7A5E42); } .stakes-card-icon { font-family: var(--font-display, Georgia, serif); font-size: 1.75rem; font-weight: 700; line-height: 1; margin-bottom: 0.65rem; background: linear-gradient(135deg, #8B6F4E 0%, #6E5438 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .stakes-card h4 { font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; margin-bottom: 0.45rem; color: var(--text-color); } .stakes-card p { font-size: 12px; line-height: 1.58; color: var(--text-muted); margin: 0; } .stakes-callout { max-width: 40rem; margin: 2rem auto 0; padding: 1rem 1.25rem; text-align: center; border: 1px dashed rgba(122, 94, 66, 0.45); background: var(--stakes-callout-bg); font-size: 11px; letter-spacing: 0.08em; line-height: 1.65; color: var(--text-muted); } .stakes-callout b { color: var(--gold-accent-strong, #7A5E42); } .patamar-spotlight-inner { max-width: 48rem; margin: 0 auto; text-align: center; } .patamar-spotlight-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.85rem; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.22em; color: #5C4838; background: rgba(255, 255, 255, 0.65); border: 1px solid rgba(154, 120, 88, 0.45); margin-bottom: 1rem; } .patamar-spotlight-actions { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 1.25rem; max-width: 22rem; margin-left: auto; margin-right: auto; } @media (min-width: 480px) { .patamar-spotlight-actions { flex-direction: row; justify-content: center; max-width: none; } } .patamar-spotlight-actions button { flex: 1; min-height: 48px; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; } .patamar-btn-primary { background: var(--gold-gradient); color: #1C1C1A; border: none; box-shadow: 0 6px 24px rgba(154, 120, 88, 0.28); } .patamar-btn-secondary { background: transparent; border: 1px solid var(--border-strong); color: var(--text-color); } .scarcity-badge-warm { background: linear-gradient(90deg, #5C4838, #7A5E42) !important; color: #FAF7F2 !important; border-color: rgba(228, 212, 196, 0.45) !important; } .essentiel-slots-warm { background: linear-gradient(90deg, #6E5438, #8B6F4E) !important; color: #FAF7F2 !important; border-color: rgba(228, 212, 196, 0.4) !important; } .pricing-tier-warm { background: linear-gradient(165deg, #3D3028 0%, #5C4838 50%, #6E5438 100%) !important; color: #FFFFFF !important; } /* Cards de pricing — texto branco legível em fundos escuros */ #pricing .pricing-tier-warm h3, #pricing .pricing-tier-warm p, #pricing .pricing-tier-warm span, #pricing .pricing-tier-warm li, #pricing .pricing-tier-warm ul { color: #FFFFFF; } #pricing .pricing-tier-warm .gold-gradient-text { background: linear-gradient(135deg, #F5E6D3 0%, #E8D5C4 50%, #CBA381 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } #pricing .pricing-tier-warm li.opacity-40 span { color: rgba(255, 255, 255, 0.5) !important; } #pricing .essentiel-slots-warm, #pricing .essentiel-slots-warm span { color: #FFFFFF !important; } #pricing .essentiel-slots-warm span.text-\[\#B8A38E\] { color: #E8D5C4 !important; } #pricing .pricing-featured .essentiel-slots-warm { border-color: rgba(255, 255, 255, 0.25) !important; } #pricing .pricing-tier-warm .elite-badge { background: linear-gradient(135deg, #E8D5C4 0%, #B8A38E 50%, #8D7A65 100%) !important; color: #1C1C1A !important; } .funnel-step-label { display: inline-block; font-size: 8px; text-transform: uppercase; letter-spacing: 0.28em; color: var(--gold-accent-strong); font-weight: 700; margin-bottom: 0.5rem; } /* ═══════════════════════════════════════════════════════════ PRICING — escada de preço (quebra cognitiva rápida) ═══════════════════════════════════════════════════════════ */ .pricing-ladder { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.35rem 0.65rem; max-width: 42rem; margin: 0 auto 1.5rem; padding: 0.65rem 1rem; border: 1px solid var(--border-color); background: var(--bg-alt); font-size: clamp(8px, 2.2vw, 10px); text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-muted); } .pricing-ladder strong { color: var(--pricing-price-color, var(--gold-accent-strong)); font-weight: 700; letter-spacing: 0.12em; } .plan-fit { font-size: clamp(8px, 2.2vw, 10px); text-transform: none; letter-spacing: 0.04em; line-height: 1.45; color: var(--text-muted); margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-color); } .plan-fit--featured { color: var(--gold-accent-strong, var(--gold-accent)); } .plan-fit--warm { color: #E8D5C4; border-bottom-color: rgba(232, 213, 196, 0.25); } [data-theme="obsidian"] .plan-fit { color: var(--text-muted); } [data-theme="obsidian"] .plan-fit--featured { color: var(--gold-accent); } .pricing-ladder-sep { color: var(--gold-accent); opacity: 0.65; font-size: 0.85em; } .hero-price-teaser { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.25rem 0.4rem; margin: 0 auto; padding: 0.55rem 1rem; border: 1px solid var(--border-color); background: var(--bg-alt); font-size: clamp(9px, 2.4vw, 11px); text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-muted); transition: border-color 0.2s, color 0.2s, background 0.2s; } .hero-price-teaser--quiet { padding: 0; border: none; background: transparent; font-size: clamp(10px, 2.2vw, 11px); letter-spacing: 0.16em; color: var(--text-muted); opacity: 0.72; } .hero-price-teaser--quiet .hero-price-teaser-hint { opacity: 0.75; } .hero-price-teaser--quiet:hover { opacity: 0.78; color: var(--text-color); background: transparent; border: none; } .hero-wa-cta--conversion { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 10px 28px rgba(0, 0, 0, 0.22); } .hero-wa-cta--conversion:hover { filter: brightness(1.06); } .hero-price-teaser strong { color: var(--gold-accent-strong, var(--gold-accent)); font-weight: 700; } .hero-price-teaser-hint { color: var(--gold-accent); opacity: 0.9; } .hero-price-teaser:hover { border-color: rgba(184, 163, 142, 0.45); color: var(--text-color); background: var(--cursor-focus); } .pricing-groups-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 0.75rem; max-width: 44rem; margin: 0 auto 1rem; font-size: clamp(7px, 2vw, 9px); text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-soft); } .pricing-group-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.65rem; border: 1px solid var(--border-color); background: var(--bg-color); } .pricing-group-chip b { color: var(--gold-accent-strong, var(--gold-accent)); font-weight: 700; } [data-theme="obsidian"] .hero-price-teaser { background: rgba(255, 255, 255, 0.04); border-color: rgba(184, 163, 142, 0.28); } [data-theme="obsidian"] .pricing-group-chip { background: rgba(255, 255, 255, 0.03); border-color: rgba(184, 163, 142, 0.22); color: var(--text-muted); } /* ═══════════════════════════════════════════════════════════ OBSIDIAN — legibilidade global + pricing ═══════════════════════════════════════════════════════════ */ [data-theme="obsidian"] .section-eyebrow { color: var(--gold-accent); } [data-theme="obsidian"] .section-eyebrow .eyebrow-en { color: var(--text-soft); opacity: 1; } [data-theme="obsidian"] .stakes-card-icon { background: linear-gradient(135deg, #F0E0CE 0%, #B8A38E 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-theme="obsidian"] .stakes-card h4 { color: var(--text-color); } [data-theme="obsidian"] .stakes-card p, [data-theme="obsidian"] .stakes-callout { color: var(--text-muted); } [data-theme="obsidian"] .stakes-callout b { color: var(--gold-accent); } [data-theme="obsidian"] .funnel-nav a { color: var(--text-color); opacity: 0.78; } [data-theme="obsidian"] .funnel-nav a:hover { color: var(--gold-accent); opacity: 1; } [data-theme="obsidian"] .hero-wa-cta { background: linear-gradient(135deg, #2A2520 0%, #141210 100%) !important; color: #F4F2EE !important; border: 1px solid rgba(184, 163, 142, 0.45) !important; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); } [data-theme="obsidian"] .hero-plans-cta { background: transparent; color: var(--text-color); border-color: rgba(184, 163, 142, 0.4) !important; } [data-theme="obsidian"] .hero-plans-cta:hover { background: rgba(184, 163, 142, 0.12) !important; color: var(--gold-accent) !important; } [data-theme="obsidian"] .header-wa-cta { border-color: rgba(184, 163, 142, 0.5) !important; color: var(--text-color); } [data-theme="obsidian"] .header-wa-cta:hover { color: #1C1C1A !important; } [data-theme="obsidian"] .trust-stat-value { color: var(--gold-accent); } [data-theme="obsidian"] .trust-stat-label { color: var(--text-soft); opacity: 1; } [data-theme="obsidian"] #mobile-funnel-dock { background: color-mix(in srgb, var(--bg-alt) 92%, #B8A38E 8%); border-top-color: rgba(184, 163, 142, 0.35); } [data-theme="obsidian"] #mobile-funnel-dock button { color: var(--text-color); } [data-theme="obsidian"] #processo { background: var(--bg-alt); } [data-theme="obsidian"] .plan-compare-badge { background: linear-gradient(135deg, #2A2520, #141210); color: #F4F2EE; border: 1px solid rgba(184, 163, 142, 0.35); } [data-theme="obsidian"] .patamar-btn-secondary { color: var(--text-color); border-color: rgba(184, 163, 142, 0.4); } [data-theme="obsidian"] .gold-gradient-text { background: linear-gradient(135deg, #F0E0CE 0%, #D4BC9A 50%, #B8A38E 100%); -webkit-background-clip: text; background-clip: text; } [data-theme="obsidian"] .plan-compare-card { background: #121212; border-color: rgba(184, 163, 142, 0.22); } [data-theme="obsidian"] .plan-compare-card.is-recommended { border-color: rgba(212, 188, 154, 0.55); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); } [data-theme="obsidian"] .plan-compare-meta-label { color: var(--gold-accent); } [data-theme="obsidian"] .plan-compare-name, [data-theme="obsidian"] .plan-compare-meta-price { color: var(--text-color); } [data-theme="obsidian"] .plan-compare-desc { color: var(--text-muted); opacity: 1; } [data-theme="obsidian"] .plan-compare-cta { color: var(--text-color); border-top-color: rgba(244, 242, 238, 0.12); } [data-theme="obsidian"] .plan-compare-cta:hover { background: var(--text-color); color: var(--bg-color); } [data-theme="obsidian"] .plan-compare-link { color: var(--text-soft); opacity: 1; } [data-theme="obsidian"] .testimonial-card { background: #101010; } [data-theme="obsidian"] .testimonial-quote, [data-theme="obsidian"] .testimonial-author { color: var(--text-color); } [data-theme="obsidian"] .testimonial-role { color: var(--text-soft); opacity: 1; } [data-theme="obsidian"] .audience-card { background: #101010; } [data-theme="obsidian"] .audience-card p { color: var(--text-muted); opacity: 1; } [data-theme="obsidian"] .audience-exclude { color: var(--text-muted); opacity: 1; background: rgba(255, 255, 255, 0.03); } [data-theme="obsidian"] .zone-pricing { border-top-color: rgba(184, 163, 142, 0.2); } [data-theme="obsidian"] .pricing-ladder { background: rgba(255, 255, 255, 0.04); border-color: rgba(184, 163, 142, 0.28); color: var(--text-muted); } [data-theme="obsidian"] .pricing-ladder strong { color: var(--pricing-price-color); } [data-theme="obsidian"] #pricing .pricing-intro-badge { background: rgba(244, 242, 238, 0.95) !important; color: #1C1C1A !important; } [data-theme="obsidian"] #pricing h2, [data-theme="obsidian"] #pricing .pricing-intro { color: var(--text-color); } [data-theme="obsidian"] #pricing .drag-item:not(.pricing-tier-warm) { color: var(--pricing-card-text); border-color: rgba(184, 163, 142, 0.22); } [data-theme="obsidian"] #pricing .drag-item:not(.pricing-tier-warm) h3, [data-theme="obsidian"] #pricing .drag-item:not(.pricing-tier-warm) .text-\[var\(--text-color\)\] { color: var(--pricing-card-text); } [data-theme="obsidian"] #pricing .drag-item:not(.pricing-tier-warm) .font-serif.tracking-tight, [data-theme="obsidian"] #pricing .drag-item:not(.pricing-tier-warm) .text-2xl, [data-theme="obsidian"] #pricing .drag-item:not(.pricing-tier-warm) .text-3xl, [data-theme="obsidian"] #pricing .drag-item:not(.pricing-tier-warm) .text-4xl { color: var(--pricing-price-color); } [data-theme="obsidian"] #pricing .drag-item:not(.pricing-tier-warm) ul { color: var(--pricing-card-muted); opacity: 1 !important; } [data-theme="obsidian"] #pricing .drag-item:not(.pricing-tier-warm) ul li:not(.opacity-30) { color: var(--pricing-card-text); } [data-theme="obsidian"] #pricing .drag-item:not(.pricing-tier-warm) li.opacity-30 { opacity: var(--pricing-excluded-opacity) !important; color: var(--text-soft); } [data-theme="obsidian"] #pricing .drag-item:not(.pricing-tier-warm) li.opacity-30 span { color: var(--text-soft) !important; } [data-theme="obsidian"] #pricing .drag-item:not(.pricing-tier-warm) .opacity-50, [data-theme="obsidian"] #pricing .drag-item:not(.pricing-tier-warm) .opacity-40 { color: var(--text-soft) !important; opacity: 1 !important; } [data-theme="obsidian"] #pricing .drag-item:not(.pricing-tier-warm) button { color: var(--text-color); border-color: rgba(184, 163, 142, 0.35); } [data-theme="obsidian"] #pricing .drag-item:not(.pricing-tier-warm) button:hover { background: var(--gold-accent); color: #1C1C1A; border-color: transparent; } [data-theme="obsidian"] #pricing .pricing-featured { border-color: rgba(212, 188, 154, 0.55); box-shadow: 0 8px 36px rgba(0, 0, 0, 0.4); } [data-theme="obsidian"] .scroll-hint { color: var(--text-soft) !important; opacity: 1 !important; } [data-theme="obsidian"] .zone-cta-final .cta-primary { color: #1C1C1A !important; } [data-theme="obsidian"] .faq-item h4 { color: var(--text-color); } [data-theme="obsidian"] .faq-answer p { color: var(--text-muted); } [data-theme="obsidian"] .audit-proof-cta { color: var(--gold-accent); border-bottom-color: rgba(212, 188, 154, 0.45); } [data-theme="obsidian"] .deliverable-card { background: rgba(255, 255, 255, 0.03); border-color: rgba(184, 163, 142, 0.2); } [data-theme="obsidian"] .deliverable-card--pwa { background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(184, 163, 142, 0.1) 100%); border-color: rgba(212, 188, 154, 0.45); } [data-theme="obsidian"] .deliverable-desc { color: var(--text-muted); opacity: 1; } [data-theme="obsidian"] .pricing-table { border-color: rgba(184, 163, 142, 0.22); background: rgba(255, 255, 255, 0.02); } [data-theme="obsidian"] .pricing-table-head { background: rgba(255, 255, 255, 0.04); color: var(--text-soft); } [data-theme="obsidian"] .pricing-table-row { border-color: rgba(184, 163, 142, 0.15); } [data-theme="obsidian"] .pricing-table-row.is-featured { background: rgba(184, 163, 142, 0.1); } [data-theme="obsidian"] .pricing-table-for, [data-theme="obsidian"] .pricing-table-prazo { color: var(--text-muted); opacity: 1; } [data-theme="obsidian"] .pricing-table-price, [data-theme="obsidian"] .pricing-table-name { color: var(--pricing-price-color, var(--text-color)); } [data-theme="obsidian"] .pricing-table-cta { border-color: rgba(184, 163, 142, 0.35); color: var(--text-color); } [data-theme="obsidian"] .pricing-table-note-link { color: var(--gold-accent); } [data-theme="obsidian"] .seo-guide-card { background: rgba(255, 255, 255, 0.03); border-color: rgba(184, 163, 142, 0.2); } [data-theme="obsidian"] .seo-guide-card:hover { border-color: rgba(212, 188, 154, 0.45); } [data-theme="obsidian"] .deliverable-card--domain { background: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(184, 163, 142, 0.08) 100%); border-color: rgba(212, 188, 154, 0.4); } [data-theme="obsidian"] .domain-inclusion-badge { background: rgba(184, 163, 142, 0.12); border-color: rgba(212, 188, 154, 0.35); color: var(--text-color); } [data-theme="obsidian"] .seo-guide-desc { color: var(--text-muted); opacity: 1; } /* === lead-gate.css === */ /* ═══════════════════════════════════════════════════════════ LEAD GATE — pré-WhatsApp (2 passos · segmento → nicho) ═══════════════════════════════════════════════════════════ */ body.lead-gate-open { overflow: hidden; } .lead-gate { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; padding: 0; pointer-events: none; } .lead-gate.is-open { pointer-events: auto; } .lead-gate__backdrop { position: absolute; inset: 0; background: rgba(28, 28, 26, 0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.28s ease; } .lead-gate.is-open .lead-gate__backdrop { opacity: 1; } .lead-gate__sheet { position: relative; z-index: 1; width: 100%; max-width: 26.5rem; max-height: min(92vh, 50rem); overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--bg-color, #F5F5F3); border: 1px solid rgba(141, 122, 101, 0.4); border-radius: 1.1rem 1.1rem 0 0; padding: 1.35rem 1.15rem calc(1.35rem + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -20px 60px rgba(28, 28, 26, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.5); transform: translateY(105%); transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1); } .lead-gate.is-open .lead-gate__sheet { transform: translateY(0); } .lead-gate__sheet-accent { position: absolute; top: 0; left: 1.25rem; right: 1.25rem; height: 2px; background: linear-gradient(90deg, transparent, #B8A38E 20%, #CBA381 50%, #B8A38E 80%, transparent); pointer-events: none; } .lead-gate__close { position: absolute; top: 0.75rem; right: 0.75rem; width: 2.25rem; height: 2.25rem; border: 1px solid rgba(141, 122, 101, 0.35); background: rgba(255, 255, 255, 0.65); color: var(--text-color); font-size: 1.25rem; line-height: 1; cursor: pointer; border-radius: 2px; } .lead-gate__back { display: inline-flex; align-items: center; gap: 0.15rem; margin: 0 0 0.5rem; padding: 0.25rem 0; border: none; background: transparent; color: var(--gold-accent-strong, #6E5438); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; } .lead-gate__progress { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.65rem; padding-bottom: 0.55rem; border-bottom: 1px solid rgba(141, 122, 101, 0.18); } .lead-gate__progress-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-soft, #8D7A65); } .lead-gate__progress-dots { display: inline-flex; gap: 0.35rem; } .lead-gate__progress-dots i { display: block; width: 1.35rem; height: 3px; background: rgba(141, 122, 101, 0.22); border-radius: 1px; font-style: normal; transition: background 0.2s, width 0.2s; } .lead-gate__progress-dots i.is-active { background: rgba(141, 122, 101, 0.45); } .lead-gate__progress-dots i.is-current { width: 2rem; background: linear-gradient(90deg, #CBA381, #9F8265); } .lead-gate__eyebrow { font-size: 8px; text-transform: uppercase; letter-spacing: 0.32em; color: var(--gold-accent-strong, #6E5438); margin: 0 0 0.3rem; } .lead-gate__title { font-family: Georgia, 'Times New Roman', serif; font-size: 1.15rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 2rem 0.3rem 0; color: var(--text-color); line-height: 1.28; } .lead-gate__subtitle { font-size: 12px; line-height: 1.5; color: var(--text-muted, #5C5C56); margin: 0 0 0.75rem; } .lead-gate__plan-hint { font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-accent-strong, #6E5438); margin: 0 0 0.75rem; padding: 0.5rem 0.65rem; border: 1px solid rgba(141, 122, 101, 0.38); background: linear-gradient(135deg, rgba(232, 213, 196, 0.2), rgba(255, 255, 255, 0.35)); } .lead-gate__legend { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-color); margin: 0 0 0.55rem; } .lead-gate__optional { font-weight: 400; opacity: 0.5; text-transform: none; letter-spacing: 0; } /* ── Passo 1: segmentos ── */ .lead-gate__segment-grid { display: flex; flex-direction: column; gap: 0.45rem; } .lead-gate__segment { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.65rem; width: 100%; text-align: left; padding: 0.75rem 0.8rem; min-height: 52px; border: 1px solid rgba(141, 122, 101, 0.32); background: rgba(255, 255, 255, 0.55); cursor: pointer; border-radius: 2px; transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s; } .lead-gate__segment:hover { border-color: rgba(141, 122, 101, 0.55); box-shadow: 0 4px 16px rgba(110, 84, 56, 0.08); } .lead-gate__segment:active { transform: scale(0.99); } .lead-gate__segment--gold { border-color: rgba(184, 163, 142, 0.55); background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(232, 213, 196, 0.18)); } .lead-gate__segment--gold .lead-gate__segment-icon { color: #9F8265; border-color: rgba(184, 163, 142, 0.5); } .lead-gate__segment-icon { display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; font-size: 10px; color: var(--text-soft, #8D7A65); border: 1px solid rgba(141, 122, 101, 0.28); border-radius: 2px; flex-shrink: 0; } .lead-gate__segment-body { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; } .lead-gate__segment-title { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--text-color); } .lead-gate__segment-hint { font-size: 10px; line-height: 1.35; color: var(--text-muted, #5C5C56); } .lead-gate__segment-chevron { font-size: 1.1rem; line-height: 1; color: rgba(141, 122, 101, 0.55); } .lead-gate__segment:focus-visible { outline: 2px solid var(--gold-accent, #B8A38E); outline-offset: 2px; } /* ── Passo 2: nichos ── */ .lead-gate__niche-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; } .lead-gate__niche { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.55rem 0.45rem; border: 1px solid rgba(141, 122, 101, 0.32); background: rgba(255, 255, 255, 0.45); color: var(--text-color); font-size: 10px; font-weight: 500; line-height: 1.3; text-align: center; cursor: pointer; border-radius: 2px; transition: background 0.15s, border-color 0.15s, color 0.15s; } .lead-gate__niche.is-selected { background: var(--text-color, #1C1C1A); border-color: var(--text-color, #1C1C1A); color: var(--bg-color, #F5F5F3); } .lead-gate__niche:focus-visible { outline: 2px solid var(--gold-accent, #B8A38E); outline-offset: 2px; } .lead-gate__niche-more { display: block; width: 100%; margin-top: 0.45rem; padding: 0.5rem; border: none; border-bottom: 1px solid rgba(141, 122, 101, 0.28); background: transparent; color: var(--gold-accent-strong, #6E5438); font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; } /* ── Detalhes (após nicho) ── */ .lead-gate__details { margin-top: 0.85rem; animation: leadGateDetailsIn 0.28s ease; } .lead-gate__details.is-visible { display: block; } @keyframes leadGateDetailsIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .lead-gate__stitch { height: 1px; margin-bottom: 0.75rem; background: linear-gradient(90deg, transparent, rgba(141, 122, 101, 0.35), transparent); } .lead-gate__details-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-soft, #8D7A65); margin: 0 0 0.55rem; } .lead-gate__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; } .lead-gate__chip { border: 1px solid rgba(141, 122, 101, 0.32); background: rgba(255, 255, 255, 0.45); color: var(--text-color); font-size: 10px; font-weight: 500; line-height: 1.25; padding: 0.45rem 0.55rem; min-height: 36px; cursor: pointer; border-radius: 2px; transition: background 0.15s, border-color 0.15s; } .lead-gate__chip--sm { font-size: 9px; min-height: 34px; } .lead-gate__chip.is-selected { background: var(--text-color, #1C1C1A); border-color: var(--text-color, #1C1C1A); color: var(--bg-color, #F5F5F3); } .lead-gate__other label, .lead-gate__field label { display: block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 0.35rem; color: var(--text-color); } .lead-gate__other { margin-top: 0.55rem; } .lead-gate__input { width: 100%; border: 1px solid rgba(141, 122, 101, 0.35); background: rgba(255, 255, 255, 0.65); color: var(--text-color); font-size: 14px; padding: 0.65rem 0.75rem; border-radius: 2px; min-height: 44px; } .lead-gate__input:focus { outline: 2px solid var(--gold-accent, #B8A38E); outline-offset: 1px; border-color: var(--gold-accent, #B8A38E); } .lead-gate__field { margin-bottom: 0.7rem; } .lead-gate__privacy { font-size: 9px; line-height: 1.45; color: var(--text-muted, #5C5C56); margin: 0.85rem 0 0.65rem; } .lead-gate__privacy a { color: var(--gold-accent-strong, #6E5438); text-decoration: underline; } .lead-gate__submit { width: 100%; min-height: 48px; border: none; background: linear-gradient(135deg, #CBA381 0%, #9F8265 50%, #765D46 100%); color: #111; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.22em; cursor: pointer; border-radius: 2px; box-shadow: 0 4px 20px rgba(154, 120, 88, 0.25); transition: opacity 0.2s, box-shadow 0.2s; } .lead-gate__submit:disabled { opacity: 0.38; cursor: not-allowed; box-shadow: none; } .lead-gate__submit:not(:disabled):hover { opacity: 0.94; } @media (min-width: 640px) { .lead-gate { align-items: center; padding: 1.5rem; } .lead-gate__sheet { border-radius: 4px; max-height: min(88vh, 46rem); padding: 1.5rem 1.35rem 1.35rem; transform: translateY(10px) scale(0.98); opacity: 0; transition: transform 0.28s ease, opacity 0.28s ease; } .lead-gate.is-open .lead-gate__sheet { transform: translateY(0) scale(1); opacity: 1; } } [data-theme="obsidian"] .lead-gate__sheet { background: #0E0E0E; border-color: rgba(232, 213, 196, 0.22); box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.45); } [data-theme="obsidian"] .lead-gate__segment, [data-theme="obsidian"] .lead-gate__niche, [data-theme="obsidian"] .lead-gate__chip { background: rgba(255, 255, 255, 0.04); border-color: rgba(232, 213, 196, 0.2); color: #F4F2EE; } [data-theme="obsidian"] .lead-gate__segment--gold { background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(184, 163, 142, 0.08)); } [data-theme="obsidian"] .lead-gate__niche.is-selected, [data-theme="obsidian"] .lead-gate__chip.is-selected { background: var(--gold-accent, #B8A38E); color: #111; border-color: var(--gold-accent, #B8A38E); } [data-theme="obsidian"] .lead-gate__input { background: rgba(255, 255, 255, 0.04); border-color: rgba(232, 213, 196, 0.22); color: #F4F2EE; } @media (prefers-reduced-motion: reduce) { .lead-gate__sheet, .lead-gate__backdrop, .lead-gate__details { animation: none; transition: none; } } /* === sv-conversion.css === */ /* ═══════════════════════════════════════════════════════════ SV CONVERSION — ICP, outcomes, bands, sticky rail ═══════════════════════════════════════════════════════════ */ .hero-icp-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin-bottom: 1rem; } @media (min-width: 768px) { .hero-icp-pills { justify-content: flex-start; } } .hero-icp-pill { font-size: clamp(7px, 2vw, 9px); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; padding: 0.38rem 0.62rem; border: 1px solid var(--border-color); border-radius: 999px; color: var(--text-color); opacity: 0.78; background: rgba(255, 255, 255, 0.35); white-space: nowrap; } [data-theme="obsidian"] .hero-icp-pill { background: rgba(255, 255, 255, 0.04); } .hero-icp-pill.is-highlight { opacity: 1; border-color: rgba(184, 163, 142, 0.55); color: var(--gold-accent-strong, #8D7A65); background: rgba(184, 163, 142, 0.1); } .hero-outcomes { list-style: none; margin: 0 0 1.1rem; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; max-width: 28rem; text-align: center; margin-left: auto; margin-right: auto; } @media (max-width: 767px) { .hero-outcomes { max-width: 20rem; margin-bottom: 0.35rem; gap: 0.35rem; } .hero-icp-pills { margin-bottom: 0.65rem; } .section-eyebrow.mb-3 { margin-bottom: 0.5rem; } } @media (min-width: 768px) { .hero-outcomes { text-align: left; margin-left: 0; margin-right: 0; } .hero-outcome { justify-content: flex-start; } } .hero-outcome { display: flex; align-items: flex-start; justify-content: center; gap: 0.55rem; font-size: clamp(11px, 2.8vw, 13px); line-height: 1.45; color: var(--text-color); opacity: 0.88; } .hero-outcome__icon { flex-shrink: 0; width: 1.15rem; height: 1.15rem; margin-top: 0.1rem; border-radius: 50%; background: rgba(184, 163, 142, 0.18); color: var(--gold-accent-strong, #8D7A65); font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .hero-outcome b { font-weight: 600; color: var(--text-color); } .hero-outcome--desktop { display: none; } @media (min-width: 768px) { .hero-outcome--desktop { display: flex; } } @media (min-width: 768px) { .hero-outcome { justify-content: flex-start; } } .hero-risk-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem 0.75rem; margin-top: 0.65rem; font-size: clamp(8px, 2.2vw, 10px); text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-color); opacity: 0.62; } @media (min-width: 768px) { .hero-risk-strip { justify-content: flex-start; } } .planos-risk-strip { justify-content: center !important; max-width: 40rem; margin: 1rem auto 0; opacity: 0.58; } .hero-risk-strip span::before { content: '·'; margin-right: 0.75rem; opacity: 0.5; } .hero-risk-strip span:first-child::before { content: none; margin: 0; } .planos-risk-link { background: none; border: none; padding: 0.35rem 0.25rem; min-height: 44px; display: inline-flex; align-items: center; font: inherit; font-size: inherit; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold-accent-strong, #7A5E42); cursor: pointer; opacity: 0.85; text-decoration: underline; text-underline-offset: 0.2em; } .planos-risk-link::before { content: '·'; margin-right: 0.75rem; opacity: 0.5; text-decoration: none; } .planos-risk-link:hover, .planos-risk-link:focus-visible { opacity: 1; } /* ── Conversion band (mid-funnel) ── */ .conversion-band { position: relative; padding: 2.5rem 1.5rem; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); background: linear-gradient(135deg, rgba(184, 163, 142, 0.12) 0%, transparent 42%), var(--bg-alt); overflow: hidden; } .conversion-band__inner { max-width: 44rem; margin: 0 auto; text-align: center; } .conversion-band__eyebrow { font-size: clamp(8px, 2.2vw, 10px); text-transform: uppercase; letter-spacing: 0.32em; color: var(--gold-accent-strong, #8D7A65); margin-bottom: 0.75rem; } .conversion-band__title { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.15rem, 4vw, 1.75rem); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-color); line-height: 1.25; margin-bottom: 0.75rem; } .conversion-band__sub { font-size: clamp(11px, 2.8vw, 14px); line-height: 1.6; color: var(--text-color); opacity: 0.72; max-width: 32rem; margin: 0 auto 1.35rem; font-weight: 300; } .conversion-band__actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.65rem; max-width: 22rem; margin: 0 auto; } @media (min-width: 640px) { .conversion-band__actions { flex-direction: row; justify-content: center; max-width: none; } .conversion-band__actions button { width: auto; min-width: 11rem; } } .conversion-band__wa { background: var(--gold-gradient); color: #1C1C1A; border: none; padding: 0.95rem 1.5rem; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; box-shadow: 0 8px 28px rgba(154, 120, 88, 0.25); transition: filter 0.2s, transform 0.2s; } .conversion-band__wa:hover { filter: brightness(1.06); } .conversion-band__plans { border: 1px solid var(--border-color); background: var(--bg-color); color: var(--text-color); padding: 0.95rem 1.5rem; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; transition: background 0.2s, border-color 0.2s; } .conversion-band__plans:hover { background: var(--cursor-focus); border-color: rgba(184, 163, 142, 0.45); } .conversion-band__fine { margin-top: 1rem; font-size: clamp(8px, 2.2vw, 10px); text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-color); opacity: 0.55; } @media (min-width: 1024px) { .conversion-band { padding: 3rem 2.5rem; } .conversion-band__inner { max-width: 56rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; gap: 0.5rem 2.5rem; text-align: left; align-items: start; } .conversion-band__eyebrow, .conversion-band__title, .conversion-band__sub { grid-column: 1; } .conversion-band__sub { margin-left: 0; margin-right: 0; max-width: 36rem; } .conversion-band__actions { grid-column: 2; grid-row: 1 / span 3; flex-direction: column; align-items: stretch; justify-content: center; margin: 0; min-width: 15rem; } .conversion-band__fine { grid-column: 1 / -1; text-align: center; margin-top: 1.25rem; } } /* ── Desktop / tablet sticky conversion rail ── */ #glid-conversion-rail { position: fixed; top: 0; left: 0; right: 0; z-index: 95; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.55rem 1.25rem; background: color-mix(in srgb, var(--bg-color) 94%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border-color); transform: translateY(-110%); opacity: 0; pointer-events: none; transition: transform 0.35s ease, opacity 0.35s ease; } #glid-conversion-rail.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; } #glid-conversion-rail .rail-copy { min-width: 0; flex: 1; } #glid-conversion-rail .rail-eyebrow { font-size: 7px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--gold-accent-strong, #8D7A65); margin-bottom: 0.15rem; } #glid-conversion-rail .rail-title { font-size: clamp(9px, 1.8vw, 11px); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #glid-conversion-rail .rail-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } #glid-conversion-rail .rail-wa { background: var(--gold-gradient); color: #1C1C1A; border: none; padding: 0.55rem 1rem; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; white-space: nowrap; } #glid-conversion-rail .rail-price { font-size: 8px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-color); opacity: 0.65; border: 1px solid var(--border-color); padding: 0.55rem 0.75rem; background: transparent; white-space: nowrap; } @media (max-width: 767px) { #glid-conversion-rail { display: none !important; } } @media (min-width: 768px) { body.rail-active #main-header { transform: translateY(-110%); opacity: 0 !important; pointer-events: none; transition: transform 0.35s ease, opacity 0.35s ease; } #main-header { transition: transform 0.35s ease, opacity 0.35s ease; } } .audience-card.is-icp-primary { border-color: rgba(184, 163, 142, 0.45); background: rgba(184, 163, 142, 0.06); } .audience-card.is-icp-primary h4 { color: var(--gold-accent-strong, #8D7A65); } /* === ux-refine.css === */ /* ═══════════════════════════════════════════════════════════ UX REFINE — Paleta definida · tipografia legível · scroll glow ═══════════════════════════════════════════════════════════ */ /* Métrica alinhada à Cormorant — reduz “pulo” antes do webfont carregar */ @font-face { font-family: 'Cormorant Fallback'; src: local('Georgia'); size-adjust: 94%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; } :root { --font-display: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, 'Times New Roman', serif; --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Cashmere — mais claro, contraste WCAG-friendly */ --bg-color: #FAFAF8; --bg-alt: #F2EFEA; --bg-abismo: #EBE7E1; --text-color: #1C1C1A; --text-muted: #3D3D38; --text-soft: #5C5C56; --border-color: rgba(28, 28, 26, 0.16); --border-strong: rgba(139, 111, 78, 0.42); --gold-accent: #9A7858; --gold-accent-strong: #7A5E42; --gold-light: #E4D4C4; --gold-glow: rgba(228, 212, 196, 0.72); --gold-glow-mid: rgba(184, 163, 142, 0.38); --grid-line: rgba(154, 120, 88, 0.14); --cursor-focus: rgba(154, 120, 88, 0.08); --gold-gradient: linear-gradient(135deg, #C4A882 0%, #9A7858 48%, #6E5438 100%); --card-0-bg: #F7F5F2; --card-1-bg: #F0EBE4; --card-2-bg: #E8E2D9; --card-3-bg: #DFDBD2; --card-5-bg: #D4CEC4; --scroll-glow-y: 32%; --scroll-glow-opacity: 0.72; --scroll-progress: 0; --dock-glow: 0; --site-header-clearance: 6.25rem; /* Viewport tokens — comparador antes/depois */ --ba-height-mobile: min(40dvh, 360px); --ba-height-tablet: 60dvh; --ba-height-desktop: 70dvh; /* Quebra cognitiva — zonas (Cashmere) */ --zone-stakes-bg: linear-gradient(180deg, #F8F0E6 0%, #F2E8DA 100%); --zone-proof-bg: #F4F7F2; --zone-compare-bg: var(--bg-alt); --zone-deliverables-bg: #F0EDE8; --zone-pricing-bg: var(--bg-color); --zone-cta-bg: linear-gradient(165deg, #5C4838 0%, #7A5E42 45%, #9A7858 100%); --zone-warm-deep: #5C4838; --stakes-card-bg: rgba(255, 252, 248, 0.88); --stakes-card-border: rgba(122, 94, 66, 0.22); --stakes-callout-bg: rgba(255, 255, 255, 0.45); --pricing-card-text: var(--text-color); --pricing-card-muted: var(--text-muted); --pricing-price-color: var(--text-color); --pricing-excluded-opacity: 0.38; } [data-theme="obsidian"] { --bg-color: #070707; --bg-alt: #0C0C0C; --bg-abismo: #101010; --text-color: #F4F2EE; --text-muted: #C8C4BC; --text-soft: #9A968E; --border-color: rgba(244, 242, 238, 0.14); --border-strong: rgba(232, 213, 196, 0.38); --gold-accent: #D4BC9A; --gold-accent-strong: #E8D5C4; --gold-light: #B8A38E; --gold-glow: rgba(232, 213, 196, 0.22); --gold-glow-mid: rgba(184, 163, 142, 0.14); --grid-line: rgba(232, 213, 196, 0.08); --card-0-bg: #141414; --card-1-bg: #161616; --card-2-bg: #181818; --card-3-bg: #1A1A1A; --card-5-bg: #1E1E1E; --zone-stakes-bg: linear-gradient(180deg, #141210 0%, #0C0C0C 100%); --zone-proof-bg: #0A0A0A; --zone-compare-bg: #0E0E0E; --zone-deliverables-bg: #0C0C0C; --zone-pricing-bg: #080808; --zone-cta-bg: linear-gradient(165deg, #2A2018 0%, #3D3028 45%, #5C4838 100%); --stakes-card-bg: rgba(255, 255, 255, 0.05); --stakes-card-border: rgba(184, 163, 142, 0.22); --stakes-callout-bg: rgba(255, 255, 255, 0.04); --pricing-card-text: #F4F2EE; --pricing-card-muted: #B8B4AC; --pricing-price-color: #E8D5C4; --pricing-excluded-opacity: 0.62; } /* ── Tipografia: display sofisticado + corpo legível ── */ body, button, input, select, textarea { font-family: var(--font-body); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #main-content h1, #main-content h2, #main-content h3, .font-serif, .marquee-brand, .trust-stat-value, .plan-compare-name, .plan-compare-price, .testimonial-quote, .identity-text, .preloader-status, .dna-highlight { font-family: var(--font-display); } #main-content p, #main-content li, #main-content .faq-answer p, .audience-card p, .audience-exclude, .testimonial-role, .testimonial-author, .plan-compare-desc, .founder-credentials, .trust-stat-label { font-family: var(--font-body); font-weight: 400; line-height: 1.62; color: var(--text-muted); } #main-content h1, #main-content h2, #main-content h3, #main-content h4 { color: var(--text-color); font-weight: 600; } #main-content p.opacity-70, #main-content .opacity-70, #main-content .opacity-60, #main-content .opacity-55 { opacity: 1 !important; color: var(--text-muted); } #main-content .opacity-50, #main-content .opacity-40 { opacity: 1 !important; color: var(--text-soft); } button, .cta-primary, #mobile-funnel-dock button, .hero-cta-group button { font-family: var(--font-body); font-weight: 600; letter-spacing: 0.14em; } .section-eyebrow { color: var(--gold-accent-strong); font-weight: 600; letter-spacing: 0.32em; } /* ── Scroll: linha de progresso + halo que sobe ── */ #glid-scroll-progress { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; width: 100%; height: 2px; z-index: 120; pointer-events: none; background: var(--gold-gradient); transform: scaleX(var(--scroll-progress, 0)); transform-origin: left center; opacity: 0.92; box-shadow: 0 0 12px var(--gold-glow-mid); } /* ── Voltar ao topo (mid-funnel+) ── */ .back-top-btn { position: fixed; right: max(0.85rem, env(safe-area-inset-right, 0px)); bottom: max(1.25rem, env(safe-area-inset-bottom, 0px)); z-index: 88; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid color-mix(in srgb, var(--gold-accent) 42%, var(--border-color)); border-radius: 999px; background: color-mix(in srgb, var(--bg-color) 88%, transparent); color: var(--gold-accent-strong, var(--gold-accent)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 22px rgba(28, 28, 26, 0.08); cursor: pointer; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(0.65rem) scale(0.92); transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s ease, border-color 0.2s ease, background 0.2s ease; } .back-top-btn.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); } .back-top-btn:hover { border-color: color-mix(in srgb, var(--gold-accent) 65%, var(--border-color)); background: color-mix(in srgb, var(--bg-color) 94%, var(--gold-light, #E4D4C4) 6%); } .back-top-btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--gold-accent) 70%, transparent); outline-offset: 2px; } .back-top-btn__icon { width: 1rem; height: 1rem; } @media (max-width: 767px) { .back-top-btn { bottom: calc(env(safe-area-inset-bottom, 0px) + 5.65rem); right: max(0.75rem, env(safe-area-inset-right, 0px)); width: 2.35rem; height: 2.35rem; } } @media (min-width: 768px) { .back-top-btn { right: max(1.15rem, env(safe-area-inset-right, 0px)); bottom: max(1.35rem, env(safe-area-inset-bottom, 0px)); } } @media (prefers-reduced-motion: reduce) { .back-top-btn { transition: opacity 0.15s ease, visibility 0.15s ease; transform: none; } .back-top-btn.is-visible { transform: none; } } #glid-scroll-ambient { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: var(--scroll-glow-opacity); background: radial-gradient( ellipse 95% 42% at 50% var(--scroll-glow-y), var(--gold-glow) 0%, var(--gold-glow-mid) 38%, transparent 72% ); transition: opacity 0.35s ease; } [data-theme="obsidian"] #glid-scroll-ambient { background: radial-gradient( ellipse 90% 40% at 50% var(--scroll-glow-y), rgba(232, 213, 196, 0.16) 0%, rgba(184, 163, 142, 0.07) 40%, transparent 70% ); } #main-content { position: relative; z-index: 10; } /* ── Superfícies mais definidas ── */ #main-header { background: color-mix(in srgb, var(--bg-color) 88%, transparent) !important; border-bottom-color: var(--border-strong) !important; } .audience-card, .testimonial-card, .plan-compare-card, .faq-item, .drag-item { border-color: var(--border-color); } .audience-card, .plan-compare-card.is-recommended { box-shadow: 0 4px 24px rgba(28, 28, 26, 0.04); } .plan-compare-card.is-recommended { border-color: var(--border-strong); } .hero-plans-cta, .pricing-teaser button, .header-wa-cta { border-color: var(--border-strong) !important; } .hero-showcase__switch-btn { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .hero-showcase__switch-btn:focus-visible { outline: 2px solid var(--gold-accent); outline-offset: 3px; } @media (min-width: 768px) { #glid-trust-bar.hero-trust-metrics { justify-content: flex-start; max-width: 100%; } .hero-device-ref { opacity: 0.68; } .hero-showcase .hero-device-ref { max-width: none; opacity: 0.72; } .hero-device-ref__project { font-weight: 600; } } @media (min-width: 768px) and (max-width: 1023px) { .hero-showcase { margin-top: 0.25rem; } } .hero-plans-cta:hover, .pricing-teaser button:hover { background: var(--gold-light) !important; color: var(--text-color) !important; border-color: var(--gold-accent) !important; } #mobile-funnel-dock { background: color-mix(in srgb, var(--bg-color) 94%, var(--gold-light) 6%); border-top-color: var(--border-strong); } #mobile-funnel-dock button.dock-wa { box-shadow: 0 4px 20px rgba(154, 120, 88, 0.28); transition: box-shadow 0.35s ease, transform 0.35s ease, filter 0.35s ease; } #mobile-funnel-dock.is-glow-active button.dock-wa { box-shadow: 0 0 calc(12px + 28px * var(--dock-glow, 0)) rgba(210, 160, 90, calc(0.45 + 0.4 * var(--dock-glow, 0))), 0 4px calc(16px + 12px * var(--dock-glow, 0)) rgba(154, 120, 88, calc(0.35 + 0.35 * var(--dock-glow, 0))); filter: brightness(calc(1 + 0.08 * var(--dock-glow, 0))); transform: scale(calc(1 + 0.02 * var(--dock-glow, 0))); } #mobile-funnel-dock.is-glow-active button.dock-wa:active { transform: scale(0.98); } @keyframes dockWaPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.06); } } #mobile-funnel-dock.is-glow-active.is-glow-pulse button.dock-wa { animation: dockWaPulse 2.4s ease-in-out infinite; } .arch-grid { background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px); } /* ── Mobile: corpo maior, títulos equilibrados (Cashmere) ── */ @media (max-width: 767px) { :root:not([data-theme="obsidian"]) { --gold-accent: #8B6F4E; --gold-accent-strong: #6E5438; --border-strong: rgba(139, 111, 78, 0.55); --text-color: #181816; } :root:not([data-theme="obsidian"]) .section-eyebrow { color: #6E5438; font-size: clamp(8px, 2.4vw, 10px); } :root:not([data-theme="obsidian"]) .stakes-card { background: rgba(255, 255, 255, 0.92); box-shadow: 0 4px 20px rgba(110, 84, 56, 0.08); } :root:not([data-theme="obsidian"]) .zone-stakes, :root:not([data-theme="obsidian"]) .zone-price-spotlight { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); } :root:not([data-theme="obsidian"]) #mobile-funnel-dock { background: color-mix(in srgb, #F8F0E6 96%, #C4A882 4%); border-top: 2px solid rgba(139, 111, 78, 0.45); } :root:not([data-theme="obsidian"]) .hero-wa-cta { background: var(--gold-gradient); color: #1C1C1A; border: 1px solid rgba(141, 122, 101, 0.42) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 6px 28px rgba(154, 120, 88, 0.22), 0 0 0 1px rgba(61, 50, 40, 0.12); } :root:not([data-theme="obsidian"]) .hero-plans-cta { background: transparent; color: var(--text-color); border-color: var(--border-color) !important; box-shadow: none; } #main-content p, .audience-card p, .faq-answer p, .plan-compare-desc { font-size: 13px; line-height: 1.68; } #hero-title { font-weight: 700; letter-spacing: 0.04em; line-height: 1.2; } #main-content h2, #main-content h3.font-serif, .section-eyebrow + h2 { letter-spacing: 0.12em; } .faq-item h4 { font-family: var(--font-body); font-weight: 600; font-size: 11px; color: var(--text-color); } .marquee-brand { opacity: 0.88; color: var(--text-color); } .trust-stat-value { font-size: 1.5rem; } .trust-stat-label { font-size: 8px; color: var(--text-soft); } #glid-scroll-ambient { opacity: calc(var(--scroll-glow-opacity) * 0.85); } } @media (prefers-reduced-motion: reduce) { #glid-scroll-ambient, #glid-scroll-progress { display: none; } .hero-showcase__panel { transition: none !important; } } /* === legibility.css === */ /* ═══════════════════════════════════════════════════════════ LEGIBILITY — site oficial GL.ID vendas Tipografia legível · contraste WCAG-friendly · estética luxo ═══════════════════════════════════════════════════════════ */ :root { --type-micro: clamp(9px, 2.2vw, 10px); --type-caption: clamp(10px, 2.4vw, 12px); --type-body-sm: clamp(12px, 2.6vw, 14px); --type-body: clamp(14px, 2.8vw, 16px); --type-display-sm: clamp(1.15rem, 3.2vw, 1.75rem); --type-display: clamp(1.35rem, 4vw, 2.35rem); --leading-body: 1.62; --leading-tight: 1.35; --tracking-label: 0.18em; --tracking-eyebrow: 0.26em; } /* ── Base: corpo legível ── */ #main-content { font-size: var(--type-body-sm); line-height: var(--leading-body); color: var(--text-color); } #main-content p, #main-content li { font-size: inherit; line-height: var(--leading-body); } /* ── Eyebrows & micro labels (luxo, mas legíveis) ── */ .section-eyebrow, .marquee-eyebrow, .conversion-band__eyebrow { font-size: var(--type-micro) !important; letter-spacing: var(--tracking-eyebrow) !important; line-height: 1.5; } .section-eyebrow .eyebrow-en, .marquee-eyebrow .eyebrow-en { opacity: 1 !important; color: var(--text-soft) !important; } /* ── Trust bar ── */ .trust-stat-value { font-family: var(--font-display); color: var(--gold-accent-strong); background: linear-gradient(135deg, #C4A882 0%, #9A7858 48%, #6E5438 100%); -webkit-background-clip: text; background-clip: text; } [data-theme="obsidian"] .trust-stat-value { color: var(--gold-accent); background: linear-gradient(135deg, #F0E0CE 0%, #D4BC9A 45%, #B8A38E 100%); -webkit-background-clip: text; background-clip: text; } .trust-stat-label { font-size: var(--type-micro) !important; letter-spacing: var(--tracking-label) !important; opacity: 1 !important; color: var(--text-soft) !important; line-height: 1.45; } .trust-stat-label .opacity-70 { opacity: 1 !important; color: var(--text-soft) !important; } /* ── Hero ── */ .hero-outcome { font-size: var(--type-caption); line-height: var(--leading-body); opacity: 1; color: #2C2C2C; } .hero-icp-pill { font-size: var(--type-micro); opacity: 0.92; color: var(--text-muted); } .hero-icp-pill.is-highlight { color: var(--gold-accent-strong); opacity: 1; } .hero-device-ref { opacity: 1 !important; color: var(--text-soft) !important; font-size: var(--type-micro) !important; letter-spacing: var(--tracking-label); } .hero-device-ref__project { color: var(--gold-accent-strong) !important; opacity: 1 !important; } .hero-triagem, .hero-risk-strip, .conversion-band__fine { opacity: 1 !important; color: var(--text-soft) !important; font-size: var(--type-micro) !important; letter-spacing: var(--tracking-label); line-height: 1.55; } .hero-showcase__switch-label { font-size: clamp(8px, 1.9vw, 9px) !important; letter-spacing: 0.1em; line-height: 1.3; } .hero-showcase__switch-btn { opacity: 0.72; } .hero-showcase__switch-btn.is-active { opacity: 1; } .hero-price-teaser { font-size: var(--type-micro) !important; color: var(--text-muted) !important; } .hero-price-teaser--quiet { color: #4A4640 !important; opacity: 0.72 !important; } .hero-price-teaser--quiet .hero-price-teaser-hint { color: var(--text-soft) !important; opacity: 0.8 !important; } .hero-price-teaser strong { color: var(--gold-accent-strong) !important; } /* ── Portfólio ── */ #acervo-slider .portfolio-card-badge { font-size: var(--type-micro) !important; letter-spacing: var(--tracking-label) !important; font-weight: 700 !important; } #acervo-slider .portfolio-card-badge--live, #acervo-slider .portfolio-card-badge--preview { color: #3D3530 !important; } [data-theme="obsidian"] #acervo-slider .portfolio-card-badge--live, [data-theme="obsidian"] #acervo-slider .portfolio-card-badge--preview { color: #FAFAF8 !important; } #acervo-slider .portfolio-card-name { font-size: var(--type-caption) !important; letter-spacing: var(--tracking-label) !important; } #acervo-slider .portfolio-card-niche { font-size: var(--type-micro) !important; color: #6B5E52 !important; opacity: 1 !important; } [data-theme="obsidian"] #acervo-slider .portfolio-card-niche { color: #C8BDB2 !important; } .portfolio-filter-chip { font-size: var(--type-micro) !important; } /* ── Botões do portfólio (mockups) ── */ #acervo-slider .portfolio-card-btn { letter-spacing: var(--tracking-label) !important; } @media (min-width: 1024px) { #acervo-slider .portfolio-card-btn { font-size: 8px !important; } } .scroll-hint, .scroll-hint-mobile, .scroll-hint-desktop { font-size: var(--type-micro) !important; opacity: 0.78 !important; color: var(--text-soft) !important; } /* ── Navegação & CTAs ── */ .funnel-nav a { font-size: var(--type-micro) !important; opacity: 0.78 !important; color: var(--text-muted) !important; letter-spacing: var(--tracking-label) !important; } .funnel-nav a:hover { opacity: 1 !important; color: var(--text-color) !important; } .header-wa-cta, .hero-cta-group button, .conversion-band__wa, .conversion-band__plans, #glid-conversion-rail button { font-size: var(--type-micro) !important; letter-spacing: 0.16em !important; } #mobile-funnel-dock button { font-size: var(--type-micro) !important; letter-spacing: 0.14em !important; } /* ── Cards & seções ── */ .audience-card h4, .stakes-card h4 { font-size: var(--type-caption) !important; letter-spacing: var(--tracking-label) !important; line-height: var(--leading-tight); } .audience-card p, .stakes-card p, .deliverable-desc, .plan-compare-desc { font-size: var(--type-body-sm) !important; line-height: var(--leading-body) !important; color: var(--text-muted) !important; } .audience-exclude { font-size: var(--type-caption) !important; color: var(--text-muted) !important; } /* ── FAQ & pricing ── */ .faq-item h4 { font-size: var(--type-caption) !important; line-height: var(--leading-tight) !important; } .faq-answer p { font-size: var(--type-body-sm) !important; } .pricing-table-for, .pricing-table-prazo { font-size: var(--type-body-sm) !important; color: var(--text-muted) !important; opacity: 1 !important; } .pricing-table-name { font-size: var(--type-body-sm) !important; font-weight: 700 !important; } .plan-compare-meta-label { font-size: var(--type-caption) !important; letter-spacing: 0.14em !important; } .plan-compare-meta-value { font-size: var(--type-body-sm) !important; line-height: var(--leading-body) !important; } .plan-compare-meta-price { font-size: var(--type-display-sm) !important; } .plan-compare-name { font-size: var(--type-display-sm) !important; font-weight: 700 !important; } .pricing-intro, .pricing-ladder, .pricing-table-note { font-size: var(--type-caption) !important; color: var(--text-muted) !important; opacity: 1 !important; } /* ── Footer ── */ .footer-col-label, .footer-links a, .footer-links li, .footer-seals, .footer-seal { font-size: var(--type-micro) !important; letter-spacing: var(--tracking-label); } .footer-links a { color: var(--text-muted); opacity: 1; } /* ── Rail sticky ── */ #glid-conversion-rail .rail-eyebrow { font-size: clamp(8px, 1.6vw, 9px) !important; color: var(--gold-accent-strong) !important; } #glid-conversion-rail .rail-title { font-size: var(--type-micro) !important; color: var(--text-color) !important; } /* ── Headlines: display elegante, tracking moderado ── */ #main-content h1 { font-weight: 600; letter-spacing: 0.04em; line-height: 1.12; } #main-content h2 { letter-spacing: 0.1em; line-height: var(--leading-tight); } #main-content h3, #main-content h4 { letter-spacing: 0.12em; } /* ── Obsidian: reforço de contraste ── */ [data-theme="obsidian"] #main-content p, [data-theme="obsidian"] .audience-card p, [data-theme="obsidian"] .stakes-card p { color: var(--text-muted); } [data-theme="obsidian"] .hero-outcome, [data-theme="obsidian"] .hero-icp-pill { color: var(--text-muted); } [data-theme="obsidian"] .funnel-nav a { color: var(--text-muted); } /* ── Foco acessível ── */ #main-content a:focus-visible, #main-content button:focus-visible { outline: 2px solid var(--gold-accent); outline-offset: 3px; } /* ── Preferência usuário: texto maior ── */ @media (min-width: 1024px) { :root { --type-body-sm: 14px; --type-caption: 12px; --type-micro: 10px; } } /* ── Plan compare · mobile density (wins over global legibility tokens) ── */ @media (max-width: 767px) { #glid-plan-compare .plan-compare-name { font-size: 1rem !important; line-height: 1.22 !important; letter-spacing: 0.08em !important; } #glid-plan-compare .plan-compare-meta-value { font-size: 11px !important; line-height: 1.38 !important; } #glid-plan-compare .plan-compare-meta-price, #glid-plan-compare .plan-compare-meta-row--highlight .plan-compare-meta-value { font-size: 1.05rem !important; line-height: 1.12 !important; } #glid-plan-compare .plan-compare-desc { font-size: 11px !important; line-height: 1.4 !important; } #glid-plan-compare .plan-compare-badge { font-size: 8px !important; letter-spacing: 0.09em !important; line-height: 1.3 !important; } } @media (prefers-reduced-motion: reduce) { * { letter-spacing: normal !important; } .section-eyebrow, .marquee-eyebrow { letter-spacing: 0.12em !important; } } /* === ba-comparator.css === */ /* BEFORE/AFTER comparator panels */ .ba-panel-before { background: linear-gradient(152deg, #3a3836 0%, #252422 42%, #1a1918 100%); box-shadow: inset 0 0 72px rgba(184, 163, 142, 0.07), inset -1px 0 0 rgba(232, 213, 196, 0.12); color: #ffffff; } #ba-before.ba-panel-before { background: linear-gradient(155deg, #353331 0%, #232220 48%, #121110 100%) !important; } #ba-before .ba-inner > div { position: relative; z-index: 1; padding: 0.85rem 1rem; border-radius: 0.4rem; background: rgba(10, 9, 8, 0.78); border: 1px solid rgba(184, 163, 142, 0.22); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28); } .ba-panel__badge { display: inline-block; margin-bottom: 0.65rem; padding: 0.32rem 0.62rem; border-radius: 999px; font-size: clamp(8px, 1.8vw, 10px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; line-height: 1.2; } .ba-panel__badge--generic { background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(232, 213, 196, 0.55); color: #f5f0ea; } .ba-panel__badge--pro { border: 1px solid rgba(110, 84, 56, 0.38); background: rgba(255, 255, 255, 0.82); color: #4a3828; } [data-theme="obsidian"] .ba-panel__badge--pro { background: rgba(18, 18, 18, 0.82); border-color: rgba(184, 163, 142, 0.45); color: #e8d5c4; } .ba-panel__title { margin: 0 0 0.75rem; font-size: clamp(0.95rem, 2.8vw, 1.75rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; line-height: 1.2; } .ba-panel-before .ba-panel__title { color: #fafaf8; } /* Beat #main-content h4 / p / li from ux-refine & legibility */ #ba-container #ba-before .ba-panel__title, #ba-container #ba-before .ba-panel__list, #ba-container #ba-before .ba-panel__list li, #ba-container #ba-before .ba-panel__foot, #ba-container #ba-before .ba-panel__badge--generic { color: #fafaf8 !important; } #ba-container .ba-panel--pro .ba-panel__title { color: #1a1816 !important; } #ba-container .ba-panel--pro .ba-panel__list, #ba-container .ba-panel--pro .ba-panel__list li { color: rgba(28, 28, 26, 0.9) !important; } #ba-container .ba-panel--pro .ba-panel__foot { color: #4f3d2c !important; font-weight: 600; } [data-theme="obsidian"] #ba-container .ba-panel--pro .ba-panel__title { color: #fafaf8 !important; } [data-theme="obsidian"] #ba-container .ba-panel--pro .ba-panel__list, [data-theme="obsidian"] #ba-container .ba-panel--pro .ba-panel__list li { color: rgba(245, 245, 243, 0.94) !important; } [data-theme="obsidian"] #ba-container .ba-panel--pro .ba-panel__foot { color: #e8d5c4 !important; } .ba-panel__list { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; font-size: clamp(10px, 2.2vw, 0.875rem); font-style: italic; font-weight: 300; line-height: 1.45; } .ba-panel-before .ba-panel__list { color: rgba(255, 255, 255, 0.95); } .ba-panel__foot { margin: 0; padding-top: 0.75rem; border-top: 1px solid rgba(184, 163, 142, 0.35); font-size: clamp(9px, 1.8vw, 11px); text-transform: uppercase; letter-spacing: 0.14em; line-height: 1.5; } .ba-panel-before .ba-panel__foot { color: #ffffff; } .ba-panel--pro .ba-panel__title { color: #181816; } .ba-panel--pro .ba-panel__list { color: rgba(44, 44, 42, 0.88); } .ba-panel--pro .ba-panel__foot { color: #6e5438; border-top-color: rgba(139, 111, 78, 0.38); } [data-theme="obsidian"] .ba-panel--pro .ba-panel__title { color: #fafaf8; } [data-theme="obsidian"] .ba-panel--pro .ba-panel__list { color: rgba(245, 245, 243, 0.92); } [data-theme="obsidian"] .ba-panel--pro .ba-panel__foot { color: #e8d5c4; border-top-color: rgba(184, 163, 142, 0.35); } #ba-container .ba-panel--pro > div { position: relative; z-index: 1; padding: 0.85rem 1rem; border-radius: 0.4rem; background: rgba(250, 250, 248, 0.72); border: 1px solid rgba(110, 84, 56, 0.16); } [data-theme="obsidian"] #ba-container .ba-panel--pro > div { background: rgba(12, 12, 12, 0.72); border-color: rgba(184, 163, 142, 0.22); } .silk-effect { background: linear-gradient(120deg, #f5f5f3, #e8d5c4, #f5f5f3, #b8a38e); background-size: 300% 300%; animation: silkFlow 8s ease-in-out infinite; box-shadow: inset 0 0 100px rgba(255, 255, 255, 0.4); } [data-theme="obsidian"] .silk-effect { background: linear-gradient(120deg, #111111, #1a1a1a, #0a0a0a, #2c2c2c); box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.8); } @keyframes silkFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @media (max-width: 767px) { #ba-container .ba-panel__foot { font-size: 10px !important; letter-spacing: 0.12em !important; line-height: 1.55 !important; } #ba-container .ba-panel__list { font-size: 10px !important; } #ba-before .ba-inner > div, #ba-container .ba-panel--pro > div { padding: 0.65rem 0.75rem; } } /* Compact funnel placement — less viewport on mobile */ .ba-section--compact { min-height: 0; } .ba-container--compact { height: var(--ba-height-mobile, 40dvh); } @media (min-width: 768px) { .ba-container--compact { height: var(--ba-height-tablet, 60dvh); } } @media (min-width: 1024px) { .ba-container--compact { height: var(--ba-height-desktop, 70dvh); } } /* === hub-page.css === */ /* GL.ID — SEO hub pages (ultra-professional, lightweight) */ :root { --hub-bg: #F5F5F3; --hub-bg-alt: #EBEBE9; --hub-text: #2C2C2C; --hub-muted: rgba(44, 44, 44, 0.68); --hub-border: rgba(44, 44, 44, 0.14); --hub-gold: #B8A38E; --hub-gold-dark: #8D7A65; --hub-max: 42rem; --hub-wide: 56rem; --hub-font-serif: 'Cormorant Garamond', Georgia, serif; --hub-font-sans: 'DM Sans', system-ui, sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body.hub-page { margin: 0; font-family: var(--hub-font-sans); font-size: 16px; line-height: 1.65; color: var(--hub-text); background: var(--hub-bg); -webkit-font-smoothing: antialiased; } .hub-skip { position: absolute; left: -9999px; top: 0; z-index: 9999; padding: 0.75rem 1rem; background: var(--hub-text); color: var(--hub-bg); } .hub-skip:focus { left: 1rem; top: 1rem; } .hub-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--hub-border); background: rgba(245, 245, 243, 0.92); backdrop-filter: blur(10px); } .hub-logo { font-family: var(--hub-font-serif); font-size: 1.15rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--hub-text); text-decoration: none; background: linear-gradient(135deg, #CBA381, #765D46); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hub-header-cta { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 600; padding: 0.65rem 1rem; border: 1px solid var(--hub-border); background: var(--hub-text); color: #E8D5C4; cursor: pointer; text-decoration: none; transition: opacity 0.2s; } .hub-header-cta:hover { opacity: 0.88; } .hub-wrap { max-width: var(--hub-wide); margin: 0 auto; padding: 2rem 1.25rem 4rem; } .hub-breadcrumb { display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--hub-muted); margin-bottom: 1.5rem; list-style: none; padding: 0; } .hub-breadcrumb a { color: var(--hub-gold-dark); text-decoration: none; } .hub-breadcrumb a:hover { text-decoration: underline; } .hub-breadcrumb li + li::before { content: '→'; margin-right: 0.5rem; opacity: 0.4; } .hub-eyebrow { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--hub-gold-dark); margin-bottom: 0.75rem; } .hub-page h1 { font-family: var(--hub-font-serif); font-size: clamp(1.75rem, 4vw, 2.65rem); font-weight: 600; line-height: 1.15; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 1rem; max-width: var(--hub-wide); } .hub-lead { font-size: 1.05rem; color: var(--hub-muted); max-width: var(--hub-max); margin-bottom: 2rem; font-weight: 300; } .hub-article { max-width: var(--hub-max); } .hub-article h2 { font-family: var(--hub-font-serif); font-size: 1.35rem; letter-spacing: 0.1em; text-transform: uppercase; margin: 2.25rem 0 0.75rem; color: var(--hub-text); } .hub-article p { margin: 0 0 1rem; color: var(--hub-muted); } .hub-article ul { margin: 0 0 1.25rem; padding-left: 1.25rem; color: var(--hub-muted); } .hub-article li { margin-bottom: 0.4rem; } .hub-article strong { color: var(--hub-text); font-weight: 600; } .hub-plan-box { margin: 2.5rem 0; padding: 1.35rem 1.5rem; border: 1px solid rgba(184, 163, 142, 0.45); background: linear-gradient(145deg, #fff 0%, rgba(184, 163, 142, 0.08) 100%); } .hub-plan-box-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--hub-gold-dark); font-weight: 700; margin-bottom: 0.35rem; } .hub-plan-box-title { font-family: var(--hub-font-serif); font-size: 1.25rem; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 0.35rem; } .hub-plan-box-price { font-family: var(--hub-font-serif); font-size: 1.5rem; margin-bottom: 0.75rem; } .hub-plan-box p { font-size: 0.9rem; margin-bottom: 1rem; } .hub-cta { display: inline-block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.22em; font-weight: 700; padding: 0.9rem 1.5rem; border: none; cursor: pointer; text-decoration: none; background: linear-gradient(135deg, #CBA381, #9F8265); color: #1C1C1A; transition: filter 0.2s; } .hub-cta:hover { filter: brightness(1.06); } .hub-cta-secondary { display: inline-block; margin-left: 0.75rem; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--hub-gold-dark); text-decoration: underline; text-underline-offset: 3px; } .hub-faq { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--hub-border); } .hub-faq h2 { margin-top: 0; } .hub-faq-item { border-bottom: 1px solid var(--hub-border); padding: 1rem 0; } .hub-faq-item h3 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; margin: 0 0 0.5rem; font-weight: 700; } .hub-faq-answer p { font-size: 0.9rem; margin: 0; } .hub-related { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--hub-border); max-width: var(--hub-wide); } .hub-related h2 { font-family: var(--hub-font-serif); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 1rem; } .hub-related-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; } @media (min-width: 640px) { .hub-related-grid { grid-template-columns: repeat(2, 1fr); } } .hub-related-card { display: block; padding: 1rem 1.15rem; border: 1px solid var(--hub-border); background: var(--hub-bg-alt); text-decoration: none; color: inherit; transition: border-color 0.2s; } .hub-related-card:hover { border-color: var(--hub-gold); } .hub-related-card span { display: block; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--hub-gold-dark); margin-bottom: 0.25rem; } .hub-related-card strong { font-family: var(--hub-font-serif); font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; } .hub-footer { border-top: 1px solid var(--hub-border); padding: 2rem 1.25rem; text-align: center; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--hub-muted); } .hub-footer a { color: var(--hub-gold-dark); text-decoration: none; } .hub-footer a:hover { text-decoration: underline; } /* Home: crawler sees content without preloader */ html.glid-crawler #preloader { display: none !important; } html.glid-crawler #main-content { opacity: 1 !important; pointer-events: auto !important; position: relative !important; } html.glid-crawler #main-header { opacity: 1 !important; } html.glid-crawler body.glid-entry-locked { overflow: auto !important; } /* Páginas legais */ .legal-prose h2 { font-family: var(--hub-font-serif); font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase; margin: 2rem 0 0.75rem; } .legal-prose p, .legal-prose li { font-size: 0.92rem; line-height: 1.65; color: var(--hub-muted); font-weight: 300; } .legal-prose ul { padding-left: 1.25rem; margin: 0.5rem 0 1rem; } .legal-prose a { color: var(--hub-gold-dark); } .legal-footer-links { margin-top: 2.5rem; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.18em; } .legal-footer-links a { color: var(--hub-gold-dark); text-decoration: none; } .legal-footer-links a:hover { text-decoration: underline; } /* Home SEO guides section */ .seo-guides-grid { display: grid; grid-template-columns: 1fr; gap: 0.85rem; max-width: 56rem; margin: 0 auto; } @media (min-width: 640px) { .seo-guides-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .seo-guides-grid { grid-template-columns: repeat(3, 1fr); } } .seo-guide-card { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.15rem 1.25rem; border: 1px solid var(--border-color); background: var(--bg-color); text-decoration: none; color: inherit; transition: border-color 0.25s, box-shadow 0.25s; } .seo-guide-card:hover { border-color: rgba(184, 163, 142, 0.55); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06); } .seo-guide-tag { font-size: 8px; text-transform: uppercase; letter-spacing: 0.18em; color: #B8A38E; font-weight: 700; } .seo-guide-title { font-family: Georgia, serif; font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-color); } .seo-guide-desc { font-size: 10px; line-height: 1.5; opacity: 0.65; color: var(--text-color); }