/* ==========================================================================
   Midmark Studio — stylesheet
   Referência: "SITE - MIDMARK - PROTÓTIPO". Todos os tamanhos, espaços e
   cores vêm dos tokens abaixo; não use valores avulsos.
   ========================================================================== */

/* ---- Fonte self-hosted ----
   Fonte do cliente: Sora (OFL, variável 100–800), em
   "SITE MIDMARK - ASSETS/FONTE". Subconjunto Latin (cobre o português)
   convertido para woff2 com fontTools. */
@font-face{
  font-family:"Sora";
  src:url("../assets/fonts/sora-latin-var.woff2") format("woff2");
  font-weight:100 800;
  font-style:normal;
  font-display:swap;
}
/* Fallback com métricas ajustadas para a troca de fonte não mexer no layout */
@font-face{
  font-family:"Sora Fallback";
  src:local("Arial"), local("Helvetica");
  size-adjust:112.62%;
  ascent-override:86.13%;
  descent-override:25.75%;
  line-gap-override:0%;
}

:root{
  /* Cor — só tokens da marca */
  --c-bg:        #0a0a0a;
  --c-bg-2:      #0f0f10;
  --c-surface:   #1d2023;
  --c-line:      #262628;
  --c-white:     #ffffff;
  --c-text:      #f5f5f6;
  --c-muted:     #a6a6ad;   /* 8.3:1 sobre --c-bg */
  --c-dim:       #8c8c94;   /* 5.9:1 sobre --c-bg */
  --c-ghost:     #161617;   /* wordmark de fundo */
  --c-ghost-line:#232325;   /* contorno do wordmark do rodapé */
  --c-black:     #000000;   /* fundo do hero (arco) */
  --c-accent:    #918bff;   /* roxo do logotipo — 6.9:1 sobre --c-bg */
  --c-on-light:  #0a0a0a;
  --c-scrim:     rgba(10,10,10,.62);   /* véu do CTA */
  --c-veil:      rgba(10,10,10,.5);    /* véu do slide de projeto (arte aprovada ≈ 50% de brilho) */
  --c-veil-0:    rgba(10,10,10,0);     /* início do gradiente da legenda */
  --c-veil-deep: rgba(10,10,10,.85);   /* fim do gradiente da legenda */
  --c-accent-tint:#e9e8ff;             /* hover do botão branco */

  /* Tipografia */
  --font: "Sora", "Sora Fallback", system-ui, sans-serif;

  --fs-xs:   .75rem;                                  /* 12 — rótulos */
  --fs-sm:   .875rem;                                 /* 14 — nav, legendas */
  --fs-base: 1rem;                                    /* 16 — corpo */
  --fs-md:   1.125rem;                                /* 18 — corpo grande */
  --fs-lg:   clamp(1.375rem, 1.1rem + .9vw, 1.75rem); /* 22→28 — títulos de card */
  --fs-xl:   clamp(2rem, 1.3rem + 2.4vw, 3rem);       /* 32→48 — títulos de seção */
  --fs-2xl:  clamp(2.125rem, 1.2rem + 3.4vw, 3.5rem); /* 34→56 — hero, CTA */
  --fs-display: 22vw;                                 /* wordmark de fundo */

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-body:  1.65;

  --ls-tight: -.03em;
  --ls-head:  .01em;
  --ls-nav:   .06em;
  --ls-btn:   .04em;
  --ls-label: .3em;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* Espaçamento — escala única */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  --gutter: clamp(var(--sp-4), 7.5vw, 125px);
  --container: 1280px;
  --header-h: 88px;

  --radius-sm: 12px;
  --radius:    18px;
  --radius-pill: 999px;

  /* Movimento */
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 300ms;
  --dur:      450ms;
  --dur-slow: 700ms;
  --lift: calc(-1 * var(--sp-1) / 2); /* elevação no hover (2px) */
}

