/* =========================================================
   B-YOU CREATIVE — Iury Santos
   "A cor é luz." Marca fria + conteúdo quente.
   Tipografia: Neue Haas Display. Paleta da marca B-YOU.
   ========================================================= */

@font-face{ font-family:"Neue Haas"; font-weight:200; font-style:normal; font-display:swap;
  src:url("/assets/fonts/NeueHaasDisplayThin.woff2") format("woff2"); }
@font-face{ font-family:"Neue Haas"; font-weight:300; font-style:normal; font-display:swap;
  src:url("/assets/fonts/NeueHaasDisplayLight.woff2") format("woff2"); }
@font-face{ font-family:"Neue Haas"; font-weight:400; font-style:normal; font-display:swap;
  src:url("/assets/fonts/NeueHaasDisplayRoman.woff2") format("woff2"); }
@font-face{ font-family:"Neue Haas"; font-weight:500; font-style:normal; font-display:swap;
  src:url("/assets/fonts/NeueHaasDisplayMediu.woff2") format("woff2"); }
@font-face{ font-family:"Neue Haas"; font-weight:700; font-style:normal; font-display:swap;
  src:url("/assets/fonts/NeueHaasDisplayBold.woff2") format("woff2"); }

:root{
  /* base e superfícies — preto B-YOU (igual ao briefing de marca) */
  --base:        #000000;
  --base-deep:   #000000;
  --surface:     #0B1024;

  /* luz da marca (azul → roxo B-YOU) */
  --blue:        #0400E6;
  --blue-ink:    #1018F0;  /* azul VIVO da B-YOU p/ texto/destaque (mais saturado, tom da marca) */
  --blue-violet: #5A1FEC;
  --violet:      #8A3DED;
  --lavender:    #B98CF2;  /* tint claro p/ destaques roxos pontuais */
  --accent:      92,116,245;  /* azul-periwinkle estrutural (bordas, vidro, glows) */

  /* texto */
  --ink:    #FFFFFF;
  --muted:  #ACA8BE;
  --faint:  #6E6A82;

  --maxw: 1180px;
  --pad: clamp(1.25rem, 5vw, 4rem);

  --fs-hero: clamp(2.7rem, 8vw, 6.4rem);
  --fs-h2:   clamp(1.9rem, 3.8vw, 3rem);
  --fs-h3:   1.5rem;
  --fs-lead: clamp(1.05rem, 2.2vw, 1.32rem);
  --fs-body: 1.02rem;
  --fs-label:.76rem;

  --ease: cubic-bezier(.2,.7,.2,1);

  /* raios — "menos arredondado": cantos mais sóbrios e arquitetônicos */
  --r-lg: 16px;   /* cards, depoimentos, foto, lightbox */
  --r-md: 12px;   /* tiles, botões, caixa flutuante do menu */
  --r-sm: 9px;    /* filtros, selos, tags */

  /* VIDRO REAL (liquid glass) — base reutilizável, "um pouco mais forçado" mas sóbrio */
  --glass:        linear-gradient(150deg, rgba(20,32,80,.60), rgba(8,13,36,.50));
  --glass-strong: linear-gradient(150deg, rgba(24,40,92,.78), rgba(9,15,42,.60));
  --glass-bd:     rgba(92,116,245,.18);
  --glass-bd-hi:  rgba(92,116,245,.40);
  --glass-blur:   blur(16px) saturate(135%);
  --glass-hi:     inset 0 1px 0 rgba(255,255,255,.10);          /* brilho do topo do vidro */
  --glass-sh:     0 18px 50px rgba(0,0,20,.45);

  /* família única — pesos fazem o trabalho (light → bold) */
  --sans:"Neue Haas", "Helvetica Neue", system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scrollbar-gutter:stable; }
