@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Space+Grotesk:wght@500;700&display=swap');

/* =========================
   Variáveis e base
   ========================= */
:root{
  --bg:#0f2544;
  --bg2:#17335f;
  --card:rgba(255,255,255,.06);
  --stroke:rgba(255,255,255,.10);
  --text:#E7ECF3;
  --muted:#A6B0BF;
  --accent:#7C3AED;
  --accent2:#22D3EE;
}

*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(124,58,237,.25), transparent 60%),
    radial-gradient(1000px 500px at 90% 0, rgba(34,211,238,.25), transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  background-attachment:fixed;
  line-height:1.6;
}

.container{ max-width:1240px; margin:0 auto; padding:0 20px }
:root{
  /* Base existente */
  --bg:#0f2544; --bg2:#17335f; --text:#E7ECF3; --muted:#A6B0BF;

  /* Cores de narrativa */
  --treasure:#FBBF24;     /* rota dourada (mapa do tesouro) */
  --sea:#0b1f3d;          /* mar profundo */
  --foam:#a3e2ff;         /* espuma das ondas */

  /* Navio vermelho (cargueiro) */
  --ship-red:#E11D48;     /* casco */
  --ship-red-dark:#991B1B;/* sombra */
  --container:#ef4444;    /* containers principais */
  --container-2:#fb7185;  /* containers variação */
  --container-3:#fca5a5;  /* containers variação clara */

  /* Balões e contornos */
  --balloon-bg:rgba(13,30,52,.92);
  --balloon-bd:rgba(255,255,255,.16);
}
/* =========================
   Cabeçalho / Navegação
   ========================= */
header{
  position:sticky; top:0; z-index:20;
  backdrop-filter:blur(10px);
  background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.05));
  border-bottom:1px solid var(--stroke);
}
nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 0 }
nav a{ color:var(--text); text-decoration:none; opacity:.9; margin-inline:10px }
nav a:hover{ opacity:1 }
.brand a{ font-weight:700; font-family:'Space Grotesk',Inter,sans-serif }

/* Marca empilhada (SHA RUI / TRADING COMPANY) */
.brand-logo{ display:inline-flex; flex-direction:column; line-height:1; text-decoration:none; color:#fff }
.brand-top{ font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:clamp(18px,2.4vw,28px) }
.brand-sub{ font-weight:700; text-transform:uppercase; letter-spacing:.18em; font-size:clamp(9px,1.1vw,12px); opacity:.85; margin-top:2px }

/* Idiomas (globo) */
.lang{ position:relative; display:flex; align-items:center }
.lang-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06); cursor:pointer;
}
.lang-toggle:hover{ background:rgba(255,255,255,.12) }
.lang-menu{
  position:absolute; right:0; top:120%; z-index:10; display:none; min-width:200px; padding:8px 0;
  background:rgba(13,18,27,.96); border:1px solid rgba(255,255,255,.12); border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.lang.open .lang-menu{ display:block }
.lang-menu li{ list-style:none }
.lang-menu a{ display:block; padding:10px 14px; color:#fff; text-decoration:none; font-size:14px }
.lang-menu a:hover{ background:rgba(255,255,255,.08) }

/* =========================
   Títulos, cards e seções
   ========================= */
h1{
  font-family:'Space Grotesk',Inter,sans-serif; font-weight:700;
  font-size:clamp(32px,5vw,54px); line-height:1.05; letter-spacing:-.01em; margin:0 0 12px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 8px 24px rgba(124,58,237,.12));
}
h2{ font-family:'Space Grotesk',Inter,sans-serif; font-weight:700; font-size:clamp(22px,3vw,28px); margin:0 0 10px }
p{ margin:10px 0 }

.section{
  padding:40px 0;
  border-bottom:1px solid var(--stroke);
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
}

.grid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }

.card{
  background:var(--card); border:1px solid var(--stroke); border-radius:14px; padding:18px;
  backdrop-filter:blur(8px); box-shadow:0 6px 28px rgba(0,0,0,.25);
}
.card h3{ margin:4px 0 8px; font-family:'Space Grotesk',Inter,sans-serif }

.badge{
  display:inline-block; padding:6px 10px; border:1px solid var(--stroke);
  border-radius:999px; font-size:14px; background:rgba(255,255,255,.03);
}

/* =========================
   Botões / utilidades
   ========================= */
.contact-row{ display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 }
.cta{
  display:inline-block; padding:12px 16px; border-radius:12px; border:1px solid var(--stroke);
  text-decoration:none; font-weight:700; color:var(--text);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  transition:transform .12s,box-shadow .12s,border-color .12s;
}
.cta.primary{
  background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#051018; border-color:transparent;
  box-shadow:0 0 20px rgba(34,211,238,.35),0 0 48px rgba(124,58,237,.25);
}
.cta:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgba(0,0,0,.3) }

.wp-float{
  position:fixed; inset-block-end:22px; inset-inline-end:22px;
  background:linear-gradient(90deg,#25D366,#86efac); color:#05210e;
  padding:12px 18px; border-radius:999px; font-weight:800; text-decoration:none;
  box-shadow:0 10px 28px rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.15);
}

/* =========================
   Modal genérico
   ========================= */
.modal{
  position:fixed; inset:0; background:rgba(5,8,14,.8); display:none;
  align-items:center; justify-content:center; padding:16px; backdrop-filter:blur(4px); z-index:9999;
}
.modal.open{ display:flex }
.modal-card{
  background:var(--card); border:1px solid var(--stroke); border-radius:16px;
  max-width:460px; width:100%; padding:22px; text-align:center; box-shadow:0 12px 36px rgba(0,0,0,.45);
}
.modal-card img{ max-width:100%; height:auto; border:1px solid var(--stroke); border-radius:10px; background:#fff }

/* =========================
   HERO (vídeo definido no outro arquivo)
   ========================= */
.section,nav,.hero,.footer{ padding-inline:20px }

/* =========================
   DIFERENCIAIS (balões)
   ========================= */
.diffs{ text-align:center }
.pill-head{
  display:inline-block; padding:10px 16px; border-radius:999px;
  background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.18);
  font-weight:700; letter-spacing:.3px; margin-bottom:18px;
}
.pill-grid{ display:grid; gap:12px; max-width:980px; margin:0 auto }
.pill{
  padding:16px 18px; text-align:left; border-radius:14px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 26px rgba(0,0,0,.25);
  opacity:0; transform:translateY(12px); transition:opacity .5s, transform .5s;
}
.pill.in{ opacity:1; transform:none }

/* Títulos maiores na seção */
#diferenciais h2{ font-size:clamp(28px,4.8vw,46px) }
#diferenciais .lead{ font-size:clamp(15px,2.2vw,20px) }

/* =========================
   PLATAFORMA (arraste horizontal)
   ========================= */
.snap-wrap{ position:relative; overflow:hidden }
.snap-track{
  display:flex; gap:14px; overflow-x:auto; padding:10px 4px 14px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.snap-card{
  scroll-snap-align:center;
  flex:0 0 clamp(320px, 72vw, 880px);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:14px; padding:18px; box-shadow:0 12px 30px rgba(0,0,0,.28);
}
.drag-hint{ font-size:13px; opacity:.7; margin-top:6px }

/* =========================
   Rodapé
   ========================= */
.footer{ padding:28px 0; color:#c2c9d6; border-top:1px solid var(--stroke) }
/* === QUEM SOMOS — foto 50% sem corte e alinhada à esquerda === */
#quem-somos .who-split{ 
  display:grid;
  grid-template-columns: 1fr 1fr;  
  gap: clamp(18px,3vw,36px);
  align-items:center;
}

/* cartão da foto */
#quem-somos .who-photo{
  border-radius:16px;
  overflow:hidden;                      /* só para manter a borda arredondada */
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  aspect-ratio: auto !important;        /* remove qualquer razão fixa herdada */
}

/* imagem SEM CORTE (mostra 100% da foto) */
#quem-somos .who-photo img{ 
  display:block;
  width:100%;
  height:auto;                          /* mantém a proporção original */
  object-fit: contain;                  /* segurança extra: nada é cortado */
  object-position:center;               /* centraliza dentro do quadro */
}

/* tipografia do texto à direita (um pouco maior) */
#quem-somos .who-copy h2{
  font-size: clamp(34px, 5.2vw, 52px);
  letter-spacing: .2px;
}
#quem-somos .who-copy p{
  font-size: clamp(17px, 2.2vw, 21px);
  line-height: 1.7;
}

/* mobile: empilha */
@media (max-width: 980px){
  #quem-somos .who-split{ grid-template-columns: 1fr; }
}
/* ===== Diferenciais radial ===== */
.diff-radial .diff-title{
  text-align:center; margin:0 0 6px;
  font-size:clamp(26px,4.6vw,46px);
}
.diff-radial .diff-sub{
  text-align:center; margin:0 0 16px; letter-spacing:.18em; opacity:.9;
  font-size:clamp(13px,2vw,18px);
}

/* área do diagrama */
.diff-radial .radial{
  position:relative; margin:22px auto 0;
  width:min(1060px, 1022vw); aspect-ratio:1/1;
}

/* anel pontilhado (cresce ao iniciar) */
.diff-radial .ring{
  position:absolute; inset:10%; border-radius:50%;
  border:2px dashed rgba(255,255,255,.28);
  transform:scale(.75); opacity:0; transition:transform .8s ease, opacity .8s ease;
}