/* ---- Base ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:var(--header-h); -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-text);
  font-family:var(--font);
  font-size:var(--fs-base);
  font-weight:var(--fw-regular);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
picture{ display:contents; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:var(--fw-light); line-height:var(--lh-snug); }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
section{ position:relative; }

:focus-visible{
  outline:2px solid var(--c-accent);
  outline-offset:3px;
  border-radius:var(--sp-1);
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:var(--sp-4); top:var(--sp-4); z-index:200;
  padding:var(--sp-3) var(--sp-5);
  background:var(--c-white); color:var(--c-on-light);
  border-radius:var(--radius-pill);
  font-size:var(--fs-sm); font-weight:var(--fw-bold);
  transform:translateY(-200%);
}
.skip-link:focus-visible{ transform:none; }

.u{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.16em;
}

.section-title{
  font-size:var(--fs-xl);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-head);
  text-transform:uppercase;
}

/* ---- Botões ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:308px;
  padding:var(--sp-5) var(--sp-7);
  border-radius:var(--radius-pill);
  background:var(--c-white);
  color:var(--c-on-light);
  font-size:var(--fs-base);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-btn);
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
  transition:background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:hover,
.btn:focus-visible{ background:var(--c-accent-tint); transform:translateY(var(--lift)); }
.btn:active{ transform:none; transition-duration:var(--dur-fast); }
.btn--center{ display:flex; width:max-content; margin:var(--sp-5) auto 0; }

.round-arrow{
  flex:none;
  width:var(--sp-6); height:var(--sp-6);
  display:grid; place-items:center;
  padding:0; border:0; border-radius:50%;
  background:var(--c-white); color:var(--c-on-light);
  transition:background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.round-arrow:hover,
.round-arrow:focus-visible{ background:var(--c-accent); transform:translateY(var(--lift)); }
.round-arrow:active{ transform:none; }
.round-arrow:disabled{ opacity:.35; cursor:default; background:var(--c-white); transform:none; }

/* ---- Entrada ao rolar (só opacity/transform; sem JS tudo fica visível) ---- */
.js .reveal{
  opacity:0;
  transform:translateY(var(--sp-5));
  transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay:calc(var(--i, 0) * 80ms);
}
.js .reveal.is-in{ opacity:1; transform:none; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
/* Some ao rolar para baixo (o projeto fica em tela cheia) e volta ao rolar para cima */
.site-header.is-hidden{ transform:translateY(-100%); }
.site-header.is-scrolled{ background:var(--c-bg); }
.header-inner{
  position:relative;
  max-width:var(--container);
  margin:0 auto;
  height:var(--header-h);
  padding:0 var(--gutter);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:var(--sp-5);
}
.nav-side{
  display:flex; gap:var(--sp-8);
  font-size:var(--fs-sm);
  letter-spacing:var(--ls-nav);
  text-transform:uppercase;
}
.nav-side a{ position:relative; padding:var(--sp-2) 0; transition:color var(--dur-fast) var(--ease-out); }
.nav-side a:hover{ color:var(--c-accent); }
.nav-side a::after{
  content:""; position:absolute; left:0; right:0; bottom:var(--sp-1);
  height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur) var(--ease-out);
}
.nav-side a:hover::after,
.nav-side a:focus-visible::after{ transform:scaleX(1); }
.menu-mobile a{ transition:color var(--dur-fast) var(--ease-out); }
.menu-mobile a:hover{ color:var(--c-accent); }
.nav-left{ justify-self:start; }
.nav-right{ justify-self:end; }
.logo{ justify-self:center; }
.logo img{ height:var(--sp-6); width:auto; }
.header-sun{
  position:absolute; right:calc(var(--gutter) - var(--sp-8)); top:50%;
  transform:translateY(-50%);
  color:var(--c-accent);
}

