/* ============================================
   RESET & TOKENS
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:      #0B0608;
  --card:    #180C12;
  --crimson: #C41E3A;
  --wine:    #5C1428;
  --wine2:   #7A1E35;
  --green:   #1E3D2A;
  --tx:      #F5EDE6;
  --tx2:     #9A8070;
  --tx3:     #4A3535;
  --font-d:  'Cormorant Garamond', Georgia, serif;
  --font-a:  'Libre Baskerville', Georgia, serif;
  --ease:    cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h:   88px;
}

html { font-size: 16px; scroll-behavior: auto; }

body {
  background: var(--bg);
  color: var(--tx);
  font-family: var(--font-d);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
  cursor: none;
}

a { text-decoration: none; color: inherit; }
.libre { font-family: var(--font-a); }
section[id] { scroll-margin-top: var(--nav-h); }

.section-label {
  display: block;
  font-family: var(--font-a);
  font-size: 0.52rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--tx3);
  margin-bottom: 1.75rem;
}

/* ============================================
   GRAIN
   ============================================ */
.grain {
  position: fixed; inset: -60%;
  width: 220%; height: 220%;
  pointer-events: none; z-index: 9990;
  opacity: .048; mix-blend-mode: overlay;
  animation: grainShift .14s steps(1) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0,0); }
  15%  { transform: translate(-4%,-7%); }
  30%  { transform: translate(7%,2%); }
  45%  { transform: translate(-3%,8%); }
  60%  { transform: translate(5%,-5%); }
  75%  { transform: translate(-6%,3%); }
  90%  { transform: translate(3%,-2%); }
  100% { transform: translate(0,0); }
}

/* ============================================
   BACK TO TOP
   ============================================ */
.back-top {
  position: fixed; right: 2.5rem; bottom: 2.5rem;
  z-index: 190;
  width: 46px; height: 46px;
  border: 1px solid rgba(30,61,42,.45);
  border-radius: 50%;
  background: rgba(11,6,8,.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--tx3);
  display: flex; align-items: center; justify-content: center;
  cursor: none;
  opacity: 0; transform: translateY(16px);
  transition: opacity .45s var(--ease), transform .45s var(--ease),
              border-color .3s, color .3s;
  pointer-events: none;
}
.back-top.visible { opacity: 1; transform: translateY(0); pointer-events: all; }
.back-top:hover   { border-color: var(--crimson); color: var(--crimson); }
.back-top svg     { width: 15px; height: 15px; }

/* ============================================
   PRELOADER
   ============================================ */
.preloader {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.preloader__inner {
  display: flex; flex-direction: column;
  align-items: center; gap: 2.75rem;
}
.preloader__logo {
  font-family: var(--font-d);
  font-size: 5rem; font-weight: 600; letter-spacing: .08em;
}
.preloader__logo span { color: var(--crimson); }
.preloader__bar {
  width: 110px; height: 1px;
  background: rgba(30,61,42,.2); overflow: hidden;
}
.preloader__fill {
  width: 100%; height: 100%;
  background: var(--green);
  transform-origin: left; transform: scaleX(0);
}

/* ============================================
   CURSOR
   ============================================ */
.cursor {
  position: fixed; top: 0; left: 0;
  width: 5px; height: 5px;
  background: var(--crimson); border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  will-change: transform;
  transition: width .22s var(--ease), height .22s var(--ease), opacity .2s;
}
.cursor-ring {
  position: fixed; top: 0; left: 0;
  width: 32px; height: 32px;
  border: 1px solid rgba(196,30,58,.3); border-radius: 50%;
  pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%);
  display: flex; align-items: center; justify-content: center;
  will-change: transform;
  transition: width .45s var(--ease), height .45s var(--ease),
              border-color .3s, background .3s;
}
.cursor-label {
  font-family: var(--font-a);
  font-size: .44rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tx);
  opacity: 0; transition: opacity .25s; white-space: nowrap; user-select: none;
}
.cursor.on-link       { width: 0; height: 0; opacity: 0; }
.cursor-ring.on-link  { width: 56px; height: 56px; border-color: rgba(196,30,58,.6); }
.cursor.on-label      { width: 0; height: 0; opacity: 0; }
.cursor-ring.on-label {
  width: 74px; height: 74px;
  border-color: rgba(196,30,58,.5);
  background: rgba(11,6,8,.5);
  backdrop-filter: blur(4px);
}
.cursor-ring.on-label .cursor-label { opacity: 1; }