body{
  margin:0;
  background:var(--base);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
em{ font-style:normal; color:var(--lavender); }

/* destaque dos grandes títulos — cor sólida da marca (sem degradê) */
.grad,
.hero__title em, .contato__title em{
  color:var(--lavender);
}
/* manifesto: "alcançar o mundo" no AZUL da B-YOU */
.penso__thesis em{ color:var(--blue-ink); }

/* foco acessível por teclado (sugestão de melhoria) */
:focus-visible{ outline:2px solid rgb(var(--accent)); outline-offset:3px; border-radius:6px; }

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

/* âncoras não somem atrás do menu fixo */
.hero, .logos, .section{ scroll-margin-top:96px; }

/* ---------- LUZ / MESH (fixo no fundo) — preto com glows contidos ---------- */
.mesh{
  position:fixed; inset:0; z-index:-2; overflow:hidden;
  background:
    /* canto sup-esquerdo: bem mais discreto (estava azul saturado demais) */
    radial-gradient(ellipse 70% 58% at 6% 3%,  rgba(40,46,225,.085), transparent 66%),
    radial-gradient(ellipse 64% 82% at 95% 93%, rgba(4,0,230,.15),    transparent 72%),
    radial-gradient(ellipse 52% 52% at 52% 36%, rgba(20,30,220,.05),  transparent 72%),
    radial-gradient(ellipse 38% 38% at 84% 11%, rgba(90,40,210,.055), transparent 66%),
    #000;
}
/* vinheta escura nas bordas — joga a luz pro centro (rosto e títulos) */
.mesh::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(125% 115% at 50% 42%, transparent 52%, rgba(0,0,0,.55) 100%);
}
.mesh__blob{
  position:absolute; border-radius:50%; filter:blur(110px); opacity:.12; will-change:transform;
}
.mesh__blob--a{
  width:48vw; height:48vw; left:-8vw; top:-12vw;
  background:radial-gradient(circle at 30% 30%, var(--blue), transparent 66%);
  animation:drift-a 38s var(--ease) infinite alternate;
}
.mesh__blob--b{
  width:46vw; height:46vw; right:-10vw; top:10vh;
  background:radial-gradient(circle at 50% 50%, var(--blue-violet), transparent 64%);
  animation:drift-b 44s var(--ease) infinite alternate;
}
.mesh__blob--c{
  width:40vw; height:40vw; left:18vw; bottom:-16vw;
  background:radial-gradient(circle at 50% 50%, var(--blue-violet), transparent 62%);
  animation:drift-c 50s var(--ease) infinite alternate;
}
/* grade técnica sutil (igual ao site de briefing), suave e fixa no fundo */
.mesh::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:34px 34px;
  opacity:.26;
  -webkit-mask-image:radial-gradient(110% 110% at 50% 26%, #000 38%, transparent 92%);
          mask-image:radial-gradient(110% 110% at 50% 26%, #000 38%, transparent 92%);
}

/* rastro de luz do cursor — azul VIVO da byou, mais lento (cauda de cometa) */
.cursor-trail{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.trail-dot{
  position:fixed; left:0; top:0; width:140px; height:140px; margin:-70px 0 0 -70px;
  border-radius:50%; pointer-events:none; opacity:0; will-change:transform,opacity;
  background:radial-gradient(circle, rgba(28,58,255,.42), transparent 60%);
  mix-blend-mode:screen;
}

@keyframes drift-a{ to{ transform:translate(8vw,6vh) scale(1.15); } }
@keyframes drift-b{ to{ transform:translate(-7vw,5vh) scale(1.1); } }
@keyframes drift-c{ to{ transform:translate(5vw,-7vh) scale(1.2); } }
/* aba em segundo plano: congela o que fica animando no fundo (poupa CPU/bateria) */
html.paused .mesh__blob,
html.paused .logos__track{ animation-play-state:paused !important; }

/* grão de filme */
.grain{
  position:fixed; inset:0; z-index:50; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- TIPOGRAFIA UTIL ---------- */
/* marcador de seção = símbolo da marca (no lugar da barra grossa), minimalista */
.eyebrow{
  font-family:var(--sans); font-weight:500; font-size:var(--fs-label);
  text-transform:uppercase; letter-spacing:.18em; color:var(--muted);
  margin:0 0 1.1rem; display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{
  content:""; width:1.25em; height:1.25em; flex:0 0 auto;
  background:rgb(var(--accent));
  -webkit-mask:url("/assets/brand/simbolo-mark.svg") center / contain no-repeat;
          mask:url("/assets/brand/simbolo-mark.svg") center / contain no-repeat;
}
.section__title{
  font-family:var(--sans); font-weight:500;
  font-size:var(--fs-h2); line-height:1.1; letter-spacing:-.02em;
  margin:0 0 2.4rem; max-width:18ch;
}

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:40;
  transition:padding .3s ease;
}
/* escurecimento sutil do header no topo (item: "deixar um pouco mais escuro no fundo"),
   desbotando pra baixo p/ não criar linha de corte; some ao virar a caixa flutuante */
.nav::before{
  content:""; position:absolute; inset:0 0 auto; height:210%; pointer-events:none; z-index:-1;
  background:linear-gradient(to bottom, rgba(0,0,0,.62), rgba(0,0,0,0));
  transition:opacity .35s ease;
}
.nav.scrolled::before{ opacity:0; }
/* o menu já nasce com a largura DO CONTEÚDO (dentro das margens), centralizado —
   repouso e scrolled têm a MESMA geometria horizontal (a única diferença ao rolar
   é ganhar a caixa de vidro + o gap do topo). */
.nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  width:calc(100% - 2 * var(--pad)); max-width:calc(var(--maxw) - 2 * var(--pad)); margin-inline:auto;
  padding:1.2rem 1.2rem; margin-top:0;
  border:1px solid transparent; border-radius:var(--r-md);
  transition:background .3s ease, backdrop-filter .3s ease, border-color .3s ease,
             box-shadow .3s ease, padding .3s ease, margin .3s ease;
}
/* ao rolar, o menu vira uma CAIXA DE VIDRO flutuante (sem linha horizontal) */
.nav.scrolled .nav__inner{
  margin-top:.7rem; padding-block:.55rem;
  background:linear-gradient(160deg, rgba(10,8,22,.84), rgba(8,6,18,.72));
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border-color:var(--glass-bd);
  box-shadow:0 14px 40px rgba(0,0,18,.5), var(--glass-hi);
}
.brand{ font-family:var(--sans); font-weight:700; letter-spacing:.02em; font-size:1.05rem; }
.nav__links{ display:flex; align-items:center; gap:2rem; font-size:.92rem; }
.nav__links a{ position:relative; color:var(--muted); transition:color .25s ease; }
.nav__links a:not(.nav__cta):hover{ color:var(--ink); }
/* link da seção atual (scrollspy) */
.nav__links a.is-current:not(.nav__cta){ color:var(--ink); }
.nav__links a.is-current:not(.nav__cta)::after{
  content:""; position:absolute; left:0; right:0; bottom:-7px; height:1px;
  background:linear-gradient(90deg, transparent, var(--lavender), transparent); opacity:.7;
}
.nav__cta{
  padding:.55rem 1.1rem; border:1px solid rgba(92,116,245,.4); border-radius:var(--r-md);
  color:var(--ink)!important; transition:border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.nav__cta:hover{ border-color:var(--lavender); background:rgba(92,116,245,.12); box-shadow:0 0 22px rgba(92,116,245,.3); }
.nav__burger{ display:none; background:none; border:0; cursor:pointer; padding:8px; }
.nav__burger span{ display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:.3s; }
.nav__mobile{ display:none; }

/* ---------- BOTÕES (vidro real + inversão suave no hover) ---------- */
.btn{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:500; font-size:.98rem;
  padding:.85rem 1.7rem; border-radius:var(--r-md); cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .35s ease, border-color .35s ease;
}
/* camada que faz a TROCA DE COR suave (crossfade), no lugar do corte seco */
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  transition:opacity .45s var(--ease);
}
.btn--primary{
  color:var(--ink);
  background:linear-gradient(135deg, rgba(4,0,230,.92), rgba(138,61,237,.72));
  border:.5px solid rgba(4,0,230,.5); border-top-color:rgba(120,92,255,.65);
  box-shadow:0 6px 22px rgba(4,0,230,.32), inset 0 .5px 0 rgba(255,255,255,.2);
}
.btn--primary::before{ background:linear-gradient(135deg, rgba(138,61,237,.96), rgba(4,0,230,.82)); }
.btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(138,61,237,.42), 0 0 26px rgba(185,140,242,.3), inset 0 .5px 0 rgba(255,255,255,.22);
}
.btn--primary:hover::before{ opacity:1; }
.btn--ghost{
  background:var(--glass); border:.5px solid rgba(255,255,255,.16); color:var(--ink);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-hi);
}
.btn--ghost::before{ background:linear-gradient(135deg, rgba(138,61,237,.34), rgba(138,61,237,.16)); }
.btn--ghost:hover{ transform:translateY(-2px); border-color:rgba(138,61,237,.5); box-shadow:0 0 24px rgba(185,140,242,.22), var(--glass-hi); }
.btn--ghost:hover::before{ opacity:1; }

