:root {
  --cream: #e7d4ad;
  --cream-light: #f2e5ca;
  --terracotta: #ad5525;
  --terracotta-deep: #7d361a;
  --orange: #cf8b3e;
  --olive: #3d3c25;
  --olive-deep: #292a1c;
  --wood: #64290f;
  --paper: #f5ead2;
  --white: #fffdf6;
  --ink: #463d2c;
  --muted: #766a52;
  --line: rgba(62, 56, 37, .18);
  --display: "Bebas Neue", Impact, sans-serif;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
  --nav-h: 66px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body { min-width: 320px; background: var(--cream); color: var(--ink); font-family: var(--serif); overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2000; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
img { display: block; max-width: 100%; }
a { color: inherit; }

.site-progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 3000; background: transparent; }
.site-progress span { display: block; width: 0; height: 100%; background: var(--terracotta); box-shadow: 0 0 12px rgba(173,85,37,.6); }

.navbar { position: fixed; inset: 0 0 auto; z-index: 2500; height: var(--nav-h); display: flex; align-items: center; gap: 28px; padding: 0 clamp(18px, 4vw, 58px); color: var(--white); background: linear-gradient(to bottom, rgba(20,21,14,.58), rgba(20,21,14,.18)); border-bottom: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background .45s ease, color .45s ease, transform .45s ease, border-color .45s ease; }
.navbar.scrolled { background: rgba(246,232,204,.94); color: var(--ink); border-color: var(--line); box-shadow: 0 8px 30px rgba(40,30,15,.08); }
.mini-brand { width: 110px; text-decoration: none; display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 1.65rem; letter-spacing: .04em; }
.mini-brand i { width: 20px; height: 20px; border: 1px solid currentColor; border-radius: 50%; display: block; position: relative; }
.mini-brand i::after { content: ""; position: absolute; inset: 4px; border: 1px solid currentColor; border-radius: 50%; }
.nav-links { flex: 1; display: flex; justify-content: center; align-items: center; gap: clamp(12px, 2vw, 30px); }
.nav-link { position: relative; text-decoration: none; font-family: var(--sans); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .8; padding: 9px 0; transition: opacity .25s, transform .25s; }
.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.nav-link:hover, .nav-link.active { opacity: 1; transform: translateY(-1px); }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); transform-origin: left; }
.nav-index { width: 72px; text-align: right; font: 700 .65rem/1 var(--sans); letter-spacing: .1em; opacity: .72; }

.section { position: relative; min-height: 100vh; padding: 110px clamp(22px, 5vw, 80px) 80px; overflow: hidden; isolation: isolate; }
.section-number { position: absolute; top: 96px; left: clamp(22px, 4vw, 62px); z-index: 8; font: 700 .65rem/1 var(--sans); letter-spacing: .18em; color: var(--olive); opacity: .6; }
.section-number::after { content: ""; display: inline-block; vertical-align: middle; width: 35px; height: 1px; margin-left: 10px; background: currentColor; }
.section-number.light { color: var(--white); opacity: .7; }
.eyebrow { font: 700 .65rem/1.2 var(--sans); letter-spacing: .25em; text-transform: uppercase; color: rgba(255,255,255,.82); }
.eyebrow.dark { color: var(--muted); }
h1,h2,h3 { font-weight: 400; }
em { font-style: normal; color: var(--terracotta); }

/* HOME */
.hero { min-height: 100svh; display: grid; place-items: center; background: url("bg-forest.png") center / cover no-repeat; padding: 120px 30px 80px; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(9,16,10,.22), rgba(8,12,8,.05) 45%, rgba(7,12,7,.52)); }
.hero-shade { position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%, transparent 0 22%, rgba(0,0,0,.22) 100%); opacity: .75; }
.hero-grid { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; opacity: .22; background: linear-gradient(45deg, transparent 49.5%, rgba(255,255,255,.75) 50%, transparent 50.5%), linear-gradient(-45deg, transparent 49.5%, rgba(255,255,255,.75) 50%, transparent 50.5%); background-size: 120px 120px; mask-image: linear-gradient(to top, #000, transparent); }
.hero-copy { position: relative; z-index: 3; text-align: center; transform: translateY(-2vh); animation: heroIn 1.2s cubic-bezier(.16,1,.3,1) both; }
.hero-copy > .eyebrow { margin-bottom: 22px; text-shadow: 0 2px 10px rgba(0,0,0,.35); }
.hero-brand { position: relative; display: flex; align-items: center; justify-content: center; width: min(900px, 92vw); margin: 0 auto; }
.hero-rings { position: relative; z-index: 1; width: clamp(135px, 17vw, 245px); margin-right: clamp(-52px, -4vw, -18px); opacity: .78; filter: drop-shadow(0 10px 18px rgba(0,0,0,.3)); animation: ringFloat 5s ease-in-out infinite; pointer-events: none; }
.hero-wordmark { position: relative; z-index: 2; color: var(--white); text-shadow: 0 7px 25px rgba(0,0,0,.35); text-align: left; }
.hero-wordmark h1 { font: 400 clamp(7rem, 15vw, 13rem)/.72 var(--display); letter-spacing: .015em; }
.hero-wordmark span { display: block; text-align: right; margin-top: 13px; padding-right: 1rem; font: 600 clamp(.85rem, 1.7vw, 1.45rem)/1 var(--sans); letter-spacing: .38em; }
.hero-tagline { margin: 30px auto 0; max-width: 520px; color: rgba(255,255,255,.9); font: 500 clamp(1rem, 1.6vw, 1.25rem)/1.4 var(--serif); letter-spacing: .03em; text-shadow: 0 2px 12px rgba(0,0,0,.3); }
.scroll-cue { position: absolute; z-index: 4; bottom: 35px; left: 50%; transform: translateX(-50%); text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 9px; color: var(--white); font: 700 .58rem var(--sans); letter-spacing: .2em; opacity: .8; }
.scroll-cue b { display: block; width: 1px; height: 44px; background: linear-gradient(var(--white), transparent); animation: scrollLine 1.8s ease-in-out infinite; }

/* ABOUT */
.sobre { background: url("bg-sobre.png") center / cover no-repeat; color: var(--white); }
.sobre::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,.07), rgba(255,255,255,0)); z-index: -1; }
.sobre-layout { width: min(1180px, 100%); min-height: calc(100vh - 190px); margin: auto; display: grid; grid-template-columns: .88fr 1.12fr; gap: clamp(45px, 7vw, 90px); align-items: center; }
.sobre-gallery { position: relative; min-height: 640px; display: flex; flex-direction: column; justify-content: center; gap: 28px; }
.sobre-gallery figure { overflow: hidden; border-radius: 24px; box-shadow: 0 24px 55px rgba(69,52,29,.18); }
.sobre-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.16,1,.3,1); }
.sobre-gallery figure:hover img { transform: scale(1.045); }
.gallery-main { width: 100%; aspect-ratio: 1.75/1; margin: 0; border: 9px solid rgba(255,255,255,.88); border-radius: 24px; }
.gallery-secondary { width: 100%; aspect-ratio: 1.75/1; margin: 0; border: 9px solid rgba(255,255,255,.88); border-radius: 24px; }
.gallery-label { position: absolute; left: -22px; bottom: 12px; writing-mode: vertical-rl; transform: rotate(180deg); font: 700 .58rem var(--sans); letter-spacing: .2em; color: rgba(255,255,255,.78); }
.sobre-content { position: relative; z-index: 3; }
.sobre-content h2 { margin-top: 12px; white-space: nowrap; font: 400 clamp(5rem, 8vw, 8.5rem)/.72 var(--display); color: var(--white); text-shadow: 0 3px 14px rgba(70,52,27,.12); }
.sobre-content h2 em { color: inherit; }
.title-rule { width: 72px; height: 2px; margin: 25px 0; background: var(--terracotta); }
.sobre-panel { width: min(610px, 100%); padding: clamp(24px, 3vw, 38px); background: rgba(206,140,62,.48); border: 1px solid rgba(255,255,255,.48); border-radius: 24px; box-shadow: 0 18px 42px rgba(45,28,12,.16); }
.sobre-panel p { color: rgba(255,255,255,.96); font-size: clamp(1.18rem, 1.6vw, 1.48rem); line-height: 1.48; font-weight: 600; }
.sobre-panel p + p { margin-top: 12px; }
.sobre-botanical { position: absolute; right: -20px; bottom: -80px; width: clamp(130px, 15vw, 225px); max-height: 52%; object-fit: contain; opacity: .9; transform: rotate(-4deg); animation: leafFloat 6s ease-in-out infinite; }

