/* =========================================================
   MedHub — 5G Company
   Paleta: azul-marinho da marca + ouro escovado
   Tipografia: Archivo (uma família, contraste de peso —
   o mesmo princípio do logotipo: MED pesado / HUB leve)
   ========================================================= */

:root{
  /* base — #0A1832 é a cor predominante da marca */
  --navy:#0A1832;         /* fundo da página e superfícies */
  --navy-deep:#060F21;    /* faixas mais profundas */
  --navy-lift:#1C3055;    /* bordas, elevações, placeholders de imagem */
  --scrim:5,13,28;       /* rgb do véu escuro sobre foto e vidro */
  --bone:#EDF1F7;         /* texto principal — branco frio */
  --slate:#A7B7D1;        /* secundário: 6.4:1 na base, 4.9:1 no vidro */

  /* destaque monocromático: hierarquia por peso e opacidade, não por cor */
  --accent:#FFFFFF;
  --line:rgba(214,226,245,.17);
  --line-2:rgba(214,226,245,.32);

  /* vidro */
  --glass-bg:linear-gradient(158deg,
      rgba(255,255,255,.14) 0%,rgba(255,255,255,.062) 24%,
      rgba(255,255,255,.022) 56%,rgba(255,255,255,.065) 100%);
  --glass-blur:blur(26px) saturate(180%);
  --glass-bg-hi:linear-gradient(158deg,
      rgba(255,255,255,.19) 0%,rgba(255,255,255,.09) 24%,
      rgba(255,255,255,.042) 56%,rgba(255,255,255,.10) 100%);
  --glass-inset:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(0,0,0,.32);

  /* tipografia */
  --f:'Montserrat','Helvetica Neue',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --t-xs:.75rem; --t-sm:.8125rem; --t-base:1rem;
  --t-md:1.3125rem; --t-lg:1.75rem;

  /* ritmo */
  --wrap:1200px;
  --gut:clamp(1.25rem,4vw,2.5rem);
  --sec-y:clamp(4.5rem,9.5vw,8.5rem);

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--navy);
  color:var(--bone);
  font-family:var(--f);
  font-size:var(--t-base);
  line-height:1.66;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  text-wrap:pretty;
  overflow-x:hidden;
}
@supports (overflow:clip){body{overflow-x:clip}}
img,svg,video{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{list-style:none;padding:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--accent);color:var(--navy)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--accent);color:var(--navy);padding:.7rem 1.1rem;border-radius:0 0 8px 0;font-weight:600}
.skip:focus{left:0}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid #FFFFFF;outline-offset:3px;border-radius:4px;
}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
/* com nav fixa, a âncora precisa de folga ou a seção para escondida atrás dela */
[id]{scroll-margin-top:clamp(4.5rem,8vh,6.5rem)}

/* ---------- tipografia ---------- */
.h-display{
  font-weight:300;
  font-size:clamp(1.55rem,3.6vw,2.95rem);
  line-height:1.13;
  letter-spacing:-.022em;
  text-wrap:balance;
}
/* o contraste de peso do logotipo, aplicado à frase */
.h-display em{font-style:normal;font-weight:700}
/* em coluna estreita o display precisa de uma escala própria */
.pil__head .h-display,.eco__head .h-display,.cta__say .h-display{
  font-size:clamp(1.4rem,2.6vw,2.15rem);
}

.h-sec{
  font-weight:600;font-size:clamp(1.35rem,2.3vw,1.85rem);
  line-height:1.2;letter-spacing:-.018em;
}
.h-sub{
  font-weight:600;font-size:1.1875rem;letter-spacing:-.012em;
}
.lead{
  color:var(--slate);font-size:clamp(.9375rem,1.2vw,1.0625rem);
  line-height:1.7;max-width:58ch;
}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.92em 1.7em;border-radius:999px;border:1px solid transparent;
  font-size:.9375rem;font-weight:600;letter-spacing:-.006em;
  cursor:pointer;white-space:nowrap;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),
             background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.btn--solid{
  background:var(--bone);color:var(--navy);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.7);
}
.btn--solid:hover{background:var(--accent);transform:translateY(-2px);
  box-shadow:0 16px 38px -16px rgba(0,0,0,.8)}
.btn--ghost{
  background:rgba(255,255,255,.045);border-color:var(--line-2);color:var(--bone);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.btn--ghost:hover{border-color:var(--accent);background:rgba(214,226,245,.09);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

/* ---------- vidro ---------- */
.glass{
  position:relative;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--line);
  box-shadow:var(--glass-inset),0 30px 74px -42px rgba(0,0,0,.92);
  transition:background .5s var(--ease),border-color .5s var(--ease),
             box-shadow .5s var(--ease),transform .5s var(--ease);
}
/* a luz na superfície, acompanhando o cursor: só aparece no hover */
.glass::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx) var(--my),
    rgba(255,255,255,.12),rgba(255,255,255,.04) 32%,transparent 60%);
  opacity:0;transition:opacity .45s var(--ease);
}
/* O aro de 1px: aceso no topo, apagando na base, e com um ponto de luz
   que segue o cursor. É o brilho na quina que faz ler vidro de verdade. */
.glass{--mx:50%;--my:-30%}
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:
    radial-gradient(300px circle at var(--mx) var(--my),
      rgba(255,255,255,1),rgba(255,255,255,.35) 22%,rgba(255,255,255,0) 52%),
    linear-gradient(155deg,
      rgba(255,255,255,.52),rgba(255,255,255,.09) 32%,
      rgba(255,255,255,.02) 62%,rgba(255,255,255,.20));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
          mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}