.nav-burger{
  display:none;
  position:absolute; right:var(--gutter); top:50%;
  width:var(--sp-7); height:var(--sp-7);
  margin-right:calc(-1 * var(--sp-3));
  transform:translateY(-50%);
  padding:var(--sp-3);
  background:none; border:0;
  flex-direction:column; justify-content:space-between;
}
.nav-burger span{
  display:block; height:2px; width:100%;
  background:var(--c-white); border-radius:2px;
  transition:transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.site-header.is-open .nav-burger span:nth-child(1){ transform:translateY(10px) rotate(45deg); }
.site-header.is-open .nav-burger span:nth-child(2){ opacity:0; }
.site-header.is-open .nav-burger span:nth-child(3){ transform:translateY(-10px) rotate(-45deg); }

.menu-mobile{
  display:none;
  flex-direction:column;
  padding:0 var(--gutter) var(--sp-5);
  background:var(--c-bg);
}
.menu-mobile a{
  padding:var(--sp-4) 0;
  border-bottom:1px solid var(--c-line);
  font-size:var(--fs-sm);
  letter-spacing:var(--ls-nav);
  text-transform:uppercase;
}
.site-header.is-open{ background:var(--c-bg); }
.site-header.is-open .menu-mobile{ display:flex; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  isolation:isolate;
  background:var(--c-black); /* mesmo preto do arco enviado pelo cliente */
}
.hero-arc{
  position:absolute; z-index:-1;
  left:50%; top:calc(var(--header-h) + var(--sp-5));
  width:max(130vw, 820px); max-width:none; height:auto;
  transform:translateX(-50%);
}
.hero-title{
  margin-top:calc(-1 * var(--sp-10));
  padding:0 var(--sp-4);
  text-align:center;
  font-size:var(--fs-2xl);
  font-weight:var(--fw-light);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-head);
  text-transform:uppercase;
}
.hero-title{ font-size:min(var(--fs-2xl), 6.4vw); }
.hero-title > span{ display:block; }
.hero-title .l2{ white-space:nowrap; } /* "Design & Estratégia" sempre juntos */
.hero-title .u{ text-decoration-thickness:2px; text-underline-offset:.12em; }
.hero-wordmark,
.footer-wordmark{
  text-align:center; white-space:nowrap;
  font-size:var(--fs-display);
  font-weight:var(--fw-light);
  line-height:1;
  letter-spacing:var(--ls-tight);
  color:var(--c-ghost);
  pointer-events:none; user-select:none;
}
.hero-wordmark{ position:absolute; z-index:-1; left:0; right:0; bottom:-6vw; mix-blend-mode:lighten; }
.hero-wordmark::before,
.footer-wordmark::before{ content:"Midmark"; }
/* Decorativo: o texto vem do CSS para ficar fora da árvore de acessibilidade */
.hero-wordmark::after,
.footer-wordmark::after{ content:"®"; font-size:.12em; vertical-align:top; position:relative; top:.6em; letter-spacing:0; }

/* ---- Projetos em tela cheia ---- */
.showcase{
  scroll-margin-top:calc(-1 * var(--header-h));
  height:100vh; height:100svh; min-height:560px;
  background:var(--c-bg);
  overflow:hidden;
}
.showcase:focus{ outline:none; }
.showcase-track{ position:absolute; inset:0; }
.showcase-slide{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity var(--dur-slow) var(--ease-inout), visibility 0s linear var(--dur-slow);
}
.showcase-slide.is-active{
  opacity:1; visibility:visible;
  transition:opacity var(--dur-slow) var(--ease-inout), visibility 0s;
}
.showcase-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.04);
  transition:transform var(--dur-slow) var(--ease-out);
}
.showcase-slide.is-active .showcase-bg{ transform:none; }
/* Foto provisória em baixa resolução: desfoca até chegar a definitiva */
.showcase-slide.is-lowres .showcase-bg{ filter:blur(7px); transform:scale(1.08); }
/* Véu uniforme, como na arte aprovada: a foto fica a ~50% para o título dominar */
.showcase-slide::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--c-veil);
}
.showcase-slide .showcase-tag,
.showcase-slide .btn{
  opacity:0; transform:translateY(var(--sp-3));
  transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.showcase-slide.is-active .showcase-tag,
.showcase-slide.is-active .btn{ opacity:1; transform:none; transition-delay:var(--dur-fast); }
.showcase-slide.is-active .btn{ transition-delay:calc(var(--dur-fast) + 80ms); }
.showcase-slide.is-active .btn:hover,
.showcase-slide.is-active .btn:focus-visible{ transform:translateY(var(--lift)); transition-delay:0s; }
.showcase-content{
  position:absolute; inset:0; z-index:2;
  display:grid;
  grid-template-rows:auto 1fr auto;
  justify-items:center; align-items:center;
  padding:clamp(var(--sp-7), 10vh, var(--sp-9)) var(--sp-5);
  text-align:center;
}
.showcase-tag{
  font-size:var(--fs-sm);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
}
.showcase-title{
  font-size:var(--fs-2xl);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-head);
  text-transform:uppercase;
}
.btn--lg{ padding-top:var(--sp-5); padding-bottom:var(--sp-5); }
.showcase-content .btn--lg{ grid-row:3; }  /* título do slide fica só para leitores de tela */
.showcase-arrow{ position:absolute; top:50%; z-index:3; margin-top:calc(-1 * var(--sp-4)); }
.showcase-arrow--prev{ left:clamp(var(--sp-3), 7.4vw, 95px); }
.showcase-arrow--next{ right:clamp(var(--sp-3), 7.4vw, 95px); }

