/* ============================================================
   THE HIVE — Software House
   Arquitetura de tema: hero clara sobre corpo escuro,
   acento AMARELO ABELHA. A família de neutros é a mesma
   escala de luminosidade, com matiz deslocada para o amarelo.
   ============================================================ */

:root{
  /* ---- neutros (matiz amarela, mesma luminosidade) ---- */
  --black:      #111112;
  --dark:       #2C2920;
  --dark-t1:    #3C3B38;
  --dark-t2:    #545350;
  --off-white-1:#E1DED2;
  --off-white-2:#B8B4A5;
  --cream:      #EFEDE5;
  --white:      #F4F2ED;
  --grey-1:     #EEEBE0;
  --grey-2:     #CBC8BD;
  --grey-3:     #BBB8AD;

  /* ---- acento ---- */
  --honey:      #FFC800;
  --honey-off:  #C7A83A;
  --orange:     #FF6B00;

  /* ---- tipografia ---- */
  --f-body: "Mona Sans", "Archivo", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-disp: "Archivo", "Mona Sans", system-ui, sans-serif;

  --t-impact: clamp(3.4rem, 13.5vw, 12rem);
  --t-h1:     clamp(2.6rem, 7.5vw, 6.5rem);
  --t-h2:     clamp(2.1rem, 5.4vw, 4.5rem);
  --t-h3:     clamp(1.5rem, 2.6vw, 2.1rem);
  --t-lead:   clamp(1.15rem, 1.9vw, 1.6rem);
  --t-body:   clamp(1rem, 1.15vw, 1.125rem);
  --t-eyebrow: .6875rem;

  /* ---- espaço ---- */
  --pad:  clamp(1.15rem, 4vw, 3.5rem);
  --sec:  clamp(5.5rem, 14vh, 11rem);
  --maxw: 88rem;
  --r-sm: 10px; --r-md: 20px; --r-lg: 32px;

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-ref: cubic-bezier(.19,1,.22,1);

  /* ---- tema corrente (trocado pelo scroll) ---- */
  --bg:      var(--dark);
  --fg:      var(--cream);
  --fg-soft: var(--grey-3);
  --rule:    rgba(239,237,229,.14);
  --rule-2:  rgba(239,237,229,.08);
  --card:    #35322A;
}
:root[data-theme="light"]{
  --bg:      var(--white);
  --fg:      var(--dark);
  --fg-soft: var(--dark-t2);
  --rule:    rgba(44,41,32,.18);
  --rule-2:  rgba(44,41,32,.10);
  --card:    var(--cream);
}

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

body{
  margin:0;
  background:var(--dark);
  color:var(--fg);
  font-family:var(--f-body);
  font-size:var(--t-body);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:color .55s var(--ease);
}
body.is-locked{ overflow:hidden; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--f-disp); font-weight:800; line-height:.95; letter-spacing:-.03em; }
p{ margin:0 0 1.1em; }
::selection{ background:var(--honey); color:var(--black); }
:focus-visible{ outline:2px solid var(--honey); outline-offset:3px; border-radius:4px; }

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

/* ============================================================
   CAMADAS DE FUNDO
   backdrop (cor do tema) → favo em canvas → grão → conteúdo
   ============================================================ */
.backdrop{
  position:fixed; inset:0; z-index:0;
  background:var(--bg);
  transition:background .55s var(--ease);
}
.combcanvas{ position:fixed; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; }
.grain{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:.03; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, .nav, .foot{ position:relative; z-index:3; }
section{ background:transparent; }

/* botão de limpar a lousa — só aparece quando há traço */
.clearboard{
  /* ancorado na hero, igual ao card "Onde estamos" */
  position:absolute; z-index:98;
  right:var(--pad); bottom:calc(var(--pad) + 2.4rem);
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem .9rem;
  font-family:var(--f-disp); font-weight:800;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  /* o fundo é sempre branco, então a cor do texto é fixa (não segue o tema) */
  color:var(--dark); background:#fff;
  border:1px solid var(--rule); border-radius:100px;
  box-shadow:0 8px 24px rgba(44,41,32,.10);
  cursor:pointer;
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .45s var(--ease), transform .45s var(--ease),
             background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.clearboard.is-on{ opacity:1; transform:none; pointer-events:auto; }
.clearboard svg{ width:16px; height:16px; flex:none; }
.clearboard:hover{ background:var(--honey); color:var(--black); border-color:var(--honey); }

/* ============================================================
   PRELOADER — painel amarelo, marca preta se desenhando
   ============================================================ */
.preloader{
  position:fixed; inset:0; z-index:200;
  background:var(--honey);
  display:grid; place-items:center;
  will-change:transform;
  transition:transform .95s var(--ease-ref);
}
.preloader.is-done{ transform:translateY(-100.5%); pointer-events:none; }
.preloader__stage{ display:grid; place-items:center; }

.hivemark{ width:100%; height:auto; overflow:visible; }
.hivemark--loader{ width:clamp(52px,5.2vw,74px); }

.hivemark--loader .hm-draw{
  fill:none; stroke:var(--black); stroke-width:2.51;
  stroke-linejoin:round; stroke-linecap:round;
  stroke-dasharray:var(--len,1); stroke-dashoffset:var(--len,1);
  animation:hmDraw .8s var(--ease-ref) forwards;
  animation-delay:calc(.15s + var(--i) * .19s);
}
@keyframes hmDraw{ to{ stroke-dashoffset:0; } }

.hivemark--loader .hm-pop{
  fill:none; stroke:var(--black); stroke-width:2.51;
  opacity:0; transform-box:fill-box; transform-origin:center;
  animation:hmPop .5s var(--ease-ref) forwards;
  animation-delay:calc(.42s + var(--i) * .19s);
}
@keyframes hmPop{ from{ opacity:0; transform:scale(.15); } to{ opacity:1; transform:scale(1); } }

.preloader__label{
  position:absolute; left:0; right:0; bottom:clamp(1.6rem,3.6vh,3rem);
  margin:0; text-align:center;
  font-family:var(--f-disp); font-weight:800;
  font-size:.82rem; letter-spacing:.03em; text-transform:uppercase;
  color:var(--black);
  opacity:0; animation:hudIn .7s var(--ease-ref) .55s forwards;
}
@keyframes hudIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; gap:1.5rem;
  padding:clamp(.85rem,1.7vw,1.35rem) var(--pad);
  color:var(--fg);
  border-bottom:1px solid transparent;
  transition:background .45s var(--ease), backdrop-filter .45s var(--ease),
             border-color .45s var(--ease), transform .5s var(--ease), color .55s var(--ease);
}
.nav.is-stuck{
  background:color-mix(in srgb, var(--bg) 74%, transparent);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom-color:var(--rule-2);
}
.nav.is-hidden{ transform:translateY(-105%); }

/* wordmark empilhado, canto superior esquerdo */
.brand{
  display:grid; margin-right:auto;
  font-family:var(--f-disp);
  line-height:.84; letter-spacing:-.02em;
  text-transform:uppercase;
}
.brand__l1{ font-weight:400; font-size:clamp(1.35rem,2.5vw,2.05rem); font-stretch:88%; }
.brand__l2{ font-weight:900; font-size:clamp(1.5rem,2.8vw,2.3rem); font-stretch:112%; }

/* marca centralizada no topo */
.nav__mark{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
}
.hivemark--sm{ width:26px; flex:none; }
.hivemark .hm-stroke{
  fill:none; stroke:var(--fg); stroke-width:2.51;
  stroke-linejoin:round; stroke-linecap:round;
  transition:stroke .55s var(--ease);
}
.nav__mark .hivemark{ transition:transform .6s var(--ease); }
.nav__mark:hover .hivemark{ transform:rotate(60deg); }

.nav__right{ display:flex; align-items:center; gap:.6rem; }

/* botão de acento (amarelo sólido) */
.pill{
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--honey); color:var(--black);
  font-family:var(--f-disp); font-weight:800;
  font-size:.92rem; letter-spacing:.01em; text-transform:uppercase;
  padding:.78rem 1.15rem; border-radius:14px;
  transition:transform .35s var(--ease), background .35s var(--ease);
}
.pill svg{ width:19px; height:19px; flex:none; }
.pill:hover{ transform:translateY(-2px); background:var(--honey-off); }