/* ---------- HERO ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; padding-block:6rem 2rem; }
.hero__glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    /* luz fria de cima — bem difusa e discreta (reflexo no rosto) */
    radial-gradient(68% 66% at 52% -12%, rgba(120,140,240,.085), transparent 86%),
    /* respiro frio atrás do rosto */
    radial-gradient(56% 64% at 40% 30%, rgba(70,45,175,.10) 0%, rgba(70,45,175,.045) 45%, transparent 86%),
    /* azul-violeta entrando atrás da cabeça — bem mais discreto (canto sup-esq) */
    radial-gradient(52% 60% at 12% 24%, rgba(78,58,216,.085) 0%, rgba(78,58,216,.035) 48%, transparent 84%),
    /* azul-violeta subindo atrás do casaco (embaixo-esquerda) — bloom bem difuso, vindo de fora */
    radial-gradient(85% 88% at -8% 74%, rgba(64,52,222,.16) 0%, rgba(64,52,222,.06) 42%, transparent 84%),
    radial-gradient(62% 58% at 14% 99%, rgba(4,0,230,.09), transparent 88%);
  /* suaviza qualquer borda dura dos glows */
  filter:blur(22px);
  /* desbota o brilho antes do fim do hero -> emenda suave com a próxima seção */
  -webkit-mask-image:linear-gradient(to bottom, #000 68%, transparent 99%);
          mask-image:linear-gradient(to bottom, #000 68%, transparent 99%);
}
.hero__photo{
  position:absolute; top:0; bottom:0; z-index:1; margin:0;
  right:calc(50% + var(--face-gap, 140px)); left:auto;
  display:flex; align-items:flex-end; justify-content:flex-end; pointer-events:none;
}
.hero__photo img{
  height:100%; width:auto; object-fit:contain; object-position:right bottom;
  filter:contrast(1.14) saturate(1.06) brightness(.96);
  -webkit-mask-image:linear-gradient(to bottom, #000 80%, transparent 99%);
          mask-image:linear-gradient(to bottom, #000 80%, transparent 99%);
}
.hero__row{ position:relative; z-index:2; display:flex; justify-content:flex-end; width:100%; }
.hero__content{ text-align:right; max-width:680px; }
.hero__title{
  font-family:var(--sans); font-weight:500;
  font-size:var(--fs-hero); line-height:.9; letter-spacing:-.03em; margin:0 0 1.5rem;
  text-shadow:0 2px 40px rgba(0,0,12,.6);
}
.hero__lead{ font-size:var(--fs-lead); color:var(--muted); margin:0 0 2.2rem; }
.hero__cta{ display:flex; gap:1rem; justify-content:flex-end; flex-wrap:wrap; }

/* ---------- MARCAS / LOGOS (sem linhas horizontais, esteira suave) ---------- */
.logos{ position:relative; padding-block:clamp(2.6rem,5.5vw,4rem); overflow:hidden; }
.logos__label{
  text-align:center; font-family:var(--sans); font-size:var(--fs-label);
  text-transform:uppercase; letter-spacing:.16em; color:var(--faint); margin:0 0 1.9rem;
}
.logos__viewport{
  position:relative; width:100%; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
}
.logos__track{ display:flex; width:max-content; animation:logos-marquee 100s linear infinite; }
.logos__viewport:hover .logos__track{ animation-play-state:paused; }
.logos__group{
  display:flex; align-items:center; flex:0 0 auto;
  gap:clamp(2.4rem,6vw,5rem); padding-right:clamp(2.4rem,6vw,5rem);
}
.logos__track img{
  height:auto; width:auto; max-height:30px; max-width:150px; flex:0 0 auto;
  opacity:.66; transition:opacity .3s ease;
}
.logos__track img:hover{ opacity:1; }
/* Vici 15% menor que os demais (pedido do Iury) */
.logos__track img[src*="vici"]{ max-height:25.5px; }
@keyframes logos-marquee{ to{ transform:translateX(-50%); } }
@media (max-width:640px){
  .logos__track img{ max-height:22px; max-width:120px; }
  .logos__track img[src*="vici"]{ max-height:18.7px; }
}

/* ---------- SECTIONS ---------- */
.section{ position:relative; padding-block:clamp(4rem,8vw,7rem); }

/* O QUE FAÇO — cards de vidro com número fantasma + tags */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.card{
  position:relative; isolation:isolate; padding:2.2rem 1.9rem 2rem; border-radius:var(--r-lg);
  background:var(--glass); border:1px solid var(--glass-bd);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-hi);
  transition:transform .35s var(--ease), border-color .35s ease, box-shadow .35s ease;
  overflow:hidden;
}
.card::after{
  content:""; position:absolute; inset:0; border-radius:var(--r-lg); padding:1px; pointer-events:none;
  background:linear-gradient(160deg, rgba(92,116,245,.5), transparent 50%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .35s ease;
}
.card:hover{ transform:translateY(-6px); border-color:var(--glass-bd-hi); box-shadow:var(--glass-sh), var(--glass-hi), 0 0 38px rgba(185,140,242,.18); }
.card:hover::after{ opacity:1; }
.card h3{ font-family:var(--sans); font-weight:500; font-size:var(--fs-h3); margin:0 0 .8rem; }
.card p{ color:var(--muted); font-size:.96rem; margin:0; }
.card__tags{
  list-style:none; display:flex; flex-wrap:wrap; gap:.45rem;
  margin:1.4rem 0 0; padding:1.3rem 0 0; border-top:1px solid rgba(92,116,245,.12);
}
.card__tags li{
  font-family:var(--sans); font-size:.72rem; letter-spacing:.03em; color:var(--muted);
  padding:.3rem .65rem; border:1px solid rgba(92,116,245,.18);
  border-radius:var(--r-sm); background:rgba(92,116,245,.05);
}

/* COMO EU PENSO */
/* a intro fica no topo (largura cheia) e as convicções caem numa grade 2x2 embaixo:
   acaba com a faixa vazia à esquerda e aperta a vertical da seção */
.penso__grid{ display:block; }
.penso__lead{ max-width:46ch; margin:0 0 clamp(2.4rem,5vw,3.8rem); }
.penso__lead p{
  font-family:var(--sans); font-weight:500;
  font-size:clamp(1.4rem,2.6vw,2rem); line-height:1.25; letter-spacing:-.01em; color:var(--ink); margin:0;
}
.penso__list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr);
  column-gap:clamp(2rem,5vw,4.5rem); row-gap:clamp(2.2rem,4.5vw,3.4rem);
}
.penso__list li{ padding:0; border:0; }
/* HIERARQUIA: o título é a âncora (display, forte). A citação e a explicação
   vêm bem menores e em --muted, abaixo do título. */
.penso__k{
  display:block; font-family:var(--sans); font-weight:700;
  font-size:clamp(1.7rem,2.7vw,2.25rem); line-height:1.1; letter-spacing:-.02em;
  margin-bottom:.7rem; color:var(--ink);
}
.penso__list p{ margin:0; color:var(--muted); font-size:.95rem; line-height:1.55; }
.penso__list q{ display:block; margin-bottom:.35rem; color:var(--muted); font-style:italic; }
.penso__list q::before{ content:"\201C"; } .penso__list q::after{ content:"\201D"; }

/* MANIFESTO — a frase do Iury vira o momento de maior destaque do site.
   Símbolo da marca em LIQUID GLASS atrás da frase (Iury curtiu esse). */
.penso__manifesto{
  position:relative; isolation:isolate;
  margin:clamp(5.5rem,13.2vw,10.8rem) auto 0;   /* manifesto + símbolo descem mais ~20% no desktop (pedido do Iury); min mantido p/ mobile */
  padding:clamp(3.4rem,7vw,6rem) 1rem;
  text-align:center;
  background:radial-gradient(44% 50% at 50% 50%, rgba(34,52,190,.13), transparent 72%);
}
/* o símbolo (os 2 pseudos) flutua no scroll via --symY (JS); transição curta dá o "assentar" */
.penso__manifesto::before,
.penso__manifesto::after{
  transform:translate(-50%, calc(-50% + var(--symY, 0px)));
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
/* LIQUID GLASS — BORDINHA (contorno do vidro): brilho mais forte no topo (refração) */
.penso__manifesto::before{
  content:""; position:absolute; z-index:-1; left:50%; top:50%;
  width:min(360px,64vw); aspect-ratio:1/1; pointer-events:none;
  background:linear-gradient(155deg, rgba(150,180,255,.9) 0%, rgba(70,100,235,.45) 50%, rgba(36,52,165,.3) 100%);
  -webkit-mask:url("/assets/brand/simbolo-edge.svg") center / contain no-repeat;
          mask:url("/assets/brand/simbolo-edge.svg") center / contain no-repeat;
}
/* LIQUID GLASS — CORPO de vidro fosco, mais ESCURO (congela o grid/glow atrás) */
.penso__manifesto::after{
  content:""; position:absolute; z-index:-2; left:50%; top:50%;
  width:min(360px,64vw); aspect-ratio:1/1; pointer-events:none;
  -webkit-mask:url("/assets/brand/simbolo-fill.svg") center / contain no-repeat;
          mask:url("/assets/brand/simbolo-fill.svg") center / contain no-repeat;
  -webkit-backdrop-filter:blur(18px) saturate(1.5) brightness(.74);
          backdrop-filter:blur(18px) saturate(1.5) brightness(.74);
  background:linear-gradient(150deg, rgba(30,52,170,.26), rgba(11,16,60,.4));
}
.penso__thesis{
  position:relative; z-index:1; margin:0 auto; padding:0; border:0; max-width:20ch;
  font-family:var(--sans); font-weight:500;
  font-size:clamp(2.3rem,5.8vw,4.3rem); line-height:1.08; letter-spacing:-.03em;
}

/* TRABALHOS — mosaico que aceita vídeos/arte em formatos diferentes */
.filters{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:2.4rem; }
.filter{
  font-family:var(--sans); font-size:.78rem; letter-spacing:.04em;
  padding:.5rem 1.05rem; border-radius:var(--r-sm); cursor:pointer;
  background:transparent; border:1px solid rgba(92,116,245,.22); color:var(--muted);
  transition:color .25s ease, border-color .25s ease, background .25s ease;
}
.filter:hover{ color:var(--ink); border-color:rgba(92,116,245,.45); }
.filter.is-active{ background:rgba(92,116,245,.15); border-color:var(--lavender); color:var(--ink); }
/* masonry por colunas — formatos variados (reel 9:16, wide 16:9, quadrado, retrato) fluem juntos */
.grid{ column-count:3; column-gap:1.1rem; }
.tile{
  position:relative; display:block; width:100%; margin:0 0 1.1rem; break-inside:avoid;
  border-radius:var(--r-md); overflow:hidden; cursor:pointer; aspect-ratio:16/9;
  background:var(--surface); border:1px solid var(--glass-bd);
  box-shadow:var(--glass-hi);
  transition:transform .35s var(--ease), box-shadow .35s ease, border-color .35s ease;
}
.tile__media{
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(150deg, var(--surface), #0d1633);
  transition:transform .5s var(--ease); color:var(--faint);
}
.tile__ph{ font-family:var(--sans); font-weight:500; font-size:1.5rem; opacity:.5; letter-spacing:-.02em; }
.tile:hover{ transform:translateY(-5px); border-color:var(--glass-bd-hi); box-shadow:var(--glass-sh); }
.tile:hover .tile__media{ transform:scale(1.06); }
.tile__overlay{
  position:absolute; inset:0; z-index:2; padding:1.05rem 1.15rem;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:linear-gradient(to top, rgba(0,0,18,.86), transparent 62%);
}
.tile__cat{ font-family:var(--sans); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--lavender); }
.tile__name{ font-family:var(--sans); font-weight:500; font-size:.98rem; margin-top:.2rem; }
/* SELO "exemplo" — agora na cor da marca (era magenta) + vidro */
.tile__badge{
  position:absolute; top:.7rem; left:.7rem; z-index:3;
  font-family:var(--sans); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.26rem .58rem; border-radius:var(--r-sm);
  background:rgba(138,61,237,.20); color:var(--lavender);
  border:1px solid rgba(92,116,245,.34);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.tile__play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:rgba(92,116,245,.18); border:1px solid rgba(92,116,245,.5);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  transition:transform .3s var(--ease), background .3s ease;
}
.tile:hover .tile__play{ transform:translate(-50%,-50%) scale(1.1); background:rgba(92,116,245,.32); }
.tile__play::after{ content:""; border-left:14px solid var(--ink); border-top:9px solid transparent; border-bottom:9px solid transparent; margin-left:4px; }
.placeholder-note{ margin-top:1.6rem; font-family:var(--sans); font-size:.78rem; color:var(--faint); }

/* QUEM SOU */
.quem__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
/* Retrato emoldurado: a foto JÁ tem o fundo de estúdio (azul→roxo da marca),
   então é só uma moldura arredondada limpa, com leve glow da marca em volta. */
.quem__photo{
  margin:0; position:relative; overflow:hidden;
  width:100%; max-width:460px; aspect-ratio:4/5; justify-self:center;
  border-radius:var(--r-lg); border:1px solid rgba(92,116,245,.18);
  background:#0a0817;
  box-shadow:0 34px 80px rgba(0,0,22,.55), 0 0 70px rgba(73,1,236,.16), inset 0 1px 0 rgba(255,255,255,.07);
}
.quem__photo img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:50% 24%;
  /* aproxima a foto ~15% SEM mexer no box (o box recorta o excedente) */
  transform:scale(1.15); transform-origin:50% 30%;
  filter:contrast(1.04) saturate(1.04);
}
.quem__text{ color:var(--muted); margin:0 0 1.2rem; max-width:52ch; }
.marcas{ position:relative; margin-top:2.2rem; padding-top:1.8rem; }
.marcas::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(92,116,245,.22) 16%, rgba(92,116,245,.22) 78%, transparent);
}
.marcas__label{ font-family:var(--sans); font-size:var(--fs-label); text-transform:uppercase; letter-spacing:.16em; color:var(--lavender); margin:0 0 1rem; }
.marcas ul{ list-style:none; margin:0; padding:0; display:grid; gap:.85rem; }
/* nome + chip do Instagram na 1ª linha; descrição na 2ª */
.marcas li{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:.9rem; row-gap:.15rem; }
.marcas strong{ grid-column:1; grid-row:1; font-family:var(--sans); font-weight:500; }
.marcas span{ grid-column:1 / -1; grid-row:2; color:var(--muted); font-size:.93rem; }
/* chip do Instagram (retângulo com ícone + @) */
.ig-chip{
  grid-column:2; grid-row:1; justify-self:end;
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--sans); font-size:.72rem; letter-spacing:.01em; color:var(--lavender);
  padding:.26rem .6rem; border:1px solid rgba(92,116,245,.32); border-radius:var(--r-sm);
  background:rgba(92,116,245,.08); white-space:nowrap;
  transition:border-color .25s ease, background .25s ease, color .25s ease;
}
.ig-chip:hover{ border-color:rgba(92,116,245,.6); background:rgba(92,116,245,.16); color:var(--ink); }
.ig-chip svg{ width:.95em; height:.95em; flex:0 0 auto; }