/* focos de luz por trás do vidro (para o blur ter o que refratar) */
.glow{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
}
.glow::before,.glow::after{
  content:"";position:absolute;border-radius:50%;
}
.glow::before{
  width:56rem;height:56rem;
  background:radial-gradient(circle,rgba(188,214,255,.20),rgba(188,214,255,.06) 40%,transparent 64%);
}
.glow::after{
  width:34rem;height:34rem;
  background:radial-gradient(circle,rgba(120,165,235,.16),rgba(120,165,235,.04) 44%,transparent 66%);
}
.glow--a::before{top:-18rem;right:-14rem}
.glow--a::after{bottom:-8rem;left:6%}
.glow--b::before{bottom:-24rem;left:-18rem}
.glow--b::after{top:-6rem;right:8%}
.glow--c::before{top:-12rem;left:50%;transform:translateX(-50%)}
.glow--c::after{bottom:-10rem;right:-6rem}
.glow--d::before{top:-20rem;left:-14rem}
.glow--d::after{bottom:-12rem;right:-4rem}

/* =========================================================
   LOGOTIPO ANIMADO
   3 camadas do mesmo path: halo, traço+preenchimento, brilho
   ========================================================= */
.mh{width:100%;height:auto}

/* A marca se escreve, depois preenche, e o traço sai no fim:
   o estado final é exatamente o logo.png — branco chapado, sem contorno. */
.mh__draw{
  fill-opacity:0;
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:mhTraco 1.8s ease-in-out forwards,
            mhPreenche .8s ease-out 1.5s forwards,
            mhTracoSai .5s ease-out 1.8s forwards;
}
@keyframes mhTraco{to{stroke-dashoffset:0}}
@keyframes mhPreenche{to{fill-opacity:1}}
@keyframes mhTracoSai{to{stroke-opacity:0}}

/* rodapé: estado final direto, sem reanimar */
.mh--static .mh__draw{fill-opacity:1;stroke-dashoffset:0;stroke-opacity:0;animation:none}

/* =========================================================
   NAVEGAÇÃO
   ========================================================= */
.nav{
  position:fixed;inset:0 0 auto;z-index:60;
  transition:background-color .45s var(--ease),border-color .45s var(--ease),
             backdrop-filter .45s var(--ease),transform .45s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(var(--scrim),.72);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  border-bottom-color:var(--line);
}
.nav.is-hidden{transform:translateY(-101%)}
.nav__in{
  max-width:var(--wrap);margin-inline:auto;padding:1rem var(--gut);
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);
}
.nav__logo{flex:0 0 auto;width:118px;opacity:0;transition:opacity .5s var(--ease)}
.nav.is-stuck .nav__logo{opacity:1}
.nav__logo svg{width:100%;height:auto}
.nav__links{display:flex;gap:clamp(.9rem,2vw,1.85rem);margin-left:auto;font-size:.875rem}
.nav__links a{color:var(--slate);position:relative;padding-block:.35rem;transition:color .3s var(--ease)}
.nav__links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--accent);transition:right .4s var(--ease);
}
.nav__links a:hover,.nav__links a.is-current{color:var(--bone)}
.nav__links a:hover::after,.nav__links a.is-current::after{right:0}
.nav__cta{padding:.6em 1.15em;font-size:.8125rem}
.nav__toggle{
  display:none;margin-left:auto;background:none;border:0;cursor:pointer;
  width:48px;height:48px;padding:0;place-content:center;justify-items:center;
}
.nav__toggle span{display:block;width:24px;height:1.5px;background:var(--bone);transition:transform .35s var(--ease),opacity .25s}
.nav__toggle span+span{margin-top:6px}
.nav__toggle[aria-expanded=true] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.nav__toggle[aria-expanded=true] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.nav__drawer{display:none}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;min-height:100svh;display:grid;place-items:center;
  padding:8rem var(--gut) 6rem;text-align:center;isolation:isolate;
}
.hero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 44%;filter:saturate(.86) contrast(1.05)}
.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    /* primeiro da pilha: fecha opaco na cor da página, sem degrau */
    /* topo para a nav, base para emendar na página; no meio a foto respira */
    linear-gradient(180deg,
      rgba(var(--scrim),.58) 0%,rgba(var(--scrim),.05) 22%,
      rgba(var(--scrim),.09) 52%,rgba(var(--scrim),.78) 85%,var(--navy) 99%),
    /* poço escuro só atrás do bloco de texto, para o logotipo ter onde apoiar */
    radial-gradient(52% 50% at 50% 46%,rgba(var(--scrim),.56),rgba(var(--scrim),.24) 54%,transparent 80%),
    /* vinheta suave nas bordas */
    radial-gradient(122% 96% at 50% 45%,transparent 42%,rgba(var(--scrim),.28) 76%,rgba(var(--scrim),.64) 100%),
    /* tinta de marca, leve: unifica a temperatura sem apagar a foto */
    linear-gradient(rgba(10,24,50,.16),rgba(10,24,50,.16));
}
.hero__in{max-width:52rem;position:relative}
/* a sombra dá contraste onde o texto está, em vez de apagar a foto toda */
.hero__kicker,.hero__lead,.hero__sub{
  text-shadow:0 1px 2px rgba(var(--scrim),.85),0 2px 26px rgba(var(--scrim),.75);
}
.hero__title{filter:drop-shadow(0 2px 30px rgba(var(--scrim),.6))}

