/* portfolio.css — estética clean, editorial, minimalista, sofisticada */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Defaults — sobrescritos via JS pelos tweaks */
  --bg: #fafaf8;
  --bg-alt: #f3f2ee;
  --fg: #0f0f0f;
  --fg-muted: #6b6b6b;
  --fg-subtle: #9a9a9a;
  --accent: #3a5a40;
  --line: rgba(15,15,15,0.08);
  --line-strong: rgba(15,15,15,0.16);

  --font-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-mono: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --container: 1240px;
}

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  transition: background 0.6s ease, color 0.6s ease;
}

/* ===== Layout helpers ===== */
.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; width: 100%; }
@media (max-width: 720px) { .container { padding: 0 20px; } }

.section {
  position: relative;
  padding: 140px 0;
}
@media (max-width: 720px) { .section { padding: 100px 0; } }

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 24px;
}
.section-tag::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--fg-muted);
}

.section-title {
  font-family: "Inter", system-ui, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  max-width: 18ch;
  text-wrap: balance;
}
.section-title em {
  font-style: italic;
  color: inherit;
  font-weight: 700;
}

.section-lead {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: 56ch;
  margin-top: 28px;
  text-wrap: pretty;
}

/* ===== Nav ===== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.nav.scrolled { border-bottom-color: var(--line); }

/* Nav adaptativa: letras claras sobre hero escuro */
.nav.over-dark {
  background: rgba(14, 15, 13, 0.72);
}
.nav.over-dark .nav-links a {
  color: rgba(241, 240, 236, 0.65);
}
.nav.over-dark .nav-links a:hover {
  color: #f1f0ec;
}
.nav.over-dark .nav-logo {
  filter: brightness(0) invert(1);
}
.nav.over-dark .hamburger span {
  background: #f1f0ec;
}
.nav.over-dark .btn-ghost {
  background: rgba(241, 240, 236, 0.08);
  color: #f1f0ec;
}
.nav.over-dark .btn-ghost:hover {
  background: rgba(241, 240, 236, 0.14);
}

.nav-brand {
  display: flex;
  align-items: center;
}
.nav-logo {
  height: 42px;
  width: auto;
  display: block;
  overflow: visible;
  transition: filter 0.4s ease;
}
.nav-links {
  display: flex;
  gap: 36px;
  align-items: center;
}
.nav-links a {
  color: var(--fg-muted);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.01em;
  transition: color 0.2s ease;
  font-family: var(--font-body);
}
.nav-links a:hover { color: var(--fg); }
/* ===== Hamburger ===== */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  width: 32px;
  height: 32px;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--fg);
  transition: transform 0.3s ease, opacity 0.2s ease;
  transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ===== Mobile menu ===== */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 98;
  background: #111111;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 72px;
  gap: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.mobile-menu.visible {
  opacity: 1;
  pointer-events: all;
}
.mobile-menu a {
  font-family: "Inter", system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0;
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  padding: 18px 20px;
  width: 100%;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  transition: color 0.2s ease;
}
.mobile-menu a:hover { color: #ffffff; }

/* Nav escuro quando menu mobile está aberto */
.nav.menu-open {
  background: #111111;
  border-bottom-color: rgba(255,255,255,0.08);
}
.nav.menu-open .nav-logo { filter: brightness(0) invert(1); }
.nav.menu-open .hamburger span { background: #ffffff; }

@media (max-width: 720px) {
  .nav { padding: 16px 20px; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .mobile-menu { display: flex; }
}

/* ===== Buttons (rounded) ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1), background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--fg);
  color: var(--bg);
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 14px 32px rgba(0,0,0,.10); }
.btn-outline {
  background: transparent;
  color: var(--fg);
  border-color: var(--line-strong);
}
.btn-outline:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); transform: translateY(-1px); }
.btn-sm { padding: 9px 16px; font-size: 13px; }
.btn-ghost {
  background: color-mix(in oklab, var(--fg) 6%, transparent);
  color: var(--fg);
}
.btn-ghost:hover { background: color-mix(in oklab, var(--fg) 12%, transparent); }

/* ===== Hero ===== */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 100px 0 60px;
  overflow: hidden;
  /* Dark hero — sempre fixo, independente do tema */
  --bg: #000000;
  --fg: #ffffff;
  --fg-muted: #afafaf;
  --fg-subtle: #6a6a6a;
  --accent: #c4b5fd;
  --line: rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.38);
  background: radial-gradient(125% 125% at 50% 10%, #000000 40%, #6633ee 100%);
  color: var(--fg);
}
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--fg) 5%, transparent);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.hero-eyebrow .pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  position: relative;
}
.hero-eyebrow .pulse::after {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.35;
  animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(0.6); opacity: 0.45; }
  100% { transform: scale(2.2); opacity: 0; }
}

.hero-title {
  font-family: "Inter", system-ui, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 16ch;
  text-wrap: balance;
}
.hero-rotator {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  padding: 0.05em 0 0.35em;
  height: 1.55em;
  margin: 0.08em 0;
}
.hero-rotator span.rotor {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.32em;
  color: var(--accent);
  white-space: nowrap;
  text-align: center;
  display: block;
}
.hero-rotator .ghost {
  visibility: hidden;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.32em;
  white-space: nowrap;
  display: block;
  text-align: center;
}