/* núcleo (logo/nome) */
.diff-radial .core{
  position:absolute; inset:0; display:grid; place-items:center;
}
.diff-radial .core-logo{
  width:min(160px,34%); height:auto; display:block; margin:auto; filter:drop-shadow(0 6px 22px rgba(0,0,0,.35));
}
.diff-radial .core-brand{ text-align:center; line-height:1; }
.diff-radial .core-top{
  display:block; font-weight:800; letter-spacing:.06em;
  font-size:clamp(18px,2.6vw,28px);
}
.diff-radial .core-sub{
  display:block; margin-top:2px; opacity:.9; letter-spacing:.18em;
  font-size:clamp(9px,1.2vw,12px);
}

/* spokes: cada item é uma “barra” que sai do centro e gira pelo ângulo */
.diff-radial .spokes{ list-style:none; margin:0; padding:0; }
.diff-radial .spoke{
  --ang: calc(var(--i) * 360deg / 7);     /* 7 itens igualmente espaçados */
  position:absolute; left:50%; top:50%;
  width:40%; height:0;                    /* comprimento do raio */
  transform-origin: 0% 50%;
  transform: rotate(var(--ang));
}

/* linha tracejada que é “revelada” do centro para fora */
.diff-radial .dash{
  display:block; height:0; border-top:4px dashed rgba(255,255,255,.65);
  clip-path: inset(0 100% 0 0);           /* escondida (da direita p/ esquerda) */
  transition: clip-path .7s ease;
  transition-delay: calc(var(--i) * 120ms);
}

/* rótulo na ponta do raio */
.diff-radial .label{
  position:absolute; right:-6px; top:-16px;
  transform: rotate(calc(-1 * var(--ang))); /* mantém texto “em pé” */
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  border-radius:12px; padding:8px 12px; max-width:220px;
  box-shadow:0 10px 26px rgba(0,0,0,.25);
  font-weight:700; font-size:clamp(12px,1.7vw,15px);
  opacity:0; translate:0 8px; transition:opacity .45s ease, translate .45s ease;
  transition-delay: calc(var(--i) * 160ms + 120ms);
}

/* estado “play”: dispara anel, traços e rótulos */
.diff-radial.play .ring{ transform:scale(1); opacity:1; }
.diff-radial.play .dash{ clip-path: inset(0 0 0 0); }
.diff-radial.play .label{ opacity:1; translate:0 0; }

/* responsivo: abaixo de 720px reduz o núcleo e abre o raio */
@media (max-width: 720px){
  .diff-radial .radial{ width:min(640px, 94vw); }
  .diff-radial .spoke{ width:48%; }
  .diff-radial .label{ max-width:180px; }
}
/* ===== DIFERENCIAIS – Radar com logo central e nós sequenciais ===== */
.diffs-radar .radar{
  --size: clamp(320px, 72vw, 860px);   /* tamanho total do círculo */
  --radius: calc(var(--size) * .42);   /* raio onde ficam os nós */
  position: relative;
  width: var(--size);
  aspect-ratio: 1 / 1;
  margin: 18px auto 8px;
  border-radius: 50%;
  background: radial-gradient(transparent 55%, rgba(255,255,255,.04) 56% 100%);
  box-shadow: 0 30px 80px rgba(0,0,0,.25) inset;
}

/* Anéis */
.diffs-radar .ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px dashed rgba(255,255,255,.14);
  pointer-events:none;
}
.diffs-radar .ring.r1{ transform: scale(.66) }
.diffs-radar .ring.r2{ transform: scale(.82) }
.diffs-radar .ring.r3{ transform: scale(.98) }

/* Logo central */
.diffs-radar .center-logo{
  position:absolute; inset:50% auto auto 50%;
  transform: translate(-50%,-50%);
  width: clamp(96px, 14vw, 160px); height: clamp(96px, 14vw, 160px);
  object-fit: contain; border-radius: 50%;
  background:#fff; padding:10px;
  box-shadow: 0 10px 26px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.15) inset;
}

/* Nó + rótulo + balão */
.diffs-radar .node{
  position:absolute; top:50%; left:50%;
  transform: rotate(var(--a)) translate(var(--radius)) rotate(calc(-1 * var(--a)));
  background:none; border:0; padding:0; cursor:default;
  opacity:0; /* entra animando */
}
.diffs-radar .node .dot{
  width:12px; height:12px; border-radius:50%;
  display:inline-block; background:#22D3EE; box-shadow:0 0 0 4px rgba(34,211,238,.2);
}
.diffs-radar .node .label{
  display:inline-block; margin-left:10px; font-weight:800;
  background:rgba(255,255,255,.10); color:#fff; border:1px solid rgba(255,255,255,.16);
  padding:6px 10px; border-radius:999px; white-space:nowrap;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
/* balão de descrição */
.diffs-radar .node .tip{
  position:absolute; top:26px; left:-6px;
  max-width: 280px; font-size:14px; line-height:1.45;
  color:#e9eef6; background:rgba(8,12,20,.85);
  border:1px solid rgba(255,255,255,.18); border-radius:12px;
  padding:10px 12px; box-shadow:0 18px 40px rgba(0,0,0,.35);
  opacity:0; transform: translateY(6px);
}

/* Quando o nó está do lado esquerdo, invertimos alinhamentos */
.diffs-radar .node.left .label{ margin-left:0; margin-right:10px }
.diffs-radar .node.left{ transform: rotate(var(--a)) translate(var(--radius)) rotate(calc(-1 * var(--a))) translateX(-100%); }
.diffs-radar .node.left .tip{ left:auto; right:-6px }

/* Animações (sequenciais) */
.diffs-radar .radar.on .node{
  animation: radarPop .55s var(--delay, 0s) both cubic-bezier(.2,.7,.2,1);
}
.diffs-radar .radar.on .node .tip{
  animation: tipIn .45s var(--tipDelay, .2s) both;
}
@keyframes radarPop{
  from{ opacity:0; transform: rotate(var(--a)) translate(calc(var(--radius) - 18px)) rotate(calc(-1 * var(--a))); }
  to  { opacity:1; transform: rotate(var(--a)) translate(var(--radius)) rotate(calc(-1 * var(--a))); }
}
@keyframes tipIn{
  from{ opacity:0; transform: translateY(6px) }
  to  { opacity:1; transform: translateY(0) }
}

/* Responsivo: em telas pequenas, mantenha leitura boa */
@media (max-width: 720px){
  .diffs-radar .node .label{ font-size:14px }
  .diffs-radar .node .tip{ max-width:220px }
}
/* ===== DIFERENCIAIS – Radial com logo central ===== */
.diffs-radial{
  /* Fundo azul mais claro para contrastar com o tema */
  background:
    radial-gradient(900px 600px at 50% 20%, rgba(255,255,255,.07), transparent 60%),
    linear-gradient(180deg,#214a83,#183a69 55%, #17335f);
  padding-block: clamp(32px, 4.5vh, 52px);
}

.dif-title{ text-align:center; font-size:clamp(28px,4.8vw,46px); margin:0 0 6px }
.dif-sub{   text-align:center; font-size:clamp(15px,2.2vw,20px); opacity:.9; margin:0 0 18px }

.radial-stage{
  --R: clamp(180px, 32vh, 320px);     /* RAIO do círculo (menor para caber numa tela) */
  --CENTER: clamp(200px, 20vh, 260px);/* diâmetro do núcleo (logo) */
  --BUBBLE-W: clamp(230px, 28vw, 360px);
  --line: 2px dashed rgba(255,255,255,.35);
  --bubble-bg: rgba(255,255,255,.10);
  --bubble-bd: rgba(255,255,255,.20);

  position: relative;
  min-height: clamp(520px, 84vh, 760px); /* cabe em uma tela */
  display: grid;
  place-items: center;
  overflow: visible;
}

/* Núcleo com o logotipo */
.radial-stage .core{
  position:absolute; left:50%; top:50%;
  width:var(--CENTER); height:var(--CENTER);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 10px 32px rgba(0,0,0,.35), inset 0 0 40px rgba(255,255,255,.06);
  display:grid; place-items:center;
  overflow:hidden;
}
.radial-stage .core img{
  width:85%; height:85%; object-fit:contain; filter:drop-shadow(0 2px 8px rgba(0,0,0,.35));
}

/* Nó posicionado na circunferência */
.radial-stage .node{
  position:absolute; left:50%; top:50%;
  transform:
    rotate(var(--a))               /* gira o braço até o ângulo */
    translateX(var(--R))           /* empurra até a borda do círculo */
    rotate(calc(var(--a) * -1));   /* volta a orientação para ficar “reta” */
  transform-origin:center;
  transition: transform .7s cubic-bezier(.2,.6,.2,1);
}

/* Linha tracejada do núcleo até o ponto */
.radial-stage .node::before{
  content:"";
  position:absolute; inset-block-start:50%;
  inset-inline-end: 100%;          /* começa atrás do ponto, em direção ao núcleo */
  width: var(--R); height:0;
  border-top: var(--line);
  transform-origin: right center;
  transform: scaleX(0);
  transition: transform .6s ease .05s;
}

/* Pontinho do raio */
.radial-stage .dot{
  width:14px; height:14px; border-radius:50%;
  background: linear-gradient(180deg, #66e0c2, #22b3e5);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 0 0 3px rgba(34,179,229,.18), 0 10px 20px rgba(0,0,0,.35);
  display:block;
  transform: scale(0);
  transition: transform .28s ease-out;
}

/* Balão do texto */
.radial-stage .bubble{
  position:absolute; top:50%;
  width: var(--BUBBLE-W);
  padding:14px 16px;
  border-radius:14px;
  background: var(--bubble-bg);
  border:1px solid var(--bubble-bd);
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  color:#eaf1ff;
  opacity:0; transform: translateY(-50%) scale(.96);
  transition: opacity .28s ease-out, transform .28s ease-out;
  font-size: clamp(14px, 1.18vw, 18px); /* >>> fonte maior nos balões */
  line-height: 1.45;
}
.radial-stage .bubble b{ display:block; font-weight:800; margin-bottom:4px }
.radial-stage .bubble small{ display:block; opacity:.92 }

/* Alinhamento dos balões conforme o lado */
.radial-stage .node.right .bubble{ left: 18px;  transform: translateY(-50%) translateX(8px)  scale(.96); }
.radial-stage .node.left  .bubble{ right:18px;  transform: translateY(-50%) translateX(-8px) scale(.96); text-align:right }

/* Quando o nó acende (JS adiciona .on) */
.radial-stage .node.on::before{ transform: scaleX(1) }
.radial-stage .node.on .dot{ transform: scale(1) }
.radial-stage .node.on .bubble{ opacity:1; transform: translateY(-50%) scale(1) }

/* Responsivo: empilhar em lista no mobile */
@media (max-width: 880px){
  .radial-stage{ min-height: auto; padding: 10px 0 6px }
  .radial-stage .core{ position:relative; inset:auto; transform:none; margin:0 auto 18px }
  .radial-stage .node{
    position:relative; left:auto; top:auto; transform:none; margin:10px 0 16px;
  }
  .radial-stage .node::before{ display:none }
  .radial-stage .bubble{ position:relative; left:auto; right:auto; transform:none; width:100% }
}
/* ===== DIFERENCIAIS – radial com logo e balões ===== */
#diferenciais.diffs-radial{
  background:
    radial-gradient(820px 560px at 50% 20%, rgba(255,255,255,.07), transparent 60%),
    linear-gradient(180deg,#214a83,#183a69 55%, #17335f);
  padding-block: clamp(44px,6vh,72px);
}

#diferenciais .dif-title{ text-align:center; font-size:clamp(28px,4.8vw,46px); margin:0 0 6px }
#diferenciais .dif-sub  { text-align:center; font-size:clamp(15px,2.2vw,20px); opacity:.9; margin:0 0 18px }

#diferenciais .radial-stage{
  /* RAIO do círculo (ajuste aqui se quiser mais/menos compacto) */
  --R: clamp(210px, 27vh, 280px);
  /* diâmetro do núcleo (logo) */
  --CENTER: clamp(200px, 22vh, 260px);
  /* largura dos balões */
  --BUBBLE-W: clamp(260px, 30vw, 380px);
  --line: 2px dashed rgba(255,255,255,.35);
  --bubble-bg: rgba(255,255,255,.12);
  --bubble-bd: rgba(255,255,255,.22);

  position: relative;
  min-height: clamp(560px, 88vh, 720px);
  display: grid;
  place-items: center;
  overflow: visible;
}

/* Núcleo (logo) */
#diferenciais .core{
  position:absolute; left:50%; top:50%;
  width:var(--CENTER); height:var(--CENTER);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 10px 32px rgba(0,0,0,.35), inset 0 0 40px rgba(255,255,255,.06);
  display:grid; place-items:center; overflow:hidden;
  z-index: 1;
}
#diferenciais .core img{ width:85%; height:85%; object-fit:contain; filter:drop-shadow(0 2px 8px rgba(0,0,0,.35)) }

/* Nó na circunferência */
#diferenciais .node{
  position:absolute; left:50%; top:50%;
  transform:
    rotate(var(--a))
    translateX(var(--R))
    rotate(calc(var(--a) * -1));
  transform-origin:center;
  z-index: 2;
}