/* VALUES */
.valores { background: url("imgaempg3.png") center / cover no-repeat; color: var(--white); padding-top: 145px; }
.organic-bg { position: absolute; inset: -20%; opacity: .14; background: repeating-radial-gradient(ellipse at 8% 70%, transparent 0 36px, #5d2814 37px 47px, transparent 48px 95px), repeating-radial-gradient(ellipse at 78% 26%, transparent 0 35px, #5d2814 36px 46px, transparent 47px 98px); mix-blend-mode: multiply; transform: rotate(-7deg); animation: slowDrift 18s ease-in-out infinite alternate; }
.section-heading { position: relative; z-index: 2; width: min(1180px, 100%); margin: 0 auto 48px; }
.section-heading h2 { margin-top: 10px; font: 400 clamp(3rem, 5vw, 5.4rem)/.8 var(--display); }
.valores-layout { position: relative; z-index: 2; width: min(1180px,100%); margin: auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.valor-card { position: relative; border-radius: 24px; min-height: 390px; padding: 26px 28px 35px; background: rgba(48,48,28,.76); border: 1px solid rgba(255,255,255,.13); overflow: hidden; transition: transform .5s cubic-bezier(.16,1,.3,1), background .5s; }
.valor-card::before { content: ""; position: absolute; width: 180px; height: 180px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; right: -70px; top: -65px; }
.valor-card:hover { transform: translateY(-9px); background: rgba(48,48,28,.9); }
.card-no, .list-no { font: 700 .6rem var(--sans); letter-spacing: .15em; opacity: .55; }
.valor-card h3 { margin-top: 75px; font: 400 clamp(4rem, 6vw, 6.4rem)/.72 var(--display); }
.valor-card p { margin-top: 24px; font: 600 1.32rem/1.45 var(--serif); color: rgba(255,255,255,.85); }
.card-line { position: absolute; left: 28px; bottom: 26px; width: 45px; height: 2px; background: var(--orange); transition: width .45s; }
.valor-card:hover .card-line { width: 90px; }

/* GOLDEN */
.golden { background: url("imagempg4.png") center / cover no-repeat; }
.golden-pattern { position: absolute; inset: 0; opacity: .10; background: repeating-radial-gradient(ellipse at 13% 17%, transparent 0 37px, #b55c27 38px 44px, transparent 45px 90px), repeating-radial-gradient(ellipse at 83% 67%, transparent 0 40px, #b55c27 41px 47px, transparent 48px 96px); animation: slowDrift 22s ease-in-out infinite alternate-reverse; }
.golden-layout { position: relative; z-index: 2; width: min(1180px,100%); min-height: 650px; margin: auto; display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(50px,8vw,120px); align-items: center; }
.golden-intro h2 { margin-top: 10px; font: 400 clamp(5rem, 8vw, 8.4rem)/.72 var(--display); color: var(--white); }
.intro-note { max-width: 330px; margin-top: 20px; font: 500 1.05rem/1.35 var(--serif); color: var(--muted); }
.golden-circles { position: relative; width: min(30vw, 370px); aspect-ratio: 1; margin: 34px auto 0; filter: drop-shadow(0 18px 28px rgba(95,57,22,.12)); }
.circle { position: absolute; border-radius: 50%; inset: 0; background: #d5a15b; transition: transform .7s cubic-bezier(.16,1,.3,1); }
.circle.middle { inset: 13%; background: #d29442; }
.circle.inner { inset: 28%; background: #ca8434; }
.golden-circles:hover .outer { transform: scale(1.025); }
.golden-circles:hover .middle { transform: scale(1.045); }
.golden-circles:hover .inner { transform: scale(1.07); }
.circle-core { position: absolute; inset: 42%; display: grid; place-items: center; border-radius: 50%; background: var(--olive); color: var(--white); font: 400 2rem var(--display); z-index: 2; }
.golden-list { display: grid; gap: 15px; }
.golden-list article { display: grid; border-radius: 20px; grid-template-columns: 40px 1fr; gap: 18px; align-items: start; padding: 25px 30px 28px; color: var(--white); background: rgba(157,70,29,.92); border-left: 3px solid var(--orange); box-shadow: 0 16px 30px rgba(89,49,20,.1); transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s; }
.golden-list article:hover { transform: translateX(8px); box-shadow: 0 20px 38px rgba(89,49,20,.17); }
.golden-list h3 { font: 400 clamp(3rem,4.3vw,4.8rem)/.72 var(--display); }
.golden-list p { margin-top: 13px; font: 600 1.08rem/1.35 var(--serif); opacity: .88; }

/* SWOT */
.swot { background: url("imagempg5.png") center / cover no-repeat; }
.swot-pattern { position: absolute; inset: 0; opacity: .08; background: repeating-linear-gradient(25deg, transparent 0 70px, #b35b25 71px 82px, transparent 83px 160px), repeating-linear-gradient(-35deg, transparent 0 110px, #4c4b25 111px 121px, transparent 122px 200px); }
.swot-header { position: relative; z-index: 3; width: min(1120px,100%); margin: 0 auto 34px; text-align: center; }
.swot-header h2 { margin-top: 10px; font: 400 clamp(4.5rem, 7vw, 7.5rem)/.72 var(--display); color: var(--white); }
.swot-layout { position: relative; z-index: 2; width: min(1120px,100%); min-height: 560px; margin: auto; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 18px 38px; }
.swot-card {
  position: relative;
  width: 100%;
  min-height: 235px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 26px 30px;
  background: rgba(239,225,193,.88);
  border: 1px solid rgba(83,69,39,.12);
  box-shadow: 0 14px 32px rgba(83,69,39,.1);
  overflow: hidden;
  cursor: default;
  transition: transform .5s cubic-bezier(.16,1,.3,1), background .5s cubic-bezier(.16,1,.3,1), box-shadow .5s;
}
.swot-card:hover { transform: translateY(-6px) scale(1.03); background: linear-gradient(135deg, var(--terracotta), var(--terracotta-deep)); box-shadow: 0 20px 40px rgba(122,55,28,.3); }
.swot-card > span { position: absolute; top: 26px; left: 50%; transform: translate(-50%, 0); font: 700 .58rem var(--sans); color: var(--muted); letter-spacing: .15em; transition: opacity .35s ease; }
.swot-card:hover > span { opacity: 0; }
.swot-card h3 { margin: 0; font: 400 clamp(1.9rem,2.8vw,2.5rem)/1 var(--display); color: var(--olive-deep); letter-spacing: .01em; transition: opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1); }
.swot-card:hover h3 { opacity: 0; transform: scale(.7); }
.swot-card p {
  position: absolute;
  inset: 22px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 1.08rem/1.42 var(--serif);
  color: var(--white);
  opacity: 0;
  transform: scale(.8);
  transition: opacity .45s cubic-bezier(.16,1,.3,1) .05s, transform .45s cubic-bezier(.16,1,.3,1) .05s;
  pointer-events: none;
}
.swot-card:hover p { opacity: 1; transform: scale(1); }
.swot-center { position: absolute; width: clamp(185px,21vw,260px); aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; background: rgba(215,195,154,.96); border: 17px solid var(--olive); display: grid; place-content: center; text-align: center; color: var(--white); box-shadow: 0 18px 35px rgba(63,53,29,.13); transition: transform .6s cubic-bezier(.16,1,.3,1); }
.swot-center:hover { transform: translate(-50%,-50%) scale(1.04); }
.swot-center small { font: 700 .55rem var(--sans); letter-spacing: .22em; opacity: .7; }
.swot-center strong { font: 400 clamp(3.7rem,5.4vw,5.7rem)/.75 var(--display); }

/* DESIGNERS */
.designers { background: url("bg-wood.png") center / cover no-repeat; color: var(--white); padding-top: 140px; }
.designers::before { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(50,21,9,.1), rgba(47,18,7,.3)); z-index:-1; }
.designers-heading { position: relative; z-index: 7; width: min(1050px,100%); margin: 0 auto 45px; text-align: center; }
.designers-heading h2 { margin-top: 9px; font: 400 clamp(5rem,8vw,8rem)/.72 var(--display); }
.designers-heading span { display:block; width:60px; height:2px; background: var(--orange); margin: 20px auto 0; }
.designers-layout { position: relative; z-index: 7; width: min(1050px,100%); margin:auto; display:grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.designer { min-width:0; }
.portrait { position: relative; border-radius: 22px; width:100%; aspect-ratio:.72; overflow:hidden; border:8px solid #c8782d; box-shadow: 0 18px 30px rgba(34,13,4,.2); transition: transform .6s cubic-bezier(.16,1,.3,1), box-shadow .5s; }
.portrait img { width:100%; height:100%; object-fit:cover; object-position:center top; transition:transform .7s cubic-bezier(.16,1,.3,1), filter .5s ease; }
.designer:hover .portrait img { transform:scale(1.035); }

.designer:hover .portrait { transform: translateY(-9px) rotate(-1deg); box-shadow: 0 27px 42px rgba(34,13,4,.28); }
.portrait b { position:absolute; top:12px; right:14px; font:700 .55rem var(--sans); letter-spacing:.15em; opacity:.75; z-index:2; }
.designer h3 { margin-top: 15px; font: 700 clamp(1.15rem,1.6vw,1.5rem)/1 var(--serif); }
.designer p { margin-top: 5px; color: rgba(255,255,255,.6); font: 600 .58rem var(--sans); letter-spacing:.12em; text-transform:uppercase; }
.cat { position:absolute; z-index:6; pointer-events:none; filter: drop-shadow(0 10px 14px rgba(0,0,0,.1)); }
.cat-left { width:clamp(100px,12vw,175px); left:-5px; top:100px; animation: leafFloat 7s ease-in-out infinite; }
.cat-right { width:clamp(100px,11vw,165px); right:12px; bottom:-25px; transform:scaleX(-1); animation: leafFloat 8s ease-in-out infinite reverse; }
.foliage-left { position:absolute; z-index:4; left:-55px; bottom:-100px; width:clamp(190px,22vw,315px); opacity:.88; }
.banana-right { position:absolute; z-index:3; right:-125px; top:-80px; width:clamp(280px,30vw,440px); }

/* CONTACT */
.contato { background: url("bg-contato.png") center/cover no-repeat; display:flex; flex-direction:column; justify-content:center; padding-top:130px; padding-bottom:30px; }
.contato::before { content:""; position:absolute; inset:0; background: linear-gradient(120deg, rgba(246,231,200,.15), rgba(235,203,153,.35)); z-index:-1; }
.contato-panel { position:relative; border-radius: 26px; z-index:3; width:min(1120px,100%); margin:auto; display:grid; grid-template-columns:1fr .95fr; min-height:420px; padding:clamp(35px,5vw,65px); background:rgba(165,73,30,.91); color:var(--white); box-shadow:0 28px 60px rgba(74,47,20,.16); }
.contact-intro h2 { margin-top:10px; font:400 clamp(5rem,8vw,8rem)/.72 var(--display); }
.contact-intro > p:last-child { max-width:390px; margin-top:24px; font:500 1.05rem/1.35 var(--serif); color:rgba(255,255,255,.78); }
.contact-details { align-self:center; display:grid; gap:10px; }
.contact-row { display:grid; grid-template-columns:42px 1fr; align-items:center; gap:20px; padding:22px 0; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.2); transition:padding .4s, background .4s; }
.contact-row:hover { padding-left:12px; }
.contact-icon { font:700 .58rem var(--sans); letter-spacing:.12em; opacity:.6; }
.contact-row span:last-child { display:flex; flex-direction:column; font:600 clamp(1.25rem,2vw,1.8rem)/1.1 var(--serif); }
.contact-row small { margin-bottom:7px; font:700 .52rem var(--sans); letter-spacing:.2em; opacity:.58; }
.site-footer { width:min(1120px,100%); margin:35px auto 0; display:flex; justify-content:space-between; gap:20px; color:var(--muted); font:700 .52rem var(--sans); letter-spacing:.16em; }

/* REVEALS */
.reveal-section > * { transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.reveal-section:not(.is-visible) .sobre-content, .reveal-section:not(.is-visible) .sobre-gallery, .reveal-section:not(.is-visible) .valor-card, .reveal-section:not(.is-visible) .golden-intro, .reveal-section:not(.is-visible) .golden-list, .reveal-section:not(.is-visible) .swot-card, .reveal-section:not(.is-visible) .swot-center, .reveal-section:not(.is-visible) .designer, .reveal-section:not(.is-visible) .contato-panel { opacity:0; transform:translateY(28px); }
.reveal-section:not(.is-visible) .valor-card:nth-child(2), .reveal-section:not(.is-visible) .swot-card:nth-child(2), .reveal-section:not(.is-visible) .designer:nth-child(2) { transition-delay:.08s; }
.reveal-section:not(.is-visible) .valor-card:nth-child(3), .reveal-section:not(.is-visible) .swot-card:nth-child(3), .reveal-section:not(.is-visible) .designer:nth-child(3) { transition-delay:.16s; }
.reveal-section:not(.is-visible) .swot-card:nth-child(4), .reveal-section:not(.is-visible) .designer:nth-child(4) { transition-delay:.24s; }

@keyframes heroIn { from { opacity:0; transform:translateY(30px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes ringFloat { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-10px) rotate(1deg); } }
@keyframes ringFloatBehind { 0%,100% { transform:translate(-50%, -50%) rotate(-1deg); } 50% { transform:translate(-50%, calc(-50% - 10px)) rotate(1deg); } }
@keyframes scrollLine { 0%,100% { transform:scaleY(.55); transform-origin:top; opacity:.45; } 50% { transform:scaleY(1); opacity:1; } }
@keyframes leafFloat { 0%,100% { transform:translateY(0) rotate(-3deg); } 50% { transform:translateY(-9px) rotate(1deg); } }
@keyframes slowDrift { from { transform:translate3d(-2%,0,0) rotate(-7deg) scale(1); } to { transform:translate3d(2%,1%,0) rotate(-4deg) scale(1.04); } }

@media (max-width: 1050px) {
  .mini-brand { display:none; }
  .nav-links { justify-content:flex-start; overflow-x:auto; scrollbar-width:none; }
  .nav-links::-webkit-scrollbar { display:none; }
  .nav-index { display:none; }
  .sobre-layout { grid-template-columns:1fr 1fr; gap:35px; }
  .sobre-gallery { min-height:520px; }
  .golden-layout { gap:50px; }
  .designers-layout { gap:15px; }
}

@media (max-width: 800px) {
  :root { --nav-h:58px; }
  .navbar { height:var(--nav-h); padding:0 16px; }
  .nav-links { gap:22px; }
  .nav-link { font-size:.62rem; }
  .section { padding:100px 24px 65px; min-height:auto; }
  .section-number { top:82px; }
  .sobre-layout, .golden-layout { grid-template-columns:1fr; }
  .sobre-gallery { min-height:460px; order:2; }
  .sobre-content { order:1; }
  .sobre-botanical { display:none; }
  .golden-layout { min-height:auto; }
  .golden-intro { text-align:center; }
  .intro-note { margin-left:auto; margin-right:auto; }
  .golden-circles { width:min(58vw,350px); }
  .valores-layout { grid-template-columns:1fr; max-width:560px; }
  .valor-card { min-height:270px; }
  .valor-card h3 { margin-top:45px; }
  .swot-layout { min-height:720px; }
  .swot-center { width:180px; border-width:13px; }
  .designers-layout { grid-template-columns:1fr 1fr; max-width:620px; }
  .contato-panel { grid-template-columns:1fr; gap:35px; }
}

@media (max-width: 560px) {
  .hero { padding-left:16px; padding-right:16px; }
  .hero-copy > .eyebrow { font-size:.53rem; letter-spacing:.16em; }
  .hero-brand { flex-direction:column; }
  .hero-rings { width:170px; margin:0 0 -13px; }
  .hero-wordmark { text-align:center; }
  .hero-wordmark h1 { font-size:clamp(6.5rem,28vw,8.5rem); }
  .hero-wordmark span { text-align:center; padding:0; font-size:.75rem; }
  .hero-tagline { font-size:.98rem; max-width:300px; }
  .sobre-gallery { min-height:370px; }
  .gallery-main { width:92%; }
  .gallery-secondary { width:62%; border-width:6px; }
  .sobre-content h2 { font-size:clamp(3.7rem, 16vw, 5rem); }
  .sobre-panel { padding:24px; }
  .section-heading h2 { font-size:3.5rem; }
  .golden-intro h2 { font-size:5.2rem; }
  .golden-circles { width:230px; }
  .golden-list article { grid-template-columns:28px 1fr; padding:21px; }
  .swot-header h2 { font-size:4.4rem; }
  .swot-layout { display:flex; flex-direction:column; min-height:auto; gap:14px; }
  .swot-card { min-height: 175px; }
  .swot-center { position:relative; left:auto; top:auto; transform:none; align-self:center; flex:0 0 170px; width:170px; margin:-28px 0; }
  .swot-center:hover { transform:scale(1.03); }
  .designers { padding-top:120px; }
  .designers-heading h2 { font-size:5.4rem; }
  .designers-layout { gap:18px 12px; }
  .portrait { border-width:5px; }
  .designer h3 { font-size:1.05rem; }
  .designer p { font-size:.48rem; }
  .cat-left { width:80px; top:75px; }
  .cat-right { width:80px; }
  .banana-right { right:-150px; width:310px; }
  .foliage-left { width:190px; left:-75px; }
  .contact-intro h2 { font-size:5.3rem; }
  .contato-panel { padding:32px 24px; }
  .contact-row span:last-child { font-size:1.15rem; }
  .site-footer { flex-direction:column; text-align:center; gap:8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}


/* GOLDEN CIRCLE — 3 CÍRCULOS DIRETAMENTE INTERATIVOS */
.golden-interactive {
  position: relative;
  width: min(450px, 100%);
  aspect-ratio: 1;
  margin: 30px auto 0;
  display: grid;
  place-items: center;
}
.golden-circles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}
.golden-circle-hit {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.55);
  color: var(--white);
  font: 700 .62rem var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  transition:
    transform .65s cubic-bezier(.16,1,.3,1),
    box-shadow .45s ease,
    background .45s ease,
    border-color .45s ease,
    opacity .45s ease;
}
.golden-circle-hit span {
  position: relative;
  z-index: 3;
  opacity: .88;
  transition: transform .45s ease, opacity .35s ease, letter-spacing .45s ease;
}
.golden-hit-why {
  width: 100%;
  height: 100%;
  z-index: 1;
  background: rgba(45,43,25,.90);
  box-shadow: 0 25px 55px rgba(65,42,18,.20);
}
.golden-hit-how {
  width: 70%;
  height: 70%;
  z-index: 2;
  background: rgba(169,81,35,.94);
}
.golden-hit-what {
  width: 40%;
  height: 40%;
  z-index: 3;
  background: rgba(206,140,62,.98);
  color: var(--white);
}
.golden-circle-hit:hover {
  transform: translate(-50%, -50%) scale(1.035);
  box-shadow: 0 18px 42px rgba(65,42,18,.22);
}
.golden-circle-hit:hover span {
  transform: scale(1.06);
  letter-spacing: .20em;
}
.golden-circle-hit.active {
  border-color: rgba(255,255,255,.92);
  box-shadow: 0 0 0 7px rgba(255,255,255,.12), 0 25px 55px rgba(65,42,18,.24);
}
.golden-circle-hit.active span {
  opacity: 1;
  letter-spacing: .20em;
}
.golden-circle-hit.active::after {
  content: "";
  position: absolute;
  inset: -9px;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 50%;
  animation: goldenPulse 2s ease-in-out infinite;
  pointer-events: none;
}
.golden-content {
  align-self: center;
  position: relative;
  min-height: 360px;
  padding: 42px clamp(28px, 4vw, 48px);
  border-radius: 30px;
  color: var(--white);
  background: linear-gradient(145deg, rgba(48,48,28,.94), rgba(68,58,29,.88));
  box-shadow: 0 28px 60px rgba(66,43,20,.18);
  overflow: hidden;
}
.golden-content::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -90px;
  top: -90px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
}
.golden-content::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.05), transparent 65%);
  transform: translateX(-100%);
  animation: goldenSheen 6s ease-in-out infinite;
}
.golden-content-top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 700 .6rem var(--sans);
  letter-spacing: .18em;
}
.golden-kicker { opacity: .62; }
.golden-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 6px rgba(207,139,62,.12); }
.golden-content-title {
  position: relative;
  z-index: 1;
  margin-top: 70px;
  font: 400 clamp(4rem, 6vw, 6.8rem)/.72 var(--display);
  transition: opacity .25s, transform .5s cubic-bezier(.16,1,.3,1);
}
.golden-content-text {
  position: relative;
  z-index: 1;
  max-width: 470px;
  margin-top: 26px;
  font: 500 1.28rem/1.5 var(--serif);
  color: rgba(255,255,255,.82);
  transition: opacity .25s, transform .5s cubic-bezier(.16,1,.3,1);
}
.golden-content-line {
  position: absolute;
  left: 48px;
  bottom: 34px;
  width: 74px;
  height: 2px;
  background: var(--orange);
}
.golden-content.is-changing .golden-content-title,
.golden-content.is-changing .golden-content-text {
  opacity: 0;
  transform: translateY(14px);
}
@keyframes goldenPulse {
  0%,100% { transform: scale(1); opacity: .45; }
  50% { transform: scale(1.035); opacity: 1; }
}
@keyframes goldenSheen {
  0%,55% { transform: translateX(-100%); }
  75%,100% { transform: translateX(100%); }
}

/* CONTATO — visual profissional */
.contato{background:url("bg-contato.png") center/cover no-repeat; display:flex; flex-direction:column; justify-content:center; padding-top:130px; padding-bottom:30px}
.contato::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(20,22,16,.58),rgba(45,31,18,.30));z-index:-1}
.contato-panel{width:min(1120px,100%);min-height:500px;padding:clamp(38px,5vw,72px);border-radius:32px;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,80px);background:rgba(246,232,204,.94);color:var(--ink);border:1px solid rgba(255,255,255,.25);box-shadow:0 30px 80px rgba(0,0,0,.30);backdrop-filter:blur(4px)}
.contact-intro{display:flex;flex-direction:column;justify-content:center}.contact-badge{display:inline-flex;width:fit-content;padding:8px 13px;margin-bottom:24px;border-radius:999px;border:1px solid rgba(70,61,44,.18);font:700 .56rem var(--sans);letter-spacing:.16em}.contact-intro .eyebrow{color:var(--muted)}
.contact-intro h2{margin-top:13px;color:var(--ink);font:400 clamp(4.4rem,7vw,7.4rem)/.76 var(--display)}.contact-intro h2 em{color:var(--terracotta)}.contact-lead{max-width:440px;margin-top:30px;color:var(--muted);font:500 1.1rem/1.45 var(--serif)}
.contact-details{align-self:center;padding:28px 0 0}.contact-details-title{margin-bottom:12px;color:var(--muted);font:700 .58rem var(--sans);letter-spacing:.18em}.contact-row{grid-template-columns:38px 1fr 28px;gap:16px;padding:24px 0;color:var(--ink);border-bottom:1px solid rgba(70,61,44,.16)}.contact-row span:last-of-type{font:600 clamp(1.12rem,1.7vw,1.5rem)/1.1 var(--serif)}.contact-row small{color:var(--muted)}.contact-row b{justify-self:end;font:400 1.15rem var(--sans);transition:transform .35s}.contact-row:hover{padding-left:10px;background:rgba(255,255,255,.22)}.contact-row:hover b{transform:translate(3px,-3px)}.contact-icon{color:var(--terracotta);opacity:1}.contact-note{margin-top:22px;color:var(--muted);font:600 .66rem/1.45 var(--sans);letter-spacing:.06em}.site-footer{color:rgba(255,255,255,.58)}
@keyframes goldenPulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.04);opacity:1}}@keyframes goldenSheen{0%,55%{transform:translateX(-100%)}75%,100%{transform:translateX(100%)}}
@media (max-width:800px){.sobre-layout{grid-template-columns:1fr;gap:35px}.sobre-gallery{min-height:auto}.sobre-content h2{white-space:normal;font-size:clamp(4rem,15vw,6rem)}.golden-content{min-height:320px}.golden-option:nth-child(1){left:-4%}.golden-option:nth-child(2){right:-8%}.golden-option:nth-child(3){left:2%}.contato-panel{grid-template-columns:1fr;gap:25px}.contact-details{padding-top:0}}
@media (max-width:560px){.sobre-gallery{gap:18px}.gallery-main,.gallery-secondary{aspect-ratio:1.55/1}.gallery-secondary{border-width:5px}.golden-interactive{width:min(330px,100%)}.golden-option{min-width:96px;padding:9px 11px;font-size:.62rem}.golden-option:nth-child(2){right:-11%}.golden-content{padding:30px 24px;border-radius:24px}.golden-content-title{margin-top:52px;font-size:4.2rem}.golden-content-line{left:24px;bottom:24px}.contato-panel{border-radius:24px;padding:30px 24px}.contact-intro h2{font-size:4.7rem}}