.menubtn{
  width:52px; height:52px; flex:none;
  display:grid; place-content:center; gap:6px;
  background:none; border:1.5px solid var(--fg); border-radius:14px;
  cursor:pointer; padding:0;
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
.menubtn i{
  display:block; width:20px; height:2px; background:var(--fg);
  transition:transform .45s var(--ease), background .35s var(--ease);
}
.menubtn:hover{ background:var(--honey); border-color:var(--honey); }
.menubtn:hover i{ background:var(--black); }
.menubtn[aria-expanded="true"]{ background:var(--honey); border-color:var(--honey); }
.menubtn[aria-expanded="true"] i{ background:var(--black); }
.menubtn[aria-expanded="true"] i:first-child{ transform:translateY(4px) rotate(45deg); }
.menubtn[aria-expanded="true"] i:last-child{ transform:translateY(-4px) rotate(-45deg); }

.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;
}

/* botões */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--f-disp); font-weight:700; font-size:.9rem;
  padding:.72rem 1.2rem; border-radius:100px;
  border:1px solid var(--rule); color:var(--fg);
  position:relative; overflow:hidden;
  transition:color .35s var(--ease), border-color .35s var(--ease);
}
.btn svg{ width:14px; height:14px; flex:none; transition:transform .4s var(--ease); }
.btn::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--honey); transform:translateY(101%);
  transition:transform .48s var(--ease);
}
.btn > *{ position:relative; z-index:1; }
.btn:hover{ color:var(--black); border-color:var(--honey); }
.btn:hover::before{ transform:translateY(0); }
.btn:hover svg{ transform:translate(3px,-3px); }

.btn--solid{ background:var(--honey); color:var(--black); border-color:var(--honey); padding:.85rem 1.5rem; }
.btn--solid::before{ background:var(--black); }
.btn--solid:hover{ color:var(--honey); border-color:var(--black); }
.btn--ghost{ padding:.85rem 1.5rem; }
.btn--sm{ padding:.58rem 1rem; font-size:.82rem; }

/* ============================================================
   MENU OVERLAY — grade visual à esquerda, navegação à direita
   ============================================================ */
.menu{
  position:fixed; inset:0; z-index:99;
  background:var(--dark); color:var(--cream);
  display:grid; grid-template-columns:1fr 1fr;
  overflow-y:auto; overscroll-behavior:contain;
}
.menu[hidden]{ display:none; }

.menu__visual{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(.5rem,1.2vw,1rem);
  padding:clamp(.8rem,1.8vw,1.5rem);
  align-content:center;
}
.menu__tile{
  position:relative; overflow:hidden;
  aspect-ratio:1; border-radius:var(--r-md);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(.9rem,1.8vw,1.4rem);
  border:1px solid rgba(239,237,229,.10);
  background:#332F25 center/cover no-repeat;   /* a url vem inline por página */
  opacity:0; transform:translateY(26px);
  animation:mmIn .7s var(--ease) forwards;
  transition:border-color .45s var(--ease);
}
/* véu escuro só na base, para o rótulo ler sobre qualquer screenshot */
.menu__tile::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(24,22,16,.92) 0%, rgba(24,22,16,.55) 38%, rgba(24,22,16,.10) 72%);
  transition:opacity .5s var(--ease);
}
.menu__tile::after{
  content:""; position:absolute; inset:0;
  background:var(--honey); mix-blend-mode:color;
  opacity:0; transition:opacity .5s var(--ease);
}
.menu__tile:hover{ border-color:rgba(255,200,0,.55); }
.menu__tile:hover::before{ opacity:.72; }
.menu__tile:hover::after{ opacity:.22; }
.menu__tile > *{ position:relative; z-index:1; }
.menu__tile b{
  font-family:var(--f-disp); font-weight:900;
  font-size:clamp(1.1rem,2.4vw,1.9rem);
  text-transform:uppercase; letter-spacing:-.02em; line-height:1;
}
.menu__tile em{
  font-style:normal; font-size:.6rem; font-weight:700;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--honey); margin-top:.35rem;
}
.menu__tile:nth-child(1){ animation-delay:.06s }
.menu__tile:nth-child(2){ animation-delay:.12s }
.menu__tile:nth-child(3){ animation-delay:.18s }
.menu__tile:nth-child(4){ animation-delay:.24s }

