:root {
  --bg: #161616;
  --bg-2: #1c1c1c;
  --card: #242424;
  --light: #ECEAE6;
  --ink: #161616;
  --text: #F4F1EC;
  --muted: #A6A19A;
  --muted-l: #5E5B57;
  --peach: #F2B98A;
  --peach-d: #E39A62;
  --grad-peach: linear-gradient(100deg, #f7cfa8 0%, #f2b98a 45%, #e9a066 100%);
  --grad-metal: linear-gradient(120deg, #d98c55 0%, #f7cfa8 40%, #e9a066 70%, #fbe3c9 100%);

  --ff: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ff-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --wrap: 1180px;
  --gut: clamp(18px, 4.5vw, 44px);
  --sec: clamp(80px, 11vw, 140px);
  --curve: clamp(70px, 13vw, 190px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 300 1rem/1.7 var(--ff); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--peach); outline-offset: 3px; }
::selection { background: var(--peach); color: var(--ink); }
[hidden] { display: none !important; }

.wrap { position: relative; width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

/* tipografia */
h1, h2, h3 { margin: 0; font-family: var(--ff-serif); font-weight: 500; letter-spacing: .005em; }
h1 { font-size: clamp(1.75rem, 3.1vw, 2.55rem); line-height: 1.32; text-transform: uppercase; }
h1 b, h2 b { font-weight: inherit; color: var(--peach); }
h2 { font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: 1; text-transform: uppercase; }
h2 i, h1 i { font-style: italic; }
.center { text-align: center; }
.eyebrow { margin: 0 0 18px; text-align: center; font: 500 .66rem var(--ff); letter-spacing: .34em; text-transform: uppercase; color: var(--muted); }
.eyebrow.dark { color: var(--muted-l); text-align: left; }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 30px; font: 600 .76rem var(--ff); letter-spacing: .16em; text-transform: uppercase; border: 1px solid transparent; border-radius: 3px; cursor: pointer; transition: transform .35s var(--ease), box-shadow .35s, background .3s, color .3s, border-color .3s; }
.btn-peach { background: var(--grad-peach); color: var(--ink); box-shadow: 0 18px 40px -18px rgba(233, 160, 102, .7); }
.btn-peach:hover { transform: translateY(-2px); box-shadow: 0 24px 48px -18px rgba(233, 160, 102, .85); }
.btn-line { border-color: rgba(242, 185, 138, .55); color: var(--peach); }
.btn-line:hover { background: var(--peach); color: var(--ink); }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: .68rem; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 34px; }
.btn-text { display: inline-flex; align-items: center; gap: 10px; font-size: .86rem; font-weight: 500; color: var(--text); border-bottom: 1px solid rgba(244, 241, 236, .25); padding-bottom: 2px; transition: border-color .3s, color .3s; }
.btn-text svg { width: 20px; height: 20px; color: var(--peach); }
.btn-text:hover { color: var(--peach); border-color: var(--peach); }

/* header */
.top { position: fixed; inset: 0 0 auto; z-index: 30; display: flex; align-items: center; gap: 28px; padding: 14px var(--gut); transition: background .4s, border-color .4s, padding .4s; border-bottom: 1px solid transparent; }
.top.scrolled { background: rgba(22, 22, 22, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: rgba(255, 255, 255, .06); padding-block: 10px; }
.brand img { width: clamp(150px, 16vw, 190px); height: auto; }
.nav { display: none; margin-left: auto; gap: 34px; font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.nav a:hover { color: var(--peach); }
.top .btn { margin-left: auto; }
@media (min-width: 900px) { .nav { display: flex; } .top .btn { margin-left: 8px; } }

/* hero */
.hero { position: relative; overflow: hidden; padding: 92px 0 clamp(70px, 9vw, 120px); background: radial-gradient(70% 60% at 78% 30%, rgba(233, 160, 102, .16), rgba(233, 160, 102, 0) 70%), var(--bg); }
.side { display: none; position: absolute; left: 22px; top: 50%; margin: 0; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font-size: .62rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--muted); }
.side i { display: inline-block; width: 1px; height: 54px; margin: 14px 0; background: currentColor; vertical-align: middle; }
.hero-grid { display: grid; gap: 34px; align-items: center; }
.kicker { margin: 0 0 22px; }
.kicker span { display: block; font: italic 500 clamp(1.5rem, 2.6vw, 1.95rem)/1.1 var(--ff-serif); font-variant: small-caps; background: var(--grad-metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kicker small { display: block; margin-top: 6px; font-size: .66rem; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.intro { margin: 22px 0 0; max-width: 46ch; font-size: .95rem; color: #d8d3cb; }
.intro u { font-weight: 600; text-decoration-color: var(--peach); text-underline-offset: 4px; }

.stage { position: relative; order: -1; width: 100%; aspect-ratio: 1 / 1.05; max-height: 620px; }
.big { position: absolute; left: -3%; top: -3%; display: flex; flex-direction: column; font: 500 clamp(5.4rem, 24vw, 12.5rem)/.82 var(--ff-serif); letter-spacing: -.02em; pointer-events: none; }
.big span { background: linear-gradient(180deg, #fff 10%, #b9b4ad 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.big span:nth-child(2) { opacity: .5; }
.big span:nth-child(3) { opacity: .24; }
.big span:nth-child(4) { opacity: .09; }
.panel { position: absolute; right: -5%; top: 5%; width: 43%; height: 72%; overflow: hidden; border-radius: 2px; background: radial-gradient(60% 50% at 30% 22%, rgba(255, 236, 214, .75), rgba(255, 236, 214, 0) 60%), linear-gradient(160deg, #f6c9a1 0%, #e9a066 55%, #b8693a 100%); }
.panel::before, .panel::after { content: ""; position: absolute; border-radius: 50%; filter: blur(2px); background: rgba(255, 240, 222, .35); }
.panel::before { width: 34%; aspect-ratio: 1; right: 8%; top: 6%; }
.panel::after { width: 20%; aspect-ratio: 1; right: 50%; top: 30%; background: rgba(255, 240, 222, .22); }
.p2 { position: absolute; left: -30%; bottom: 0; height: 96%; width: auto; max-width: none; filter: saturate(.75) sepia(.12) contrast(1.04); }
.p1 { position: absolute; left: 24%; bottom: 0; height: 94%; width: auto; max-width: none; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 13%), linear-gradient(270deg, transparent 0, #000 16%); -webkit-mask-composite: source-in; mask-image: linear-gradient(0deg, transparent 0, #000 13%), linear-gradient(270deg, transparent 0, #000 16%); mask-composite: intersect; }
.seal { position: absolute; right: -4%; top: 63%; width: 22%; aspect-ratio: 1; }
.seal .ring { width: 100%; height: 100%; animation: spin 36s linear infinite; }
.seal .mono { position: absolute; left: 50%; top: 50%; width: 52%; transform: translate(-50%, -50%); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (min-width: 900px) {
  .side { display: block; }
  .hero { padding-top: 110px; min-height: 100svh; display: flex; align-items: center; }
  .hero-grid { grid-template-columns: .95fr 1.05fr; gap: 40px; }
  .stage { order: 0; height: min(78svh, 680px); aspect-ratio: auto; max-height: none; }
  .big { font-size: clamp(8rem, 12.5vw, 13.5rem); }
}

/* seções claras com curva */
.light { position: relative; z-index: 1; overflow: hidden; background: var(--light); color: var(--ink); padding: var(--sec) 0; }
.round-br { border-radius: 0 0 var(--curve) 0; }
.round-tl { border-radius: var(--curve) 0 0 0; }
.light h2 { color: var(--ink); }
.light .sub { margin: 14px 0 0; font: 500 .9rem var(--ff-serif); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-l); }
.wm { position: absolute; font: italic 500 clamp(16rem, 34vw, 30rem)/1 var(--ff-serif); color: rgba(22, 22, 22, .055); pointer-events: none; user-select: none; }
.wm-r { left: -3%; top: -6%; }
.wm-b { right: -2%; bottom: -18%; }
.wm-d { right: 14%; top: -14%; }
.wm-m { right: -4%; bottom: -22%; }

/* canais */
.canais { display: grid; gap: 50px; align-items: center; }
.links { display: grid; gap: 10px; margin-top: 34px; }
.link { display: grid; grid-template-columns: 26px 1fr 18px; align-items: center; gap: 18px; padding: 20px 22px; background: var(--card); color: var(--text); transition: transform .4s var(--ease), background .3s; }
.link:hover { transform: translateX(6px); background: #2b2b2b; }
.link .ic { width: 26px; height: 26px; color: var(--peach); }
.link b { display: block; font-size: .9rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.link small { display: block; font-size: .8rem; color: var(--muted); line-height: 1.5; }
.link .go { width: 18px; height: 18px; color: var(--peach); }
.link.hot { background: var(--ink); box-shadow: inset 3px 0 0 var(--peach); }
@media (min-width: 900px) { .canais { grid-template-columns: 1.1fr .9fr; gap: 70px; } }

/* sobre */
.sobre { padding: var(--sec) 0; background: var(--bg); }
.sobre-grid { display: grid; gap: 44px; align-items: center; }
.sobre h2 { font-size: clamp(3rem, 7.5vw, 5.4rem); line-height: .95; }
.sobre .lede { margin: 26px 0 18px; font-weight: 600; color: var(--text); }
.sobre-txt p { max-width: 46ch; color: var(--muted); }
.sobre-txt em { font-style: italic; color: var(--peach); }
.sign { width: min(260px, 70%); margin-top: 26px; }
.sobre-foto { position: relative; margin: 0; isolation: isolate; }
.sobre-foto::before { content: ""; position: absolute; inset: 7% -5% -5% 7%; z-index: -1; border: 1px solid rgba(242, 185, 138, .45); border-radius: 0 140px 0 0; }
.sobre-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; border-radius: 0 140px 0 0; filter: saturate(.85) contrast(1.05); }
@media (min-width: 900px) { .sobre-grid { grid-template-columns: 1fr 1fr; gap: 90px; } }

/* galeria */
.galeria { padding: 0 0 var(--sec); background: var(--bg); }
.mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: clamp(150px, 40vw, 250px); gap: 10px; margin-top: 46px; }
.g-tile { position: relative; margin: 0; overflow: hidden; background: var(--card); cursor: zoom-in; }
.g-tile:nth-child(1) { grid-row: span 2; }
.g-tile:nth-child(4) { grid-column: span 2; }
.g-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: 0; transform: scale(1.07); filter: saturate(.9); transition: opacity 1.4s ease, transform 7s var(--ease); }
.g-tile img.on { opacity: 1; transform: scale(1); }
.g-tile::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(242, 185, 138, 0); transition: box-shadow .4s; pointer-events: none; }
.g-tile:hover::after { box-shadow: inset 0 0 0 1px rgba(242, 185, 138, .7); }
@media (min-width: 900px) {
  .mosaic { grid-template-columns: 1.25fr 1fr 1fr; grid-auto-rows: 280px; }
  .g-tile:nth-child(2) { grid-column: span 2; }
  .g-tile:nth-child(4) { grid-column: auto; }
}
.lightbox { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: rgba(12, 12, 12, .94); opacity: 0; pointer-events: none; transition: opacity .3s; cursor: zoom-out; }
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: min(92vw, 1100px); max-height: 86vh; }

/* projetos */
.projetos { padding: var(--sec) 0; background: var(--bg-2); border-top: 1px solid rgba(255, 255, 255, .05); }
.proj-grid { display: grid; gap: 20px; margin-top: 52px; }
.proj { display: flex; flex-direction: column; overflow: hidden; background: var(--card); border: 1px solid rgba(255, 255, 255, .06); transition: transform .45s var(--ease), border-color .35s, box-shadow .45s; }
.proj:hover { transform: translateY(-6px); border-color: rgba(242, 185, 138, .45); box-shadow: 0 34px 60px -40px rgba(0, 0, 0, .9); }
.proj-logo { position: relative; overflow: hidden; height: 220px; display: grid; place-items: center; padding: 34px; background: radial-gradient(70% 80% at 50% 0%, rgba(242, 185, 138, .14), rgba(242, 185, 138, 0) 70%), #1b1b1b; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.proj-logo img { width: 78%; max-height: 152px; object-fit: contain; }
.proj-logo img.atb { width: 56%; }
.proj-logo.book { padding: 0; }
.proj-logo.book img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: 50% 52%; transition: transform 1s var(--ease); }
.proj:hover .proj-logo.book img { transform: scale(1.05); }
.proj-body { flex: 1; display: flex; flex-direction: column; padding: 26px 28px 30px; }
.role { font-size: .66rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--peach); }
.proj h3 { margin-top: 10px; font-size: 1.55rem; line-height: 1.15; }
.proj p { margin: 12px 0 0; font-size: .88rem; color: var(--muted); }
.more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 22px; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--peach); }
.more svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.proj:hover .more svg { transform: translate(3px, -3px); }
@media (min-width: 900px) { .proj-grid { grid-template-columns: repeat(3, 1fr); } }

/* livro */
.livro { display: grid; gap: 40px; align-items: center; }
.livro h2 { font-size: clamp(2.6rem, 6.4vw, 5rem); line-height: .98; }
.livro .por { margin: 22px 0 0; font: italic 500 1.15rem var(--ff-serif); color: var(--muted-l); }
.capa { justify-self: center; margin: 0; width: min(78%, 340px); rotate: -4deg; filter: drop-shadow(0 40px 40px rgba(0, 0, 0, .35)); }
.capa { overflow: hidden; border-radius: 4px; }
.capa img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 52%; transform: scale(1.12); transform-origin: 50% 52%; }
@media (min-width: 900px) { .livro { grid-template-columns: 1.1fr .9fr; } }

/* cta */
.cta { position: relative; overflow: hidden; padding: var(--sec) 0; text-align: center; background: radial-gradient(60% 70% at 50% 100%, rgba(233, 160, 102, .2), rgba(233, 160, 102, 0) 70%), var(--bg); }
.cta-big { font: italic 500 clamp(6rem, 22vw, 15rem)/.85 var(--ff-serif); background: linear-gradient(180deg, rgba(242, 185, 138, .5), rgba(242, 185, 138, 0) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cta h2 { margin-top: -.6em; font-size: clamp(2.2rem, 5vw, 3.6rem); }
.cta p { margin: 18px auto 30px; max-width: 42ch; color: var(--muted); }

/* rodapé */
.foot { padding: 60px 0 44px; text-align: center; border-top: 1px solid rgba(255, 255, 255, .06); }
.foot-sign { width: 220px; margin: 0 auto 28px; }
.socials { display: flex; justify-content: center; gap: 10px; margin: 0 0 26px; padding: 0; list-style: none; }
.socials a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14); color: var(--text); transition: background .3s, color .3s, border-color .3s; }
.socials a:hover { background: var(--peach); border-color: var(--peach); color: var(--ink); }
.socials svg { width: 18px; height: 18px; }
.foot small { font-size: .76rem; color: var(--muted); letter-spacing: .06em; }

/* pilares */
.round-both { border-radius: var(--curve) 0 var(--curve) 0; }
.eyebrow.ink { color: var(--muted-l); }
.eyebrow.left { text-align: left; }
.wm-f { right: -2%; top: -16%; }
.pilares-grid { display: grid; margin: 54px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(22, 22, 22, .14); }
.pilares-grid li { display: grid; grid-template-columns: 64px 1fr; gap: 6px 18px; padding: 28px 0; border-bottom: 1px solid rgba(22, 22, 22, .14); }
.pilares-grid .n { grid-row: span 2; font: italic 500 2.3rem/1 var(--ff-serif); color: var(--peach-d); }
.pilares-grid h3 { font-size: 1.35rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.pilares-grid p { margin: 0; max-width: 46ch; font-size: .92rem; color: var(--muted-l); }
@media (min-width: 900px) {
  .pilares-grid { grid-template-columns: repeat(4, 1fr); gap: 36px; border-top: 0; }
  .pilares-grid li { display: block; padding: 28px 0 0; border-bottom: 0; border-top: 1px solid rgba(22, 22, 22, .2); }
  .pilares-grid .n { display: block; margin-bottom: 18px; font-size: 2.8rem; }
  .pilares-grid p { margin-top: 12px; }
}

/* canais: imagem do youtube */
.device { position: relative; margin: 0; isolation: isolate; rotate: -3deg; }
.device::before { content: ""; position: absolute; inset: 6% -4% -4% 6%; z-index: -1; border: 1px solid rgba(227, 154, 98, .6); border-radius: 26px; }
.device img { width: 100%; border-radius: 22px; box-shadow: 0 50px 80px -40px rgba(0, 0, 0, .55); }

/* legado */
.legado { padding: var(--sec) 0; background: var(--bg); }
.legado-grid { display: grid; gap: 44px; align-items: center; }
.legado h2 { font-size: clamp(2.4rem, 5.6vw, 4.2rem); line-height: 1; }
.legado-txt p:not(.eyebrow) { max-width: 46ch; color: var(--muted); }
.legado-txt h2 + p { margin-top: 26px; }
.legado-foto { position: relative; margin: 0; isolation: isolate; }
.legado-foto::before { content: ""; position: absolute; inset: 7% 7% -5% -5%; z-index: -1; border: 1px solid rgba(242, 185, 138, .45); border-radius: 140px 0 0 0; }
.legado-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: 140px 0 0 0; filter: saturate(.85) contrast(1.05); }
@media (min-width: 900px) { .legado-grid { grid-template-columns: .9fr 1.1fr; gap: 90px; } }

/* livro: descrição */
.livro .desc { margin: 24px 0 0; max-width: 42ch; font-size: 1rem; color: var(--muted-l); }

/* reveal */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .stage > * { opacity: 0; transition: opacity 1.2s var(--ease), transform 1.4s var(--ease); }
.js .stage .big { transform: translateX(-30px); }
.js .stage .panel { transform: translateY(30px); transition-delay: .15s; }
.js .stage .p1 { transform: translateY(24px); transition-delay: .3s; }
.js .stage .seal { transform: scale(.8); transition-delay: .55s; }
.js .stage.in > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .reveal, .js .stage > * { opacity: 1; transform: none; }
}