/* ============================================
   MOBILE MENU
   ============================================ */
.menu-overlay {
  position: fixed; inset: 0; z-index: 199;
  background: rgba(11,6,8,.97);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  pointer-events: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .6s var(--ease);
}
.menu-overlay.open { pointer-events: all; clip-path: inset(0 0 0% 0); }

.menu-overlay__nav {
  width: 100%; padding: 0 2rem;
  display: flex; flex-direction: column;
}
.menu-overlay__link {
  display: flex; align-items: baseline; gap: 1.25rem;
  font-family: var(--font-d);
  font-size: clamp(2.8rem, 11vw, 5rem);
  font-weight: 600; line-height: 1.2;
  color: rgba(245,237,230,.35);
  border-bottom: 1px solid rgba(30,61,42,.15);
  width: 100%; padding: .85rem 0;
  opacity: 0; transform: translateX(-20px);
  transition: color .3s;
}
.menu-overlay__link:last-child { border-bottom: none; }
.menu-overlay__link span {
  font-family: var(--font-a);
  font-size: .52rem; letter-spacing: .22em;
  color: var(--tx3); flex-shrink: 0;
}
.menu-overlay__link:hover { color: var(--tx); }

.menu-overlay__foot {
  position: absolute; bottom: clamp(2rem, 5vh, 4rem);
  left: 0; right: 0; padding: 0 2rem;
  display: flex; flex-direction: column; gap: .65rem;
  opacity: 0;
}
.menu-overlay__email {
  font-family: var(--font-d); font-style: italic;
  font-size: clamp(.9rem, 3vw, 1.1rem); color: var(--crimson);
}
.menu-overlay__social {
  display: flex; gap: 1.25rem;
  font-family: var(--font-a);
  font-size: .52rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--tx3);
}

/* ============================================
   NAV
   ============================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex; justify-content: space-between; align-items: center;
  padding: 2.5rem 5rem;
  height: var(--nav-h);
  border-bottom: 1px solid transparent;
  transition: padding .5s var(--ease), background .5s, border-color .5s;
}
.nav.scrolled {
  padding: 1.5rem 5rem;
  background: rgba(11,6,8,.92);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom-color: rgba(30,61,42,.35);
}
.nav__logo {
  font-family: var(--font-d);
  font-size: 1.45rem; font-weight: 600; letter-spacing: .08em;
  transition: opacity .3s;
}
.nav__logo:hover { opacity: .7; }
.nav__r { color: var(--crimson); }
.nav__links { list-style: none; display: flex; gap: 3.5rem; }
.nav__links a {
  font-family: var(--font-a);
  font-size: .55rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--tx3);
  position: relative; transition: color .35s; display: inline-block;
}
.nav__links a::after {
  content: ''; position: absolute; left: 0; bottom: -4px;
  width: 0; height: 1px; background: var(--crimson);
  transition: width .4s var(--ease);
}
.nav__links a:hover, .nav__links a.active { color: var(--tx2); }
.nav__links a:hover::after, .nav__links a.active::after { width: 100%; }

.nav__burger {
  display: none;
  flex-direction: column; gap: 6px;
  background: none; border: none; padding: 8px;
  cursor: pointer; z-index: 201;
}
.nav__burger span {
  display: block; width: 26px; height: 1px;
  background: var(--tx);
  transition: transform .45s var(--ease), opacity .3s;
}
.nav__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================
   HERO
   ============================================ */
.hero {
  position: relative;
  height: 100svh; min-height: 600px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; overflow: hidden; }