/* ---- Galeria animada ---- */
.portfolio{
  display:flex; flex-direction:column; gap:var(--sp-3);
  padding-top:var(--sp-3);
  overflow:hidden;
}
.pf-row{ --h:clamp(200px, 17.5vw, 330px); overflow:hidden; }
.pf-track{ display:flex; width:max-content; }
.pf-row.is-animated .pf-track{ animation:pf-scroll var(--pf-dur, 80s) linear infinite; }
.portfolio:hover .pf-track,
.portfolio:focus-within .pf-track,
.is-motion-paused .pf-track{ animation-play-state:paused; }
@keyframes pf-scroll{ to{ transform:translateX(calc(-1 * var(--pf-shift, 50%))); } }
.pf-set{ display:flex; gap:var(--sp-3); padding-right:var(--sp-3); }
.pf-cell{
  position:relative; flex:none; margin:0;
  height:var(--h);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--c-surface);
}
.pf-cell.w-narrow{ aspect-ratio:429/348; }
.pf-cell.w-wide{ aspect-ratio:504/349; }
.pf-cell.w-slim{ aspect-ratio:168/349; }
.pf-cell img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform var(--dur-slow) var(--ease-out);
}
.pf-cell::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--c-veil-0) 40%, var(--c-veil-deep) 100%);
  opacity:0; transition:opacity var(--dur) var(--ease-out);
}
.pf-cell figcaption{
  position:absolute; left:var(--sp-4); right:var(--sp-4); bottom:var(--sp-4); z-index:2;
  opacity:0; transform:translateY(var(--sp-3));
  transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.pf-cell figcaption span{ display:block; font-size:var(--fs-sm); font-weight:var(--fw-bold); line-height:var(--lh-snug); }
.pf-cell figcaption small{ display:block; font-size:var(--fs-xs); color:var(--c-muted); }
.pf-cell:hover img,
.pf-cell:focus-within img{ transform:scale(1.06); }
.pf-cell:hover::after,
.pf-cell:focus-within::after,
.pf-cell:hover figcaption,
.pf-cell:focus-within figcaption{ opacity:1; transform:none; }
.w-slim figcaption{ display:none; }

.motion-toggle{
  align-self:flex-end;
  display:inline-flex; align-items:center; gap:var(--sp-2);
  margin-right:var(--gutter);
  padding:var(--sp-2) var(--sp-3);
  background:none; border:0;
  font-size:var(--fs-xs);
  letter-spacing:var(--ls-nav);
  text-transform:uppercase;
  color:var(--c-dim);
  transition:color var(--dur-fast) var(--ease-out);
}
.motion-toggle:hover,
.motion-toggle:focus-visible{ color:var(--c-text); }
.motion-toggle .i-play,
.is-motion-paused .motion-toggle .i-pause{ display:none; }
.is-motion-paused .motion-toggle .i-play{ display:block; }

/* ==========================================================================
   SOBRE
   ========================================================================== */
.about{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  margin-top:var(--sp-3);
}
.about-text{
  padding:var(--sp-9) var(--sp-9) var(--sp-9) var(--gutter);
  max-width:calc(var(--container) / 2);
  justify-self:end;
  width:100%;
}
.about-text h2{
  font-size:var(--fs-xl);
  line-height:var(--lh-tight);
  margin-bottom:var(--sp-6);
}
.about-text p{
  color:var(--c-muted);
  font-size:var(--fs-md);
  font-weight:var(--fw-light);
  line-height:var(--lh-body);
  text-align:justify;
  hyphens:auto;
}
.about-text p + p{ margin-top:var(--sp-6); }
.about-photo{ width:100%; aspect-ratio:8/9; overflow:hidden; }
.about-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; }