.hero__kicker{
  font-size:var(--t-sm);color:var(--bone);opacity:.82;letter-spacing:.02em;
  margin-bottom:clamp(1.5rem,4vh,2.75rem);
  opacity:0;animation:up .9s var(--ease) .15s forwards;
}
.hero__title{margin:0 auto;width:min(100%,33rem)}
.hero__lead{
  margin-top:clamp(2rem,5vh,3.25rem);
  font-size:clamp(1.125rem,2.5vw,1.8rem);font-weight:300;
  line-height:1.3;letter-spacing:-.018em;text-wrap:balance;
  opacity:0;animation:up .9s var(--ease) 2.25s forwards;
}
.hero__sub{
  margin:1.15rem auto 0;max-width:44ch;color:var(--slate);
  font-size:clamp(.9375rem,1.25vw,1.0625rem);
  opacity:0;animation:up .9s var(--ease) 2.45s forwards;
}
.hero__cta{
  margin-top:clamp(2rem,4.5vh,2.85rem);
  display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;
  opacity:0;animation:up .9s var(--ease) 2.65s forwards;
}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.hero__scroll{
  position:absolute;left:50%;bottom:2.1rem;translate:-50% 0;
  width:26px;height:42px;border:1px solid var(--line-2);border-radius:999px;
  display:grid;place-items:center;
  opacity:0;animation:up .9s var(--ease) 3s forwards;
}
.hero__scroll span{width:2px;height:7px;border-radius:2px;background:var(--accent);animation:dot 2.1s var(--ease) infinite}
@keyframes dot{0%,100%{transform:translateY(-5px);opacity:0}25%,55%{opacity:1}75%{transform:translateY(6px);opacity:0}}

/* =========================================================
   SEÇÕES — base
   ========================================================= */
.sec{position:relative;padding-block:var(--sec-y)}
.sec>.wrap{position:relative;z-index:1}

/* ---------- diagnóstico ---------- */
.diag__head{display:grid;gap:1.6rem;max-width:64rem}
.diag__grid{
  margin-top:clamp(3rem,6vw,4.75rem);
  display:grid;grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--line);
}
.diag__col{padding:1.9rem 1.6rem 1.9rem 0;border-right:1px solid var(--line)}
.diag__col:last-child{border-right:0}
.diag__col:not(:first-child){padding-left:1.6rem}
.diag__col h3{font-size:1.125rem;font-weight:600;letter-spacing:-.012em;margin-bottom:.7rem}
.diag__col h3 span{
  display:block;font-size:var(--t-xs);font-weight:600;letter-spacing:.06em;
  color:var(--bone);opacity:.42;margin-bottom:.55rem;
}
.diag__col p{color:var(--slate);font-size:.9375rem;line-height:1.55}
.diag__note{
  margin-top:clamp(2.5rem,5vw,3.75rem);max-width:52ch;
  font-size:clamp(1rem,1.45vw,1.1875rem);font-weight:300;line-height:1.55;
  letter-spacing:-.012em;padding-left:1.25rem;border-left:2px solid var(--accent);
}

/* ---------- pilares ---------- */
.pil__head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.pull{border-left:1px solid var(--line-2);padding-left:clamp(1.25rem,2.5vw,2rem)}
.pull p{color:var(--slate);font-size:clamp(1rem,1.3vw,1.125rem);line-height:1.68}
.pil__grid{
  margin-top:clamp(3rem,6vw,4.75rem);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;
}
.pil{border-radius:16px;padding:1.75rem 1.5rem 1.9rem}
.pil h3{font-size:1.0625rem;font-weight:600;letter-spacing:-.012em;margin-bottom:.7rem}
.pil h3::before{
  content:"";display:block;width:26px;height:2px;border-radius:2px;
  background:var(--accent);margin-bottom:1.1rem;
}
.pil p{color:var(--slate);font-size:.9375rem;line-height:1.6}

/* ---------- níveis ---------- */
.niv__head{display:grid;gap:1.5rem;max-width:64rem}
.tabs{
  margin-top:clamp(2.75rem,5.5vw,4rem);
  display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;
  padding:.4rem;border-radius:999px;
  background:var(--glass-bg);border:1px solid var(--line);
  box-shadow:var(--glass-inset);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
}
.tab{
  display:grid;gap:.15rem;justify-items:center;
  padding:.85rem .9rem;border:0;border-radius:999px;background:transparent;
  cursor:pointer;color:var(--slate);
  transition:background-color .35s var(--ease),color .35s var(--ease);
}
.tab__n{font-size:1rem;font-weight:600;letter-spacing:-.01em}
.tab__r{font-size:var(--t-xs);opacity:.85;white-space:nowrap}
.tab:hover{color:var(--bone)}
.tab.is-on{background:var(--bone);color:var(--navy)}
.tab.is-on .tab__r{opacity:.72}

.panel{
  margin-top:1.1rem;border-radius:22px;padding:clamp(1.75rem,3.5vw,3rem);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,3.5rem);
}
.panel[hidden]{display:none}
.panel.is-in{animation:panelIn .5s var(--ease)}
@keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.panel__lead{display:flex;flex-direction:column}
.panel__title{font-size:clamp(1.1875rem,1.9vw,1.6rem);font-weight:300;line-height:1.22;letter-spacing:-.018em}
.panel__obj{margin-top:1rem;color:var(--slate);font-size:.9375rem}
.panel__res{
  margin-top:auto;padding-top:1.75rem;border-top:1px solid var(--line);
  font-size:1.0625rem;line-height:1.45;font-weight:500;
}
.panel__res span{display:block;font-size:var(--t-sm);font-weight:400;
  color:var(--bone);opacity:.55;margin-bottom:.4rem}

.panel__side{display:flex;flex-direction:column}
.panel__side h4{font-size:.9375rem;font-weight:600;margin-bottom:1.15rem;letter-spacing:-.008em}
.solve{display:flex;flex-wrap:wrap;gap:.5rem;align-content:flex-start}
.solve li{
  padding:.45rem .95rem;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.045);
  font-size:.875rem;color:var(--bone);
}
.panel__faixa{
  margin-top:auto;padding-top:1.75rem;border-top:1px solid var(--line);
  font-size:.9375rem;color:var(--slate);line-height:1.5;
}
.panel__faixa span{display:block;font-size:var(--t-sm);font-weight:400;
  color:var(--bone);opacity:.55;margin-bottom:.4rem}