.hero__marble {
  width: 100%; height: 100%; object-fit: cover;
  opacity: .16; transform: scale(1.06);
  will-change: transform; display: block;
}
.hero__vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 28%, rgba(11,6,8,.52) 66%, rgba(11,6,8,.93) 100%),
    radial-gradient(ellipse 52% 38% at 50% 0%, rgba(196,30,58,.09) 0%, transparent 60%);
  pointer-events: none;
}
.hero__content {
  position: relative; z-index: 2;
  text-align: center; padding: 0 1.5rem;
}
.hero__eyebrow-wrap {
  display: flex; align-items: center; justify-content: center;
  gap: 1.4rem; margin-bottom: 2rem;
}
.hero__eline {
  display: block; height: 1px; width: 0;
  background: var(--green); flex-shrink: 0;
}
.hero__eyebrow {
  font-family: var(--font-a);
  font-size: .54rem; letter-spacing: .4em;
  text-transform: uppercase; color: var(--tx3);
  white-space: nowrap;
}
.hero__name {
  font-family: var(--font-d);
  font-size: clamp(4.5rem, 13.5vw, 13rem);
  font-weight: 600; line-height: .86; letter-spacing: .055em;
  margin-bottom: 2.25rem;
  display: flex; flex-direction: column; align-items: center;
}
.hero__line { display: block; overflow: hidden; }
.hero__line--offset { margin-left: .14em; }
.char     { display: inline-block; overflow: hidden; }
.char__in { display: inline-block; }
.char__in.ini { color: var(--crimson); }
.hero__rule {
  width: 48px; height: 1px; background: var(--green);
  margin: 0 auto 2rem;
}
.hero__tagline {
  font-family: var(--font-d); font-style: italic;
  font-size: clamp(.95rem, 1.7vw, 1.25rem);
  color: var(--tx2); line-height: 1.8;
}
.hero__scroll {
  position: absolute; bottom: 2.5rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
}
.hero__scroll-line {
  display: block; width: 1px; height: 52px;
  background: linear-gradient(to bottom, var(--green), transparent);
  animation: scrollPulse 2.6s ease-in-out infinite;
}
.hero__scroll-label {
  font-family: var(--font-a);
  font-size: .5rem; letter-spacing: .4em;
  text-transform: uppercase; color: var(--tx3);
}

/* ============================================
   ABOUT
   ============================================ */
.about { padding: 13rem 5rem; position: relative; }
.about::before {
  content: '';
  position: absolute; top: 0; left: 5rem; right: 5rem; height: 1px;
  background: linear-gradient(to right, transparent, var(--green), transparent);
}
.about__wrap {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.3fr;
  gap: 8rem; align-items: center;
}
.about__visual { position: relative; }
.js-clip-reveal { clip-path: inset(0 100% 0 0); position: relative; }
.about__img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.about__placeholder-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-style: italic; font-size: .9rem;
  color: rgba(90,70,60,.4); letter-spacing: .3em;
  pointer-events: none;
}
.fc { position: absolute; width: 24px; height: 24px; pointer-events: none; }
.fc--tl { top:-1px;left:-1px;   border-top:1px solid var(--crimson); border-left:1px solid var(--crimson); }
.fc--tr { top:-1px;right:-1px;  border-top:1px solid var(--crimson); border-right:1px solid var(--crimson); }
.fc--bl { bottom:-1px;left:-1px; border-bottom:1px solid var(--crimson); border-left:1px solid var(--crimson); }
.fc--br { bottom:-1px;right:-1px; border-bottom:1px solid var(--crimson); border-right:1px solid var(--crimson); }
.about__year {
  position: absolute; bottom: -2rem; right: 0;
  font-size: .68rem; color: var(--tx3); letter-spacing: .1em;
}
.js-title-reveal .t-line    { display: block; overflow: hidden; }
.js-title-reveal .t-line-in { display: block; }
.about__title {
  font-family: var(--font-d);
  font-size: clamp(2.8rem, 4.5vw, 4.5rem);
  font-weight: 600; line-height: 1.04; margin-bottom: 2.25rem;
}
.about__title em { font-style: italic; color: var(--crimson); }
.about__bio { font-size: 1.1rem; color: var(--tx2); margin-bottom: 1.4rem; line-height: 2; }
.js-fade-up { opacity: 0; transform: translateY(44px); }
.about__stats {
  display: flex; gap: 3rem;
  margin-top: 3rem; padding-top: 2rem;
  border-top: 1px solid rgba(30,61,42,.18);
}
.about__stat { display: flex; flex-direction: column; gap: .4rem; }
.about__stat-val { display: flex; align-items: baseline; gap: .1em; }
.about__stat-num {
  font-family: var(--font-d);
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 600; line-height: 1; color: var(--tx);
}
.about__stat-sup {
  font-family: var(--font-d);
  font-size: clamp(.75rem, 1.3vw, 1.1rem);
  color: var(--crimson); line-height: 1;
}
.about__stat-lbl {
  font-family: var(--font-a);
  font-size: .46rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--tx3);
}