/* DEPOIMENTOS — vidro mais presente, selo na cor da marca */
.depo__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.depo__card{
  position:relative; margin:0; padding:2.4rem 1.9rem 2rem; border-radius:var(--r-lg);
  background:var(--glass-strong); border:1px solid var(--glass-bd);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-hi);
  display:flex; flex-direction:column; gap:1.6rem;
  transition:transform .35s var(--ease), border-color .35s ease, box-shadow .35s ease;
}
.depo__card:hover{ transform:translateY(-5px); border-color:var(--glass-bd-hi); box-shadow:var(--glass-sh), var(--glass-hi), 0 0 38px rgba(185,140,242,.18); }
.depo__card blockquote{
  position:relative; margin:0; padding-top:1.6rem;
  font-size:1.04rem; line-height:1.55; color:var(--ink);
}
.depo__card blockquote::before{
  content:"\201C"; position:absolute; top:-.7rem; left:-.2rem;
  font-family:var(--sans); font-weight:700; font-size:3rem; line-height:1;
  color:var(--lavender); opacity:.5;
}
.depo__card figcaption{ display:flex; flex-direction:column; gap:.15rem; margin-top:auto; }
.depo__name{ font-family:var(--sans); font-weight:500; }
.depo__role{ font-size:.85rem; color:var(--muted); }
.depo__badge{ top:1rem; right:1rem; left:auto; }