.menu__panel{
  display:grid; align-content:center; justify-items:end;
  gap:clamp(1.4rem,3vh,2.4rem);
  padding:calc(var(--pad) + 5rem) var(--pad) var(--pad);
  text-align:right;
}
.menu__nav{ display:grid; justify-items:end; }
.menu__nav a{
  position:relative;
  font-family:var(--f-disp); font-weight:900;
  font-size:clamp(1.9rem,5.4vw,4.4rem);
  line-height:1.02; letter-spacing:-.03em;
  text-transform:uppercase; font-stretch:106%;
  color:var(--cream);
  opacity:0; transform:translateY(26px);
  animation:mmIn .7s var(--ease) forwards;
  transition:color .3s ease;
}
.menu__nav a:nth-child(1){ animation-delay:.10s }
.menu__nav a:nth-child(2){ animation-delay:.16s }
.menu__nav a:nth-child(3){ animation-delay:.22s }
.menu__nav a:nth-child(4){ animation-delay:.28s }
.menu__nav a:nth-child(5){ animation-delay:.34s }
.menu__nav a:hover{ color:var(--honey); }
/* item ativo: risco ondulado amarelo atravessando */
.menu__nav a.is-active{ color:var(--grey-3); }
.menu__nav a.is-active::after{
  content:""; position:absolute; left:-2%; right:-2%; top:52%;
  height:12px; transform:translateY(-50%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M0 6 C 20 0, 40 12, 60 6 S 100 0, 120 6' fill='none' stroke='%23FFC800' stroke-width='2.6'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
@keyframes mmIn{ to{ opacity:1; transform:translateY(0); } }

.menu__badge{
  display:grid; justify-items:end; gap:.5rem;
  opacity:0; animation:mmIn .7s var(--ease) .40s forwards;
}
.menu__badge .hivemark{ width:38px; }
.menu__badge .hm-stroke{ stroke:var(--cream); }
.menu__badge span{
  font-size:.62rem; font-weight:700;
  letter-spacing:.17em; text-transform:uppercase; color:var(--grey-3);
}
.menu__enq{
  font-family:var(--f-disp); font-weight:800;
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  opacity:0; animation:mmIn .7s var(--ease) .46s forwards;
  transition:color .3s ease;
}
.menu__enq:hover{ color:var(--honey); }
.menu__contact{
  display:grid; justify-items:end; gap:.45rem; text-align:right;
  opacity:0; animation:mmIn .7s var(--ease) .52s forwards;
}
.menu__contact a{
  font-family:var(--f-disp); font-weight:800;
  font-size:clamp(.9rem,1.5vw,1.15rem); letter-spacing:-.01em;
  transition:color .3s ease;
}
.menu__contact a:hover{ color:var(--honey); }
.menu__contact span{
  font-size:.78rem; line-height:1.45; color:var(--grey-3);
  letter-spacing:.04em; margin-top:.2rem;
}

/* ============================================================
   HERO — clara
   ============================================================ */
/* full-bleed: a abelha ocupa o centro, o resto é cromo de canto */
.hero{
  position:relative;
  min-height:100svh;
  display:grid; place-items:center;
  padding:calc(var(--pad) + 4.5rem) var(--pad) calc(var(--pad) + 1.6rem);
  max-width:none; margin:0;
}

/* --- abelha + camada de distorção no cursor --- */
.hero__bee{
  margin:0; position:relative;
  /* limitada por largura E por altura. Como ela fica girada ~46deg,
     a caixa visual cresce ~1,19x nos dois eixos — dai os valores menores. */
  width:min(74vw, 72svh, 840px);
  will-change:transform;
}
.hero__bee::after{
  content:""; position:absolute; z-index:0;
  left:8%; top:10%; width:84%; height:78%;
  background:radial-gradient(closest-side, rgba(255,200,0,.30), rgba(255,200,0,0) 72%);
  filter:blur(50px);
}
.hero__bee picture{ display:block; position:relative; z-index:1; }
.hero__bee img{
  width:100%; height:auto;
  animation:beeFloat 8s ease-in-out infinite;
  opacity:0; transform:scale(1.05);
  transition:opacity 1.4s var(--ease) .35s, transform 1.8s var(--ease) .35s;
}
.is-ready .hero__bee img{ opacity:1; transform:scale(1); }
@keyframes beeFloat{
  0%,100%{ translate:0 0; rotate:0deg; }
  50%    { translate:0 -18px; rotate:-1.1deg; }
}
/* quando o WebGL assume, o <img> vira só a fonte da textura */
.hero__bee.has-gl img{ visibility:hidden; }
.hero__bee canvas{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%;
  animation:beeFloat 8s ease-in-out infinite;
}
.hero__bee.has-gl{ cursor:crosshair; }

/* card de informação, canto inferior esquerdo */
.infocard{
  position:absolute; left:var(--pad); bottom:calc(var(--pad) + 2.5rem);
  z-index:4;
  display:grid; justify-items:center; gap:.55rem;
  width:clamp(9rem,11vw,11.5rem);
  padding:1rem .9rem 1.1rem;
  background:#fff;                       /* fundo branco para leitura */
  border:1px solid var(--rule);
  border-radius:6px 22px 6px 22px;
  box-shadow:0 10px 30px rgba(44,41,32,.08);
  text-align:center;
}
.infocard__label{
  font-size:.58rem; font-weight:700;
  letter-spacing:.19em; text-transform:uppercase;
  color:var(--fg-soft);
}
.infocard__glyph{ width:64px; height:40px; color:var(--fg-soft); }
.infocard__place{
  font-family:var(--f-disp); font-weight:800;
  font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
}
.infocard__rule{ width:78%; height:1px; background:var(--rule); }
.infocard__mark{ width:26px; }
.infocard__meta{
  font-family:var(--f-disp); font-weight:800;
  font-size:.62rem; line-height:1.35;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--fg-soft);
}

.scrollcue{
  position:absolute; z-index:4;
  left:50%; transform:translateX(-50%);
  bottom:calc(var(--pad) - .2rem);
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:var(--t-eyebrow); letter-spacing:.19em;
  text-transform:uppercase; color:var(--fg-soft);
  transition:color .3s ease;
}
.scrollcue:hover{ color:var(--honey); }
.scrollcue svg{ width:11px; height:22px; animation:cue 2.2s var(--ease) infinite; }
@keyframes cue{ 0%,100%{ transform:translateY(0); opacity:.55 } 50%{ transform:translateY(5px); opacity:1 } }

.hero__meta{
  position:absolute; z-index:4;
  right:var(--pad); bottom:calc(var(--pad) - .2rem);
  margin:0; font-size:var(--t-eyebrow); letter-spacing:.19em;
  text-transform:uppercase; color:var(--fg-soft); text-align:right;
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{
  position:relative; z-index:3;
  background:var(--honey); color:var(--black);
  padding:.85rem 0; overflow:hidden;
}
.marquee__track{
  display:flex; align-items:center; gap:1.6rem;
  width:max-content; animation:scrollx 34s linear infinite;
}
.marquee span{
  font-family:var(--f-disp); font-weight:800;
  font-size:clamp(1rem,2.1vw,1.55rem);
  letter-spacing:-.02em; text-transform:uppercase; white-space:nowrap;
}
.marquee i{ width:9px; height:9px; flex:none; background:var(--black); transform:rotate(45deg); }
@keyframes scrollx{ to{ transform:translateX(-50%); } }

/* ============================================================
   SEÇÕES
   ============================================================ */
section{ padding-block:var(--sec); }

.section-tag{
  display:flex; align-items:center; gap:.7rem;
  font-size:var(--t-eyebrow); font-weight:600;
  letter-spacing:.19em; text-transform:uppercase;
  color:var(--fg-soft);
  margin-bottom:clamp(1.8rem,4vw,3rem);
  padding-bottom:1rem; border-bottom:1px solid var(--rule-2);
}
.section-tag span{ color:var(--honey); font-family:var(--f-disp); font-weight:800; }

.h2{ font-size:var(--t-h2); text-transform:uppercase; font-stretch:108%; margin-bottom:clamp(1.6rem,3.4vw,2.6rem); }
.lead{ font-size:var(--t-lead); color:var(--fg); line-height:1.4; }

.reveal{
  opacity:0; transform:translateY(30px);
  transition:opacity .9s var(--ease), transform 1s var(--ease);
  transition-delay:calc(var(--d,0) * .09s);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto{ padding-block:clamp(4.5rem,11vh,8.5rem); }
.statement{ font-size:var(--t-h1); text-transform:uppercase; font-stretch:106%; max-width:19ch; }
.statement .line{
  display:block;
  /* máscara da revelação: precisa de folga vertical, senão o overflow:hidden
     corta os acentos das maiúsculas (o Õ de SOLUÇÕES) e a cedilha do Ç.
     O padding abre espaço e a margem negativa devolve, mantendo o ritmo. */
  overflow:hidden;
  padding-top:.22em;    margin-top:-.22em;
  padding-bottom:.16em; margin-bottom:-.16em;
}
.statement .line > i{
  display:block; font-style:normal; transform:translateY(105%);
  transition:transform 1.05s var(--ease);
  transition-delay:calc(var(--l) * .1s);
}
.statement.is-in .line > i{ transform:translateY(0); }
.statement .hl{ color:var(--honey); }

/* ============================================================
   SOBRE
   ============================================================ */
.sobre__grid{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(1.5rem,4vw,4rem); margin-bottom:clamp(3rem,7vw,5.5rem);
}
.sobre__body p{ color:var(--fg-soft); max-width:62ch; }
.sobre__body .lead{ color:var(--fg); }

.mv{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.6rem); margin-bottom:clamp(3rem,7vw,5.5rem);
}
.mv__card{
  padding:clamp(1.5rem,3vw,2.4rem);
  border:1px solid var(--rule); border-radius:var(--r-md);
  background:linear-gradient(160deg, rgba(255,200,0,.06), rgba(255,200,0,0) 55%);
  transition:border-color .5s var(--ease), transform .5s var(--ease);
}
.mv__card:hover{ border-color:rgba(255,200,0,.45); transform:translateY(-4px); }
.mv__card h3{ font-size:var(--t-h3); text-transform:uppercase; color:var(--honey); margin-bottom:.9rem; }
.mv__card p{ color:var(--fg-soft); margin:0; }

.values__title{ font-size:var(--t-h3); text-transform:uppercase; margin-bottom:1.6rem; }
.values__list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(.6rem,1.2vw,1rem);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.values__item{
  display:flex; flex-direction:column; align-items:flex-start; gap:.7rem;
  padding:clamp(1.1rem,2.2vw,1.7rem);
  border:1px solid var(--rule); border-radius:var(--r-md);
  background:linear-gradient(155deg, rgba(255,200,0,.05), rgba(255,200,0,0) 60%);
  transition:transform .5s var(--ease), border-color .5s var(--ease);
}
.values__item:hover{ transform:translateY(-4px); border-color:rgba(255,200,0,.45); }
.values__num{
  font-family:var(--f-disp); font-weight:800; font-size:.72rem;
  letter-spacing:.14em; color:var(--honey);
}
.values__label{
  font-family:var(--f-disp); font-weight:800;
  font-size:clamp(1.05rem,1.7vw,1.3rem);
  line-height:1.15; letter-spacing:-.02em;
}

/* ============================================================
   SERVIÇOS
   ============================================================ */
.svc{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1rem,2vw,1.6rem); }
.svc__card{
  position:relative; overflow:hidden;
  padding:clamp(1.8rem,3.6vw,3.2rem);
  min-height:clamp(19rem,32vw,25rem);
  display:flex; flex-direction:column;
  border:1px solid var(--rule); border-radius:var(--r-lg);
  background:var(--card);
  transition:transform .55s var(--ease), border-color .55s var(--ease);
}
.svc__card::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 100% at 100% 0%, rgba(255,200,0,.16), rgba(255,200,0,0) 60%);
  opacity:0; transition:opacity .6s var(--ease);
}
.svc__card:hover{ transform:translateY(-8px); border-color:rgba(255,200,0,.45); }
.svc__card:hover::before{ opacity:1; }
.svc__card > *{ position:relative; z-index:1; }