/* FORMULÁRIO DE CONTATO */
.contact-form-wrap{align-self:center;padding:0}.contact-form{display:grid;gap:16px}.contact-form label{display:grid;gap:7px;color:var(--muted);font:700 .56rem var(--sans);letter-spacing:.16em;text-transform:uppercase}.contact-form input,.contact-form textarea{width:100%;border:1px solid rgba(70,61,44,.22);border-radius:14px;background:rgba(255,255,255,.62);padding:14px 16px;color:var(--ink);font:500 1rem/1.3 var(--serif);outline:none;transition:border-color .25s,box-shadow .25s,background .25s;resize:vertical}.contact-form input:focus,.contact-form textarea:focus{border-color:var(--terracotta);background:rgba(255,255,255,.9);box-shadow:0 0 0 4px rgba(173,85,37,.10)}.contact-form input::placeholder,.contact-form textarea::placeholder{color:rgba(70,61,44,.45)}.contact-submit{margin-top:4px;display:flex;justify-content:space-between;align-items:center;width:100%;padding:15px 18px;border:0;border-radius:999px;background:var(--terracotta);color:var(--white);font:700 .67rem var(--sans);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;box-shadow:0 12px 25px rgba(122,55,28,.20);transition:transform .3s,box-shadow .3s,background .3s}.contact-submit:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(122,55,28,.28);background:var(--orange)}.contact-submit span{font-size:1.05rem}.contact-form-wrap .contact-note{margin-top:15px}.contact-intro .contact-lead{color:var(--muted)}
@media (max-width:800px){.contato-panel{grid-template-columns:1fr;gap:32px}.contact-form-wrap{width:100%}}