/* ==========================================================================
   METODOLOGIA
   ========================================================================== */
.methodology,
.services,
.faq{
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
.methodology{ padding-top:var(--sp-10); padding-bottom:var(--sp-9); }
.methodology .section-title{ margin-bottom:var(--sp-8); }

.steps-bar{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  margin-bottom:var(--sp-10);
}
.step-tab{
  display:flex; flex-direction:column; gap:var(--sp-4);
  padding:var(--sp-2) 0;
  background:none; border:0;
  text-align:left;
  font-size:var(--fs-md);
  color:var(--c-dim);
  transition:color var(--dur-fast) var(--ease-out);
}
.step-tab:nth-child(2){ margin-top:var(--sp-9); }
.step-tab:nth-child(3){ margin-top:calc(var(--sp-9) * 2); }
.step-tab:nth-child(4){ margin-top:calc(var(--sp-9) * 3); }
.step-num{ color:inherit; transition:color var(--dur-fast) var(--ease-out); }
.step-track{ display:block; height:var(--sp-2); background:var(--c-line); overflow:hidden; }
.step-fill{
  display:block; height:100%;
  background:var(--c-accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-slow) var(--ease-out);
}
.step-tab:hover,
.step-tab:focus-visible,
.step-tab.is-done{ color:var(--c-muted); }
.step-tab:hover .step-fill{ transform:scaleX(.12); }
.step-tab.is-active{ color:var(--c-text); }
.step-tab.is-active .step-num,
.step-tab.is-done .step-num{ color:var(--c-accent); }
.step-tab.is-active .step-fill,
.step-tab.is-done .step-fill{ transform:none; }

.step-panel{ outline-offset:var(--sp-3); }
.step-panel.is-active{ animation:fade-up var(--dur) var(--ease-out); }
@keyframes fade-up{ from{ opacity:0; transform:translateY(var(--sp-3)); } }
.step-panel h3{
  margin-bottom:var(--sp-7);
  font-size:var(--fs-xl);
  line-height:var(--lh-tight);
  text-transform:uppercase;
}
.step-h-num{ color:var(--c-accent); text-decoration:underline 2px; text-underline-offset:.14em; }
.step-h-name{ text-decoration:underline 2px; text-underline-offset:.14em; }
.step-item{ padding:var(--sp-6) 0; border-bottom:1px solid var(--c-line); }
.step-item h4{ margin-bottom:var(--sp-2); font-size:var(--fs-md); font-weight:var(--fw-bold); }
.step-item p{ max-width:72ch; color:var(--c-muted); font-weight:var(--fw-light); }

/* ==========================================================================
   SERVIÇOS
   ========================================================================== */
.services{ padding-top:var(--sp-9); padding-bottom:var(--sp-10); }
.services .section-title{ text-align:center; margin-bottom:var(--sp-7); }
.services-carousel{
  display:flex; align-items:center; gap:var(--sp-5);
  margin:0 calc(-1 * var(--sp-6));
}
.services-track{
  flex:1;
  display:flex; gap:var(--sp-4);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  border-radius:var(--radius);
}
.services-track::-webkit-scrollbar{ display:none; }
.service-card{
  scroll-snap-align:start;
  flex:0 0 calc((100% - 2 * var(--sp-4)) / 3);
  min-height:425px;
  display:flex; flex-direction:column;
  padding:var(--sp-8) var(--sp-6) var(--sp-6);
  background:var(--c-surface);
  border-radius:var(--radius);
  transition:transform var(--dur) var(--ease-out);
}
.service-card:hover{ transform:translateY(calc(-1 * var(--sp-1))); }
.service-icon{ transition:transform var(--dur) var(--ease-out); }
.service-card:hover .service-icon{ transform:translateY(var(--lift)); }
.service-icon{ width:72px; height:72px; margin:0 auto; color:var(--c-accent); }
.service-card h3{ margin:var(--sp-9) 0 var(--sp-3); font-size:var(--fs-lg); line-height:var(--lh-snug); }
.service-card p{ color:var(--c-muted); font-weight:var(--fw-light); line-height:var(--lh-body); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ padding-bottom:var(--sp-10); }
.faq .section-title{ margin-bottom:var(--sp-6); }
.faq-item{ border-bottom:1px solid var(--c-line); }
.faq-h{ font-size:inherit; }
.faq-question{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5);
  padding:var(--sp-4) 0;
  background:none; border:0;
  font-size:var(--fs-md);
  font-weight:var(--fw-bold);
  text-align:left;
  transition:color var(--dur-fast) var(--ease-out);
}
.faq-question:hover{ color:var(--c-accent); }
.faq-question:hover .faq-chevron{ color:var(--c-accent); }
.faq-chevron{ flex:none; color:var(--c-dim); transition:transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
.faq-item.is-active .faq-chevron{ transform:rotate(180deg); color:var(--c-accent); }
.faq-answer{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows var(--dur) var(--ease-out);
}
.faq-answer > div{ overflow:hidden; }
.faq-item.is-active .faq-answer{ grid-template-rows:1fr; }
.faq-answer p{
  max-width:64ch;
  padding-bottom:var(--sp-5);
  color:var(--c-muted);
  font-weight:var(--fw-light);
}

/* ==========================================================================
   CTA
   ========================================================================== */
.cta{
  scroll-margin-top:calc(-1 * var(--header-h));
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  isolation:isolate;
}
.cta-bg{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.cta::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--c-scrim); }
.cta-content{
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-7);
  padding:var(--sp-7) var(--sp-5);
  text-align:center;
}
.cta-content h2{
  font-size:var(--fs-2xl);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-head);
  text-transform:uppercase;
}
.cta-content .hl{ color:var(--c-accent); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  padding-top:var(--sp-8);
  background:var(--c-bg);
  overflow:hidden;
}
.marquee-label{
  margin-bottom:var(--sp-7);
  padding:0 var(--gutter);
  text-align:center;
  font-size:var(--fs-sm);
  font-weight:var(--fw-regular);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
}
.marquee{
  display:flex; align-items:center;
  padding-bottom:var(--sp-8);
  border-bottom:1px solid var(--c-line);
  overflow:hidden;
}
.marquee-track{
  flex:none;
  display:flex; align-items:center; gap:var(--sp-8);
  padding-right:var(--sp-8);
  animation:marquee 60s linear infinite;
}
.marquee:hover .marquee-track,
.is-motion-paused .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-100%); } }
.brand-img{ flex:none; width:auto; height:28px; filter:brightness(0) invert(1); }
.brand-img--thin{ height:20px; }

