/* Art & Dub — design tokens */
:root{
  --paper:#FAFAFD;
  --paper-2:#F1F0F8;
  --ink:#17151C;
  --ink-2:#625F6C;
  --accent:#5A3FE0;
  --accent-ink:#FAFAFD;
  --grad: linear-gradient(90deg, #E619B0 0%, #7B3FF2 35%, #3B6FF0 70%, #22C7E5 100%);
  --deep:#14121B;
  --deep-2:#1D1A28;
  --deep-text:#EDEAF5;
  --deep-text-2:#A8A3BB;
  --line:rgba(23,21,28,.12);
  --line-deep:rgba(237,234,245,.14);

  --serif:'Montserrat', 'Segoe UI', Arial, sans-serif;
  --sans:'Montserrat', 'Segoe UI', Arial, sans-serif;

  --t-0: clamp(1.05rem, 1rem + .2vw, 1.15rem);
  --t-1: clamp(1.2rem, 1.1rem + .5vw, 1.45rem);
  --t-2: clamp(1.7rem, 1.4rem + 1.4vw, 2.4rem);
  --t-3: clamp(2rem, 1.5rem + 2vw, 3.2rem);
  --disp: clamp(2.6rem, 1.7rem + 4.6vw, 4.8rem);

  --header-h: 76px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--sans);
  font-size:var(--t-0);
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--serif); line-height:1.05; letter-spacing:-.02em; margin:0 0 .5em; font-weight:500; }
p{ margin:0 0 1em; }
.prose{ max-width:60ch; color:var(--ink-2); }

.wrap{ max-width:1240px; margin:0 auto; padding:0 24px; }
@media (min-width:900px){ .wrap{ padding:0 64px; } }

