/* ============================================================================
   GRUCON — SISTEMA MOBILE DEDICADO  (carregado só com media="(max-width:767px)")
   Isolado do desktop: nada aqui afeta telas ≥768px. "Mobile é mobile."
   Projeto: tipografia menor e refinada, imagens contidas, ritmo vertical amplo,
   alvos de toque generosos, diagramação pensada para o polegar.
   ========================================================================== */

/* ---------- TOKENS MOBILE ---------- */
:root{
  /* compat com regras-base que usam estas variáveis */
  --safe:22px;
  --shell-x:22px;
  --section-y:clamp(56px,12vw,80px);
  --col-gap:16px;
  --shadow:0 16px 38px -24px rgba(19,20,23,.28);

  /* sistema próprio */
  --m-gut:22px;                                   /* recuo lateral   */
  --m-sec:clamp(58px,13vw,86px);                  /* respiro vertical entre seções */
  --m-radius:14px;

  /* escala tipográfica — enxuta e elegante */
  --m-display:clamp(2rem, 1.34rem + 2.9vw, 2.55rem);  /* títulos serif grandes */
  --m-h2:clamp(1.62rem, 1.16rem + 2vw, 2.02rem);      /* títulos de seção      */
  --m-slogan:clamp(1.6rem, 1.15rem + 2vw, 2rem);      /* slogans serif         */
  --m-lede:.875rem;                               /* 14px — parágrafos-guia */
  --m-body:.8125rem;                              /* 13px — corpo/descrições */
  --m-small:.75rem;                               /* 12px */
  --m-eyebrow:.625rem;                            /* 10px — sobrancelhas   */
  --m-cap:.625rem;                                /* 10px — legendas       */
  --m-micro:.5625rem;                             /* 9px  — micro-rótulos  */
}

/* ---------- BASE ---------- */
html{scroll-snap-type:none;scroll-padding-top:60px;-webkit-text-size-adjust:100%}
body{
  font-size:var(--m-body);
  line-height:1.66;
  letter-spacing:.002em;
  padding-bottom:calc(62px + env(safe-area-inset-bottom,0px)); /* barra inferior */
}
main{overflow-x:clip}
main > section{
  display:block;
  box-sizing:border-box;
  padding-block:var(--m-sec);
  scroll-snap-align:none!important;
}
/* hero e manifesto mantêm a altura cheia (classe vence o tipo acima) */
.wrap{padding-inline:var(--m-gut)}
/* ritmo vertical uniforme entre as seções de conteúdo (hero/manifesto à parte) */
.statement,.metrics,.about,.partners,.essence,.works,.invest,.contact{padding-block:var(--m-sec)}

/* fundo vivo — aurora azul lenta sobre o papel (sem WebGL) */
#grain{opacity:.045}
body::before{
  inset:-14%;opacity:1;background-repeat:no-repeat;
  background:
    radial-gradient(48% 36% at 16% 12%,rgba(62,184,232,.13),transparent 60%),
    radial-gradient(44% 32% at 86% 22%,rgba(62,184,232,.08),transparent 60%),
    radial-gradient(60% 44% at 50% 94%,rgba(13,93,128,.07),transparent 62%);
  animation:mobAura 26s ease-in-out infinite alternate;will-change:transform;
}
@keyframes mobAura{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2.5%,-3%,0) scale(1.09)}
  100%{transform:translate3d(-1.5%,2%,0) scale(1.04)}
}

/* ---------- PRIMITIVOS TIPOGRÁFICOS ---------- */
.eyebrow{
  gap:9px;font-size:var(--m-eyebrow)!important;margin-bottom:15px!important;
  letter-spacing:.24em!important;font-weight:500;color:var(--ink-3)
}
.eyebrow i{width:18px}
.display{font-size:var(--m-display)!important;line-height:1.06!important;letter-spacing:-.02em}
.h-sec{font-size:var(--m-h2)!important;line-height:1.1!important;letter-spacing:-.015em}
.lede,p.lede{font-size:var(--m-lede)!important;line-height:1.62!important;color:var(--ink-2)}
.sec-head{margin-bottom:22px!important;gap:14px}
.kicker{font-size:var(--m-micro)!important}