/* Golden Circle: os próprios círculos são os controles */
.circle-button {
  appearance:none; -webkit-appearance:none; padding:0; margin:0; border:0; cursor:pointer;
  display:grid; place-items:center; color:var(--white);
  font:700 .68rem var(--sans); letter-spacing:.13em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  transition: transform .65s cubic-bezier(.16,1,.3,1), filter .35s, box-shadow .45s;
}
.circle-button span { position:relative; z-index:4; opacity:0; transform:translateY(8px); transition:opacity .35s, transform .45s; text-shadow:0 2px 8px rgba(0,0,0,.22); }
.circle-button:hover span, .circle-button.active span { opacity:1; transform:translateY(0); }
.circle-button:hover { filter:brightness(1.08); }
.circle-button.active { box-shadow:inset 0 0 0 2px rgba(255,255,255,.48), 0 0 0 8px rgba(255,255,255,.08); }
.golden-circles:focus-within .circle-button.active { box-shadow:inset 0 0 0 2px rgba(255,255,255,.55), 0 0 0 9px rgba(255,255,255,.10); }
.golden-circles .circle-button.outer { z-index:1; }
.golden-circles .circle-button.middle { z-index:2; }
.golden-circles .circle-button.inner { z-index:3; }
.golden-circles:has(.outer.active) .outer { transform:scale(1.025); }
.golden-circles:has(.middle.active) .middle { transform:scale(1.055); }
.golden-circles:has(.inner.active) .inner { transform:scale(1.08); }
@media (max-width:560px){ .gallery-main,.gallery-secondary{border-width:5px;} .circle-button{font-size:.58rem;letter-spacing:.1em;} }