/* CONTATO */
.contato{ text-align:center; }
.contato__inner{ position:relative; z-index:1; max-width:680px; }
.contato__title{
  font-family:var(--sans); font-weight:500;
  font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.1; letter-spacing:-.025em; margin:0 0 1rem;
}
.contato__text{ color:var(--muted); font-size:var(--fs-lead); margin:0 0 2.2rem; }
.contato__cta{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* FOOTER */
.footer{ position:relative; padding-block:2.4rem; }
.footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(92,116,245,.14) 18%, rgba(92,116,245,.14) 82%, transparent);
}
.footer__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.footer__meta{ font-family:var(--sans); font-size:.74rem; color:var(--faint); letter-spacing:.03em; }

/* LIGHTBOX */
.lightbox{
  position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:5vw;
  background:rgba(2,1,14,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); animation:fade .3s ease;
}
.lightbox[hidden]{ display:none; }
.lightbox__close{
  position:absolute; top:1.4rem; right:1.8rem; background:none; border:0; color:var(--ink);
  font-size:2.6rem; line-height:1; cursor:pointer; opacity:.8;
}
.lightbox__close:hover{ opacity:1; }
.lightbox__stage{
  width:min(960px,92vw); max-height:84vh; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface); display:grid; place-items:center; border:1px solid rgba(92,116,245,.3);
  box-shadow:0 30px 80px rgba(0,0,30,.6);
}
.lightbox__stage iframe, .lightbox__stage video, .lightbox__stage img{ width:100%; height:100%; border:0; object-fit:cover; }
.lightbox__ph{ color:var(--faint); font-family:var(--sans); padding:2rem; text-align:center; }
@keyframes fade{ from{opacity:0} to{opacity:1} }

