/* ============================================================
   IADAH CREATIVE — sistema visual
   Escuro · cinematográfico · petróleo #024555
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600&family=Instrument+Serif:ital@0;1&family=Montserrat:wght@300;400;500;700&display=swap');

:root {
  /* base tones — quase-preto frio */
  --bg:        #07090a;
  --bg-2:      #0b0f11;
  --surface:   #0f1518;
  --surface-2: #141c20;
  --line:      rgba(255,255,255,0.09);
  --line-2:    rgba(255,255,255,0.14);

  /* texto */
  --ink:       #f3f6f6;
  --ink-soft:  #b9c4c6;
  --ink-mut:   #7c898c;

  /* marca — petróleo */
  --brand:     #024555;
  --brand-2:   #0a6577;
  --accent:    #45cbdf;   /* ciano claro p/ destaques */
  --accent-dim: rgba(69,203,223,0.14);

  --radius:    14px;
  --maxw:      1280px;

  --ff-sans:   'Space Grotesk', system-ui, sans-serif;
  --ff-body:   'Hanken Grotesk', system-ui, sans-serif;
  --ff-serif:  'Instrument Serif', Georgia, serif;
  --ff-logo:   'Montserrat', system-ui, sans-serif;

  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* grão de filme sutil sobre tudo */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--accent); color: #03191d; }

/* ---------- layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

.eyebrow {
  font-family: var(--ff-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--accent);
  opacity: 0.6;
}

h1, h2, h3, h4 { font-family: var(--ff-sans); font-weight: 600; line-height: 1.04; letter-spacing: -0.02em; }
.serif { font-family: var(--ff-serif); font-weight: 400; font-style: italic; letter-spacing: 0; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.01em;
  padding: 15px 26px;
  border-radius: 100px;
  border: 1px solid transparent;
  transition: transform .4s var(--ease), background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--accent); color: #03191d; }
.btn-primary:hover { transform: translateY(-2px); background: #6ad8e8; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.btn-lg { padding: 18px 32px; font-size: 16px; }

/* ---------- placeholder de mídia ---------- */
.ph {
  position: relative;
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 11px),
    linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ph::before {
  content: attr(data-label);
  font-family: 'Space Grotesk', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mut);
  padding: 7px 12px;
  border: 1px dashed var(--line-2);
  border-radius: 6px;
  background: rgba(0,0,0,0.25);
  text-align: center;
  max-width: 80%;
}

/* ---------- reveal no scroll (fail-visible: só esconde quando .anim está no html) ---------- */
[data-reveal] { opacity: 1; transform: none; }
[data-stagger] > * { opacity: 1; transform: none; }

html.anim [data-reveal] { opacity: 0; transform: translateY(30px); }
html.anim [data-reveal].in { opacity: 1; transform: none; animation: revealUp 1.1s var(--ease) var(--d, 0s) both; }
@keyframes revealUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

/* variantes */
html.anim [data-reveal="left"]  { transform: translateX(-40px); }
html.anim [data-reveal="right"] { transform: translateX(40px); }
html.anim [data-reveal="scale"] { transform: scale(0.94); }
html.anim [data-reveal="left"].in  { opacity: 1; transform: none; animation: revealLeft 1.1s var(--ease) var(--d, 0s) both; }
html.anim [data-reveal="right"].in { opacity: 1; transform: none; animation: revealRight 1.1s var(--ease) var(--d, 0s) both; }
html.anim [data-reveal="scale"].in { opacity: 1; transform: none; animation: revealScale 1.1s var(--ease) var(--d, 0s) both; }
@keyframes revealLeft  { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes revealRight { from { opacity: 0; transform: translateX(40px); }  to { opacity: 1; transform: none; } }
@keyframes revealScale { from { opacity: 0; transform: scale(0.94); }       to { opacity: 1; transform: none; } }

/* wipe/clip reveal */
html.anim [data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); }
html.anim [data-reveal="clip"].in { clip-path: inset(0 0 0 0); animation: revealClip 1.2s var(--ease) var(--d, 0s) both; }
@keyframes revealClip { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
html.anim [data-reveal="clip"] > * { transform: scale(1.08); }
html.anim [data-reveal="clip"].in > * { transform: scale(1); animation: revealClipInner 1.5s var(--ease) var(--d, 0s) both; }
@keyframes revealClipInner { from { transform: scale(1.08); } to { transform: scale(1); } }

/* stagger */
html.anim [data-stagger] > * { opacity: 0; transform: translateY(28px); }
html.anim [data-stagger].in > * { opacity: 1; transform: none; animation: revealUp 0.95s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  html.anim [data-reveal], html.anim [data-reveal="clip"], html.anim [data-reveal="clip"] > *, html.anim [data-stagger] > * {
    opacity: 1; transform: none; clip-path: none; animation: none !important;
  }
  html { scroll-behavior: auto; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(7,9,10,0.72);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--ff-logo);
  font-size: 19px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); }