/* Linha tracejada do núcleo até o ponto */
#diferenciais .node::before{
  content:"";
  position:absolute; inset-block-start:50%; inset-inline-end: 100%;
  width: var(--R); height:0;
  border-top: var(--line);
  transform-origin: right center;
  transform: scaleX(0);
  transition: transform .55s ease .05s;
}

/* Ponto */
#diferenciais .dot{
  width:14px; height:14px; border-radius:50%;
  background: linear-gradient(180deg, #66e0c2, #22b3e5);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 0 0 3px rgba(34,179,229,.18), 0 10px 20px rgba(0,0,0,.35);
  display:block;
  transform: scale(0);
  transition: transform .25s ease-out .05s;
}

/* Balão */
#diferenciais .bubble{
  position:absolute; top:50%;
  width: var(--BUBBLE-W);
  padding:14px 16px;
  border-radius:14px;
  background: var(--bubble-bg);
  border:1px solid var(--bubble-bd);
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  color:#eaf1ff;
  opacity:0; transform: translateY(-50%) scale(.96);
  transition: opacity .25s ease-out, transform .25s ease-out;
  font-size: clamp(15px, 1.22vw, 19px); /* fonte um pouco maior */
  line-height: 1.45;
}
#diferenciais .bubble b{ display:block; font-weight:800; margin-bottom:4px }
#diferenciais .bubble small{ display:block; opacity:.95 }

/* Encaixe do balão conforme o lado */
#diferenciais .node.right .bubble{ left:18px;  transform: translateY(-50%) translateX(8px)  scale(.96); text-align:left }
#diferenciais .node.left  .bubble{ right:18px; transform: translateY(-50%) translateX(-8px) scale(.96); text-align:right }

/* Estado “ligado” (JS adiciona .on) */
#diferenciais .node.on::before{ transform: scaleX(1) }
#diferenciais .node.on .dot{ transform: scale(1) }
#diferenciais .node.on .bubble{ opacity:1; transform: translateY(-50%) scale(1) }

/* Mobile: vira lista vertical */
@media (max-width: 880px){
  #diferenciais .radial-stage{ min-height:auto; padding: 10px 0 6px }
  #diferenciais .core{ position:relative; inset:auto; transform:none; margin:0 auto 18px }
  #diferenciais .node{
    position:relative; left:auto; top:auto; transform:none; margin:10px 0 16px;
  }
  #diferenciais .node::before{ display:none }
  #diferenciais .bubble{ position:relative; left:auto; right:auto; transform:none; width:100% }
}
/* ===== DIFERENCIAIS – remover tracejados e bolinhas, mantendo posições ===== */
.radial-stage .node::before,
.radial-stage .dot{
  display: none !important;   /* esconde linha pontilhada e o ponto azul */
}

/* mantém os offsets originais dos balões (não muda a posição) */
.radial-stage .node.right .bubble{
  left: 18px;  transform: translateY(-50%) translateX(8px) scale(.96);
}
.radial-stage .node.left .bubble{
  right: 18px; transform: translateY(-50%) translateX(-8px) scale(.96);
  text-align: right;
}

/* continua a lógica de 'acender' só o balão, sem linha/ponto */
.radial-stage .node.on .bubble{
  opacity: 1; transform: translateY(-50%) scale(1);
}
/* ==== Faixa de transição entre vídeo e conteúdo ==== */
.brand-marquee{
  position:relative;
  height:54px;
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  overflow:hidden;
}
.brand-marquee .marquee{ position:relative; width:100%; height:100%; }
.brand-marquee .track{
  position:absolute; inset:0;
  display:flex; align-items:center; white-space:nowrap;
  animation:marquee-left 18s linear infinite;
}
.brand-marquee .track:nth-child(2){ animation-delay:-9s } /* segunda faixa defasada */
.brand-marquee .track span{
  display:inline-block; padding:0 28px; letter-spacing:.25em;
  color:#dbe7ff; opacity:.9; font-weight:800;
}
@keyframes marquee-left{
  from{ transform:translateX(0) }
  to  { transform:translateX(-50%) }
}

/* Quem somos um pouco mais “alto” na página */
#quem-somos{ padding-block: clamp(24px, 5vh, 56px); }
#quem-somos .who-split{ align-items: start; }
#quem-somos .who-copy{ margin-top: 4px; } /* puxa o texto um tiquinho para cima */


/* ==== Plataforma – tablet com slides ==== */
.section.platform.full{
  min-height:100vh; display:flex; align-items:center;
}
.tablet{
  position:relative; margin:14px auto 0;
  width:min(980px, 92vw); aspect-ratio:3 / 2;
  background:#fff; border-radius:28px;
  border:1px solid rgba(3,14,28,.08);
  box-shadow:0 22px 60px rgba(0,0,0,.35);
  overflow:hidden;
}
.tablet .bezel{
  position:absolute; top:10px; left:50%; transform:translateX(-50%);
  width:70px; height:6px; border-radius:3px; background:#cbd6e4;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
  z-index:3;
}
.slides{ position:absolute; inset:0; border-radius:28px; overflow:hidden; }
.slide{
  position:absolute; inset:0; opacity:0; pointer-events:none;
  transition:opacity .6s ease; background:#f4f7fb;
}
.slide.active{ opacity:1; pointer-events:auto; }

/* área da foto (70% da tela) */
.slide::before{
  content:""; position:absolute; inset:0 0 30% 0;   /* top 70% foto / bottom 30% balão */
  background: var(--bg, none) center/cover no-repeat;
}

/* “balão” sincronizado */
.balloon{
  position:absolute; left:24px; right:24px; bottom:18px;
  background:rgba(13,30,52,.92); color:#fff;
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px; padding:16px 18px;
  box-shadow:0 14px 30px rgba(0,0,0,.28);
}
.balloon h3{ margin:0 0 6px; font-size:clamp(18px, 2.2vw, 22px) }
.balloon p{ margin:0; font-size:clamp(14px, 1.25vw, 17px); line-height:1.55 }