.hero-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
  margin-bottom: 14px;
}

.hero-sub {
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: 52ch;
  text-wrap: pretty;
}

.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

.hero-meta {
  position: absolute;
  bottom: 40px; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  padding: 0 32px;
}
@media (max-width: 720px) {
  .hero {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }
  .hero-inner {
    flex: 1;
    width: 100%;
    justify-content: center;
  }
  .hero-meta {
    position: static;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 24px 20px 0;
    margin-top: auto;
    gap: 0;
  }
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.hero-bg .blob {
  position: absolute;
  width: 60vw; height: 60vw;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.35;
}
.hero-bg .blob-1 { background: var(--accent); top: -20%; left: -15%; opacity: 0.18; }
.hero-bg .blob-2 { background: var(--fg); bottom: -25%; right: -10%; opacity: 0.05; }

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.25), transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.25), transparent 65%);
  opacity: 0.55;
}


/* ===== Featured Work ===== */
.featured-work {
  padding: 72px 0 80px;
  background: var(--bg);
}
.featured-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.featured-card {
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease;
}
.featured-card:hover {
  transform: translateY(-4px);
  box-shadow: rgba(0,0,0,0.16) 0px 4px 16px 0px;
}
.featured-img {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.featured-card:hover .featured-img img {
  transform: scale(1.06);
}
.featured-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
}
.featured-client {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 5px;
}
.featured-title {
  font-family: "Inter", system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 400;
  line-height: 1.35;
  color: var(--fg);
}
.featured-arrow {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-muted);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.featured-card:hover .featured-arrow {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  transform: translateX(3px);
}
@media (max-width: 920px) {
  .featured-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .featured-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .featured-work { padding: 48px 0; }
  .featured-info { padding: 14px 14px; }
}

/* ===== About ===== */
.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 920px) { .about-grid { grid-template-columns: 1fr; gap: 48px; } }

.about-text p {
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.7;
  color: var(--fg);
  margin-bottom: 22px;
  max-width: 52ch;
}
.about-text p.lead {
  font-family: "Inter", system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin-bottom: 32px;
}
.about-text p.lead em { font-style: italic; color: var(--accent); }

.about-photo {
  position: sticky; top: 120px;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.about-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.about-photo .photo-meta {
  position: absolute;
  bottom: 16px; left: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  background: var(--bg);
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 48px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.about-stats > div {
  padding: 24px 20px 24px 0;
  border-right: 1px solid var(--line);
}
.about-stats > div:last-child { border-right: 0; padding-right: 0; }
.about-stats .num {
  font-family: "Inter", system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
}
.about-stats .num em { font-style: italic; color: var(--accent); }
.about-stats .lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-top: 8px;
}

/* ===== About — cinematic full-bleed ===== */
.about-dark {
  --fg: #ffffff;
  --fg-muted: rgba(255,255,255,.65);
  --line-strong: rgba(255,255,255,.18);
  background: #0a0a0a;
  color: var(--fg);
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

/* Full-bleed photo — moves with parallax */
.about-photo-layer {
  position: absolute;
  inset: -12% 0;           /* extra vertical room for parallax travel */
  z-index: 0;
  will-change: transform;
}
.about-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  display: block;
}

/* Gradient overlay: transparent left (photo shows) → opaque dark on right (text) */
.about-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(80deg,
      transparent 0%,
      rgba(10,10,10,.25) 30%,
      rgba(10,10,10,.82) 52%,
      #0a0a0a 72%
    ),
    linear-gradient(to top, rgba(10,10,10,.6) 0%, transparent 28%);
}

/* Container sits above both layers */
.about-container {
  position: relative;
  z-index: 2;
  padding-top: 140px;
  padding-bottom: 140px;
  width: 100%;
  display: flex;
  align-items: center;
  min-height: 100vh;
}

/* Text panel — pushed to the right half */
.about-text-panel {
  max-width: min(520px, 50%);
  margin-left: auto;
  will-change: transform;
}

.about-eyebrow {
  font-family: var(--font-mono);
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 6px;
}

.about-headline {
  font-family: "Inter", system-ui, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(52px, 6.5vw, 96px);
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: #ffffff;
  margin-top: 0;
  margin-bottom: 24px;
  text-wrap: balance;
}

.about-dot { color: #7c4dff; }

.about-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.about-meta-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}

.about-meta-chip-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #2e2e2e;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9b72ff;
  flex-shrink: 0;
}

.about-meta-sep {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,.15);
  display: inline-block;
  flex-shrink: 0;
}

.about-body {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.8;
  color: var(--fg-muted);
  max-width: 48ch;
  margin-bottom: 18px;
}

.about-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.about-dark .btn-outline:hover {
  background: #ffffff;
  color: #0a0a0a;
  border-color: #ffffff;
}

/* Thin accent line — right edge of photo area */
.about-accent-line {
  position: absolute;
  right: 50%;
  top: 15%;
  bottom: 15%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.12) 30%, rgba(255,255,255,.12) 70%, transparent);
  z-index: 2;
  pointer-events: none;
}