/* ---------- REVEAL ON SCROLL ---------- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- RESPONSIVO ---------- */
@media (max-width:900px){
  .cards{ grid-template-columns:1fr; }
  .depo__grid{ grid-template-columns:1fr; }
  .grid{ column-count:2; }
  .penso__list{ grid-template-columns:1fr; }
  /* manifesto: dar respiro acima dele no mobile (o símbolo colava no item "detalhe") */
  .penso__manifesto{ margin-top:8.5rem; }
  .quem__grid{ grid-template-columns:1fr; }
  .quem__photo{ max-width:440px; }

  /* HERO mobile: texto em cima, foto embaixo */
  .hero{ flex-direction:column; justify-content:flex-start; padding-top:7rem; text-align:center; }
  .hero__content{ text-align:center; margin:0 auto; order:1; }
  .hero__title{ font-size:clamp(2.3rem,9vw,3.4rem); line-height:1.02; }
  .hero__cta{ justify-content:center; }
  /* foto sobe pra perto dos botões (sem flex:1 que esticava) e croppa o headroom escuro do topo */
  .hero__photo{ position:relative; right:auto; left:auto; order:2; height:auto; justify-content:center; margin-top:.75rem; flex:none; }
  .hero__photo img{ width:min(80vw,360px); height:52svh; object-fit:cover; object-position:50% 62%; }
}
@media (max-width:640px){
  .nav__links{ display:none; }
  .nav__burger{ display:block; }
  .nav.scrolled .nav__inner{ margin-top:.5rem; padding-block:.5rem; }
  .nav__mobile{
    display:block; margin:.6rem var(--pad) 0; padding:.4rem 1.1rem 1rem;
    background:linear-gradient(160deg, rgba(10,8,22,.94), rgba(8,6,18,.9));
    backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-bd); border-radius:var(--r-md);
    box-shadow:0 14px 40px rgba(0,0,18,.5), var(--glass-hi);
  }
  .nav__mobile[hidden]{ display:none; }
  .nav__mobile a{ display:block; padding:.8rem 0; color:var(--muted); border-bottom:1px solid rgba(92,116,245,.08); }
  .nav__mobile a:last-child{ border-bottom:0; }
  .nav.open .nav__burger span:first-child{ transform:translateY(3.5px) rotate(45deg); }
  .nav.open .nav__burger span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }
  .grid{ column-count:1; }
  .footer__inner{ flex-direction:column; text-align:center; gap:.6rem; }
}