@media (max-width: 560px) {
  .golden-interactive { width: min(340px, 100%); }
  .golden-circle-hit { letter-spacing: .10em; }
  .golden-circle-hit span { font-size: .52rem; }
  .golden-hit-how { width: 68%; height: 68%; }
  .golden-hit-what { width: 38%; height: 38%; }
}


/* AJUSTES FINAIS — GOLDEN CIRCLE */
.golden-intro h2 { color: var(--white); }
.golden-intro h2 em { color: var(--white); }
.golden-circle-hit { color: var(--white); border-color: rgba(255,255,255,.55); }
/* Hierarquia + degradê: centro = Por quê, meio = Como, fora = O quê.
   O dourado começa mais forte no centro e perde opacidade para fora. */
.golden-hit-why { width: 40%; height: 40%; z-index: 3; background: #ce8c3e !important; }
.golden-hit-how { width: 70%; height: 70%; z-index: 2; background: rgba(206,140,62,.56) !important; }
.golden-hit-what { width: 100%; height: 100%; z-index: 1; background: rgba(206,140,62,.25) !important; }
/* Balão de conteúdo em #a3491c, agora um pouco menos transparente */
.golden-content {
  background: rgba(163,73,28,.45);
  border: 1px solid rgba(163,73,28,.48);
  color: var(--white);
}
.golden-content-title, .golden-content-text, .golden-kicker { color: var(--white); }
.golden-dot { background: #a3491c; }
.golden-content-line { background: rgba(163,73,28,.55); }
@media (max-width:560px){
  .golden-hit-how { width: 68%; height: 68%; }
  .golden-hit-what { width: 100%; height: 100%; }
  .golden-hit-why { width: 38%; height: 38%; }
}

/* ================================================== */
/* ASSISTENTE VIRTUAL — RUBI (chat estilo WhatsApp)    */
/* ================================================== */
.wa-widget { position: fixed; right: clamp(14px, 3vw, 28px); bottom: clamp(14px, 3vw, 28px); z-index: 4000; font-family: var(--sans); }

/* Botão flutuante */
.wa-fab { position: relative; width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer; display: grid; place-items: center; background: var(--terracotta); box-shadow: 0 12px 28px rgba(122,55,28,.35); transition: transform .25s ease, box-shadow .25s ease; }
.wa-fab:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 16px 34px rgba(122,55,28,.42); }
.wa-widget.is-open .wa-fab { transform: scale(.94); }
.wa-cat-icon { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.wa-fab-badge { position: absolute; top: -2px; right: -2px; width: 19px; height: 19px; border-radius: 50%; background: var(--orange); color: var(--white); font: 700 .66rem/19px var(--sans); text-align: center; box-shadow: 0 0 0 2px var(--paper); }
.wa-widget.is-open .wa-fab-badge { display: none; }

/* Janela de conversa */
.wa-chat { position: absolute; right: 0; bottom: 76px; width: min(360px, 88vw); height: min(520px, 70vh); display: flex; flex-direction: column; background: var(--paper); border-radius: 18px; box-shadow: 0 26px 64px rgba(40,30,15,.3); border: 1px solid var(--line); overflow: hidden; transform: translateY(16px) scale(.96); opacity: 0; pointer-events: none; transform-origin: bottom right; transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .25s ease; }
.wa-widget.is-open .wa-chat { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }

.wa-chat-header { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: linear-gradient(135deg, var(--terracotta), var(--terracotta-deep)); color: var(--white); }
.wa-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: none; background: rgba(255,255,255,.18); }
.wa-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wa-chat-info { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.wa-chat-info strong { font: 400 1.15rem var(--display); letter-spacing: .03em; }
.wa-chat-info span { font: 600 .68rem var(--sans); opacity: .85; }
.wa-chat-info span::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #6bd66b; margin-right: 5px; }
.wa-close { background: rgba(255,255,255,.16); border: none; color: var(--white); width: 28px; height: 28px; border-radius: 50%; font-size: 1.1rem; line-height: 1; cursor: pointer; transition: background .2s; flex: none; }
.wa-close:hover { background: rgba(255,255,255,.3); }

/* Área de mensagens */
.wa-messages { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 8px; background-color: var(--cream-light); background-image: radial-gradient(rgba(70,61,44,.05) 1px, transparent 1px); background-size: 16px 16px; scrollbar-width: thin; }

.wa-bubble-row { display: flex; }
.wa-bubble-row.out { justify-content: flex-end; }
.wa-bubble-row.in { justify-content: flex-start; }

.wa-bubble { max-width: 78%; padding: 8px 12px 7px; border-radius: 14px; font: 500 .88rem/1.42 var(--serif); color: var(--ink); box-shadow: 0 1px 2px rgba(40,30,15,.08); position: relative; }
.wa-bubble-row.in .wa-bubble { background: var(--white); border-bottom-left-radius: 3px; }
.wa-bubble-row.out .wa-bubble { background: #f4e2c8; border-bottom-right-radius: 3px; }
.wa-bubble-text { white-space: pre-wrap; word-break: break-word; }
.wa-bubble-time { display: block; text-align: right; font: 500 .62rem var(--sans); color: var(--muted); margin-top: 3px; }

.wa-typing-row { display: flex; justify-content: flex-start; }
.wa-typing-bubble { background: var(--white); border-radius: 14px; border-bottom-left-radius: 3px; padding: 10px 14px; display: inline-flex; gap: 4px; box-shadow: 0 1px 2px rgba(40,30,15,.08); }
.wa-typing-bubble span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); opacity: .4; animation: waDot 1.1s ease-in-out infinite; }
.wa-typing-bubble span:nth-child(2) { animation-delay: .15s; }
.wa-typing-bubble span:nth-child(3) { animation-delay: .3s; }
@keyframes waDot { 0%,60%,100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* Respostas rápidas */
.wa-quick { flex: none; display: flex; gap: 8px; padding: 10px 14px; overflow-x: auto; background: var(--paper); border-top: 1px solid var(--line); scrollbar-width: thin; }
.wa-quick button { flex: none; border: 1px solid var(--line); background: var(--white); color: var(--ink); font: 600 .72rem var(--sans); padding: 7px 13px; border-radius: 999px; cursor: pointer; transition: background .2s, border-color .2s; white-space: nowrap; }
.wa-quick button:hover { background: var(--cream-light); border-color: var(--terracotta); }

/* Barra de envio */
.wa-input-bar { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--paper); border-top: 1px solid var(--line); }
.wa-input-bar input { flex: 1; border: 1px solid rgba(70,61,44,.2); border-radius: 999px; background: var(--white); padding: 10px 16px; font: 500 .88rem var(--serif); color: var(--ink); outline: none; transition: border-color .2s, box-shadow .2s; min-width: 0; }
.wa-input-bar input:focus { border-color: var(--terracotta); box-shadow: 0 0 0 4px rgba(173,85,37,.1); }
.wa-send { width: 40px; height: 40px; flex: none; border: none; border-radius: 50%; background: var(--terracotta); color: var(--white); display: grid; place-items: center; cursor: pointer; transition: background .2s, transform .2s; }
.wa-send:hover { background: var(--orange); transform: translateY(-1px); }

@media (max-width: 560px) {
  .wa-widget { right: 12px; bottom: 12px; }
  .wa-fab { width: 54px; height: 54px; }
  .wa-chat { width: min(94vw, 380px); height: 68vh; bottom: 66px; }
}


/* ==========================================================
   RUBRO STUDIO — INTRO CINEMÁTICA
   ========================================================== */

body.intro-active {
    overflow: hidden;
}


/* FUNDO */

.luxury-intro {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;

    color: #f5eee2;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(125, 18, 47, .45),
            transparent 32%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(160, 55, 72, .18),
            transparent 35%
        ),
        radial-gradient(
            circle at 90% 10%,
            rgba(197, 143, 94, .12),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #27050f,
            #5b071f 45%,
            #31040e
        );

    opacity: 1;

    transition:
        opacity 1.2s cubic-bezier(.77,0,.18,1),
        visibility 1.2s;
}