@media (max-width: 920px) {
  .about-dark { min-height: auto; }
  .about-photo-layer { inset: 0; }
  .about-overlay {
    background:
      linear-gradient(to bottom, rgba(10,10,10,.55) 0%, rgba(10,10,10,.92) 55%, #0a0a0a 100%);
  }
  .about-container { flex-direction: column; align-items: flex-start; padding-top: 100px; padding-bottom: 100px; min-height: 100svh; }
  .about-text-panel { max-width: 100%; }
  .about-accent-line { display: none; }
}

@media (max-width: 560px) {
  /* ── Layout: coluna flex. Foto real no topo, conteúdo emerge abaixo ── */
  .about-dark {
    flex-direction: column;
    align-items: stretch;
    min-height: auto;
    overflow: visible; /* permite o container subir sobre a foto */
  }

  /* Foto: bloco grande e imersivo medido em viewport height */
  .about-photo-layer {
    position: relative;
    inset: auto;
    height: 52vh;
    min-height: 300px;
    flex-shrink: 0;
    overflow: hidden;
    transform: none !important;
    will-change: auto;
    z-index: 0;
  }

  /* Zoom forte + enquadramento de retrato: rosto em destaque */
  .about-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 8% center;
    transform: scale(1.45);
    transform-origin: 8% center;
  }

  /* Fade suave: overlay cobre foto + toda a área de overlap do container */
  .about-overlay {
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    height: calc(52vh + 110px);
    min-height: 410px;
    z-index: 1;
    background: linear-gradient(
      to bottom,
      rgba(8,8,8,0)    0%,
      rgba(8,8,8,0.45) 45%,
      rgba(8,8,8,0.85) 75%,
      #080808          100%
    );
  }

  /* Container transparente: gradiente mostra por baixo, sem retângulo sólido */
  .about-container {
    position: relative;
    z-index: 3;
    background: transparent;
    margin-top: -110px;
    padding-top: 40px;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 64px;
    min-height: auto;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Fundo da seção bate com o fim do gradiente */
  .about-dark {
    background: #080808;
  }

  /* Desativa parallax no painel de texto */
  .about-text-panel {
    transform: none !important;
    will-change: auto;
    max-width: 100%;
  }

  /* Label */
  .about-eyebrow {
    font-size: 11px;
    margin-bottom: 10px;
  }

  /* Título grande e impactante */
  .about-headline {
    font-size: clamp(56px, 15vw, 68px);
    line-height: 1.0;
    margin-bottom: 20px;
  }

  /* Chips como pills confortáveis */
  .about-meta {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    margin-bottom: 28px;
  }

  .about-meta-chip {
    height: 40px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    padding: 0 16px 0 10px;
    gap: 8px;
    font-size: 10px;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
  }

  .about-meta-chip-icon {
    width: 22px;
    height: 22px;
    background: rgba(155,114,255,0.15);
    flex-shrink: 0;
  }

  .about-meta-sep { display: none; }

  /* Texto: legível, com respiro entre parágrafos */
  .about-body {
    font-size: 16px;
    line-height: 1.62;
    color: rgba(255,255,255,0.68);
    max-width: 100%;
    margin-bottom: 20px;
  }

  /* Botões: empilhados, largura total, premium */
  .about-cta {
    flex-direction: column;
    gap: 14px;
    margin-top: 32px;
  }

  .about-cta .btn {
    width: 100%;
    justify-content: center;
    height: 56px;
    border-radius: 999px;
    font-size: 15px;
  }

  /* CTA primário: gradiente roxo */
  .about-dark .about-cta .btn-outline {
    background: linear-gradient(135deg, #7c4dff 0%, #5a2fd6 100%);
    border-color: transparent;
    color: #ffffff;
  }

  .about-dark .about-cta .btn-outline:hover {
    background: linear-gradient(135deg, #9060ff 0%, #6b40e6 100%);
    border-color: transparent;
    color: #ffffff;
  }

  /* CTA secundário: sutil com borda */
  .about-dark .about-cta .btn-ghost {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.85);
  }
}

/* ===== Skills hero ===== */
.skills-hero {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
}

.skills-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: 80px;
  align-items: start;
  padding-top: 140px;
  padding-bottom: 120px;
  width: 100%;
}
@media (max-width: 900px) {
  .skills-hero-inner { grid-template-columns: 1fr; gap: 56px; padding-top: 100px; }
}

/* Left column */
.sk-left { position: sticky; top: 100px; }

.sk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 24px;
}
.sk-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #6633ee;
  flex-shrink: 0;
}

.sk-headline {
  font-family: "Inter", system-ui, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 4.5vw, 62px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--fg);
  margin-bottom: 24px;
}
.sk-accent { color: #6633ee; }

.sk-lead {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.8;
  color: var(--fg-muted);
  max-width: 36ch;
  margin-bottom: 40px;
}

.sk-callout {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: var(--bg-alt);
  max-width: 320px;
}
.sk-callout-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(102,51,238,.10);
  color: #6633ee;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sk-callout strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 3px;
}
.sk-callout p {
  font-size: 13px;
  color: var(--fg-muted);
  line-height: 1.5;
}

/* Right column */
.sk-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sk-category {
  padding: 22px 24px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--bg-alt);
  transition: border-color 0.2s ease;
}
.sk-category:hover { border-color: rgba(102,51,238,.3); }

.sk-cat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.sk-cat-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(102,51,238,.08);
  color: #6633ee;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sk-cat-title {
  font-family: "Inter", system-ui, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.skill-tags { display: flex; flex-wrap: wrap; gap: 7px; }