.svc__no{ font-family:var(--f-disp); font-weight:800; font-size:.78rem; color:var(--honey); letter-spacing:.14em; margin-bottom:auto; }
.svc__name{ font-size:clamp(1.9rem,4.4vw,3.2rem); text-transform:uppercase; font-stretch:108%; margin-block:1.6rem .9rem; }
.svc__desc{ color:var(--fg-soft); max-width:40ch; margin:0; }
.svc__deco{
  position:absolute; z-index:0; right:-14%; top:-16%; width:min(56%,20rem);
  fill:none; stroke:var(--honey); stroke-width:2.4; stroke-linejoin:round;
  opacity:.16; transition:transform .9s var(--ease), opacity .6s var(--ease);
}
.svc__card:hover .svc__deco{ transform:rotate(60deg) scale(1.06); opacity:.3; }

/* ============================================================
   PROJETOS
   ============================================================ */
.proj{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
  gap:clamp(.9rem,1.7vw,1.4rem); margin-bottom:clamp(2rem,4.5vw,3.4rem);
}
.proj__card{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  min-height:clamp(15rem,24vw,19rem);
  padding:clamp(1.3rem,2.4vw,1.9rem);
  border:1px solid var(--rule); border-radius:var(--r-md);
  background:var(--card);
  transition:transform .5s var(--ease), border-color .5s var(--ease);
}
.proj__card::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cg fill='none' stroke='%23FFC800' stroke-opacity='.14' stroke-width='1'%3E%3Cpath d='M28 0L56 16v32L28 64 0 48V16z'/%3E%3Cpath d='M28 48.5L56 64.5v32L28 112.5 0 96.5v-32z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:56px 97px;
  transition:opacity .6s var(--ease);
}
.proj__card::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(150deg, rgba(255,200,0,.24), rgba(255,200,0,0) 58%);
  opacity:0; transition:opacity .6s var(--ease);
}
.proj__card > *{ position:relative; z-index:1; }
.proj__card:hover{ transform:translateY(-7px); border-color:rgba(255,200,0,.55); }
.proj__card:hover::after{ opacity:1; }
.proj__card:hover::before{ opacity:.9; }

