/* Kwaba v2026 — revisão soft UI (neoskeumorfismo) da index.html
   Mesma linguagem da seção "O que você ganha":
   a superfície tem a cor do fundo da seção; o volume vem só da luz
   (realce claro em cima/esquerda, sombra embaixo/direita); estados = saliente → levantado → afundado;
   cor de destaque só em anéis, traços e ícones.
   Carregado na index.html e nas subpáginas (empresas, times de produto, educação), depois do estilo.css. */

/* ============ FUNDOS (off-white, para o realce branco aparecer) ============ */
:root {
    --bg: #f4f1f8;
    --bg-light: #f4f1f8;
    --bg-lilac: #ebe6f1;
    --bg-peach: #f6eee7;
    --bg-dark: #25103c;
}

/* ============ TOKENS POR FUNDO ============
   cada seção (e o body) ganha a superfície e as sombras do seu fundo */
[data-bg], .nav, footer {
    --nm: var(--bg-light);
    --nm-hi: rgba(255, 255, 255, .95);
    --nm-lo: rgba(112, 88, 142, .26);
    --nm-lo-2: rgba(112, 88, 142, .14);
}
[data-bg="lilac"], [data-bg="soft"] { --nm: var(--bg-lilac); --nm-lo: rgba(112, 88, 142, .30); --nm-lo-2: rgba(112, 88, 142, .16); }
[data-bg="peach"] { --nm: var(--bg-peach); --nm-hi: rgba(255, 255, 255, .9); --nm-lo: rgba(150, 100, 70, .24); --nm-lo-2: rgba(150, 100, 70, .13); }
[data-bg], .nav, footer {
    --raise: -9px -9px 20px var(--nm-hi), 11px 11px 26px var(--nm-lo);
    --raise-up: -14px -14px 30px var(--nm-hi), 18px 18px 40px var(--nm-lo);
    --raise-sm: -4px -4px 10px var(--nm-hi), 5px 5px 12px var(--nm-lo);
    --dip: inset 6px 6px 12px var(--nm-lo), inset -6px -6px 12px var(--nm-hi);
    --dip-sm: inset 2px 2px 5px var(--nm-lo), inset -2px -2px 5px var(--nm-hi);
    --rim: inset 1px 1px 0 rgba(255, 255, 255, .7), inset -1px -1px 0 var(--nm-lo-2);
}

/* ============ BOTÕES ============ */
/* coloridos: pílula com volume (brilho em cima, sombra colorida embaixo/direita), afundam ao clicar */
.btn {
    box-shadow: -5px -5px 12px var(--nm-hi), 7px 9px 18px rgba(82, 43, 120, .32),
        inset 1px 1px 0 rgba(255, 255, 255, .3), inset -2px -3px 6px rgba(20, 0, 40, .22);
}
.btn:hover { box-shadow: -7px -7px 16px var(--nm-hi), 10px 13px 24px rgba(82, 43, 120, .34),
        inset 1px 1px 0 rgba(255, 255, 255, .3), inset -2px -3px 6px rgba(20, 0, 40, .22); }
.btn:active { transform: translateY(1px); box-shadow: -2px -2px 6px var(--nm-hi), 2px 3px 6px rgba(82, 43, 120, .25),
        inset 3px 4px 8px rgba(20, 0, 40, .35); }
.btn-orange { box-shadow: -5px -5px 12px var(--nm-hi), 7px 9px 18px rgba(217, 114, 42, .36),
        inset 1px 1px 0 rgba(255, 255, 255, .4), inset -2px -3px 6px rgba(120, 40, 0, .2); }
.btn-orange:hover { box-shadow: -7px -7px 16px var(--nm-hi), 10px 13px 24px rgba(217, 114, 42, .38),
        inset 1px 1px 0 rgba(255, 255, 255, .4), inset -2px -3px 6px rgba(120, 40, 0, .2); }
.btn-orange:active { box-shadow: -2px -2px 6px var(--nm-hi), 2px 3px 6px rgba(217, 114, 42, .3), inset 3px 4px 8px rgba(120, 40, 0, .3); }
/* fantasma: da cor da superfície, só volume */
.btn-ghost { background: var(--nm); box-shadow: var(--raise-sm), var(--rim); }
.btn-ghost:hover { box-shadow: var(--raise), var(--rim); }
.btn-ghost:active { box-shadow: var(--dip-sm); }