.skill-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-muted);
  border: 1px solid var(--line-strong);
  background: var(--bg);
  transition: color 0.2s ease, border-color 0.2s ease;
  cursor: default;
}
.skill-tag.hl {
  color: #6633ee;
  border-color: rgba(102,51,238,.35);
  background: rgba(102,51,238,.06);
}

/* Tools row */
.sk-tools {
  padding: 22px 24px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--bg-alt);
}
.sk-tools-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 20px;
}

.sk-tools-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}

.tool-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.tool-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f4f4;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.07);
  overflow: hidden;
}
.tool-logo-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
}

.tool-name {
  font-family: "Inter", system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  color: var(--fg-muted);
  text-align: center;
  white-space: nowrap;
}

/* ===== Featured Projects (visual cards) ===== */
.fp-section {
  padding: 120px 0 140px;
}

.fp-header {
  margin-bottom: 56px;
}

.fp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
}

.fp-highlight {
  color: #6633ee;
}

.fp-card { aspect-ratio: 3 / 4; }

.fp-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  background: #111;
  cursor: pointer;
  border-radius: 12px;
  box-shadow: 0 0 0 1px var(--line-strong);
}

/* Image */
.fp-img {
  position: absolute;
  inset: 0;
}
.fp-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(.2,.8,.2,1), filter 0.5s ease;
  filter: brightness(0.75) grayscale(0.15);
}
.fp-card:hover .fp-img img {
  transform: scale(1.06);
  filter: brightness(0.45) grayscale(0);
}

/* Hover overlay */
.fp-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px 32px 80px;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.3) 55%, transparent 100%);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease, padding-bottom 0.35s ease;
}
.fp-card:hover .fp-overlay {
  opacity: 1;
  transform: translateY(0);
  padding-bottom: 28px;
}

.fp-client {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 10px;
  display: block;
}
.fp-title {
  font-family: "Inter", system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 16px;
}
.fp-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.fp-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.18);
}

/* Bottom bar — always visible */
.fp-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-radius: 0 0 12px 12px;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(.2,.8,.2,1), background 0.35s ease;
}
.fp-card:hover .fp-bar {
  opacity: 0;
  transform: translateY(100%);
}
.fp-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
  flex-shrink: 0;
  transition: color 0.35s ease;
}
.fp-name {
  flex: 1;
  font-family: "Inter", system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.35s ease;
}
.fp-arrow {
  flex-shrink: 0;
  color: var(--fg-subtle);
  display: flex;
  align-items: center;
  transition: transform 0.3s ease, color 0.35s ease;
}
.fp-card:hover .fp-num,
.fp-card:hover .fp-name,
.fp-card:hover .fp-arrow { color: var(--bg); }
.fp-card:hover .fp-arrow { transform: translateX(4px); }

@media (max-width: 860px) {
  .fp-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .fp-section { padding: 80px 0 64px; }
  .fp-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .fp-card { aspect-ratio: 4 / 3; }
  .fp-overlay { padding: 24px 20px 72px; }
}

/* ===== Projects ===== */
.projects-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 64px;
  border-top: 1px solid var(--line);
}
.project {
  display: grid;
  grid-template-columns: 80px 1fr 1.2fr 140px;
  gap: 32px;
  align-items: center;
  padding: 36px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: padding 0.4s cubic-bezier(.2,.8,.2,1);
  position: relative;
}
.project:hover { padding-left: 16px; padding-right: 16px; }
.project::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-alt);
  border-radius: var(--radius-md);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}
.project:hover::before { opacity: 1; }

.project .num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-subtle);
  letter-spacing: 0.08em;
}
.project .title {
  font-family: "Inter", system-ui, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.project .meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.project .client {
  font-size: 13px;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.project .desc {
  font-size: 15px;
  color: var(--fg-muted);
  line-height: 1.55;
  max-width: 46ch;
}
.project .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.project .tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--fg-muted);
}
.project:hover .tag { border-color: var(--line-strong); }

@media (max-width: 920px) {
  .project { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; }
  .project .tags { justify-content: flex-start; }
}

/* ===== Experience — timeline ===== */
.exp-dark {
  --bg: #0a0a0a;
  --bg-alt: #111111;
  --fg: #ffffff;
  --fg-muted: #afafaf;
  --fg-subtle: #6a6a6a;
  --line: rgba(255,255,255,.07);
  --line-strong: rgba(255,255,255,.18);
  background: #0a0a0a;
  color: var(--fg);
}

.exp-layout {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 860px) {
  .exp-layout { grid-template-columns: 1fr; gap: 48px; }
}

.exp-title-col {
  position: sticky;
  top: 120px;
}

.timeline {
  display: flex;
  flex-direction: column;
}

.tl-item {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 0 36px;
  position: relative;
}
.tl-item:not(:last-child) { padding-bottom: 56px; }

/* Left: dot + vertical line */
.tl-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 7px;
}
.tl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fg);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--fg);
  flex-shrink: 0;
  z-index: 1;
}
.tl-line {
  width: 1px;
  flex: 1;
  margin-top: 10px;
  background: var(--line-strong);
}
.tl-item:last-child .tl-line { display: none; }