/* ---------- MOVIMENTO REDUZIDO ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
  .reveal{ opacity:1; transform:none; }
  .cursor-trail{ display:none; }
  /* esteira de logos parada e centralizada */
  .logos__track{ animation:none; width:100%; justify-content:center; }
  .logos__group--dup{ display:none; }
}

/* ---------- LOGO DA MARCA (vetor real b—you) ---------- */
.brand{ display:inline-flex; align-items:center; line-height:0; }
.brand__logo{ height:26px; width:auto; display:block; }
.nav.scrolled .brand__logo{ height:23px; transition:height .3s ease; }
.footer__logo{ height:30px; width:auto; opacity:.85; }

/* ---------- SÍMBOLO desfocado no fundo do contato (Iury curtiu esse) ---------- */
.brand-mark{ position:absolute; pointer-events:none; z-index:0; }
/* contato — CONTORNO de linha única do símbolo, BEM desfocado e ATRÁS do título.
   O blur fica no ELEMENTO e a máscara no ::before (senão a máscara re-afia a borda). */
.brand-mark--contato{
  width:min(560px,86vw); aspect-ratio:1/1; left:50%; top:40%; transform:translate(-50%,-50%);
  filter:blur(17px); opacity:.95;
}
.brand-mark--contato::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(30,58,250,.98), rgba(16,26,180,.85));
  -webkit-mask:url("/assets/brand/simbolo-stroke.svg") center / contain no-repeat;
          mask:url("/assets/brand/simbolo-stroke.svg") center / contain no-repeat;
}