.proj__badge{
  align-self:flex-start;
  font-family:var(--f-disp); font-weight:800;
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--black); background:var(--honey);
  padding:.32rem .6rem; border-radius:100px; margin-bottom:.9rem;
}
.proj__cat{ font-size:var(--t-eyebrow); letter-spacing:.16em; text-transform:uppercase; color:var(--fg-soft); margin-bottom:auto; }
.proj__name{ font-size:clamp(1.5rem,2.9vw,2.15rem); text-transform:uppercase; font-stretch:106%; margin-block:1.4rem .5rem; }
.proj__url{ font-size:.85rem; color:var(--fg-soft); }
.proj__go{
  position:absolute; z-index:2;
  right:clamp(1.3rem,2.4vw,1.9rem); top:clamp(1.3rem,2.4vw,1.9rem);
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; border:1px solid var(--rule);
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.proj__go svg{ width:14px; height:14px; }
.proj__card:hover .proj__go,
.svc__card:hover .proj__go{ background:var(--honey); color:var(--black); border-color:var(--honey); transform:rotate(45deg); }

.projlist{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule-2); }
.projlist li{ border-bottom:1px solid var(--rule-2); }
.projlist a{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr) minmax(0,1fr) auto;
  align-items:center; gap:1rem; padding:clamp(1.1rem,2.2vw,1.6rem) .3rem;
  transition:padding-inline .5s var(--ease);
}
.projlist a:hover{ padding-inline:1.2rem .3rem; }
.projlist__name{
  font-family:var(--f-disp); font-weight:800;
  font-size:clamp(1.05rem,2vw,1.5rem); text-transform:uppercase; letter-spacing:-.02em;
  transition:color .35s ease;
}
.projlist a:hover .projlist__name{ color:var(--honey); }
.projlist__cat{ font-size:var(--t-eyebrow); letter-spacing:.16em; text-transform:uppercase; color:var(--fg-soft); }
.projlist__url{ font-size:.85rem; color:var(--fg-soft); }
.projlist__go{
  width:34px; height:34px; border-radius:50%; justify-self:end;
  display:grid; place-items:center; border:1px solid var(--rule);
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.projlist__go svg{ width:13px; height:13px; }
.projlist a:hover .projlist__go{ background:var(--honey); color:var(--black); border-color:var(--honey); transform:rotate(45deg); }

/* ============================================================
   CONTATO — clara
   ============================================================ */
.contato__title{ font-size:var(--t-h1); text-transform:uppercase; font-stretch:108%; margin-bottom:clamp(2rem,4.5vw,3.4rem); }
.contato__title .word{ display:inline-block; white-space:nowrap; }
.contato__title .word + .word{ margin-left:.22em; }
.contato__title .char{
  display:inline-block; opacity:0; transform:translateY(.7em);
  transition:opacity .7s var(--ease), transform .8s var(--ease);
  transition-delay:calc(var(--c) * .028s);
}
.contato__title.is-in .char{ opacity:1; transform:none; }

.contato__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
  gap:clamp(1.4rem,3vw,2.4rem);
  padding-block:clamp(1.6rem,3.4vw,2.6rem);
  border-top:1px solid var(--rule-2); border-bottom:1px solid var(--rule-2);
  margin-bottom:clamp(2.4rem,5vw,4rem);
}
.contato__block h4{
  font-family:var(--f-body); font-weight:600;
  font-size:var(--t-eyebrow); letter-spacing:.19em; text-transform:uppercase;
  color:var(--fg-soft); margin-bottom:.7rem;
}
.contato__block p{ margin:0; font-size:1.02rem; line-height:1.55; }
.contato__block a{ transition:color .3s ease; }
.contato__block a:hover{ color:var(--honey); }