.brand b { font-weight: 700; }
.brand span { color: var(--ink); font-weight: 300; }

.nav-links { display: flex; align-items: center; gap: 38px; }
.nav-links a {
  font-family: var(--ff-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  position: relative;
  padding: 4px 0;
  transition: color .3s;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width .35s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { width: 100%; }

.nav-cta { display: flex; align-items: center; gap: 18px; }

.burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 8px; }
.burger span { width: 24px; height: 2px; background: var(--ink); transition: .3s var(--ease); }

/* menu mobile */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 0 40px;
  transform: translateY(-100%);
  transition: transform .55s var(--ease);
}
.mobile-menu.open { transform: none; }
.mobile-menu a {
  font-family: var(--ff-sans);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.02em;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.mobile-menu .btn { margin-top: 28px; align-self: flex-start; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(118px, 16vh, 210px) 0 clamp(96px, 13vh, 150px);
  overflow: hidden;
}
.hero-bg { position: absolute; inset: -8% 0 0; z-index: 0; will-change: transform; }
.hero-bg .ph { border: none; }
.hero-video, .hero-video iframe { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh; transform: translate(-50%, -50%); border: 0; pointer-events: none; }
.hero-video { opacity: 0; transition: opacity 1.2s var(--ease); }
.hero-video.ready { opacity: 1; }
.hero-video iframe { top: 0; left: 0; transform: none; width: 100%; height: 100%; min-width: 0; min-height: 0; }
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 70% 10%, rgba(2,69,85,0.45), transparent 60%),
    linear-gradient(180deg, rgba(7,9,10,0.55) 0%, rgba(7,9,10,0.2) 35%, rgba(7,9,10,0.92) 88%, var(--bg) 100%);
}
.hero-inner { position: relative; z-index: 2; width: 100%; }
.hero h1 {
  font-size: clamp(1.65rem, 3.4vw, 3.1rem);
  max-width: 34ch;
  line-height: 1.22;
  text-wrap: pretty;
  margin: 28px 0 0;
}
.hero h1 .serif { color: var(--accent); }

.hero p.lead {
  margin-top: 26px;
  max-width: 56ch;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  color: var(--ink-soft);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

.hero-meta {
  position: absolute;
  z-index: 2;
  right: 32px;
  bottom: 7vh;
  text-align: right;
  font-family: var(--ff-sans);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-mut);
  line-height: 1.7;
}
.hero-meta b { color: var(--ink); font-weight: 600; display: block; font-size: 15px; }

