:root {
  --paper: #ffffff;
  --ink: #171717;
  --red: #ed2630;
  --blue: #252525;
  --yellow: #f4f4f4;
  --green: #9a9a9a;
  --line: rgba(23, 23, 23, .12);
  --shadow: 0 24px 70px rgba(0, 0, 0, .14);
  --pad: clamp(1.25rem, 4vw, 4.75rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}
body.is-menu-open, body.is-modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
::selection { background: var(--red); color: var(--paper); }

.skip-link {
  position: fixed; left: 1rem; top: -4rem; z-index: 999;
  background: var(--ink); color: var(--paper); padding: .8rem 1rem;
}
.skip-link:focus { top: 1rem; }

#gentilezaCanvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; opacity: .58; }
.grain {
  position: fixed; inset: -100%; z-index: 99; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  animation: grain 9s steps(10) infinite;
}
@keyframes grain { 0%,100%{transform:translate(0,0)} 20%{transform:translate(4%,8%)} 40%{transform:translate(-8%,4%)} 60%{transform:translate(8%,-6%)} 80%{transform:translate(-4%,-8%)} }
.cursor-orbit { position: fixed; z-index: 150; width: 38px; height: 38px; border: 1px solid rgba(24,23,18,.42); border-radius: 50%; pointer-events: none; transform: translate(-50%,-50%); transition: width .2s, height .2s, background .2s; mix-blend-mode: multiply; }
.cursor-orbit.is-hovering { width: 70px; height: 70px; background: rgba(239,63,47,.12); }

.loader { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; pointer-events: none; }
.loader__curtain { position: absolute; top: 0; bottom: 0; width: 50.5%; background: var(--ink); transition: transform 1.15s cubic-bezier(.77,0,.18,1) .65s; }
.loader__curtain--left { left: 0; transform-origin: left; }
.loader__curtain--right { right: 0; transform-origin: right; }
.loader__mark { z-index: 1; color: var(--paper); display: flex; flex-direction: column; align-items: center; line-height: .82; transition: opacity .35s .38s; }
.loader__mark span { font-family: Georgia, serif; font-style: italic; font-size: 1rem; align-self: flex-start; }
.loader__mark strong { font-size: clamp(3rem, 9vw, 8rem); letter-spacing: -.075em; text-transform: lowercase; }
.loader__mark small { margin-top: 1.1rem; text-transform: uppercase; letter-spacing: .28em; font-size: .62rem; }
body.is-loaded .loader__curtain--left { transform: translateX(-101%); }
body.is-loaded .loader__curtain--right { transform: translateX(101%); }
body.is-loaded .loader__mark { opacity: 0; }
body.is-loaded .loader { visibility: hidden; transition: visibility 0s 1.85s; }

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  height: 86px; padding: 0 var(--pad); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  transition: background .3s, border-color .3s, transform .3s;
}
.site-header.is-scrolled { background: rgba(255,255,255,.88); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.site-header.is-hidden { transform: translateY(-110%); }
.brand { display: inline-flex; align-items: baseline; gap: .35rem; width: max-content; font-weight: 800; letter-spacing: -.05em; }
.brand__cia { font-family: Georgia, serif; font-style: italic; font-weight: 400; font-size: .88rem; }
.brand__name { font-size: 1.45rem; }
.site-nav { display: flex; align-items: center; gap: clamp(1.2rem, 2.4vw, 3rem); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }
.site-nav a { position: relative; }
.site-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-.35rem; height:1px; background:currentColor; transition:right .25s; }
.site-nav a:hover::after, .site-nav a:focus-visible::after { right:0; }
.sound-button, .menu-button { border: 0; background: none; cursor: pointer; }
.sound-button { justify-self: end; display: flex; align-items: center; gap: .6rem; text-transform: uppercase; letter-spacing: .14em; font-size: .65rem; }
.sound-button__bars { display: flex; align-items: center; gap: 2px; height: 15px; }
.sound-button__bars i { width: 2px; height: 5px; background: currentColor; animation: soundbar .7s ease-in-out infinite alternate; animation-play-state: paused; }
.sound-button__bars i:nth-child(2) { animation-delay: -.2s; height: 10px; }
.sound-button__bars i:nth-child(3) { animation-delay: -.4s; height: 7px; }
.sound-button__bars i:nth-child(4) { animation-delay: -.1s; height: 12px; }
.sound-button[aria-pressed="true"] .sound-button__bars i { animation-play-state: running; }
@keyframes soundbar { to { height: 15px; } }
.menu-button { display:none; text-transform:uppercase; letter-spacing:.12em; font-size:.68rem; }