/* ============ NAV ============ */
.nav { background: rgba(244, 241, 248, .86); }
.nav.is-scrolled { border-color: transparent; box-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 10px 26px rgba(112, 88, 142, .12); }
body[data-bg="dark"] .nav { background: rgba(244, 241, 248, .92); }
.brand-sep { width: 2px; background: none; box-shadow: inset 1px 0 0 var(--nm-lo-2), 1px 0 0 #fff; }
.nav-links a:not(.btn) { transition: box-shadow .2s, color .2s; }
.nav-links a:not(.btn):hover { background: var(--nm); color: var(--purple); box-shadow: var(--raise-sm), var(--rim); }
.nav-links a:not(.btn):active { box-shadow: var(--dip-sm); }
.nav-toggle { background: var(--nm); box-shadow: var(--raise-sm), var(--rim); }

/* logo do Kwaba 50% maior no menu */
.nav .brand img { height: 45px; }

/* ============ HERO ============ */
.hero-avatar { background: var(--nm); box-shadow: var(--raise-sm), var(--rim); }
.hero-avatar img { box-shadow: 0 0 0 3px var(--nm), -2px -2px 5px var(--nm-hi), 3px 3px 7px var(--nm-lo); }
.tag { background: var(--nm); box-shadow: -3px -3px 7px var(--nm-hi), 4px 4px 9px var(--nm-lo), var(--rim); }
/* selo do hero: nome em cima, cargo embaixo (index-t1) */
.hero-avatar:has(.hero-id) { padding: 6px 20px 6px 6px; border-radius: 30px; }
.hero-avatar:has(.hero-id) img { width: 46px; height: 46px; }
.hero-id { display: flex; flex-direction: column; gap: 3px; line-height: 1.15; }
.hero-id b { font-size: 16px; color: var(--ink); }
.hero-id .eyebrow { font-size: 11.5px; letter-spacing: .08em; }
.hero-tags-label { flex-basis: 100%; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }

/* no celular o menu ainda não mostra seus limites no topo; o hero sobe 30px para o layout ficar contínuo */
@media (max-width: 860px) {
    .hero { padding-top: 58px; }
}

/* objetos da composição: tudo sai da mesma superfície */
.ui-card { background: var(--nm); box-shadow: var(--raise-up), var(--rim); }
.ui-card::before { background: var(--nm); box-shadow: var(--raise-sm); opacity: .85; }
.ui-card::after { background: none; box-shadow: inset 0 0 0 2px rgba(182, 166, 198, .55); opacity: 1; }
.ui-dots i { background: var(--nm); box-shadow: inset 1px 1px 2px var(--nm-lo), inset -1px -1px 2px var(--nm-hi); }
.ui-dots i:first-child { background: radial-gradient(circle at 35% 35%, #f8b07a, var(--orange-2)); box-shadow: none; }
.ui-row { background: var(--nm); box-shadow: var(--dip-sm); }
.ui-bars { background: var(--nm); box-shadow: var(--dip); }
.ui-bars span { box-shadow: -2px -2px 4px rgba(255, 255, 255, .5), 3px 3px 6px rgba(82, 43, 120, .25), inset 1px 1px 0 rgba(255, 255, 255, .3); }

.toggle-obj { background: var(--nm); box-shadow: var(--raise-up), var(--rim); }
.tg b { box-shadow: inset 2px 2px 5px rgba(20, 0, 40, .45), inset -1px -1px 2px rgba(255, 255, 255, .2); }
.tg b::after { background: var(--nm); box-shadow: -1px -1px 2px rgba(255, 255, 255, .8), 2px 2px 4px rgba(20, 0, 40, .35); }

.chip-obj { background: var(--nm); box-shadow: var(--raise-up), var(--rim); }
.chip-obj em {
    background: var(--nm); color: var(--orange-2); border-radius: 50%;
    box-shadow: -3px -3px 6px var(--nm-hi), 3px 3px 7px var(--nm-lo), inset 0 0 0 2px rgba(238, 139, 61, .45);
}
.hero .floor { background: radial-gradient(ellipse at center, rgba(112, 88, 142, .22), transparent 70%); }

/* estrela (no lugar da esfera) */
.estrela {
    width: 28%; right: 4%; top: 3%; overflow: visible;
    filter: drop-shadow(-6px -6px 10px rgba(255, 255, 255, .9)) drop-shadow(10px 16px 18px rgba(217, 114, 42, .38));
}

/* ============ NÚMEROS ============ */
.proof-grid { background: var(--nm); box-shadow: var(--dip); }
.stat { background: var(--nm); box-shadow: var(--raise), var(--rim); }
a.stat:hover { transform: translateY(-4px); box-shadow: var(--raise-up), var(--rim); }
a.stat:active { transform: none; box-shadow: var(--dip-sm); }

/* ============ PARA QUEM (os cards; as pessoas animadas não mudam) ============ */
.aud { background: var(--nm); box-shadow: var(--raise), var(--rim); }
.aud:hover, .aud.is-tocando { box-shadow: var(--raise-up), var(--rim); }
.aud:active { box-shadow: var(--dip-sm); }
/* o palco das pessoas é uma tela rebaixada no card */
.aud .pessoas { box-shadow: inset 5px 5px 10px var(--nm-lo), inset -5px -5px 10px var(--nm-hi); }
.aud .more {
    padding: 7px 13px; margin-left: -2px; border-radius: 99px; background: var(--nm);
    box-shadow: -3px -3px 7px var(--nm-hi), 4px 4px 9px var(--nm-lo), var(--rim); transition: box-shadow .2s;
}
.aud:hover .more { box-shadow: var(--dip-sm); color: var(--orange-2); }

/* cards de "Para quem eu trabalho" da index: todo o conteúdo centralizado */
#para-quem .aud { text-align: center; }
#para-quem .aud .more { margin-left: 0; }

/* ilustração de cada público, abaixo do título do card, com o volume da superfície */
.aud .shape-mini {
    display: block; height: 58px; width: auto; margin: 16px auto 4px;
    filter: drop-shadow(-3px -3px 5px var(--nm-hi)) drop-shadow(4px 5px 8px var(--nm-lo));
}
.aud .shape { filter: drop-shadow(-3px -3px 5px var(--nm-hi)) drop-shadow(4px 5px 8px var(--nm-lo)); }

/* ============ COMO TRABALHO ============ */
/* trilho rebaixado; teclas salientes da cor do fundo */
.steps::before { background: var(--nm); box-shadow: var(--dip-sm); }
.step-key {
    background: var(--nm); box-shadow: var(--raise), var(--rim);
    transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .7s, background-color .7s;
}
.step-key::before { transition: color .7s; }
.step.lit .step-key { box-shadow: var(--raise-up), var(--rim), inset 0 0 0 2px rgba(138, 98, 184, .5); }
.step:nth-child(4) .step-key {
    background: linear-gradient(145deg, #f8b07a, var(--orange-2));
    box-shadow: -9px -9px 20px var(--nm-hi), 11px 11px 26px rgba(217, 114, 42, .35), inset 1px 1px 0 rgba(255, 255, 255, .45), inset -3px -4px 8px rgba(120, 40, 0, .2);
}
/* fundo escuro: o mesmo soft UI, com luz mais fraca e sombra mais funda */
body[data-bg="dark"] [data-bg="dark"] {
    --nm: var(--bg-dark);
    --nm-hi: rgba(255, 255, 255, .07);
    --nm-lo: rgba(0, 0, 0, .55);
    --nm-lo-2: rgba(0, 0, 0, .3);
    --raise: -8px -8px 18px var(--nm-hi), 10px 10px 24px var(--nm-lo);
    --raise-up: -12px -12px 26px var(--nm-hi), 16px 16px 36px var(--nm-lo);
    --dip-sm: inset 2px 2px 5px var(--nm-lo), inset -2px -2px 5px var(--nm-hi);
    --rim: inset 1px 1px 0 rgba(255, 255, 255, .08), inset -1px -1px 0 rgba(0, 0, 0, .3);
}
body[data-bg="dark"] [data-bg="dark"] .steps::before { background: var(--nm); box-shadow: var(--dip-sm); }
body[data-bg="dark"] [data-bg="dark"] .step-key::before { color: #d9c8ee; }

/* ============ SOBRE ============ */
/* camadas da foto: uma placa saliente sobre um encaixe rebaixado */
.photo-stack::before { background: var(--nm); box-shadow: var(--dip); opacity: 1; }
.photo-stack::after { background: var(--nm); box-shadow: var(--raise), var(--rim); }
.photo-frame { box-shadow: 0 0 0 8px var(--nm), -12px -12px 26px var(--nm-hi), 16px 16px 36px var(--nm-lo); }
.photo-quote { background: var(--nm); box-shadow: var(--raise-up), var(--rim); }
.photo-estrela {
    position: absolute; z-index: 2; width: 104px; height: 104px; right: -14px; top: -34px; overflow: visible;
    filter: drop-shadow(-5px -5px 9px rgba(255, 255, 255, .9)) drop-shadow(9px 14px 16px rgba(217, 114, 42, .38));
}
.tl { background: var(--nm); box-shadow: var(--raise-sm), var(--rim); }
.tl time { justify-self: start; padding: 5px 11px; border-radius: 99px; box-shadow: var(--dip-sm); }

/* ============ DEPOIMENTOS ============ */
.quote { background: var(--nm); box-shadow: var(--raise), var(--rim); }
/* aspas num botão redondo saliente (estilo "intent"), com o traço em laranja */
.quote::before {
    border-radius: 50%; color: var(--orange-2); background: var(--nm);
    box-shadow: var(--raise-sm), var(--rim), inset 0 0 0 7px var(--nm), inset 2px 2px 6px var(--nm-lo), inset -2px -2px 6px var(--nm-hi);
}

/* ============ CTA FINAL ============ */
.cta-box { background: var(--nm); box-shadow: var(--raise-up), var(--rim); }
/* os objetos ficam sobre um poço rebaixado */
.cta-art::before {
    content: ""; position: absolute; width: 210px; height: 210px; right: 0; top: 50%; translate: 0 -50%;
    border-radius: 50%; background: var(--nm); box-shadow: var(--dip);
}
.cta-art .s3 { background: var(--nm); box-shadow: var(--raise-sm), var(--rim); }
.cta-art .s1 { box-shadow: -8px -8px 18px var(--nm-hi), 14px 22px 36px rgba(82, 43, 120, .32), inset -10px -14px 24px rgba(20, 0, 40, .3); }
.cta-art .s2 { box-shadow: -6px -6px 14px var(--nm-hi), 12px 18px 30px rgba(217, 114, 42, .36), inset -8px -10px 20px rgba(120, 40, 0, .25); }

/* ============ RODAPÉ ============ */
footer { background: var(--nm); }
.foot { border-bottom: 0; box-shadow: 0 1px 0 #fff, 0 2px 0 var(--nm-lo-2); }
.foot ul a { transition: color .2s, box-shadow .2s; border-radius: 99px; padding: 4px 10px; margin-left: -10px; }
.foot ul a:hover { box-shadow: var(--raise-sm), var(--rim); }

/* =====================================================================
   SUBPÁGINAS (empresas, times de produto, educação)
   ===================================================================== */

/* ---- topo: foto numa placa saliente, sinais e estrela ---- */
.crumbs a { padding: 3px 9px; border-radius: 99px; margin-left: -9px; transition: box-shadow .2s; }
.crumbs a:hover { text-decoration: none; box-shadow: var(--raise-sm), var(--rim); }
.hero-media::before { background: var(--nm); box-shadow: var(--dip); opacity: 1; }
.hero-media .signals { background: var(--nm); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--raise-up), var(--rim); }
.hero-media .photo-estrela {
    position: absolute; z-index: 2; width: 92px; height: 92px; right: -18px; top: -36px; overflow: visible;
    filter: drop-shadow(-5px -5px 9px rgba(255, 255, 255, .9)) drop-shadow(9px 14px 16px rgba(217, 114, 42, .38));
}
.signals { background: var(--nm); box-shadow: var(--dip); }
.signal { background: var(--nm); box-shadow: var(--raise-sm), var(--rim); }
/* interruptor: trilho rebaixado laranja, botão saliente da cor da superfície */
.signal b { box-shadow: inset 2px 2px 5px rgba(120, 40, 0, .45), inset -1px -1px 2px rgba(255, 255, 255, .25); }
.signal b::after { background: var(--nm); box-shadow: -1px -1px 2px rgba(255, 255, 255, .8), 2px 2px 4px rgba(120, 40, 0, .35); }

/* ---- fotos: moldura da cor da superfície, saliente ---- */
.ph { box-shadow: 0 0 0 7px var(--nm), -12px -12px 26px var(--nm-hi), 16px 16px 36px var(--nm-lo); background: var(--nm); }
.ph-caption { background: var(--nm); box-shadow: var(--raise-sm), var(--rim); }

/* ---- ganhos (grade): o mesmo card do palco da index ---- */
.gains .gain { --acc-a: var(--purple-3); --acc-b: var(--purple); }
.gains .gain.is-orange { --acc-a: #f8b07a; --acc-b: var(--orange-2); }
.gains .gain { border-radius: 26px; background: var(--nm); box-shadow: var(--raise), var(--rim); transition: transform .35s ease, box-shadow .35s ease; }
.gains .gain::after { display: none; }
/* anel em gradiente que aparece no hover (só a borda, pela técnica de máscara) */
.gains .gain::before {
    inset: 0; padding: 2px; z-index: 0; translate: none; pointer-events: none;
    background: linear-gradient(135deg, var(--acc-a), var(--acc-b));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: 0; transition: opacity .35s ease;
}
.gains .gain:hover { transform: translateY(-4px); box-shadow: var(--raise-up), var(--rim); }
.gains .gain:hover::before { translate: none; opacity: 1; }
/* ícone "intent": botão saliente com poço rebaixado e traço fino */
/* (inclui o card laranja, que no estilo.css tem um ícone sólido mais específico) */
.gains .gain-icon, .gains .gain.is-orange .gain-icon {
    position: relative; width: 66px; height: 66px; border-radius: 50%;
    background: var(--nm); box-shadow: var(--raise-sm), var(--rim); color: var(--acc-b);
}
.gains .gain-icon::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; box-shadow: var(--dip-sm); }
.gains .gain-icon svg { position: relative; width: 26px; height: 26px; stroke-width: 1.6; }
.gains .evidence-inner { background: var(--nm); box-shadow: var(--dip-sm); border-radius: 16px; }
.gains .evidence-inner .pin { background: var(--nm); box-shadow: -2px -2px 5px var(--nm-hi), 3px 3px 6px var(--nm-lo); color: var(--acc-b); }

/* ---- formatos: teclas salientes que afundam no clique ---- */
.format { background: var(--nm); box-shadow: var(--raise), var(--rim); transition: transform .25s ease, box-shadow .25s ease; }
.format:hover { transform: translateY(-3px); box-shadow: var(--raise-up), var(--rim); }

/* ---- caso em destaque: placa roxa com volume; os números saem de uma superfície clara ---- */
.case {
    box-shadow: -10px -10px 24px var(--nm-hi), 16px 18px 40px rgba(82, 43, 120, .38),
        inset 1px 1px 0 rgba(255, 255, 255, .18), inset -3px -4px 12px rgba(20, 0, 40, .3);
}
.case-stat {
    background: var(--bg-light);
    box-shadow: -3px -3px 8px rgba(255, 255, 255, .12), 8px 10px 20px rgba(20, 0, 40, .35), inset 1px 1px 0 #fff, inset -1px -1px 0 rgba(112, 88, 142, .2);
}

/* ---- abas (Educação): trilho rebaixado, aba ativa saliente ---- */
.seg { background: var(--nm); box-shadow: var(--dip-sm); }
.seg button[aria-selected="true"] { background: var(--nm); box-shadow: var(--raise-sm), var(--rim); }
.seg button:not([aria-selected="true"]):hover { color: var(--purple); }