/* Intuitu Labs · estilos só da página Sobre (sobre.html). Base em intuitu.css. */

/* ---------- 1. Topo ---------- */
.sb-hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;padding:150px 0 0}
.sb-hero-in{position:relative;z-index:2}
.sb-ht{font-size:clamp(50px,7.4vw,118px);line-height:.95;max-width:11ch}
.sb-lede{margin-top:34px;max-width:33em}
/* faixa do KV: sangra nas duas bordas, com o ponto laranja acima do pico */
.sb-rib{position:relative;flex:1 0 300px;min-height:300px;margin-top:-40px;pointer-events:none;z-index:1}
.sb-rib .ribbon{left:0;top:0;width:100%;height:100%;filter:drop-shadow(0 30px 40px rgba(163,159,252,.25))}
.sb-dot{position:absolute;left:73%;top:24%;width:clamp(44px,5vw,72px);aspect-ratio:1;margin:-120px 0 0 calc(clamp(44px,5vw,72px) / -2);border-radius:50%;background:var(--dot);
  box-shadow:0 0 0 10px rgba(252,157,103,.12),0 20px 40px -14px rgba(252,157,103,.7)}
@keyframes sbPop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes sbDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
html.motion:not(.settled) .sb-dot{animation:sbPop .9s var(--spring) both 1.5s}
html.motion:not(.settled) .sb-rib path{stroke-dasharray:1;animation:sbDraw 1.8s cubic-bezier(.65,0,.25,1) both .3s}

/* ---------- 2. Os quatro pilares ----------
   Sem JS (ou com animação reduzida): símbolo inteiro à esquerda, os quatro pilares em lista.
   Com sobre.js e movimento: .pin fixa o palco e a rolagem desenha o símbolo e acende uma cor por pilar. */
.pl-sec{position:relative;padding:clamp(80px,10vw,140px) 0}
.pl-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,120px);align-items:start}
.pl-vis{position:sticky;top:calc(50vh - min(21vw,260px));display:grid;place-items:center;aspect-ratio:1;max-width:560px;width:100%;justify-self:center}
.pl-glow{position:absolute;inset:16%;border-radius:50%;background-color:var(--gc,#FDD4B1);filter:blur(64px);opacity:.5;
  transition:background-color 1.2s var(--ease)}
.sym{position:relative;width:86%;height:auto;overflow:visible}
.sym-base{fill:rgba(31,58,46,.045)}
.sym-c use{fill:url(#lg-pl)}
.sym-line{fill:none;stroke:rgba(31,58,46,.32);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:0;vector-effect:non-scaling-stroke}
.sym-dot{fill:var(--dot);transform-box:fill-box;transform-origin:center}
.pl-list{display:grid;gap:clamp(72px,12vh,140px);padding:6vh 0}
.pl{position:relative;max-width:30em}
.pl-sw{display:block;width:46px;height:46px;border-radius:50%;margin-bottom:28px;background:var(--pc);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 0 8px color-mix(in srgb,var(--pc) 18%,transparent),0 16px 30px -12px var(--pc)}
.pl h3{font:600 clamp(34px,3.7vw,58px)/1.02 var(--display);letter-spacing:-.045em;text-wrap:balance}
.pl p{margin-top:22px;font-size:19px;line-height:1.55;color:var(--ink-2);max-width:28em;text-wrap:pretty}
.pl p b{font-weight:600;color:var(--ink)}
.pl-steps{display:none}

/* modo palco fixo */
.pl-sec.pin{height:430vh;padding:0}
.pl-sec.pin .pl-stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:clip}
.pl-sec.pin .pl-grid{align-items:center;width:min(1320px,100% - var(--gut)*2)}
.pl-sec.pin .pl-vis{position:relative;top:auto;max-width:min(560px,64svh)}
.pl-sec.pin .pl-list{display:grid;padding:0;gap:0}
.pl-sec.pin .pl{grid-area:1/1;opacity:0;transform:translateY(26px);visibility:hidden;
  transition:opacity .7s var(--ease),transform 1s var(--ease),visibility 0s linear .7s}
.pl-sec.pin .pl.on{opacity:1;transform:none;visibility:visible;transition:opacity .9s var(--ease) .12s,transform 1.1s var(--ease) .12s,visibility 0s}
.pl-sec.pin .pl-sw{transform:scale(.4);transition:transform .9s var(--spring)}
.pl-sec.pin .pl.on .pl-sw{transform:none;transition-delay:.15s}
.pl-sec.pin .sym-c use{opacity:0}
.pl-sec.pin .sym-dot{transform:scale(0);transition:transform .9s var(--spring)}
.pl-sec.pin .sym-dot.on{transform:none}
.pl-sec.pin .pl-steps{display:flex;gap:6px;margin-top:48px;margin-left:-10px}
.pl-steps button{position:relative;width:56px;height:44px;border:0;padding:0;background:none;cursor:pointer;border-radius:12px}
.pl-steps button i{position:absolute;left:10px;right:10px;top:50%;height:4px;margin-top:-2px;border-radius:4px;background:rgba(31,58,46,.14);overflow:hidden}
.pl-steps button i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--pc);transform:scaleX(var(--f,0));transform-origin:left}
.pl-steps button:hover i{background:rgba(31,58,46,.24)}

/* ---------- 4. Brasil e exterior ---------- */
.sb-pj{padding:0 0 clamp(96px,11vw,150px)}
.sb-pj-h{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,64px)}
.sb-pj-h .h2{max-width:15ch}
.sb-pj-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.sb-pj-it a{display:block;text-decoration:none;color:var(--ink);border-radius:18px}
.sb-pj-it .brw{display:block;transition:transform .8s var(--ease),box-shadow .8s var(--ease)}
.sb-pj-it .brw .scr{display:block}
.sb-pj-it a:hover .brw{transform:translateY(-6px)}
.sb-pj-t{display:block;margin-top:20px}
.sb-pj-t b{display:block;font:600 22px/1.2 var(--display);letter-spacing:-.03em}
.sb-pj-t span{display:block;margin-top:6px;font-size:15.5px;color:var(--ink-3)}

/* ---------- Chamado final ---------- */
.mail{display:block;width:max-content;margin:22px auto 0;min-height:44px;line-height:44px;font-size:16px;color:var(--ink);text-underline-offset:4px}

/* ---------- Responsivo ---------- */
@media (max-width:899px){
  .sb-pj-list{grid-template-columns:1fr;max-width:560px}
  /* pilares: símbolo em cima, texto embaixo */
  .pl-grid{grid-template-columns:1fr;gap:20px}
  .pl-vis{position:relative;top:auto;max-width:340px}
  .pl-sec.pin .pl-grid{align-content:center;padding-top:64px}
  .pl-sec.pin .pl-vis{max-width:min(300px,34svh,70vw)}
  .pl-sec.pin .pl-steps{margin-top:26px}
}
@media (max-width:679px){
  .sb-hero{padding:118px 0 0}
  .sb-ht{font-size:clamp(36px,10.4vw,64px)}
  .sb-lede{margin-top:24px}
  .sb-rib{flex-basis:220px;min-height:220px;margin-top:0}
  .sb-dot{margin-top:-80px}
  .pl-sec{padding:72px 0}
  .pl-sw{width:38px;height:38px;margin-bottom:20px}
  .pl h3{font-size:clamp(28px,8.4vw,36px)}
  .pl p{font-size:17.5px;margin-top:16px}
  .pl-sec.pin .pl-sw{display:none}
}