.skip-link{ position:absolute; left:-999px; top:0; background:var(--accent); color:#fff; padding:12px 20px; z-index:200; }
.skip-link:focus{ left:16px; top:16px; }

.eyebrow{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.1em; font-size:.78rem; font-weight:600; color:var(--deep-text-2); margin:0 0 16px; }
.eyebrow-dark{ color:var(--accent); }

.section-title{ font-size:var(--t-3); max-width:20ch; }
.section-lead{ color:var(--ink-2); max-width:56ch; font-size:var(--t-1); margin-bottom:48px; }

.btn{ display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:2px; font-weight:600; font-size:.98rem; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:transform .25s ease, background .25s ease, color .25s ease; }
.btn-accent{ background:var(--accent); color:var(--accent-ink); }
.btn-accent:hover{ transform:translateY(-2px); }
.btn-ghost-light{ background:transparent; border-color:rgba(255,255,255,.5); color:#fff; }
.btn-ghost-light:hover{ background:rgba(255,255,255,.12); }
.btn-ghost-dark{ background:transparent; border-color:var(--line); color:var(--ink); }
.link-arrow{ display:inline-block; margin-top:8px; font-weight:600; color:var(--accent); text-decoration:none; }
.link-arrow:hover{ text-decoration:underline; }

/* header */
.site-header{ position:sticky; top:0; z-index:100; height:var(--header-h); display:flex; align-items:center; background:rgba(250,247,241,.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.logo{ display:flex; align-items:center; }
.logo img{ height:44px; width:auto; display:block; }
.logo-footer img{ height:42px; width:auto; }
.nav{ display:none; gap:32px; }
.nav a{ text-decoration:none; font-weight:500; font-size:.95rem; position:relative; padding:4px 0; }
.nav a.active, .nav a[aria-current="true"]{ color:var(--accent); }
.nav-cta{ display:none; }
.hamburger{ display:grid; gap:5px; background:none; border:none; padding:8px; cursor:pointer; }
.hamburger span{ width:24px; height:2px; background:var(--ink); display:block; transition:transform .2s ease, opacity .2s ease; }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (min-width:900px){
  .nav{ display:flex; }
  .nav-cta{ display:inline-flex; }
  .hamburger{ display:none; }
}
@media (max-width:899px){
  .nav{ position:fixed; inset:var(--header-h) 0 0 0; background:var(--paper); flex-direction:column; padding:32px 24px; gap:8px; transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; }
  .nav.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .nav a{ font-size:1.3rem; padding:14px 0; border-bottom:1px solid var(--line); }
}

/* hero */
.hero{ position:relative; min-height:88vh; display:flex; align-items:flex-end; overflow:hidden; }
.hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-scrim{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(20,16,12,.86) 0%, rgba(20,16,12,.5) 45%, rgba(20,16,12,.25) 100%); }
.hero-content{ position:relative; z-index:2; padding-bottom:96px; padding-top:160px; color:#fff; }
.hero-content .eyebrow{ display:inline-flex; align-items:center; gap:10px; }
.hero-content .eyebrow::before{ content:""; width:28px; height:3px; background:var(--grad); display:inline-block; }
.hero h1{ font-size:var(--disp); max-width:16ch; color:#fff; margin-bottom:.4em; }
.hero-sub{ max-width:52ch; font-size:var(--t-1); color:rgba(255,255,255,.86); margin-bottom:32px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:16px; }
.hero .eyebrow{ color:rgba(255,255,255,.75); }

/* services */
.services{ padding:112px 0; background:var(--paper); }
.service-rows{ display:flex; flex-direction:column; gap:96px; margin-top:56px; }
.service-row{ display:grid; grid-template-columns:1fr; gap:32px; align-items:center; }
.service-media img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.service-num{ font-family:var(--serif); font-size:1.1rem; color:var(--accent); font-weight:600; }
.service-copy h3{ font-size:var(--t-2); margin-top:.2em; }
.service-copy p{ color:var(--ink-2); max-width:46ch; }
@media (min-width:820px){
  .service-row{ grid-template-columns:7fr 5fr; }
  .service-row-rev{ grid-template-columns:5fr 7fr; }
  .service-row-rev .service-media{ order:2; }
  .service-row-rev .service-copy{ order:1; }
}

/* portfolio */
.portfolio{ padding:112px 0; background:var(--deep); color:var(--deep-text); }
.portfolio .section-title{ color:#fff; }
.portfolio .section-lead{ color:var(--deep-text-2); }
.portfolio-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (min-width:700px){ .portfolio-grid{ grid-template-columns:repeat(3,1fr); } }
.portfolio-card{ position:relative; aspect-ratio:4/3; border:1px solid var(--line-deep); border-radius:2px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; background:var(--deep-2); overflow:hidden; }
.portfolio-card::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--grad); }
.portfolio-card span{ font-family:var(--serif); font-size:1.3rem; }
.portfolio-card small{ color:var(--deep-text-2); text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; }

/* sobre */
.sobre{ padding:112px 0; }
.sobre-grid{ display:grid; grid-template-columns:1fr; gap:48px; align-items:center; }
.sobre-media img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.sobre-values{ display:grid; gap:20px; margin-top:32px; }
.sobre-values strong{ display:block; font-family:var(--serif); font-size:1.1rem; margin-bottom:2px; }
.sobre-values span{ color:var(--ink-2); font-size:.95rem; }
@media (min-width:900px){
  .sobre-grid{ grid-template-columns:5fr 7fr; }
  .sobre-values{ grid-template-columns:repeat(3,1fr); }
}

/* cta band */
.cta-band{ background:var(--paper-2); padding:80px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.cta-band-inner{ text-align:left; display:flex; flex-direction:column; gap:20px; align-items:flex-start; }
.cta-band h2{ font-size:var(--t-2); max-width:20ch; }
.cta-band p{ color:var(--ink-2); }

/* contato */
.contato{ padding:112px 0; }
.contato-grid{ display:grid; grid-template-columns:1fr; gap:48px; }
.contato-list{ list-style:none; margin:0 0 40px; padding:0; display:grid; gap:18px; }
.contato-list strong{ display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-2); margin-bottom:2px; }
.contato-list a{ text-decoration:none; font-weight:600; }
.contato-list a:hover{ color:var(--accent); }

.contact-form{ display:grid; gap:16px; max-width:480px; }
.form-row{ display:grid; gap:6px; }
.form-row label{ font-size:.85rem; font-weight:600; }
.form-row input, .form-row textarea{ font:inherit; padding:12px 14px; border:1px solid var(--line); border-radius:2px; background:#fff; color:var(--ink); }
.form-row input:focus-visible, .form-row textarea:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.form-hint{ font-size:.8rem; color:var(--ink-2); margin:-4px 0 4px; }
.form-status{ font-size:.9rem; min-height:1.2em; }

.map-wrap{ aspect-ratio:4/5; background:var(--paper-2); border:1px solid var(--line); overflow:hidden; }
.map-wrap iframe{ width:100%; height:100%; border:0; }
@media (min-width:900px){ .contato-grid{ grid-template-columns:6fr 6fr; } .map-wrap{ aspect-ratio:auto; } }

/* whatsapp float */
.wa-float{ position:fixed; right:20px; bottom:20px; width:56px; height:56px; border-radius:50%; background:#25D366; display:grid; place-items:center; color:#fff; z-index:60; box-shadow:0 8px 24px rgba(0,0,0,.22); }
@media (prefers-reduced-motion: no-preference){ .wa-float{ animation: wa-pulse 2.4s ease-out infinite; } }
@keyframes wa-pulse{ 0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5); } 100%{ box-shadow:0 0 0 18px rgba(37,211,102,0); } }

/* cookie bar */
#cookie-bar{ position:fixed; left:16px; right:16px; bottom:16px; max-width:640px; margin:0 auto; background:var(--deep); color:var(--deep-text); border-radius:4px; padding:20px; z-index:120; box-shadow:0 12px 32px rgba(0,0,0,.25); }
#cookie-bar p{ margin:0 0 12px; font-size:.9rem; }
#cookie-bar a{ color:var(--accent); }
#cookie-bar div{ display:flex; gap:12px; }

/* footer */
.site-footer{ background:var(--deep); color:var(--deep-text); padding:80px 0 32px; }
.footer-grid{ display:grid; gap:40px; grid-template-columns:1fr; }
.footer-grid strong{ display:block; margin-bottom:12px; font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; color:var(--deep-text-2); }
.footer-grid p{ margin:0 0 8px; font-size:.92rem; }
.footer-grid a{ text-decoration:none; }
.footer-grid a:hover{ color:var(--accent); }
.logo-footer{ color:#fff; }
.footer-tagline{ color:var(--deep-text-2); margin-top:8px; }
.footer-legal{ color:var(--deep-text-2); font-size:.82rem; }
.footer-bottom{ margin-top:56px; padding-top:24px; border-top:1px solid var(--line-deep); font-size:.82rem; color:var(--deep-text-2); }
@media (min-width:900px){ .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; } }

/* reveal (JS-gated) */
.js .reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s ease-out, transform .7s ease-out; }
.js .reveal.in-view{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
  .wa-float{ animation:none; }
}

/* scroll-margin for anchors */
#servicos, #portfolio, #sobre, #contato{ scroll-margin-top: var(--header-h); }