.footer-main{
  max-width:var(--container);
  margin:0 auto;
  padding:var(--sp-9) var(--gutter) var(--sp-5);
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-5);
  flex-wrap:wrap;
}
.footer-contact{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-3); font-size:var(--fs-md); font-weight:var(--fw-light); }
.footer-contact > a{ transition:color var(--dur-fast) var(--ease-out); }
.footer-contact > a:hover,
.footer-contact > a:focus-visible{ color:var(--c-accent); }
.footer-social{ display:flex; gap:var(--sp-2); margin-top:var(--sp-4); }
.footer-social a{
  width:var(--sp-6); height:var(--sp-6);
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--c-white); color:var(--c-on-light);
  transition:background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.footer-social a:hover,
.footer-social a:focus-visible{ background:var(--c-accent); transform:translateY(var(--lift)); }
.footer-copy{ font-size:var(--fs-md); font-weight:var(--fw-light); }
.footer-legal{ display:flex; flex-direction:column; align-items:flex-end; gap:var(--sp-1); text-align:right; }
.footer-mark{ font-size:var(--fs-sm); font-weight:var(--fw-light); color:var(--c-muted); }

.footer-wordmark{
  margin-top:calc(-1 * var(--sp-2));
  margin-bottom:-5vw;
  line-height:.9;
  color:var(--c-bg-2);
  -webkit-text-stroke:1px var(--c-ghost-line);
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width:1180px){
  .nav-side{ gap:var(--sp-5); }
  .header-sun{ display:none; }
}

