/* =========================================================
   Lucas Lorencon — design system do site
   Direcao: capa editorial azul.
   Vale para index.html, cases.html e as paginas de case (ex.: pepyfi.html).
   Estiliza tambem as classes que js/main.js gera (.case-card,
   .cover, .chip, .service__art, .step__icon, .reveal).
   ========================================================= */

:root{
  --paper:     #f0efed;   /* cinza claro da referencia */
  --paper-2:   #e6e5e2;   /* placas e faixas recuadas */
  --white:     #ffffff;   /* cards */
  --ink:       #14171a;
  --ink-soft:  #4a5057;
  --muted:     #8b9198;
  --blue:      #2f5cff;   /* o azul da referencia: unico acento */
  --blue-deep: #1c3ecc;
  --blue-pale: #dde4ff;
  --line:      rgba(20,23,26,.12);
  --line-soft: rgba(20,23,26,.07);
  --on-blue:   #f2f5ff;

  --radius: 10px;         /* cantos: um numero so para a pagina inteira */

  /* texto sobre a foto da capa. Fica no :root, e nao em .hero, porque a nav
     tambem usa estas cores e ela nao e filha do hero — declaradas la, a
     variavel chegaria vazia na nav e a cor cairia para o escuro. */
  --hero-ink:      #f4f6fa;
  --hero-ink-soft: rgba(244,246,250,.82);

  --wrap: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);

  --font-display:'Anton', Impact, 'Arial Narrow', sans-serif;
  --font-body:'Karla', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:88px; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

/* o raio aqui e o que arredonda o anel de foco. Fica antes de .btn e .chip de
   proposito: as duas regras tem a mesma especificidade, entao a pilula vence
   e nao vira um retangulo de 10px quando recebe foco. */
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:var(--radius); }

.skip-link{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--blue); color:var(--on-blue); padding:12px 18px; border-radius:var(--radius); }
.skip-link:focus{ left:12px; top:12px; }

/* Presente no DOM (Google/leitor de tela leem), mas sem ocupar espaco visual —
   usado quando o H1 precisa de um texto real por baixo de uma logo em imagem. */
.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; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:28px; }

/* ---------- tipografia ---------- */
.lead{ font-size:1.06rem; color:var(--ink-soft); max-width:58ch; margin:16px 0 0; }

/* ---------- botoes ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:15px 28px; border-radius:999px;
  font-family:var(--font-body); font-size:.9rem; font-weight:600; letter-spacing:.01em;
  text-decoration:none; cursor:pointer;
  background:var(--ink); color:var(--paper);
  border:1px solid var(--ink);
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover{ background:var(--blue); border-color:var(--blue); color:var(--on-blue); transform:translateY(-2px); }
.btn--sm{ padding:10px 20px; font-size:.82rem; }
.btn--block{ width:100%; justify-content:center; }
/* dentro da secao azul, o botao inverte */
.btn--on-blue{ background:var(--white); color:var(--blue); border-color:var(--white); }
.btn--on-blue:hover{ background:var(--ink); border-color:var(--ink); color:var(--white); }

.arrow{
  display:inline-block; margin-top:20px;
  font-size:.88rem; font-weight:600; text-decoration:none; color:var(--blue);
  border-bottom:1px solid currentColor; padding-bottom:3px;
  transition:color .2s var(--ease);
}
.arrow:hover{ color:var(--ink); }

/* =========================================================
   NAV — links a esquerda, assinatura no centro, acoes a direita
   ========================================================= */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.nav__inner{
  max-width:var(--wrap); margin-inline:auto; padding:14px 28px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px;
}

.nav__burger{ display:none; grid-column:1; justify-self:start; background:none; border:0; cursor:pointer; padding:8px 2px; }
.nav__burger span{ display:block; width:24px; height:2px; background:var(--ink); margin:6px 0; border-radius:999px; }