/* Controles e dots */
.plat-controls{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-top:16px;
}
.plat-controls .nav{
  width:44px; height:40px; border-radius:10px; cursor:pointer;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  color:#fff; font-weight:800; line-height:1; transform:translateZ(0);
}
.plat-controls .nav:hover{ box-shadow:0 10px 20px rgba(0,0,0,.25) }
.plat-controls .dots{ display:flex; gap:8px }
.plat-controls .dots button{
  width:10px; height:10px; border-radius:50%;
  border:1px solid rgba(255,255,255,.6); background:rgba(255,255,255,.35);
  cursor:pointer;
}
.plat-controls .dots button.active{
  background:#66e0c2; border-color:transparent;
  box-shadow:0 0 0 3px rgba(34,179,229,.22);
}
.plat-hint{ text-align:center; font-size:12px; opacity:.7; margin-top:6px }

/* Responsivo: tablet mais alto e texto confortável */
@media (max-width: 720px){
  .tablet{ width:95vw; aspect-ratio: 10 / 13; }
  .slide::before{ inset:0 0 38% 0 }        /* mais espaço para o balão no mobile */
  .balloon{ left:16px; right:16px; }
}
/* ===== Reel de fotos (rolando para a direita) ===== */
.who-reel{
  position:relative; overflow:hidden; margin-top:16px;
  height: clamp(120px, 18vh, 200px);
  /* fade nas bordas para ficar elegante */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  border-radius:12px; border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.10);
}
.who-reel .reel-track{
  position:absolute; inset:0 auto 0 0;
  display:flex; gap:12px; align-items:center; padding:8px 12px;
  will-change: transform;
}
.who-reel img{
  height:100%; width:auto; object-fit:cover; border-radius:10px;
  box-shadow:0 10px 26px rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.15);
}
/* ======  FAIXA / MARQUEE (sem sobreposição)  ====== */
.brand-band{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-block:1px solid rgba(255,255,255,.12);
  height:54px; display:flex; align-items:center;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.brand-band .marquee{ white-space:nowrap; will-change: transform; }
.brand-band .marquee span{
  display:inline-block; padding-left:100%;
  font-weight:800; letter-spacing:.22em; opacity:.95;
  animation: marquee 16s linear infinite;
}
@keyframes marquee{
  to{ transform: translateX(-100%); }
}
/* Foto do slide: controlável por variáveis */
.slide::before{
  content:"";
  position:absolute;
  inset: 0 0 var(--photo-bottom, 30%) 0;  /* reserva p/ o balão: 30% padrão */
  background-image: var(--bg, none);
  background-position: center;
  background-size: var(--bg-size, cover); /* 'cover' padrão; pode virar 'contain' por slide */
  background-repeat: no-repeat;
  background-color: #0b0e10;              /* fundo neutro nas “barras” quando usar contain */
}

/* ======  QUEM SOMOS – foto maior + galeria  ====== */
/* aumenta levemente a coluna da foto, sem mexer no texto */
#quem-somos .who-split{
  display:grid; grid-template-columns: 52% 48%;
  gap: clamp(18px, 3vw, 36px); align-items:center;
}
#quem-somos .who-photo{ aspect-ratio: 16/10; border-radius:16px; overflow:hidden; }
#quem-somos .who-photo img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

/* faixa de fotos: cada imagem “corta” para caber sem distorcer */
.who-gallery{ padding:16px 0 6px; }
.who-gallery .strip{
  display:flex; gap:12px; will-change: transform;
  animation: stripMove 25s linear infinite;
}
.who-gallery img{
  width: clamp(220px, 30vw, 420px);
  aspect-ratio: 4 / 3;           /* mantém proporção */
  object-fit: cover;              /* ENQUADRA sem distorcer */
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 26px rgba(0,0,0,.3);
}
@keyframes stripMove{
  to{ transform: translateX(-50%); } /* como duplicamos as imagens, “loopa” suave */
}

/* ======  DIFERENCIAIS – mais compacto + brilho animado nos balões  ====== */
.diffs-radial{ padding-block: clamp(36px, 5vh, 56px); }
.radial-stage{ min-height: clamp(480px, 76vh, 680px); }

/* remove linhas/pontos (você pediu só os balões) */
.radial-stage .node::before,
.radial-stage .dot { display:none !important; }

/* borda luminosa animada ao redor do balão */
@keyframes borderSpin { to { --angle: 360deg; } }
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.radial-stage .bubble{
  /* duas camadas: fundo e “borda animada” */
  border:1px solid transparent;
  background:
    linear-gradient(var(--bubble-bg), var(--bubble-bg)) padding-box,
    conic-gradient(from var(--angle),
      #66e0c2, #22b3e5, #7c3aed, #22b3e5, #66e0c2) border-box;
  animation: borderSpin 6s linear infinite;
}

/* título/sub em “Diferenciais” mais próximos */
.dif-title{ margin-top: 4px; }
.dif-sub{ margin-top: 0; margin-bottom: 14px; }

/* ======  FAIXA DE FOTOS: imagens grandes encaixam (object-fit:cover) ====== */
/* Se precisar “subir/descer” o enquadramento de uma foto específica, use: */
/* .who-gallery img:nth-child(1){ object-position: center 20%; } */

/* ======  RODAPÉ novo ====== */
.footer{ border-top:1px solid rgba(255,255,255,.12); padding:22px 0; }
.footer-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.foot-brand{ letter-spacing:.18em; font-weight:800; opacity:.95; }
.foot-social{ display:flex; gap:12px; }
.ic{ width:34px; height:34px; border-radius:50%; display:inline-block; background:#0b1f3d;
     border:1px solid rgba(255,255,255,.18); box-shadow:0 6px 18px rgba(0,0,0,.28); position:relative; }
.ic::before{ content:""; position:absolute; inset:0; background-size:60% 60%; background-repeat:no-repeat; background-position:center; opacity:.94; }
/* ícones simples (SVG embutido como data-URL) */
.ic.ig::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm5 5a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm6.5-.25a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5zM12 9a3 3 0 1 1 0 6 3 3 0 0 1 0-6z'/%3E%3C/svg%3E"); }
.ic.tk::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 24 24'%3E%3Cpath d='M16 3c.3 1.7 1.4 3.1 3 3.7V10c-1.2 0-2.4-.3-3.5-.9v5.5a5.6 5.6 0 1 1-5.6-5.6c.2 0 .4 0 .6.1v3.2a2.5 2.5 0 1 0 1.8 2.4V2.5h3.7z'/%3E%3C/svg%3E"); }
.ic.yt::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 24 24'%3E%3Cpath d='M23 7.5a4 4 0 0 0-2.8-2.8C18.2 4 12 4 12 4s-6.2 0-8.2.7A4 4 0 0 0 1 7.5 41.8 41.8 0 0 0 1 12c0 1.5 0 3 .1 4.5A4 4 0 0 0 3.9 19.3C5.8 20 12 20 12 20s6.2 0 8.2-.7A4 4 0 0 0 23 16.5c.1-1.5.1-3 .1-4.5s0-3-.1-4.5zM10 15V9l5 3-5 3z'/%3E%3C/svg%3E"); }
.ic.wa::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 24 24'%3E%3Cpath d='M20 4.9A9.9 9.9 0 0 0 4.6 19.3L3 22.9l3.8-1.5A9.9 9.9 0 0 0 12 22a10 10 0 0 0 8-17.1zM12 20a8 8 0 0 1-4.1-1.1l-.3-.2-2.4.9.9-2.3-.2-.3A8 8 0 1 1 20 12a8 8 0 0 1-8 8zm4.6-5.6c-.3-.2-1.7-.8-2-.9-.3-.1-.5-.2-.7.2s-.8.9-1 .9-.5 0-1-.2a7.3 7.3 0 0 1-2.2-1.4 8.1 8.1 0 0 1-1.5-2.1c-.1-.3 0-.5.1-.7l.3-.4c.2-.2.3-.4.4-.6.1-.2 0-.4 0-.6l-.8-2c-.2-.5-.5-.5-.7-.5h-.6c-.2 0-.6.1-.9.4-.3.3-1.2 1.1-1.2 2.7s1.2 3.1 1.4 3.3c.2.3 2.3 3.5 5.6 4.9 3.3 1.3 3.3.9 3.9.9.6 0 2-.8 2.2-1.7.2-.9.2-1.6.1-1.7 0-.1-.3-.2-.6-.3z'/%3E%3C/svg%3E"); }
.ic.wc::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 4C6.9 4 4 6.4 4 9.3c0 1.9 1.2 3.6 3 4.6l-.7 2.6 2.6-1.4c.5.1 1 .1 1.6.1 3.6 0 6.5-2.4 6.5-5.3S14.1 4 10.5 4zm9 5.5c0-2.4-2.2-4.3-4.9-4.3h-.2a6.6 6.6 0 0 1 1.9 4.6c0 3.1-2.4 5.8-5.7 6.7 1 .3 2 .5 3 .5.5 0 1 0 1.4-.1l2.4 1.3-.6-2.3c1.7-1 2.7-2.6 2.7-4.4z'/%3E%3C/svg%3E"); }

/* ======  MODAL LEADS ====== */
.modal-card.leads{ max-width:560px; }
.modal-card.leads h3{ margin:0 0 12px; }
#leads-form .form-row{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
#leads-form input{ padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:#fff; }
#leads-form .chk{ display:flex; gap:8px; align-items:flex-start; margin:8px 0 10px; font-size:14px; opacity:.9; }
#leads-form .form-actions{ display:flex; gap:10px; justify-content:flex-end; align-items:center; }
#leads-form .msg{ min-height:20px; margin-top:8px; opacity:.95; }
/* Primeira faixa mais clara (aplique class="brand-band light") */
.brand-band.light{
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.10));
  border-block-color: rgba(255,255,255,.24);
}
.brand-band.light .marquee span{
  color:#f6fbff;
  text-shadow: 0 1px 0 rgba(0,0,0,.22);
}
/* ===== Navegação mais visível sobre o vídeo ===== */
.site-header .menu{ gap: clamp(12px, 2vw, 24px); }
.site-header .menu a{
  font-weight: 800;
  font-size: clamp(14px, 1.25vw, 18px);
  letter-spacing: .02em;
  padding: 8px 4px;
  text-shadow: 0 2px 14px rgba(0,0,0,.55), 0 0 8px rgba(0,0,0,.35);
}
@media (max-width: 880px){
  .site-header .menu a{ font-size: 15px; }
}