.bigcta{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-family:var(--f-disp); font-weight:800;
  font-size:clamp(1.2rem,4.4vw,3rem); letter-spacing:-.03em;
  padding:clamp(1.1rem,2.6vw,2rem) clamp(1.2rem,3vw,2.4rem);
  border:1px solid var(--rule); border-radius:100px;
  position:relative; overflow:hidden;
  transition:color .45s var(--ease), border-color .45s var(--ease);
}
.bigcta::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--honey); transform:translateY(101%);
  transition:transform .55s var(--ease);
}
.bigcta > *{ position:relative; z-index:1; }
.bigcta svg{ width:clamp(20px,3vw,34px); height:auto; flex:none; transition:transform .5s var(--ease); }
.bigcta:hover{ color:var(--black); border-color:var(--honey); }
.bigcta:hover::before{ transform:translateY(0); }
.bigcta:hover svg{ transform:translate(5px,-5px); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ padding-block:clamp(3rem,7vw,5rem) clamp(1.4rem,3vw,2rem); border-top:1px solid var(--rule-2); }
.foot__top{ display:flex; align-items:center; gap:clamp(1.2rem,3vw,2.4rem); flex-wrap:wrap; padding-bottom:clamp(2.4rem,5vw,4rem); }
.hivemark--lg{ width:clamp(58px,8vw,92px); flex:none; }
.foot__claim{
  margin:0; font-family:var(--f-disp); font-weight:800;
  font-size:clamp(1.3rem,3.4vw,2.4rem); line-height:1.05;
  letter-spacing:-.03em; text-transform:uppercase;
}
.foot__bottom{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  padding-top:clamp(1.2rem,2.6vw,1.8rem); border-top:1px solid var(--rule-2);
}
.foot__bottom p{ margin:0; font-size:.82rem; color:var(--fg-soft); }
.foot__nav{ display:flex; gap:1.3rem; }
.foot__nav a{ font-size:.82rem; color:var(--fg-soft); transition:color .3s ease; }
.foot__nav a:hover{ color:var(--honey); }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1080px){ .sobre__grid{ grid-template-columns:1fr; } }
@media (max-width:900px){
  /* reserva espaço embaixo para o card e a deixa de rolagem */
  .hero{ padding:calc(var(--pad) + 4.5rem) var(--pad) calc(var(--pad) + 8rem); }
  .hero__bee{ width:min(94vw, 54svh, 576px); }
  .hero__meta{ display:none; }
  .scrollcue{ left:auto; right:var(--pad); transform:none; bottom:calc(var(--pad) + .6rem); }
  /* o card continua visível, só menor */
  .infocard{
    width:7.6rem; padding:.7rem .55rem .8rem; gap:.4rem;
    bottom:var(--pad);
  }
  .infocard__glyph{ width:46px; height:29px; }
  .infocard__mark{ width:20px; }
  .clearboard{ bottom:calc(var(--pad) + 3.4rem); }
  .menu{ grid-template-columns:1fr; }
  .menu__visual{ display:none; }
  .menu__panel{ justify-items:start; text-align:left; }
  .menu__nav{ justify-items:start; }
  .menu__badge{ justify-items:start; }
  .menu__contact{ justify-items:start; text-align:left; }
  .mv, .svc{ grid-template-columns:1fr; }
  .values__list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .projlist a{ grid-template-columns:1fr auto; row-gap:.35rem; }
  .projlist__cat, .projlist__url{ grid-column:1; }
  .projlist__go{ grid-row:1 / span 3; }
}
@media (max-width:560px){
  .bigcta{ border-radius:var(--r-lg); }
  .values__list{ grid-template-columns:1fr; }
  .brand__l1{ font-size:1.25rem; }
  .brand__l2{ font-size:1.4rem; }
  .pill span{ display:none; }          /* vira só o ícone, libera largura */
  .pill{ padding:.7rem .8rem; }
  .menubtn{ width:46px; height:46px; }
  .hero__bee{ width:min(90vw, 44svh, 440px); }
}

/* telas baixas (celular deitado, janelas curtas):
   a altura é o recurso escasso — a abelha encolhe e o card vira faixa horizontal */