.nav__links{ grid-column:1; justify-self:start; display:flex; align-items:center; gap:26px; }
.nav__links a{
  font-size:.86rem; font-weight:600; text-decoration:none; color:var(--ink);
  padding-bottom:2px; border-bottom:1px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.nav__links a:hover{ color:var(--blue); border-bottom-color:var(--blue); }

.nav__brand{ grid-column:2; justify-self:center; display:flex; align-items:center; }
.nav__logo{ height:40px; width:auto; }

.nav__tools{ grid-column:3; justify-self:end; display:flex; align-items:center; gap:16px; }
.lang{ display:flex; align-items:center; gap:6px; font-size:.8rem; font-weight:600; color:var(--muted); }
.lang__btn{ background:none; border:0; padding:2px 1px; cursor:pointer; font:inherit; color:var(--muted); border-bottom:1px solid transparent; text-decoration:none; }
.lang__btn.is-active{ color:var(--ink); border-bottom-color:var(--blue); cursor:default; }
.lang__sep{ opacity:.45; }

.nav.is-scrolled,
.nav.is-solid{ background:rgba(240,239,237,.9); backdrop-filter:blur(12px); border-bottom-color:var(--line-soft); }

/* =========================================================
   HERO — a capa sobre a foto
   ---------------------------------------------------------
   A foto tem tres faixas de luz muito diferentes: ceu claro em cima, neve
   brilhante no meio e mata escura embaixo. Nenhuma cor de texto funciona nas
   tres. Por isso o contraste aqui NAO depende do que esta atras: a imagem e
   escurecida por inteiro e um veu em degrade fecha ainda mais justamente nas
   faixas onde ha texto. O texto e sempre claro, e a conta fecha em qualquer
   ponto da foto.

   Dois numeros para afinar:
   --hero-dim   brilho da foto (menor = foto mais escura, texto mais legivel)
   --hero-veil  forca do veu por cima (0 tira o veu, 1 e o valor de projeto)
   ========================================================= */
.hero{
  --hero-dim: .86;
  --hero-veil: 1;

  position:relative; overflow:hidden;
  min-height:100svh;
  display:flex; align-items:center;
  padding:126px 0 40px;
  background:#070c1a;                      /* pinta antes de a foto carregar */
  color:var(--hero-ink);
}

/* --- a foto, camada do paralaxe --- */
/* O caminho vem do data-bg, que js/main.js aplica.
   `top:-38%` e a folga que o paralaxe consome — a camada anda mais devagar que
   a pagina, e sem essa sobra apareceria um vazio. A folga fica em cima, e nao
   embaixo, por enquadramento: jogada para baixo, a capa mostraria so o ceu e
   cortaria a mata e a agua, que sao a parte bonita e a parte escura da foto.
   Se mudar a velocidade em js/effects.js, acerte esta porcentagem junto. */
.hero__media{
  position:absolute; inset:-38% 0 0 0; z-index:0;
  background-size:cover;
  filter:grayscale(1) brightness(var(--hero-dim)) contrast(1.06);
  will-change:transform;
}

/* --- o veu que garante o contraste --- */
/* Sao duas camadas, e cada uma resolve um problema diferente:

   1. a elipse, primeiro na lista e portanto por cima, escurece so a area atras
      do logotipo. E ela que resolve o caso dificil: a metade de cima da foto e
      ceu claro, e um logotipo claro sobre ceu claro nao tem contraste nenhum.
      Escurecer a foto inteira ate salvar essa faixa apagaria a serra.

   2. o degrade vertical fecha o topo (onde fica a nav) e sobretudo a metade de
      baixo, onde ficam o texto de apoio, o botao e o indicador de rolagem —
      texto pequeno, que precisa da margem de contraste maior. */
.hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(
      ellipse 64% 32% at 50% 42%,
      rgba(7,12,26,calc(.66 * var(--hero-veil))) 0%,
      rgba(7,12,26,calc(.42 * var(--hero-veil))) 58%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      rgba(7,12,26,calc(.72 * var(--hero-veil))) 0%,
      rgba(7,12,26,calc(.40 * var(--hero-veil))) 30%,
      rgba(7,12,26,calc(.20 * var(--hero-veil))) 52%,
      rgba(7,12,26,calc(.74 * var(--hero-veil))) 72%,
      rgba(7,12,26,calc(.90 * var(--hero-veil))) 100%
    );
}

.hero__inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; }

.hero__eyebrow{
  margin:0 0 clamp(22px, 3.4vw, 40px);
  font-size:.72rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--hero-ink-soft);
}