.btn-text {
  display: inline-block; margin-top: 1.5rem;
  font-family: var(--font-a);
  font-size: .55rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--tx2);
  border-bottom: 1px solid var(--green); padding-bottom: .4rem;
  transition: color .35s, border-color .35s, letter-spacing .35s;
}
.btn-text:hover { color: var(--crimson); border-color: var(--crimson); letter-spacing: .32em; }

/* ============================================
   WORK
   ============================================ */
.work { position: relative; }
.work__head { padding: 9rem 5rem 3rem; max-width: 1180px; margin: 0 auto; }
.work__title {
  font-family: var(--font-d);
  font-size: clamp(2.8rem, 4.5vw, 4.5rem);
  font-weight: 600; line-height: 1.04;
}

/* Swipe hint — mobile only */
.work__swipe-hint {
  display: none;
  align-items: center; gap: .6rem;
  padding: 0 1.75rem .75rem;
  font-family: var(--font-a);
  font-size: .5rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--tx3);
  animation: hintFade 2s ease-in-out 1.5s forwards;
  opacity: 0;
}
.work__swipe-hint svg { width: 32px; height: 12px; color: var(--tx3); }
@keyframes hintFade {
  0%   { opacity: 0; transform: translateX(-6px); }
  30%  { opacity: 1; transform: translateX(0); }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Desktop pin */
.work__pin { overflow: hidden; }
.work__track { display: flex; gap: 3px; width: max-content; will-change: transform; }

.work__card {
  position: relative;
  width: 33vw; min-width: 360px; flex-shrink: 0; overflow: hidden;
  transform-style: preserve-3d; transform: perspective(900px);
}
.work__card-num {
  position: absolute; top: 1.75rem; left: 2rem; z-index: 3;
  font-size: .62rem; letter-spacing: .12em; color: rgba(245,237,230,.28);
  transition: color .4s;
}
.work__card:hover .work__card-num { color: rgba(245,237,230,.65); }

.work__card-media { overflow: hidden; position: relative; height: 76vh; }
.work__card-img {
  position: absolute; inset: 0;
  width: 112%; left: -6%; height: 100%;
  background-size: cover; background-position: center;
  filter: brightness(.68) saturate(.82);
  transition: filter 1.2s var(--ease);
}
.work__card:hover .work__card-img { filter: brightness(.86) saturate(1); }
.work__card-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(11,6,8,.96) 0%, rgba(11,6,8,.38) 42%, transparent 68%);
  opacity: 0; transition: opacity .55s var(--ease);
}
.work__card:hover .work__card-overlay { opacity: 1; }
.work__card-info {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  padding: 0 2.25rem 2.5rem;
  transform: translateY(16px); opacity: 0;
  transition: transform .65s var(--ease), opacity .5s;
}
.work__card:hover .work__card-info { transform: translateY(0); opacity: 1; }
.work__cat {
  display: block; font-family: var(--font-a);
  font-size: .5rem; letter-spacing: .32em;
  text-transform: uppercase; color: var(--crimson); margin-bottom: .55rem;
}
.work__name {
  font-family: var(--font-d);
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  font-weight: 600; line-height: 1.08; margin-bottom: .6rem;
}
.work__yr { font-size: .68rem; color: var(--tx3); letter-spacing: .1em; }