@media (max-height:620px){
  .hero{ padding:calc(var(--pad) + 3.2rem) var(--pad) calc(var(--pad) + 1rem); }
  .hero__bee{ width:min(46vw, 70svh, 560px); }
  .infocard{
    flex-flow:row; display:flex; align-items:center; gap:.5rem;
    width:auto; padding:.45rem .7rem;
    border-radius:6px 14px 6px 14px;
    bottom:var(--pad);
  }
  .infocard__glyph{ display:none; }
  .infocard__rule{ width:1px; height:18px; }
  .infocard__mark{ width:16px; }
  .infocard__label{ font-size:.52rem; }
  .infocard__place{ font-size:.62rem; }
  .infocard__meta{ font-size:.52rem; }
  .infocard__meta br{ display:none; }
  .scrollcue{ display:none; }
  .clearboard{ bottom:calc(var(--pad) + 2.6rem); }
}

/* ============================================================
   MOVIMENTO REDUZIDO
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
    .reveal, .contato__title .char{ opacity:1 !important; transform:none !important; }
  .statement .line > i{ transform:none !important; }
  .hero__bee img{ opacity:1 !important; transform:none !important; }
  .combcanvas{ display:none; }
}

/* ============================================================
   PÁGINAS INTERNAS (projeto / serviço)
   Mesma paleta, tipografia e fundo da home.
   ============================================================ */
.phero{
  padding:calc(var(--pad) + 8rem) 0 clamp(2.5rem,6vw,4.5rem);
}
.backlink{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:var(--t-eyebrow); font-weight:600;
  letter-spacing:.19em; text-transform:uppercase;
  color:var(--fg-soft); margin-bottom:clamp(1.4rem,3vw,2.2rem);
  transition:color .3s ease, gap .3s var(--ease);
}
.backlink:hover{ color:var(--honey); gap:.85rem; }
.backlink svg{ width:14px; height:14px; }

.phero__eyebrow{
  display:block; font-size:var(--t-eyebrow); font-weight:600;
  letter-spacing:.19em; text-transform:uppercase;
  color:var(--honey); margin-bottom:1rem;
}
.phero__title{
  font-size:var(--t-h1); text-transform:uppercase;
  font-stretch:108%; margin-bottom:clamp(1rem,2.4vw,1.6rem);
}
.phero__lead{
  font-size:var(--t-lead); color:var(--fg-soft);
  max-width:48ch; line-height:1.4; margin-bottom:clamp(1.4rem,3vw,2.2rem);
}

/* bloco de metadados */
.pmeta{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));
  gap:clamp(1.2rem,2.6vw,2rem);
  padding-block:clamp(1.4rem,3vw,2.2rem);
  border-top:1px solid var(--rule-2); border-bottom:1px solid var(--rule-2);
}
.pmeta dt{
  font-size:var(--t-eyebrow); font-weight:600;
  letter-spacing:.19em; text-transform:uppercase;
  color:var(--fg-soft); margin-bottom:.5rem;
}
.pmeta dd{ margin:0; font-size:1rem; font-weight:500; line-height:1.4; }
.pmeta dd a{ border-bottom:1px solid var(--rule); transition:color .3s ease, border-color .3s ease; }
.pmeta dd a:hover{ color:var(--honey); border-color:var(--honey); }

/* corpo */
.pbody{ padding-block:clamp(3rem,7vw,5.5rem); }
.pblock{
  display:grid; grid-template-columns:minmax(0,.4fr) minmax(0,1fr);
  gap:clamp(1.2rem,4vw,3.5rem);
  padding-block:clamp(1.8rem,4vw,3rem);
  border-top:1px solid var(--rule-2);
}
.pblock:first-child{ border-top:0; }
.pblock h2{
  font-size:var(--t-h3); text-transform:uppercase;
  font-stretch:106%; align-self:start;
}
.pblock p{ color:var(--fg-soft); max-width:62ch; }
.pblock p:last-child{ margin-bottom:0; }
.pblock strong{ color:var(--fg); font-weight:600; }

/* aviso de conteúdo a preencher */
.todo{
  display:block; padding:1rem 1.2rem;
  border:1px dashed rgba(255,200,0,.55); border-radius:var(--r-sm);
  background:rgba(255,200,0,.06);
  font-size:.9rem; color:var(--fg-soft);
}
.todo b{ color:var(--honey); font-weight:700; }

/* lista de entregas */
.plist{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.plist li{
  display:flex; gap:.7rem; align-items:baseline;
  color:var(--fg-soft);
}
.plist li::before{
  content:""; width:8px; height:9px; flex:none;
  background:var(--honey);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}

/* outros projetos / serviços */
.prelated{ padding-block:clamp(3rem,7vw,5rem); border-top:1px solid var(--rule-2); }
.prelated__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));
  gap:clamp(.9rem,1.7vw,1.3rem);
}

/* CTA final */
.pcta{
  padding-block:clamp(3rem,7vw,5rem);
  border-top:1px solid var(--rule-2);
  display:grid; gap:1.4rem; justify-items:start;
}
.pcta h2{ font-size:var(--t-h2); text-transform:uppercase; font-stretch:106%; max-width:16ch; }

@media (max-width:820px){
  .pblock{ grid-template-columns:1fr; gap:.9rem; }
}

/* captura da home do cliente na página de projeto */
.pshot{
  margin:0 0 clamp(1.4rem,3vw,2.2rem);
  border:1px solid var(--rule); border-radius:var(--r-md);
  overflow:hidden; line-height:0;
  box-shadow:0 24px 60px rgba(44,41,32,.14);
}
.pshot img{ width:100%; height:auto; }

/* ============================================================
   FITA DE TECNOLOGIAS — irmã da fita amarela, porém branca
   ============================================================ */