/* ---------- depoimentos ---------- */
.depo__head{display:grid;gap:1.4rem;max-width:56rem}
.depo__grid{
  margin-top:clamp(2.75rem,5.5vw,4rem);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;
}
/* sem o minmax(0,…) e o min-width, o conteúdo do card impõe a largura
   da coluna e a grade estoura em telas estreitas */
.depo{position:relative;min-width:0}
.depo__btn{
  position:relative;display:block;width:100%;aspect-ratio:4/3;
  padding:0;border:1px solid var(--line);border-radius:14px;
  background:var(--navy-deep);overflow:hidden;cursor:pointer;
  transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease);
}
.depo__btn::before{
  content:"";position:absolute;inset:-14%;
  background-image:var(--poster);background-size:cover;background-position:center;
  filter:blur(22px) saturate(120%) brightness(.72);
}
.depo__btn>img{
  position:relative;width:100%;height:100%;object-fit:contain;
}
.depo__btn:hover{border-color:var(--line-2);transform:translateY(-3px);
  box-shadow:0 26px 54px -30px rgba(0,0,0,.95)}
.depo__play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:58px;height:58px;border-radius:50%;
  background:rgba(var(--scrim),.5);border:1px solid rgba(232,228,220,.55);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:grid;place-items:center;
  transition:background-color .4s var(--ease),border-color .4s var(--ease),scale .4s var(--ease);
}
.depo__play::after{
  content:"";width:0;height:0;margin-left:3px;
  border-left:13px solid var(--bone);border-top:8px solid transparent;border-bottom:8px solid transparent;
  transition:border-left-color .4s var(--ease);
}
.depo__btn:hover .depo__play{background:var(--accent);border-color:#FFFFFF;scale:1.07}
.depo__btn:hover .depo__play::after{border-left-color:var(--navy)}
.depo__meta{
  position:absolute;left:0;right:0;bottom:0;padding:2.6rem 1.1rem .95rem;
  display:grid;gap:.1rem;text-align:left;
  background:linear-gradient(transparent,rgba(var(--scrim),.9));
}
.depo__meta b{font-size:.9375rem;font-weight:600}
.depo__meta i{font-style:normal;font-size:var(--t-xs);color:var(--slate)}

.depo__ask{
  display:grid;align-content:center;gap:1rem;border-radius:14px;
  padding:1.9rem 1.6rem;aspect-ratio:4/3;
}
.depo__ask h3{font-size:1.0625rem;font-weight:400;line-height:1.35;letter-spacing:-.012em}
.depo__ask .btn{justify-self:start}

/* ---------- encontros ---------- */
.enc__head{display:grid;gap:1.4rem;max-width:58rem}
.enc__gal{
  margin-top:clamp(2.75rem,5.5vw,4rem);
  display:grid;grid-template-columns:repeat(12,1fr);
  grid-auto-rows:clamp(58px,6.6vw,94px);gap:.875rem;
}
.g{overflow:hidden;border-radius:4px;background:var(--navy-deep)}
.g img{width:100%;height:100%;object-fit:cover;transition:scale .9s var(--ease);filter:saturate(.92)}
.g:hover img{scale:1.045}
.g--1{grid-column:1/8;grid-row:1/4}
.g--3{grid-column:8/13;grid-row:1/6}
.g--2{grid-column:1/5;grid-row:4/6}
.g--4{grid-column:5/8;grid-row:4/6}
.g--6{grid-column:1/8;grid-row:6/9}
.g--5{grid-column:8/13;grid-row:6/9}
/* última faixa espelha a primeira: o peso troca de lado e a grade fecha cheia */
.g--7{grid-column:1/6;grid-row:9/12}
.g--8{grid-column:6/13;grid-row:9/12}

.agenda{
  margin-top:clamp(3rem,6vw,4.5rem);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;
}
.ev{
  border-radius:18px;padding:1.7rem 1.5rem 1.5rem;
  display:grid;gap:.35rem;align-content:start;
}
.ev__when{display:flex;align-items:baseline;gap:.65rem;flex-wrap:wrap}
.ev__when time{
  font-size:1.625rem;font-weight:300;letter-spacing:-.025em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.ev__when span{font-size:var(--t-sm);color:var(--slate)}
.ev h3{margin-top:.85rem;font-size:1.25rem;font-weight:600;letter-spacing:-.018em}
.ev__where{font-size:var(--t-sm);color:var(--slate)}
.tag{
  font-style:normal;font-size:.6875rem;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;padding:.4em .8em;border-radius:5px;
  border:1px solid var(--line-2);color:var(--slate);white-space:nowrap;
}
.tag--on{background:rgba(237,241,247,.15);border-color:var(--line-2);color:var(--bone)}
.ev .tag{justify-self:start;margin-top:1.1rem}
.ev.is-past{opacity:.42}

/* ---------- ecossistema ---------- */
.eco__head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.eco__list{
  margin-top:clamp(3rem,6vw,4.5rem);
  display:grid;grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--line);
}
.eco__item{padding:1.9rem 1.4rem 0 0;border-right:1px solid var(--line)}
.eco__item:last-child{border-right:0}
.eco__item:not(:first-child){padding-left:1.4rem}
.eco__item h3{font-size:1.125rem;font-weight:600;letter-spacing:-.012em}
.eco__area{font-size:var(--t-xs);color:var(--slate);margin:.3rem 0 .9rem;letter-spacing:.012em}
.eco__item p:last-child{color:var(--slate);font-size:.9375rem;line-height:1.55}

.parc{margin-top:clamp(3rem,6vw,4.5rem)}
.parc__list{
  margin-top:1.5rem;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem;
}
.parc__list li{
  display:grid;gap:.35rem;padding:1.15rem 1.1rem;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid rgba(214,226,245,.15);
  color:var(--slate);font-size:var(--t-sm);line-height:1.5;
}
.parc__list b{color:var(--bone);font-weight:600;font-size:.9375rem}
/* parceiros do ecossistema: todos no mesmo card, 3 colunas fecham as 9 marcas */
.marcas{margin-top:clamp(3rem,6vw,4.5rem)}
.marcas__list{
  margin-top:1.5rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;
}
.marca{border-radius:14px;min-width:0}
.marca > :is(a,div){display:flex;align-items:center;gap:1rem;height:100%;padding:1.1rem 1.15rem;border-radius:inherit}
.marca img{flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover;background:#fff}
.marca__txt{display:grid;gap:.2rem;min-width:0}
.marca__txt b{color:var(--bone);font-weight:600;font-size:.9375rem}
.marca__area{color:var(--slate);font-size:var(--t-sm);line-height:1.45}
.marca__txt i{font-style:normal;font-size:var(--t-xs);color:var(--bone);opacity:.55;overflow-wrap:anywhere}
.eco__note{
  margin-top:clamp(2.5rem,5vw,3.5rem);max-width:48ch;
  font-size:clamp(1rem,1.45vw,1.1875rem);font-weight:300;line-height:1.55;
  letter-spacing:-.012em;padding-left:1.25rem;border-left:2px solid var(--accent);
}

/* ---------- cultura ---------- */
.sec--cult{background:linear-gradient(180deg,transparent,rgba(var(--scrim),.55) 22%,rgba(var(--scrim),.55) 78%,transparent)}
.cult__head{display:grid;gap:1.4rem;max-width:56rem}
.cult__code{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  font-size:clamp(1.125rem,2.5vw,1.9rem);font-weight:300;line-height:1.36;
  letter-spacing:-.018em;max-width:22ch;
  color:var(--bone);
}
.cult__list{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(2rem,5vw,4rem);
}
.cult__list li{
  padding:1.05rem 0;border-top:1px solid rgba(214,226,245,.16);
  color:var(--slate);font-size:.9375rem;line-height:1.55;
}

/* ---------- cta ---------- */
.cta__wrap{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2.5rem,5vw,4.5rem);align-items:start;
}
.cta__say{display:grid;gap:1.5rem;position:sticky;top:6rem}
.form{
  --ctl-h:3rem;
  border-radius:22px;padding:clamp(1.6rem,3vw,2.5rem);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem 1.1rem;
  align-items:stretch;
}
/* rótulo no topo, campo sempre na mesma linha de base: o 1fr da
   primeira faixa absorve a diferença quando um label quebra em duas linhas */
.field{display:grid;grid-template-rows:1fr auto auto;gap:.45rem;align-content:stretch}
.field--full{grid-column:1/-1;grid-template-rows:auto auto auto}
.field label{font-size:var(--t-sm);color:var(--slate);line-height:1.35;align-self:end}
.field .opt{color:#7F8FAE;font-size:var(--t-xs)}
.field input,.field select,.field textarea{
  width:100%;padding:0 .95rem;border-radius:9px;
  background:rgba(var(--scrim),.45);border:1px solid rgba(214,226,245,.16);
  font-size:.9375rem;font-family:inherit;line-height:1.4;
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.field input,.field select{height:var(--ctl-h,3rem)}
.field textarea{resize:vertical;height:auto;min-height:5.5rem;padding:.8rem .95rem}
.field input::placeholder,.field textarea::placeholder{color:#7F8FAE}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--line-2)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);background:rgba(var(--scrim),.68);
}
.field select{appearance:none;cursor:pointer;padding-right:2.4rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%);
  background-position:calc(100% - 1.05rem) calc(50% - 2px),calc(100% - .7rem) calc(50% - 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.field select option{background:var(--navy-deep);color:var(--bone)}
.field.has-err input,.field.has-err select{border-color:#E2887A}
.err{font-size:var(--t-xs);color:#E2887A;min-height:0;align-self:start}
.err:empty{display:none}
.form__foot{grid-column:1/-1;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:.35rem}
.form__note{font-size:var(--t-sm);color:var(--bone)}

/* ---------- rodapé ---------- */
.foot{border-top:1px solid var(--line);padding-top:clamp(3rem,6vw,4.5rem)}
.foot__in{display:grid;grid-template-columns:1fr auto;gap:2.5rem;align-items:start}
.foot__brand{max-width:26rem}
.foot__brand .mh{width:150px;margin-bottom:1.2rem}
.foot__brand p{color:var(--slate);font-size:.9375rem;line-height:1.6}
.foot__nav{display:grid;gap:.6rem;justify-items:end;font-size:.875rem}
.foot__nav a{color:var(--slate);transition:color .3s var(--ease)}
.foot__nav a:hover{color:var(--accent)}
.foot__bar{
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-block:1.5rem;
  border-top:1px solid rgba(214,226,245,.1);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:var(--t-xs);color:#8A9AB8;
}

/* ---------- lightbox ---------- */
.lb{
  border:0;padding:0;background:transparent;
  width:fit-content;max-width:min(94vw,1120px);max-height:92vh;overflow:visible;
}
.lb::backdrop{background:rgba(11,18,33,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.lb[open]{animation:lbIn .38s var(--ease)}
@keyframes lbIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.lb__v{
  display:block;margin-inline:auto;
  width:min(94vw,1120px);aspect-ratio:16/9;   /* reserva; o JS ajusta à proporção real */
  max-width:100%;max-height:86vh;border-radius:14px;background:#000;
  border:1px solid var(--line);
}
.lb__x{
  position:absolute;top:-2.9rem;right:0;width:36px;height:36px;
  border:1px solid var(--line-2);border-radius:50%;background:rgba(255,255,255,.04);
  cursor:pointer;transition:background-color .3s var(--ease),border-color .3s var(--ease);
}
.lb__x::before,.lb__x::after{
  content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:var(--bone);
}
.lb__x::before{transform:translate(-50%,-50%) rotate(45deg)}
.lb__x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.lb__x:hover{background:var(--accent);border-color:var(--accent)}
.lb__x:hover::before,.lb__x:hover::after{background:var(--navy)}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1080px){
  .pil__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .eco__list{grid-template-columns:repeat(3,1fr);border-top:0}
  .eco__item{border-top:1px solid var(--line);padding-bottom:1.6rem}
  .eco__item:nth-child(3n){border-right:0}
  .parc__list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .panel{grid-template-columns:1fr}
  .cta__wrap{grid-template-columns:1fr}
  .cta__say{position:static}
}
@media (max-width:900px){
  .marca > :is(a,div){flex-direction:column;align-items:flex-start;gap:.85rem}
  .nav__links,.nav__cta{display:none}
  .nav__toggle{display:grid}
  .nav__logo{opacity:1}
  .nav__drawer{
    display:grid;gap:.25rem;padding:0 var(--gut);
    max-height:0;overflow:hidden;
    background:rgba(var(--scrim),.96);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    border-top:1px solid transparent;
    transition:max-height .45s var(--ease),padding .45s var(--ease),border-color .45s var(--ease);
  }
  .nav.is-open .nav__drawer{max-height:24rem;padding:.75rem var(--gut) 1.5rem;border-top-color:var(--line)}
  .nav__drawer a{padding:.8rem 0;border-bottom:1px solid rgba(214,226,245,.15);font-size:1rem}
  .nav__drawer a:last-child{border-bottom:0;color:var(--accent)}
  .nav.is-open{background:rgba(var(--scrim),.96);border-bottom-color:var(--line)}

  .diag__grid{grid-template-columns:repeat(3,1fr)}
  .diag__col:nth-child(3n){border-right:0}
  .diag__col:nth-last-child(-n+2){border-bottom:0}
  .diag__col{border-bottom:1px solid var(--line)}
  .diag__col:nth-child(2n){border-right:0}
  .diag__col:nth-last-child(-n+2){border-bottom:0}
  .pil__head,.eco__head{grid-template-columns:1fr}
  .pull{border-left:0;border-top:1px solid var(--line-2);padding:1.25rem 0 0}
  .depo__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .agenda{grid-template-columns:1fr}
  .cult__list{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .foot__in{grid-template-columns:1fr}
  .foot__nav{justify-items:start;grid-template-columns:repeat(2,auto);gap:.75rem 2rem}

  /* spans desiguais deixavam buraco na grade: no mobile todos iguais */
  .enc__gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(92px,24vw,144px)}
  .g--1,.g--6{grid-column:1/3;grid-row:auto/span 2}
  .g--2,.g--3,.g--4,.g--5,.g--7,.g--8{grid-column:auto;grid-row:auto/span 1}
}
/* abaixo desta largura a quebra manual atrapalha mais do que ajuda */
@media (max-width:700px){
  br.lg{display:none}
}
@media (max-width:620px){
  .tabs{grid-template-columns:1fr;border-radius:16px;gap:.3rem}
  .tab{border-radius:12px;justify-items:start;text-align:left}
  .diag__grid{grid-template-columns:1fr}
  .diag__col{border-right:0;padding-left:0!important;padding-block:1.5rem}
  .diag__col:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
  .diag__col:last-child{border-bottom:0}
  .eco__list{grid-template-columns:1fr}
  .eco__item{border-right:0;padding-left:0!important}
  .parc__list{grid-template-columns:1fr}
  .marcas__list{grid-template-columns:minmax(0,1fr)}
  .marca > :is(a,div){flex-direction:row;align-items:center;gap:1rem}
  .pil__grid{grid-template-columns:minmax(0,1fr)}
  .depo__grid{grid-template-columns:minmax(0,1fr)}
  .hero__title{width:min(96%,22rem)}
  /* retrato: o recorte é bem mais fechado, então o véu precisa ser mais denso
     e o enquadramento tira os rostos de trás do logotipo */
  .hero__bg img{object-position:36% 46%}
  .hero__scrim{
    background:
      linear-gradient(180deg,
        rgba(var(--scrim),.60) 0%,rgba(var(--scrim),.10) 18%,
        rgba(var(--scrim),.17) 50%,rgba(var(--scrim),.82) 86%,var(--navy) 99%),
      radial-gradient(74% 46% at 50% 42%,rgba(var(--scrim),.52),rgba(var(--scrim),.22) 60%,transparent 84%),
      linear-gradient(rgba(10,24,50,.15),rgba(10,24,50,.15));
  }
  .foot__brand .mh{width:128px}
  .lb__x{top:-2.6rem}
}

/* =========================================================
   MOVIMENTO REDUZIDO
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .mh__draw{fill-opacity:1;stroke-dashoffset:0;stroke-opacity:0}
  .hero__kicker,.hero__lead,.hero__sub,.hero__cta,.hero__scroll{opacity:1;animation:none}
}

/* convite no fim da grade de depoimentos */
.depo__ask .lead{font-size:.9375rem;line-height:1.55;max-width:32ch}
.depo__ask .btn{padding:.78em 1.4em;font-size:.875rem}


/* =========================================================
   VÍDEO PRINCIPAL
   ========================================================= */
.video__head{max-width:62rem}
.stat{
  margin-top:1.5rem;max-width:46ch;
  font-size:clamp(1rem,1.4vw,1.1875rem);color:var(--slate);line-height:1.6;
}
.stat span{color:var(--bone);font-weight:700}

.player{margin-top:clamp(2.5rem,5vw,3.75rem)}
.player__btn{
  position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:var(--navy-deep);cursor:pointer;
  transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease);
}
.player__btn img{width:100%;height:100%;object-fit:cover}
.player__btn:hover{border-color:var(--line-2);transform:translateY(-3px);
  box-shadow:0 34px 72px -42px rgba(0,0,0,.95)}
.player__play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:82px;height:82px;border-radius:50%;
  background:rgba(var(--scrim),.58);border:1px solid rgba(237,241,247,.72);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:grid;place-items:center;
  transition:background-color .4s var(--ease),border-color .4s var(--ease),scale .4s var(--ease);
}
.player__play::after{
  content:"";width:0;height:0;margin-left:5px;
  border-left:20px solid var(--bone);border-top:12px solid transparent;border-bottom:12px solid transparent;
  transition:border-left-color .4s var(--ease);
}
.player__btn:hover .player__play{background:var(--bone);border-color:var(--accent);scale:1.06}
.player__btn:hover .player__play::after{border-left-color:var(--navy)}
.player__v{
  width:100%;aspect-ratio:16/9;display:block;background:#000;
  border:1px solid var(--line);border-radius:16px;
}
.player__v[hidden],
.player__btn[hidden]{display:none}
.player figcaption{margin-top:1.1rem;font-size:var(--t-sm);color:var(--slate)}

/* =========================================================
   MENTORES — carrossel
   ========================================================= */
.men__head{display:grid;gap:1.4rem;max-width:54rem}
/* O recuo nasce da largura do próprio trilho, não de vw: com barra de
   rolagem visível, vw é ~7px maior que o conteúdo e o card desalinha. */
.sec--men{--rail-pad:max(var(--gut),calc((100% - var(--wrap))/2 + var(--gut)))}
.men__rail{
  margin-top:clamp(2.5rem,5vw,3.75rem);
  overflow-x:auto;overscroll-behavior-x:contain;
  /* o movimento é contínuo: snap e scroll-behavior brigariam com ele */
  scrollbar-width:none;-ms-overflow-style:none;
}
.men__rail::-webkit-scrollbar{display:none}
.men__track{display:flex;gap:1rem;padding-inline:var(--rail-pad)}
.men{flex:0 0 clamp(178px,20vw,232px)}
.men img{
  width:100%;aspect-ratio:1;object-fit:cover;
  border-radius:12px;border:1px solid var(--line);background:var(--navy-deep);
}
.men h3{margin-top:.95rem;font-size:1rem;font-weight:600;letter-spacing:-.012em;line-height:1.25}
.men p{margin-top:.2rem;font-size:var(--t-sm);color:var(--slate)}

.men__nav{display:flex;gap:.6rem;margin-top:clamp(1.75rem,3vw,2.25rem)}
.rail{
  position:relative;width:46px;height:46px;border-radius:50%;cursor:pointer;
  border:1px solid var(--line-2);background:rgba(255,255,255,.04);
  transition:background-color .3s var(--ease),border-color .3s var(--ease),opacity .3s var(--ease);
}
.rail::before{
  content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;
  border:solid var(--bone);border-width:1.5px 1.5px 0 0;
}
.rail[data-dir="-1"]::before{transform:translate(-35%,-50%) rotate(-135deg)}
.rail[data-dir="1"]::before{transform:translate(-65%,-50%) rotate(45deg)}
.rail:hover:not([disabled]){background:rgba(255,255,255,.1);border-color:var(--accent)}
.rail:active{transform:scale(.94)}

/* =========================================================
   DEPOIMENTO EM DESTAQUE
   ========================================================= */
.quote{
  margin-top:clamp(2.5rem,5vw,3.75rem);border-radius:22px;
  padding:clamp(1.6rem,3vw,2.5rem);
  display:grid;grid-template-columns:clamp(132px,17vw,200px) minmax(0,1fr);
  gap:clamp(1.5rem,3.5vw,2.75rem);align-items:center;
}
.quote>img{
  width:100%;aspect-ratio:1;object-fit:cover;
  border-radius:14px;border:1px solid var(--line);
}
.quote__num{
  font-size:clamp(2.1rem,4.6vw,3.2rem);font-weight:700;
  line-height:1;letter-spacing:-.03em;
}
.quote__num span{
  display:block;margin-top:.55rem;
  font-size:var(--t-sm);font-weight:400;color:var(--slate);letter-spacing:0;
}
.quote blockquote{margin:1.5rem 0 0}
.quote blockquote p{
  color:var(--slate);font-size:clamp(.9375rem,1.2vw,1.0625rem);line-height:1.7;
}
.quote figcaption{margin-top:1.15rem;font-size:.9375rem;font-weight:600}

/* =========================================================
   CUSTO DE NÃO AGIR
   ========================================================= */
.custo{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(1.5rem,4vw,3rem);
}
.custo li{
  padding:1.15rem 0;border-top:1px solid var(--line);
  font-size:clamp(1rem,1.4vw,1.1875rem);font-weight:300;letter-spacing:-.012em;
}

.foot__end{margin-top:1.15rem;font-size:var(--t-sm);color:var(--slate);line-height:1.6}
.foot__end a{color:var(--bone);border-bottom:1px solid var(--line-2)}
.foot__end a:hover{border-bottom-color:var(--accent)}

@media (max-width:900px){
  .custo{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .quote{grid-template-columns:1fr;justify-items:start;text-align:left}
  .quote>img{width:min(58%,190px)}
}
@media (max-width:620px){
  .custo{grid-template-columns:1fr}
  .player__play{width:64px;height:64px}
  .player__play::after{border-left-width:16px;border-top-width:10px;border-bottom-width:10px}
}


/* =========================================================
   ACABAMENTO
   ========================================================= */

/* Grão sobre a página: some com o banding dos gradientes e dá
   textura de impresso ao azul chapado. Fica abaixo da nav. */
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

/* fio que separa as seções, apagando nas pontas */
.sec+.sec::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(214,226,245,.17) 16%,
             rgba(214,226,245,.17) 84%,transparent);
}

/* barra de rolagem discreta, no tom da marca */
@supports selector(::-webkit-scrollbar){
  ::-webkit-scrollbar{width:11px;height:11px}
  ::-webkit-scrollbar-track{background:var(--navy-deep)}
  ::-webkit-scrollbar-thumb{background:#3B4E77;border-radius:99px;border:3px solid var(--navy-deep)}
  ::-webkit-scrollbar-thumb:hover{background:#4C628F}
}
html{scrollbar-color:#3B4E77 var(--navy-deep);scrollbar-width:thin}

/* =========================================================
   FAIXA DE PROVA
   ========================================================= */
.proof{
  position:relative;
  border-block:1px solid var(--line);
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-inset);
}
.proof__in{
  display:grid;grid-template-columns:repeat(2,1fr);
}
.proof__i{
  padding:clamp(1.5rem,3vw,2.25rem) clamp(1rem,2vw,1.75rem);
  border-left:1px solid var(--line);
}
.proof__i:first-child{border-left:0;padding-left:0}
.proof__i b{
  display:block;font-weight:300;line-height:1;letter-spacing:-.03em;
  font-size:clamp(1.75rem,3.4vw,2.6rem);
}
.proof__i span{
  display:block;margin-top:.6rem;font-size:var(--t-sm);
  color:var(--slate);line-height:1.45;
}

/* =========================================================
   WHATSAPP FLUTUANTE
   ========================================================= */
.wa{
  position:fixed;z-index:70;
  right:clamp(1rem,2.2vw,1.75rem);
  bottom:calc(clamp(1rem,2.2vw,1.75rem) + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;
  height:58px;padding-inline:17px;border-radius:999px;
  /* mesma hierarquia dos CTAs: ação principal, não enfeite */
  color:var(--navy);background:var(--bone);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 0 0 6px rgba(var(--scrim),.30),0 20px 44px -16px rgba(0,0,0,.9);
  /* só entra depois que o hero sai de cena */
  opacity:0;translate:0 14px;pointer-events:none;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),
             opacity .45s var(--ease),translate .45s var(--ease),background-color .3s var(--ease);
}
.wa.is-on{opacity:1;translate:0 0;pointer-events:auto}
.wa svg{width:25px;height:25px;flex:0 0 25px}
.wa span{
  max-width:0;opacity:0;overflow:hidden;white-space:nowrap;
  font-size:.9375rem;font-weight:600;letter-spacing:-.006em;
  transition:max-width .45s var(--ease),opacity .3s var(--ease),margin-left .45s var(--ease);
}
.wa:hover,.wa:focus-visible{
  transform:translateY(-2px);background:var(--accent);
  box-shadow:0 0 0 7px rgba(var(--scrim),.36),0 26px 52px -16px rgba(0,0,0,.95);
}
.wa:hover span,.wa:focus-visible span{max-width:12rem;opacity:1;margin-left:.65rem}

@media (hover:none){
  /* sem hover não há como revelar o rótulo: fica só o ícone */
  .wa{width:58px;padding-inline:0;justify-content:center}
  .wa span{display:none}
}

@media (max-width:860px){
  .proof__in{grid-template-columns:repeat(2,1fr)}
  .proof__i:nth-child(odd){border-left:0;padding-left:0}
  .proof__i:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:420px){
  .proof__i{padding-inline:.85rem}
  .proof__i b{font-size:1.375rem}
}

@media (max-width:620px){
  /* alvos de toque nunca abaixo de 48px */
  .rail{width:48px;height:48px}
  .nav__drawer a{padding-block:1rem}
}


/* =========================================================
   VIDRO NO HOVER
   Só em quem tem cursor: no toque, o :hover gruda depois do tap.
   ========================================================= */
@media (hover:hover){
  .glass:hover{
    background:var(--glass-bg-hi);
    border-color:rgba(214,226,245,.42);
    box-shadow:var(--glass-inset),0 40px 92px -40px rgba(0,0,0,.96);
  }
  .glass:hover::after{opacity:1}
  /* a superfície clareia, então o texto secundário sobe junto:
     sem isto o contraste cairia de 4,98:1 para 3,65:1 */
  .glass :is(p,li,label,figcaption,.tag){transition:color .45s var(--ease)}
  .glass:hover :is(p,li,label,figcaption,.tag){color:var(--bone)}
  /* as peças pequenas também sobem; painel e formulário ficam parados */
  .pil:hover,.ev:hover,.depo__ask:hover{transform:translateY(-4px)}

  /* cards de mentor e fotos da galeria ganham a mesma lâmina de vidro */
  .men,.g{position:relative}
  .men::after,.g::after{
    content:"";position:absolute;pointer-events:none;
    background:linear-gradient(158deg,
      rgba(255,255,255,.22),rgba(255,255,255,.05) 44%,transparent 72%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.38);
    opacity:0;transition:opacity .4s var(--ease);
  }
  .men::after{inset:0 0 auto;aspect-ratio:1;border-radius:12px}
  .g::after{inset:0;border-radius:4px}
  .men:hover::after,.g:hover::after{opacity:1}
}