.work__progress {
  display: flex; align-items: center; gap: 1.75rem;
  padding: 1.75rem 5rem 7rem; max-width: 1180px; margin: 0 auto;
}
.work__progress-track {
  flex: 1; height: 1px;
  background: rgba(30,61,42,.22); position: relative; overflow: hidden;
}
.work__progress-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--crimson); width: 0;
  transition: width .06s linear;
}
.work__progress-count { font-size: .58rem; letter-spacing: .1em; color: var(--tx3); white-space: nowrap; }

/* ============================================
   PHILOSOPHY
   ============================================ */
.philosophy {
  position: relative; min-height: 560px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.philosophy__bg { position: absolute; inset: 0; overflow: hidden; }
.philosophy__img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.1);
  filter: saturate(.42) brightness(.36); will-change: transform;
}
.philosophy__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(11,6,8,.55) 0%, rgba(11,6,8,.12) 50%, rgba(11,6,8,.55) 100%),
    linear-gradient(to bottom, rgba(11,6,8,.45) 0%, transparent 22%, transparent 78%, rgba(11,6,8,.45) 100%);
}
.philosophy__wrap {
  position: relative; z-index: 1;
  max-width: 880px; margin: 0 auto;
  padding: 8rem 2rem;
  display: flex; flex-direction: column; align-items: center; gap: 2.25rem;
}
.philosophy__orn { font-size: .72rem; color: var(--crimson); opacity: .85; }
.philosophy__quote {
  font-family: var(--font-d);
  font-size: clamp(1.65rem, 3.4vw, 3rem);
  font-weight: 400; font-style: italic;
  line-height: 1.55; text-align: center;
  color: rgba(245,237,230,.82);
}
.philosophy__quote em { font-style: normal; color: var(--tx); }
.q-line    { display: block; overflow: hidden; }
.q-line-in { display: block; }

/* ============================================
   MOOD STRIP — duas fileiras
   ============================================ */
.mood-strip {
  overflow: hidden;
  border-top: 1px solid rgba(30,61,42,.18);
  border-bottom: 1px solid rgba(30,61,42,.18);
}
.mood-strip__row {
  overflow: hidden; height: 165px;
}
.mood-strip__row + .mood-strip__row {
  border-top: 1px solid rgba(30,61,42,.1);
  height: 130px;
}
.mood-strip__track {
  display: flex; gap: 3px;
  height: 100%; width: max-content;
  /* sem animation CSS — controlado por GSAP */
}
.mood-strip__img {
  height: 100%; width: auto;
  object-fit: cover;
  filter: saturate(.48) brightness(.52); flex-shrink: 0;
  transition: filter .8s var(--ease);
}
.mood-strip__img:hover { filter: saturate(.95) brightness(.85); }

/* ============================================
   CONTACT
   ============================================ */
