/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer theme{:root,:host{--font-sans:"Helvetica Site", Helvetica, Arial, sans-serif;--font-serif:"Helvetica Site", Helvetica, Arial, sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--container-md:28rem;--container-lg:32rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--container-5xl:64rem;--container-6xl:72rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-5xl:3rem;--text-5xl--line-height:1;--text-6xl:3.75rem;--text-6xl--line-height:1;--text-7xl:4.5rem;--text-7xl--line-height:1;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--tracking-tight:-.025em;--leading-tight:1.25;--leading-snug:1.375;--leading-relaxed:1.625;--radius-xl:.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--blur-md:12px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-nude:#e3b77d;--color-nude-soft:#f2ddb9;--color-nude-deep:#c08a4c;--color-gold-light:#ecc792;--color-gold:#d39c5b;--color-cream:#fbf3e6;--color-cream-deep:#f4e4c8;--color-cocoa:#7a4b1f;--color-cocoa-dark:#5e3816;--color-cocoa-deep:#3d2410;--color-ink:#2e1d10;--ease-soft:cubic-bezier(.22, 1, .36, 1)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}html{scroll-behavior:smooth;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}body{background-color:var(--color-cream);font-family:var(--font-sans);color:var(--color-ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3{text-wrap:balance}section[id]{scroll-margin-top:5rem}:focus-visible{outline-style:var(--tw-outline-style);outline-offset:4px;outline-width:2px;outline-color:var(--color-cocoa)}}@layer components{.sticker-outline{filter:drop-shadow(3px 0 #fff)drop-shadow(-3px 0 #fff)drop-shadow(0 3px #fff)drop-shadow(0 -3px #fff)}}@layer utilities{.pointer-events-none{pointer-events:none}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:0}.inset-x-0{inset-inline:0}.-top-24{top:calc(var(--spacing) * -24)}.top-0{top:0}.top-1\/2{top:50%}.top-2{top:calc(var(--spacing) * 2)}.top-4{top:calc(var(--spacing) * 4)}.top-28{top:calc(var(--spacing) * 28)}.top-\[55\%\]{top:55%}.-right-40{right:calc(var(--spacing) * -40)}.right-3{right:calc(var(--spacing) * 3)}.right-4{right:calc(var(--spacing) * 4)}.right-\[6\%\]{right:6%}.bottom-2{bottom:calc(var(--spacing) * 2)}.bottom-4{bottom:calc(var(--spacing) * 4)}.-left-36{left:calc(var(--spacing) * -36)}.-left-\[5\%\]{left:-5%}.left-3{left:calc(var(--spacing) * 3)}.isolate{isolation:isolate}.-z-10{z-index:calc(10 * -1)}.z-10{z-index:10}.z-40{z-index:40}.z-50{z-index:50}.z-\[60\]{z-index:60}.order-1{order:1}.order-2{order:2}.mx-auto{margin-inline:auto}.-my-10{margin-block:calc(var(--spacing) * -10)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-5{margin-top:calc(var(--spacing) * 5)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mt-10{margin-top:calc(var(--spacing) * 10)}.mt-14{margin-top:calc(var(--spacing) * 14)}.mt-16{margin-top:calc(var(--spacing) * 16)}.mt-auto{margin-top:auto}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.aspect-\[2\/1\]{aspect-ratio:2}.aspect-\[2\/3\]{aspect-ratio:2/3}.aspect-\[3\/4\]{aspect-ratio:3/4}.aspect-\[4\/3\]{aspect-ratio:4/3}.aspect-\[4\/5\]{aspect-ratio:4/5}.aspect-square{aspect-ratio:1}.h-3{height:calc(var(--spacing) * 3)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-10{height:calc(var(--spacing) * 10)}.h-11{height:calc(var(--spacing) * 11)}.h-12{height:calc(var(--spacing) * 12)}.h-14{height:calc(var(--spacing) * 14)}.h-20{height:calc(var(--spacing) * 20)}.h-72{height:calc(var(--spacing) * 72)}.h-\[26rem\]{height:26rem}.h-full{height:100%}.h-px{height:1px}.max-h-\[78svh\]{max-height:78svh}.max-h-full{max-height:100%}.min-h-svh{min-height:100svh}.w-3{width:calc(var(--spacing) * 3)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-10{width:calc(var(--spacing) * 10)}.w-11{width:calc(var(--spacing) * 11)}.w-12{width:calc(var(--spacing) * 12)}.w-14{width:calc(var(--spacing) * 14)}.w-72{width:calc(var(--spacing) * 72)}.w-\[26rem\]{width:26rem}.w-\[110\%\]{width:110%}.w-full{width:100%}.w-max{width:max-content}.w-px{width:1px}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-6xl{max-width:var(--container-6xl)}.max-w-\[12ch\]{max-width:12ch}.max-w-\[14ch\]{max-width:14ch}.max-w-\[18ch\]{max-width:18ch}.max-w-lg{max-width:var(--container-lg)}.max-w-md{max-width:var(--container-md)}.max-w-sm{max-width:var(--container-sm)}.max-w-xl{max-width:var(--container-xl)}.shrink-0{flex-shrink:0}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-rotate-2{rotate:-2deg}.rotate-2{rotate:2deg}.columns-2{columns:2}.break-inside-avoid{break-inside:avoid}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-5{gap:calc(var(--spacing) * 5)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-8{gap:calc(var(--spacing) * 8)}.gap-10{gap:calc(var(--spacing) * 10)}.gap-12{gap:calc(var(--spacing) * 12)}.gap-px{gap:1px}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))}.self-center{align-self:center}.self-end{align-self:flex-end}.overflow-hidden{overflow:hidden}.overflow-x-clip{overflow-x:clip}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-3xl{border-radius:var(--radius-3xl)}.rounded-\[2rem\]{border-radius:2rem}.rounded-full{border-radius:2147483647px}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-\[999px\]{border-top-left-radius:999px;border-top-right-radius:999px}.rounded-b-\[2rem\]{border-bottom-right-radius:2rem;border-bottom-left-radius:2rem}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-cocoa\/10{border-color:#7a4b1f1a}@supports (color:color-mix(in lab, red, red)){.border-cocoa\/10{border-color:color-mix(in oklab, var(--color-cocoa) 10%, transparent)}}.border-cocoa\/15{border-color:#7a4b1f26}@supports (color:color-mix(in lab, red, red)){.border-cocoa\/15{border-color:color-mix(in oklab, var(--color-cocoa) 15%, transparent)}}.border-cocoa\/25{border-color:#7a4b1f40}@supports (color:color-mix(in lab, red, red)){.border-cocoa\/25{border-color:color-mix(in oklab, var(--color-cocoa) 25%, transparent)}}.border-cocoa\/30{border-color:#7a4b1f4d}@supports (color:color-mix(in lab, red, red)){.border-cocoa\/30{border-color:color-mix(in oklab, var(--color-cocoa) 30%, transparent)}}.border-cream\/10{border-color:#fbf3e61a}@supports (color:color-mix(in lab, red, red)){.border-cream\/10{border-color:color-mix(in oklab, var(--color-cream) 10%, transparent)}}.border-current{border-color:currentColor}.bg-cocoa{background-color:var(--color-cocoa)}.bg-cocoa-deep{background-color:var(--color-cocoa-deep)}.bg-cocoa-deep\/0{background-color:#0000}@supports (color:color-mix(in lab, red, red)){.bg-cocoa-deep\/0{background-color:color-mix(in oklab, var(--color-cocoa-deep) 0%, transparent)}}.bg-cocoa-deep\/95{background-color:#3d2410f2}@supports (color:color-mix(in lab, red, red)){.bg-cocoa-deep\/95{background-color:color-mix(in oklab, var(--color-cocoa-deep) 95%, transparent)}}.bg-cocoa\/15{background-color:#7a4b1f26}@supports (color:color-mix(in lab, red, red)){.bg-cocoa\/15{background-color:color-mix(in oklab, var(--color-cocoa) 15%, transparent)}}.bg-cream{background-color:var(--color-cream)}.bg-cream-deep{background-color:var(--color-cream-deep)}.bg-cream\/95{background-color:#fbf3e6f2}@supports (color:color-mix(in lab, red, red)){.bg-cream\/95{background-color:color-mix(in oklab, var(--color-cream) 95%, transparent)}}.bg-current{background-color:currentColor}.bg-nude{background-color:var(--color-nude)}.bg-nude-soft{background-color:var(--color-nude-soft)}.bg-nude\/60{background-color:#e3b77d99}@supports (color:color-mix(in lab, red, red)){.bg-nude\/60{background-color:color-mix(in oklab, var(--color-nude) 60%, transparent)}}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.bg-linear-to-br{--tw-gradient-position:to bottom right}@supports (background-image:linear-gradient(in lab, red, red)){.bg-linear-to-br{--tw-gradient-position:to bottom right in oklab}}.bg-linear-to-br{background-image:linear-gradient(var(--tw-gradient-stops))}.bg-linear-to-r{--tw-gradient-position:to right}@supports (background-image:linear-gradient(in lab, red, red)){.bg-linear-to-r{--tw-gradient-position:to right in oklab}}.bg-linear-to-r{background-image:linear-gradient(var(--tw-gradient-stops))}.bg-\[linear-gradient\(to_bottom\,var\(--color-cream\)_40\%\,var\(--color-nude\)_40\%\)\]{background-image:linear-gradient(to bottom,var(--color-cream) 40%,var(--color-nude) 40%)}.from-cocoa{--tw-gradient-from:var(--color-cocoa);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-gold-light{--tw-gradient-from:var(--color-gold-light);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-nude-soft{--tw-gradient-from:var(--color-nude-soft);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.via-gold{--tw-gradient-via:var(--color-gold);--tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.via-nude{--tw-gradient-via:var(--color-nude);--tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-cocoa-dark{--tw-gradient-to:var(--color-cocoa-dark);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-cream-deep{--tw-gradient-to:var(--color-cream-deep);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-gold{--tw-gradient-to:var(--color-gold);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-gold-light{--tw-gradient-to:var(--color-gold-light);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.object-bottom{object-position:bottom}.p-2{padding:calc(var(--spacing) * 2)}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-7{padding-inline:calc(var(--spacing) * 7)}.px-8{padding-inline:calc(var(--spacing) * 8)}.py-1{padding-block:var(--spacing)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-3\.5{padding-block:calc(var(--spacing) * 3.5)}.py-5{padding-block:calc(var(--spacing) * 5)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-14{padding-block:calc(var(--spacing) * 14)}.py-24{padding-block:calc(var(--spacing) * 24)}.pt-6{padding-top:calc(var(--spacing) * 6)}.pt-8{padding-top:calc(var(--spacing) * 8)}.pt-24{padding-top:calc(var(--spacing) * 24)}.pt-28{padding-top:calc(var(--spacing) * 28)}.pt-32{padding-top:calc(var(--spacing) * 32)}.pr-6{padding-right:calc(var(--spacing) * 6)}.pb-6{padding-bottom:calc(var(--spacing) * 6)}.pb-16{padding-bottom:calc(var(--spacing) * 16)}.pb-20{padding-bottom:calc(var(--spacing) * 20)}.pb-24{padding-bottom:calc(var(--spacing) * 24)}.text-center{text-align:center}.text-left{text-align:left}.font-sans{font-family:var(--font-sans)}.font-serif{font-family:var(--font-serif)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[10px\]{font-size:10px}.leading-\[0\.95\]{--tw-leading:.95;line-height:.95}.leading-\[1\.1\]{--tw-leading:1.1;line-height:1.1}.leading-\[1\.02\]{--tw-leading:1.02;line-height:1.02}.leading-\[1\.05\]{--tw-leading:1.05;line-height:1.05}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[0\.2em\]{--tw-tracking:.2em;letter-spacing:.2em}.tracking-\[0\.3em\]{--tw-tracking:.3em;letter-spacing:.3em}.tracking-\[0\.4em\]{--tw-tracking:.4em;letter-spacing:.4em}.tracking-\[0\.08em\]{--tw-tracking:.08em;letter-spacing:.08em}.tracking-\[0\.12em\]{--tw-tracking:.12em;letter-spacing:.12em}.tracking-\[0\.18em\]{--tw-tracking:.18em;letter-spacing:.18em}.tracking-\[0\.25em\]{--tw-tracking:.25em;letter-spacing:.25em}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.whitespace-nowrap{white-space:nowrap}.text-cocoa{color:var(--color-cocoa)}.text-cocoa-deep{color:var(--color-cocoa-deep)}.text-cocoa\/80{color:#7a4b1fcc}@supports (color:color-mix(in lab, red, red)){.text-cocoa\/80{color:color-mix(in oklab, var(--color-cocoa) 80%, transparent)}}.text-cream{color:var(--color-cream)}.text-cream\/60{color:#fbf3e699}@supports (color:color-mix(in lab, red, red)){.text-cream\/60{color:color-mix(in oklab, var(--color-cream) 60%, transparent)}}.text-cream\/70{color:#fbf3e6b3}@supports (color:color-mix(in lab, red, red)){.text-cream\/70{color:color-mix(in oklab, var(--color-cream) 70%, transparent)}}.text-cream\/80{color:#fbf3e6cc}@supports (color:color-mix(in lab, red, red)){.text-cream\/80{color:color-mix(in oklab, var(--color-cream) 80%, transparent)}}.text-cream\/85{color:#fbf3e6d9}@supports (color:color-mix(in lab, red, red)){.text-cream\/85{color:color-mix(in oklab, var(--color-cream) 85%, transparent)}}.text-ink{color:var(--color-ink)}.text-ink\/75{color:#2e1d10bf}@supports (color:color-mix(in lab, red, red)){.text-ink\/75{color:color-mix(in oklab, var(--color-ink) 75%, transparent)}}.text-ink\/80{color:#2e1d10cc}@supports (color:color-mix(in lab, red, red)){.text-ink\/80{color:color-mix(in oklab, var(--color-ink) 80%, transparent)}}.text-nude{color:var(--color-nude)}.uppercase{text-transform:uppercase}.italic{font-style:italic}.underline{text-decoration-line:underline}.decoration-2{text-decoration-thickness:2px}.underline-offset-4{text-underline-offset:4px}.underline-offset-8{text-underline-offset:8px}.opacity-50{opacity:.5}.opacity-90{opacity:.9}.shadow-\[0_1px_0_0_rgba\(122\,75\,31\,0\.15\)\]{--tw-shadow:0 1px 0 0 var(--tw-shadow-color,#7a4b1f26);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_6px_0_0_var\(--color-cocoa-deep\)\]{--tw-shadow:0 6px 0 0 var(--tw-shadow-color,var(--color-cocoa-deep));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[4px_4px_0_0_var\(--color-nude-deep\)\]{--tw-shadow:4px 4px 0 0 var(--tw-shadow-color,var(--color-nude-deep));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[8px_8px_0_0_var\(--color-cocoa\)\]{--tw-shadow:8px 8px 0 0 var(--tw-shadow-color,var(--color-cocoa));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[8px_8px_0_0_var\(--color-cocoa-deep\)\]{--tw-shadow:8px 8px 0 0 var(--tw-shadow-color,var(--color-cocoa-deep));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[8px_8px_0_0_var\(--color-nude\)\]{--tw-shadow:8px 8px 0 0 var(--tw-shadow-color,var(--color-nude));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[8px_8px_0_0_var\(--color-nude-deep\)\]{--tw-shadow:8px 8px 0 0 var(--tw-shadow-color,var(--color-nude-deep));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[10px_10px_0_0_var\(--color-cocoa\)\]{--tw-shadow:10px 10px 0 0 var(--tw-shadow-color,var(--color-cocoa));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[10px_10px_0_0_var\(--color-cocoa-deep\)\]{--tw-shadow:10px 10px 0 0 var(--tw-shadow-color,var(--color-cocoa-deep));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[10px_10px_0_0_var\(--color-nude\)\]{--tw-shadow:10px 10px 0 0 var(--tw-shadow-color,var(--color-nude));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-cocoa-deep\/25{--tw-shadow-color:#3d241040}@supports (color:color-mix(in lab, red, red)){.shadow-cocoa-deep\/25{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--color-cocoa-deep) 25%, transparent) var(--tw-shadow-alpha), transparent)}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.backdrop-blur-md{--tw-backdrop-blur:blur(var(--blur-md));-webkit-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-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{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-500{--tw-duration:.5s;transition-duration:.5s}.duration-700{--tw-duration:.7s;transition-duration:.7s}.ease-soft{--tw-ease:var(--ease-soft);transition-timing-function:var(--ease-soft)}.\[--cb\:26px\]{--cb:26px}.\[--cg\:54px\]{--cg:54px}@media (hover:hover){.group-hover\:translate-x-1:is(:where(.group):hover *){--tw-translate-x:var(--spacing);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:scale-105:is(:where(.group):hover *){--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.group-hover\:rotate-90:is(:where(.group):hover *){rotate:90deg}.group-hover\:bg-cocoa-deep\/15:is(:where(.group):hover *){background-color:#3d241026}@supports (color:color-mix(in lab, red, red)){.group-hover\:bg-cocoa-deep\/15:is(:where(.group):hover *){background-color:color-mix(in oklab, var(--color-cocoa-deep) 15%, transparent)}}}.last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}@media (hover:hover){.hover\:-translate-x-1:hover{--tw-translate-x:calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:-translate-y-0\.5:hover{--tw-translate-y:calc(var(--spacing) * -.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:-translate-y-1:hover{--tw-translate-y:calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:bg-cocoa:hover{background-color:var(--color-cocoa)}.hover\:text-cream:hover{color:var(--color-cream)}.hover\:text-nude:hover{color:var(--color-nude)}.hover\:opacity-70:hover{opacity:.7}.hover\:shadow-\[0_8px_0_0_var\(--color-cocoa-deep\)\]:hover{--tw-shadow:0 8px 0 0 var(--tw-shadow-color,var(--color-cocoa-deep));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:shadow-\[12px_12px_0_0_var\(--color-cocoa\)\]:hover{--tw-shadow:12px 12px 0 0 var(--tw-shadow-color,var(--color-cocoa));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:shadow-\[12px_12px_0_0_var\(--color-cocoa-deep\)\]:hover{--tw-shadow:12px 12px 0 0 var(--tw-shadow-color,var(--color-cocoa-deep));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}.focus\:not-sr-only:focus{clip-path:none;white-space:normal;width:auto;height:auto;margin:0;padding:0;position:static;overflow:visible}.focus\:fixed:focus{position:fixed}.focus\:top-4:focus{top:calc(var(--spacing) * 4)}.focus\:left-4:focus{left:calc(var(--spacing) * 4)}.focus\:z-\[70\]:focus{z-index:70}.focus\:rounded-full:focus{border-radius:2147483647px}.focus\:bg-cocoa:focus{background-color:var(--color-cocoa)}.focus\:px-4:focus{padding-inline:calc(var(--spacing) * 4)}.focus\:py-2:focus{padding-block:calc(var(--spacing) * 2)}.focus\:text-cream:focus{color:var(--color-cream)}.focus-visible\:outline-offset-4:focus-visible{outline-offset:4px}.focus-visible\:outline-current:focus-visible{outline-color:currentColor}.active\:translate-y-0:active{--tw-translate-y:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}@media (width>=40rem){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width>=48rem){.md\:-top-32{top:calc(var(--spacing) * -32)}.md\:top-40{top:calc(var(--spacing) * 40)}.md\:-right-48{right:calc(var(--spacing) * -48)}.md\:right-6{right:calc(var(--spacing) * 6)}.md\:right-\[44\%\]{right:44%}.md\:bottom-6{bottom:calc(var(--spacing) * 6)}.md\:-left-28{left:calc(var(--spacing) * -28)}.md\:left-6{left:calc(var(--spacing) * 6)}.md\:order-1{order:1}.md\:order-2{order:2}.md\:-my-12{margin-block:calc(var(--spacing) * -12)}.md\:mr-0{margin-right:0}.md\:mb-6{margin-bottom:calc(var(--spacing) * 6)}.md\:ml-auto{margin-left:auto}.md\:block{display:block}.md\:hidden{display:none}.md\:h-3\.5{height:calc(var(--spacing) * 3.5)}.md\:h-24{height:calc(var(--spacing) * 24)}.md\:h-96{height:calc(var(--spacing) * 96)}.md\:h-\[36rem\]{height:36rem}.md\:min-h-\[90svh\]{min-height:90svh}.md\:w-3\.5{width:calc(var(--spacing) * 3.5)}.md\:w-96{width:calc(var(--spacing) * 96)}.md\:w-\[36rem\]{width:36rem}.md\:max-w-md{max-width:var(--container-md)}.md\:columns-3{columns:3}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-\[1\.1fr_1fr\]{grid-template-columns:1.1fr 1fr}.md\:grid-cols-\[1\.2fr_1fr\]{grid-template-columns:1.2fr 1fr}.md\:grid-cols-\[1\.4fr_1fr_1fr\]{grid-template-columns:1.4fr 1fr 1fr}.md\:flex-row{flex-direction:row}.md\:items-center{align-items:center}.md\:items-end{align-items:flex-end}.md\:items-start{align-items:flex-start}.md\:justify-between{justify-content:space-between}.md\:justify-end{justify-content:flex-end}.md\:gap-4{gap:calc(var(--spacing) * 4)}.md\:gap-6{gap:calc(var(--spacing) * 6)}.md\:gap-8{gap:calc(var(--spacing) * 8)}.md\:gap-16{gap:calc(var(--spacing) * 16)}.md\:gap-20{gap:calc(var(--spacing) * 20)}.md\:justify-self-end{justify-self:flex-end}.md\:p-8{padding:calc(var(--spacing) * 8)}.md\:p-10{padding:calc(var(--spacing) * 10)}.md\:p-16{padding:calc(var(--spacing) * 16)}.md\:px-0{padding-inline:0}.md\:py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.md\:py-32{padding-block:calc(var(--spacing) * 32)}.md\:pt-20{padding-top:calc(var(--spacing) * 20)}.md\:pt-36{padding-top:calc(var(--spacing) * 36)}.md\:pt-40{padding-top:calc(var(--spacing) * 40)}.md\:pr-8{padding-right:calc(var(--spacing) * 8)}.md\:pr-12{padding-right:calc(var(--spacing) * 12)}.md\:pb-24{padding-bottom:calc(var(--spacing) * 24)}.md\:pb-28{padding-bottom:calc(var(--spacing) * 28)}.md\:pb-32{padding-bottom:calc(var(--spacing) * 32)}.md\:text-right{text-align:right}.md\:text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.md\:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.md\:text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}.md\:text-7xl{font-size:var(--text-7xl);line-height:var(--tw-leading,var(--text-7xl--line-height))}.md\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.md\:text-\[2\.75rem\]{font-size:2.75rem}.md\:\[--cb\:32px\]{--cb:32px}.md\:\[--cg\:64px\]{--cg:64px}}.animate-marquee{animation:45s linear infinite marquee}.animate-marquee-reverse{animation:45s linear infinite reverse marquee}}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.animate-marquee,.animate-marquee-reverse{animation:none}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}
/*$vite$:1*/
/* Hero com foto de fundo (assets/hero). Celular: texto em cima e foto embaixo. Desktop: foto ocupando toda a hero. */
.hero-photo{position:relative;isolation:isolate;display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(90deg,#d59e5d,#dfaf71)}
.hero-photo__img{order:2;display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:24% 30%;margin-top:-2rem;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 3rem);mask-image:linear-gradient(to bottom,transparent,#000 3rem)}
.hero-photo__content{order:1;padding:7rem 1.5rem 2.5rem;text-align:center}
@media (min-width:48rem){
  .hero-photo{min-height:max(36rem,42.2vw);background:linear-gradient(90deg,#d39c5b,#ecc792)}
  .hero-photo__img{position:absolute;inset:0;z-index:-1;height:100%;aspect-ratio:auto;object-position:20% 30%;margin-top:0;-webkit-mask-image:none;mask-image:none}
  .hero-photo__content{position:absolute;inset:0;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;width:100%;max-width:72rem;margin-inline:auto;padding:5rem 1.5rem 6rem;text-align:right}
  .hero-photo__content>h1{max-width:6.6em}
}

/* Helvetica (assets/fonts). Light cobre os pesos finos (100-300), Regular o texto (400-600) e Bold os títulos e destaques (700-900). */
@font-face{font-family:"Helvetica Site";src:url("fonts/helvetica-light-587ebe5a59211.ttf") format("truetype");font-weight:100 300;font-style:normal;font-display:swap}
@font-face{font-family:"Helvetica Site";src:url("fonts/Helvetica.ttf") format("truetype");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Helvetica Site";src:url("fonts/Helvetica-Bold.ttf") format("truetype");font-weight:700 900;font-style:normal;font-display:swap}

/* Monograma (assets/logo) */
.site-logo{display:block;width:auto;height:4rem}
.site-logo--footer{height:4.5rem}

/* Faixas cruzadas: as duas passam pelo centro e a inclinação acompanha a largura da tela,
   para que nas bordas ainda se sobreponham (sem espaço entre elas) em qualquer tamanho.
   --ribbon-h é a altura de cada faixa; 0.85 garante 15% de sobreposição nas bordas. */
.ribbon-band{--ribbon-h:2.25rem;--ribbon-tilt:atan2(calc(var(--ribbon-h) * 0.85),100vw);top:50%}
@media (min-width:48rem){.ribbon-band{--ribbon-h:3rem}}
.ribbon-band--down{transform:translateY(-50%) rotate(var(--ribbon-tilt))}
.ribbon-band--up{transform:translateY(-50%) rotate(calc(var(--ribbon-tilt) * -1))}

/* Cards de serviço da Home. Foto: assets/cards/card-maquiagem.jpg e card-salao.jpg (retrato, ~1200x1500).
   --svc-bg é a cor do card, para onde a foto se funde. */
.svc-card{--svc-bg:#e6ac6b;--svc-title:var(--color-cocoa);--svc-text:#fff;position:relative;isolation:isolate;display:flex;flex-direction:column;height:100%;min-height:34rem;overflow:hidden;border-radius:1.25rem;background:var(--svc-bg);transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .6s cubic-bezier(.22,1,.36,1)}
.svc-card--cocoa{--svc-bg:var(--color-cocoa);--svc-title:var(--color-cream);--svc-text:rgba(251,243,230,.85)}
.svc-card:hover{transform:translateY(-6px);box-shadow:0 34px 60px -32px rgba(61,36,16,.5)}
.svc-card__media{position:absolute;inset:0 0 auto 0;z-index:-1;height:70%;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 35%,transparent 92%);mask-image:linear-gradient(180deg,#000 35%,transparent 92%)}
.svc-card__media::after{content:none}
.svc-card__img,.svc-card__placeholder{position:absolute;inset:0;width:100%;height:100%}
.svc-card__img{object-fit:cover;object-position:50% 20%;transition:scale 1s cubic-bezier(.22,1,.36,1)}
.svc-card:hover .svc-card__img{scale:1.04}
.svc-card__placeholder{display:none;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:1.5rem 1.5rem 30%;text-align:center;color:var(--color-cocoa);background:linear-gradient(160deg,var(--color-cream),var(--color-nude-soft))}
.svc-card__media.is-missing .svc-card__img{display:none}
.svc-card__media.is-missing .svc-card__placeholder{display:flex}
.svc-card__badge{border:1px solid rgba(122,75,31,.3);border-radius:999px;padding:.25rem .75rem;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.svc-card__label{max-width:18ch;font-size:1.125rem;font-style:italic;line-height:1.35}
.svc-card__body{display:flex;flex-direction:column;margin-top:auto;padding:1.75rem 1.75rem 2rem}
.svc-card__title{max-width:none;min-height:2.04em;text-wrap:balance;color:var(--svc-title);font-size:clamp(1.85rem,2.6vw,2.4rem);font-weight:700;line-height:1.02;letter-spacing:-.02em}
.svc-card__text{max-width:30ch;min-height:7.25em;margin:.9rem 0 1.25rem;color:var(--svc-text);font-size:.875rem;font-weight:700;line-height:1.45}
.svc-card__cta{display:inline-flex;align-items:center;gap:.75rem;align-self:flex-start;margin-top:auto;padding:.875rem 1.75rem;border-radius:999px;font-size:.875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
@media (min-width:48rem){.svc-card{min-height:38rem}.svc-card__body{padding:2rem 2rem 2.25rem}}
/* Cards de serviço em telas grandes: um pouco mais largos (container de 62rem) e na proporção 3:4 */
@media (min-width:64rem){#servicos>.max-w-4xl{max-width:62rem}.svc-card{height:auto;min-height:0;aspect-ratio:3/4}}

/* Botões: o mesmo design em todo o site. Pílula com degradê, estrela e divisória, sem sombra sólida.
   Marrom em fundos claros; dourado em fundos escuros. No hover o degradê desliza e a estrela gira. */
.btn-grad--brown,.svc-card--gold .svc-card__cta{--btn-bg:linear-gradient(120deg,#a36d38 0%,#7a4b1f 48%,#4f2e12 100%);--btn-fg:var(--color-cream)}
.btn-grad--gold,.svc-card--cocoa .svc-card__cta{--btn-bg:linear-gradient(120deg,#fbe7bf 0%,#ecc792 45%,#cf9551 100%);--btn-fg:var(--color-cocoa-deep)}
.btn-grad,.svc-card__cta{border:0;box-shadow:none;background-color:transparent;background-image:var(--btn-bg);background-size:160% 100%;background-position:0% 50%;color:var(--btn-fg);transition:background-position .7s cubic-bezier(.22,1,.36,1),translate .3s ease,filter .3s ease}
.btn-grad:hover,.svc-card:hover .svc-card__cta{background-position:100% 50%;filter:brightness(1.05)}
.svc-card__cta-divider{width:1px;height:1.25rem;background:currentColor;opacity:.5}
.svc-card__cta svg{transition:rotate .5s ease}
.svc-card:hover .svc-card__cta svg{rotate:90deg}


/* Seção "Muito prazer": usa os cards desenhados (assets/sobre). Três layouts:
   - Celular: card vertical (card-quem-sou-eu-mobile-*.webp). O texto fica sobre a área livre do topo,
     que é uma cor sólida (#d59d5b), e os cotovelos saem pelas laterais, como no design.
   - Tablet: texto em cima e o card horizontal inteiro embaixo, com fundo no mesmo gradiente da imagem.
   - Telas grandes: o card horizontal (card-quem-sou-eu-1600/2560.webp) com o texto à esquerda.
   Medidas do card vertical dentro da imagem: o card ocupa 91,03% da largura (começa em 4,50%),
   a cabeça começa em 43,5% da altura e o card termina em 99,61%. */
.about-section{container-type:inline-size;background:var(--color-cream);padding:1rem 1.5rem 6rem}
.about-card{--card-w:100cqw;display:flex;flex-direction:column;max-width:80rem;margin-inline:auto;border-radius:calc(var(--card-w) * .0487);background:#d59d5b}
/* o texto ocupa pelo menos a área livre que a imagem sobrepõe, para a imagem nunca subir além do card */
.about-card__text{order:1;position:relative;z-index:1;min-height:calc(var(--card-w) * .788);padding:2.5rem 1.75rem 0}
/* largura: o card da imagem casa com as bordas do card do site; margem superior: a imagem sobe 39% da
   própria altura por trás do texto (até logo acima da cabeça); margem inferior: corta a sobra transparente */
.about-card__media{order:2;display:block;width:109.85%;margin:-78.8% 0 -.79% -4.94%}
.about-card__img{display:block;width:100%;height:auto}
/* Celular: o botão "Conheça meu trabalho" fica na base do card, sobre as pernas, em uma linha só.
   Sobre o jeans escuro usa o degradê dourado (versão para fundos escuros). */
@media (max-width:47.99rem){
  .about-card{position:relative}
  /* texto centralizado só no celular */
  .about-card__text{position:static;text-align:center}
  .about-card__text>h2,.about-card__text>div{margin-inline:auto}
  .about-card__text>*{position:relative;z-index:1}
  .about-card__text>.mt-10{position:absolute;left:50%;bottom:7%;z-index:2;margin:0;transform:translateX(-50%)}
  .about-card__text>.mt-10 a{--btn-bg:linear-gradient(120deg,#fbe7bf 0%,#ecc792 45%,#cf9551 100%);--btn-fg:var(--color-cocoa-deep);white-space:nowrap}
}
@media (min-width:48rem){
  .about-card{overflow:hidden;border-radius:1.5rem;background:linear-gradient(90deg,#ecc791 0%,#e6bb83 20%,#e0af72 40%,#d8a361 60%,#d4a169 70%,#ddaf78 80%,#eacdab 95%,#eed3b5 100%)}
  .about-card__text{min-height:0;padding:3rem 3.5rem 1rem}
  .about-card__media{width:100%;margin:0}
  .about-card__img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 5%);mask-image:linear-gradient(180deg,transparent 0,#000 5%)}
}
@media (min-width:72rem){
  .about-card{position:relative;overflow:visible;border-radius:0;background:none}
  .about-card__img{-webkit-mask-image:none;mask-image:none}
  /* 2.96%: onde começa o corpo do card, abaixo da cabeça que sai pelo topo */
  .about-card__text{position:absolute;top:2.96%;bottom:0;left:0;display:flex;flex-direction:column;justify-content:center;width:min(42%,33rem);padding:2rem 4rem}
}

/* Navbar flutuante em pílula: vidro marrom translúcido, logo creme, links ao centro, link ativo em dourado
   e botão "Entre em contato" (WhatsApp). Fica mais opaca ao rolar a página. No celular: logo + menu. */
.site-nav{position:fixed;inset:1rem 1rem auto;z-index:50;pointer-events:none}
.site-nav__bar,.site-nav__panel{pointer-events:auto;max-width:72rem;margin-inline:auto;border:1px solid rgba(251,243,230,.16);background:rgba(61,36,16,.4);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 12px 32px -18px rgba(61,36,16,.55);transition:background-color .4s ease}
.site-nav__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3.75rem;padding:.4rem .45rem .4rem 1.4rem;border-radius:999px}
.site-nav.is-scrolled .site-nav__bar,.site-nav.is-open .site-nav__bar,.site-nav__panel{background:rgba(61,36,16,.78)}
.site-nav__logo{display:flex;align-items:center}
.site-nav .site-logo{height:2.6rem}
.site-nav__links{display:none}
.site-nav__links ul{display:flex;align-items:center;gap:2.5rem}
.site-nav__link{color:var(--color-cream);font-size:.875rem;font-weight:400;letter-spacing:.02em;transition:color .3s ease}
.site-nav__link:hover,.site-nav__link.is-active{color:var(--color-gold-light)}
.site-nav__link.is-active{font-weight:700}
.site-nav__cta{display:none!important;padding:.75rem 1.35rem;font-size:.75rem}
.site-nav__toggle{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:999px;color:var(--color-cream);transition:background-color .3s ease}
.site-nav__toggle:hover{background:rgba(251,243,230,.12)}
.site-nav__panel{margin-top:.5rem;padding:.5rem 1.25rem 1.25rem;border-radius:1.5rem}
.site-nav__panel-link{display:block;padding:1rem .25rem;border-bottom:1px solid rgba(251,243,230,.12);color:var(--color-cream);font-size:1.25rem;font-weight:700}
.site-nav__panel-link.is-active{color:var(--color-gold-light)}
.site-nav__panel-cta{margin-top:1.25rem;width:100%;justify-content:center}
@media (min-width:48rem){
  .site-nav{inset:1.25rem 1.5rem auto}
  /* links no centro exato da barra, independente da largura do logo e do botão */
  .site-nav__bar{position:relative}
  .site-nav__links{display:block;position:absolute;left:50%;transform:translateX(-50%)}
  .site-nav__cta{display:inline-flex!important}
  .site-nav__toggle,.site-nav__panel{display:none}
}
/* Textos da hero e da seção "Muito prazer" em creme */
.hero-photo__content h1,.hero-photo__content p,.about-card__text h2,.about-card__text p{color:var(--color-cream)}

/* ===== Páginas de maquiagem e salão no estilo da Home ===== */

/* Hero: mesmo degradê dourado da foto da Home, rabiscos creme, texto creme e foto em moldura creme.
   Foto da página de salão: assets/fotos/site/salao-hero.jpg. */
.lp-hero{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(90deg,#d39c5b,#ecc792);padding:7.5rem 1.5rem 7rem}
.lp-hero__lines{position:absolute;inset:0;z-index:-1;width:100%;height:100%;color:var(--color-cream);opacity:.5}
.lp-hero__inner{display:grid;gap:3rem;align-items:center;max-width:72rem;margin-inline:auto}
.lp-hero__eyebrow{display:flex;align-items:center;gap:.75rem;color:var(--color-cream);font-size:.75rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase}
.lp-hero__eyebrow span{width:2rem;height:1px;background:currentColor}
.lp-hero__title{margin-top:1.25rem;color:var(--color-cream);font-size:clamp(2.6rem,5.4vw,4.25rem);font-weight:700;line-height:1;letter-spacing:-.025em}
.lp-hero__desc{max-width:32rem;margin-top:1.25rem;color:var(--color-cream);font-size:1rem;line-height:1.6}
.lp-hero__ctas{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.25rem}
.lp-hero__media{position:relative;justify-self:center;width:min(100%,26rem)}
.lp-hero__photo{position:relative;aspect-ratio:4/5;overflow:hidden;border:6px solid var(--color-cream);border-radius:1.75rem;box-shadow:0 40px 70px -35px rgba(61,36,16,.6);rotate:2deg}
.lp-hero--professional .lp-hero__photo{rotate:-2deg}
.lp-hero__img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.lp-hero__spark{position:absolute;top:-1.5rem;left:-1.75rem;width:4.5rem;height:4.5rem;color:var(--color-cream)}
@media (min-width:48rem){.lp-hero{padding:9rem 1.5rem 8rem}.lp-hero__inner{grid-template-columns:1.1fr .9fr;gap:4rem}}

/* Cards de informação (ocasiões): mesmos cards da Home, sem botão */
.svc-card__xm{position:absolute;inset:0}
.svc-card--info{min-height:26rem}
.svc-card--info .svc-card__title,.svc-card--info .svc-card__text{min-height:0}
.svc-card--info .svc-card__text{margin-bottom:0}
@media (min-width:48rem){.svc-card--info{min-height:26rem}}

/* Seções sobre fundo creme com card dourado (como o "Muito prazer"), texto creme e estrela de fundo */
.lp-on-cream{background:var(--color-cream)}
.lp-gold-card{position:relative;border-radius:1.5rem;box-shadow:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fbf3e6' fill-opacity='.22' d='M12 0c.6 6.4 5.6 11.4 12 12-6.4.6-11.4 5.6-12 12-.6-6.4-5.6-11.4-12-12C6.4 11.4 11.4 6.4 12 0Z'/%3E%3C/svg%3E") no-repeat right -4rem bottom -5rem/22rem,linear-gradient(120deg,#ecc791 0%,#e0af72 40%,#d39c5b 100%)}
.lp-gold-card :is(h2,h3,p,dd,dt,li span),.lp-gold-card :is(h2,h3,p) *{color:var(--color-cream)}
.lp-gold-card li{border-color:rgba(251,243,230,.3)}
.lp-gold-card li svg{color:var(--color-cream)}
.lp-gold-card li span.rounded-full svg{color:var(--color-cream)}
/* situações: grade de itens dentro do card dourado, com divisórias creme */
.lp-grid-card{overflow:hidden}
.lp-grid-card>li{border-bottom:1px solid rgba(251,243,230,.3)}
.lp-grid-card>li:last-child{border-bottom:0}
@media (min-width:40rem){.lp-grid-card>li:nth-child(odd){border-right:1px solid rgba(251,243,230,.3)}.lp-grid-card>li:nth-last-child(-n+2){border-bottom:0}}
/* CTA final: card dourado largo, com texto creme */
.lp-cta{max-width:72rem;padding:4rem 2rem}
@media (min-width:48rem){.lp-cta{padding:5rem 4.5rem}}

/* Benefícios (salão): cards marrom / dourado / marrom, como os cards da Home */
.benefit-card{border-radius:1.25rem;background:var(--color-cocoa);transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .6s cubic-bezier(.22,1,.36,1)}
.benefit-card:hover{transform:translateY(-6px);box-shadow:0 34px 60px -32px rgba(61,36,16,.5)}
.benefit-card h3{color:var(--color-cream)}
.benefit-card p{color:rgba(251,243,230,.85)}
.benefit-card>span{background:var(--color-cream);color:var(--color-cocoa)}
#solucao li:nth-child(2) .benefit-card{background:linear-gradient(135deg,#ecc791,#d39c5b)}
#solucao li:nth-child(2) .benefit-card h3{color:var(--color-cocoa)}
#solucao li:nth-child(2) .benefit-card p{color:#fff}
#solucao li:nth-child(2) .benefit-card>span{background:var(--color-cocoa);color:var(--color-cream)}

/* Etapas: número na pílula com o degradê marrom dos botões */
.step-badge{display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;border-radius:999px;background:linear-gradient(120deg,#a36d38 0%,#7a4b1f 48%,#4f2e12 100%);color:var(--color-cream);font-size:1.25rem;font-weight:700}
/* respiro entre as etapas e o card final; rabiscos da hero mais suaves para não competir com o texto */
.lp-on-cream:has(.lp-cta){padding-top:5rem}
.lp-hero__lines{opacity:.32}
/* estrela grande da seção "Sua beleza, no conforto...": ela gira devagar, então fica inteira dentro da seção
   (topo em .5rem) para nenhuma ponta ser cortada pela borda de cima */
#domicilio>svg{top:.5rem}

/* ===== "Como funciona": etapas em cards no estilo da Home (creme, dourado e estrelas) ===== */
#como-funciona{position:relative;isolation:isolate;overflow:hidden;background:
  url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27%23e3b77d%27 fill-opacity=%271%27 d=%27M12 0c.6 6.4 5.6 11.4 12 12-6.4.6-11.4 5.6-12 12-.6-6.4-5.6-11.4-12-12C6.4 11.4 11.4 6.4 12 0Z%27/%3E%3C/svg%3E") no-repeat -12rem 55%/26rem,
  url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27%23e3b77d%27 fill-opacity=%271%27 d=%27M12 0c.6 6.4 5.6 11.4 12 12-6.4.6-11.4 5.6-12 12-.6-6.4-5.6-11.4-12-12C6.4 11.4 11.4 6.4 12 0Z%27/%3E%3C/svg%3E") no-repeat calc(100% + 9rem) -6rem/22rem,
  var(--color-cream)}
/* título centralizado, como os títulos de seção da Home */
#como-funciona .max-w-2xl{margin-inline:auto;text-align:center}
/* trilha pontilhada dourada ligando as etapas (aparece nos espaços entre os cards) */
#como-funciona ol{position:relative}
@media (min-width:48rem){#como-funciona ol::before{content:"";position:absolute;top:4.25rem;left:8%;right:8%;z-index:-1;border-top:2px dashed rgba(211,156,91,.55)}}
/* cards perolados com borda dourada fina, faixa dourada no topo e estrela suave no canto */
#como-funciona ol>li{position:relative;overflow:hidden;padding:2.25rem 2rem 2.5rem;border:1px solid rgba(211,156,91,.35);border-radius:1.5rem;background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27%23d39c5b%27 fill-opacity=%27.12%27 d=%27M12 0c.6 6.4 5.6 11.4 12 12-6.4.6-11.4 5.6-12 12-.6-6.4-5.6-11.4-12-12C6.4 11.4 11.4 6.4 12 0Z%27/%3E%3C/svg%3E") no-repeat calc(100% + 1.5rem) -1.5rem/7rem,linear-gradient(160deg,#fffaf2 0%,#f6e7cd 100%);box-shadow:0 30px 60px -40px rgba(61,36,16,.35);transition:translate .6s cubic-bezier(.22,1,.36,1),box-shadow .6s cubic-bezier(.22,1,.36,1)}
#como-funciona ol>li::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,#ecc792,#d39c5b,#a36d38)}
#como-funciona ol>li:hover{translate:0 -6px;box-shadow:0 40px 70px -36px rgba(61,36,16,.45)}
/* número num medalhão em degradê dourado, com um halo */
#como-funciona .step-badge{width:4rem;height:4rem;background:linear-gradient(135deg,#fbe7bf 0%,#ecc792 40%,#d39c5b 100%);color:var(--color-cocoa-deep);box-shadow:0 0 0 6px rgba(236,199,146,.28),0 12px 24px -12px rgba(122,75,31,.6)}
#como-funciona ol>li h3{margin-top:1.75rem}

/* Hero da página de maquiagem com a imagem composta (assets/hero/hero-maquiagem-1600/2560.jpg).
   Celular: texto em cima e a imagem recortada embaixo (fundo amostrado da imagem, sem emenda).
   Telas maiores: a imagem ocupa toda a hero e o texto fica na área livre à esquerda. */
.lp-hero--photo{display:flex;flex-direction:column;padding:0;background:linear-gradient(90deg,#deae6e,#e7bd86 55%,#f0cd9b)}
.lp-hero--photo .lp-hero__inner{order:1;display:block;width:100%;padding:7.5rem 1.5rem 1.5rem}
.lp-hero__bg{order:2;display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:68% 30%;margin-top:-2rem;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%);mask-image:linear-gradient(180deg,transparent 0,#000 8%)}
@media (min-width:48rem){
  .lp-hero--photo{display:flex;flex-direction:row;align-items:center;min-height:max(36rem,42.2vw);background:#d49d5c}
  .lp-hero__bg{position:absolute;inset:0;z-index:-1;height:100%;aspect-ratio:auto;object-position:70% 30%;margin:0;-webkit-mask-image:none;mask-image:none}
  .lp-hero--photo .lp-hero__inner{padding:7rem 1.5rem 6rem}
  .lp-hero--photo .lp-hero__text{max-width:36rem}
}
/* Hero da maquiagem: o texto acompanha a área livre da imagem (até ~40% da largura), à esquerda dos rabiscos */
@media (min-width:48rem){
  .lp-hero__bg{object-position:30% 50%}
  .lp-hero--photo .lp-hero__inner{max-width:none;margin:0;padding:7rem 1.5rem 6rem 7vw}
  .lp-hero--photo .lp-hero__text{max-width:33vw}
  .lp-hero--photo .lp-hero__title{font-size:clamp(2.2rem,3.6vw,4.25rem)}
}
/* Hero da maquiagem em tablets (até 72rem): texto em cima e a imagem inteira embaixo, sem recorte,
   com fundo no mesmo degradê horizontal da imagem (amostrado dela) */
@media (min-width:48rem) and (max-width:71.99rem){
  .lp-hero--photo{flex-direction:column;align-items:stretch;min-height:0;background:linear-gradient(90deg,#d49d5c 0%,#d8a160 20%,#ddab6c 40%,#e1b378 55%,#edc894 70%,#f6deb0 90%,#f3d4a5 100%)}
  .lp-hero__bg{position:static;z-index:auto;height:auto;aspect-ratio:auto;object-fit:fill;margin-top:-2rem;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%);mask-image:linear-gradient(180deg,transparent 0,#000 10%)}
  .lp-hero--photo .lp-hero__inner{padding:8rem 3rem 1rem}
  .lp-hero--photo .lp-hero__text{max-width:36rem}
  .lp-hero--photo .lp-hero__title{font-size:clamp(2.6rem,5.4vw,4.25rem)}
}
/* navbar em tablets: sem espaço para links + botão, então o botão some (a hero já tem o mesmo botão) */
@media (min-width:48rem) and (max-width:63.99rem){.site-nav__cta{display:none!important}}
/* "Como funciona": cards iguais aos cards de serviço da Home (marrom / dourado / marrom, sem moldura nem faixa) */
#como-funciona ol>li{border:0;border-radius:1.25rem;padding:2.25rem 2rem 2.5rem;background:var(--color-cocoa);box-shadow:none}
#como-funciona ol>li::before{content:none}
#como-funciona ol>li:nth-child(2){background:linear-gradient(135deg,#ecc791,#d39c5b)}
#como-funciona ol>li:hover{translate:0 -6px;box-shadow:0 34px 60px -32px rgba(61,36,16,.5)}
#como-funciona ol>li h3{color:var(--color-cream)}
#como-funciona ol>li p{color:rgba(251,243,230,.85);font-weight:700;font-size:.875rem}
#como-funciona ol>li:nth-child(2) h3{color:var(--color-cocoa)}
#como-funciona ol>li:nth-child(2) p{color:#fff}
/* número: medalhão dourado nos cards marrons e marrom no card dourado */
#como-funciona .step-badge{box-shadow:none}
#como-funciona ol>li:nth-child(2) .step-badge{background:linear-gradient(120deg,#a36d38 0%,#7a4b1f 48%,#4f2e12 100%);color:var(--color-cream)}

/* Cards de ocasiões: título reserva 2 linhas e fica alinhado embaixo (títulos de 1 linha descem),
   textos começam na mesma altura e os botões ficam alinhados na base */
.svc-card--info{min-height:30rem}
.svc-card--info .svc-card__title{display:grid;align-content:end;min-height:2.04em}
#ocasioes ul>li{min-width:0}
.svc-card--info .svc-card__text{min-height:2.9em;margin:.9rem 0 1.5rem}
@media (min-width:48rem){.svc-card--info{min-height:32rem}}
/* os cards de ocasiões não seguem a proporção 3:4 dos cards da Home (senão a altura mínima alarga o card) */
.svc-card.svc-card--info{aspect-ratio:auto}

/* ===== Atendimento a domicílio (esboço da cliente) =====
   Box dourada larga com "DOMICÍLIO" gigante embaixo, atrás do card creme.
   Card: foto e botão à esquerda; título, texto e itens (barras douradas) à direita, alinhados à direita.
   Foto: assets/fotos/site/domicilio.jpg */
.dom-section{background:var(--color-cream);padding:1.25rem .75rem}
.dom-box{position:relative;isolation:isolate;overflow:hidden;display:flex;justify-content:center;padding:3.5rem 1.25rem 5rem;border-radius:1rem;background:linear-gradient(115deg,#d39c5b 0%,#dcaa6c 45%,#ecc792 100%)}
.dom-word{position:absolute;left:50%;bottom:-.14em;z-index:-1;translate:-50% 0;font-size:clamp(5rem,23vw,22rem);font-weight:700;line-height:1;letter-spacing:-.04em;text-transform:uppercase;white-space:nowrap;color:#e9c28c;pointer-events:none;user-select:none}
.dom-card{width:100%;max-width:50rem;padding:2rem 1.5rem;border:1px solid rgba(211,156,91,.35);border-radius:.75rem;background:#fff5e8}
.dom-grid{display:flex;flex-direction:column-reverse;gap:2rem}
.dom-left{display:flex;flex-direction:column;gap:1.5rem}
.dom-photo{aspect-ratio:4/5;overflow:hidden;border-radius:.75rem}
.dom-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.dom-btn{width:100%;justify-content:center;--btn-bg:linear-gradient(120deg,#e0af72 0%,#d39c5b 55%,#c08a4c 100%);--btn-fg:var(--color-cream)}
.dom-title{color:#d39c5b;font-size:clamp(2rem,3.4vw,2.6rem);font-weight:700;line-height:1.1;letter-spacing:-.02em}
.dom-desc{margin-top:1rem;color:#d39c5b;font-size:.875rem;font-weight:700;line-height:1.4}
.dom-bars{display:grid;gap:.4rem;margin-top:1rem}
.dom-bars li{display:flex;align-items:center;min-height:2.6rem;padding:.6rem 1rem;border:1px solid rgba(181,123,61,.35);border-radius:.4rem;background:#d39c5b;color:var(--color-cream);font-size:.875rem;font-weight:700;line-height:1.3}
@media (min-width:48rem){
  .dom-section{padding:1.25rem}
  .dom-box{padding:3.5rem 2rem 3.25rem}
  .dom-card{padding:3.25rem 4.25rem 2.5rem}
  .dom-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:stretch}
  .dom-left{justify-content:space-between}
  .dom-photo{flex:1;aspect-ratio:auto;min-height:16rem}
  .dom-btn{width:auto;align-self:flex-start;padding-inline:2.5rem}
  .dom-cta{display:flex}
  .dom-text{text-align:right}
  .dom-desc{max-width:24rem;margin-left:auto}
}
/* a foto preenche a coluna da esquerda sem esticar o card; texto das barras alinhado à esquerda */
.dom-photo{position:relative}
.dom-photo img{position:absolute;inset:0}
.dom-bars li{text-align:left}
@media (min-width:48rem){
  .dom-card{max-width:56rem}
  .dom-grid{grid-template-columns:.9fr 1.1fr}
  .dom-title{font-size:clamp(2rem,3vw,2.5rem)}
}
.dom-btn{white-space:nowrap}
@media (min-width:48rem){.dom-btn{padding-inline:1.6rem}}

/* ===== Atendimento a domicílio em abas (referência: lista com ícones + foto com legenda) =====
   Fotos de cada aba: maquiagem-01, domicilio, maquiagem-06 e maquiagem-04 (assets/fotos/site). */
.dom-card--tabs{max-width:72rem}
.dom-head{margin-bottom:2rem}
.dom-head .dom-desc{max-width:34rem}
.tab-grid{display:grid;gap:1.5rem}
.tab-list{display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(122,75,31,.16);border-radius:1.25rem;background:#fffaf2}
.tab-list ul{display:flex;flex-direction:column}
.tab-item{display:flex;align-items:center;gap:1.1rem;width:100%;padding:1.1rem 1.4rem;border-bottom:1px solid rgba(122,75,31,.12);text-align:left;cursor:pointer;transition:background-color .45s ease}
.tab-item:hover{background:rgba(211,156,91,.1)}
.tab-icon{display:grid;place-items:center;flex:none;width:3.1rem;height:3.1rem;border-radius:.9rem;background:#f6e3c4;color:var(--color-gold);transition:background .45s ease,color .45s ease}
.tab-icon svg{width:1.4rem;height:1.4rem}
.tab-label{flex:1;color:var(--color-cocoa);font-size:1.1rem;font-weight:700;line-height:1.25;transition:color .45s ease}
.tab-arrow{flex:none;width:1.25rem;height:1.25rem;color:rgba(122,75,31,.35);transition:translate .4s cubic-bezier(.22,1,.36,1),color .45s ease}
.tab-item:hover .tab-arrow{translate:4px 0}
.tab-item.is-active{background:linear-gradient(120deg,#7a4b1f 0%,#4f2e12 100%)}
.tab-item.is-active .tab-icon{background:linear-gradient(135deg,#fbe7bf,#d39c5b);color:var(--color-cocoa-deep)}
.tab-item.is-active .tab-label{color:var(--color-cream)}
.tab-item.is-active .tab-arrow{color:var(--color-gold-light)}
.tab-item:focus-visible{outline:2px solid var(--color-gold);outline-offset:-4px}
.tab-note{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:1rem;min-height:10rem;overflow:hidden;padding:1.75rem;background:linear-gradient(115deg,#d39c5b 0%,#dcaa6c 45%,#ecc792 100%)}
.tab-note p{position:relative;color:var(--color-cream);font-size:1rem;font-weight:700;line-height:1.4}
.tab-note .btn-grad{position:relative}
.tab-note__spark{position:absolute;top:-2.5rem;right:-2.5rem;width:11rem;height:11rem;color:rgba(251,243,230,.3)}
.tab-media{position:relative;min-height:28rem;overflow:hidden;border-radius:1.5rem;background:var(--color-nude-soft)}
.tab-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;opacity:0;scale:1.05;transition:opacity .7s ease,scale 1.2s cubic-bezier(.22,1,.36,1)}
.tab-photo.is-active{opacity:1;scale:1}
.tab-caption{position:absolute;left:6%;right:6%;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:1.25rem;padding:1.3rem 1.6rem;border-radius:1.25rem 1.25rem 0 0;background:linear-gradient(rgba(236,199,146,.06) 1px,transparent 1px) 0 0/14px 14px,linear-gradient(90deg,rgba(236,199,146,.06) 1px,transparent 1px) 0 0/14px 14px,rgba(46,29,16,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.tab-caption p{color:var(--color-cream);font-size:1rem;line-height:1.35}
.tab-caption span{display:block}
.tab-caption strong{display:block;font-weight:700}
.tab-caption__logo{flex:none;width:auto;height:2.5rem}
@media (min-width:48rem){
  .dom-card--tabs{padding:3rem 3rem 3rem}
  .dom-head{display:flex;align-items:flex-end;justify-content:space-between;gap:3rem;text-align:left}
  .dom-head .dom-title{max-width:26rem}
  .dom-head .dom-desc{margin:0;text-align:right}
  .tab-grid{grid-template-columns:1fr 1.15fr;gap:2.5rem;align-items:stretch}
  .tab-media{min-height:32rem}
}
/* sem a box dourada de fundo: a palavra "DOMICÍLIO" continua atrás do card, em dourado claro sobre o creme,
   e o card ganha uma sombra suave para se destacar do fundo */
.dom-box{background:none}
.dom-card{box-shadow:0 40px 80px -40px rgba(61,36,16,.35)}
/* sem a box, a palavra não é mais cortada pela borda dela: aparece inteira, saindo de trás do card */
.dom-section{overflow:hidden}
.dom-box{overflow:visible}
.dom-box .dom-word{bottom:0}
@media (min-width:48rem){.dom-box .dom-word{font-size:min(16vw,16rem)}}
/* espaço abaixo do card para cerca de 70% da palavra aparecer (o topo dela fica atrás do card) */
.dom-box{padding-bottom:calc(clamp(4.5rem,22vw,17rem) * .7)}
@media (min-width:48rem){.dom-box{padding-bottom:calc(min(16vw,16rem) * .7)}}
/* palavra "DOMICÍLIO" inteira abaixo do card (sem corte) e com 5% de opacidade.
   Base marrom para que, mesmo a 5%, ela apareça como marca d'água sobre o creme. */
.dom-box .dom-word{color:var(--color-cocoa);opacity:.05}
.dom-box{padding-bottom:calc(clamp(4.5rem,22vw,17rem) * 1.12 + 1rem)}
@media (min-width:48rem){.dom-box{padding-bottom:calc(min(16vw,16rem) * 1.12 + 1rem)}}
/* Abas no celular: acordeão. A foto e a legenda abrem logo abaixo do item tocado (a foto grande ao lado some).
   Seta para cima no item aberto e para baixo nos fechados. No computador, a foto continua ao lado. */
.tab-inline{display:none}
@media (max-width:47.99rem){
  .tab-media{display:none}
  .tab-inline{position:relative;display:block;margin:.9rem 1rem 1rem;overflow:hidden;aspect-ratio:4/5;border-radius:1.25rem;animation:tab-open .55s cubic-bezier(.22,1,.36,1)}
  .tab-inline__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
  .tab-inline .tab-caption{left:5%;right:5%;padding:1.1rem 1.2rem}
  .tab-inline .tab-caption p{font-size:.9rem}
  .tab-inline .tab-caption__logo{height:2rem}
  .tab-list li:has(.tab-inline){border-bottom:1px solid rgba(122,75,31,.12)}
  .tab-item .tab-arrow{rotate:90deg}
  .tab-item.is-active .tab-arrow{rotate:-90deg}
  .tab-item:hover .tab-arrow{translate:0 0}
}
@keyframes tab-open{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}
/* Cards de ocasiões no celular: empilham ao rolar. Cada card fica preso abaixo da navbar e o de baixo
   sobe por cima dele (um pouco mais abaixo, para aparecer a borda do anterior).
   overflow:clip no lugar de hidden, porque hidden impede o "sticky" de funcionar. */
@media (max-width:47.99rem){
  #ocasioes{overflow:clip}
  #ocasioes ul{gap:1.5rem}
  #ocasioes ul>li{position:sticky;top:6rem}
  #ocasioes ul>li:nth-child(2){top:6.75rem}
  #ocasioes ul>li:nth-child(3){top:7.5rem}
  #ocasioes .svc-card{box-shadow:0 -14px 30px -18px rgba(61,36,16,.45)}
}
/* Linhas-guia finas (referência): horizontais na altura do topo e da base do card, cruzando a seção,
   e verticais saindo das laterais do card. Ficam atrás do card e são cortadas pela borda da seção. */
.dom-card::before,.dom-card::after{content:"";position:absolute;z-index:-1;pointer-events:none;border:0 solid rgba(122,75,31,.14)}
.dom-card::before{top:0;bottom:0;left:-100vw;right:-100vw;border-top-width:1px;border-bottom-width:1px}
.dom-card::after{left:0;right:0;top:-100vh;bottom:-100vh;border-left-width:1px;border-right-width:1px}
.dom-card{position:relative}
/* Linhas-guia verticais no site inteiro (de cima até o rodapé, nas três páginas), alinhadas às bordas
   do conteúdo e do card "Sua beleza, no conforto...". Bem finas e transparentes, por cima de tudo,
   sem bloquear cliques. As linhas horizontais continuam só na seção do card. */
body::after{content:"";position:fixed;top:0;bottom:0;left:max(2rem,calc(50% - 36rem));right:max(2rem,calc(50% - 36rem));z-index:45;pointer-events:none;border-left:1px solid rgba(122,75,31,.14);border-right:1px solid rgba(122,75,31,.14)}
@media (min-width:48rem){body::after{left:max(3.25rem,calc(50% - 36rem));right:max(3.25rem,calc(50% - 36rem))}}
/* as verticais do próprio card ficam por conta das linhas do site */
.dom-card::after{content:none}
/* linha-guia horizontal separando o título/texto da lista e da foto (atravessa o card e a seção) */
.dom-head{position:relative;margin-bottom:2.5rem}
.dom-head::after{content:"";position:absolute;left:-100vw;right:-100vw;bottom:-1.25rem;border-top:1px solid rgba(122,75,31,.14);pointer-events:none}
/* "DOMICÍLIO" sobe um pouco: o topo das letras (e o acento) fica escondido atrás do card */
.dom-box{padding-bottom:calc(clamp(4.5rem,22vw,17rem) * .8)}
@media (min-width:48rem){.dom-box{padding-bottom:calc(min(16vw,16rem) * .8)}}
/* Linhas verticais do site passam para TRÁS do conteúdo: a hero, as faixas animadas, as fotos e os cards
   as cobrem. As seções creme ficam sem cor de fundo própria (é a mesma cor do fundo da página),
   para as linhas aparecerem nelas. */
body::after{z-index:-1}
main section.bg-cream,main .lp-on-cream,main .about-section,main .dom-section,main #como-funciona,main #servicos{background-color:transparent!important}

/* Cards de ocasiões: linhas horizontais na altura do topo e da base das fotos, atrás dos cards */
#ocasioes ul{position:relative}
@media (min-width:48rem){
  #ocasioes ul::before{content:"";position:absolute;top:0;bottom:0;left:-100vw;right:-100vw;z-index:-1;pointer-events:none;border-top:1px solid rgba(122,75,31,.14);border-bottom:1px solid rgba(122,75,31,.14)}
}
/* Celular: na foto do acordeão fica só o monograma, num selo compacto centralizado (sem texto visível;
   o texto continua disponível para leitores de tela) */
@media (max-width:47.99rem){
  .tab-inline .tab-caption{left:50%;right:auto;translate:-50% 0;padding:.75rem 1.25rem}
  .tab-inline .tab-caption p{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tab-inline .tab-caption__logo{height:2.2rem}
}

/* ===== "Como funciona": cards com ícones, contorno duplo e etiqueta da etapa ===== */
#como-funciona ol>li{display:flex;flex-direction:column;overflow:visible;padding:2.25rem 2rem 2.5rem;border:1.5px solid rgba(236,199,146,.55);box-shadow:0 30px 60px -38px rgba(61,36,16,.55)}
/* segundo contorno, por dentro do card */
#como-funciona ol>li::after{content:"";position:absolute;inset:.55rem;border:1px solid rgba(251,243,230,.22);border-radius:.85rem;pointer-events:none}
#como-funciona ol>li:nth-child(2){border-color:rgba(122,75,31,.35)}
#como-funciona ol>li:nth-child(2)::after{border-color:rgba(122,75,31,.22)}
/* ícone no medalhão, com halo */
#como-funciona .step-badge{width:3.75rem;height:3.75rem;border-radius:1.1rem;box-shadow:0 0 0 6px rgba(236,199,146,.16),0 14px 26px -12px rgba(0,0,0,.45)}
#como-funciona ol>li:nth-child(2) .step-badge{box-shadow:0 0 0 6px rgba(122,75,31,.14),0 14px 26px -12px rgba(61,36,16,.45)}
.step-icon{width:1.6rem;height:1.6rem;stroke-width:1.9}
/* etiqueta "ETAPA 01" no canto superior direito */
.step-num{position:absolute;top:2.4rem;right:2rem;font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--color-gold-light);opacity:.85}
#como-funciona ol>li:nth-child(2) .step-num{color:var(--color-cocoa)}
#como-funciona ol>li h3{margin-top:1.6rem}
#como-funciona ol>li:hover{border-color:rgba(236,199,146,.9)}
/* seta no meio da linha pontilhada, entre os cards (só no computador) */
@media (min-width:48rem){
  #como-funciona ol>li:not(:last-child)::before{content:"";position:absolute;inset:auto;top:4.25rem;right:-1.45rem;z-index:2;width:.7rem;height:.7rem;translate:0 -50%;rotate:45deg;border-top:2px solid #d39c5b;border-right:2px solid #d39c5b;background:none}
}
/* Hero da página de maquiagem: sem a etiqueta "Maquiagem profissional"; texto alinhado ao logo da navbar;
   botões lado a lado, centralizados na base da hero (computador) */
.lp-hero--photo .lp-hero__eyebrow{display:none}
.lp-hero--photo .lp-hero__title{margin-top:0}
@media (min-width:72rem){
  .lp-hero--photo .lp-hero__inner{position:relative;align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:6rem 1.5rem 9rem calc(max(1.5rem,50% - 36rem) + 1.4rem)}
  .lp-hero--photo .lp-hero__text{max-width:min(33vw,calc(44vw - max(1.5rem,50vw - 36rem) - 3.5rem))}
  .lp-hero--photo .lp-hero__title{font-size:clamp(2.2rem,3.3vw,3.75rem)}
  .lp-hero__ctas--bottom{position:absolute;left:50%;bottom:4.75rem;translate:-50% 0;margin:0;flex-wrap:nowrap;justify-content:center;z-index:2}
}
/* alinhamento ao logo da navbar calculado pela largura da própria hero (cqw), sem depender da barra de rolagem */
@media (min-width:72rem){
  .lp-hero--photo{container-type:inline-size}
  .lp-hero--photo .lp-hero__inner{padding-left:calc(max(1.5rem,50cqw - 36rem) + 1.4rem + 1px)}
  .lp-hero--photo .lp-hero__text{max-width:min(33cqw,calc(44cqw - max(1.5rem,50cqw - 36rem) - 3.5rem))}
}
@media (min-width:72rem){.lp-hero--photo .lp-hero__inner{align-items:flex-start}}
/* Título da hero da maquiagem sempre em 3 linhas: o tamanho da fonte acompanha a largura disponível
   para o texto (a linha mais longa, "beleza à sua altura.", ocupa cerca de 9 vezes o tamanho da fonte) */
.lp-hero--photo .lp-hero__title{max-width:none;font-size:calc((100vw - 3rem) / 9.4)}
@media (min-width:48rem){.lp-hero--photo .lp-hero__title{font-size:calc(min(36rem,100vw - 6rem) / 9.4)}}
@media (min-width:72rem){.lp-hero--photo .lp-hero__title{font-size:calc(min(33cqw,44cqw - max(1.5rem,50cqw - 36rem) - 3.5rem) / 9.4)}}
/* Computador: título maior (coluna do título vai até perto da metade da hero), ainda em 3 linhas.
   O texto de apoio continua estreito, para não cruzar os rabiscos da imagem. */
@media (min-width:72rem){
  .lp-hero--photo .lp-hero__text{max-width:calc(50cqw - max(1.5rem,50cqw - 36rem) - 3.4rem)}
  .lp-hero--photo .lp-hero__title{font-size:calc((50cqw - max(1.5rem,50cqw - 36rem) - 3.4rem) / 9.4)}
  .lp-hero--photo .lp-hero__desc{max-width:min(26rem,calc(44cqw - max(1.5rem,50cqw - 36rem) - 3.5rem))}
}

/* ===== "Como funciona" (versão limpa): contorno simples, ícone leve, etiqueta acima do título ===== */
#como-funciona ol>li{padding:2.25rem 2rem 2.4rem;border:1px solid rgba(236,199,146,.4);box-shadow:none}
#como-funciona ol>li:nth-child(2){border-color:rgba(122,75,31,.25)}
#como-funciona ol>li::after{content:none}
#como-funciona ol>li:hover{border-color:rgba(236,199,146,.75);box-shadow:0 30px 60px -32px rgba(61,36,16,.45)}
/* sem setas entre os cards (fica só a linha pontilhada) */
@media (min-width:48rem){#como-funciona ol>li:not(:last-child)::before{content:none}}
/* ícone: círculo dourado simples, sem halo */
#como-funciona .step-badge{width:3rem;height:3rem;border-radius:999px;box-shadow:none}
#como-funciona ol>li:nth-child(2) .step-badge{box-shadow:none}
.step-icon{width:1.3rem;height:1.3rem;stroke-width:1.8}
/* etiqueta "ETAPA 01" vira uma linha pequena acima do título */
.step-num{position:static;order:2;margin-top:1.6rem;font-size:.68rem;letter-spacing:.24em;opacity:.8}
#como-funciona ol>li h3{order:3;margin-top:.45rem;font-size:1.45rem;white-space:nowrap}
#como-funciona ol>li p{order:4}
@media (min-width:48rem) and (max-width:71.99rem){#como-funciona ol>li h3{white-space:normal}}
/* celular: a estrela grande de fundo da seção de ocasiões some (com os cards empilhando, ela parecia subir junto) */
@media (max-width:47.99rem){#ocasioes>svg{display:none}}
/* sem a seção "Como funciona", o card final vem logo após o portfólio: tira o espaço extra de cima */
.lp-on-cream:has(.lp-cta){padding-top:0}
/* título do portfólio ("Belezas que contam histórias.") centralizado */
#portfolio .max-w-2xl{margin-inline:auto;text-align:center}
/* navbar: mantém a mesma transparência ao sair da hero (não escurece ao rolar) */
.site-nav.is-scrolled:not(.is-open) .site-nav__bar{background:rgba(61,36,16,.4)}

/* ===== Card final da página de maquiagem (referência: card dourado + celular saindo pelo topo e pela base) =====
   Imagem: assets/asset celular/celular-900.webp e celular-1500.webp (com transparência). */
.cta-phone-section{padding:4rem 1.5rem 6rem}
.cta-phone{position:relative;display:flex;flex-direction:column;max-width:72rem;margin-inline:auto;padding:2.75rem 1.75rem 0;border-radius:1.25rem;background:linear-gradient(115deg,#ecc791 0%,#e3b072 45%,#d39c5b 100%)}
.cta-phone__title{color:var(--color-cream);font-size:clamp(2rem,3.4vw,3rem);font-weight:700;line-height:1.08;letter-spacing:-.02em}
.cta-phone__desc{max-width:24rem;margin-top:1rem;color:var(--color-cream);font-size:.95rem;font-weight:700;line-height:1.45}
.cta-phone__btn{display:flex;margin-top:2rem}
.cta-phone__media{margin:1.5rem -1rem -3rem}
.cta-phone__img{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(61,36,16,.35))}
@media (min-width:48rem){
  .cta-phone-section{padding:9rem 1.5rem 9rem}
  .cta-phone{justify-content:center;min-height:23rem;padding:4rem 4.5rem}
  .cta-phone__text{max-width:44%}
  .cta-phone__media{position:absolute;right:1%;top:50%;width:57%;margin:0;translate:0 -54%;pointer-events:none}
}
/* celular do card final maior (os textos não mudam) */
.cta-phone__media{margin:1rem -1.5rem -4.5rem}
@media (min-width:48rem){.cta-phone__media{right:-4%;width:66%;margin:0;translate:0 -53%}}
@media (max-width:47.99rem){.cta-phone__media{margin:1rem -3.25rem -5rem}}

/* ===== Benefícios (página de salão): cards refinados ===== */
.benefit-card{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:19rem;overflow:hidden;padding:2.5rem 2.25rem 2.75rem;border:1px solid rgba(236,199,146,.22);border-radius:1.5rem;background:linear-gradient(160deg,#8b5728 0%,#7a4b1f 45%,#5e3816 100%)}
#solucao li:nth-child(2) .benefit-card{border-color:rgba(122,75,31,.2);background:linear-gradient(140deg,#f1d3a3 0%,#e4b77d 45%,#d39c5b 100%)}
/* estrela grande e suave no canto, como marca d agua */
.benefit-card::after{content:"";position:absolute;right:-3.5rem;bottom:-3.5rem;z-index:-1;width:11rem;height:11rem;background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27%23fbf3e6%27 fill-opacity=%27.09%27 d=%27M12 0c.6 6.4 5.6 11.4 12 12-6.4.6-11.4 5.6-12 12-.6-6.4-5.6-11.4-12-12C6.4 11.4 11.4 6.4 12 0Z%27/%3E%3C/svg%3E") no-repeat center/contain;transition:rotate .9s cubic-bezier(.22,1,.36,1),scale .9s cubic-bezier(.22,1,.36,1)}
#solucao li:nth-child(2) .benefit-card::after{background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27%237a4b1f%27 fill-opacity=%27.1%27 d=%27M12 0c.6 6.4 5.6 11.4 12 12-6.4.6-11.4 5.6-12 12-.6-6.4-5.6-11.4-12-12C6.4 11.4 11.4 6.4 12 0Z%27/%3E%3C/svg%3E")}
.benefit-card:hover{transform:translateY(-6px);box-shadow:0 34px 60px -30px rgba(61,36,16,.5)}
.benefit-card:hover::after{rotate:20deg;scale:1.08}
/* ícone em medalhão redondo */
.benefit-card>span{width:3.5rem;height:3.5rem;border-radius:999px;background:linear-gradient(135deg,#fbe7bf 0%,#ecc792 45%,#d39c5b 100%);color:var(--color-cocoa-deep);box-shadow:0 0 0 6px rgba(236,199,146,.12)}
#solucao li:nth-child(2) .benefit-card>span{background:linear-gradient(135deg,#a36d38 0%,#7a4b1f 50%,#4f2e12 100%);color:var(--color-cream);box-shadow:0 0 0 6px rgba(122,75,31,.12)}
.benefit-card>span svg{width:1.5rem;height:1.5rem}
/* título maior e linha dourada curta separando do texto */
.benefit-card h3{margin-top:2.25rem;font-size:1.5rem;letter-spacing:-.01em}
.benefit-card p{margin-top:1.1rem;font-size:.95rem;line-height:1.55}
.benefit-card p::before{content:"";display:block;width:2.5rem;height:2px;margin-bottom:1.1rem;border-radius:2px;background:var(--color-gold-light)}
#solucao li:nth-child(2) .benefit-card p::before{background:var(--color-cocoa)}
.benefit-card::after{right:-4.75rem;bottom:-4.75rem;width:10rem;height:10rem;opacity:.75}

/* ===== Salão: "Uma parceria para diferentes necessidades" (referência: título fixo + linha + linhas card/foto) =====
   Fotos: assets/fotos/site/salao-04, maquiagem-08, salao-03 e salao-01 (ordem dos itens). */
.sit2-section{padding:6rem 1.5rem;view-timeline-name:--sit2}
.sit2{display:grid;gap:2.5rem;max-width:72rem;margin-inline:auto}
.sit2-eyebrow{color:var(--color-cocoa);font-size:.75rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;opacity:.8}
.sit2-title{margin-top:1rem;padding-left:1.25rem;border-left:4px solid var(--color-gold);color:var(--color-cocoa);font-size:clamp(2.2rem,4vw,3.25rem);font-weight:700;line-height:1.05;letter-spacing:-.02em}
/* primeiras palavras mais leves, como na referência (palavras animadas pelo premium.js) */
.sit2-title .ab-word:nth-child(-n+3){font-weight:400}
.sit2-note{max-width:26rem;margin-top:1.5rem;color:var(--color-ink);font-size:1.05rem;font-weight:700;line-height:1.5;opacity:.85}
.sit2-rail{display:none}
.sit2-list{display:grid;gap:1.25rem}
.sit2-row{position:relative;display:grid;gap:.75rem}
.sit2-card{display:flex;flex-direction:column;justify-content:center;padding:2rem 1.75rem;border:1px solid rgba(211,156,91,.35);border-radius:1.25rem;background:linear-gradient(160deg,#fffaf2 0%,#f6e7cd 100%)}
.sit2-head{display:flex;align-items:flex-start;gap:1rem}
.sit2-num{flex:none;padding-top:.15rem;color:var(--color-gold);font-size:1.6rem;font-weight:700;line-height:1;letter-spacing:-.02em}
.sit2-card__title{color:var(--color-cocoa);font-size:1.4rem;font-weight:700;line-height:1.15;letter-spacing:-.01em}
.sit2-card__text{margin-top:1rem;color:var(--color-ink);font-size:.95rem;line-height:1.55;opacity:.8}
.sit2-photo{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:1.25rem;background:var(--color-nude-soft)}
.sit2-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.sit2-pill{position:absolute;right:-.5rem;bottom:2rem;z-index:2;padding:.7rem 1.2rem;border-radius:999px;background:linear-gradient(120deg,#e0af72 0%,#d39c5b 55%,#c08a4c 100%);color:var(--color-cream);font-size:.85rem;font-weight:700;box-shadow:0 14px 30px -12px rgba(122,75,31,.55)}
@media (min-width:64rem){
  .sit2-section{padding:8rem 1.5rem}
  .sit2{grid-template-columns:minmax(0,.8fr) 2px minmax(0,1.6fr);gap:3.5rem}
  .sit2-intro{position:sticky;top:7rem;align-self:start}
  .sit2-rail{position:relative;display:block;border-radius:2px;background:rgba(211,156,91,.25)}
  .sit2-rail__fill{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:2px;background:linear-gradient(180deg,#ecc792,#d39c5b)}
  .sit2-rail__fill::after{content:"";position:absolute;left:50%;bottom:-5px;width:12px;height:12px;translate:-50% 0;border-radius:50%;background:#d39c5b;box-shadow:0 0 0 5px rgba(211,156,91,.2)}
  .sit2-row{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);min-height:15rem}
  .sit2-card{padding:2.5rem 2.25rem}
  .sit2-photo{aspect-ratio:auto}
  .sit2-pill{right:-1.5rem;bottom:2.5rem}
}
/* a linha vai preenchendo conforme a seção passa pela tela */
@supports (animation-timeline:view()){
  @media (min-width:64rem) and (prefers-reduced-motion:no-preference){
    .sit2-rail__fill{animation:sit2-fill linear both;animation-timeline:--sit2;animation-range:entry 40% exit 40%}
  }
}
@keyframes sit2-fill{from{height:0}to{height:100%}}
/* ajustes: título em 3 linhas e etiqueta em 1 linha */
.sit2-eyebrow{letter-spacing:.2em}
@media (min-width:64rem){.sit2{grid-template-columns:minmax(0,.95fr) 2px minmax(0,1.55fr)}.sit2-title{font-size:clamp(2.2rem,3.1vw,2.75rem)}}
/* cada situação vira um card só: texto e foto dentro da mesma caixa (sem a pílula) */
.sit2-row{gap:0;overflow:hidden;border:1px solid rgba(211,156,91,.35);border-radius:1.25rem;background:linear-gradient(160deg,#fffaf2 0%,#f6e7cd 100%)}
.sit2-card{border:0;border-radius:0;background:none}
.sit2-photo{border-radius:0}
@media (min-width:64rem){.sit2-row{grid-template-columns:minmax(0,1fr) minmax(0,.85fr)}}
/* "Uma parceria para diferentes necessidades" no celular: os cards empilham ao rolar (o de baixo sobe por cima) */
@media (max-width:63.99rem){
  .sit2-list{gap:1.5rem}
  .sit2-list>li{position:sticky;top:6rem;box-shadow:0 -14px 30px -18px rgba(61,36,16,.4)}
  .sit2-list>li:nth-child(2){top:6.75rem}
  .sit2-list>li:nth-child(3){top:7.5rem}
  .sit2-list>li:nth-child(4){top:8.25rem}
}
/* "Conheça meu estilo de maquiagem" (salão): título e botão centralizados no celular */
@media (max-width:47.99rem){
  #trabalhos .max-w-6xl>div:first-child{align-items:center;text-align:center}
  #trabalhos .max-w-6xl>div:first-child .max-w-2xl{margin-inline:auto}
}
/* Celular: mockup quase encostando nas bordas da tela. A parte visível da imagem ocupa 80,8% da largura
   (começa em 13,8%), então a imagem é ampliada para que essa parte vá de 10px a 10px das bordas.
   A sobra transparente é cortada pela seção (overflow-x: clip), sem rolagem lateral. */
@media (max-width:47.99rem){
  .cta-phone-section{overflow-x:clip}
  .cta-phone__media{width:calc((100vw - 1.25rem) / .808);margin:1rem 0 -5rem calc(.625rem - .138 * (100vw - 1.25rem) / .808 - 3.25rem)}
}
/* mesmo cálculo usando a largura real da seção (sem contar a barra de rolagem): 100cqw + 3rem = largura da tela */
@media (max-width:47.99rem){
  .cta-phone-section{container-type:inline-size}
  .cta-phone__media{width:calc((100cqw + 1.75rem) / .808);margin-left:calc(.625rem - .138 * (100cqw + 1.75rem) / .808 - 3.25rem)}
}

/* Card final (maquiagem e salão) só no celular: texto centralizado, estrela acima do título,
   fundo mais rico com brilho onde fica o mockup, borda clara fina e cantos mais arredondados */
@media (max-width:47.99rem){
  .cta-phone{align-items:center;padding:3rem 1.5rem 0;text-align:center;border:1px solid rgba(251,243,230,.35);border-radius:1.75rem;
    background:radial-gradient(120% 60% at 50% 100%,rgba(255,236,205,.55) 0%,rgba(255,236,205,0) 60%),radial-gradient(90% 50% at 50% 0%,rgba(255,246,230,.35) 0%,rgba(255,246,230,0) 70%),linear-gradient(160deg,#ecc791 0%,#dfa868 50%,#c98f4f 100%);
    box-shadow:0 30px 60px -30px rgba(122,75,31,.55)}
  .cta-phone__text{display:flex;flex-direction:column;align-items:center}
  .cta-phone__text::before{content:"";display:block;width:1.6rem;height:1.6rem;margin-bottom:1.1rem;background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27%23fbf3e6%27 d=%27M12 0c.6 6.4 5.6 11.4 12 12-6.4.6-11.4 5.6-12 12-.6-6.4-5.6-11.4-12-12C6.4 11.4 11.4 6.4 12 0Z%27/%3E%3C/svg%3E") no-repeat center/contain;opacity:.9}
  .cta-phone__title{font-size:2.15rem;line-height:1.05}
  .cta-phone__desc{max-width:19rem;margin-inline:auto;margin-top:.9rem;font-size:.95rem}
  .cta-phone__btn{justify-content:center;margin-top:1.75rem}
}
@media (max-width:47.99rem){.cta-phone__media{align-self:flex-start}}
/* padding lateral do card agora é 1.5rem (seção 1.5rem + card 1.5rem = 3rem) */
@media (max-width:47.99rem){.cta-phone__media{margin-left:calc(.625rem - .138 * (100cqw + 1.75rem) / .808 - 3rem)}}

/* ===== Hero da página de salão (imagem: assets/hero/hero-saloes-1600/2560.jpg) =====
   Usa a base da hero com imagem (lp-hero--photo). Computador: título à esquerda, alinhado ao logo da navbar;
   texto e botão à direita, alinhados à direita, nas áreas livres da imagem. */
.lp-hero--salon{background:linear-gradient(90deg,#d59d5b,#dba869 60%,#deab6e)}
.lp-hero--salon .lp-hero__bg{object-position:48% 30%}
@media (min-width:48rem) and (max-width:71.99rem){
  .lp-hero--salon{background:linear-gradient(90deg,#d59d5b 0%,#d59d5b 30%,#d8a263 50%,#d9a565 70%,#ddab6c 100%)}
}
@media (min-width:72rem){
  .lp-hero--salon .lp-hero__bg{object-position:50% 30%}
  .lp-hero--salon .lp-hero__inner{align-items:stretch;padding-right:calc(max(1.5rem,50cqw - 36rem) + 1.4rem + 1px);padding-bottom:7rem}
  .lp-hero--salon .lp-hero__text{display:grid;grid-template-columns:minmax(0,1fr) 17rem;grid-template-rows:auto auto;column-gap:2rem;row-gap:1.75rem;align-items:center;width:100%;max-width:none}
  .lp-hero--salon .lp-hero__title{grid-column:1;grid-row:1 / span 2;max-width:8.6em;font-size:clamp(2.2rem,3vw,3.2rem);line-height:1.08}
  .lp-hero--salon .lp-hero__desc{grid-column:2;grid-row:1;align-self:end;max-width:none;margin:0;text-align:right;font-size:.95rem;font-weight:700;line-height:1.4}
  .lp-hero--salon .lp-hero__ctas{grid-column:2;grid-row:2;align-self:start;justify-content:flex-end;margin:0}
  .lp-hero--salon .lp-hero__ctas .btn-grad{width:100%;justify-content:center}
}
/* ajustes da hero do salão: coluna da direita alinhada ao fim da navbar e botão em uma linha */
@media (min-width:72rem){
  .lp-hero--salon .lp-hero__inner{padding-right:calc(max(1.5rem,50cqw - 36rem) + .45rem + 1px)}
  .lp-hero--salon .lp-hero__text{grid-template-columns:minmax(0,1fr) 18rem}
  .lp-hero--salon .lp-hero__ctas .btn-grad{white-space:nowrap;padding-inline:1.25rem;font-size:.75rem;letter-spacing:.06em}
}
/* "Mais flexibilidade para atender suas clientes" (salão): sem a estrela grande do canto direito */
#solucao>svg:first-of-type{display:none}

/* Hero do salão em telas grandes: textos posicionados pela largura da hero (como a imagem, que escala junto),
   para ficarem sempre nas áreas livres: título de ~11% a ~32%, coluna da direita de ~69% a ~89% */
@media (min-width:72rem){
  .lp-hero--salon .lp-hero__inner{padding-left:11.2cqw;padding-right:11.2cqw}
  .lp-hero--salon .lp-hero__text{grid-template-columns:minmax(0,1fr) 20.2cqw}
  .lp-hero--salon .lp-hero__title{font-size:3cqw}
  .lp-hero--salon .lp-hero__desc{font-size:max(.95rem,1.05cqw)}
}
/* estrela da esquerda da seção "Mais flexibilidade": inteira dentro da seção (a ponta de baixo era cortada) */
#solucao>svg:last-of-type{top:auto;bottom:1.5rem}
@media (min-width:72rem){.lp-hero--salon .lp-hero__text{grid-template-columns:minmax(0,1fr) max(18rem,18cqw)}}
/* Rodapé: contatos como ícones (Instagram e WhatsApp) em círculos */
.footer-social{display:flex;gap:.75rem;margin-top:1rem}
.footer-social__link{display:grid;place-items:center;width:2.9rem;height:2.9rem;border:1px solid rgba(236,199,146,.4);border-radius:999px;color:var(--color-cream);transition:background-color .35s ease,color .35s ease,border-color .35s ease,translate .35s ease}
.footer-social__link svg{width:1.3rem;height:1.3rem}
.footer-social__link:hover{background:linear-gradient(135deg,#fbe7bf,#d39c5b);border-color:transparent;color:var(--color-cocoa-deep);translate:0 -2px}
.footer-social__link:focus-visible{outline:2px solid var(--color-gold-light);outline-offset:3px}
/* Celular: enquadramento das heros com imagem. Recorte mais largo (6:5, mostra ~51% da largura da imagem)
   centrado na pessoa. Maquiagem: pessoa entre 45% e 84% da imagem; salão: entre 25% e 75%. */
@media (max-width:47.99rem){
  .lp-hero--photo .lp-hero__bg{aspect-ratio:6/5;object-position:79% 0}
  .lp-hero--salon .lp-hero__bg{object-position:54% 0}
  /* espaço para os pés/joelhos não ficarem atrás das faixas */
  .lp-hero--romantic{padding-bottom:1.75rem}
}
/* Celular, ajuste fino do enquadramento:
   - maquiagem: recorte um pouco mais fechado (mostra ~40% da largura da imagem), pessoa ~27% maior e ainda inteira
   - salão: espaço embaixo e base da foto esmaecendo, para o braço e os pincéis não ficarem atrás das faixas */
@media (max-width:47.99rem){
  .lp-hero--romantic .lp-hero__bg{aspect-ratio:100/105.5;object-position:79% 0}
  .lp-hero--salon{padding-bottom:2.75rem}
  .lp-hero--salon .lp-hero__bg{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 84%,transparent 100%)}
}
/* salão no celular: recorte mais fechado (~38% da largura da imagem), centrado no rosto e nos pincéis */
@media (max-width:47.99rem){.lp-hero--salon .lp-hero__bg{aspect-ratio:100/110;object-position:53% 0}}
/* hero do salão no celular: título, texto e botão centralizados */
@media (max-width:47.99rem){
  .lp-hero--salon .lp-hero__text{text-align:center}
  .lp-hero--salon .lp-hero__desc{margin-inline:auto}
  .lp-hero--salon .lp-hero__ctas{justify-content:center}
}
/* hero da maquiagem no celular: título, texto e botão centralizados (igual à do salão) */
@media (max-width:47.99rem){
  .lp-hero--romantic .lp-hero__text{text-align:center}
  .lp-hero--romantic .lp-hero__desc{margin-inline:auto}
  .lp-hero--romantic .lp-hero__ctas{justify-content:center}
}
/* Hero da maquiagem no celular: botão "Conhecer os serviços" sobre as pernas, centralizado.
   Posição medida pela largura da hero (a foto tem altura = 105,5% da largura; as pernas ficam em ~75-90% dela).
   Sobre o jeans escuro usa o degradê dourado (versão para fundos escuros). */
@media (max-width:47.99rem){
  .lp-hero--romantic{container-type:inline-size}
  /* o botão continua no fluxo do texto, sem ocupar espaço (altura 0), e é deslocado até as pernas.
     Assim a animação de entrada do texto não muda a referência de posição (antes ele aparecia no texto e depois descia).
     Deslocamento: 81% da altura da foto (105,5cqw) menos o recuo da foto (.5rem) e meia altura do botão */
  .lp-hero--romantic .lp-hero__inner{position:relative;z-index:2}
  .lp-hero--romantic .lp-hero__ctas{position:relative;top:calc(85.8cqw - 2rem);height:0;margin:0;overflow:visible;align-items:flex-start}
  .lp-hero--romantic .lp-hero__ctas .btn-grad{--btn-bg:linear-gradient(120deg,#fbe7bf 0%,#ecc792 45%,#cf9551 100%);--btn-fg:var(--color-cocoa-deep);white-space:nowrap}
}
/* Rodapé no celular: tudo centralizado; logo e região em cima, "Páginas" e "Contato" lado a lado, copyright centralizado */
@media (max-width:47.99rem){
  footer>div:first-child{grid-template-columns:1fr 1fr;column-gap:1.5rem;row-gap:2.25rem;padding-top:3rem;padding-bottom:2.5rem;text-align:center}
  footer>div:first-child>div:first-child{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center}
  footer>div:first-child>div:first-child p:first-of-type{letter-spacing:.3em}
  footer>div:first-child>nav ul{display:flex;flex-direction:column;align-items:center}
  footer .footer-social{justify-content:center}
  footer>div:last-child p{text-align:center;font-size:.7rem;line-height:1.5}
}
/* espaço para o copyright não ficar embaixo do botão flutuante do WhatsApp */
@media (max-width:47.99rem){footer>div:last-child p{padding-bottom:4.5rem}}
/* Rodapé sem "Páginas": marca à esquerda e contato à direita (computador); no celular, tudo centralizado */
@media (min-width:48rem){footer>div:first-child{grid-template-columns:1fr auto;align-items:center}footer>div:first-child>div:last-child{text-align:right}footer .footer-social{justify-content:flex-end}}
@media (max-width:47.99rem){footer>div:first-child>div:last-child{grid-column:1 / -1}}
/* copyright do rodapé centralizado também no computador */
footer>div:last-child p{text-align:center}