/* ===== FAQ (estilo simples) ===== */
.section.faq details{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  padding: 12px 14px;
  border-radius: 12px;
  margin: 10px 0;
}
.section.faq summary{ cursor: pointer; font-weight: 700; }
.section.faq summary::-webkit-details-marker{ display:none }

/* ===== Rodapé — endereço ===== */
.corp-address{
  margin-top:6px; font-style:normal; line-height:1.45;
  color:#cfd7e6; opacity:.9; font-size:14px;
}
@media (max-width:720px){
  .footer-row{ flex-direction:column; align-items:flex-start; }
}

/* ===== Diferenciais: remover brilho dos BALÕES ===== */
#diferenciais .radial-stage .bubble{
  /* volta ao fundo “normal” do balão (sem conic-gradient animado) */
  background: var(--bubble-bg);
  border: 1px solid var(--bubble-bd);
  animation: none;
}

/* ===== Diferenciais: feixe de luz girando APENAS no LOGO central ===== */
#diferenciais .core{
  position: absolute; /* garante contexto para o pseudo-elemento */
}
#diferenciais .core::before{
  content:"";
  position:absolute; inset:-6px; border-radius:50%;
  /* anel colorido girando */
  background: conic-gradient(from var(--angle),
    #66e0c2, #22b3e5, #7c3aed, #22b3e5, #66e0c2);
  filter: blur(6px); opacity:.9;
  --angle: 0deg;
  animation: coreSpin 6s linear infinite;
  /* máscara para mostrar só a borda (o “anel” de luz) */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
  pointer-events:none;
}
@keyframes coreSpin{ to{ --angle: 360deg; } }
/* === QUEM SOMOS — um pouco mais curto === */
#quem-somos{
  padding-block: clamp(20px, 4vh, 40px);   /* menos altura geral */
}
#quem-somos .who-split{
  gap: clamp(14px, 2.6vw, 28px);           /* espaço entre foto e texto um pouco menor */
}
/* reduzo a altura visível da foto sem distorcer */
#quem-somos .who-photo{
  height: clamp(280px, 40vh, 420px);       /* limite de altura */
  aspect-ratio: auto;                      /* ignora razão anterior */
}
#quem-somos .who-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;                        /* preenche sem distorcer */
}
/* FAQ */
.faq .faq-list { max-width: 980px; margin: 0 auto; }
.faq details { 
  background: rgba(255,255,255,.06); 
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px; padding:12px 14px; margin:10px 0;
  box-shadow:0 10px 26px rgba(0,0,0,.25);
}
.faq summary {
  cursor:pointer; list-style:none; font-weight:800; 
  font-size: clamp(16px, 2.2vw, 18px);
}
.faq summary::-webkit-details-marker { display:none }
.faq details[open] { background: rgba(255,255,255,.10) }
.faq details > div { 
  margin-top:8px; font-size: clamp(14px, 1.9vw, 16px); 
  line-height:1.6; color:#e7ecff;
}
/* ==== OFFSET PARA ÂNCORAS COM CABEÇALHO FIXO ==== */
:root{ --header-h: 72px; }                 /* altura aproximada do header */
@media (max-width: 880px){ :root{ --header-h: 64px; } }

/* Suaviza a rolagem e reserva espaço no topo */
html{
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 10px);
}

/* Alvo das âncoras do menu (ajuste os IDs que existir em sua home) */
#quem-somos,
#diferenciais,
#plataforma,
#faq{
  scroll-margin-top: calc(var(--header-h) + 10px);
}
/* Aproxima título/subtítulo dos balões em #diferenciais */
#diferenciais .dif-title{
  margin-bottom: 1px;           /* estava maior */
  line-height: 1.1;
}
#diferenciais .dif-sub{
  margin-top: 0;
  margin-bottom: 9px;           /* encosta um pouco mais */
  letter-spacing: .06em;
  opacity: .95;
}

/* ===== Slides do tablet: foto configurável por variáveis ===== */
.slide::before{
  content:"";
  position:absolute;
  inset: 0 0 var(--photo-bottom, 30%) 0; /* reserva padrão 30% para o balão */
  background-image: var(--bg, none);
  background-position: center;
  background-size: var(--bg-size, cover); /* mude para 'contain' por slide, quando quiser ver 100% */
  background-repeat: no-repeat;
  background-color: #0b0e10;
}

/* ===== Diferenciais: aproximar título/sub dos balões (só espaçamento) ===== */
#diferenciais .dif-title{ margin: 2px 0 2px; line-height:1.15; }
#diferenciais .dif-sub{ margin: 0 0 9px; letter-spacing:.06em; opacity:.95; }

/* ===== Navegação visível sobre o vídeo (mantido) ===== */
.site-header .menu{ gap: clamp(12px, 2vw, 24px); }
.site-header .menu a{
  font-weight: 800; font-size: clamp(14px, 1.25vw, 18px);
  letter-spacing:.02em; padding:8px 4px;
  text-shadow: 0 2px 14px rgba(0,0,0,.55), 0 0 8px rgba(0,0,0,.35);
}

/* ===== Offset âncoras ===== */
:root{ --header-h: 72px; }
@media (max-width: 880px){ :root{ --header-h: 64px; } }
html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--header-h) + 10px); }
#quem-somos, #diferenciais, #plataforma, #faq{ scroll-margin-top: calc(var(--header-h) + 10px); }
/* ====== Subnav fixa da página ====== */
.page-about .subnav{
  position: sticky; top: calc(var(--header-h) + 2px); z-index: 10;
  backdrop-filter: blur(10px);
  border-block:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(13,18,27,.55), rgba(13,18,27,.25));
}
.page-about .subnav .container{
  display:flex; gap:10px; overflow:auto; padding-block:8px;
}
.page-about .subnav a{
  text-decoration:none; color:#fff; opacity:.9; padding:8px 10px; white-space:nowrap;
  border:1px solid rgba(255,255,255,.12); border-radius:999px; font-weight:700; font-size:14px;
}
.page-about .subnav a:hover{ opacity:1 }
.page-about .subnav a.pill{
  background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#051018; border-color:transparent;
}

/* ====== HERO ====== */
.about-hero .hero-wrap{
  display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(16px,3vw,26px); align-items:center;
}
.about-hero .hero-photo{ border-radius:16px; overflow:hidden; box-shadow:0 18px 42px rgba(0,0,0,.35) }
.about-hero .hero-photo img{ width:100%; height:100%; object-fit:cover; display:block }

/* ====== Values ====== */
.values-grid{ grid-template-columns: repeat(auto-fit,minmax(240px,1fr)) }
.values-grid .card{ min-height: 160px }

/* ====== Sócios ====== */
.partners-grid{
  display:grid; grid-template-columns: repeat(2,1fr); gap:14px;
}
.partner-card{
  display:grid; grid-template-columns: 1fr 1.2fr; gap:14px;
  background: var(--card); border:1px solid var(--stroke); border-radius:16px; padding:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.3);
}
.partner-card figure{ border-radius:12px; overflow:hidden }
.partner-card img{ width:100%; height:100%; object-fit:cover; display:block }
.partner-card .info h3{ margin:2px 0 2px }
.partner-card .role{ opacity:.9; margin:0 0 6px }
.partner-card .bio{ margin:0 0 10px }
.mini-tags{ display:flex; gap:6px; margin:0 0 10px }
.mini-tags span{
  display:inline-block; padding:4px 8px; border-radius:999px; font-weight:800; font-size:12px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06);
}

/* ====== Equipe ====== */
.team-grid{
  display:grid; gap:12px; grid-template-columns: repeat(3,1fr);
}
.member-card{
  background:var(--card); border:1px solid var(--stroke); border-radius:14px; padding:12px;
  text-align:center; box-shadow:0 10px 26px rgba(0,0,0,.28);
  transition: transform .15s ease, box-shadow .15s ease;
}
.member-card:hover{ transform: translateY(-3px); box-shadow:0 18px 40px rgba(0,0,0,.35) }
.member-card figure{ aspect-ratio: 4 / 5; overflow:hidden; border-radius:10px; margin:0 0 8px }
.member-card img{ width:100%; height:100%; object-fit:cover }
.member-card h3{ margin:4px 0 0 }
.member-card .role{ margin:0 0 6px; opacity:.9 }

/* ====== Escritórios ====== */
.offices-grid{
  display:grid; gap:12px; grid-template-columns: repeat(3,1fr);
}
.office-card{
  background:var(--card); border:1px solid var(--stroke); border-radius:14px; overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.3); cursor: zoom-in;
}
.office-card figure{ aspect-ratio: 3 / 2; overflow:hidden }
.office-card img{ width:100%; height:100%; object-fit:cover; display:block }
.office-card .meta{ padding:12px 14px }
.office-card h3{ margin:0 0 4px }