.contact { padding: 13rem 5rem; position: relative; overflow: hidden; }
.contact::before {
  content: '';
  position: absolute; top: 0; left: 5rem; right: 5rem; height: 1px;
  background: linear-gradient(to right, transparent, var(--green), transparent);
}
.contact__wrap {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6rem; align-items: start;
  position: relative; z-index: 1;
}
.contact__title {
  font-family: var(--font-d);
  font-size: clamp(3.5rem, 7vw, 8rem);
  font-weight: 600; line-height: .9; margin-bottom: 2rem;
}
.contact__sub { font-size: 1rem; color: var(--tx3); line-height: 1.8; max-width: 340px; }
.contact__right { display: flex; flex-direction: column; gap: 0; padding-top: 1.5rem; }
.contact__cta {
  display: flex; align-items: baseline; gap: 1.25rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid rgba(30,61,42,.25);
  transition: border-color .35s;
}
.contact__cta:first-child { border-top: 1px solid rgba(30,61,42,.25); }
.contact__cta:hover { border-color: rgba(196,30,58,.4); }
.contact__cta-label {
  font-size: .5rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--tx3); min-width: 72px;
}
.contact__cta-value {
  font-family: var(--font-d); font-style: italic;
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  color: var(--crimson); flex: 1;
  transition: color .35s;
}
.contact__cta:hover .contact__cta-value { color: var(--tx); }
.contact__cta-arrow {
  font-size: 1rem; color: var(--tx3);
  transition: transform .4s var(--ease), color .35s;
}
.contact__cta:hover .contact__cta-arrow { transform: translateX(6px); color: var(--crimson); }
.contact__social { display: flex; align-items: center; gap: 1.75rem; padding-top: 2.5rem; }
.contact__link {
  font-family: var(--font-a);
  font-size: .55rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--tx3);
  position: relative; transition: color .35s; display: inline-block;
}
.contact__link::after {
  content: ''; position: absolute; left: 0; bottom: -3px;
  width: 0; height: 1px; background: var(--crimson);
  transition: width .4s var(--ease);
}
.contact__link:hover { color: var(--tx); }
.contact__link:hover::after { width: 100%; }
.contact__sep { color: var(--green); }
.contact__mono {
  position: absolute; right: 5rem; bottom: 4rem;
  font-size: clamp(10rem, 18vw, 24rem);
  font-weight: 700; color: transparent;
  -webkit-text-stroke: 1px rgba(92,20,40,.09);
  line-height: 1; pointer-events: none; user-select: none;
}

/* ============================================
   FOOTER
   ============================================ */
.footer { padding: 2.25rem 5rem; border-top: 1px solid rgba(30,61,42,.22); }
.footer__inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.footer__brand { font-size: .62rem; letter-spacing: .14em; color: var(--tx3); }
.footer__brand span { color: var(--crimson); }
.footer__copy  { font-size: .52rem; letter-spacing: .14em; color: var(--tx3); }
.footer__social { display: flex; gap: 1.25rem; }
.footer__slink {
  font-family: var(--font-a);
  font-size: .52rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tx3);
  transition: color .3s;
}
.footer__slink:hover { color: var(--tx); }

/* ============================================
   KEYFRAMES
   ============================================ */
@keyframes scrollPulse {
  0%,100% { transform: scaleY(1); opacity: .75; }
  50%     { transform: scaleY(.3); opacity: .18; }
}

/* ============================================
   RESPONSIVE — 1024px
   ============================================ */
@media (max-width: 1024px) {
  :root { --nav-h: 80px; }
  .nav, .nav.scrolled { padding-left: 3rem; padding-right: 3rem; }
  .about { padding: 10rem 3rem; }
  .about::before { left: 3rem; right: 3rem; }
  .about__wrap { gap: 5rem; }
  .work__head { padding: 7rem 3rem 3rem; }
  .work__card { width: 44vw; }
  .work__progress { padding-left: 3rem; padding-right: 3rem; }
  .philosophy__wrap { padding: 7rem 2rem; }
  .contact { padding: 10rem 3rem; }
  .contact::before { left: 3rem; right: 3rem; }
  .contact__wrap { gap: 4rem; }
  .contact__mono { right: 3rem; }
  .footer { padding: 2rem 3rem; }
}

/* ============================================
   RESPONSIVE — 768px  (MOBILE)
   ============================================ */