.luxury-intro.is-exiting {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* GRANULAÇÃO */

.intro-noise {
    position: absolute;
    inset: -50%;

    opacity: .09;

    pointer-events: none;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");

    animation: noiseMove 1s steps(2) infinite;
}

@keyframes noiseMove {

    0% {
        transform: translate(0,0);
    }

    25% {
        transform: translate(2%,-1%);
    }

    50% {
        transform: translate(-1%,2%);
    }

    75% {
        transform: translate(1%,1%);
    }

    100% {
        transform: translate(-2%,-1%);
    }

}


/* LUZES */

.intro-glow {
    position: absolute;

    width: 45vw;
    height: 45vw;

    border-radius: 50%;

    filter: blur(80px);

    opacity: .18;

    pointer-events: none;
}

.intro-glow-one {
    left: -15vw;
    bottom: -20vw;

    background: #d63b62;

    animation:
        glowFloat 8s ease-in-out infinite;
}

.intro-glow-two {
    right: -15vw;
    top: -20vw;

    background: #c99c7b;

    animation:
        glowFloat 9s ease-in-out infinite reverse;
}

@keyframes glowFloat {

    0%,100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.12) translate(-2vw,1vh);
    }

}


/* MOLDURA */

.intro-border {
    position: absolute;

    left: 5vw;
    right: 5vw;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(245,238,226,.55),
            transparent
        );

    transform: scaleX(0);

    animation:
        borderReveal 1.4s .2s
        cubic-bezier(.16,1,.3,1)
        forwards;
}