/* ====== Timeline ====== */
.about-history .timeline{ display:flex; gap:12px; }
.dot-card{
  position:relative; min-width: 260px; padding:14px; border-radius:14px;
  background:var(--card); border:1px solid var(--stroke);
}
.dot-card .dot{
  position:absolute; left:14px; top:-10px; width:14px; height:14px; border-radius:50%;
  background:linear-gradient(180deg,#66e0c2,#22b3e5);
  box-shadow:0 0 0 4px rgba(34,179,229,.22);
}

/* ====== KPIs ====== */
.about-metrics .kpi-row{
  display:grid; gap:12px; grid-template-columns: repeat(4,1fr);
}
.about-metrics .num{
  font-family:'Space Grotesk',Inter,sans-serif;
  font-size: clamp(28px,5vw,44px); font-weight:800; line-height:1;
}

/* ====== Cultura ====== */
.culture-grid{
  display:grid; gap:12px; grid-template-columns: repeat(4,1fr);
}
.culture-photo{ display:block; border-radius:12px; overflow:hidden; border:1px solid var(--stroke); box-shadow:0 12px 30px rgba(0,0,0,.3); cursor: zoom-in }
.culture-photo img{ width:100%; height:100%; object-fit:cover; display:block }

/* ====== CTA ====== */
.about-cta .cta-wrap{
  text-align:center; background:var(--card); border:1px solid var(--stroke);
  border-radius:16px; padding:22px; box-shadow:0 18px 40px rgba(0,0,0,.35);
}

/* ====== Lightbox (dialog) ====== */
#lightbox{
  border:0; padding:0; background: rgba(5,8,14,.85);
  width:min(92vw, 1200px);
}
#lightbox::backdrop{ background: rgba(5,8,14,.65) }
#lightbox img{ width:100%; height:auto; display:block }
#lightbox .close{
  position:absolute; top:10px; right:10px; width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; font-weight:800; cursor:pointer;
}

/* ====== Reveal utilitário ====== */
.reveal{ opacity:0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease }
.reveal.in{ opacity:1; transform:none }

/* ====== Responsivo ====== */
@media (max-width: 1100px){
  .about-hero .hero-wrap{ grid-template-columns: 1fr; }
  .partners-grid{ grid-template-columns: 1fr }
  .partner-card{ grid-template-columns: 1fr; }
  .offices-grid{ grid-template-columns: repeat(2,1fr) }
  .about-metrics .kpi-row{ grid-template-columns: repeat(2,1fr) }
  .culture-grid{ grid-template-columns: repeat(2,1fr) }
}
@media (max-width: 720px){
  .team-grid{ grid-template-columns: 1fr }
  .offices-grid{ grid-template-columns: 1fr }
  .culture-grid{ grid-template-columns: 1fr }
}
/* ===== ROTA DINÂMICA ===== */
.route .route-head { text-align:center; margin-bottom: 10px; }
.route .route-head h2{ font-size: clamp(26px,4.6vw,42px); margin:0 0 6px; }
.route .route-head .lead{ opacity:.92; margin:0 auto 8px; max-width:860px; }

.route .route-stage{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(14px, 3vw, 24px);
  align-items:start;
}

/* Mapa sticky */
.route .map-wrap{
  position: sticky;
  top: calc(var(--header-h, 72px) + 12px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background: radial-gradient(800px 360px at 60% -10%, rgba(124,58,237,.12), transparent 60%),
              radial-gradient(600px 300px at 20% 110%, rgba(34,211,238,.12), transparent 60%),
              rgba(255,255,255,.04);
  box-shadow:0 18px 40px rgba(0,0,0,.28);
  overflow:hidden;
}
.route #routeMap{ display:block; width:100%; height:auto; }

/* Passos */
.route .route-steps{
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;
}
.route .route-steps .step{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
  opacity:.65; transform: translateY(4px); transition: opacity .25s, transform .25s, border-color .25s;
}
.route .route-steps .step h3{ margin:0 0 6px; font-weight:800; }
.route .route-steps .step small{ display:block; opacity:.9; margin-top:4px; }

.route .route-steps .step.active{
  opacity:1; transform:none; border-color: rgba(102,224,194,.55);
  box-shadow: 0 12px 30px rgba(0,0,0,.32), 0 0 0 2px rgba(102,224,194,.20) inset;
}

/* CTA */
.route .route-cta{ display:flex; gap:10px; justify-content:center; margin-top: 12px; }

/* Acessibilidade */
.route .sr-only{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); }

/* Reduced motion: sem animação, progresso completo */
@media (prefers-reduced-motion: reduce){
  .route .map-wrap{ position:static; }
}

/* Responsivo: coluna única no mobile */
@media (max-width: 920px){
  .route .route-stage{ grid-template-columns: 1fr; }
  .route .map-wrap{ order:2; }
  .route .route-steps{ order:1; }
}
/* === FIX: Galeria "who-gallery" (qs1..qs6) === */

/* A máscara (fade nas bordas) deve estar no CONTÊINER, e não na faixa */
.who-gallery{
  padding:16px 0 6px;
  overflow:hidden; /* importante p/ esconder o que passa do contêiner */
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

/* A faixa deve ter largura = soma dos itens e não pode “apertar” as imagens */
.who-gallery .strip{
  display:inline-flex;          /* largura se ajusta ao conteúdo */
  width:max-content;            /* impede encolhimento da faixa */
  gap:12px;
  will-change: transform;
  animation: stripMove 25s linear infinite;
  /* Remova QUALQUER mask-image daqui, ela fica no contêiner */
}

/* Cada imagem NÃO pode encolher no flex */
.who-gallery .strip > img{
  flex:0 0 auto;                /* trava a largura do item */
  width:clamp(220px, 30vw, 420px);
  aspect-ratio:4 / 3;
  object-fit:cover;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 26px rgba(0,0,0,.3);
}

/* Mantém o loop perfeito (metade = sequência original, metade = duplicada) */
@keyframes stripMove{
  to{ transform: translateX(-50%); }
}
/* ===== PAGE ABOUT (escopado) ===== */
.page-about .about-hero .hero-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(18px,3vw,28px); align-items:center;
}
@media (max-width: 980px){ .page-about .about-hero .hero-grid{ grid-template-columns: 1fr; } }
.page-about .reveal{ opacity:0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease }
.page-about .reveal.in{ opacity:1; transform:none }