@media (max-width: 768px) {
  :root { --nav-h: 68px; }

  body  { cursor: auto; }
  .cursor, .cursor-ring { display: none; }

  /* Nav */
  .nav, .nav.scrolled { padding: 1.25rem 1.5rem; height: var(--nav-h); }
  .nav__links  { display: none; }
  .nav__burger { display: flex; }

  /* Back to top */
  .back-top { cursor: pointer; right: 1.25rem; bottom: 1.25rem; width: 42px; height: 42px; }

  /* Hero */
  .hero__name { font-size: clamp(3.8rem, 16vw, 6rem); }
  .hero__eyebrow { font-size: .5rem; letter-spacing: .32em; margin-bottom: 1.75rem; }
  .hero__tagline { font-size: clamp(.88rem, 3.5vw, 1.05rem); padding: 0 .5rem; }
  .hero__scroll  { bottom: 2rem; }

  /* About */
  .about { padding: 6rem 1.5rem; }
  .about::before { left: 1.5rem; right: 1.5rem; }
  .about__wrap { grid-template-columns: 1fr; gap: 3rem; }
  .about__frame { max-width: 240px; margin: 0 auto; }
  .about__text  { text-align: left; }
  .about__bio   { font-size: 1rem; }
  .about__year  { bottom: -1.75rem; }
  .about__stats { gap: 1.75rem; margin-top: 2.25rem; padding-top: 1.75rem; }

  /* Work head */
  .work__head { padding: 5rem 1.5rem 1.75rem; }

  /* Swipe hint — visível no mobile */
  .work__swipe-hint { display: flex; }

  /* Work — CSS horizontal scroll com snap no mobile */
  .work__pin {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    cursor: grab;
    padding-bottom: 2px; /* evita corte de sombra */
  }
  .work__pin::-webkit-scrollbar { display: none; }
  .work__pin:active { cursor: grabbing; }

  .work__track {
    flex-direction: row;        /* mantém horizontal */
    width: max-content;
    gap: 6px;
    padding: 0 1.5rem;
    /* sem will-change no mobile */
    will-change: unset;
  }
  .work__card {
    width: 76vw;
    min-width: 260px;
    flex-shrink: 0;
    scroll-snap-align: start;
    transform: none !important; /* sem 3D */
    overflow: hidden;
  }
  /* último card com margem final */
  .work__card:last-child { margin-right: 1.5rem; }

  .work__card-media { height: 56vh; min-height: 280px; }
  .work__card-img   { width: 100%; left: 0; } /* sem parallax no mobile */

  /* info sempre visível no mobile */
  .work__card-overlay { opacity: 1; }
  .work__card-info    { opacity: 1; transform: translateY(0); padding-bottom: 1.75rem; }
  .work__card-num     { color: rgba(245,237,230,.4); }
  .work__name         { font-size: clamp(1.3rem, 5vw, 1.75rem); }

  .work__progress { padding: 1.25rem 1.5rem 4rem; }

  /* Philosophy */
  .philosophy__wrap { padding: 5rem 1.5rem; }
  .philosophy__quote { font-size: clamp(1.45rem, 5.5vw, 1.9rem); }

  /* Mood strip */
  .mood-strip__row         { height: 110px; }
  .mood-strip__row + .mood-strip__row { height: 85px; }

  /* Contact */
  .contact { padding: 6rem 1.5rem; }
  .contact::before { left: 1.5rem; right: 1.5rem; }
  .contact__wrap { grid-template-columns: 1fr; gap: 3rem; }
  .contact__title { font-size: clamp(3rem, 10vw, 5rem); margin-bottom: 1.25rem; }
  .contact__sub   { font-size: .95rem; max-width: 100%; }
  .contact__right { padding-top: 0; }
  .contact__cta   { padding: 1.4rem 0; gap: 1rem; }
  .contact__cta-label { min-width: 60px; font-size: .48rem; }
  .contact__cta-value { font-size: clamp(.9rem, 3.5vw, 1.1rem); }
  .contact__social { padding-top: 2rem; gap: 1.25rem; }
  .contact__mono   { display: none; }

  /* Footer */
  .footer { padding: 2rem 1.5rem; }
  .footer__inner { flex-direction: column; align-items: center; gap: .85rem; text-align: center; }
}

/* ============================================
   RESPONSIVE — 480px
   ============================================ */
@media (max-width: 480px) {
  .hero__name { font-size: clamp(3.2rem, 17vw, 4.5rem); }
  .work__card { width: 82vw; }
  .work__card-media { height: 60vw; min-height: 240px; }
  .nav, .nav.scrolled { padding: 1rem 1.25rem; }
  .contact__title { font-size: clamp(2.6rem, 10vw, 4rem); }
}