/* Right: content */
.tl-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.tl-role {
  font-family: "Inter", system-ui, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(19px, 1.8vw, 24px);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 5px;
  color: var(--fg);
}
.tl-company {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.tl-period {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--fg-subtle);
  background: var(--bg-alt);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 4px 14px;
  white-space: nowrap;
  margin-top: 3px;
}
.tl-desc {
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.8;
  color: var(--fg-muted);
  max-width: 62ch;
}

@media (max-width: 640px) {
  .tl-header { flex-direction: column; gap: 8px; }
}

/* ===== Contact ===== */
.contact {
  text-align: center;
  padding: 180px 0;
  position: relative;
  border-top: 1px solid var(--line);
  background: var(--bg-alt);
}
.contact h2 {
  font-family: "Inter", system-ui, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(44px, 6vw, 80px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 32px;
  text-wrap: balance;
}
.contact h2 em { font-style: italic; color: var(--accent); }
.contact p {
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--fg-muted);
  max-width: 50ch;
  margin: 0 auto 48px;
}

/* ===== Footer ===== */
.footer {
  padding: 40px 0 56px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.footer a { color: var(--fg-muted); text-decoration: none; transition: color 0.2s ease; }
.footer a:hover { color: var(--fg); }
@media (max-width: 720px) { .footer { flex-direction: column; gap: 16px; } }

/* ===== Restricted tag on card ===== */
.fp-restricted-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f59e0b;
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.25);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 10px;
  vertical-align: middle;
}

/* ── Lock badge on hover (restricted cards) ── */
.fp-lock-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,220,80,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid #d6a000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #92600a;
  opacity: 0;
  transform: scale(0.8) translateY(-4px);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.fp-card:hover .fp-lock-badge {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ===== Password modal ===== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal-box {
  background: #fff;
  border-radius: 20px;
  padding: 40px;
  width: 100%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 32px 80px rgba(0,0,0,.25);
}

.modal-lock-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(102,51,238,.08);
  color: #6633ee;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.modal-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  color: #0a0a0a;
}

.modal-desc {
  font-size: 14px;
  color: #6a6a6a;
  line-height: 1.6;
  margin-bottom: 24px;
}

.modal-input {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
  margin-bottom: 8px;
}