@media (max-width:1100px){
  .nav-side{ display:none; }
  .nav-burger{ display:flex; }
  .header-inner{ grid-template-columns:auto 1fr; }
  .logo{ justify-self:start; }
}

@media (max-width:920px){
  .about{ grid-template-columns:1fr; }
  .about-text{ max-width:none; padding:var(--sp-9) var(--gutter) var(--sp-7); }
  .about-photo{ aspect-ratio:1; }
  .steps-bar{ grid-template-columns:1fr 1fr; gap:var(--sp-5) var(--sp-5); margin-bottom:var(--sp-8); }
  .step-tab:nth-child(n){ margin-top:0; }
  .service-card{ flex-basis:calc((100% - var(--sp-4)) / 2); }
}

@media (max-width:760px){
  :root{ --header-h:72px; }
  .nav-side{ display:none; }
  .nav-burger{ display:flex; }
  .header-inner{ grid-template-columns:auto 1fr; }
  .logo{ justify-self:start; }
  .logo img{ height:var(--sp-5); }

  .hero-title{ margin-top:0; }
  .showcase-arrow--prev{ left:var(--sp-3); }
  .showcase-arrow--next{ right:var(--sp-3); }
  .showcase-title{ padding:0 var(--sp-7); }
  .btn{ min-width:0; padding:var(--sp-4) var(--sp-6); font-size:var(--fs-sm); }

  .pf-cell figcaption{ opacity:1; transform:none; }
  .pf-cell::after{ opacity:1; }

  .about-text p{ text-align:left; font-size:var(--fs-base); }
  .methodology{ padding-top:var(--sp-9); padding-bottom:var(--sp-7); }
  .services{ padding-top:var(--sp-7); padding-bottom:var(--sp-9); }
  .faq{ padding-bottom:var(--sp-9); }
  .marquee-label{ letter-spacing:var(--ls-nav); }
  .step-tab{ font-size:var(--fs-base); }
  .services-carousel{ margin:0; gap:var(--sp-3); }
  .carousel-arrow{ display:none; }
  .service-card{ flex-basis:82%; min-height:0; padding:var(--sp-7) var(--sp-5) var(--sp-5); }
  .service-icon{ width:56px; height:56px; }
  .service-card h3{ margin-top:var(--sp-6); }
  .faq-question{ font-size:var(--fs-base); }

  .footer-main{ flex-direction:column; align-items:flex-start; padding-top:var(--sp-8); }
  .footer-copy{ font-size:var(--fs-sm); }
  .footer-legal{ align-items:flex-start; text-align:left; }
  .footer-mark{ font-size:var(--fs-xs); }
  .brand-img{ height:22px; }
  .brand-img--thin{ height:16px; }
}

/* ==========================================================================
   MOVIMENTO REDUZIDO
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important;
  }
  .services-track{ scroll-behavior:auto; }
  .pf-row{ overflow-x:auto; scrollbar-width:none; }
  .pf-row::-webkit-scrollbar{ display:none; }
  .pf-row .pf-track,
  .marquee-track{ animation:none !important; }
  .marquee{ overflow-x:auto; scrollbar-width:none; }
  .motion-toggle{ display:none; }
  .js .reveal{ opacity:1; transform:none; transition:none; }
  .showcase-bg{ transform:none; }
  .service-card:hover,
  .btn:hover,
  .round-arrow:hover,
  .footer-social a:hover{ transform:none; }
}