.intro-border-top {
    top: 9vh;
}

.intro-border-bottom {
    bottom: 9vh;

    animation-delay: .35s;
}

@keyframes borderReveal {

    to {
        transform: scaleX(1);
    }

}


/* INFORMAÇÕES SUPERIORES */

.intro-top {
    position: absolute;

    top: 5.5vh;
    left: 7vw;
    right: 7vw;

    display: flex;
    justify-content: space-between;

    font-family: var(--sans);

    font-size: .58rem;
    font-weight: 700;

    letter-spacing: .22em;

    text-transform: uppercase;

    opacity: 0;

    animation:
        metaIn 1s .7s ease forwards;
}

@keyframes metaIn {

    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: .65;
        transform: translateY(0);
    }

}


/* CONTEÚDO */

.intro-content {
    position: relative;

    z-index: 10;

    width: min(1100px,90vw);
    height: 100%;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;
}


/* KICKER */

.intro-kicker {
    margin-bottom: 12px;

    font-family: var(--sans);

    font-size: .58rem;
    font-weight: 700;

    letter-spacing: .28em;

    text-transform: uppercase;

    opacity: 0;

    animation:
        introUp .9s .8s
        cubic-bezier(.16,1,.3,1)
        forwards;
}


/* LOGO */

.intro-logo {
    text-align: center;

    position: relative;

    z-index: 8;
}


.intro-rubro {
    font-family: var(--display);

    font-size: clamp(
        4.5rem,
        10vw,
        9.5rem
    );

    font-weight: 400;

    letter-spacing: .08em;

    line-height: .8;

    opacity: 0;

    transform: translateY(30px);

    animation:
        logoReveal 1.3s 1s
        cubic-bezier(.16,1,.3,1)
        forwards;
}


.intro-studio {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 18px;

    margin-top: 18px;

    font-family: var(--serif);

    font-size: clamp(
        1.3rem,
        2.5vw,
        2.5rem
    );

    letter-spacing: .38em;

    padding-left: .38em;

    opacity: 0;

    animation:
        introUp 1s 1.35s
        cubic-bezier(.16,1,.3,1)
        forwards;
}


.intro-studio span {
    width: 45px;

    height: 1px;

    background: rgba(245,238,226,.65);
}


@keyframes logoReveal {

    from {
        opacity: 0;
        transform:
            translateY(35px)
            scale(.96);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }

}


/* CENA */

.intro-scene {
    position: relative;

    width: min(900px,90vw);

    height: min(52vh,530px);

    margin-top: -10px;
}


/* GATO */

.intro-cat {
    position: absolute;

    z-index: 5;

    left: 50%;
    bottom: 0;

    width: clamp(
        230px,
        29vw,
        410px
    );

    transform:
        translateX(-50%)
        translateY(100px)
        scale(.72);

    opacity: 0;

    animation:
        catEntrance 1.6s 1.25s
        cubic-bezier(.16,1,.3,1)
        forwards;
}


.intro-cat img {
    display: block;

    width: 100%;
    height: auto;

    position: relative;
    z-index: 2;

    filter:
        drop-shadow(
            0 30px 30px
            rgba(0,0,0,.45)
        );

    animation:
        catFloat 5s 3s
        ease-in-out infinite;
}


/* AURA ATRÁS DO GATO */

.cat-aura {
    position: absolute;

    left: 50%;
    top: 20%;

    width: 130%;
    aspect-ratio: 1;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,225,210,.13),
            transparent 65%
        );

    filter: blur(20px);

    animation:
        auraPulse 5s ease-in-out infinite;
}


/* SOMBRA */

.cat-shadow {
    position: absolute;

    z-index: 1;

    left: 50%;
    bottom: -2%;

    width: 65%;
    height: 7%;

    transform: translateX(-50%);

    border-radius: 50%;

    background: rgba(0,0,0,.45);

    filter: blur(15px);

    animation:
        shadowPulse 5s ease-in-out infinite;
}


@keyframes catEntrance {

    0% {
        opacity: 0;

        transform:
            translateX(-50%)
            translateY(100px)
            scale(.72);
    }

    65% {
        opacity: 1;

        transform:
            translateX(-50%)
            translateY(-8px)
            scale(1.03);
    }

    100% {
        opacity: 1;

        transform:
            translateX(-50%)
            translateY(0)
            scale(1);
    }

}


@keyframes catFloat {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform:
            translateY(-9px)
            rotate(-.5deg);
    }

}


@keyframes auraPulse {

    0%,100% {
        opacity: .45;
        transform:
            translateX(-50%)
            scale(.95);
    }

    50% {
        opacity: .9;
        transform:
            translateX(-50%)
            scale(1.07);
    }

}