/* Orb do logo (feixes) */
.logo-orb{ --size: clamp(240px, 38vw, 520px); position:relative; width:var(--size); aspect-ratio:1/1; margin-inline:auto; border-radius:50%; display:grid; place-items:center; filter:drop-shadow(0 18px 44px rgba(0,0,0,.35)); }
.logo-orb img{ width:74%; height:74%; object-fit:contain; border-radius:50%; background:#fff; z-index:3; }
.logo-orb::before{ content:""; position:absolute; inset:-10%; border-radius:50%; background:radial-gradient(closest-side, rgba(255,255,255,.22), transparent 60%); z-index:1; filter:blur(2px); }
.logo-orb::after{ content:""; position:absolute; inset:-4%; border-radius:50%; background:conic-gradient(from var(--angle,0deg), #66e0c2,#22b3e5,#7c3aed,#22b3e5,#66e0c2); -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 18px), #000 calc(100% - 17px)); mask:radial-gradient(farthest-side, transparent calc(100% - 18px), #000 calc(100% - 17px)); filter:blur(4px) saturate(1.06); z-index:2; animation:orbSpin 6.8s linear infinite; }
.logo-orb .beams{ position:absolute; inset:-10%; border-radius:50%; background:repeating-conic-gradient(from var(--ang2,0deg), rgba(102,224,194,.22) 0 6deg, transparent 6deg 20deg); -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 28px), #000 calc(100% - 2px)); mask:radial-gradient(farthest-side, transparent calc(100% - 28px), #000 calc(100% - 2px)); filter:blur(8px); z-index:1; animation:beamsSpin 16s linear infinite; }
@keyframes orbSpin{ to{ --angle:360deg } }
@keyframes beamsSpin{ to{ --ang2:360deg } }

/* Princípios: burst-from-center */
.about-values .values-stage{ position:relative; margin-top:6px; }
.about-values .hub{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:14px; height:14px; border-radius:50%; background:linear-gradient(180deg,#66e0c2,#22b3e5); box-shadow:0 0 0 8px rgba(34,179,229,.18), 0 10px 24px rgba(0,0,0,.35); opacity:.9; }
.about-values .ripple{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.6); width:380px; aspect-ratio:1/1; border-radius:50%; border:1px dashed rgba(255,255,255,.22); opacity:0; }
.about-values.play .ripple.r1{ animation:ripple 3s ease-out infinite }
.about-values.play .ripple.r2{ animation:ripple 3s ease-out 1.2s infinite }
@keyframes ripple{ 0%{ transform:translate(-50%,-50%) scale(.45); opacity:0 } 20%{ opacity:.9 } 100%{ transform:translate(-50%,-50%) scale(1); opacity:0 } }
.about-values .values-grid{ display:grid; gap:12px; grid-template-columns: repeat(3,1fr); position:relative; }
@media (max-width: 980px){ .about-values .values-grid{ grid-template-columns: 1fr 1fr } }
@media (max-width: 680px){ .about-values .values-grid{ grid-template-columns: 1fr } }
.about-values .values-grid .card{ background:var(--card); border:1px solid var(--stroke); border-radius:14px; padding:14px; box-shadow:0 10px 26px rgba(0,0,0,.28); clip-path:circle(0% at 50% 50%); transform:scale(.96); opacity:0; }
.about-values.play .values-grid .card{ animation:burstIn .55s ease-out both; animation-delay: calc(var(--i) * 120ms); }
@keyframes burstIn{ to{ clip-path:circle(140% at 50% 50%); transform:none; opacity:1 } }

/* Pilares + Cultura + CTA central */
.pillars-grid{ display:grid; gap:12px; grid-template-columns: repeat(5,1fr); margin-bottom:12px }
@media (max-width:1100px){ .pillars-grid{ grid-template-columns: repeat(3,1fr) } }
@media (max-width:720px){ .pillars-grid{ grid-template-columns: 1fr } }
.pillar{ background:var(--card); border:1px solid var(--stroke); border-radius:12px; padding:12px; box-shadow:0 10px 26px rgba(0,0,0,.28); }
.culture-grid{ display:grid; gap:12px; grid-template-columns: repeat(5,1fr) }
@media (max-width:1100px){ .culture-grid{ grid-template-columns: repeat(3,1fr) } }
@media (max-width:720px){ .culture-grid{ grid-template-columns: 1fr } }
.culture-photo{ display:block; border-radius:12px; overflow:hidden; border:1px solid var(--stroke); box-shadow:0 12px 30px rgba(0,0,0,.3); cursor:zoom-in; min-height:160px }
.culture-photo img{ width:100%; height:100%; object-fit:cover; display:block }
.culture-photo.placeholder{ display:grid; place-items:center; color:#cfe4ff; opacity:.8; border-style:dashed; cursor:default }
.culture-photo.placeholder span{ font-weight:800; letter-spacing:.02em }
.about-cta .contact-row.center{ justify-content:center; gap:10px }
/* ===== HEADER — marca e menu lado a lado ===== */
.site-header .nav-wrap{
  display:flex;                 /* coloca os itens na mesma linha */
  align-items:center;
  gap: clamp(12px, 2vw, 24px);
  padding-block: 10px;
}

/* o <nav> vira o item da direita */
.site-header nav{
  margin-left:auto;             /* empurra o menu para a direita */
  display:flex;
  align-items:center;
  justify-content:flex-start !important; /* evita "space-between" espalhando tudo */
  gap: clamp(14px, 2vw, 28px);
  flex-wrap: nowrap;
}

/* funciona nos dois formatos que você usa:
   - <nav class="menu"> (quem-somos)
   - <nav><div class="menu">…</div></nav> (index) */
.site-header nav.menu,
.site-header nav .menu{
  display:flex;
  align-items:center;
  gap: clamp(14px, 2vw, 28px);
}

.site-header nav a{ white-space: nowrap; } /* evita quebra de itens */
/* Aproximar o menu do logo e manter o globo à direita */
.site-header nav{
  margin-left: 12px !important;   /* antes estava auto; cola o menu no logo */
}

.site-header .lang{
  margin-left: auto;              /* empurra só o globo para a direita */
}

/* (opcional) encurtar um pouco o espaçamento entre itens do menu */
.site-header nav .menu{
  gap: 14px;                      /* ajuste fino; aumente/diminua se quiser */
}
/********* TAMANHO MÉDIO — SÓCIOS + BASTIDORES *********/

/* ——— SÓCIOS: imagem levemente maior, sem exagero ——— */
#socios .partner-card{
  grid-template-columns: 1.2fr 1fr;   /* imagem ~20% maior que o texto */
  align-items: stretch;
  gap: 14px;
}
#socios .partner-card figure{
  aspect-ratio: 4 / 5;                /* altura confortável */
}
#socios .partner-card img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

/* Empilhado no responsivo: mantém a foto alta mas equilibrada */
@media (max-width: 1100px){
  #socios .partner-card{ grid-template-columns: 1fr; }
  #socios .partner-card figure{ aspect-ratio: 16 / 10; }
}

/* ——— BASTIDORES: thumbs um pouco maiores (meio-termo) ——— */
#bastidores .culture-grid{
  grid-template-columns: repeat(4, 1fr) !important;  /* 4 colunas no desktop */
  gap: 12px;
}
#bastidores .culture-photo{
  aspect-ratio: 4 / 3;
  min-height: 200px;                                  /* sem “engolir” o texto */
}
#bastidores .culture-photo img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

/* Quebras responsivas */
@media (max-width: 1100px){
  #bastidores .culture-grid{ grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 720px){
  #bastidores .culture-grid{ grid-template-columns: 1fr !important; }
  #bastidores .culture-photo{ min-height: 190px; }
}
/* === HEADER: centralizar menu (logo à esquerda, globo à direita) === */
.site-header .nav-wrap{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

/* Garante posição dos 3 blocos, cobrindo Home e páginas internas */
.site-header .nav-wrap > .brand,
.site-header .nav-wrap > .brand-logo { justify-self: start; }

.site-header .nav-wrap > nav,
.site-header .nav-wrap > .menu { justify-self: center; }

.site-header .nav-wrap > .lang { justify-self: end; }

/* (opcional) estabilidade visual do miolo */
.site-header nav .menu { display: flex; gap: 16px; align-items: center; }
<!-- AJUSTE MENU: chips com linha branca (Home) -->
<style id="ajuste-menu-chips-home">
  /* Aplica nos links do menu do header (funciona com <nav><div class="menu"> e <nav class="menu">) */
  .site-header .menu a{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,.9); /* linha branca */
    border-radius: 999px;                    /* formato pill */
    line-height: 1.15;
    text-decoration: none;
    background: rgba(255,255,255,.04);       /* só pra dar leve contraste no vídeo */
    backdrop-filter: blur(2px);              /* sutil, opcional */
    transition: background .2s ease, box-shadow .2s ease, border-color .2s ease;
  }

  .site-header .menu a:hover,
  .site-header .menu a:focus-visible{
    background: rgba(255,255,255,.14);
    box-shadow: 0 0 0 3px rgba(255,255,255,.18) inset;
    outline: none;
  }

  /* Página ativa (se usar aria-current="page") */
  .site-header .menu a[aria-current="page"]{
    background: rgba(255,255,255,.2);
    border-color: #fff;
  }

  @media (max-width: 760px){
    .site-header .menu a{ padding: 8px 10px; } /* dá uma folguinha no mobile */
  }
/* Layout básico da seção de contato */
.contato.wrap { max-width: 1080px; margin: 0 auto; padding: 64px 20px; }
.contato .lead { margin-top: 6px; color: #6b7280; }

.grid-contact {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 28px;
}
@media (max-width: 900px){
  .grid-contact { grid-template-columns: 1fr; }
}

.card { background: #fff; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,.06); padding: 20px; }

.contact-form label { display: block; font-weight: 600; margin: 12px 0 6px; }
.contact-form input, .contact-form textarea {
  width: 100%; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 14px; font: inherit;
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(96,165,250,.25); }

.btn-primary {
  margin-top: 14px; display: inline-block; border: 0; cursor: pointer;
  background: linear-gradient(90deg,#0ea5e9,#3b82f6);
  color: #fff; font-weight: 700; padding: 12px 18px; border-radius: 12px;
}
.form-msg { margin-top: 10px; font-size: 0.95rem; }

/* Redes sociais (empilhadas, ícones coloridos + @) */
.social-stack h2 { margin-bottom: 10px; }
.social-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 12px; transition: transform .15s ease, background .15s ease;
}
.social-item + .social-item { margin-top: 8px; }
.social-item:hover { background: #f3f4f6; transform: translateY(-1px); }
.social-item svg { flex: 0 0 28px; }
.social-item .handle { font-weight: 700; color: #111827; }

/* Cores de foco por rede (borda brilhinho ao focar com teclado) */
.social-item:focus { outline: none; box-shadow: 0 0 0 4px rgba(99,102,241,.25); }

/* GRID: formulário à esquerda, redes à direita */
.contact-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr; /* força o form a ocupar mais espaço à esquerda */
  gap:28px;
  align-items:start;
  /* Truque pra "puxar" o conjunto visualmente à esquerda no container central */
  max-width: 1080px;
  margin: 0;              /* tira centralização automática */
}

/* Se sua seção .wrap centraliza, sobreponha só aqui: */
.contato.wrap { max-width: 1200px; margin: 0 auto; padding: 48px 20px; }
@media (min-width: 1100px){
  /* desloca o grid um pouco à esquerda dentro do wrap */
  .contact-grid { margin-left: -60px; }
}
@media (max-width: 900px){
  .contact-grid { grid-template-columns: 1fr; margin-left: 0; }
}

/* Cartões base */
.card { background:#fff; border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.06); padding:20px; }

/* CONTRASTE: labels e textos do form em preto */
.contact-form label { display:block; font-weight:700; color:#0f172a; margin:12px 0 6px; }
.contact-form input,
.contact-form textarea {
  width:100%; border:1px solid #e5e7eb; border-radius:12px; padding:12px 14px; font:inherit;
  color:#0f172a; background:#fff;            /* texto preto */
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color:#6b7280; opacity:1;                  /* placeholder mais legível */
}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none; border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.25);
}

.btn-primary{
  margin-top:14px; display:inline-block; border:0; cursor:pointer;
  background:linear-gradient(90deg,#7C3AED,#3B82F6,#06B6D4);
  color:#fff; font-weight:800; padding:12px 18px; border-radius:12px;
}
.form-msg{ margin-top:10px; font-size:.95rem; color:#0f172a; }

/* REDES (empilhadas) */
.social-stack h2{ margin-bottom:10px; color:#0f172a; }
.social-item{
  display:flex; align-items:center; gap:12px;
  padding:12px; border-radius:12px; transition:transform .15s ease, background .15s ease;
  text-decoration:none;
}
.social-item + .social-item{ margin-top:8px; }
.social-item:hover{ background:#f3f4f6; transform: translateY(-1px); }
.social-item svg{ flex:0 0 28px; }
.social-item .handle{ font-weight:800; color:#0f172a; }
/* === IA Chat (escopo local) === */
#ia.ai-chat { padding: clamp(22px, 5vh, 28px) 0; }
#ia .ai-title{
  text-align:center; margin:0 0 12px;
  font-size: clamp(22px, 3.2vw, 28px); font-weight: 800; letter-spacing:.2px;
}

#ia .chat-card{
  background: var(--card, rgba(255,255,255,.06));
  border: 1px solid var(--stroke, rgba(255,255,255,.14));
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
  max-width: 980px; margin: 0 auto;
}

#ia .chat-head{
  display:flex; align-items:center; gap:8px;
  padding: 6px 8px 10px; border-bottom:1px solid var(--stroke, rgba(255,255,255,.12));
  margin-bottom: 8px;
}
#ia .chat-brand{ font-weight: 900; letter-spacing:.02em }
#ia .chat-head .dot{
  width:8px; height:8px; border-radius:50%; display:inline-block;
  background: linear-gradient(180deg, #66e0c2, #22b3e5);
  box-shadow: 0 0 0 3px rgba(34,179,229,.18);
}
#ia .status{ opacity:.9; font-size: 13px; }

#ia .chat-messages{
  max-height: clamp(260px, 46vh, 480px);
  overflow:auto;
  padding: 8px 4px;
  scroll-behavior: smooth;
}

#ia .msg{ display:flex; gap:10px; margin:10px 0; align-items:flex-start; }
#ia .msg .bubble{
  max-width: 78%;
  padding: 10px 12px; border-radius: 12px;
  line-height: 1.55;
  box-shadow: 0 8px 20px rgba(0,0,0,.22);
  word-wrap: break-word;
  white-space: pre-wrap;
}
#ia .msg.user{ justify-content:flex-end; }
#ia .msg.user .bubble{
  background: linear-gradient(90deg, var(--accent, #66e0c2), var(--accent2, #22b3e5));
  color: #051018; font-weight: 700;
  border: 0;
  border-end-start-radius: 4px;
}
#ia .msg.bot .bubble{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-end-end-radius: 4px;
}

#ia .typing .bubble{
  display:inline-flex; gap:6px; align-items:center;
}
#ia .typing .dot-anim{
  width:6px; height:6px; border-radius:50%; background:#cfe9ff; opacity:.85;
  animation: blink 1s infinite;
}
#ia .typing .dot-anim:nth-child(2){ animation-delay:.2s }
#ia .typing .dot-anim:nth-child(3){ animation-delay:.4s }
@keyframes blink{ 0%,80%{ opacity:.4 } 40%{ opacity:1 } }

#ia .chat-input{
  display:flex; gap:10px; align-items:flex-end; margin-top: 8px;
  border-top:1px solid var(--stroke, rgba(255,255,255,.14));
  padding-top:8px;
}
#ia #aiPrompt{
  flex:1;
  min-height: 42px; max-height: 160px;
  padding: 10px 12px; border-radius: 12px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color:#fff; resize: none; line-height:1.45; outline:none;
}
#ia #aiPrompt::placeholder{ color: rgba(255,255,255,.36); } /* quase transparente */
#ia .send{
  flex:0 0 auto; height:42px; padding: 0 14px; border-radius: 10px;
  border:1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  color:#fff; font-weight: 900; cursor:pointer;
}
#ia .send:hover{ box-shadow:0 10px 20px rgba(0,0,0,.25) }