.modal-input:focus { border-color: #6633ee; }
.modal-input.error { border-color: #ef4444; }

.modal-error {
  font-size: 13px;
  color: #ef4444;
  margin-bottom: 8px;
  text-align: left;
}

.modal-btn {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}

.modal-cancel {
  background: none;
  border: none;
  color: #9a9a9a;
  font-size: 14px;
  cursor: pointer;
  margin-top: 16px;
  display: block;
  width: 100%;
}

.modal-cancel:hover { color: #333; }

/* ===== Case study overlay ===== */
/* ── Case overlay shell ── */
.case-overlay {
  position: fixed;
  inset: 0;
  background: #f7f7f7;
  z-index: 999;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Mobile menu dentro do case overlay: absolute para ficar dentro do contexto */
.case-overlay .mobile-menu {
  position: absolute;
  z-index: 9; /* abaixo do case-nav (z-index: 10) para o nav ficar visível */
}

/* Case nav escuro quando menu está aberto */
.case-nav.menu-open {
  background: #111111;
  border-bottom-color: rgba(255,255,255,0.08);
}
.case-nav.menu-open .nav-logo { filter: brightness(0) invert(1); }
.case-nav.menu-open .hamburger span { background: #ffffff; }

/* ── Case nav (mirrors portfolio nav) ── */
.case-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background 0.4s ease, border-color 0.4s ease;
}

.case-nav--dark {
  background: rgba(10,10,10,.88);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.case-nav--dark .nav-logo { filter: invert(1) brightness(1.8); }

.case-nav--light {
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.case-nav--light .nav-logo { filter: none; }

.case-nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.case-nav-links a {
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color .2s;
}

.case-nav--dark .case-nav-links a { color: rgba(255,255,255,.7); }
.case-nav--dark .case-nav-links a:hover { color: #fff; }
.case-nav--light .case-nav-links a { color: rgba(0,0,0,.6); }
.case-nav--light .case-nav-links a:hover { color: #000; }

.case-back-mobile {
  display: none;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: "Inter", system-ui, sans-serif;
  transition: color .2s;
}

.case-nav--dark .case-back-mobile { color: rgba(255,255,255,.7); }
.case-nav--dark .case-back-mobile:hover { color: #fff; }
.case-nav--light .case-back-mobile { color: rgba(0,0,0,.6); }
.case-nav--light .case-back-mobile:hover { color: #000; }

.case-restricted-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f59e0b;
  background: rgba(245,158,11,.1);
  border: 1px solid rgba(245,158,11,.22);
  border-radius: 999px;
  padding: 4px 12px;
}

/* ── Dark hero ── */
.case-hero-dark {
  background: #0a0a0a;
  min-height: calc(100vh - 60px);
  padding: 0 40px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.case-hero-inner {
  max-width: 860px;
  width: 100%;
  text-align: center;
  margin: 0 auto;
  padding-bottom: 64px;
}

.case-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-bottom: 28px;
  display: block;
}

.case-title-dark {
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(44px, 6.5vw, 86px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.0;
  color: #ffffff;
  margin-bottom: 28px;
}

.case-title-dot { color: #7c4dff; }

.case-subtitle-dark {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.75;
  color: rgba(255,255,255,.45);
  max-width: 54ch;
  margin: 0 auto;
}

/* ── Stats bar ── */
.case-stats-bar {
  width: calc(100% - 80px);
  max-width: 900px;
  display: flex;
  align-items: stretch;
  background: #111111;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  margin: 48px 0 32px;
  overflow: hidden;
}

.case-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 36px 32px;
}

.case-stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9b72ff;
}

.case-stat-val {
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.case-stat-divider {
  width: 1px;
  background: rgba(255,255,255,.07);
  flex-shrink: 0;
}

.case-stat--left {
  align-items: flex-start;
  text-align: left;
}

.case-stat-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.case-stat-list li {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,.65);
  line-height: 1.4;
}

/* ── Cover image ── */
.case-cover-wrap {
  background: #141414;
  display: flex;
  justify-content: center;
  padding: 0 40px;
}

.case-cover-img {
  width: 100%;
  max-width: 900px;
  object-fit: cover;
  height: 440px;
  display: block;
  border-radius: 0;
}

/* ── Body (light) ── */
.case-body {
  max-width: 820px;
  margin: 0 auto;
  padding: 72px 40px 120px;
}

.case-content { display: flex; flex-direction: column; gap: 64px; }

.case-section { display: flex; flex-direction: column; gap: 24px; }

.case-section-n {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6633ee;
}

.case-section-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0a0a0a;
  margin-bottom: 4px;
}

.case-section p {
  font-size: 16px;
  line-height: 1.8;
  color: #444;
}

.case-highlight-box {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 28px 32px;
  margin-top: 12px;
}

.case-highlight-box strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #0a0a0a;
}

.case-highlight-box ul {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.case-highlight-box li { font-size: 15px; line-height: 1.6; color: #444; }

.case-steps { display: flex; flex-direction: column; gap: 20px; }

.case-step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 20px 24px;
}

.case-step-n {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(102,51,238,.08);
  color: #6633ee;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.case-step strong { display: block; font-size: 15px; margin-bottom: 4px; color: #0a0a0a; }
.case-step p { font-size: 14px; line-height: 1.6; color: #666; margin: 0; }

.case-section-nda {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  align-items: center;
  color: #6633ee;
  gap: 12px;
}

.case-section-nda p { font-size: 15px; color: #555; max-width: 48ch; }

/* ══════════════════════════════════════════════════
   Redesign Notificações — case study
══════════════════════════════════════════════════ */
.rn-overlay { background: #ffffff; }

/* Nav logo for light nav — no filter needed, logo is already dark */
.rn-logo { filter: none; }

/* ── Split cover hero ── */
.rn-hero {
  background: #f4f4f4;
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  padding: 48px 40px;
}

.rn-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 60px;
}

.rn-hero-text {
  flex: 1;
  min-width: 0;
}

.rn-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(0,0,0,.35);
  margin-bottom: 24px;
  display: block;
}

.rn-hero-title {
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(32px, 4vw, 58px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: #0a0a0a;
  margin-bottom: 24px;
}

.rn-hero-accent { color: #7c4dff; }
.rn-hero-dot    { color: #0a0a0a; }

.rn-hero-sub {
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.75;
  color: #666;
  max-width: 46ch;
  margin-bottom: 32px;
}

.rn-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.rn-meta-chip {
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #555;
  background: rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.09);
  border-radius: 999px;
  padding: 5px 14px;
}

.rn-meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ccc;
  flex-shrink: 0;
}

.rn-hero-img-col {
  flex: 0 0 480px;
}

.rn-hero-img-wrap {
  border-radius: 22px;
  overflow: hidden;
  height: calc(100vh - 220px);
  max-height: 720px;
}

.rn-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  display: block;
}

/* ── Image comparison slider ── */
.rn-comparison-wrap {
  max-width: 300px;
  margin: 12px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.rn-comparison-slider-outer {
  position: relative;
  width: 100%;
  height: 480px;
}

.rn-comparison-slider-outer > div[style] {
  height: 100% !important;
}

.rn-ext-label {
  position: absolute;
  top: 20px;
  z-index: 10;
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  pointer-events: none;
  white-space: nowrap;
}

.rn-ext-label--antes {
  left: -86px;
  background: rgba(0,0,0,.65);
  color: #fff;
  display: flex;
  align-items: center;
}

.rn-ext-label--depois {
  right: -94px;
  background: rgba(124,77,255,.9);
  color: #fff;
  display: flex;
  align-items: center;
}

.rn-comparison-hint {
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #bbb;
  text-align: center;
}

/* ══════════════════════════════════════════════════
   Antecipação FGTS — case study
══════════════════════════════════════════════════ */
.fgts-overlay {
  background: #ffffff;
}

.fgts-hero {
  position: relative;
  height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f7f6ff;
}

.fgts-hero-text {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 440px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 20px;
}

.fgts-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #999;
}

.fgts-hero-title {
  font-size: clamp(40px, 3.8vw, 60px);
  font-weight: 700;
  color: #0a0a0a;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0;
  hyphens: none;
  overflow-wrap: normal;
  word-break: keep-all;
}

.fgts-hero-accent { color: #7c4dff; }
.fgts-hero-dot    { color: #0a0a0a; }

.fgts-hero-sub {
  font-size: 15px;
  line-height: 1.75;
  color: #666;
  margin: 0;
}

.fgts-impact-chips {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
  justify-content: center;
  margin-top: 8px;
}

.fgts-impact-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  flex-shrink: 0;
}

.fgts-chip-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(124,77,255,.12);
  color: #7c4dff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fgts-chip-divider {
  width: 1px;
  height: 36px;
  background: rgba(0,0,0,.12);
  flex-shrink: 0;
}

.fgts-chip-title {
  font-size: 13px;
  font-weight: 600;
  color: #0a0a0a;
  margin: 0;
  white-space: nowrap;
}

.fgts-chip-sub {
  font-size: 11px;
  color: #888;
  margin: 0;
  white-space: nowrap;
}

.fgts-hero-img-col {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 58%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
}

.fgts-hero-img {
  height: 100%;
  width: auto;
  display: block;
}

@media (max-width: 900px) {
  .fgts-hero { flex-direction: column; height: auto; }
  .fgts-hero-text { width: auto; margin: 0; padding: 48px 24px 36px; }
  .fgts-hero-img-col { position: relative; width: 100%; height: 480px; }
}

/* ── FGTS telas grid ── */
.fgts-telas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 8px;
}

.fgts-tela-wrap {
  border-radius: 16px;
  overflow: hidden;
  background: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
}

.fgts-tela-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

@media (max-width: 720px) {
  .fgts-telas-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── FGTS impact card extras ── */
.case-impact-icon {
  color: #7c4dff;
  margin-bottom: 10px;
}

.case-impact-title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 6px;
}

.case-impact-desc {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255,255,255,.55);
  margin: 0;
}

/* ── RN extras ── */
.rn-nda-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: #999;
  font-style: italic;
  line-height: 1.65;
  padding: 14px 18px;
  background: rgba(0,0,0,.03);
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.06);
}

.rn-impact-callout {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 24px;
  background: rgba(124,77,255,.05);
  border: 1px solid rgba(124,77,255,.12);
  border-left: 3px solid #7c4dff;
  border-radius: 0 10px 10px 0;
  margin-top: 4px;
}

.rn-impact-label {
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7c4dff;
  font-weight: 600;
}

.rn-impact-callout p {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: #555 !important;
  margin: 0 !important;
}

@media (max-width: 900px) {
  .rn-hero { padding: 48px 20px; }
  .rn-hero-inner { flex-direction: column; gap: 36px; }
  .rn-hero-img-col { flex: none; width: 100%; }
  .rn-hero-img-wrap { height: 400px; border-radius: 18px; }
}

@media (max-width: 560px) {
  /* FGTS: oculta imagem do hero no mobile */
  .fgts-hero-img-col { display: none; }

  /* RN hero: cabe 100% na viewport, sem scroll horizontal */
  .rn-hero {
    padding: 40px 24px;
    min-height: auto;
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .rn-hero-inner {
    flex-direction: column;
    gap: 28px;
    width: 100%;
    max-width: 100%;
  }

  .rn-hero-text {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .rn-hero-title {
    font-size: clamp(26px, 7.5vw, 36px);
    overflow-wrap: break-word;
    word-break: normal;
    max-width: 100%;
  }

  .rn-hero-sub {
    font-size: 15px;
    max-width: 100%;
    line-height: 1.65;
  }

  .rn-hero-img-col {
    width: 100%;
    flex: none;
    min-width: 0;
  }

  .rn-hero-img-wrap {
    height: 240px;
    border-radius: 14px;
  }

  /* Chips de impacto: grid 2 colunas iguais no mobile */
  .fgts-impact-chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 12px;
    align-items: start;
    flex-wrap: unset;
  }

  .fgts-impact-chip {
    padding: 0;
    align-items: flex-start;
    flex-shrink: unset;
  }

  .fgts-chip-icon {
    flex-shrink: 0;
    margin-top: 2px;
  }

  .fgts-chip-title { white-space: normal; font-size: 12px; }
  .fgts-chip-sub   { white-space: normal; font-size: 10px; }

  .fgts-chip-divider { display: none; }
}

/* ══════════════════════════════════════════════════
   Impact section (full width)
══════════════════════════════════════════════════ */
/* ── Impact section (full width) ── */
.case-section-impact {
  background: #0a0a0a;
  width: 100%;
  padding: 72px 40px;
}

.case-impact-inner {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.case-impact-headline {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.03em;
  line-height: 1;
}
.case-impact-headline span { color: #7c4dff; }

.case-impact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.case-impact-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.case-impact-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(124,77,255,.14);
  color: #9b72ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.case-impact-card h3 {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.case-impact-card p {
  font-size: 13px;
  line-height: 1.75;
  color: rgba(255,255,255,.42);
  margin: 0;
}

@media (max-width: 720px) {
  .case-impact-grid { grid-template-columns: 1fr; }
  .case-section-impact { padding: 48px 20px; }
}

/* ── Case study images ── */
.case-img-wrap {
  background: #f5f5f5;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 8px;
}

.case-img-full {
  width: 100%;
  height: auto;
  display: block;
}

.case-img-caption {
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  color: #999;
  padding: 10px 16px;
  border-top: 1px solid rgba(0,0,0,.06);
  background: #fafafa;
}

/* ── 3-column row (Discovery) ── */
.case-img-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 8px;
}
.case-img-row .case-img-wrap { margin-top: 0; }

.case-img-row .case-img-full {
  width: 100%;
  height: auto;
}

/* Dados Clientes (1º) e Desk Research (2º) preenchem a altura do card */
.case-img-row .case-img-wrap:nth-child(1),
.case-img-row .case-img-wrap:nth-child(2) {
  display: flex;
  flex-direction: column;
}
.case-img-row .case-img-wrap:nth-child(1) .case-img-full,
.case-img-row .case-img-wrap:nth-child(2) .case-img-full {
  flex: 1;
  min-height: 0;
  object-fit: cover;
  object-position: top;
}

.case-img-row .case-img-caption { font-size: 11px; }

/* ── Zoomable images ── */
.case-img-zoomable {
  cursor: zoom-in;
  position: relative;
  transition: box-shadow 0.2s, transform 0.2s;
}
.case-img-zoomable:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
  transform: translateY(-1px);
}
.case-img-zoomable::after {
  content: "⊕";
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 18px;
  color: rgba(0,0,0,.28);
  pointer-events: none;
  line-height: 1;
  transition: color 0.2s;
}
.case-img-zoomable:hover::after { color: rgba(0,0,0,.5); }

/* ── Zoom lightbox ── */
.case-zoom-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  cursor: zoom-out;
}

.case-zoom-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 32px 80px rgba(0,0,0,.5);
}

.case-zoom-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}
.case-zoom-close:hover { background: rgba(255,255,255,.2); }

@media (max-width: 720px) {
  .case-img-caption { font-size: 11px; padding: 8px 14px; }
  .case-body { padding: 48px 20px 80px; }
  .case-nav { padding: 0 20px; }
  .case-nav-links { display: none; }
  .case-back-mobile { display: flex; }
  .case-hero-dark { padding: 0 20px 48px; }
  .case-stats-bar { width: calc(100% - 40px); flex-wrap: wrap; }
  .case-stat { padding: 20px 16px; }
  .case-img-row { grid-template-columns: 1fr; }
  .case-zoom-overlay { padding: 20px; }
}

/* ===== Hero fade-in ===== */
.hero-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s cubic-bezier(.2,.8,.2,1), transform 0.9s cubic-bezier(.2,.8,.2,1);
}
.hero-fade.in {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Reveal animations ===== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(.2,.8,.2,1), transform 0.9s cubic-bezier(.2,.8,.2,1);
}
.reveal.in { opacity: 1; transform: translateY(0); }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(.2,.8,.2,1), transform 0.7s cubic-bezier(.2,.8,.2,1);
}
.reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 0.07s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 0.14s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 0.21s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 0.28s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 0.35s; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: 0.42s; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: 0.49s; }