.techstrip{ padding-block:0; }
.marquee--tech{
  background:#fff; color:var(--dark);
  padding:clamp(1.5rem,3vw,2.4rem) 0;      /* mais grossa que a amarela */
  border-block:1px solid rgba(44,41,32,.10);
}
.marquee--tech .marquee__track{
  animation-direction:reverse;              /* corre ao contrário da amarela */
  animation-duration:46s;
  gap:2.2rem;
}
.marquee--tech span{
  font-size:clamp(1.1rem,2.4vw,1.85rem);
  letter-spacing:-.02em;
  text-transform:none;                      /* nomes de tecnologia mantêm o caixa */
}
.marquee--tech i{
  width:9px; height:10px; background:var(--honey); transform:none;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}

/* ============================================================
   MURAL DE CLIENTES — nomes tipográficos; trocar por SVG oficial
   quando tiver os arquivos de marca
   ============================================================ */
.clients{ padding-block:clamp(3rem,7vw,5rem); }
.clientrail{ overflow:hidden; }
.clientrail__track{
  display:flex; align-items:center;
  width:max-content;
  animation:scrollx 42s linear infinite;
  /* sem gap: o espaçamento vai como margem no item, para que cada grupo
     inclua o próprio vão. Com gap, 10 itens dão 9 vãos e o -50% cairia
     meio vão fora, fazendo o loop saltar a cada volta. */
}
/* pausa ao passar o mouse: dá tempo de ver a marca (e a cor volta no hover) */
.clientrail:hover .clientrail__track{ animation-play-state:paused; }
.clientrail__item{
  flex:none;
  display:grid; justify-items:center; align-content:center; gap:.55rem;
  min-height:5.5rem; text-align:center;
  margin-right:clamp(2.5rem,6vw,6rem);
}
.clientwall__logo{
  /* Sem max-height comum: logos de proporções muito diferentes precisam de
     equilíbrio ÓPTICO, não de caixa igual. Cada uma é dimensionada abaixo.
     Também não uso brightness(0): isso vira silhueta chapada e destrói marcas
     com estrutura interna (o roundel da BMW viraria um disco preto). */
  width:auto; height:auto;
  max-width:100%;
  filter:grayscale(1);
  opacity:.7;
  transition:opacity .4s var(--ease), filter .4s var(--ease);
}
/* no tema escuro, inverte para a marca não sumir no fundo */
:root[data-theme="dark"] .clientwall__logo{ filter:grayscale(1) invert(1) brightness(1.6); }

.clientrail__item:hover .clientwall__logo{ filter:none; opacity:1; }
:root[data-theme="dark"] .clientrail__item:hover .clientwall__logo{
  filter:invert(1) brightness(1.6);
}

/* equilíbrio óptico por marca — ancorado por data-logo, não por posição,
   porque o carrossel duplica os itens para fechar o loop */
[data-logo="sns"]  .clientwall__logo{ width:clamp(120px,11vw,170px); }   /* 5.9:1 */
[data-logo="bmw"]  .clientwall__logo{ height:clamp(42px,4.2vw,58px); }   /* 1.8:1 */
[data-logo="zain"] .clientwall__logo{ width:clamp(105px,9.5vw,148px); }  /* 3.8:1 */
[data-logo="sncf"] .clientwall__logo{ width:clamp(84px,7.6vw,118px); }   /* 2.0:1 */
[data-logo="btc"]  .clientwall__logo{ width:clamp(84px,7.6vw,118px); }   /* 2.0:1 */
[data-logo="bvg"]  .clientwall__logo{ height:clamp(42px,4.2vw,58px); }   /* 1.1:1 */

.clientrail__item:has(.clientwall__logo) .clientwall__name{ display:none; }
.clientwall__kind{
  font-style:normal; font-size:.6rem; font-weight:700;
  letter-spacing:.17em; text-transform:uppercase; color:var(--fg-soft);
}

/* ============================================================
   SELETOR DE IDIOMA
   ============================================================ */
.langswitch{
  display:inline-flex; align-items:center; gap:1px;
  padding:3px; border:1px solid var(--rule); border-radius:12px;
  margin-right:.35rem;
}
.langswitch a{
  appearance:none; border:0; background:transparent; cursor:pointer;
  font-family:var(--f-disp); font-weight:800;
  font-size:.68rem; letter-spacing:.08em;
  color:var(--fg-soft); padding:.42rem .5rem; border-radius:9px;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.langswitch a:hover{ color:var(--fg); }
.langswitch a.is-on{ background:var(--honey); color:var(--black); }
@media (max-width:560px){
  .langswitch{ padding:2px; margin-right:.2rem; }
  .langswitch a{ padding:.36rem .38rem; font-size:.62rem; }
}

/* ============================================================
   FORMULÁRIO DE CONTATO
   ============================================================ */
.cform{ display:grid; gap:clamp(.8rem,1.6vw,1.1rem); margin-bottom:clamp(2rem,4vw,3rem); }
.cform__row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)); gap:inherit; }
.cform__field{ display:grid; gap:.45rem; }
.cform__field > span{
  font-size:var(--t-eyebrow); font-weight:600;
  letter-spacing:.19em; text-transform:uppercase; color:var(--fg-soft);
}
.cform__field > span i{ font-style:normal; opacity:.7; letter-spacing:.1em; }
.cform input, .cform textarea{
  font-family:var(--f-body); font-size:1rem; color:var(--fg);
  background:transparent; border:1px solid var(--rule); border-radius:var(--r-sm);
  padding:.85rem 1rem; width:100%; resize:vertical;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.cform input:focus, .cform textarea:focus{
  outline:none; border-color:var(--honey);
  background:color-mix(in srgb, var(--honey) 6%, transparent);
}
.cform input:user-invalid, .cform textarea:user-invalid{ border-color:#c0492b; }
.cform__trap{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.cform__foot{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.cform__status{ margin:0; font-size:.9rem; color:var(--fg-soft); }
.cform__status.is-ok{ color:#2f7d4f; font-weight:600; }
.cform__status.is-err{ color:#c0492b; font-weight:600; }
.cform button[disabled]{ opacity:.55; pointer-events:none; }