/* --- a marca --- */
/* O logotipo cursivo e o elemento da capa. Vem do SVG claro (fill #f4f4f1),
   que ja e a cor certa para fundo escuro — nao precisa de filtro.
   A sombra e discreta e existe so para o traco fino nao sumir quando cai
   sobre a neve, que e a parte mais clara da foto. */
.hero__mark{
  margin:0; width:100%; display:flex; justify-content:center;
}
.hero__mark img{
  width:min(78vw, 60vh, 760px); height:auto;
  filter:drop-shadow(0 2px 26px rgba(4,7,16,.55));
}

.hero__spark{ display:block; margin:clamp(22px,3.2vw,36px) 0 clamp(18px,2.6vw,26px); color:var(--blue); }
.hero__spark svg{ width:28px; height:28px; display:block; filter:drop-shadow(0 1px 10px rgba(4,7,16,.6)); }

.hero__intro{
  margin:0; max-width:44ch;
  font-size:clamp(1rem,1.4vw,1.14rem); line-height:1.75;
  color:var(--hero-ink-soft);
}

.hero__actions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 24px; margin-top:clamp(26px,3.4vw,38px); }

/* o botao da capa e azul: sobre a foto escura, o preto do .btn sumiria */
.btn--hero{ background:var(--blue); border-color:var(--blue); color:#fff; }
.btn--hero:hover{ background:#fff; border-color:#fff; color:var(--ink); }

.status{ display:inline-flex; align-items:center; gap:10px; margin:0; font-size:.84rem; font-weight:600; color:var(--hero-ink-soft); }
.status__dot{ position:relative; width:8px; height:8px; border-radius:50%; background:var(--blue); flex:0 0 auto; }
.status__dot::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid var(--blue); opacity:0;
  animation:pulse-ring 2.8s var(--ease) infinite;
}
@keyframes pulse-ring{
  0%{ transform:scale(.6); opacity:.6; }
  70%,100%{ transform:scale(1.6); opacity:0; }
}

.hero__scroll{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  margin-top:clamp(26px,3.4vw,42px);
  text-decoration:none; color:rgba(244,246,250,.62);
  font-size:.66rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  transition:color .2s var(--ease);
}
.hero__scroll-line{ width:2px; height:28px; background:var(--blue); border-radius:999px; transform-origin:top; animation:scroll-hint 2.4s var(--ease) infinite; }
.hero__scroll:hover{ color:var(--hero-ink); }
@keyframes scroll-hint{
  0%,100%{ transform:scaleY(.3); opacity:.4; }
  50%    { transform:scaleY(1);  opacity:1; }
}

/* --- a nav enquanto esta sobre a foto --- */
/* Só o estado inicial muda. Assim que a pagina rola, .is-scrolled assume e a
   nav volta a ser exatamente a mesma do resto do site. */
.nav:not(.is-solid):not(.is-scrolled) .nav__links a{ color:var(--hero-ink); }
.nav:not(.is-solid):not(.is-scrolled) .nav__links a:hover{ color:#fff; border-bottom-color:var(--blue); }
.nav:not(.is-solid):not(.is-scrolled) .nav__logo{ filter:invert(1) brightness(1.7); }
.nav:not(.is-solid):not(.is-scrolled) .lang,
.nav:not(.is-solid):not(.is-scrolled) .lang__btn{ color:rgba(244,246,250,.62); }
.nav:not(.is-solid):not(.is-scrolled) .lang__btn.is-active{ color:#fff; border-bottom-color:var(--blue); }
.nav:not(.is-solid):not(.is-scrolled) .nav__burger span{ background:var(--hero-ink); }
.nav:not(.is-solid):not(.is-scrolled) .nav__cta{ background:#fff; border-color:#fff; color:var(--ink); }
.nav:not(.is-solid):not(.is-scrolled) .nav__cta:hover{ background:var(--blue); border-color:var(--blue); color:#fff; }
/* =========================================================
   SECOES
   ========================================================= */
.sec{ padding-block:clamp(76px, 9vw, 128px); }
.sec--alt{ background:var(--paper-2); }
.sec--blue{ background:var(--blue); color:var(--on-blue); }

/* o rotulo da secao em Anton azul e o marcador de estrutura da pagina */
.sec__label{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  color:var(--blue); font-size:clamp(1.4rem, 2.4vw, 2rem); line-height:1;
  letter-spacing:.01em; margin:0 0 22px;
}
.sec--blue .sec__label{ color:var(--on-blue); }

.sec__head{ max-width:820px; margin-bottom:clamp(38px,5vw,58px); }
.sec__head--row{ display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:24px; max-width:none; }
.sec__title{
  font-size:clamp(1.75rem, 3.3vw, 2.7rem); font-weight:700; line-height:1.14;
  letter-spacing:-.02em; margin:0; max-width:22ch;
}
.sec--blue .sec__title{ color:var(--white); }
.sec--blue .lead{ color:rgba(242,245,255,.8); }

/* =========================================================
   PROVA
   ========================================================= */
.proof{ background:var(--ink); color:var(--paper); padding-block:26px; }

/* faixa de marcas em loop continuo (direita -> esquerda) */
.proof__marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.proof__track{
  display:flex; width:max-content;
  animation:proof-slide 46s linear infinite;
}
.proof__marquee:hover .proof__track,
.proof__marquee:focus-within .proof__track{ animation-play-state:paused; }

.proof__group{
  list-style:none; margin:0; padding:0 34px 0 0;
  display:flex; align-items:center; gap:34px;
}
.proof__item{ display:flex; align-items:center; }
.proof__item img{ display:block; width:auto; height:var(--logo-h, 26px); }
.proof__star{ display:flex; align-items:center; color:var(--blue); font-size:.9rem; line-height:1; }
.proof__star::before{ content:"\2726"; }

/* alturas ajustadas para peso optico equivalente entre as marcas */
.proof__item--picpay{ --logo-h:21px; }
.proof__item--symppla{ --logo-h:21px; }
.proof__item--outbrain{ --logo-h:19px; }
.proof__item--cpb{ --logo-h:30px; }
.proof__item--bora-acai{ --logo-h:34px; }
.proof__item--ingresso-rapido{ --logo-h:24px; }
.proof__item--viga{ --logo-h:28px; }
.proof__item--arquitetura{ --logo-h:27px; }
.proof__item--quinto-andar{ --logo-h:20px; }

@keyframes proof-slide{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* =========================================================
   CASES (markup gerado em js/main.js)
   ========================================================= */
.cases-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:26px; }
.cases-grid--home .case-card--featured{ grid-column:1 / -1; }

.case-card{
  display:block; position:relative; text-decoration:none; color:inherit;
  background:var(--white); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.case-card:hover{ border-color:var(--blue); transform:translateY(-3px); }

/* Enquanto nao ha screenshot, js/main.js desenha um rotulo sobre um gradiente
   definido em js/cases.js — a v5 ignora esse gradiente e usa uma placa lisa:
   um placeholder deve parecer um placeholder. Com cover.img, .cover--photo
   assume e a foto entra normalmente. */
.cover{
  position:relative; aspect-ratio:16/10;
  display:grid; place-items:center;
  background:var(--paper-2);
  border-bottom:1px solid var(--line-soft);
  overflow:hidden;
}
.case-card--featured .cover{ aspect-ratio:21/9; }
.cover--photo{ border-bottom:0; }
.cover img{ width:100%; height:100%; object-fit:cover; }
.cover__label{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.1rem,2.2vw,1.7rem); letter-spacing:.02em; color:var(--blue);
  text-align:center; padding:0 18px;
}

.case-card__badge{
  position:absolute; top:14px; right:14px;
  width:34px; height:34px; display:grid; place-items:center;
  background:var(--white); color:var(--ink); border-radius:50%; font-size:.9rem;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.case-card:hover .case-card__badge{ background:var(--blue); color:var(--on-blue); }

.case-card__body{ padding:24px 26px 28px; }
.case-card__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.chip{
  font-size:.68rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--blue); background:var(--blue-pale); padding:4px 10px; border-radius:999px;
}
.case-card__title{ font-size:1.28rem; font-weight:700; line-height:1.22; letter-spacing:-.015em; margin:0 0 10px; }
.case-card--featured .case-card__title{ font-size:1.62rem; }
.case-card__resumo{ margin:0; color:var(--ink-soft); font-size:.95rem; max-width:62ch; }

/* =========================================================
   COMO EU PENSO — sequencia real, por isso numerada
   ========================================================= */
.steps{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.step{
  display:grid; grid-template-columns:clamp(72px,9vw,128px) minmax(0,1fr) auto;
  column-gap:clamp(18px,3vw,40px); align-items:start;
  padding:clamp(22px,3vw,34px) 0; border-bottom:1px solid var(--line);
}
.step__badge{
  grid-column:1; grid-row:1 / span 2;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.2rem,5vw,4rem); line-height:.85; color:var(--blue);
}
.step__title{ grid-column:2; grid-row:1; font-size:clamp(1.15rem,1.9vw,1.5rem); font-weight:700; letter-spacing:-.015em; margin:0; }
.step__text{ grid-column:2; grid-row:2; margin:6px 0 0; color:var(--ink-soft); font-size:.95rem; max-width:56ch; }
.step__icon{ grid-column:3; grid-row:1 / span 2; align-self:center; color:var(--muted); }
.step__icon svg{ width:26px; height:26px; }

/* =========================================================
   SERVICOS
   ========================================================= */
.services{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:26px; }
.service{
  background:var(--white); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column; transition:border-color .3s var(--ease);
}
.service:hover{ border-color:var(--blue); }
.service--art-bottom{ flex-direction:column-reverse; }

.service__art{ background:var(--paper-2); padding:20px; }
.service__art svg{ width:100%; height:auto; }
.service__art .art-panel{ fill:var(--white); stroke:rgba(20,23,26,.2); }
.service__art .art-panel--muted{ fill:#dedcd8; stroke:rgba(20,23,26,.12); }
.service__art .art-line{ stroke:rgba(20,23,26,.2); }
.service__art .art-dot{ fill:rgba(20,23,26,.22); }
.service__art .art-soft{ fill:rgba(20,23,26,.12); }
.service__art .art-strong{ fill:rgba(20,23,26,.4); }
.service__art .art-accent{ fill:var(--blue); }
.service__art .art-badge{ fill:var(--white); stroke:var(--blue); }
.service__art .art-mark{ stroke:var(--blue); stroke-width:1.6; stroke-linecap:round; }
.service__art .art-curve{ stroke:var(--blue); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.service__art .art-point{ fill:var(--blue); }

.service__body{ padding:26px; }
.service__title{ font-size:1.22rem; font-weight:700; letter-spacing:-.015em; margin:0 0 10px; }
.service__text{ margin:0; color:var(--ink-soft); font-size:.95rem; }

/* =========================================================
   SOBRE
   ========================================================= */
.about{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1fr); gap:clamp(32px,5vw,68px); align-items:center; }
.about__media{ margin:0; }
/* o retrato e mais alto que 4/5: o corte tira so altura. 18% no eixo Y mantem
   o espaco acima da cabeca e tira a sobra de terno embaixo. */
.about__media img{
  display:block; width:100%; aspect-ratio:4/5;
  object-fit:cover; object-position:50% 18%;
  filter: grayscale(0.25) contrast(1.06); border-radius:var(--radius);
}
/* :not(.sec__label) e obrigatorio aqui: `.about__text p` tem especificidade
   maior que `.sec__label` e apagaria o azul do rotulo da secao. */
.about__text p:not(.sec__label){ color:var(--ink-soft); }

/* =========================================================
   EXPERIENCIA
   ========================================================= */
.facts{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:0; }
.fact{ background:var(--paper); padding:30px 24px; }
.fact dt{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.6rem,3vw,2.4rem); line-height:1; color:var(--blue); margin-bottom:10px;
}
.fact dd{ margin:0; font-size:.82rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }

/* =========================================================
   FAQ
   ========================================================= */
/* a lista e estreita, mas o bloco continua alinhado a esquerda com as outras
   secoes — centralizar so o FAQ desalinharia o rotulo da coluna da pagina */
.faq{ border-top:1px solid var(--line); max-width:820px; }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__item summary{
  cursor:pointer; list-style:none; position:relative;
  padding:22px 40px 22px 0; font-size:1.04rem; font-weight:600;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:"+"; position:absolute; right:6px; top:19px;
  color:var(--blue); font-size:1.4rem; font-weight:400; line-height:1;
  transition:transform .25s var(--ease);
}
.faq__item[open] summary::after{ transform:rotate(45deg); }
.faq__item p{ margin:0 0 24px; color:var(--ink-soft); max-width:66ch; }

/* =========================================================
   CONTATO — o azul toma a pagina inteira no final
   ========================================================= */
.contact{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:clamp(34px,5vw,68px); align-items:start; }
.whatsapp{
  display:inline-flex; align-items:center; gap:10px; margin-top:26px;
  font-size:.9rem; font-weight:600; color:var(--white); text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.45); padding-bottom:4px;
  transition:border-color .2s var(--ease);
}
.whatsapp:hover{ border-bottom-color:var(--white); }

.form{ display:grid; gap:16px; }
.field{ display:grid; gap:7px; }
.field label{ font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(242,245,255,.82); }
.field input,
.field select,
.field textarea{
  font:inherit; font-size:.96rem; color:var(--white);
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.46); border-radius:var(--radius);
  padding:13px 15px; width:100%;
}
.field textarea{ resize:vertical; min-height:112px; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{ outline:2px solid var(--white); outline-offset:1px; }
.field select option{ color:var(--ink); background:var(--paper); }
.form__status{ margin:0; min-height:1.3em; font-size:.86rem; font-weight:600; color:var(--white); }

/* =========================================================
   RODAPE
   ========================================================= */
.footer{ background:var(--paper-2); border-top:1px solid var(--line-soft); padding-block:44px; }
.footer__inner{ display:flex; flex-wrap:wrap; gap:24px 44px; align-items:center; }
.footer__logo{ height:34px; width:auto; }
.footer__tag{ margin:10px 0 0; font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
/* telefone e icones andam juntos: agrupados, eles quebram para a linha de baixo
   como um bloco so em vez de cada um para um canto. */
.footer__contact{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 26px; margin-left:auto; }
.footer__phone{ font-size:.86rem; font-weight:600; text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px; }
.footer__phone:hover{ color:var(--blue); border-bottom-color:var(--blue); }
/* Redes sociais: mesma linguagem dos cards — placa branca, borda fina, raio de
   10px e o azul so no hover. Os icones sao SVG inline herdando currentColor. */
.footer__social{ display:flex; flex-wrap:wrap; gap:10px; }
.footer__social a{
  display:grid; place-items:center; width:42px; height:42px;
  color:var(--muted); background:var(--white);
  border:1px solid var(--line-soft); border-radius:var(--radius);
  transition:color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.footer__social a:hover{ color:var(--blue); border-color:var(--blue); transform:translateY(-2px); }
.footer__social svg{ fill:currentColor; }
/* cada marca ocupa uma fatia diferente do proprio viewBox — o "Be" e largo e
   baixo, o dribbble e um circulo e o "in" preenche a caixa inteira. Por isso o
   tamanho e por icone: igualar o px so faria o Behance sumir e o "in" gritar. */
.footer__social .ic-linkedin{ width:16px; height:16px; }
.footer__social .ic-behance{ width:22px; height:22px; }
.footer__social .ic-dribbble{ width:20px; height:20px; }
.footer__social .ic-whatsapp{ width:18px; height:18px; }
.footer__copy{ margin:0; width:100%; font-size:.78rem; color:var(--muted); }

/* =========================================================
   REVEAL
   ========================================================= */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* =========================================================
   BRILHO DO CURSOR
   ---------------------------------------------------------
   O elemento e criado por js/effects.js e so existe em ponteiro fino.
   Fica acima do conteudo (z-index 90, entre a nav e o skip-link), entao a
   opacidade e proposital: forte o bastante para se ver, fraca o bastante para
   nao atrapalhar a leitura do texto que estiver por baixo.
   Um numero para afinar: --glow-strength.
   ========================================================= */
.cursor-glow{
  --glow-size: 720px;
  --glow-strength: 1;

  position:fixed; left:0; top:0; z-index:90;
  width:var(--glow-size); height:var(--glow-size);
  margin:calc(var(--glow-size) / -2) 0 0 calc(var(--glow-size) / -2);
  border-radius:50%;
  pointer-events:none;

  /* A queda longa e o que faz o brilho parecer luz e nao um disco — cortar
     cedo desenha uma borda visivel por mais fraca que seja a cor.
     Sao muitas paradas de proposito: o navegador interpola reto entre elas, e
     com poucas paradas em alfa baixo aparecem aneis concentricos. Esta curva
     imita uma queda gaussiana e nao banda. */
  background:radial-gradient(closest-side circle,
    rgba(47,92,255,calc(.170 * var(--glow-strength))) 0%,
    rgba(47,92,255,calc(.156 * var(--glow-strength))) 14%,
    rgba(47,92,255,calc(.126 * var(--glow-strength))) 27%,
    rgba(47,92,255,calc(.092 * var(--glow-strength))) 40%,
    rgba(47,92,255,calc(.059 * var(--glow-strength))) 53%,
    rgba(47,92,255,calc(.032 * var(--glow-strength))) 65%,
    rgba(47,92,255,calc(.014 * var(--glow-strength))) 78%,
    rgba(47,92,255,0) 92%);
  filter:blur(40px);

  opacity:0;
  transition:opacity .4s var(--ease);

  /* o transform muda todo quadro; o blur e aplicado uma vez e fica na textura */
  will-change:transform;
}
.cursor-glow.is-on{ opacity:1; }

/* =========================================================
   PAGINAS INTERNAS — cases.html e paginas de case (ex.: pepyfi.html)
   ========================================================= */
/* a nav dessas paginas ja nasce solida, entao o topo precisa de folga */
.page-top{ padding-top:clamp(126px, 13vw, 180px); }

.page-back{
  display:inline-block; margin-bottom:26px;
  font-size:.84rem; font-weight:600; color:var(--blue); text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:2px;
  transition:border-color .2s var(--ease);
}
.page-back:hover{ border-bottom-color:var(--blue); }

/* --- topo do case --- */
.case-kicker{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:0 0 16px;
  font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue);
}
.case-kicker__sep{ color:var(--muted); }
#case-year{ color:var(--muted); }

.case-head{ display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:22px 32px; }
.case-head__title{
  font-size:clamp(1.9rem, 4vw, 3.1rem); font-weight:700; line-height:1.1;
  letter-spacing:-.025em; margin:0; max-width:20ch;
}

/* ficha tecnica: mesmo painel da secao Experiencia da home */
.case-meta{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
  margin:clamp(30px,4vw,44px) 0 0;
}
.case-meta > div{ background:var(--paper); padding:22px 24px; }
.case-meta dt{ font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.case-meta dd{ margin:0; font-weight:600; }

/* --- imagens do case --- */
.cover--hero,
.cover--wide{
  aspect-ratio:auto; height:auto; border-radius:var(--radius); border-bottom:0;
  margin:clamp(30px,4vw,48px) 0 0;
}
.cover--hero img,
.cover--wide img{ height:auto; object-fit:initial; }

.cover--embed iframe{
  width:100%; aspect-ratio:16/9; height:auto;
  border:0; display:block; border-radius:var(--radius);
}

.case-gallery{
  display:grid; grid-template-columns:1fr; gap:18px;
  margin:clamp(18px,3vw,26px) 0 0;
}
.case-gallery:empty{ display:none; }
.case-gallery img{
  width:100%; display:block;
  border-radius:var(--radius);
}
.case-gallery__pair{
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
}
@media (max-width:640px){
  .case-gallery__pair{ grid-template-columns:1fr; }
}

/* --- corpo --- */
.case-body{ max-width:72ch; margin:clamp(36px,5vw,60px) 0 0; }
.case-body__title{
  font-size:clamp(1.4rem, 2.4vw, 1.9rem); font-weight:700; line-height:1.2;
  letter-spacing:-.02em; margin:0 0 18px;
}
.case-body__text p{ margin:0 0 18px; color:var(--ink-soft); }
/* dentro do corpo do texto o rotulo compete com o titulo se ficar no tamanho
   cheio de .sec__label — aqui ele volta para a escala do paragrafo */
.case-body__label{ margin:34px 0 14px; font-size:1.05rem; }

.case-deliverables{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.case-deliverables li{ background:var(--paper); padding:14px 20px; display:flex; align-items:baseline; gap:14px; }
.case-deliverables li::before{ content:"\2726"; color:var(--blue); font-size:.8rem; flex:0 0 auto; }

/* --- proximo case --- */
.case-next{
  display:flex; flex-direction:column; gap:10px;
  margin:clamp(44px,6vw,76px) 0 0; padding:30px;
  background:var(--white); border:1px solid var(--line-soft); border-radius:var(--radius);
  text-decoration:none;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.case-next:hover{ border-color:var(--blue); transform:translateY(-3px); }
.case-next__title{ font-size:clamp(1.2rem,2vw,1.5rem); font-weight:700; letter-spacing:-.02em; }

.case-missing{ padding-block:clamp(126px,13vw,180px) clamp(60px,7vw,90px); }
.case-missing p{ margin:0 0 22px; color:var(--ink-soft); }
/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1000px){
  .about{ grid-template-columns:1fr; }
  /* 16/10 cortava a testa do retrato; 1/1 mantem o rosto inteiro. */
  .about__media img{ aspect-ratio:1/1; max-width:460px; }
  .contact{ grid-template-columns:1fr; }
  .facts{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width:820px){
  body{ font-size:16px; }
  .hero{ padding-top:108px; }

  .nav__inner{ padding:12px 20px; }
  .nav__burger{ display:block; }
  .nav__links{
    position:absolute; inset:100% 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:8px 20px 20px; display:none;
  }
  .nav__links.is-open{ display:flex; width: 100%; }
  .nav__links a{ padding:14px 0; border-bottom:1px solid var(--line-soft); }
  .nav__logo{ height:34px; }
  .nav__tools{ gap:12px; }
  /* "Vamos conversar" nao cabe na barra estreita e quebra em tres linhas.
     O menu tem "Contato" e a capa tem o mesmo botao logo abaixo. */
  .nav__cta{ display:none; }

  /* na tela estreita a marca pode ocupar quase toda a largura */
  .hero__mark img{ width:min(86vw, 46vh, 760px); }

  /* o menu aberto e um painel claro: aqui os links voltam a ser escuros */
  .nav:not(.is-solid):not(.is-scrolled) .nav__links a{ color:var(--ink); }
  .nav:not(.is-solid):not(.is-scrolled) .nav__links a:hover{ color:var(--blue); }

  .cases-grid,
  .services{ grid-template-columns:1fr; }
  .step{ grid-template-columns:clamp(56px,14vw,80px) minmax(0,1fr); }
  .step__icon{ display:none; }
  .sec__head--row{ align-items:start; }
  .case-meta{ grid-template-columns:1fr; }
}

@media (max-width:520px){
  .wrap{ padding-inline:20px; }
  .facts{ grid-template-columns:1fr; }
  .proof__group{ gap:26px; padding-right:26px; }
  .hero__actions{ flex-direction:column; align-items:center; gap:16px; }
}

/* =========================================================
   MOVIMENTO REDUZIDO
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  .hero__scroll-line{ animation:none; transform:scaleY(1); opacity:.75; }
  .status__dot::after{ display:none; }
  .proof__track{ animation:none !important; transform:none !important; flex-wrap:wrap; justify-content:center; width:100%; }
  .proof__group{ flex-wrap:wrap; justify-content:center; width:100%; padding-right:0; row-gap:18px; }
  .proof__group[aria-hidden="true"]{ display:none; }
  .proof__star:last-child{ display:none; }
  .proof__marquee{ -webkit-mask-image:none; mask-image:none; }
}



/* =========================================================
   TELAS BAIXAS — a capa inteira precisa caber sem rolagem
   ========================================================= */
@media (max-height:880px){
  .hero{ padding:104px 0 28px; }
  .hero__eyebrow{ margin-bottom:18px; }
  .hero__spark{ margin:16px 0 14px; }
  .hero__actions{ margin-top:24px; }
  .hero__scroll{ margin-top:22px; }
}