#ia .disclaimer{
  margin: 8px 2px 2px; opacity:.85; font-size: 12px; text-align:center;
}

/* Mobile: conforto de toque */
@media (max-width: 720px){
  #ia .chat-card{ padding: 12px }
  #ia .msg .bubble{ max-width: 86% }
}
/* ===== HOTFIX MOBILE/TABLET — evita cortes/overflow ===== */
html, body{ max-width:100%; overflow-x:hidden; }

/* iOS/Android: evita bug de background-attachment: fixed cortando o fundo */
@media (max-width: 1024px){
  .bg-cover{ background-attachment: scroll; }
}

/* Diferenciais/radial e seções altas: liberam altura no mobile */
@media (max-width: 880px){
  .radial-stage,
  #diferenciais .radial-stage{
    min-height:auto; padding: 10px 0 6px;
  }
}

/* Respeita “notch”/borda segura do iPhone */
.site-header{ padding-top:max(10px, env(safe-area-inset-top)); }
.wp-float   { right:max(22px, env(safe-area-inset-right));
              bottom:max(22px, env(safe-area-inset-bottom)); }

/* Qualquer seção com animações/translates não “empurra” a tela para os lados */
.section{ overflow-x:hidden; }
/* ===== Plataforma: cards diagonais ===== */
.plat-diag{
  display:grid;
  gap:14px;
  margin-top:18px;
}
.diag-item{
  display:grid;
  grid-template-columns: 1.1fr .9fr; /* foto maior à esquerda */
  gap:16px; align-items:center;
}

/* Foto */
.diag-photo{
  aspect-ratio: 16/10;
  border-radius: 14px;
  background: var(--img) center / cover no-repeat, #0b0e10;
  box-shadow: 0 18px 44px rgba(0,0,0,.30);
  opacity:.001; transform: translate(var(--dx,0), var(--dy,0));
  transition: transform .7s cubic-bezier(.2,.6,.2,1), opacity .7s;
}

/* Texto */
.diag-text{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
  opacity:.001; transform: translate(var(--tx,0), 0);
  transition: transform .6s cubic-bezier(.2,.6,.2,1), opacity .6s;
}
.diag-text h3{ margin:0 0 6px; font-size: clamp(18px, 2.2vw, 22px); }
.diag-text p { margin:0; font-size: clamp(14px, 1.25vw, 17px); line-height:1.55 }

/* Direções (estado INICIAL) */
.diag-item.up-left    { --dx:-64px; --dy:-64px; --tx:  60px; }
.diag-item.down-right { --dx: 64px; --dy: 64px; --tx: -60px; }

/* Quando entra na tela (classe .in via JS) */
.diag-item.in .diag-photo,
.diag-item.in .diag-text{
  opacity:1; transform: translate(0,0);
}

/* Responsivo: empilha, foto acima do texto */
@media (max-width: 880px){
  .diag-item{ grid-template-columns: 1fr; }
  .diag-text{ order:2 }
  .diag-photo{ order:1 }
}
/* Hide mobile menu icon on desktop */
@media (min-width: 980px){
  /* seletores abrangentes para qualquer variação do botão */
  #menuFab,
  .menu-fab,
  .menu-fab-wrap,
  .floating-menu,
  .mobile-menu-button,
  .nav-toggle,
  .menu-toggle,
  .hamburger,
  .hamb,
  [data-role="mobile-menu"]{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}
/* ===== PLATAFORMA (layout simples) ===== */
.platform-simple .ps-grid{
  display:grid; gap:14px;
  grid-template-columns: 1.6fr .9fr;    /* texto maior, foto menor */
  align-items: start;
}
.platform-simple .ps-copy h2{ text-align:left; margin:0 0 6px; letter-spacing:.2px }
.platform-simple .ps-copy .lead{ margin:0 0 12px; max-width:60ch; opacity:.95 }
.platform-simple .ps-points{ display:grid; gap:10px; margin:8px 0 12px }
.platform-simple .ps-item{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px; padding:12px 14px;
  box-shadow:0 10px 26px rgba(0,0,0,.25);
}
.platform-simple .ps-item h3{ margin:0 0 6px; font-size:clamp(18px,2vw,20px) }
.platform-simple .ps-item p{ margin:0; font-size:clamp(14px,1.8vw,16px); line-height:1.6 }
.platform-simple .ps-cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px }

.platform-simple .ps-photo{
  justify-self:end;
  width: clamp(240px, 32vw, 360px);      /* <<< foto menor */
  border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 14px 38px rgba(0,0,0,.32);
  background:#0b0e10;
}
.platform-simple .ps-photo img{ display:block; width:100%; height:auto; object-fit:cover }
.platform-simple .ps-photo figcaption{
  font-size:12px; opacity:.85; padding:6px 8px; background:rgba(255,255,255,.06); border-top:1px solid rgba(255,255,255,.12)
}

/* Mobile: empilha e foto abaixo do texto */
@media (max-width: 980px){
  .platform-simple .ps-grid{ grid-template-columns: 1fr; }
  .platform-simple .ps-photo{ justify-self:stretch; width:100% }
}
<style id="platform-side-by-side">
  /* Plataforma do Cliente: texto + foto lado a lado (desktop) */
  #plataforma.section.platform-simple .ps-grid{
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, .9fr); /* texto | foto */
    gap: clamp(14px, 2.8vw, 28px);
    align-items: start;
  }
  #plataforma .ps-copy{ max-width: 70ch; }
  #plataforma .ps-photo{
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
  #plataforma .ps-photo img{
    width: 100%;
    max-width: 420px;     /* << tamanho da foto (menor que antes) */
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(0,0,0,.28);
  }
  /* Mobile: empilha (foto abaixo do texto) */
  @media (max-width: 980px){
    #plataforma.section.platform-simple .ps-grid{ grid-template-columns: 1fr; }
    #plataforma .ps-photo{ margin-top: 10px; }
  }
</style>
/* ===== Plataforma simples: texto + foto lado a lado ===== */
#plataforma.platform-simple .ps-grid{
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr);
  gap: clamp(16px, 3vw, 28px);
  align-items: start;                /* topo com topo */
}

#plataforma .ps-copy{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#plataforma .ps-photo{
  margin: 0;
  align-self: start;                 /* garante topo */
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}

#plataforma .ps-photo img{
  display: block;
  width: 100%;
  height: auto;
}

/* Mobile: empilha */
@media (max-width: 980px){
  #plataforma.platform-simple .ps-grid{ grid-template-columns: 1fr; }
  #plataforma .ps-photo{ order: 2; margin-top: 8px; }
}