@keyframes shadowPulse {

    0%,100% {
        transform:
            translateX(-50%)
            scaleX(1);
    }

    50% {
        transform:
            translateX(-50%)
            scaleX(.85);
    }

}


/* ==========================================================
   LÍRIOS BRANCOS
   ========================================================== */

.intro-lily {
    position: absolute;

    z-index: 4;

    bottom: 1%;

    width: clamp(
        150px,
        21vw,
        260px
    );

    opacity: 0;

    filter:
        drop-shadow(
            0 18px 20px
            rgba(0,0,0,.30)
        );
}


.lily-left {

    left: -2%;

    transform:
        translateX(-80px)
        rotate(-8deg)
        scale(.9);

    animation:
        lilyLeftIn 1.5s 1.55s
        cubic-bezier(.16,1,.3,1)
        forwards;
}


.lily-right {

    right: -2%;

    transform:
        translateX(80px)
        rotate(8deg)
        scale(.9);

    animation:
        lilyRightIn 1.5s 1.7s
        cubic-bezier(.16,1,.3,1)
        forwards;
}


.intro-lily svg {
    width: 100%;

    height: auto;

    display: block;

    overflow: visible;
}


/* CAULE */

.intro-lily .stem {

    fill: none;

    stroke:
        rgba(150,130,90,.9);

    stroke-width: 2;

    stroke-linecap: round;
}


/* FOLHAS */

.intro-lily .leaf {

    fill:
        rgba(65,70,48,.75);

    stroke:
        rgba(235,225,205,.35);

    stroke-width: 1;
}


/* PÉTALAS BRANCAS */

.intro-lily .petal {

    fill:
        linear-gradient(
            135deg,
            #ffffff,
            #eee6d7
        );

    fill: #f8f3e8;

    stroke:
        rgba(255,255,255,.9);

    stroke-width: 1.2;

    filter:
        drop-shadow(
            0 2px 3px
            rgba(0,0,0,.18)
        );
}


/* CENTRO */

.intro-lily .flower-center {

    fill: #eee1c7;

    stroke: #fff;

    stroke-width: 1;
}


/* ESTAMES */

.intro-lily .stamen {

    fill: none;

    stroke: #80572b;

    stroke-width: 1.5;

    stroke-linecap: round;
}


.intro-lily .pollen {

    fill: #b78335;
}


/* ANIMAÇÃO DOS LÍRIOS */

@keyframes lilyLeftIn {

    0% {
        opacity: 0;

        transform:
            translateX(-80px)
            rotate(-8deg)
            scale(.9);
    }

    70% {
        opacity: 1;

        transform:
            translateX(5px)
            rotate(-1deg)
            scale(1.03);
    }

    100% {
        opacity: .92;

        transform:
            translateX(0)
            rotate(-2deg)
            scale(1);
    }

}


@keyframes lilyRightIn {

    0% {
        opacity: 0;

        transform:
            translateX(80px)
            rotate(8deg)
            scale(.9);
    }

    70% {
        opacity: 1;

        transform:
            translateX(-5px)
            rotate(1deg)
            scale(1.03);
    }

    100% {
        opacity: .92;

        transform:
            translateX(0)
            rotate(2deg)
            scale(1);
    }

}


.flower {
    transform-origin: center;

    animation:
        flowerSway 6s 3s
        ease-in-out infinite;
}


@keyframes flowerSway {

    0%,100% {
        transform: rotate(0);
    }

    50% {
        transform: rotate(-3deg);
    }

}


/* FRASE */

.intro-tagline {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 5px;

    margin-top: -10px;

    font-family: var(--serif);

    font-size: clamp(
        .85rem,
        1.2vw,
        1.1rem
    );

    letter-spacing: .17em;

    text-align: center;

    opacity: 0;

    animation:
        introUp 1s 2.1s
        cubic-bezier(.16,1,.3,1)
        forwards;
}


.intro-tagline small {

    font-size: .72em;

    letter-spacing: .23em;

    opacity: .55;
}


/* BOTÃO */

.intro-enter {

    position: relative;

    margin-top: 25px;

    padding: 14px 21px;

    display: flex;

    align-items: center;

    gap: 20px;

    color: #f7efe2;

    background:
        rgba(255,255,255,.045);

    border:
        1px solid
        rgba(255,255,255,.42);

    border-radius: 999px;

    font-family: var(--sans);

    font-size: .62rem;

    font-weight: 700;

    letter-spacing: .2em;

    cursor: pointer;

    overflow: hidden;

    opacity: 0;

    animation:
        introUp 1s 2.35s
        cubic-bezier(.16,1,.3,1)
        forwards;

    transition:
        .4s ease;
}


.intro-enter::before {

    content: "";

    position: absolute;

    inset: 0;

    background: #f7efe2;

    transform:
        translateX(-105%);

    transition:
        transform .45s
        cubic-bezier(.16,1,.3,1);
}


.intro-enter span,
.intro-enter b {

    position: relative;

    z-index: 2;
}


.intro-enter b {

    font-size: 1rem;

    font-weight: 400;

    transition: .35s ease;
}


.intro-enter:hover {

    color: #51051d;

    border-color: #f7efe2;

    transform:
        translateY(-3px);
}


.intro-enter:hover::before {

    transform:
        translateX(0);
}


.intro-enter:hover b {

    transform:
        translate(4px,-4px);
}


/* PULAR */

.intro-skip {

    position: absolute;

    z-index: 20;

    top: 5.4vh;

    right: 7vw;

    border: 0;

    background: transparent;

    color: #f5eee2;

    font-family: var(--sans);

    font-size: .55rem;

    font-weight: 700;

    letter-spacing: .18em;

    cursor: pointer;

    opacity: .5;

    transition: .3s ease;
}


.intro-skip:hover {

    opacity: 1;

    transform:
        translateY(-2px);
}


/* ANIMAÇÃO GENÉRICA */

@keyframes introUp {

    from {
        opacity: 0;

        transform:
            translateY(20px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* ENTRADA DO SITE */

body.site-ready .navbar {

    animation:
        siteReveal .9s
        cubic-bezier(.16,1,.3,1);
}


body.site-ready .hero-copy {

    animation:
        siteReveal 1.2s .15s
        both
        cubic-bezier(.16,1,.3,1);
}


@keyframes siteReveal {

    from {
        opacity: 0;

        transform:
            translateY(25px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* CELULAR */

@media (max-width: 760px) {

    .intro-top span:nth-child(2) {
        display: none;
    }

    .intro-top {
        left: 6vw;
        right: 6vw;
    }

    .intro-scene {
        width: 100vw;

        height: 48vh;
    }

    .intro-cat {
        width:
            clamp(
                220px,
                58vw,
                340px
            );
    }

    .intro-lily {
        width:
            clamp(
                110px,
                29vw,
                170px
            );
    }

    .lily-left {
        left: -5%;
    }

    .lily-right {
        right: -5%;
    }

    .intro-rubro {
        font-size: 18vw;
    }

    .intro-studio {
        font-size: 5vw;
    }

}


/* TELAS BAIXAS */

@media (
    max-height: 700px
) and (min-width: 761px) {

    .intro-scene {
        height: 42vh;
    }

    .intro-cat {
        width: 300px;
    }

    .intro-tagline {
        margin-top: -20px;
    }

}