/* botões — cheios, toque confortável */
.btn{padding:14px 22px!important;font-size:var(--m-micro)!important;letter-spacing:.18em;gap:10px;border-radius:999px}
.btn svg{width:13px;height:13px}

/* ---------- NAV / TOPO ---------- */
#nav{backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
.nav__in{height:56px}
.nav__logo{height:23px}
.nav__cta{display:none!important}
.burger{width:26px}
#spine{display:none!important}
#prog{height:2px}

/* menu full-screen (burger) */
#menu{padding:76px var(--m-gut) 96px}
.menu__list a{font-size:1.75rem;letter-spacing:.01em;padding:9px 0}
.menu__list a em{font-size:.7rem}
.menu__foot{margin-top:28px;gap:14px;font-size:var(--m-micro)!important}

/* barra inferior — navegação com o polegar */
.mob-bar{
  display:grid;grid-template-columns:repeat(4,1fr);
  position:fixed;left:0;right:0;bottom:0;z-index:898;
  background:rgba(247,247,243,.9);
  backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25);
  border-top:1px solid var(--line-2);
  padding:5px 6px calc(5px + env(safe-area-inset-bottom,0px));
}
.mob-bar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:8px 2px 7px;font-size:var(--m-micro);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);border-radius:11px;transition:color .25s,background .25s
}
.mob-bar a svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6}
.mob-bar a.is,.mob-bar a:active{color:var(--blue-deep);background:rgba(62,184,232,.1)}
.mob-bar__cta{color:#fff!important;background:var(--ink);font-weight:500}
.mob-bar__cta svg{stroke:#fff}

/* =====================================================================
   HERO — papel + brilho suave, conteúdo ancorado embaixo (sem vídeo)
   ===================================================================== */
.hero{
  min-height:100svh;min-height:100dvh;
  padding-block:0!important;
  display:flex!important;flex-direction:column;justify-content:center;
  overflow:hidden;background:var(--paper);position:relative;
}
.hero::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(92% 68% at 86% 6%,rgba(62,184,232,.16),transparent 55%),
    radial-gradient(72% 52% at 10% 96%,rgba(19,20,23,.05),transparent 52%);
  animation:heroGlow 18s ease-in-out infinite alternate;will-change:transform,opacity;
}
@keyframes heroGlow{0%{transform:translate3d(0,0,0) scale(1);opacity:1}100%{transform:translate3d(-3%,2.5%,0) scale(1.12);opacity:.82}}
.hero__ambient,.hero__sym,.hero__scroll{display:none!important}
.hero__inner{
  position:relative;z-index:2;flex:1;
  display:flex;flex-direction:column;justify-content:center;
  width:100%;padding:72px var(--m-gut) 60px;margin-top:0;background:transparent;
}
.hero__text{grid-column:1/-1}
.hero .eyebrow{margin-bottom:18px!important}
.hero__meta{gap:6px 14px;font-size:var(--m-micro)!important;margin-bottom:20px;color:var(--ink-3)}
.hero__meta span{position:relative}
.hero__slogan{margin:0 0 18px}
.hero__slogan-a{font-size:1rem!important;letter-spacing:-.01em;color:var(--ink-2);font-weight:300}
.hero__slogan-b{font-size:var(--m-slogan)!important;letter-spacing:-.03em;line-height:1.02}
.hero__lede{font-size:var(--m-lede)!important;line-height:1.58;max-width:38ch;color:var(--ink-2)}

/* =====================================================================
   STATEMENT — cartucho com a frase dentro do símbolo
   ===================================================================== */
.statement{background:var(--mist);padding-block:clamp(46px,11vw,66px)}
.statement .wrap{padding-inline:var(--m-gut)}
.statement__shell{--stmt-r:80px;width:100%;max-width:278px;margin-inline:auto}
.statement__panel{aspect-ratio:471.85/593.66;padding:30px 26px}
.statement__in{max-width:17ch}
.statement__q{font-size:1.12rem!important;line-height:1.36}
.statement__cite{display:inline-flex;font-size:var(--m-micro);margin-top:20px}

/* =====================================================================
   MÉTRICAS — painel claro (estética do site), 3 números lado a lado
   ===================================================================== */
.metrics__inner{padding-inline:var(--m-gut)}
.metrics__head{margin-bottom:24px}
.metrics__head .metrics__lede{display:block;font-size:var(--m-lede)!important;margin-top:12px;color:var(--ink-2)}
.metrics__panel{
  position:relative;overflow:hidden;margin:0;
  padding:26px 6px 24px;border-radius:18px;
  background:var(--mist);border:1px solid var(--line);
  box-shadow:0 22px 46px -32px rgba(19,20,23,.42)
}
.metrics__row{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0;padding:0;align-items:stretch}
.metrics__row .metric{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;
  margin:0;padding:2px 6px;border:0;border-radius:0;background:transparent;box-shadow:none
}
.metrics__row .metric + .metric{border-left:1px solid var(--line)}
.metric__n{justify-content:center;align-items:baseline;font-size:clamp(1.95rem, 1.45rem + 2.3vw, 2.45rem)!important;line-height:.9;color:var(--ink)}
.metric__n .metric__u{color:var(--blue-soft)}
.metric__n em{color:var(--blue)}
.metric__c{
  display:block;text-align:center;margin:10px 0 0;padding:0;max-width:none;
  font-size:8px!important;letter-spacing:.09em;line-height:1.34;text-transform:uppercase;color:var(--ink-3)
}
.metric__d{display:none}

/* =====================================================================
   SOBRE — foto contida no topo, depois a copy
   ===================================================================== */
.about.wrap{padding-inline:var(--m-gut);max-width:none}
.about__grid{display:block}
.about__media{aspect-ratio:3/2;max-height:none;border-radius:var(--m-radius);margin-bottom:24px;overflow:hidden}
.about__cap{font-size:var(--m-micro)!important}
.about__copy .display{font-size:var(--m-display)!important;margin-top:0}
.about__slogan{margin-bottom:16px}
.about__slogan-a{font-size:1rem!important;letter-spacing:-.02em;color:var(--ink-2);font-weight:300}
.about__slogan-b{font-size:var(--m-slogan)!important;letter-spacing:-.03em;line-height:1.04}
.about__copy .lede{font-size:var(--m-lede)!important;line-height:1.6}
.about__copy .lede+.lede{display:block;margin-top:13px}
.about__vals{gap:8px;margin-top:22px;flex-wrap:wrap}
.about__vals span{padding:7px 13px;font-size:var(--m-micro)!important;letter-spacing:.08em;border-radius:999px}

/* =====================================================================
   PARCEIROS — 1 coluna, cartão horizontal legível
   ===================================================================== */
.partners .wrap{padding-inline:var(--m-gut)}
.partners__head{margin-bottom:24px}
.partners__head .lede{display:block;font-size:var(--m-lede)!important}
.partners__grid{grid-template-columns:1fr;gap:14px}
.partner__card{
  gap:16px;padding:18px 16px;align-items:center;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  background:var(--paper);border-radius:var(--m-radius)
}
.partner__avatar{width:66px;height:66px;flex:0 0 66px}
.partner__badge-icon{width:24px;height:24px;padding:4px;right:-6px;bottom:-2px}
.partner__cat{font-size:var(--m-micro)!important;margin-bottom:6px;gap:6px}
.partner__cat i{width:14px}
.partner__title{font-size:1.06rem!important;line-height:1.12;margin-bottom:2px}
.partner__who{font-size:var(--m-small)!important;margin-bottom:0;color:var(--ink-3)}
.partner__desc{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:var(--m-small)!important;line-height:1.55;margin-top:9px;max-width:none;color:var(--ink-2)
}
.partner__more{
  display:inline-flex;align-items:center;gap:6px;margin-top:11px;padding:6px 0;
  font-size:var(--m-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--blue-deep);
  background:none;border:none;font-family:var(--sans);cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent
}
.partner__more span:last-child{font-size:14px;line-height:.6;transition:transform .35s var(--ez)}
.partner__card.is-open .partner__desc{-webkit-line-clamp:unset;display:block;overflow:visible}
.partner__card.is-open .partner__more span:last-child{transform:rotate(45deg)}
.partner__brands,.partner__sig{display:none}

/* =====================================================================
   ESSÊNCIA — grade 2×2, cartões-imagem com rótulo (tudo na tela, sem rolar)
   ===================================================================== */
.essence__head{margin-bottom:20px}
.essence__hint{display:none!important}
.essence__rail{padding-inline:var(--m-gut)}
.essence__rail::-webkit-scrollbar{display:none}
.essence__row{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
/* iOS: em vez de aspect-ratio (que colapsa no WebKit dentro do grid), a altura
   vem de um spacer ::before com padding-top — funciona em qualquer versão de Safari. */
.ecard{aspect-ratio:auto;border-radius:12px}
.ecard::before{content:"";display:block;padding-top:122%}
.ecard::after{height:70%}
.ecard__txt{padding:13px 12px}
.ecard__idx{font-size:var(--m-micro)!important;margin-bottom:6px;letter-spacing:.24em}
.ecard__ttl{font-size:.98rem!important;margin-bottom:5px;line-height:1.1}
.ecard__d{
  font-size:.68rem!important;line-height:1.42;color:rgba(244,244,240,.78);
  -webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden
}
.ecard:hover img{transform:none}

/* =====================================================================
   MANIFESTO — tela cheia, água (caustic) visível
   ===================================================================== */
.manifesto{
  min-height:100svh;min-height:100dvh;
  padding:var(--m-sec) var(--m-gut);
  display:flex;align-items:center;justify-content:center;
  background:#0c0d0f;overflow:hidden;position:relative
}
.manifesto__ambient{display:block}
.manifesto__ambient video{display:none}
.manifesto__caustic{opacity:.72}
.manifesto__stage{width:min(264px,72vw)}
.manifesto__in{max-width:200px;margin-top:4%}
.manifesto .eyebrow.on-dark{margin-bottom:12px!important}
.manifesto__sl .a{font-size:.82rem!important;font-weight:300}
.manifesto__sl .b{font-size:1.78rem!important;letter-spacing:-.02em}
.manifesto .lede.on-dark{font-size:var(--m-body)!important;margin-top:14px;line-height:1.56}

/* =====================================================================
   EMPREENDIMENTOS — trilho horizontal deslizável (app-like)
   ===================================================================== */
.works__head{margin-bottom:20px}
.works__head .sec-head__body .lede{display:block;font-size:var(--m-lede)!important}
.works__hint{display:flex;font-size:var(--m-micro)!important;margin-top:12px;color:var(--ink-3)}
.works__rail{margin:0;width:100%;overflow:visible}
.works__scroll{
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding-inline:var(--m-gut);scroll-padding-inline:var(--m-gut)
}
.works__scroll::-webkit-scrollbar{display:none}
.works__row{display:flex;flex-direction:row;width:max-content;gap:14px;padding-right:var(--m-gut);grid-template-columns:none;max-width:none}
.work,.work--wide{
  flex:0 0 76vw;width:76vw;max-width:330px;min-width:0;
  scroll-snap-align:center;aspect-ratio:3/4;border-radius:var(--m-radius)
}
.work__meta{padding:18px}
.work__status{font-size:var(--m-micro)!important;padding:4px 9px;margin-bottom:12px}
.work__cat{font-size:var(--m-micro)!important;margin-bottom:8px;letter-spacing:.14em}
.work__name{font-size:1.22rem!important;margin-bottom:4px;line-height:1.08}
.work__area{margin:2px 0 10px}
.work__area b{font-size:1.7rem!important}
.work__sub{font-size:var(--m-small)!important;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}

/* =====================================================================
   INVESTIDORES — citação + linhas
   ===================================================================== */
.invest.wrap{padding-inline:var(--m-gut)}
.invest__grid{display:block}
.invest__q{display:block;font-size:1.2rem!important;line-height:1.46;margin-top:16px}
.invest__cite{display:inline-flex;font-size:var(--m-micro);margin-top:14px}
.invest__list{margin-top:26px}
.invest__row{grid-template-columns:30px 1fr;gap:12px;padding:16px 0}
.invest__row:hover{padding-left:0}
.invest__row i{font-size:var(--m-micro)!important;padding-top:5px}
.invest__row b{font-size:1rem!important;margin-bottom:6px}
.invest__row span{font-size:var(--m-small)!important;line-height:1.55}

/* =====================================================================
   CONTATO — empilhado: título, cartão, mapa, fachada, formulário
   ===================================================================== */
.contact.wrap{padding-inline:var(--m-gut)}
.contact .display{font-size:var(--m-display)!important}
.contact__grid{display:block;margin-top:24px}
.contact__box{padding:22px 20px;margin-bottom:18px}
.contact__box>.lede{display:block;font-size:var(--m-lede)!important}
.contact__box h3{font-size:1.42rem!important;margin-bottom:14px}
.contact__rows{margin-top:22px}
.contact__r{padding:13px 0;font-size:var(--m-small)}
.contact__r b{font-size:var(--m-micro);min-width:60px}
.social{gap:9px;margin-top:24px}
.social a{width:44px;height:44px}
.social svg{width:17px;height:17px}
.contact__col{display:flex;flex-direction:column;gap:14px}
.contact__map{border-radius:var(--m-radius)}
.contact__map,.contact__map iframe{min-height:0;flex:none}
.contact__map{height:210px}
.contact__map iframe{height:100%}
.contact__facade{border-radius:var(--m-radius);flex:none;min-height:0;height:180px}
.contact__form-wrap{margin-top:26px}
.lead-form h4{font-size:1.05rem!important;margin-bottom:14px}
.lead-form__row{gap:12px;margin-bottom:12px}
.lead-form label{font-size:var(--m-micro)}
.lead-form input,.lead-form select,.lead-form textarea{padding:13px 14px;font-size:.875rem}
.lead-form textarea{min-height:104px}

/* =====================================================================
   RODAPÉ — centralizado e enxuto
   ===================================================================== */
.foot__nav{display:none}
.foot{padding-block:20px 14px;text-align:center}
.foot__top{flex-direction:column;align-items:center;gap:2px;margin-bottom:0}
.foot__brand{display:flex;flex-direction:column;align-items:center}
.foot__logo-clip{margin-bottom:8px;opacity:1}
.foot__logo{height:28px}
.foot__sub{font-size:.66rem!important;line-height:1.45;max-width:none;color:var(--ink-3);margin:0}
.foot__tag{font-size:.74rem!important;line-height:1.4;max-width:none;color:var(--ink);font-weight:500;margin-top:3px}
.foot__bot{flex-direction:column;align-items:center;gap:5px;padding-top:12px;margin-top:12px;font-size:var(--m-micro)!important;line-height:1.5}
.foot__priv{font-size:var(--m-micro)!important;letter-spacing:.18em;margin-bottom:2px;color:var(--ink-2)}

/* ---------- WHATSAPP — acima da barra inferior ---------- */
.wa-fab{right:14px;bottom:calc(74px + env(safe-area-inset-bottom,0px));width:46px;height:46px}
.wa-fab:hover{width:46px}
.wa-fab:hover .wa-fab__tx{opacity:0}
.wa-fab__ic{width:46px;height:46px}
.wa-fab__ic svg{width:21px;height:21px}

/* ---------- POLIMENTO GLOBAL MOBILE ---------- */
*{-webkit-tap-highlight-color:transparent}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
.works__scroll,.essence__rail{-webkit-overflow-scrolling:touch}
a,button{touch-action:manipulation}
/* âncoras não ficam escondidas sob o topo fixo ao navegar pela barra inferior */
main > section{scroll-margin-top:60px}

/* ---------- telas muito estreitas (≤360px) ---------- */
@media(max-width:360px){
  :root{--m-gut:18px;--safe:18px}
  .metric__n{font-size:2.05rem!important}
  .work,.work--wide{flex-basis:80vw;width:80vw}
  .ecard__d{-webkit-line-clamp:2}
}