/* John's Company · cena de problema do profissional (FDE), topo da #profissao (06/11/2026, não publicada).
   Fontes: revisao-0611/DIRECAO-ADAPTA.md §3 (+ P2: com a mão), copy-squad/02-mapa.md peças 9–10, regua/REGUA.md Ref B-1.
   Régua: manchete + cena numa tela (1440×900 e 390×844); a cena sangra além da largura útil (1200) em 1440;
   o destaque do título é o ouro da borda da peça (ouro-claro, legível no escuro). Palco = teal noite → profundo, o fundo da imagem. */

.fde{--fde-larg:min(1344px,calc(100vw - 2 * var(--margem)))}
/* palco: o fundo da imagem (azul-noite com vinheta, medido nas bordas: ~#061019) continua além dela */
.fde__palco{--fde-fundo:#061019;container-type:inline-size;position:relative;isolation:isolate;display:grid;overflow:hidden;
  width:var(--fde-larg);margin-left:calc((100% - var(--fde-larg)) / 2);
  border-radius:var(--raio-palco-j);background:radial-gradient(70% 90% at 32% 30%,#0A1E2E,var(--fde-fundo));color:#fff;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .1),inset 0 -1px 0 rgb(217 174 76 / .35)}
/* faixa de 761 a 1099: título acima da imagem, centrado */
.fde__cab{z-index:1;justify-self:center;max-width:820px;padding:64px 32px 8px;text-align:center}
.fde__h2{margin:0;font:900 clamp(34px,4.2vw,56px)/1.04 var(--f-titulo);letter-spacing:-.03em;color:#fff;text-wrap:balance}
.fde__h2 span{display:block;color:var(--ouro-claro)}
.fde__lead{margin:20px auto 0;max-width:46ch;font:400 clamp(17px,1.3vw,19px)/1.5 var(--f-texto);color:#EAF3F6;text-wrap:pretty}
/* 1100+: a imagem tem ar à esquerda; o título fica ali, sobre a imagem, longe do J (o J ocupa x 43–59 %, y 18–68 %).
   Véu da esquerda garante o contraste (fundo ali ≈ #061019; branco 19:1, ouro-claro 13:1) mesmo se a imagem mudar */
@media (min-width:1100px){
  .fde__cab,.fde__cena,.fde__palco::after{grid-area:1/1}
  /* o painel de vidro (glass.css) termina no fim do texto, acima da fileira de peças */
  #profissao .fde__cab{min-height:0;border-radius:12px} /* raio concêntrico: palco 32 − recuo 20 */
  /* 2 linhas sempre (régua): cada linha sem quebra e o corpo medido pela largura do palco (cqi), para caber na coluna */
  .fde__cab{align-self:start;justify-self:start;width:40%;max-width:none;padding:clamp(40px,5cqi,80px) 0 0 clamp(40px,5cqi,72px);text-align:left}
  .fde__h2{font-size:clamp(30px,3.3cqi,46px);white-space:nowrap}
  .fde__lead{margin:clamp(12px,1.4cqi,20px) 0 0;max-width:34ch;font-size:clamp(16px,1.35cqi,19px)}
  .fde__palco::after{content:"";z-index:0;pointer-events:none;background:linear-gradient(90deg,rgb(6 16 25 / .82),rgb(6 16 25 / .5) 34%,rgb(6 16 25 / 0) 44%)}
  /* as pontas cortadas somem aqui (uma máscara CSS no compositor, em vez de <mask> SVG por peça) */
  .fde__cena{-webkit-mask:linear-gradient(90deg,transparent,#000 9%,#000 96.5%,transparent);mask:linear-gradient(90deg,transparent,#000 9%,#000 96.5%,transparent)}
}

/* nota de fonte (RAND): ¹ no apoio, rodapé logo abaixo da cena */
.fde__lead sup{font-size:.62em;line-height:0}
.fde__lead sup a{color:var(--ouro-claro);text-decoration:none;padding:0 2px}
.fde__lead sup a:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.fde__fonte{margin:16px auto 0;max-width:110ch;font-size:12.5px;text-align:center;overflow-wrap:anywhere}
.fde__fonte sup{font-size:.8em}
/* ponte: t-h3 centrada, liga a mão ao profissional e a peça ao que ele constrói */
.fde__ponte{margin:64px auto 0;max-width:30ch;text-align:center;font:900 clamp(26px,2.6vw,36px)/1.12 var(--f-titulo);letter-spacing:-.02em;color:var(--titulo);text-wrap:balance}
/* nova ordem da seção: cena → ponte → 3 círculos → o que ele faz → fundador */
#profissao .fde + .prof{margin-top:56px}
#profissao .prof + .qe{margin-top:112px}


/* a seção cresceu (cena + ponte): reserva de altura para os saltos da nav antes da 1ª pintura (partes.css item 16) */
#profissao{contain-intrinsic-size:auto 2730px}
@media (max-width:1100px){#profissao{contain-intrinsic-size:auto 2930px}}
@media (max-width:960px){
  #profissao{contain-intrinsic-size:auto 3150px}
  #profissao .prof + .qe{margin-top:72px}
}
/* celular: título à esquerda acima da imagem; a imagem fica 4:3, presa embaixo, para a mão e a peça ganharem tamanho */
@media (max-width:760px){
  #profissao{contain-intrinsic-size:auto 3570px}
  .fde{--fde-larg:100vw}
  .fde__palco{border-radius:0}
  .fde__cab{justify-self:stretch;padding:48px 20px 0;text-align:left}
  .fde__h2{font-size:34px;line-height:1.06}
  .fde__lead{margin:16px 0 0;font-size:17px}
  .fde__fonte{text-align:left;padding:0 4px}
  .fde__ponte{margin-top:48px;text-align:left;margin-left:0;font-size:26px}
  #profissao .fde + .prof{margin-top:40px}
}

/* ── cena "a peça que faltava" (SVG em index.html, gerado por revisao-0611/construcao/fde-quebra-gen.py; motion em js/fde-cena.js) ──
   Tempos: 0 nada · 1 a empresa incompleta (peças apagadas e soltas, a lacuna) · 2 a mão desce e encaixa a peça · 3 a empresa conectada.
   O HTML vem em data-tempo="3": sem JS, sem IntersectionObserver ou com reduzir movimento, a cena já está conectada.
   Régua: curva .22,1,.36,1; cada etapa 0,35–0,5 s; tudo termina em ~1,9 s depois de entrar na tela. Cor só por token. */
.fde__cena{
  --fde-marmore:#F6F3EE; --fde-veio:#8C857B;
  --fde-tinta:var(--teal-noite); --fde-vidro:var(--amarelo); --fde-borda:var(--ouro); --fde-escuro:var(--preto-marca);
  --fde-curva:cubic-bezier(.22,1,.36,1);
  position:relative;min-width:0;
  will-change:transform} /* camada própria: a luz do palco (glass.css, ligada à rolagem) não repinta o SVG a cada quadro, e o SVG animado não repinta o palco */
.fde-var{display:block;width:100%;height:auto}
.fde-var--g{display:none}
@media (max-width:1099px){
  .fde-var--l{display:none}
  .fde-var--g{display:block;max-width:560px;margin:8px auto 0}
}
@media (max-width:760px){.fde-var--g{max-width:none;margin-top:4px}}

/* materiais */
.fde-s{stop-opacity:1}
.fde-s--m0{stop-color:color-mix(in srgb,var(--fde-marmore),white 60%)}
.fde-s--m1{stop-color:var(--fde-marmore)}
.fde-s--m2{stop-color:color-mix(in srgb,var(--fde-marmore),var(--fde-tinta) 13%)}
.fde-s--b0{stop-color:white;stop-opacity:.95}
.fde-s--b1{stop-color:white;stop-opacity:0}
.fde-s--v0{stop-color:color-mix(in srgb,var(--fde-vidro),white 62%)}
.fde-s--v1{stop-color:var(--fde-vidro)}
.fde-s--v2{stop-color:color-mix(in srgb,var(--fde-vidro),var(--fde-borda) 40%)}
.fde-s--a0{stop-color:var(--fde-vidro);stop-opacity:.5}
.fde-s--a1{stop-color:var(--fde-vidro);stop-opacity:0}

.fde-chao{opacity:.75}
.fde-s--c0,.fde-s--c1{stop-color:var(--fde-escuro)}.fde-s--c0{stop-opacity:.9}.fde-s--c1{stop-opacity:.5}.fde-s--c2{stop-color:var(--fde-escuro);stop-opacity:0}
.fde-aura-linha{opacity:.5}
.fde-lacuna{fill:color-mix(in srgb,var(--fde-escuro) 70%,transparent);stroke:var(--fde-borda);stroke-opacity:.6;stroke-width:2;stroke-dasharray:9 7}
.fde-p{transform:none}
.fde-p--borda{opacity:.85}
.fde-p__lado{fill:color-mix(in srgb,var(--fde-marmore),var(--fde-tinta) 40%)}
.fde-p__veio{fill:none;stroke:var(--fde-veio);stroke-width:1;opacity:.17}
.fde-p__brilho{fill:none;stroke-width:2.5}
.fde-p__nome{font:800 26px var(--f-texto);letter-spacing:-.01em;fill:var(--fde-tinta)}
.fde-var--l .fde-p__nome{font-size:30px}
.fde-peca__aura{opacity:.95}
.fde-peca__lado{fill:color-mix(in srgb,var(--fde-borda),var(--fde-tinta) 28%)}
.fde-peca__face{stroke:var(--fde-borda);stroke-width:3}
.fde-j{fill:var(--fde-tinta)} /* J sólido em teal noite (#0D2533), a tinta sobre área amarela; o fio de luz faz o gravado */
.fde-j__luz{fill:white;opacity:.6}
.fde-costura{fill:none;stroke:var(--fde-vidro);stroke-width:3;stroke-linecap:round}

/* estados antes do fim */
.fde__cena[data-tempo="0"] .fde-pecas,.fde__cena[data-tempo="0"] .fde-lacuna{opacity:0}
.fde__cena:not([data-tempo="3"]) .fde-p{transform:translate(var(--ox,0px),var(--oy,0px))}
/* apagadas: o grupo inteiro a .58 sobre o palco escuro (rótulo ainda ≥ 4,5:1) */
.fde__cena[data-tempo="1"] .fde-pecas,.fde__cena[data-tempo="2"] .fde-pecas{opacity:.58}
.fde-revela{transform-box:view-box}
.fde-var--l .fde-revela{transform-origin:959.5px 585px}
.fde-var--g .fde-revela{transform-origin:340px 430px}
.fde__cena:not([data-tempo="3"]) .fde-revela{transform:scale(0)}
.fde__cena:not([data-tempo="3"]) .fde-aura-linha{opacity:0}
.fde__cena:not([data-tempo="3"]) .fde-peca__aura{opacity:.35}
/* a mão traz a peça: entra pelo alto (0 → 1), paira sobre a lacuna (1) e desce com ela até encaixar (2) */
.fde__cena[data-tempo="0"] .fde-mov{transform:translateY(-900px)}
.fde__cena[data-tempo="1"] .fde-mov{transform:translateY(-230px)}
/* soltas: cada peça se afasta 6 unidades por posição de distância da lacuna */
.o-l1{--ox:-6px}.o-l2{--ox:-12px}.o-l3{--ox:-18px}.o-l4{--ox:-24px}
.o-r1{--ox:6px}.o-r2{--ox:12px}.o-r3{--ox:18px}.o-r4{--ox:24px}
.o-b1{--oy:6px}
.d1{--d:1}.d2{--d:2}.d3{--d:3}.d4{--d:4}
.cd1{--d:1}.cd2{--d:2}

/* transições só a partir do tempo 1 (a volta 3 → 0 feita pelo JS é instantânea) */
.fde__cena:not([data-tempo="0"]) .fde-p{transition:transform .35s var(--fde-curva)}
.fde__cena:not([data-tempo="0"]) .fde-pecas{transition:opacity .4s var(--fde-curva)}
.fde__cena[data-tempo="3"] .fde-pecas{transition-delay:.3s}
.fde__cena:not([data-tempo="0"]) .fde-lacuna{transition:opacity .4s var(--fde-curva)}
.fde__cena:not([data-tempo="0"]) .fde-mov{transition:transform .5s var(--fde-curva)}
.fde__cena:not([data-tempo="0"]) .fde-revela{transition:transform .6s var(--fde-curva) .25s}
/* fim: o JS marca .fde--fim e nenhuma transição fica armada (estado final só por classe/atributo) */
.fde--fim,.fde--fim *,.fde--fim::before,.fde--fim::after,.fde--fim *::before{transition:none!important}
.fde__cena:not([data-tempo="0"]) .fde-aura-linha,.fde__cena:not([data-tempo="0"]) .fde-peca__aura{transition:opacity .5s var(--fde-curva) .4s}
@media (prefers-reduced-motion:reduce){.fde__cena *{transition:none!important}}
/* 1100–1299: o texto do painel ocupa mais altura relativa; a cena desce para manter ≥ 32 px entre o painel e as peças */
@media (min-width:1100px) and (max-width:1299px){.fde-var--l{margin-top:clamp(24px,calc(1300px - 100vw) * .3,60px)}}

/* ── Venn: sai a foto de estátuas; fica o fundo da marca, luz ambiente teal e um veio de mármore sutil (07/11) ── */
#profissao .prof__arte{opacity:1;filter:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23F6F3EE' stroke-linecap='round'%3E%3Cpath stroke-opacity='.07' stroke-width='1.4' d='M-20 420C180 380 260 300 470 310S820 420 1220 250'/%3E%3Cpath stroke-opacity='.05' stroke-width='1' d='M-20 160C220 210 330 120 560 150S900 60 1220 120'/%3E%3Cpath stroke-opacity='.045' stroke-width='.8' d='M300 620C360 520 500 470 640 480S980 560 1220 470'/%3E%3C/g%3E%3C/svg%3E") 0 0/100% 100% no-repeat,
    radial-gradient(45% 60% at 28% 50%,rgb(28 103 148 / .55),rgb(28 103 148 / 0) 70%),
    radial-gradient(40% 55% at 80% 20%,rgb(14 61 89 / .7),rgb(14 61 89 / 0) 70%),
    radial-gradient(35% 50% at 75% 95%,rgb(28 103 148 / .3),rgb(28 103 148 / 0) 70%)}

/* ── "Um profissional que entende a sua área…": 3 cards de vidro fumê (receita de css/glass.css) sobre luz ambiente teal.
   A linha de luz amarela da cena desce e corre por cima dos cards, acendendo um por vez (data-luz 0 → 3, js/fde-cena.js).
   Sem JS ou com reduzir movimento, data-luz="3": tudo aceso. ── */
#profissao .qe{position:relative;isolation:isolate;display:block}
#profissao .qe::before{content:"";position:absolute;inset:-40px -6% -60px;z-index:-1;pointer-events:none;-webkit-mask:radial-gradient(closest-side,#000 55%,transparent);mask:radial-gradient(closest-side,#000 55%,transparent);
  background:radial-gradient(38% 60% at 22% 78%,rgb(28 103 148 / .55),rgb(28 103 148 / 0) 70%),
    radial-gradient(34% 55% at 55% 70%,rgb(14 61 89 / .6),rgb(14 61 89 / 0) 70%),
    radial-gradient(32% 55% at 86% 72%,rgb(28 103 148 / .45),rgb(28 103 148 / 0) 70%)}
#profissao .qe .q-h2{max-width:24ch}
#profissao .qe .q-lead{max-width:52ch}
#profissao .faz{--luz:var(--amarelo);--curva:cubic-bezier(.22,1,.36,1);position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:72px 0 0;padding:0;counter-reset:none}
/* a linha: desce do alto (a peça encaixada) e corre por cima dos cards */
#profissao .faz::before,#profissao .faz::after{content:"";position:absolute;pointer-events:none;background:var(--luz);
  box-shadow:0 0 10px color-mix(in srgb,var(--luz) 70%,transparent);border-radius:2px}
#profissao .faz::before{left:calc(50% - 1.5px);top:-56px;width:3px;height:30px}
#profissao .faz::after{left:0;right:0;top:-26px;height:3px}
#profissao .faz li{position:relative;display:block;padding:32px 28px 30px;border:0;border-radius:20px;color:#EAF3F6;font:400 17px/1.55 var(--f-texto);
  --lg-filtro:blur(9px) saturate(200%) brightness(.36);--lg-veu1:.8;--lg-veu2:.86;--lg-aro:rgb(255 255 255 / .55);
  background:radial-gradient(48% 50px at 30% -14px,rgb(255 255 255 / .14),rgb(255 255 255 / 0) 72%),
    linear-gradient(180deg,rgb(255 255 255 / .07),rgb(255 255 255 / 0) 40px),
    radial-gradient(70% 60% at 100% 100%,rgb(28 103 148 / .22),rgb(28 103 148 / 0) 70%),
    linear-gradient(160deg,rgb(14 61 89 / var(--lg-veu1)),rgb(13 37 51 / var(--lg-veu2)));
  -webkit-backdrop-filter:blur(9px) saturate(200%) brightness(.36);backdrop-filter:blur(9px) saturate(200%) brightness(.36);
  box-shadow:inset 0 1px 0 var(--lg-aro),inset 0 -1px 0 rgb(240 208 122 / .4),inset 0 0 0 1px rgb(255 255 255 / .1),
    inset 0 28px 44px -30px rgb(255 255 255 / .28),inset 0 -20px 40px -30px rgb(28 103 148 / .35),0 30px 70px -34px rgb(6 30 46 / .6)}
/* véu .8 → .86 (mais que o .6 do card do topo): texto claro ≥ 7:1 medido no 98º percentil do fundo, com a luz amarela acesa */
/* aceso: o fio de cima vira luz amarela, e a luz entra no card */
#profissao .faz li::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 2px 0 var(--luz),inset 0 0 0 1px color-mix(in srgb,var(--luz) 45%,transparent),inset 0 30px 40px -34px color-mix(in srgb,var(--luz) 26%,transparent)}
#profissao .faz b{display:block;margin-bottom:12px;font:900 clamp(26px,2.2vw,32px)/1.05 var(--f-titulo);letter-spacing:-.02em;color:#fff}
#profissao .faz span{display:block}
#profissao .faz__simbolo{display:block;width:64px;height:64px;margin:-6px 0 18px -6px}
@media (max-width:760px){#profissao .faz__simbolo{width:52px;height:52px}}
@media (max-width:860px){
  #profissao .faz{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:40px;padding-left:28px}
  #profissao .faz::before{display:none}
  #profissao .faz::after{left:6px;right:auto;top:0;bottom:0;width:3px;height:auto}
}
@media (prefers-reduced-transparency:reduce){#profissao .faz li{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgb(14 61 89 / .97)}}
/* antes de acender */
#profissao .faz:not([data-luz="3"])::before{transform:scaleY(0)}
#profissao .faz:not([data-luz="3"])::after{transform:scaleX(0)}
#profissao .faz[data-luz="0"]::before{transform:scaleY(0)}
#profissao .faz[data-luz="1"]::before,#profissao .faz[data-luz="2"]::before{transform:none}
#profissao .faz[data-luz="1"]::after{transform:scaleX(.34)}
#profissao .faz[data-luz="2"]::after{transform:scaleX(.67)}
#profissao .faz::before{transform-origin:50% 0;transition:transform .3s var(--curva)}
#profissao .faz::after{transform-origin:0 50%;transition:transform .45s var(--curva) .1s}
#profissao .faz li::before{opacity:1;transition:opacity .4s var(--curva) .2s}
#profissao .faz[data-luz="0"] li::before,#profissao .faz[data-luz="1"] li:nth-child(n+2)::before,#profissao .faz[data-luz="2"] li:nth-child(3)::before{opacity:0}
#profissao .faz[data-luz="0"]::before,#profissao .faz[data-luz="0"]::after,#profissao .faz[data-luz="0"] li::before{transition:none}
@media (max-width:860px){
  #profissao .faz::after{transform-origin:50% 0}
  #profissao .faz[data-luz="0"]::after{transform:scaleY(0)}
  #profissao .faz[data-luz="1"]::after{transform:scaleY(.34)}
  #profissao .faz[data-luz="2"]::after{transform:scaleY(.67)}
}
@media (prefers-reduced-motion:reduce){#profissao .faz::before,#profissao .faz::after,#profissao .faz li::before{transition:none!important}}

/* celular e toque: blur menor nos cards de vidro (REVISAO-OMNI §3) */
@media (max-width:760px),(pointer:coarse){#profissao .faz li{-webkit-backdrop-filter:blur(8px) saturate(170%) brightness(.36);backdrop-filter:blur(8px) saturate(170%) brightness(.36)}}