/* ===== Section header ===== */
.section-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-bottom: 0;
  align-items: end;
}
@media (max-width: 820px) { .section-header { grid-template-columns: 1fr; gap: 24px; } }

/* ===== Dark mode adjustments ===== */
body.dark .skills-card,
body.dark .contact { background: color-mix(in oklab, var(--bg) 92%, var(--fg) 8%); }
body.dark .about-photo { background: color-mix(in oklab, var(--bg) 92%, var(--fg) 8%); }
body.dark .chip,
body.dark .project .tag,
body.dark .exp-item .clients span,
body.dark .about-photo .photo-meta,
body.dark .hero-eyebrow { background: color-mix(in oklab, var(--bg) 88%, var(--fg) 12%); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 10px; }

/* selection */
::selection { background: var(--accent); color: var(--bg); }


/* ══════════════════════════════════════════════════
   CSAT Case
══════════════════════════════════════════════════ */
.csat-overlay { background: #ffffff; }

.csat-hero {
  position: relative;
  height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f7f6ff;
}

.csat-hero-text {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 440px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 20px;
}

.csat-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #999;
}

.csat-hero-title {
  font-size: clamp(40px, 3.8vw, 60px);
  font-weight: 700;
  color: #0a0a0a;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0;
}

.csat-hero-accent { color: #7c4dff; }
.csat-hero-dot    { color: #0a0a0a; }

.csat-hero-sub {
  font-size: 15px;
  line-height: 1.75;
  color: #666;
  margin: 0;
}

.csat-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}

.csat-meta-chip {
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #555;
  background: rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.09);
  border-radius: 999px;
  padding: 5px 14px;
}

.csat-meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ccc;
  flex-shrink: 0;
}

.csat-hero-img-col {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 58%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
}

.csat-hero-img {
  height: 100%;
  width: auto;
  display: block;
}

/* ── CSAT notas grid ── */
.csat-notas-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 8px;
}

.csat-nota-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: #f5f5f5;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  overflow: hidden;
  padding: 16px 12px 12px;
}

.csat-nota-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.csat-nota-label {
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #999;
  margin: 0;
}

@media (max-width: 900px) {
  .csat-hero { flex-direction: column; height: auto; }
  .csat-hero-text { width: auto; margin: 0; padding: 48px 24px 36px; }
  .csat-hero-img-col { position: relative; width: 100%; height: 360px; }
  .csat-notas-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
  .csat-notas-grid { grid-template-columns: repeat(2, 1fr); }
}