.scroll-cue {
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mut);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.scroll-cue .ln { width: 1px; height: 44px; background: linear-gradient(var(--accent), transparent); animation: drop 2.2s var(--ease) infinite; }
@keyframes drop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 50.1% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 26px 0;
  overflow: hidden;
  white-space: nowrap;
  background: var(--bg-2);
}
.marquee-track { display: inline-flex; gap: 60px; animation: slide 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span {
  font-family: var(--ff-sans);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-mut);
  display: inline-flex;
  align-items: center;
  gap: 60px;
}
.marquee span::after { content: "✦"; color: var(--accent); font-size: 0.7em; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ============================================================
   SEÇÕES genéricas
   ============================================================ */
.section { padding: clamp(80px, 12vh, 150px) 0; }
.section-head { max-width: 760px; margin-bottom: 64px; }
.section-head h2 {
  font-size: clamp(2.1rem, 5vw, 3.8rem);
  margin-top: 20px;
}
.section-head p { margin-top: 22px; color: var(--ink-soft); font-size: 1.1rem; max-width: 56ch; }

.section-inline .section-head { margin-bottom: 52px; }

/* ---------- SERVIÇOS ---------- */
.services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.service {
  background: var(--bg);
  padding: 58px 50px 52px;
  position: relative;
  transition: background .45s var(--ease);
  min-height: 340px;
  display: flex;
  flex-direction: column;
}
.service::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--ease);
}
.service:hover::before { transform: scaleX(1); }
.service:hover { background: var(--surface); }
.service .num {
  font-family: var(--ff-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.service .num::after { content: ""; width: 34px; height: 1px; background: var(--accent); opacity: .45; }
.service h3 { font-size: clamp(2rem, 3.2vw, 2.7rem); margin: 22px 0 16px; letter-spacing: -0.025em; }
.service p { color: var(--ink-soft); font-size: 1.08rem; max-width: 42ch; }
.service .tags { margin-top: auto; padding-top: 34px; display: flex; flex-wrap: wrap; gap: 8px; }
.service .tags span {
  font-family: var(--ff-sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  border: 1px solid var(--line-2);
  border-radius: 100px;
  padding: 6px 14px;
  transition: border-color .4s var(--ease), color .4s var(--ease);
}
.service:hover .tags span { border-color: var(--accent-dim); color: var(--ink); }

/* ---------- PORTFÓLIO ---------- */
.work-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 56px; flex-wrap: wrap; }
.work-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; }
.case {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  display: block;
  isolation: isolate;
}
.case .ph { border: none; transition: transform 1.1s var(--ease); }
.case .thumb, .case-cover .thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.case .thumb { transition: transform 1.1s var(--ease); }
.case:hover .thumb { transform: scale(1.06); }
.case:hover .ph { transform: scale(1.06); }
.case .overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px;
  background: linear-gradient(0deg, rgba(5,7,8,0.9) 0%, rgba(5,7,8,0.25) 45%, transparent 75%);
}
.case .overlay .more { pointer-events: auto; }
.case .kind { font-family: var(--ff-sans); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.case h3 { font-size: 1.5rem; margin-top: 8px; transition: transform .5s var(--ease); }
.case .more {
  font-family: var(--ff-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #03191d;
  background: var(--accent);
  margin-top: 18px;
  padding: 12px 22px;
  border-radius: 100px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  opacity: 1;
  transform: none;
  transition: transform .4s var(--ease), background .3s var(--ease), gap .3s var(--ease);
}
.case:hover .more { background: #6ad8e8; transform: translateY(-2px); gap: 13px; }
.case .more svg { width: 17px; height: 17px; }

/* vídeo de fundo rodando no card (cover, sem letterbox) */
.video-cover { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; background: #000; }
.video-cover iframe {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto; height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* ---- facade de vídeo: clique para tocar (robusto em qualquer ambiente) ---- */
.video-facade {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-color: #05080a;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}
.video-facade::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,8,10,0.15), rgba(5,8,10,0.35));
  transition: background .4s var(--ease);
}
.video-facade:hover::after { background: rgba(5,8,10,0.1); }
.video-facade .play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 76px; height: 76px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.7);
  background: rgba(7,9,10,0.4);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  transition: transform .4s var(--ease), background .3s, border-color .3s;
}
.video-facade .play-btn svg { width: 26px; height: 26px; margin-left: 4px; color: #fff; }
.video-facade:hover .play-btn { transform: translate(-50%, -50%) scale(1.08); background: var(--accent); border-color: var(--accent); }
.video-facade:hover .play-btn svg { color: #03191d; }
.video-facade.playing { background: #000; cursor: default; }
.video-facade.playing .play-btn, .video-facade.playing::after { opacity: 0; pointer-events: none; }
.video-facade iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.video-facade.playing iframe { opacity: 1; }

/* ---- embed nativo do YouTube (modo privacidade, sem thumbnail de rastreio) ---- */
.case-cover { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #05080a; }
.case-cover.short { max-width: 420px; margin-inline: auto; }
.case-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.gallery .g { position: relative; overflow: hidden; }
.case-video, iframe.case-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #05080a;
}
.g .case-video { position: absolute; inset: 0; }
/* células de galeria que recebem vídeo seguem o formato 16:9 (em vez da altura pensada para foto) */
.gallery .g:has(.case-video) { height: auto; aspect-ratio: 16 / 9; }
.gallery .g.a:has(.case-video) { grid-column: span 12; }
.gallery .g.b:has(.case-video), .gallery .g.c:has(.case-video), .gallery .g.d:has(.case-video), .gallery .g.e:has(.case-video) { grid-column: span 6; }
/* galeria com apenas dois vídeos: lado a lado, sem célula solta */
.gallery .g.a:has(.case-video):nth-last-child(2) { grid-column: span 6; }
/* shorts (vídeo vertical): quadro 9:16, o vídeo preenche todo o espaço */
.gallery .g.short:has(.case-video), .case-cover.short:has(.case-video), .g.short, .case-cover.short { aspect-ratio: 9 / 16; height: auto; background: #05080a; }
.g.short .case-video, .g.short iframe.case-video,
.case-cover.short .case-video, .case-cover.short iframe.case-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  aspect-ratio: auto;
}
.gallery .g.short { grid-column: span 4 !important; }
/* linha mista: o vídeo 16:9 vizinho completa as 12 colunas ao lado do short */
.gallery:has(.g.short) .g.b:has(.case-video):not(.short) { grid-column: span 8; align-self: center; }
/* galeria só de shorts: sai da grade de 12 e centraliza a fileira */
.gallery:not(:has(.g:not(.short))) { display: flex; flex-wrap: wrap; justify-content: center; }
.gallery:not(:has(.g:not(.short))) .g.short { flex: 0 1 275px; }
.gallery:has(.g.short) { align-items: start; }

/* fallback discreto caso o embed seja bloqueado (erro 153 em sandbox) */
.yt-fallback {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  pointer-events: auto;
  font-family: var(--ff-sans);
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  text-align: center;
  padding: 9px 14px;
  background: rgba(7,9,10,0.82);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--line);
}
.yt-fallback b { color: var(--accent); font-weight: 600; }
.yt-fallback:hover { color: var(--ink); }

.case .desc {
  color: var(--ink-soft);
  font-size: 0.96rem;
  line-height: 1.5;
  margin-top: 12px;
  max-width: 48ch;
}

.case.big { grid-column: span 7; }
.case.med { grid-column: span 5; }
.case.third { grid-column: span 4; }
.case.half { grid-column: span 6; }

/* ---------- SOBRE ---------- */
.about { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 80px; align-items: center; }
.about-media { aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden; }

/* ---------- CARROSSEL (sobre) ---------- */
.carousel { position: relative; aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #000; }
.carousel .track { position: absolute; inset: 0; }
.carousel .slide {
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.1s var(--ease), transform 5.5s linear;
}
.carousel .slide img { width: 100%; height: 100%; object-fit: cover; }
.carousel .slide.active { opacity: 1; transform: scale(1); }
.carousel::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(5,7,8,0.55) 100%);
}
.carousel .dots {
  position: absolute;
  left: 0; right: 0; bottom: 18px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 9px;
}
.carousel .dots button {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.4);
  padding: 0;
  cursor: pointer;
  transition: background .3s, width .3s var(--ease);
}
.carousel .dots button.active { background: var(--accent); width: 22px; border-radius: 100px; }
.carousel .c-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(7,9,10,0.4);
  backdrop-filter: blur(6px);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .35s var(--ease), background .3s, border-color .3s;
}
.carousel:hover .c-nav { opacity: 1; }
.carousel .c-nav:hover { background: var(--accent); border-color: var(--accent); color: #03191d; }
.carousel .c-nav svg { width: 18px; height: 18px; }
.carousel .c-prev { left: 14px; }
.carousel .c-next { right: 14px; }
.about h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); margin: 22px 0 26px; }
.about p { color: var(--ink-soft); margin-bottom: 18px; }
.about p .serif { color: var(--ink); font-size: 1.15em; }
.about h2 .serif { color: var(--accent); }
.hero h1 .serif { font-size: 1.1em; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 44px; border-top: 1px solid var(--line); padding-top: 36px; }
.stat { text-align: center; }
.stat .n { font-family: var(--ff-sans); font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
.stat .n span { color: inherit; }
.stat .n .sym { color: var(--accent); }
.stat .l { font-size: 13px; color: var(--ink-mut); margin-top: 6px; letter-spacing: 0.04em; }

/* ---------- DEPOIMENTOS ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.quote {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
}
.quote .mark { font-family: var(--ff-serif); font-size: 3.4rem; line-height: 0.5; color: var(--brand-2); height: 26px; }
.quote p { color: var(--ink-soft); font-size: 1.05rem; margin: 18px 0 26px; }
.quote .who { margin-top: auto; display: flex; align-items: center; gap: 14px; }
.quote .av { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; }
.quote .who b { font-family: var(--ff-sans); font-size: 14px; display: block; }
.quote .who small { color: var(--ink-mut); font-size: 12.5px; }

/* ---------- CTA FINAL ---------- */
.cta {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  padding: clamp(60px, 9vw, 110px) 8%;
  text-align: center;
  border: 1px solid var(--line-2);
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(2,69,85,0.55), transparent 60%),
    var(--surface);
}
.cta h2 { font-size: clamp(2.2rem, 6vw, 4.6rem); max-width: 18ch; margin: 22px auto 0; }
.cta h2 .serif { color: var(--accent); }
.cta p { color: var(--ink-soft); max-width: 50ch; margin: 24px auto 0; font-size: 1.1rem; }
.cta .hero-actions { justify-content: center; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top: 1px solid var(--line); padding: 72px 0 40px; background: var(--bg-2); }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 50px; padding-bottom: 56px; }
.footer .brand { font-size: 26px; margin-bottom: 20px; }
.footer-top p { color: var(--ink-mut); max-width: 38ch; }
.footer-col h4 { font-family: var(--ff-sans); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mut); margin-bottom: 20px; }
.footer-col a { display: block; color: var(--ink-soft); padding: 7px 0; font-size: 15px; transition: color .3s, transform .3s; }
.footer-col a:hover { color: var(--accent); transform: translateX(4px); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 30px; flex-wrap: wrap; gap: 16px; }
.footer-bottom small { color: var(--ink-mut); font-size: 13px; }
.socials { display: flex; gap: 12px; }
.socials a { width: 42px; height: 42px; border: 1px solid var(--line-2); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: .3s var(--ease); }
.socials a svg { width: 18px; height: 18px; }
.socials a:hover { background: var(--accent); color: #03191d; border-color: var(--accent); transform: translateY(-3px); }

/* whatsapp flutuante */
.wa-float {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 90;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #1faf54;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 34px rgba(31,175,84,0.4);
  transition: transform .35s var(--ease);
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 30px; height: 30px; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-cta .btn { display: none; }
  .burger { display: flex; }
  .services { grid-template-columns: 1fr; }
  .about { grid-template-columns: 1fr; gap: 44px; }
  .quotes { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 36px; }
  .case.big, .case.med, .case.third, .case.half { grid-column: span 12; }
  .hero-meta { display: none; }
}
@media (min-width: 981px) and (max-width: 1180px) {
  .case.third { grid-column: span 6; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 20px; }
  .service { padding: 34px 26px; min-height: 0; }
  .service h3 { font-size: 1.75rem; }
  .stats { grid-template-columns: 1fr; gap: 22px; }
}