main, .site-footer { position: relative; z-index: 2; }
.hero { min-height: 100svh; padding: 10.5rem var(--pad) 4rem; position: relative; display: grid; align-content: center; overflow: hidden; }
.hero__eyebrow, .section-label { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; }
.hero__eyebrow { margin-bottom: 1.7rem; }
.hero__title { margin: 0; width: min-content; font-weight: 900; text-transform: lowercase; letter-spacing: -.085em; line-height: .72; position: relative; z-index: 3; }
.hero__line { display: block; white-space: nowrap; }
.hero__line--one { font-size: clamp(5.2rem, 14.5vw, 14.8rem); }
.hero__line--two { margin-left: clamp(1.8rem, 10vw, 11rem); color: var(--red); font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; font-size: clamp(3.15rem, 8.8vw, 9rem); letter-spacing: -.08em; }
.hero__intro { width: min(31rem, 75vw); margin: 3.5rem 0 0 auto; font-size: clamp(1.05rem, 1.6vw, 1.4rem); line-height: 1.4; position:relative; z-index:3; }
.hero__actions { display:flex; justify-content:flex-end; gap:.8rem; margin-top:1.8rem; position:relative; z-index:3; }
.button { min-height: 50px; padding: 0 1.25rem; border: 1px solid var(--ink); display:inline-flex; align-items:center; justify-content:center; gap:1.4rem; text-transform:uppercase; letter-spacing:.12em; font-size:.65rem; cursor:pointer; transition:transform .2s, background .2s, color .2s; }
.button:hover { transform: translateY(-3px); }
.button--primary { background:var(--ink); color:var(--paper); }
.button--ghost { background:transparent; }
.hero__figure { position:absolute; width:clamp(280px,35vw,560px); aspect-ratio:1; top:48%; left:53%; transform:translate(-50%,-50%); z-index:0; opacity:.88; }
.hero__ring { position:absolute; border:1px solid rgba(24,23,18,.35); border-radius:50%; }
.hero__ring--one { inset:4%; animation:orbit 18s linear infinite; }
.hero__ring--one::after { content:""; position:absolute; width:18px; height:18px; border-radius:50%; background: linear-gradient(90deg, var(--paper), #f0f0f0); left:8%; top:16%; }
.hero__ring--two { inset:18%; border-style:dashed; animation:orbit 11s linear infinite reverse; }
@keyframes orbit { to{ transform:rotate(360deg);} }
.hero__body { position:absolute; width:14%; height:54%; left:44%; top:22%; background:var(--ink); border-radius:50% 50% 30% 30%; transform:rotate(25deg); clip-path:polygon(35% 0,70% 0,80% 38%,100% 58%,70% 100%,38% 88%,0 58%,20% 36%); }
.hero__body::before { content:""; position:absolute; width:70%; aspect-ratio:1; border-radius:50%; background:var(--ink); left:15%; top:-11%; }
.hero__ribbon { position:absolute; width:72%; height:36%; border:3px solid var(--red); border-left-color:transparent; border-radius:50%; left:14%; top:31%; transform:rotate(-22deg); animation:ribbon 5s ease-in-out infinite alternate; }
@keyframes ribbon { to{ transform:rotate(-12deg) scale(1.06); } }
.scroll-cue { position:absolute; left:var(--pad); bottom:2rem; display:flex; align-items:center; gap:1rem; text-transform:uppercase; letter-spacing:.16em; font-size:.58rem; transform:rotate(-90deg); transform-origin:left center; }
.scroll-cue i { width:54px; height:1px; background:currentColor; position:relative; overflow:hidden; }
.scroll-cue i::after { content:""; position:absolute; inset:0; background:var(--red); animation:scrollline 1.5s ease-in-out infinite; }
@keyframes scrollline { from{transform:translateX(-100%)} to{transform:translateX(100%)} }

.marquee { border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; padding:.95rem 0; background: linear-gradient(90deg, var(--paper), #f0f0f0); }
.marquee__track { display:flex; width:max-content; align-items:center; gap:1.7rem; animation:marquee 25s linear infinite; font-weight:900; font-size:clamp(1.3rem,2vw,2.1rem); letter-spacing:-.04em; text-transform:uppercase; }
.marquee__track b { font-size:.8rem; }
@keyframes marquee { to{ transform:translateX(-50%); } }

.section { padding: clamp(6rem, 10vw, 10rem) var(--pad); }
.section-label { display:flex; align-items:center; gap:.7rem; margin-bottom:4rem; }
.section-label span { width:2rem; height:2rem; border:1px solid currentColor; border-radius:50%; display:grid; place-items:center; font-size:.55rem; letter-spacing:0; }
.display-title { margin:0; font-size:clamp(3.8rem,8vw,9rem); letter-spacing:-.075em; line-height:.82; font-weight:900; }
.display-title em { color:var(--red); font-family:Georgia,serif; font-weight:400; }
.company { background:var(--ink); color:var(--paper); }
.company__grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr); gap:clamp(3rem,8vw,9rem); align-items:end; }
.company__copy { font-size:clamp(1.05rem,1.5vw,1.35rem); line-height:1.55; max-width:37rem; }
.company__copy p { margin:0 0 1.5rem; }
.text-link { display:inline-flex; gap:1rem; margin-top:1.2rem; padding-bottom:.3rem; border-bottom:1px solid; font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; }
.company__quote { margin-top:clamp(6rem,11vw,11rem); border-top:1px solid rgba(242,237,221,.22); display:grid; grid-template-columns:1fr 3fr; padding-top:2rem; }
.quote-mark { font-family:Georgia,serif; font-size:7rem; line-height:.7; color:var(--red); }
.company blockquote { margin:0; font-family:Georgia,serif; font-style:italic; font-size:clamp(2rem,4.8vw,5.6rem); line-height:1.03; letter-spacing:-.045em; }

.shows { overflow:hidden; }
.section-heading { display:grid; grid-template-columns:1fr 2fr; align-items:end; margin-bottom:4rem; }
.section-heading .section-label { align-self:start; }
.section-heading .display-title { grid-column:2; }
.section-note { grid-column:2; width:min(28rem,100%); line-height:1.5; }
.poster-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,2rem); perspective:1500px; }
.poster { min-width:0; border:1px solid var(--line); background:rgba(255,255,255,.18); transform-style:preserve-3d; transition:transform .18s ease, box-shadow .25s; outline:none; }
.poster:hover, .poster:focus-visible { box-shadow:var(--shadow); }
.poster__art { aspect-ratio:4/5; position:relative; overflow:hidden; transform:translateZ(20px); }
.poster__meta { padding:1.4rem; border-top:1px solid var(--line); transform:translateZ(30px); }
.poster__meta > span { text-transform:uppercase; letter-spacing:.12em; font-size:.56rem; }
.poster__meta h3 { font-size:clamp(1.7rem,2.5vw,3rem); letter-spacing:-.06em; line-height:.9; margin:1rem 0; }
.poster__meta p { min-height:4.2em; font-size:.9rem; line-height:1.45; }
.poster__meta button { background:none; border:0; border-bottom:1px solid; padding:.3rem 0; cursor:pointer; text-transform:uppercase; letter-spacing:.12em; font-size:.58rem; }
.poster__word { position:absolute; left:-.05em; bottom:-.08em; font-weight:900; font-size:clamp(3rem,5.4vw,6rem); letter-spacing:-.1em; line-height:.8; writing-mode:vertical-rl; transform:rotate(180deg); opacity:.82; }
.poster--red .poster__art { background:var(--red); color:var(--paper); }
.poster--blue .poster__art { background:var(--ink); color:var(--paper); }
.poster--yellow .poster__art { background: linear-gradient(90deg, var(--paper), #f0f0f0); }
.poster__sun { position:absolute; width:62%; aspect-ratio:1; border-radius:50%; background: linear-gradient(90deg, var(--paper), #f0f0f0); right:-15%; top:8%; }
.poster__line { position:absolute; width:120%; height:2px; background:var(--paper); left:-10%; top:48%; transform:rotate(-17deg); }
.poster__acrobat { position:absolute; background:var(--ink); width:12%; height:42%; border-radius:50%; clip-path:polygon(30% 0,72% 0,86% 45%,100% 76%,65% 100%,37% 85%,0 65%,16% 38%); }
.poster__acrobat::before { content:""; position:absolute; width:80%; aspect-ratio:1; border-radius:50%; background:var(--paper); top:-8%; left:10%; }
.poster__acrobat--one { left:53%; top:28%; transform:rotate(62deg); }
.poster__moon { position:absolute; width:58%; aspect-ratio:1; border-radius:50%; border:2px solid var(--paper); left:10%; top:12%; }
.poster__stairs { position:absolute; width:68%; height:40%; right:-5%; bottom:10%; background:repeating-linear-gradient(to bottom,var(--paper) 0 2px,transparent 2px 20px); transform:skewY(-20deg); }
.poster__acrobat--two { right:18%; top:28%; transform:rotate(-20deg); background: var(--red); }
.poster__portal { position:absolute; width:58%; height:72%; border:3px solid var(--red); border-radius:50% 50% 0 0; left:24%; top:13%; box-shadow:inset 0 0 0 12px var(--ink); }
.poster__dots { position:absolute; inset:0; background-image:radial-gradient(var(--ink) 1.1px,transparent 1.1px); background-size:18px 18px; opacity:.25; }
.poster__acrobat--three { left:47%; top:28%; transform:rotate(14deg); background:var(--red); }


.gallery { background:#f5f5f5; overflow:hidden; }
.gallery__heading { display:grid; grid-template-columns:1fr 2fr; align-items:end; gap:2rem; margin-bottom:2.5rem; }
.gallery__heading .section-label { align-self:start; }
.gallery__heading .display-title { grid-column:2; }
.gallery__intro { grid-column:2; width:min(34rem,100%); margin:0; font-size:1.05rem; line-height:1.55; }
.gallery__filters { display:flex; flex-wrap:wrap; gap:.55rem; margin:0 0 2rem; }
.gallery__filters button { border:1px solid var(--ink); background:transparent; padding:.65rem .95rem; text-transform:uppercase; letter-spacing:.12em; font-size:.56rem; cursor:pointer; transition:background .2s,color .2s,transform .2s; }
.gallery__filters button:hover { transform:translateY(-2px); }
.gallery__filters button.is-active { background:var(--ink); color:var(--paper); }
.gallery__grid { display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(.75rem,1.5vw,1.4rem); }
.gallery-item { grid-column:span 6; position:relative; min-width:0; padding:0; border:0; background:var(--ink); color:var(--paper); cursor:pointer; overflow:hidden; text-align:left; }
.gallery-item:nth-child(1) { grid-column:span 7; }
.gallery-item:nth-child(2) { grid-column:span 5; }
.gallery-item:nth-child(3) { grid-column:span 4; }
.gallery-item:nth-child(4) { grid-column:span 8; }
.gallery-item[hidden] { display:none; }
.gallery-item::after { content:"abrir ↗"; position:absolute; right:1rem; top:1rem; z-index:2; padding:.5rem .65rem; border:1px solid rgba(255,255,255,.6); background:rgba(0,0,0,.28); backdrop-filter:blur(8px); text-transform:uppercase; letter-spacing:.12em; font-size:.5rem; opacity:0; transform:translateY(-5px); transition:opacity .25s,transform .25s; }
.gallery-item:hover::after,.gallery-item:focus-visible::after { opacity:1; transform:none; }
.gallery-item:focus-visible { outline:3px solid var(--red); outline-offset:3px; }
.gallery-art { aspect-ratio:16/10; overflow:hidden; background:var(--ink); }
.gallery-item:nth-child(2) .gallery-art,.gallery-item:nth-child(3) .gallery-art { aspect-ratio:4/5; }
.gallery-art svg { display:block; width:100%; height:100%; transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .4s; }
.gallery-item:hover .gallery-art svg,.gallery-item:focus-visible .gallery-art svg { transform:scale(1.045); filter:contrast(1.05); }
.gallery-item__caption { position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; padding:3.5rem 1rem 1rem; background:linear-gradient(to top,rgba(0,0,0,.78),transparent); }
.gallery-item__caption strong { display:block; font-size:clamp(1.05rem,1.8vw,1.5rem); letter-spacing:-.035em; }
.gallery-item__caption span { display:block; margin-top:.25rem; text-transform:uppercase; letter-spacing:.12em; font-size:.5rem; opacity:.82; }
.gallery__note { display:flex; justify-content:space-between; gap:2rem; margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--line); font-size:.7rem; line-height:1.5; }
.gallery__note span:first-child { text-transform:uppercase; letter-spacing:.12em; }

.gallery-lightbox { width:100vw; max-width:none; height:100vh; max-height:none; margin:0; padding:0; border:0; background:var(--ink); color:var(--paper); overflow:hidden; }
.gallery-lightbox::backdrop { background:var(--ink); }
.gallery-lightbox .gallery-lightbox__close { position:absolute; right:clamp(1rem,3vw,2.5rem); top:1rem; z-index:5; width:3rem; height:3rem; border:1px solid rgba(255,255,255,.4); border-radius:50%; background:rgba(0,0,0,.32); color:var(--paper); font-size:1.5rem; cursor:pointer; }
.gallery-lightbox__stage { height:calc(100vh - 112px); display:grid; place-items:center; padding:clamp(1rem,4vw,4rem); }
.gallery-lightbox__media { width:min(1180px,100%); height:100%; display:grid; place-items:center; }
.gallery-lightbox__media .gallery-art { width:100%; height:100%; aspect-ratio:auto; background:transparent; }
.gallery-lightbox__media svg { width:100%; height:100%; object-fit:contain; }
.gallery-lightbox__bar { height:112px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:2rem; padding:1rem var(--pad); border-top:1px solid rgba(255,255,255,.2); }
.gallery-lightbox__nav { display:flex; gap:.5rem; }
.gallery-lightbox__nav button { width:3rem; height:3rem; border:1px solid rgba(255,255,255,.4); background:transparent; color:inherit; cursor:pointer; font-size:1.2rem; }
.gallery-lightbox__info strong { display:block; font-size:1.25rem; letter-spacing:-.03em; }
.gallery-lightbox__info span { display:block; margin-top:.3rem; text-transform:uppercase; letter-spacing:.12em; font-size:.52rem; opacity:.7; }
.gallery-lightbox__count { font-family:Georgia,serif; font-style:italic; font-size:1.15rem; }

@media (max-width:900px) {
  .gallery__heading { grid-template-columns:1fr; }
  .gallery__heading .display-title,.gallery__intro { grid-column:auto; }
  .gallery-item,.gallery-item:nth-child(n) { grid-column:span 6; }
  .gallery-item:nth-child(3) .gallery-art { aspect-ratio:16/10; }
}
@media (max-width:620px) {
  .gallery__grid { grid-template-columns:1fr; }
  .gallery-item,.gallery-item:nth-child(n) { grid-column:auto; }
  .gallery-item .gallery-art,.gallery-item:nth-child(n) .gallery-art { aspect-ratio:4/5; }
  .gallery__note { flex-direction:column; gap:.5rem; }
  .gallery-lightbox__stage { height:calc(100vh - 132px); padding:3.8rem .75rem .75rem; }
  .gallery-lightbox__bar { height:132px; grid-template-columns:auto 1fr; gap:1rem; }
  .gallery-lightbox__count { grid-column:2; }
}

.agenda { background:var(--red); color:var(--paper); display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(3rem,8vw,9rem); }
.agenda .display-title em { color:var(--ink); }
.agenda__intro { position:sticky; top:8rem; align-self:start; }
.filters { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:3rem; }
.filters button { border:1px solid rgba(242,237,221,.55); background:none; color:inherit; padding:.6rem .85rem; text-transform:uppercase; letter-spacing:.1em; font-size:.56rem; cursor:pointer; }
.filters button.is-active { background:var(--paper); color:var(--red); }
.agenda-list { border-top:1px solid rgba(242,237,221,.32); }
.agenda-item { display:grid; grid-template-columns:120px 1fr auto; gap:2rem; padding:2rem 0; border-bottom:1px solid rgba(242,237,221,.32); align-items:center; transition:opacity .25s, transform .25s; }
.agenda-item[hidden] { display:none; }
.agenda-item time { display:flex; align-items:flex-end; gap:.5rem; }
.agenda-item time strong { font-size:3.4rem; line-height:.8; }
.agenda-item time span, .agenda-item div>span { text-transform:uppercase; letter-spacing:.1em; font-size:.55rem; }
.agenda-item h3 { margin:.5rem 0 .3rem; font-size:1.5rem; letter-spacing:-.04em; }
.agenda-item p { margin:0; font-size:.85rem; }
.agenda-item>a { width:2.8rem; height:2.8rem; border:1px solid rgba(242,237,221,.45); border-radius:50%; display:grid; place-items:center; transition:background .2s,color .2s; }
.agenda-item>a:hover { background:var(--paper); color:var(--red); }

.projects__top { display:grid; grid-template-columns:1.1fr .9fr; gap:4rem; align-items:end; }
.projects__top>p { font-size:1.25rem; line-height:1.5; max-width:32rem; }
.project-cards { margin-top:6rem; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.project-card { padding:2rem; min-height:380px; display:flex; flex-direction:column; border-right:1px solid var(--line); transition:background .25s,color .25s; }
.project-card:last-child { border-right:0; }
.project-card:hover { background:var(--red); color:var(--paper); }
.project-card>span { font-size:.6rem; letter-spacing:.14em; }
.project-card h3 { font-size:clamp(2rem,3vw,3.4rem); line-height:.9; letter-spacing:-.06em; margin:4rem 0 1.5rem; }
.project-card p { line-height:1.5; }
.project-card a { margin-top:auto; text-transform:uppercase; letter-spacing:.12em; font-size:.58rem; }

.timeline { background:var(--ink); color:var(--paper); }
.timeline .display-title em { color:var(--paper); }
.timeline__rail { margin:6rem auto 0; max-width:1000px; position:relative; }
.timeline__rail::before { content:""; position:absolute; left:140px; top:0; bottom:0; width:1px; background:rgba(255,255,255,.28); }
.timeline__progress { position:absolute; left:140px; top:0; width:2px; height:0; background: var(--paper); }
.timeline__item { display:grid; grid-template-columns:140px 1fr; min-height:220px; }
.timeline__item>strong { font-family:Georgia,serif; font-style:italic; font-weight:400; font-size:2rem; padding-top:.2rem; }
.timeline__item>div { position:relative; padding:0 0 4rem 4rem; }
.timeline__item>div::before { content:""; position:absolute; width:13px; height:13px; border-radius:50%; background:var(--ink); border:2px solid var(--yellow); left:-7px; top:.4rem; }
.timeline__item h3 { margin:0 0 .7rem; font-size:2.3rem; letter-spacing:-.05em; }
.timeline__item p { margin:0; max-width:34rem; line-height:1.55; }

.contact { min-height:95vh; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; }
.contact__title { font-size:clamp(4.8rem,12vw,13rem); margin:0; line-height:.72; letter-spacing:-.09em; }
.contact__title em { color:var(--red); font-family:Georgia,serif; font-weight:400; }
.contact>p { font-size:1.2rem; margin:3rem 0 1rem; }
.contact__mail { display:flex; align-items:center; justify-content:space-between; border-bottom:2px solid; padding:1rem 0; font-size:clamp(1.2rem,2.5vw,2.8rem); letter-spacing:-.04em; }
.contact__footer { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:5rem; padding-top:2rem; border-top:1px solid var(--line); }
.contact__footer div { display:flex; flex-direction:column; align-items:flex-start; gap:.45rem; }
.contact__footer span { text-transform:uppercase; letter-spacing:.13em; font-size:.55rem; margin-bottom:.6rem; }
.contact__footer a, .contact__footer p { font-size:.86rem; line-height:1.5; margin:0; }
.contact__orbit { position:absolute; width:42vw; aspect-ratio:1; border:1px solid var(--line); border-radius:50%; right:-16vw; top:9%; animation:orbit 20s linear infinite; }
.contact__orbit span { position:absolute; width:20px; height:20px; border-radius:50%; background:var(--red); }
.contact__orbit span:nth-child(1){ left:7%; top:25%; }
.contact__orbit span:nth-child(2){ right:12%; top:15%; background:var(--ink); }
.contact__orbit span:nth-child(3){ right:3%; bottom:25%; background: var(--paper); border: 1px solid rgba(23,23,23,.14); }

.site-footer { padding:1.3rem var(--pad); background:var(--ink); color:var(--paper); display:flex; justify-content:space-between; gap:1rem; font-size:.58rem; text-transform:uppercase; letter-spacing:.13em; }

.modal { width:min(720px,calc(100% - 2rem)); border:0; padding:clamp(2rem,5vw,5rem); color:var(--paper); background:var(--ink); box-shadow:var(--shadow); }
.modal::backdrop { background:rgba(24,23,18,.68); backdrop-filter:blur(8px); }
.modal__close { position:absolute; right:1.3rem; top:1rem; border:0; background:none; color:inherit; font-size:2rem; cursor:pointer; }
.modal__kicker { text-transform:uppercase; letter-spacing:.18em; font-size:.58rem; color:var(--paper); }
.modal h2 { font-size:clamp(2.8rem,6vw,5.8rem); letter-spacing:-.07em; line-height:.86; margin:2rem 0; }
.modal p { font-family:Georgia,serif; font-size:clamp(1.2rem,2vw,1.65rem); line-height:1.45; }
.modal__details { display:flex; flex-wrap:wrap; gap:.5rem; margin:2rem 0; }
.modal__details span { border:1px solid rgba(242,237,221,.35); padding:.5rem .7rem; text-transform:uppercase; letter-spacing:.1em; font-size:.52rem; }
.modal .button--primary { background:var(--paper); color:var(--ink); border-color:var(--paper); }

.reveal { opacity:0; transform:translateY(36px); transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity:1; transform:none; }

@media (max-width: 900px) {
  .cursor-orbit { display:none; }
  .site-header { grid-template-columns:1fr auto auto; gap:1rem; }
  .menu-button { display:block; }
  .hero { padding-top:9rem; }
  .hero__line--two { margin-left:1rem; white-space:normal; }
  .hero__intro { margin-left:0; margin-right:0; }
  .hero__actions { justify-content:flex-start; flex-wrap:wrap; }
  .hero__figure { left:66%; top:53%; opacity:.48; }
  .company__grid,.agenda,.projects__top { grid-template-columns:1fr; }
  .company__quote { grid-template-columns:1fr; gap:1rem; }
  .section-heading { grid-template-columns:1fr; }
  .section-heading .display-title,.section-note { grid-column:auto; }
  .poster-grid { grid-template-columns:1fr; }
  .poster { display:grid; grid-template-columns:1fr 1fr; }
  .poster__art { aspect-ratio:4/5; }
  .poster__meta { border-top:0; border-left:1px solid var(--line); display:flex; flex-direction:column; justify-content:flex-end; }
  .agenda__intro { position:static; }
  .project-cards { grid-template-columns:1fr; }
  .project-card { border-right:0; border-bottom:1px solid var(--line); min-height:300px; }
  .contact__footer { grid-template-columns:1fr 1fr; }
}

@media (max-width: 620px) {
  :root { --pad: 1rem; }
  .site-header { height:70px; }
  .sound-button__label { display:none; }
  .brand__name { font-size:1.2rem; }
  .hero { min-height:92svh; padding-top:7.5rem; }
  .hero__line--one { font-size:clamp(4rem,22vw,6.5rem); }
  .hero__line--two { font-size:clamp(2.7rem,16vw,5rem); }
  .hero__intro { margin-top:2rem; width:100%; }
  .hero__figure { width:85vw; left:65%; top:42%; }
  .scroll-cue { display:none; }
  .section { padding-top:5rem; padding-bottom:5rem; }
  .section-label { margin-bottom:2.5rem; }
  .display-title { font-size:clamp(3.3rem,18vw,5.2rem); }
  .poster { grid-template-columns:1fr; }
  .poster__meta { border-left:0; border-top:1px solid var(--line); }
  .agenda-item { grid-template-columns:80px 1fr; gap:1rem; }
  .agenda-item>a { display:none; }
  .agenda-item time { flex-direction:column; align-items:flex-start; }
  .timeline__rail::before,.timeline__progress { left:72px; }
  .timeline__item { grid-template-columns:72px 1fr; }
  .timeline__item>div { padding-left:2rem; }
  .contact__footer { grid-template-columns:1fr; }
  .site-footer { flex-direction:column; }
  .button { width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal { opacity:1; transform:none; }
  #gentilezaCanvas,.cursor-orbit { display:none; }
}



/* Atalho compacto e fixo para a lojinha */
.shop-fab {
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  left: auto !important;
  top: auto !important;
  z-index: 1000 !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50% !important;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  transform: none !important;
  transition: background .2s, box-shadow .2s, scale .2s;
  isolation: isolate;
}
.shop-fab:hover,
.shop-fab:focus-visible {
  background: var(--red);
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
  scale: 1.06;
}
.shop-fab:focus-visible {
  outline: 3px solid rgba(237,38,48,.35);
  outline-offset: 3px;
}
.shop-fab__icon {
  position: static !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 0 !important;
  flex: none !important;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: transparent !important;
  color: currentColor;
  transform: none !important;
}
.shop-fab__icon::after { display: none !important; }
.shop-fab svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
}
.shop-fab__label { display: none !important; }
body.is-menu-open .shop-fab,
body.is-modal-open .shop-fab {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 620px) {
  .shop-fab {
    right: 12px !important;
    bottom: 12px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .shop-fab__icon,
  .shop-fab svg {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
  }
}


/* Bloqueio confiável da página enquanto o menu mobile está aberto */
html.menu-scroll-locked {
  overflow: hidden;
  overscroll-behavior: none;
}
body.is-menu-open {
  overscroll-behavior: none;
}

/* Correção do menu mobile: camada, interação e acessibilidade */
@media (max-width: 900px) {
  .site-header {
    grid-template-columns: 1fr auto auto;
    overflow: visible;
  }

  .brand,
  .menu-button,
  .sound-button {
    position: relative;
    z-index: 3;
  }

  .menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-width: 44px;
    min-height: 44px;
    padding: 0 .15rem;
  }

  .menu-button i,
  .menu-button i::before,
  .menu-button i::after {
    display: block;
    width: 18px;
    height: 1.5px;
    background: currentColor;
    transition: transform .28s ease, opacity .2s ease;
  }

  .menu-button i {
    position: relative;
  }

  .menu-button i::before,
  .menu-button i::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .menu-button i::before { top: -5px; }
  .menu-button i::after { top: 5px; }

  body.is-menu-open .menu-button i {
    background: transparent;
  }

  body.is-menu-open .menu-button i::before {
    top: 0;
    transform: rotate(45deg);
  }

  body.is-menu-open .menu-button i::after {
    top: 0;
    transform: rotate(-45deg);
  }

  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    padding: calc(94px + env(safe-area-inset-top)) var(--pad) calc(2rem + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    background: var(--ink);
    color: var(--paper);
    font-size: clamp(1.7rem, 8vw, 3.5rem);
    letter-spacing: -.04em;
    text-transform: lowercase;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0,-18px,0);
    clip-path: inset(0 0 100% 0);
    transition: opacity .25s ease, transform .38s cubic-bezier(.22,.78,.22,1), clip-path .38s cubic-bezier(.22,.78,.22,1), visibility 0s linear .4s;
  }

  .site-nav a {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    width: 100%;
    min-height: 64px;
    padding: .55rem 0;
    border-bottom: 1px solid rgba(255,255,255,.18);
  }

  .site-nav[aria-hidden="true"] a {
    visibility: hidden;
  }

  .site-nav a::after { display: none; }

  body.is-menu-open .site-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0,0,0);
    clip-path: inset(0 0 0 0);
    transition: opacity .25s ease, transform .38s cubic-bezier(.22,.78,.22,1), clip-path .38s cubic-bezier(.22,.78,.22,1), visibility 0s;
  }

  body.is-menu-open .site-nav a {
    visibility: visible;
  }

  body.is-menu-open .site-header {
    transform: translateY(0) !important;
    color: var(--paper);
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
  }
}

@media (max-width: 620px) {
  .site-nav {
    padding-top: calc(78px + env(safe-area-inset-top));
  }

  .site-nav a {
    min-height: 58px;
  }
}
