/* ============================================================ */
/* WORKSHOPS DETALHES — PÁGINA COMPLETA (LIB)                  */
/* Merge das {total} seções de sections/, nesta ordem:         */
/*   1. HERO — Section 2717:4 (1-hero) ................... y=115*/
/*   2. MENU DE ÂNCORAS — menu-serviços 2717:643 (1-menu) . y=830*/
/*   3. ASSISTA AO VÍDEO — Frame 334 2771:16 (1-video) .... y=916*/
/*   4. POR QUE ESTE WORKSHOP — Section 2717:806 .......... y=1676*/
/*   5. PÚBLICO-ALVO E VALOR GERADO — Frame 331 2723:2 .... y=2718*/
/*   6. O FORMATO DA SUA EXPERIÊNCIA — sec-perfil 2717:475  y=3524*/
/*   7. O QUE VOCÊ VAI APRENDER — sec-formacao 2743:208 ... y=4026*/
/*   8. COM QUEM VOCÊ IRÁ APRENDER — sec-especialistas 2750:790  y=5184*/
/*   9. MATERIAL DIDÁTICO DE APOIO — sec-formacao 2742:368  y=5836*/
/*  10. ESCOLHA SUA TURMA — investimento-servicos 2717:648  y=6920*/
/*  11. ESTE TEMA FAZ SENTIDO — Frame 332 2723:397 ....... y=7520*/
/*  12. CONTINUE EXPLORANDO — sec-continue 2717:914 ...... y=7984*/
/*  13. ASIDE DE INSCRIÇÃO — Aside 2750:105 (4-aside) — sobreposição,*/
/*      `position: fixed`, fora do fluxo: a posição no documento não conta.*/
/*                                                             */
/* A ordem é a do frame `Detalhe WS` (2717:2), pela posição y de*/
/* cada filho direto — conferida em 2026-08-26.                */
/* O número no nome do arquivo é ordem de CONSTRUÇÃO, não      */
/* de página: quem manda na ordem é a lista `ordem` abaixo.    */
/*                                                             */
/* Do frame da página ficam de fora, e de propósito:           */
/*   · Menu 2717:407 (y=0) e Rodape 2717:752 (y=9580) — header e*/
/*     rodapé do site, não são seções desta página;            */
/*   · o bloco de PERGUNTAS FREQUENTES (y=8783–9580: Rectangle 1628*/
/*     2717:536 + título 2760:1176 + Group 525 2760:1200), que ainda*/
/*     NÃO foi construído — o menu já tem o link `#duvidas` para ele.*/
/*                                                             */
/* Gerado a partir de sections/*.css — a fonte da verdade      */
/* continua sendo cada seção; ao editá-las, refazer o merge.   */
/* Aqui os :root de todas as seções viram um só (deduplicado)  */
/* e o body{} repetido vira uma regra única.                   */
/*                                                             */
/* PORTE PARA O SITE (LeanWeb) — nao editar aqui: a fonte      */
/* continua sendo outputs/workshops-detalhes/sections/*.css.   */
/* Diferencas em relacao ao merged/styles.css do mockup:       */
/*   · os 6 blocos `:root` (1 base + 5 em @media) viraram      */
/*     `.workshop-detalhes-page` — o wrapper da view. Sem isso */
/*     os 218 tokens vazariam para o site inteiro (ha genericos*/
/*     como --color-navy, --color-orange, --font-primary) e as */
/*     sobrescritas responsivas nem chegariam ao wrapper.      */
/*   · a regra `body{}` virou a mesma classe.                  */
/*   · os `html{}` (scroll-behavior, scrollbar-gutter) ficaram */
/*     como estavam: so valem enquanto esta pagina esta aberta.*/
/*   · `.menu-workshops ~ [id]` segue valendo porque o wrapper */
/*     guarda menu e secoes como irmaos diretos.               */
/* ============================================================ */

.workshop-detalhes-page {
  /* --- 1/13 · HERO — Section 2717:4  (1-hero.css) --- */

  /* Cores */
  --color-navy-deep:    #29235c;               /* título, valores do resumo, botão outline */
  --color-navy-soft:    #5b5880;               /* "Resumo técnico" e rótulos do resumo */
  --color-orange:       #ff8000;               /* CTAs, régua, borda do cartão (a tag de setor é #ff8001 no Figma — mesma cor) */
  --color-orange-dark:  #e67300;               /* hover dos CTAs — não está no Figma; é o hover laranja das outras páginas */
  --color-teal:         #169194;               /* tag "Workshop" */
  --color-tag-dark:     rgba(26, 43, 72, 0.9); /* tag "Presencial | Sorocaba - SP" */
  --color-border-soft:  #e3e5ee;               /* linhas tracejadas e borda do "Compartilhar" */
  --color-page-bg:      #ffffff;               /* provisório: a hero termina em branco; rever quando a 2ª seção definir o fundo */
  --color-white:        #ffffff;

  /* Tipografia */
  --font-primary:          'Roboto', sans-serif;
  --font-weight-regular:   400;
  --font-weight-bold:      700;
  --font-weight-black:     900;

  /* Hero */
  --hero-workshop-height:       715px;  /* altura do frame */
  --hero-workshop-gutter-top:   138px;  /* topo do frame → linha de tags (Container y=76 + tags y=62) */
  --hero-workshop-container:    1126px; /* o Container do Figma: 1920 − 2 × 397, centrado */
  --hero-workshop-intro-width:  780px;  /* largura do Heading 1 */
  --hero-workshop-aside-width:  350px;
  --hero-workshop-aside-offset: 41px;   /* o cartão começa em y=179 e as tags em y=138: ele alinha com o topo do H1 */
  --hero-workshop-aside-bleed:  93px;   /* o cartão termina em x=1584, 93px além da caixa de conteúdo (429–1491) */
  /* --- 2/13 · MENU DE ÂNCORAS — menu-serviços  (1-menu.css) --- */

  /* Cores */
  --color-navy:            #394195;   /* item ativo e indicador (2717:647) */
  --color-rule:            #b8b8b8;   /* traço Line 46 (2717:646) */
  --menu-workshops-bg:     #dfe0ee;   /* retângulo 2717:644: no Figma é
                                         rgba(57,65,149,.16) sobre a página
                                         branca — aqui vai a cor já composta,
                                         OPACA. A faixa é `sticky`: translúcida,
                                         ela deixava o conteúdo das seções
                                         atravessar por baixo dos itens. O pixel
                                         parado no topo é o mesmo: #dfe0ee */

  /* Tipografia */

  /* Menu — medidas do frame do Figma, conferidas no screenshot de 1920:
     texto ............ centro em y 37, line-height 25.79 → 24.1 a 49.9
     traço cinza ...... 1px em y 61 (Line 46: y 62 com inset de -1px),
                        de x 636 a 1383
     indicador ........ y 60 → 62 (3px), de x 540 a 642 (103px)
     traço + indicador formam uma linha contínua de 540 a 1382 (843px),
     centrada em 961 como o texto: o cinza cobre tudo e o azul repinta
     o trecho do item ativo */
  --menu-workshops-height:      86px;
  --menu-workshops-text-top:    24px;
  --menu-workshops-line-height: 25.79px;
  --menu-workshops-rule-gap:    11px;    /* base do texto (49.8) → traço (61) */
  --menu-workshops-bar-drop:    13px;    /* base do texto (49.8) → base da barra (63) */
  --menu-workshops-sep-gap:     8px;     /* equivale aos 2 espaços de cada lado do "|" */
  /* --- 3/13 · ASSISTA AO VÍDEO — Frame 334 2771:16  (1-video.css) --- */

  /* Página — compartilhados entre seções (o merge deduplica: 1º a declarar vence) */

  /* Cores */
  --wsv-color-navy:           #29235c;                      /* título, moldura, triângulo */
  --wsv-color-accent:         #ff8000;                      /* régua sob o título */
  --wsv-color-blob-teal:      rgba(22, 145, 148, 0.12);     /* #169194 @ 12% — 2771:2 e 2771:32 */
  --wsv-color-blob-lavanda:   rgba(41, 35, 92, 0.07);       /* #29235c @ 7%  — 2771:3 */
  --wsv-color-disc:           rgba(255, 255, 255, 0.88);    /* disco do play */
  --wsv-color-disc-hover:     #ffffff;                      /* não está no Figma — acabamento */

  /* Tela do player: gradiente do SVG (33,22)→(584,592) em userSpace; no CSS
     a linha passa pelo centro e tem exatamente o mesmo comprimento (792,9px),
     então ângulo + stops reproduzem o SVG sem ajuste. */
  --wsv-screen-gradient:      linear-gradient(135.95deg, #394195 0%, #169194 50%, #cb6ce6 100%);

  /* Sombra da moldura: feOffset dy=4 + feGaussianBlur stdDeviation=2 @ 25% */
  --wsv-player-shadow:        0 4px 4px rgba(0, 0, 0, 0.25);

  /* Tipografia */
  --wsv-title-size:           2.25rem;                      /* 36px — Roboto Black */
  --wsv-title-lh:             47.12px;
  --wsv-title-width:          723px;                        /* caixa do texto no Figma */

  /* Ritmo vertical do frame (y no Figma) */
  --wsv-pad-top:              77px;                         /* topo → caixa do título (77) */
  --wsv-gap-title-rule:       34.88px;                      /* base do título (125) → régua (159): a caixa
                                                               do texto no Figma é 48 (47,12 arredondado),
                                                               os 0,88 repõem esse arredondamento */
  --wsv-gap-rule-player:      59px;                         /* base da régua (163) → player (222) */
  --wsv-pad-bottom:           68px;                         /* base do player (691) → base (759) */

  /* Player */
  --wsv-player-width:         759px;
  --wsv-pad-x:                24px;                         /* respiro lateral abaixo da lona */
  /* --- 4/13 · POR QUE ESTE WORKSHOP — Section 2717:806  (1-por-que.css) --- */

  /* Cores */
  --color-indigo:          #394195;   /* meio do gradiente (55%) e anel claro */
  --color-violet:          #4b45b0;   /* fim do gradiente */
  --color-accent:          #ff8000;   /* régua e borda do destaque */
  --color-text-muted:      #5c5a7e;   /* destaque e texto corrido */
  --color-lavender:        #e3e1f5;   /* texto dos 7 pontos */
  --color-surface-lilac:   #f3f2fb;   /* fundo do destaque */

  /* Tipografia */
  --font-weight-semibold:  600;
  --font-weight-extrabold: 800;

  /* Por que — medidas retiradas do frame do Figma (1920 x 1042)
     seção: título a 95px do topo, card termina a 114px da base
     card: 1600 x 673 em x=160, raio 32, calha de 2px entre as colunas
     colunas: 803 (esq., padding 60) e 795 (dir., padding 56) — as duas
       com o MESMO miolo de 683px; é essa igualdade que fixa a proporção
     anéis: 440 de diâmetro com traço INTERNO de 50 (medido no print:
       borda externa r=220, interna r=170) */
  --porque-ws-card-max:    1600px;
  --porque-ws-gutter:      24px;
  --porque-ws-col-gap:     2px;
  --porque-ws-radius:      32px;
  --porque-ws-shadow:      0 40px 90px rgba(41, 35, 92, 0.14);
  --porque-ws-gradient:    linear-gradient(159.9deg,
                             var(--color-navy-deep) 0%,
                             var(--color-indigo) 55%,
                             var(--color-violet) 100%);
  --porque-ws-anel:        440px;
  --porque-ws-anel-borda:  50px;
  --porque-ws-icone:       34px;
  --porque-ws-icone-glifo: 16px;
  --porque-ws-item-gap:    26px;
  /* --- 5/13 · PÚBLICO-ALVO E VALOR GERADO — Frame 331 2723:2  (2-publico-alvo.css) --- */

  /* Cores */
  --publico-ws-violet:    #534ab7;  /* card 3 (times) — reescopado: --color-violet da 1-por-que é #4b45b0 */
  --publico-ws-orange:    #ffa626;  /* ganho 5 (cultura) */
  --publico-ws-magenta:   #cb6ce6;  /* ganho 6 (passos) */

  /* Tipografia */

  /* Público-alvo — medidas retiradas do frame do Figma e conferidas
     no screenshot de 1920:
     seção 806 de altura, fundo #f7f7f7; título a 79 do topo; régua 96x4
     a 166; caixa branca 1096x490 a 212 (borda 1 #e7e4f4, raio 20);
     dentro da caixa: abas a 16 do topo, cards a 129 (altura 312),
     recuo lateral 67 → fileira de 960 = 4 cards de 234 + 3 gaps de 8 */
  --publico-ws-bg:            #f7f7f7;
  --publico-ws-tab-muted:     #918fae;  /* texto da aba inativa */
  --publico-ws-box-border:    #e7e4f4;
  --publico-ws-card-border:   #e3e5ee;
  --publico-ws-slot-bg:       #dfe0ee;  /* "furo" do crachá */
  --publico-ws-slot-border:   #bfbfbf;
  --publico-ws-nota-bg:       #f1f0fa;  /* nota da aba 2 */
  --publico-ws-container:     1096px;
  --publico-ws-box-gutter:    67px;
  --publico-ws-card-gap:      8px;
  --publico-ws-card-min-h:    312px;
  --publico-ws-strip-h:       8px;
  --publico-ws-radius:        18px;
  --publico-ws-fade:          420ms;
  --publico-ws-ease:          cubic-bezier(.4, 0, .2, 1);
  /* --- 6/13 · O FORMATO DA SUA EXPERIÊNCIA — sec-perfil 2717:475  (1-formato.css) --- */

  /* Cores */

  /* Fundo da seção: degradê vertical cinza-claro → lilás-acinzentado.
     Figma: linear-gradient(-0.07deg, #dfe0ee 0.26%, #f6f5f6 93.5%),
     que lido de cima para baixo é #f6f5f6 em 6.5% → #dfe0ee em 99.74% */
  --formato-ws-bg-top:     #f6f5f6;
  --formato-ws-bg-bottom:  #dfe0ee;

  /* Cards e conector */
  --formato-ws-card-bg:      #ffffff;
  --formato-ws-card-border:  #e7e4f4;   /* borda dos dois cards em repouso */
  --formato-ws-card-shadow:  0 20px 23px rgba(57, 65, 149, 0.12);  /* realce de hover */
  --formato-ws-pill-bg:      #f1f0fa;
  --formato-ws-divider:      #ded9f2;

  /* Tipografia */

  /* Medidas do frame (1920 x 516)
     título: box de 44.8 em y 41 · régua 96x4 em y 131
     cards de 480 em x 415 e x 1025 (vão de 130 = coluna do conector)
     linha central dos cards em y 312 · base do card mais baixo em y 407
     card: pílulas em y 47 (do topo externo) · parágrafo em y 101 */
  --formato-ws-container:   1090px;  /* 480 + 130 + 480 */
  --formato-ws-card-w:      480px;
  --formato-ws-gap:         130px;   /* vão entre os cards = coluna do conector */
  --formato-ws-radius:      22px;
  --formato-ws-card-pad-x:  32px;    /* 33 do Figma menos a borda de 1px */
  /* --- 7/13 · O QUE VOCÊ VAI APRENDER — sec-formacao 2743:208  (2-aprender.css) --- */

  /* Compartilhados com o 1-menu — mesmos valores, o merge deduplica */

  /* Cores próprias da seção */
  --aprender-workshops-teal:        #169194;   /* canto dos destaques e topo do selo ★ */
  --aprender-workshops-indigo:      #394195;   /* base do gradiente do selo ★ */
  --aprender-workshops-orange:      #ff8000;   /* régua sob o cabeçalho (2743:216) */
  --aprender-workshops-text-muted:  #5b5880;   /* lead e número dos selos fechados */
  --aprender-workshops-text-item:   #5c5a7e;   /* tópicos do módulo */
  --aprender-workshops-dash:        #918fae;   /* travessão dos tópicos */
  --aprender-workshops-border-soft: #e3e5ee;   /* borda dos módulos fechados e dos selos */
  --aprender-workshops-rail:        #d0d0d0;   /* linha vertical do trilho (2743:218) */
  --aprender-workshops-bg-top:      #e0e1ef;   /* gradiente de fundo, 180deg */
  --aprender-workshops-bg-bottom:   #f6f5f6;
  --aprender-workshops-white:       #ffffff;

  /* Tipografia — pesos que só esta seção usa */

  /* Medidas do frame (1920 × 1158), conferidas no screenshot
       seção ........ título começa em y 35; último card termina em 1073 → 35 / 85
       conteúdo ..... 820px centrado (x 550..1370), 32px de respiro → 756 úteis
       trilho ....... coluna de 52px à esquerda dos cards (cards em x 634..1337)
       linha ........ 2px em x 599 (= 582 + 17), de y 239 a 1074
       selo ......... 36px, centrado na linha
       cards ........ 704px: destaque 238..496 · 01 513..745 · 02 760..813
                      · 03 828..881 · destaque 899..1072 */
  --aprender-workshops-container:  820px;
  --aprender-workshops-gutter:     32px;
  --aprender-workshops-rail-w:     52px;
  --aprender-workshops-rail-x:     17px;
  --aprender-workshops-selo:       36px;
  --aprender-workshops-gap:        14px;   /* vão entre módulos */
  --aprender-workshops-gap-plus:   2px;    /* a mais entre destaque e módulo (16px) */
  --aprender-workshops-radius:     14px;
  --aprender-workshops-radius-lg:  16px;
  --aprender-workshops-pad:        22px;   /* respiro lateral do módulo */
  --aprender-workshops-pad-lg:     26px;   /* respiro dos destaques */

  /* Movimento — a altura leva o tempo cheio, cor e opacidade chegam antes */
  --aprender-workshops-dur:        0.3s;
  --aprender-workshops-dur-curta:  0.22s;
  --aprender-workshops-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  /* --- 8/13 · COM QUEM VOCÊ IRÁ APRENDER — sec-especialistas 2750:790 (3) · 2717:348 (2) · 2750:742 (1)  (1-especialistas.css) --- */

  /* Cores */
  --color-navy-lit:    #394195;  /* ponta clara do gradiente do cartão */
  --color-lilac-soft:  #c9c5ea;  /* cargo, dentro do cartão */
  --color-bg-fog:      #f6f5f6;  /* fundo da seção */

  /* Tipografia */

  /* Cabeçalho — igual nos três desenhos:
     pt 90 · título 48 · filete 96×4 a 39 · cartões a 39 (topo em y = 220) */
  --experts-ws-rule-gap:  39px;
  --experts-ws-photo:     130px;
  --experts-ws-radius:    28px;

  /* 3 especialistas — cartão EM PÉ 320 × 342, três com gap 65 = 1090
     alturas: pt 29 · retrato 130 · +8 · legenda 57 · +27 · botão 46 · pb 45 */
  --experts-ws-container: 1090px;
  --experts-ws-card-h:    342px;
  --experts-ws-gap:       65px;

  /* 2 especialistas — cartão DEITADO 738 × 234, dois com gap 31 = 1507
     1 especialista  — o mesmo cartão deitado, 880 × 234, centrado
     Nos dois a régua interna é a mesma: recuo 52 à esquerda, vãos de 40, e
     39 à direita. O Figma declara `p-52` nos dois lados, mas a largura fixa
     do quadro come 13px do recuo direito — quem manda é a posição medida do
     botão (x 556 em 738; x 698 em 880), não o número declarado. */
  --experts-ws-duo:       1507px;
  --experts-ws-duo-card:  738px;
  --experts-ws-duo-gap:   31px;
  --experts-ws-solo-card: 880px;
  --experts-ws-row-h:     234px;
  --experts-ws-row-gap:   40px;

  /* Vidro do botão "Mini-currículo" — branco sobre o gradiente */
  --experts-ws-glass:        rgba(255, 255, 255, 0.15);
  --experts-ws-glass-edge:   rgba(255, 255, 255, 0.3);
  --experts-ws-glass-hover:  rgba(255, 255, 255, 0.28);
  --experts-ws-glass-edge-h: rgba(255, 255, 255, 0.55);
  /* --- 9/13 · MATERIAL DIDÁTICO DE APOIO — sec-formacao 2742:368  (1-material.css) --- */

  /* Página (usados pelo body do merge) */

  /* Fundo da seção */
  --mat-bg-top:            #f6f5f6;
  --mat-bg-bottom:         #dfe0ee;

  /* Texto */
  --mat-color-heading:     #29235c;
  --mat-color-text:        #5b5880;
  --mat-color-card-text:   #5c5a7e;
  --mat-color-accent:      #ff8000;
  --mat-color-tag:         #169194;
  --mat-color-link:        #394195;

  /* Cartões de material incluso */
  --mat-card-bg:           #ffffff;
  --mat-card-border:       #e7e4f4;
  --mat-card-shadow:       0 16px 20px rgba(41, 35, 92, 0.06);
  --mat-cover-shadow:      0 12px 26px rgba(41, 35, 92, 0.18);
  --mat-cover-apostila:    linear-gradient(180deg, #5c52cd 0%, #29235c 100%);
  --mat-cover-kaizen:      linear-gradient(160.0143deg, #169194 0%, #0d5e60 100%);

  /* Cartões de referência (fundo em camadas) */
  --ref-artigos-bg:        #000000;
  --ref-publicacao-bg:     #241335;
  --ref-videos-bg:         #0a2f30;

  /* Sanfona dos cartões de referência: os dois estados vêm do Figma
     (493 aberto / 320 fechado). Easing e duração são os mesmos da
     sanfona irmã em 1-continue. */
  --ref-grow-open:         493;
  --ref-grow-closed:       320;
  --ref-dur:               450ms;
  --ref-ease:              cubic-bezier(.4, 0, .2, 1);

  /* Forma */
  --mat-radius-card:       22px;
  --mat-radius-cover:      10px;
  --mat-radius-ref:        20px;
  --mat-radius-btn:        10px;
  /* --- 10/13 · ESCOLHA SUA TURMA E GARANTA SUA VAGA — investimento-servicos 2717:648  (3-escolha-turma.css) --- */

  /* Cores */

  /* Fundo da seção: degradê vertical do frame, lido de cima para baixo
     #dfe0ee (y 0) → #f6f5f6 (y 599), linear e sem parada intermediária */
  --turma-ws-bg-top:     #dfe0ee;

  /* Superfícies do card */
  --turma-ws-border:     #e7e4f4;  /* borda do card claro, tracejado, caixa da anfitriã */
  --turma-ws-icon-bg:    #f1f0fa;  /* quadrado de 44 atrás dos ícones */
  --turma-ws-host-bg:    #f9f9fd;  /* fundo da caixa da empresa anfitriã */
  --turma-ws-label:      #918fae;  /* rótulos DATA / HORÁRIO */
  --turma-ws-note-text:  #d8d5f0;  /* texto da faixa de desconto */

  /* Tipografia */

  /* Medidas do frame (1920 x 600)
     título: box de 48 em y 87 · régua 96x4 em y 164
     card 1140 x 267 em y 210, raio 30, recorte em overflow
     lado claro 740 (conteúdo 658 em x 22) · lado escuro 400
     claro: pílula y 23 · tracejados y 63 e 150 · linha de dados y 84
            botões y 172 (312 + 34 + 312)
     escuro: preço y 33 · "à vista" y 79 · fio y 105 · desconto y 121
             lista de pagamento y 172, passo de 26 */
  --turma-ws-container:   1140px;
  --turma-ws-card-h:      267px;
  --turma-ws-radius:      30px;
  --turma-ws-aside-w:     400px;
  --turma-ws-btn-w:       312px;
  --turma-ws-btn-gap:     34px;
  /* --- 11/13 · ESTE TEMA FAZ SENTIDO PARA TODO O SEU TIME? — Frame 332 2723:397  (1-sentido.css) --- */

  /* Cores */

  /* Tipografia */

  /* Card (2743:88) — 1349,333 x 215,191 em x 285 / y 124 do frame 1920x464.
     Sobra 285,667 à direita: o card é uma caixa centrada, não uma coluna
     ancorada. 464 − 339,191 = 124,809 de respiro embaixo. */
  --sentido-ws-card-w:       1349.333px;
  --sentido-ws-card-h:       215.191px;
  --sentido-ws-card-bg:      #e9e9e9;
  --sentido-ws-radius:       16px;
  --sentido-ws-rule:         5px;        /* border-top laranja, medida em 124..128 no screenshot */
  --sentido-ws-pad-top:      41.191px;   /* 46,191 do topo do card menos a régua de 5 */
  --sentido-ws-pad-right:    107.663px;  /* 1349,333 − (889,667 + 352) */
  --sentido-ws-pad-bottom:   37.23px;    /* 215,191 − 5 − 41,191 − 131,77 (régua + topo + conteúdo) */
  --sentido-ws-pad-left:     79.667px;

  /* Sombra do card: a declarada no dump (0 8px 4.75px rgba(0,0,0,.13)) sozinha
     rende ~3x mais clara que o PNG de referência. Ajuste das duas sombras aos
     perfis medidos nos quatro lados (rmse 0,016 em alfa): a de baixo/direita
     alcança ~24px e some; à esquerda e no topo não há sombra. */
  --sentido-ws-card-shadow:  0 8px 4.75px rgba(0, 0, 0, 0.13),
                             11px 12px 13px rgba(0, 0, 0, 0.34);

  /* Botão (2743:91 + 2743:92) — 352 x 59 em x 889,667 / y 75,191 do card.
     As três sombras do dump batem com o render medido (alfa 0,167 a 1px
     abaixo, zerando ~18px depois), então vão como estão. */
  --sentido-ws-cta-w:        352px;
  --sentido-ws-cta-h:        59px;
  --sentido-ws-cta-radius:   11px;
  --sentido-ws-cta-top:      29px;       /* 75,191 − 46,191: o botão desce 29 do topo do conteúdo */
  --sentido-ws-cta-shadow:   0 4px 2px rgba(0, 0, 0, 0.08),
                             0 10px 15px -3px rgba(0, 0, 0, 0.1),
                             0 4px 6px -4px rgba(0, 0, 0, 0.1);

  /* Arte de linhas (2743:64) — 2209,828 x 1380,859 em x −133,337 / y −659,04
     do frame, ou seja 115,0952cqi de largura na faixa de 1920.
     A posição é fração da PRÓPRIA arte, não da faixa: assim a escala é um
     número só e a moldura acompanha sozinha. */
  --sentido-ws-lines-x:      -0.060338;  /* −133,337 / 2209,828 */
  --sentido-ws-lines-y:      -0.299589;  /* −662,04 / 2209,828 (a máscara começa 3px abaixo do topo) */
  --sentido-ws-lines-clip:   3px;        /* máscara do Figma em y 3 — medido: sem linha em y 0..2 */
  /* Piso de escala: a arte só cobre a base da faixa enquanto
     0,325298 × largura ≥ altura. Abaixo disso a borda de baixo da arte
     aparece como um corte diagonal na faixa — daí o max(). */
  --sentido-ws-lines-w:      max(115.0952cqi, 307.5cqb);
  /* --- 12/13 · CONTINUE EXPLORANDO O ECOSSISTEMA — sec-continue 2717:914  (1-continue.css) --- */

  /* Cores */
  --color-amber:       #ffa626;   /* anel de foco — não está no Figma */

  /* Tipografia */

  /* Fundo da seção: degradê vertical que cobre o frame inteiro
     (medido no screenshot de referência — linear e sem parada
     intermediária: y=400 bate com a interpolação exata). */
  --continue-workshops-bg-top:    #f6f5f6;
  --continue-workshops-bg-bottom: #e0e1ef;

  /* Card Formação: o degradê OPACO do contêiner 2727:520.
     rgb(57,85,149) → rgb(22,18,56), paradas 1.85% e 53.48%. */
  --continue-workshops-esp-from: #395595;
  --continue-workshops-esp-to:   #161238;

  /* Continue — medidas retiradas do frame do Figma (2717:914)
     seção: 51px no topo, 63px na base (as duas sobras do frame de 798)
     título num contêiner de 1080 com recuo de 32 → conteúdo de 1016
     fileira de cards de 480px com raio 18, alinhada a esse 1016
     larguras: 682 aberto / 314 fechado — usadas como razão de flex-grow */
  --continue-workshops-container:   1080px;
  --continue-workshops-gutter:      32px;
  --continue-workshops-cards:       1016px;
  --continue-workshops-card-gap:    3px;
  --continue-workshops-card-height: 480px;
  --continue-workshops-radius:      18px;
  --continue-workshops-pad:         34px;
  --continue-workshops-grow-open:   682;
  --continue-workshops-grow-closed: 314;

  /* Mesmo easing/duração da sanfona irmã das páginas PPFL */
  --continue-workshops-dur:  450ms;
  --continue-workshops-ease: cubic-bezier(.4, 0, .2, 1);
  /* --- 13/13 · ASIDE DE INSCRIÇÃO — Aside 2750:105  (4-aside.css) --- */

  /* Cores */

  /* Tipografia */
  --font-weight-light:     300;

  /* Aside — medidas dos dois estados
     fechado ... 291 × 46, raio 18, só o cabeçalho laranja
     aberto .... 291 × 418, raio 19, borda #e3e5ee, cabeçalho de 44
     o cabeçalho tem 44 nos dois: fechado, a borda laranja fecha os 46 */
  --aside-ws-width:        291px;
  --aside-ws-head-height:   44px;
  --aside-ws-inset:         24px;   /* respiro até a borda da janela */
  --aside-ws-radius:        18px;   /* fechado */
  --aside-ws-radius-open:   19px;   /* aberto (contêiner com borda) */
  --aside-ws-z:               30;   /* acima do menu de âncoras (20) */
}


/* ============================================================ */
/* GLOBAL                                                      */
/* ============================================================ */
.workshop-detalhes-page {
  font-family: var(--font-primary);
  margin: 0;
  padding: 0;
  background-color: var(--color-page-bg);
}


/* ============================================================ */
/* 1/13 — HERO — Section 2717:4                                */
/* origem: sections/1-hero.css                                 */
/* ============================================================ */
/* ============================================================ */
/* SECTION: HERO WORKSHOPS DETALHES                            */
/* ============================================================ */
.hero-workshop {
  position: relative;
  overflow: hidden;
  min-height: var(--hero-workshop-height);
  background-color: var(--color-white);   /* o Figma tem #f2f2f2 sob uma camada branca opaca — só o branco aparece */
}


/* --- Camadas de fundo ---
   Ordem do Figma: branco → foto a 23% ancorada embaixo → véu branco
   de cima para baixo. */
.hero-workshop__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hero-workshop__bg-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0.23;
}

/* A foto é 1024×632 (1.62:1) e a seção 2.686:1: `cover` amplia 1.875×
   (→ 1920×1185) e mostra 715px da parte de BAIXO. O dump diz `object-bottom`,
   mas a camada recuperada do render do Figma (invertendo branco → 23% → véu)
   casa melhor 14px acima do fundo: correlação 0.70 em 97% contra 0.48 em 100%.
   A mesma inversão mostra croma 0 (a foto tem 16.5) e brilho/contraste iguais
   aos da foto — o Figma só dessatura. */
.hero-workshop__bg-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 97%;
  filter: grayscale(1);
}

.hero-workshop__bg-veil {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 3.007%,
    var(--color-white)     100%
  );
}


/* ============================================================ */
/* HERO: GRADE                                                 */
/* ============================================================ */
.hero-workshop__container {
  position: relative;
  z-index: 2;
  max-width: var(--hero-workshop-container);
  margin: 0 auto;
  padding: var(--hero-workshop-gutter-top) 32px 80px;   /* 32px é o recuo do Heading dentro do Container (x=32 → 429) */
}

.hero-workshop__grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;   /* mínimo; a 1920 o space-between abre os 84px do Figma (1209 → 1293) */
}

.hero-workshop__intro {
  flex: 1 1 auto;
  max-width: var(--hero-workshop-intro-width);
}


/* --- Tags: tipo · modalidade/local · setor --- */
.hero-workshop__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;   /* 429→537 | 552→735 | 750→833: 15px entre as tags */
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-workshop__tags {
  gap: 11px;
  align-items: center;
}

.hero-workshop__tag {
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.6875rem;                    /* 11px (base calendário) */
  font-weight: var(--font-weight-bold);
  line-height: 15px;
  text-transform: uppercase;
  white-space: nowrap;
  border: 0;
  box-sizing: border-box;
}

.hero-workshop__tag--tipo {
  background-color: var(--tag-tipo-bg, rgba(22, 145, 148, 0.3));
  color: var(--tag-tipo-text, #169194);
  padding-left: 16px;
  padding-right: 16px;
}

.hero-workshop__tag--modalidade {
  background-color: var(--tag-local-bg, rgba(26, 43, 72, 0.9));
  color: var(--color-white);
  font-size: 0.625rem;                     /* 10px */
  letter-spacing: 1px;
  padding: 2px 12px;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.hero-workshop__tag--setor {
  background-color: var(--tag-setor-bg, rgba(255, 128, 1, 0.3));
  color: var(--tag-setor-text, #ff8001);
  font-size: 0.625rem;                     /* 10px */
}

.hero-workshop__tag--novo {
  background-color: var(--tag-novo-bg, rgba(203, 108, 230, 0.3));
  color: var(--tag-novo-text, #cb6ce6);
  padding-left: 16px;
  padding-right: 16px;
}


/* --- Título, subtítulo, régua e CTAs --- */
.hero-workshop__title {
  max-width: var(--hero-workshop-intro-width);   /* 780px: "prática" não cabe na 1ª linha (728px) e cai para a 2ª */
  margin: 23px 0 0;                       /* tags terminam em y=157, H1 começa em 179.98 */
  font-size: 3.6rem;                      /* 57.6px */
  font-weight: var(--font-weight-black);
  line-height: 63.36px;
  letter-spacing: -0.576px;
  color: var(--color-navy-deep);
}

.hero-workshop__subtitle {
  max-width: 503px;                       /* caixa do Figma: a 1ª linha mede 480px e "desperdícios" cai para a 2ª */
  margin: 12.5px 0 0;                     /* H1 termina em 306.7, subtítulo começa em 319.19 */
  font-size: 1.081rem;                    /* 17.3px */
  font-weight: var(--font-weight-regular);
  line-height: 27.65px;
  color: var(--color-navy-deep);
}

.hero-workshop__rule {
  display: block;
  width: 96px;
  height: 4px;
  margin: 28.5px 0 0;                     /* subtítulo termina em 374.49, régua em y=403 */
  background-color: var(--color-orange);
}

.hero-workshop__actions {
  margin: 34px 0 0 -7px;                  /* régua termina em 407, botões em 441.09; o Container dos botões está em x=25, 7px à esquerda do texto (x=32) — ver README */
  gap: 14px;                              /* 244 + 14 = 258, o x do 2º botão */
}

.hero-workshop__btn {
  display: inline-flex;
  align-items: center;
  padding: 14px 26px 16px;                /* 52.33px de altura no Figma (a caixa do texto lá é 23px, não 22.32) */
  border-radius: 10px;
  font-size: 0.9rem;                      /* 14.4px */
  font-weight: var(--font-weight-bold);
  line-height: 22.32px;
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.hero-workshop__btn--primary {
  color: var(--color-white);
  background-color: var(--color-orange);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.61);
}

.hero-workshop__btn--primary:hover {
  color: var(--color-white);
  background-color: var(--color-orange-dark);
}

.hero-workshop__btn--outline {
  padding: 13px 65px 15px;                /* borda de 1px por fora do padding: 13+22.32+15+2 = 52.32 · 65+114+65+2 = 246 */
  border: 1px solid var(--color-navy-deep);
  color: var(--color-navy-deep);
}

.hero-workshop__btn--outline:hover {
  color: var(--color-navy-deep);
  background-color: rgba(41, 35, 92, 0.06);
}


/* ============================================================ */
/* HERO: CARTÃO DE RESUMO TÉCNICO                              */
/* ============================================================ */
.hero-workshop__resumo {
  flex: 0 0 var(--hero-workshop-aside-width);
  box-sizing: border-box;
  width: var(--hero-workshop-aside-width);
  margin: var(--hero-workshop-aside-offset) calc(-1 * var(--hero-workshop-aside-bleed)) 0 0;
  padding: 12px 27px 22px;                /* 5px de borda + 12 = "Resumo técnico" a 17px do topo; 22 fecha os 388px */
  border-top: 5px solid var(--color-orange);
  border-radius: 18px;
  background-color: var(--color-white);
  box-shadow: 3px 5px 6.45px rgba(0, 0, 0, 0.25);
}

.hero-workshop__resumo-title {
  margin: 0 0 18px;
  font-size: 0.7rem;                      /* 11.2px */
  font-weight: var(--font-weight-bold);
  line-height: 17.36px;
  text-transform: uppercase;
  color: var(--color-navy-soft);
}

.hero-workshop__specs {
  margin: 0;
  padding: 0;
}

.hero-workshop__spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;                        /* 12 + 21.82 + 12 + 1px de borda = 46.82, o passo das linhas (277 · 324 · 371 · 418) */
  border-bottom: 1px dashed var(--color-border-soft);
}

.hero-workshop__spec dt {
  font-size: 0.881rem;                    /* 14.1px */
  font-weight: var(--font-weight-regular);
  line-height: 21.82px;
  color: var(--color-navy-soft);
}

.hero-workshop__spec dd {
  margin: 0;
  font-size: 0.881rem;                    /* 14.1px */
  font-weight: var(--font-weight-bold);
  line-height: 21.82px;
  text-align: right;
  color: var(--color-navy-deep);
}

.hero-workshop__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 13.4px;                     /* 4ª linha termina em 239.61, CTA em 253 */
  padding: 13px 26px 15px;                /* 50.33px no Figma */
  border-radius: 10px;
  background-color: var(--color-orange);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.65);
  font-size: 0.9rem;                      /* 14.4px */
  font-weight: var(--font-weight-bold);
  line-height: 22.32px;
  color: var(--color-white);
  text-decoration: none;
  transition: background-color 0.2s;
}

.hero-workshop__cta:hover {
  color: var(--color-white);
  background-color: var(--color-orange-dark);
}

.hero-workshop__share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 13.67px;                    /* CTA termina em 303.33, botão em 317 */
  padding: 12px 34px 12px 12px;           /* 13px do Figma menos a borda; à direita, +22px reproduzem o espaçador vazio de 14px (2750:104) e seu gap — ver README */
  border: 1px solid var(--color-border-soft);
  border-radius: 10px;
  background-color: var(--color-white);
  font-family: inherit;
  font-size: 0.863rem;                    /* 13.8px */
  font-weight: var(--font-weight-bold);
  line-height: normal;
  color: var(--color-navy-deep);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.hero-workshop__share:hover {
  border-color: var(--color-navy-soft);
  background-color: rgba(41, 35, 92, 0.04);
}

.hero-workshop__share img {
  width: 24px;
  height: 23px;
}


/* ============================================================ */
/* RESPONSIVO                                                  */
/* ============================================================ */
@media (max-width: 1247.98px) {
  .workshop-detalhes-page {
    --hero-workshop-aside-bleed: 0px;     /* abaixo de 1248 o cartão não cabe fora do container: volta para dentro */
  }

  .hero-workshop__title {
    font-size: 3.1rem;                    /* 49.6px */
    line-height: 1.1;
  }
}

@media (max-width: 991.98px) {
  .workshop-detalhes-page {
    --hero-workshop-gutter-top:   80px;
    --hero-workshop-aside-offset: 0px;
  }

  .hero-workshop {
    min-height: 0;
  }

  .hero-workshop__container {
    padding: var(--hero-workshop-gutter-top) 24px 72px;
  }

  .hero-workshop__grid {
    flex-direction: column;
    gap: 40px;
  }

  .hero-workshop__intro {
    max-width: 100%;
  }

  .hero-workshop__resumo {
    flex: 1 1 auto;
    width: 100%;
    max-width: 420px;
  }

  .hero-workshop__title {
    font-size: 2.6rem;
  }
}

@media (max-width: 767.98px) {
  .workshop-detalhes-page {
    --hero-workshop-gutter-top: 64px;
  }

  .hero-workshop__title {
    font-size: 2.1rem;
  }

  .hero-workshop__subtitle {
    font-size: 1rem;
    line-height: 1.6;
  }

  .hero-workshop__rule {
    margin-top: 24px;
  }

  .hero-workshop__actions {
    margin-left: 0;
  }

  .hero-workshop__actions .hero-workshop__btn {
    flex: 1 1 100%;
    justify-content: center;
    padding-left: 26px;
    padding-right: 26px;
  }
}

@media (max-width: 575.98px) {
  .hero-workshop__container {
    padding: 56px 16px;
  }

  .hero-workshop__title {
    font-size: 1.75rem;
  }

  .hero-workshop__tag--tipo {
    width: auto;
    padding: 0 7px;
  }

  .hero-workshop__resumo {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
}


/* ============================================================ */
/* 2/13 — MENU DE ÂNCORAS — menu-serviços                      */
/* origem: sections/1-menu.css                                 */
/* ============================================================ */
/* ============================================================ */
/* SECTION: MENU DE ÂNCORAS                                    */
/* ============================================================ */
/* A faixa acompanha a página. O `z-index` fica acima de tudo que as
   seções vierem a usar internamente — nas páginas PPFL o maior é 3
   (abas), e o aside fixo delas usa 30, acima da faixa. As seções são
   `position: relative` sem z-index próprio, ou seja, não criam contexto
   de empilhamento: sem isto os filhos posicionados delas disputariam a
   pintura com a faixa em ordem de DOM. */
.menu-workshops {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: var(--menu-workshops-height);
  background-color: var(--menu-workshops-bg);
  font-family: var(--font-primary);
}

/* Sombra só quando a faixa está de fato colada no topo, passando por
   cima do conteúdo — parada no lugar dela, o design não tem sombra.
   Não está no Figma: acabamento da conversão, herdado do irmão PPFL. */
.menu-workshops.is-stuck {
  box-shadow: 0 2px 10px rgba(41, 35, 92, 0.12);
}

/* O `inner` só centraliza e permite rolagem lateral; quem dita a largura
   (e portanto a extensão do traço cinza) é a própria lista — 843px no
   Figma. `safe center` mantém o início da lista alcançável quando ela
   não cabe: com `center` puro o overflow à esquerda fica inacessível. */
.menu-workshops__inner {
  display: flex;
  justify-content: center;
  justify-content: safe center;
  padding: var(--menu-workshops-text-top) 24px 24px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.menu-workshops__inner::-webkit-scrollbar {
  display: none;
}

/* O traço cinza do Figma é o `border-bottom` desta lista */
.menu-workshops__list {
  display: flex;
  align-items: flex-start;
  margin: 0;
  padding: 0 0 var(--menu-workshops-rule-gap);
  border-bottom: 1px solid var(--color-rule);
  white-space: nowrap;
}

.menu-workshops__item {
  display: flex;
  align-items: flex-start;
}

/* Separadores "|": conteúdo gerado, para que o texto do link continue
   sendo só o rótulo da seção. Sempre Regular: no Figma o primeiro "|"
   sai em Bold porque a seleção do negrito avançou sobre ele — artefato
   do texto único, não intenção (o separador não muda com o item ativo). */
.menu-workshops__item:not(:last-child)::after {
  content: "|";
  padding: 0 var(--menu-workshops-sep-gap);
  font-size: 1rem;
  font-weight: var(--font-weight-regular);
  line-height: var(--menu-workshops-line-height);
  color: var(--color-navy-deep);
}

.menu-workshops__link {
  position: relative;
  display: block;
  font-size: 1rem;                       /* 16px */
  font-weight: var(--font-weight-regular);
  line-height: var(--menu-workshops-line-height);
  color: var(--color-navy-deep);
  text-decoration: none;
  transition: color 0.2s;
}

.menu-workshops__link:hover,
.menu-workshops__link:focus-visible {
  color: var(--color-navy);
}

.menu-workshops__link.is-active {
  font-weight: var(--font-weight-bold);
  color: var(--color-navy);
}

/* Indicador do item ativo — 103 × 3 de x 540 a 642 no Figma, contra a
   tinta do texto de 541 a 643: a barra começa 1px antes da tinta e acaba
   1px antes dela. A caixa do link já começa ~1px antes do "P" (bearing
   esquerdo do glifo) e acaba ~1px depois do "?", então `left: 0` e
   `right: 1px` reproduzem os 540 → 642 medidos. Sobrepõe o traço cinza,
   como no design. */
.menu-workshops__link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 1px;
  bottom: calc(var(--menu-workshops-bar-drop) * -1);
  height: 3px;
  background-color: var(--color-navy);
}


/* ============================================================ */
/* PÁGINA — o que a faixa fixa impõe ao resto do documento     */
/* ============================================================ */
/* Irmãs do menu = as seções da página. Sem isto, o clique numa âncora
   para com o topo da seção escondido atrás da faixa. Vale para filhas
   diretas do <body>: se a página aninhar as seções num wrapper, esta
   regra deixa de alcançá-las. */
.menu-workshops ~ [id] {
  scroll-margin-top: var(--menu-workshops-height);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}


/* ============================================================ */
/* RESPONSIVO                                                  */
/* ============================================================ */
/* A lista não quebra em várias linhas (sobraria um "|" solto no fim de
   cada linha e o indicador perderia a referência): abaixo do ponto em
   que ela deixa de caber, o menu rola lateralmente. */
@media (max-width: 991.98px) {
  .workshop-detalhes-page {
    --menu-workshops-sep-gap: 7px;
  }
}

@media (max-width: 767.98px) {
  .menu-workshops__inner {
    padding-inline: 16px;
  }

  .menu-workshops__link,
  .menu-workshops__item:not(:last-child)::after {
    font-size: 0.9375rem;                /* 15px */
  }
}


/* ============================================================ */
/* 3/13 — ASSISTA AO VÍDEO — Frame 334 2771:16                 */
/* origem: sections/1-video.css                                */
/* ============================================================ */
/* ============================================================ */
/* SECTION: VÍDEO                                              */
/* ============================================================ */
.ws-video {
  position: relative;
  overflow: hidden;                /* o frame do Figma recorta os círculos */
  container-type: inline-size;     /* referência dos `cqi` dos círculos: 100cqi = largura
                                      da seção (sem a barra de rolagem, ao contrário de vw).
                                      O padding lateral fica no __container de propósito —
                                      cqi mede a caixa de CONTEÚDO, e padding aqui encolheria
                                      a lona. */
  padding: var(--wsv-pad-top) 0 var(--wsv-pad-bottom);
  font-family: var(--font-primary);
  color: var(--wsv-color-navy);
}

/* --- Círculos de fundo ---------------------------------------
   Os três vetores do Figma são círculos perfeitos (path de 4 béziers com
   kappa 0,5523), então `border-radius: 50%` reproduz o asset sem SVG.
   Medidas em cqi = valor no frame de 1920 ÷ 19,2: em ≥ 1920 sai idêntico ao
   Figma; abaixo, a composição escala junto com a seção. A ordem no DOM é a
   do Figma — o lavanda (--c) é o último e fica por cima dos dois teal. */
.ws-video__blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* 2771:2  — Ø 618,70 · centro (172, 154) */
.ws-video__blob--a {
  width: 32.224cqi;
  height: 32.224cqi;
  left: -7.152cqi;
  top: -8.089cqi;
  background: var(--wsv-color-blob-teal);
}

/* 2771:32 — Ø 569,88 · centro (1741,5 · 712,5) */
.ws-video__blob--b {
  width: 29.681cqi;
  height: 29.681cqi;
  left: 75.864cqi;
  top: 22.271cqi;
  background: var(--wsv-color-blob-teal);
}

/* 2771:3  — Ø 1299,68 · centro (960, 480) */
.ws-video__blob--c {
  width: 67.692cqi;
  height: 67.692cqi;
  left: 16.159cqi;
  top: -8.860cqi;
  background: var(--wsv-color-blob-lavanda);
}

/* --- Coluna de conteúdo --------------------------------------- */
.ws-video__container {
  position: relative;
  z-index: 1;                      /* acima dos círculos */
  box-sizing: border-box;
  max-width: calc(var(--wsv-player-width) + 2 * var(--wsv-pad-x));
  margin: 0 auto;
  padding: 0 var(--wsv-pad-x);
}

.ws-video__title {
  max-width: var(--wsv-title-width);
  margin: 0 auto;
  font-size: var(--wsv-title-size);
  font-weight: 900;
  line-height: var(--wsv-title-lh);
  text-align: center;
  color: var(--wsv-color-navy);
}

/* Régua 96 x 4 (2771:52), centrada */
.ws-video__rule {
  display: block;
  width: 96px;
  height: 4px;
  margin: var(--wsv-gap-title-rule) auto var(--wsv-gap-rule-player);
  background: var(--wsv-color-accent);
}

/* --- Player (Group 529) --------------------------------------
   Moldura 759 x 469 com a tela 701 x 425 dentro (insets 29 / 22). Todas as
   medidas internas são % da largura para a proporção sobreviver abaixo de
   759px sem media query. */
.ws-video__player {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--wsv-player-width);
  margin: 0 auto;
  aspect-ratio: 759 / 469;
  padding: 2.8986% 3.8208%;                 /* 22px / 29px de 759 */
  border-radius: 6.1538% / 7.6190%;         /* canto elíptico do path: rx 46,7 · ry 35,7 */
  background: var(--wsv-color-navy);
  box-shadow: var(--wsv-player-shadow);
}

.ws-video__screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;                         /* recorta o <iframe> e o foco nos cantos */
  border-radius: 5% / 6.3158%;              /* rx 35,05 de 701 · ry 26,84 de 425 */
  background: var(--wsv-screen-gradient);
}

/* O link cobre a tela toda: alvo grande, e o disco fica centrado nela.
   No Figma o disco está 4px à esquerda e 12px acima do centro da tela —
   lido como imprecisão de desenho; para reverter, `translate(-4px, -12px)`
   no disco. */
.ws-video__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  cursor: pointer;
  text-decoration: none;
}

.ws-video__play:focus-visible {
  outline: 3px solid var(--wsv-color-accent);
  outline-offset: -3px;
}

/* Disco Ø 125 de 701 (2771:6) */
.ws-video__play-disc {
  position: relative;
  width: 17.8317%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--wsv-color-disc);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

/* Triângulo 46 x 56 (2771:35) em (43, 34) dentro do disco de 125 —
   3,5px à direita do centro, o ajuste óptico padrão de um play */
.ws-video__play-icon {
  position: absolute;
  left: 34.4%;
  top: 27.2%;
  width: 36.8%;
  height: 44.8%;
}

/* Hover — não está no Figma, acabamento da conversão */
.ws-video__play:hover .ws-video__play-disc {
  transform: scale(1.06);
  background: var(--wsv-color-disc-hover);
}

/* --- Estado "tocando" (posto pelo 1-video.js no site publicado) --------
   O <iframe> entra 16:9 centrado na tela; a tela é 701:425 (1,65:1), então
   sobra uma faixa do gradiente em cima e embaixo em vez das barras pretas
   do YouTube. */
.ws-video__iframe {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  aspect-ratio: 16 / 9;
  transform: translateY(-50%);
  border: 0;
}

[data-ws-video-playing] .ws-video__play {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .ws-video__play-disc {
    transition-duration: 1ms;
  }
}


/* ============================================================ */
/* RESPONSIVO                                                  */
/* ============================================================ */
@media (max-width: 991.98px) {
  .ws-video {
    --wsv-title-size: 1.875rem;             /* 30px */
    --wsv-title-lh: 39.27px;                /* mesma razão 1,309 do desktop */
    --wsv-pad-top: 64px;
    --wsv-pad-bottom: 56px;
  }
}

@media (max-width: 767.98px) {
  .ws-video {
    --wsv-title-size: 1.75rem;              /* 28px */
    --wsv-title-lh: 36.65px;
    --wsv-gap-title-rule: 24px;
    --wsv-gap-rule-player: 40px;
    --wsv-pad-top: 56px;
    --wsv-pad-bottom: 48px;
  }

  /* No Figma este círculo é o do canto inferior direito; com a seção mais
     alta que larga, ancorar na base mantém essa leitura. */
  .ws-video__blob--b {
    top: auto;
    bottom: -12cqi;
  }
}

@media (max-width: 575.98px) {
  .ws-video {
    --wsv-title-size: 1.5rem;               /* 24px */
    --wsv-title-lh: 31.41px;
    --wsv-gap-title-rule: 20px;
    --wsv-gap-rule-player: 32px;
    --wsv-pad-top: 48px;
    --wsv-pad-bottom: 40px;
    --wsv-pad-x: 16px;
  }
}


/* ============================================================ */
/* 4/13 — POR QUE ESTE WORKSHOP — Section 2717:806             */
/* origem: sections/1-por-que.css                              */
/* ============================================================ */
/* ============================================================ */
/* SECTION: POR QUE ESTE WORKSHOP                              */
/* ============================================================ */
.porque-ws {
  background-color: var(--color-page-bg);
  padding-top: 95px;                     /* topo da caixa de linha do título */
  padding-bottom: 114px;                 /* 1042 - 928 (base do card) */
}

/* 1600 de card + calhas laterais; acima de 1648px as margens viram os
   160px do Figma sozinhas */
.porque-ws__container {
  max-width: calc(var(--porque-ws-card-max) + 2 * var(--porque-ws-gutter));
  margin: 0 auto;
  padding: 0 var(--porque-ws-gutter);
}

/* --- Cabeçalho --- */
.porque-ws__header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* No Figma o título mora num frame 8px à direita do centro (520 de recuo
   à esquerda, 504 à direita) enquanto a régua é centrada — deslocamento
   sem intenção de design; aqui os dois são centrados. */
.porque-ws__title {
  max-width: 844px;
  margin: 0;
  font-size: 2.4rem;                     /* 38.4px */
  line-height: 48px;
  font-weight: var(--font-weight-black);
  color: var(--color-navy-deep);
  text-align: center;
}

.porque-ws__rule {
  display: block;
  width: 96px;
  height: 4px;
  margin-top: 35px;                      /* 178 - 143 (base da caixa do título) */
  background-color: var(--color-accent);
}

/* --- Card --- */
/* fr na proporção exata do Figma: 803/795 com calha de 2 fecha em 1600 */
.porque-ws__card {
  display: grid;
  grid-template-columns: 803fr 795fr;
  gap: var(--porque-ws-col-gap);
  margin-top: 73px;                      /* 255 - 182 (base da régua) */
  background-color: var(--color-white);
  border-radius: var(--porque-ws-radius);
  box-shadow: var(--porque-ws-shadow);
  overflow: hidden;                      /* recorta os anéis nos cantos */
}

.porque-ws__col {
  position: relative;
  min-width: 0;
}

/* --- Coluna esquerda: contexto --- */
.porque-ws__col--contexto {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 63px 60px 104px;              /* 63.095 / 103.58 no Figma */
}

.porque-ws__lead {
  margin: 0;
  font-size: 1.375rem;                   /* 22px */
  line-height: 28px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-navy-deep);
}

.porque-ws__destaque {
  margin: 0;
  padding: 24px;
  background-color: var(--color-surface-lilac);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 14px 14px 0;
  font-size: 1.0625rem;                  /* 17px */
  line-height: 29.75px;
  color: var(--color-text-muted);
}

.porque-ws__texto {
  margin: 0;
  font-size: 1.125rem;                   /* 18px */
  line-height: 31.5px;
  color: var(--color-text-muted);
}

.porque-ws__texto strong {
  font-weight: var(--font-weight-bold);
}

/* --- Anéis decorativos (position absolute — composição visual) ---
   A borda CSS é sempre interna, igual ao traço interno do Figma: caixa
   de 440 com borda de 50 dá exatamente r=220 fora e r=170 dentro. */
.porque-ws__anel {
  position: absolute;
  z-index: 0;
  width: var(--porque-ws-anel);
  height: var(--porque-ws-anel);
  border: var(--porque-ws-anel-borda) solid transparent;
  border-radius: 50%;
  pointer-events: none;
}

.porque-ws__anel--claro {
  left: -192px;
  top: 478px;
  border-color: rgba(57, 65, 149, 0.04);
}

.porque-ws__anel--escuro {
  right: -130px;
  top: -120px;
  border-color: rgba(255, 255, 255, 0.05);
}

/* --- Coluna direita: "Este workshop" --- */
.porque-ws__col--workshop {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  padding: 60px 56px;
  background: var(--porque-ws-gradient);
  color: var(--color-white);
  overflow: hidden;
}

/* conteúdo acima do anel */
.porque-ws__selo,
.porque-ws__subtitle,
.porque-ws__lista {
  position: relative;
  z-index: 1;
}

.porque-ws__selo {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 100px;
  background-color: rgba(255, 255, 255, 0.15);
  font-size: 0.71875rem;                 /* 11.5px */
  line-height: 13px;                     /* 27px de selo no Figma */
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.69px;
  text-transform: uppercase;
  color: var(--color-white);
}

.porque-ws__subtitle {
  width: 100%;
  margin: 0;
  font-size: 1.4375rem;                  /* 23px */
  line-height: 31px;
  font-weight: var(--font-weight-extrabold);
  color: var(--color-white);
}

.porque-ws__lista {
  width: 100%;
  margin: 0;
  padding: 6px 0 0;
  list-style: none;
}

/* Cada ponto: selo redondo + texto; o fio vertical liga um selo ao
   seguinte atravessando os 26px de respiro entre os itens. */
.porque-ws__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: var(--porque-ws-item-gap);
}

.porque-ws__item:last-child {
  padding-bottom: 0;
}

.porque-ws__item::before {
  content: '';
  position: absolute;
  left: calc(var(--porque-ws-icone) / 2 - 1px);   /* x=16 no Figma */
  top: var(--porque-ws-icone);
  bottom: 0;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.2);
}

.porque-ws__item:last-child::before {
  display: none;
}

.porque-ws__icone {
  display: flex;
  flex: 0 0 var(--porque-ws-icone);
  align-items: center;
  justify-content: center;
  width: var(--porque-ws-icone);
  height: var(--porque-ws-icone);
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.15);
}

.porque-ws__icone img {
  display: block;
  width: var(--porque-ws-icone-glifo);
  height: var(--porque-ws-icone-glifo);
}

/* pt 6 + 23 de linha < 34: o min-height mantém o item de uma linha na
   altura do selo (60 com o respiro); o de duas linhas fecha em 77 */
.porque-ws__item-texto {
  margin: 0;
  padding-top: 6px;
  min-height: var(--porque-ws-icone);
  font-size: 0.90625rem;                 /* 14.5px */
  line-height: 22.48px;
  color: var(--color-lavender);
}


/* ============================================================ */
/* RESPONSIVO                                                  */
/* ============================================================ */
@media (max-width: 1247.98px) {
  .porque-ws__col--contexto {
    padding: 52px 44px 72px;
  }

  .porque-ws__col--workshop {
    padding: 52px 44px;
  }
}

@media (max-width: 991.98px) {
  .porque-ws {
    padding-top: 72px;
    padding-bottom: 88px;
  }

  .porque-ws__title {
    font-size: 2rem;                     /* 32px */
    line-height: 40px;
  }

  .porque-ws__rule {
    margin-top: 24px;
  }

  .porque-ws__card {
    grid-template-columns: 1fr;
    margin-top: 56px;
    border-radius: 24px;
  }

  .porque-ws__col--contexto {
    padding-bottom: 56px;
  }

  /* com as colunas empilhadas o anel claro sairia sobre o texto */
  .porque-ws__anel--claro {
    top: auto;
    bottom: -300px;
  }
}

@media (max-width: 767.98px) {
  .porque-ws__col--contexto {
    gap: 20px;
    padding: 40px 28px 48px;
  }

  .porque-ws__col--workshop {
    padding: 40px 28px;
  }

  .porque-ws__lead {
    font-size: 1.25rem;                  /* 20px */
    line-height: 26px;
  }

  .porque-ws__destaque {
    padding: 20px;
    font-size: 1rem;
    line-height: 26px;
  }

  .porque-ws__texto {
    font-size: 1.0625rem;
    line-height: 28px;
  }

  .porque-ws__subtitle {
    font-size: 1.25rem;
    line-height: 28px;
  }

  .porque-ws__card {
    border-radius: 20px;
    box-shadow: 0 24px 56px rgba(41, 35, 92, 0.14);
  }
}

@media (max-width: 575.98px) {
  .porque-ws {
    padding-top: 56px;
    padding-bottom: 64px;
  }

  .porque-ws__container {
    padding: 0 16px;
  }

  .porque-ws__title {
    font-size: 1.75rem;                  /* 28px */
    line-height: 34px;
  }

  .porque-ws__card {
    margin-top: 40px;
  }

  .porque-ws__col--contexto,
  .porque-ws__col--workshop {
    padding-left: 20px;
    padding-right: 20px;
  }

  .porque-ws__item {
    gap: 12px;
  }
}


/* ============================================================ */
/* 5/13 — PÚBLICO-ALVO E VALOR GERADO — Frame 331 2723:2       */
/* origem: sections/2-publico-alvo.css                         */
/* ============================================================ */
/* ============================================================ */
/* SECTION: PÚBLICO-ALVO E VALOR GERADO                        */
/* ============================================================ */
/* A troca de abas muda a altura da seção em ~433px (312 → 745). Numa
   página curta — o preview isolado, por exemplo — isso faz a barra de
   rolagem aparecer no meio da animação: a área útil cai de 1920 para
   1905 e todo o conteúdo centrado escorrega 7,5px para a esquerda, o
   que se lê como um tranco lateral. Reservar a calha desde o começo
   mantém a largura constante. Na página montada não muda nada (a barra
   já existe o tempo todo); no preview, passa a renderizar como na
   página real — por isso a verificação em 1920 usa viewport de 1935.
   Onde `scrollbar-gutter` não é suportado (Safari < 18.2), o sistema
   usa barra sobreposta e o deslocamento não acontece. */
html {
  scrollbar-gutter: stable;
}

/* 79 é a posição do título no frame; 104 é o que sobra abaixo da caixa
   (806 − 702) — sobra do frame, não padding declarado */
.publico-ws {
  padding: 79px 24px 104px;
  font-family: var(--font-primary);
  background-color: var(--publico-ws-bg);
}

.publico-ws__container {
  box-sizing: border-box;
  max-width: var(--publico-ws-container);
  margin: 0 auto;
}


/* --- Cabeçalho: título e régua --- */
.publico-ws__header {
  text-align: center;
}

.publico-ws__title {
  margin: 0;
  font-size: 2.4rem;                     /* 38.4px */
  font-weight: var(--font-weight-black);
  line-height: 44.55px;
  color: var(--color-navy-deep);
}

/* Régua a 166 do topo: 166 − (79 + 44.55) = 42.45 */
.publico-ws__rule {
  display: block;
  width: 96px;
  height: 4px;
  margin: 42.45px auto 0;
  background-color: var(--color-accent);
}


/* --- Caixa branca: abas + painéis --- */
/* topo a 212 = régua (170) + 42; padding 16 / 67 / 47 fecha os 490 de
   altura do Figma: 16 + 50.19 (aba) + 62.81 + 312 (card) + 47 + 2 bordas */
.publico-ws__box {
  box-sizing: border-box;
  margin-top: 42px;
  padding: 16px var(--publico-ws-box-gutter) 47px;
  border: 1px solid var(--publico-ws-box-border);
  border-radius: 20px;
  background-color: var(--color-white);
}


/* --- Abas --- */
/* O render do Figma mede 491 / 464, mas o layout declara as duas abas
   como fill (flex 1 0 0) — adotado o segmento igual, 477 cada */
.publico-ws__tabs {
  display: flex;
  gap: 6px;
}

.publico-ws__tab {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 13px 14px 14.09px;            /* 13 + 24 + 14.09 = 51.09 (metadata) */
  border: 0;
  border-radius: 14px;
  background-color: transparent;
  font-family: inherit;
  font-size: 0.875rem;                   /* 14px */
  font-weight: var(--font-weight-bold);
  line-height: 24px;                     /* o dump diz 23.1; a caixa de texto do metadata mede 24 */
  text-align: center;
  white-space: nowrap;
  color: var(--publico-ws-tab-muted);
  cursor: pointer;
  transition: background-color var(--publico-ws-fade) var(--publico-ws-ease),
              color var(--publico-ws-fade) var(--publico-ws-ease);
}

.publico-ws__tab.is-active {
  background-color: var(--color-navy-deep);
  color: var(--color-white);
}

/* Escurecimento da aba inativa no hover — não está no Figma, é
   acabamento da conversão (no ponteiro fino o JS já troca a aba) */
.publico-ws__tab:not(.is-active):hover {
  color: var(--color-navy-deep);
}

.publico-ws__tab:focus-visible {
  outline: 2px solid var(--color-indigo);
  outline-offset: 2px;
}


/* --- Painéis: o ativo fica no fluxo e dá a altura; o que sai fica
   absoluto por cima enquanto some. Os dois têm alturas muito diferentes
   (312 contra 745) — empilhar na mesma célula de grid deixaria a aba 1
   com 433px de vazio. O JS anima a altura do contêiner entre os dois e
   liga `is-animating` só durante a transição (recorta o painel que sai). --- */
/* 61.91 = 130 (topo dos cards, do topo externo da caixa) − 17 − 51.09 (aba) */
.publico-ws__panels {
  position: relative;
  margin-top: 61.91px;
  transition: height var(--publico-ws-fade) var(--publico-ws-ease);
}

.publico-ws__panels.is-animating {
  overflow: hidden;
}

.publico-ws__panel {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--publico-ws-fade) var(--publico-ws-ease),
              visibility 0s linear var(--publico-ws-fade);
}

.publico-ws__panel.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* ============================================================ */
/* CARDS — crachás de perfil                                   */
/* ============================================================ */
.publico-ws__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--publico-ws-card-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Conteúdo alinhado ao topo; a altura mínima (312 no Figma) iguala os
   quatro crachás — no design a sobra de base varia com o texto.
   `overflow: hidden` recorta a faixa colorida nos cantos arredondados.
   padding-top 38: o círculo do ícone fica a 38 do topo interno (381 no
   frame); padding lateral 16 deixa 200 para o bloco de texto mais largo.
   padding-bottom 19: nos cards de 6 linhas o texto termina a ~634 e o card
   a 654 — o Figma declara pb 27/67 mas fixa a altura em 312 e o texto
   simplesmente invade esse recuo; 19 é o que fecha 312 sem estourar */
.publico-ws__card {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: var(--publico-ws-card-min-h);
  padding: 38px 16px 19px;
  overflow: hidden;
  border: 1px solid var(--publico-ws-card-border);
  border-radius: var(--publico-ws-radius);
  background-color: var(--color-white);
  box-shadow: 0 18px 40px -28px rgba(41, 35, 92, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover "crachá": levanta e inclina, como se fosse pego pelo furo do clipe.
   A inclinação alterna de lado a cada card (nth-child) para a fileira não
   ficar repetitiva. Não está no Figma: é o mesmo acabamento da seção
   "Para quem se destina" das páginas PPFL (.destina-ppfl__card). */
.publico-ws__card:hover {
  transform: translateY(-5px) rotate(-1deg);
  box-shadow: 0 22px 44px -26px rgba(41, 35, 92, 0.42);
}

.publico-ws__card:nth-child(even):hover {
  transform: translateY(-5px) rotate(1deg);
}

/* Faixa colorida do topo: 8px, na cor do perfil */
.publico-ws__strip {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: var(--publico-ws-strip-h);
  background-color: var(--publico-card-color);
}

/* "Furo" do crachá: 26 x 9, raio 6, a 14px do topo */
.publico-ws__slot {
  position: absolute;
  top: 14px;
  left: 50%;
  box-sizing: border-box;
  width: 26px;
  height: 9px;
  transform: translateX(-50%);
  border: 1px solid var(--publico-ws-slot-border);
  border-radius: 6px;
  background-color: var(--publico-ws-slot-bg);
}

.publico-ws__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 28px;
  background-color: var(--publico-card-color);
}

/* SVG de 26px, fixado em width+height para não crescer ao tamanho natural */
.publico-ws__icon img {
  display: block;
  width: 26px;
  height: 26px;
}

/* A largura vem do bloco de texto do Figma (194 / 198 / 199 / 188) — é
   ela que reproduz as quebras de linha do design.
   margin-top 20: bloco de texto a 114 do topo interno (110 + pt 4 do
   Figma) = 38 + 56 + 20; a caixa alta da 1ª linha cai em 460, como no
   frame (459–461 conforme o card) */
.publico-ws__text {
  max-width: var(--publico-text-width, 194px);
  margin: 20px auto 0;
  text-align: center;
}

.publico-ws__card-title {
  margin: 0;
  font-size: 0.9375rem;                  /* 15px */
  font-weight: var(--font-weight-bold);
  line-height: 21px;
  color: var(--color-navy-deep);
}

/* 9 de gap: no frame a distância entre a última linha do título e a
   primeira do texto é 30 (= 21 + 9) */
.publico-ws__card-text {
  margin: 9px 0 0;
  font-size: 0.9375rem;                  /* 15px */
  font-weight: var(--font-weight-regular);
  line-height: 21px;
  color: var(--color-navy-deep);
}


/* ============================================================ */
/* VARIANTES DE CARD                                           */
/* ============================================================ */
.publico-ws__card--manufatura {
  --publico-card-color:  var(--color-navy-deep);
  --publico-text-width:  194px;
}

.publico-ws__card--lideres {
  --publico-card-color:  var(--color-indigo);
  --publico-text-width:  198px;
}

.publico-ws__card--times {
  --publico-card-color:  var(--publico-ws-violet);
  --publico-text-width:  199px;
}

.publico-ws__card--empresas {
  --publico-card-color:  var(--color-teal);
  --publico-text-width:  188px;
}


/* ============================================================ */
/* ABA 2 — O QUE VOCÊ E SUA ORGANIZAÇÃO GANHAM? (2723:203)      */
/* ============================================================ */
/* Fileira de 960 = 3 × 308 + 2 × 18; linhas a 33 (325 − 11 − 281).
   O frame da aba 2 põe os cards a 121 do topo da caixa (9 acima dos 130
   da aba 1) — os dois painéis partem do mesmo topo para a troca não
   deslocar nada */
.publico-ws__ganhos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 33px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Card 308 × 281, raio 16, borda #e7e4f4 (a mesma da caixa), sombra
   0 4 9 a 9%. padding-top 52: o círculo do ícone fica a 53 do topo
   externo (metadata). Sem overflow hidden: a faixa cobre a borda do topo
   e tem os próprios cantos arredondados. padding-bottom 23: com 4 linhas
   de corpo (86.4) o conteúdo fecha em 280.4 e o min-height dá os 281 */
.publico-ws__ganho {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 281px;
  padding: 52px 24px 23px;
  border: 1px solid var(--publico-ws-box-border);
  border-radius: 16px;
  background-color: var(--color-white);
  box-shadow: 0 4px 9px rgba(0, 0, 0, 0.09);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover "crachá": levanta e inclina, como se fosse pego pelo furo do clipe.
   A inclinação alterna de lado a cada card (nth-child) para a fileira não
   ficar repetitiva. Não está no Figma: é o mesmo acabamento da seção
   "Para quem se destina" das páginas PPFL (.destina-ppfl__card). */
.publico-ws__ganho:hover {
  transform: translateY(-5px) rotate(-1deg);
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.11);
}

.publico-ws__ganho:nth-child(even):hover {
  transform: translateY(-5px) rotate(1deg);
}

/* Faixa de 10px que cobre a borda do topo (top −1 no Figma), entre as
   bordas laterais (x 1–307), com os cantos do card */
.publico-ws__ganho-strip {
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  height: 10px;
  border-radius: 16px 16px 0 0;
  background-color: var(--publico-card-color);
}

/* "Furo" do crachá: 26 x 9, raio 6, a 24 do topo externo */
.publico-ws__ganho-slot {
  position: absolute;
  top: 23px;
  left: 50%;
  box-sizing: border-box;
  width: 26px;
  height: 9px;
  transform: translateX(-50%);
  border: 1px solid var(--publico-ws-slot-border);
  border-radius: 6px;
  background-color: var(--publico-ws-slot-bg);
}

/* Círculo de 49 (dois cards do Figma medem 46 — ruído de import) */
.publico-ws__ganho-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 49px;
  height: 49px;
  border-radius: 50%;
  background-color: var(--publico-card-color);
}

.publico-ws__ganho-icon img {
  display: block;
  width: 23px;
  height: 23px;
}

/* Título a 114 do topo interno (52 + 49 + 13 = 115 do externo) e com
   duas linhas reservadas (48): no Figma o corpo fica sempre a 170 do
   topo, inclusive no card de título curto ("Aprendizado prático…") */
.publico-ws__ganho-title {
  width: 100%;
  min-height: 48px;
  margin: 13px 0 0;
  font-size: 0.9375rem;                  /* 15px */
  font-weight: var(--font-weight-bold);
  line-height: 24px;
  text-align: center;
  color: var(--color-navy-deep);
}

/* 7 = 169 (topo do corpo) − 114 − 48 */
.publico-ws__ganho-text {
  width: 100%;
  margin: 7px 0 0;
  font-size: 0.9375rem;                  /* 15px */
  font-weight: var(--font-weight-regular);
  line-height: 21.6px;
  text-align: center;
  color: var(--color-navy-deep);
}

.publico-ws__ganho--raizes   { --publico-card-color: var(--color-navy-deep); }
.publico-ws__ganho--enxergar { --publico-card-color: var(--color-indigo); }
.publico-ws__ganho--pratico  { --publico-card-color: var(--publico-ws-violet); }
.publico-ws__ganho--solucao  { --publico-card-color: var(--color-teal); }
.publico-ws__ganho--cultura  { --publico-card-color: var(--publico-ws-orange); }
.publico-ws__ganho--passos   { --publico-card-color: var(--publico-ws-magenta); }

/* Nota: 960 × 122.39 a 28 dos cards (744 − 716 no Figma); padding
   25.8 / 24 / 22.59 + 3 linhas de 23.8. O texto quebra sozinho nos 910
   úteis — as três linhas do Figma (843 / 889 / 852 de tinta) cabem e a
   palavra seguinte de cada uma não */
.publico-ws__nota {
  box-sizing: border-box;
  margin: 28px 0 0;
  padding: 25.8px 24px 22.59px;
  border: 1px solid var(--publico-ws-box-border);
  border-radius: 14px;
  background-color: var(--publico-ws-nota-bg);
  box-shadow: 0 4px 9px rgba(0, 0, 0, 0.05);
  font-size: 0.9375rem;                  /* 15px */
  font-weight: var(--font-weight-regular);
  line-height: 23.8px;
  color: var(--color-navy-deep);
}


/* ============================================================ */
/* RESPONSIVO                                                  */
/* ============================================================ */
@media (max-width: 1247.98px) {
  .workshop-detalhes-page {
    --publico-ws-box-gutter: 32px;
  }
}

/* Em duas colunas o card volta a medir pelo conteúdo (a altura mínima
   do Figma só faz sentido com os quatro lado a lado) */
@media (max-width: 991.98px) {
  .workshop-detalhes-page {
    --publico-ws-box-gutter: 24px;
    --publico-ws-card-gap:   16px;
  }

  .publico-ws__panels {
    margin-top: 40px;
  }

  .publico-ws__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .publico-ws__card {
    min-height: 0;
    padding-bottom: 32px;
  }

  .publico-ws__ganhos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .publico-ws__ganho {
    min-height: 0;
  }

  .publico-ws__ganho-title {
    min-height: 0;
  }
}

@media (max-width: 767.98px) {
  .publico-ws {
    padding: 56px 16px 72px;
  }

  .publico-ws__title {
    font-size: 2rem;
    line-height: 1.2;
  }

  .publico-ws__rule {
    margin-top: 28px;
  }

  .publico-ws__box {
    margin-top: 32px;
    padding: 16px 16px 32px;
  }

  .publico-ws__tab {
    white-space: normal;
  }

  .publico-ws__panels {
    margin-top: 32px;
  }
}

@media (max-width: 575.98px) {
  .publico-ws__title {
    font-size: 1.75rem;
  }

  .publico-ws__tabs {
    flex-direction: column;
  }

  .publico-ws__cards,
  .publico-ws__ganhos {
    grid-template-columns: minmax(0, 1fr);
    max-width: 320px;
    margin-inline: auto;
  }

  .publico-ws__nota {
    padding: 20px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .publico-ws__tab,
  .publico-ws__panels,
  .publico-ws__panel,
  .publico-ws__card,
  .publico-ws__ganho {
    transition-duration: 1ms;
  }

  .publico-ws__card:hover,
  .publico-ws__card:nth-child(even):hover,
  .publico-ws__ganho:hover,
  .publico-ws__ganho:nth-child(even):hover {
    transform: none;
  }
}


/* ============================================================ */
/* 6/13 — O FORMATO DA SUA EXPERIÊNCIA — sec-perfil 2717:475   */
/* origem: sections/1-formato.css                              */
/* ============================================================ */
/* ============================================================ */
/* SECTION: O FORMATO DA SUA EXPERIÊNCIA                       */
/* ============================================================ */
.formato-ws {
  padding: 41px 24px 109px;     /* topo: box do título em y 41 · base: 516 − 407 */
  background-image: linear-gradient(180deg, var(--formato-ws-bg-top) 6.5%, var(--formato-ws-bg-bottom) 99.74%);
  font-family: var(--font-primary);
}

.formato-ws__container {
  box-sizing: border-box;
  max-width: var(--formato-ws-container);
  margin: 0 auto;
}


/* --- Cabeçalho: título e régua --- */
.formato-ws__header {
  text-align: center;
}

.formato-ws__title {
  margin: 0;
  font-size: 2.4rem;                     /* 38.4px */
  font-weight: var(--font-weight-black);
  line-height: 44.8px;
  letter-spacing: -0.28px;
  color: var(--color-navy-deep);
}

.formato-ws__rule {
  display: block;
  width: 96px;
  height: 4px;
  margin: 45px auto 0;                   /* 131 − (41 + 44.8) */
  background-color: var(--color-orange);
}


/* ============================================================ */
/* CARDS — etapa online + conector "E" + imersão presencial    */
/* ============================================================ */
/* Os dois cards se esticam à altura do mais alto (o online, 190px);
   o conector fica centrado nessa altura — é o que põe o "E" em y 312,
   a mesma linha central dos dois cards no Figma. */
.formato-ws__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--formato-ws-gap) minmax(0, 1fr);
  align-items: stretch;
  margin-top: 82px;                      /* 217 − 135: fim da régua ao topo do card */
}

.formato-ws__card {
  position: relative;
  box-sizing: border-box;
  margin: 0;
  padding: 46px var(--formato-ws-card-pad-x) 25px;   /* 47.1 e 25.3 do Figma, menos a borda */
  background-color: var(--formato-ws-card-bg);
  border: 1px solid var(--formato-ws-card-border);
  border-radius: var(--formato-ws-radius);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

/* Borda indigo + sombra: no Figma são o estado de repouso do card
   presencial; aqui viram o realce de HOVER dos dois cards.
   Só com ponteiro fino — no toque o :hover gruda no último card tocado.
   Nada disso ocupa espaço (a borda já existe e só troca de cor; a sombra
   fica fora do fluxo), então o hover não reflui a fileira. */
@media (hover: hover) and (pointer: fine) {
  .formato-ws__card:hover {
    border-color: var(--color-indigo);
    box-shadow: var(--formato-ws-card-shadow);
  }
}

/* Badge cavalgando a borda superior: 26px de altura, metade para fora.
   top -14 = 13 acima do card + 1 de borda (o absolute mede da borda para dentro) */
.formato-ws__badge {
  position: absolute;
  top: -14px;
  left: var(--formato-ws-card-pad-x);
  display: inline-flex;
  align-items: center;
  height: 26px;
  margin: 0;
  padding: 0 20px;
  border-radius: 100px;
  background-image: linear-gradient(90deg, var(--color-teal) 0%, var(--color-indigo) 100%);
  color: var(--color-white);
  font-size: 0.6375rem;                  /* 10.2px */
  font-weight: var(--font-weight-bold);
  line-height: 15.87px;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Pílulas de data e horário */
.formato-ws__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.formato-ws__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;                              /* ícone em x 12–27, texto em x 33 */
  padding: 7px 12px;                     /* 19.2 + 14 = 33.2px de altura */
  border-radius: 100px;
  background-color: var(--formato-ws-pill-bg);
  color: var(--color-navy-deep);
  font-size: 0.75rem;                    /* 12px */
  font-weight: var(--font-weight-semibold);
  line-height: 19.2px;
  white-space: nowrap;
}

.formato-ws__pill img {
  flex: none;
  display: block;
  width: 15px;
  height: 15px;
}

.formato-ws__text {
  margin: 21px 0 0;                      /* 101 − 80.3: base da pílula ao topo do parágrafo */
  font-size: 0.8125rem;                  /* 13px */
  font-weight: var(--font-weight-regular);
  line-height: 20.8px;
  color: var(--color-text-muted);
}

/* Conector: traço · "E" · traço (60 + 8 + 38 + 8 + 60 = 174px) */
.formato-ws__link {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.formato-ws__divider {
  display: block;
  width: 1px;
  height: 60px;
  background-color: var(--formato-ws-divider);
}

.formato-ws__e {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 8px 0;
  border-radius: 50%;
  background-color: var(--color-navy-deep);
  color: var(--color-white);
  font-size: 0.6875rem;                  /* 11px */
  font-weight: var(--font-weight-black);
  line-height: 17.6px;
}


/* ============================================================ */
/* RESPONSIVO                                                  */
/* ============================================================ */
/* Até 1138px o container de 1090 cabe inteiro; abaixo disso as duas
   colunas 1fr encolhem juntas e o parágrafo só ganha linhas. */

/* Uma coluna: os cards empilham e o conector deita
   (traço · E · traço na horizontal, 24px de respiro acima e abaixo) */
@media (max-width: 991.98px) {
  .formato-ws__grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: var(--formato-ws-card-w);
    margin-inline: auto;
  }

  /* justify-self: no grid o align-self não centraliza na horizontal (o "E" ia para a esquerda);
     embaixo mais respiro porque a pílula do card seguinte sobe 24px acima dele. */
  .formato-ws__link {
    flex-direction: row;
    justify-self: center;
    padding: 24px 0 40px;
  }

  .formato-ws__divider {
    width: 60px;
    height: 1px;
  }

  .formato-ws__e {
    margin: 0 8px;
  }
}

@media (max-width: 767.98px) {
  .formato-ws {
    padding: 56px 16px 72px;
  }

  .formato-ws__title {
    font-size: 2rem;
    line-height: 1.2;
  }

  .formato-ws__rule {
    margin-top: 32px;
  }

  .formato-ws__grid {
    margin-top: 56px;
  }
}

@media (max-width: 575.98px) {
  .workshop-detalhes-page {
    --formato-ws-card-pad-x: 20px;       /* o badge acompanha, pela mesma variável */
  }

  .formato-ws__title {
    font-size: 1.75rem;
  }

  .formato-ws__card {
    padding-top: 40px;
    padding-bottom: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .formato-ws__card {
    transition-duration: 1ms;
  }
}


/* ============================================================ */
/* 7/13 — O QUE VOCÊ VAI APRENDER — sec-formacao 2743:208      */
/* origem: sections/2-aprender.css                             */
/* ============================================================ */
/* ============================================================ */
/* SECTION: O QUE VOCÊ VAI APRENDER                            */
/* ============================================================ */
/* 35px em cima é onde o título começa no frame; 85px embaixo é a distância
   do último card (1073) ao fim do frame (1158). */
.aprender-workshops {
  position: relative;
  overflow: hidden;
  padding: 35px 24px 85px;
  background-image: linear-gradient(180deg,
    var(--aprender-workshops-bg-top) 0%,
    var(--aprender-workshops-bg-bottom) 100%);
  font-family: var(--font-primary);

  /* Libera a interpolação de `block-size: auto` no corpo do acordeão — é o
     que permite animar a abertura sem cravar altura em pixel. A propriedade é
     herdada, então fica presa a esta seção em vez de valer para a página. */
  interpolate-size: allow-keywords;
}

/* Arte de traços em onda — o mesmo PNG (byte a byte) do `4-programa` das
   páginas PPFL, no mesmo tratamento delas: `cover`, centrado, a 95%.
   O dump do Figma declara a lona em 124.81% × 197.26% da seção, deslocada
   −11.11% / −47.25%, mas esse enquadramento NÃO reproduz o frame: no render
   do Figma as linhas são pontilhadas e a crista da direita fica acima do leque
   da esquerda — geometria que este PNG não tem em nenhuma escala/espelho
   (correlação de bordas ≤ 0.3 em todas as tentativas; ver README). Até o
   design entregar a arte com esse recorte, vale a versão aprovada nas irmãs. */
.aprender-workshops__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0.95;
  pointer-events: none;
  z-index: 0;
}

.aprender-workshops__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.aprender-workshops__container {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  max-width: var(--aprender-workshops-container);
  margin: 0 auto;
  padding-inline: var(--aprender-workshops-gutter);
}


/* ============================================================ */
/* CABEÇALHO                                                   */
/* ============================================================ */
/* 680px = container de 820 com 70px de cada lado (2743:211) */
.aprender-workshops__header {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.aprender-workshops__title {
  margin: 0;
  font-size: 2.4rem;                     /* 38.4px */
  font-weight: var(--font-weight-black);
  line-height: 48px;
  color: var(--color-navy-deep);
}

/* 14px de vão + 1.39px de padding-top do bloco do lead, no Figma */
.aprender-workshops__lead {
  margin: 15px 0 0;
  font-size: 1.0375rem;                  /* 16.6px */
  font-weight: var(--font-weight-regular);
  line-height: 25.79px;
  color: var(--aprender-workshops-text-muted);
}

/* Régua: y 176.39 no frame; o lead termina em 149.58 → 27px */
.aprender-workshops__rule {
  display: block;
  width: 96px;
  height: 4px;
  margin: 27px auto 0;
  background-color: var(--aprender-workshops-orange);
}


/* ============================================================ */
/* TRILHO                                                      */
/* ============================================================ */
/* Primeiro card em y 238; a régua termina em 180.39 → 58px */
.aprender-workshops__trilho {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--aprender-workshops-gap);
  margin: 58px 0 0;
  padding: 0 0 0 var(--aprender-workshops-rail-w);
}

/* A linha nasce no topo do primeiro card e morre na base do último
   (239..1074 no frame, com os cards em 238..1072) */
.aprender-workshops__trilho::before {
  content: "";
  position: absolute;
  left: var(--aprender-workshops-rail-x);
  top: 1px;
  bottom: -2px;
  width: 2px;
  background-color: var(--aprender-workshops-rail);
}

.aprender-workshops__item {
  position: relative;
}

/* Entre destaque e módulo o frame dá 16px (497→513 e 882→898), contra 14
   entre módulos. Os 2px extras entram só nessas fronteiras. */
.aprender-workshops__item--destaque + .aprender-workshops__item,
.aprender-workshops__item + .aprender-workshops__item--destaque {
  margin-top: var(--aprender-workshops-gap-plus);
}

/* --- Selo (número do módulo / estrela do destaque) --- */
/* O Figma posiciona cada selo a uma altura diferente (16.4 / 8.8 / 13.1px do
   topo do card): ruído do import. Fica centrado no cabeçalho do módulo:
   (2 + 51.76 − 36) / 2 = 8.9 */
.aprender-workshops__selo {
  position: absolute;
  left: calc(var(--aprender-workshops-rail-w) * -1);
  top: 9px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--aprender-workshops-selo);
  height: var(--aprender-workshops-selo);
  border: 2px solid var(--aprender-workshops-border-soft);
  border-radius: 50%;
  background-color: var(--aprender-workshops-white);
  font-size: 0.8rem;                     /* 12.8px */
  font-weight: var(--font-weight-bold);
  line-height: 19.84px;
  color: var(--aprender-workshops-text-muted);
  transition:
    background-color var(--aprender-workshops-dur-curta) var(--aprender-workshops-ease),
    border-color var(--aprender-workshops-dur-curta) var(--aprender-workshops-ease),
    color var(--aprender-workshops-dur-curta) var(--aprender-workshops-ease);
}

/* O módulo aberto acende o selo — é o mesmo estado do card, sem JS */
.aprender-workshops__item:has(.aprender-workshops__box[open]) .aprender-workshops__selo {
  border-color: var(--color-navy-deep);
  background-color: var(--color-navy-deep);
  color: var(--aprender-workshops-white);
}

/* Estrela dos destaques: 17px e 19px abaixo do topo do card no frame → 19px,
   que também deixa o selo a 2px do centro da tag. O Figma pede Roboto Mono
   Bold para o ★, mas nem a Mono nem a Roboto têm esse glifo — ele sai da
   fonte de sistema de qualquer jeito, então a Mono não é carregada. */
.aprender-workshops__selo--estrela {
  top: 19px;
  border-color: var(--aprender-workshops-teal);
  background-image: linear-gradient(180deg,
    var(--aprender-workshops-teal) 0%,
    var(--aprender-workshops-indigo) 100%);
  color: var(--aprender-workshops-white);
}


/* ============================================================ */
/* MÓDULOS (acordeão nativo)                                   */
/* ============================================================ */
/* O dump declara `p-px` (1px de padding) no card, mas o frame renderiza o
   módulo fechado com 53.75px = borda + cabeçalho (16 + 19.76 + 16) + borda,
   sem esse 1px — fica o que renderiza. */
.aprender-workshops__box {
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--aprender-workshops-border-soft);
  border-radius: var(--aprender-workshops-radius);
  background-color: var(--aprender-workshops-white);
  transition: border-color var(--aprender-workshops-dur-curta) var(--aprender-workshops-ease);
}

.aprender-workshops__box[open] {
  border-color: var(--color-navy-deep);
}

/* Abertura suave: `::details-content` é a caixa que o browser mostra/esconde no
   `<details>`; animar a altura dela vale para o clique, para o hover e também
   para o módulo que fecha sozinho por causa do `name`. `content-visibility` com
   `allow-discrete` mantém o conteúdo renderizado durante o fechamento — sem
   isso ele sumiria de uma vez e a altura animaria vazia.
   Onde `::details-content` não existir, o acordeão volta a abrir seco: perde a
   animação, não o funcionamento. */
.aprender-workshops__box::details-content {
  block-size: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    block-size var(--aprender-workshops-dur) var(--aprender-workshops-ease),
    opacity var(--aprender-workshops-dur-curta) var(--aprender-workshops-ease),
    content-visibility var(--aprender-workshops-dur) allow-discrete;
}

.aprender-workshops__box[open]::details-content {
  block-size: auto;
  opacity: 1;
}

.aprender-workshops__cabeca {
  display: flex;
  align-items: center;
  gap: var(--aprender-workshops-gap);
  padding: 16px var(--aprender-workshops-pad);
  cursor: pointer;
  list-style: none;                      /* tira o triângulo padrão */
}

.aprender-workshops__cabeca::-webkit-details-marker {
  display: none;
}

.aprender-workshops__cabeca:focus-visible {
  outline: 2px solid var(--aprender-workshops-indigo);
  outline-offset: -2px;
  border-radius: var(--aprender-workshops-radius);
}

.aprender-workshops__modulo {
  flex: 1 1 auto;
  margin: 0;
  font-size: 0.95rem;                    /* 15.2px */
  font-weight: var(--font-weight-bold);
  line-height: 19.76px;
  color: var(--color-navy-deep);
}

/* Inline que o conteúdo real traz nas PPFL (título com <em>, texto com
   <strong>): mesmas regras das irmãs, para o fragmento não depender de o
   texto [personalizado] chegar sem marcação */
.aprender-workshops__modulo em {
  font-style: italic;
}

.aprender-workshops__chevron {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  transition: transform var(--aprender-workshops-dur) var(--aprender-workshops-ease);
}

.aprender-workshops__box[open] .aprender-workshops__chevron {
  transform: rotate(180deg);
}

/* Lista de tópicos (2743:227): 22px de respiro lateral, 18px embaixo, e o
   travessão a 16px do texto. O dump declara 4.5px / 4.77px de respiro por
   item (31.55 de passo), mas o frame renderiza os cinco itens a 32.25px um do
   outro (tinta em y 576 · 608 · 640 · 673 · 705) e o card 01 com 233px — é o
   passo de 5 + 22.28 + 5 que fecha essa conta. */
.aprender-workshops__topicos {
  margin: 0;
  padding: 0 var(--aprender-workshops-pad) 18px;
  list-style: none;
}

.aprender-workshops__topicos li {
  position: relative;
  padding: 5px 0 5px 16px;
  font-size: 0.84375rem;                 /* 13.5px */
  font-weight: var(--font-weight-regular);
  line-height: 22.28px;
  color: var(--aprender-workshops-text-item);
}

.aprender-workshops__topicos li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--aprender-workshops-dash);
}


/* ============================================================ */
/* DESTAQUES (pré-work e imersão no gemba)                     */
/* ============================================================ */
/* O respiro de baixo é maior que o de cima porque o frame é assim: nos dois
   cards o texto termina ~55px antes da base (442 → 497 e 1018 → 1072). Como
   os dois batem, é estilo do card, não sobra de frame — e padding segura o
   respiro quando o texto [personalizado] mudar de tamanho. */
.aprender-workshops__destaque {
  overflow: hidden;
  padding: var(--aprender-workshops-pad-lg) var(--aprender-workshops-pad-lg) 55px;
  border-radius: var(--aprender-workshops-radius-lg);
  color: var(--aprender-workshops-white);
}

/* Gradiente do Figma: teal só no canto superior direito, navy a partir de
   17.28%. Os ângulos diferem porque o Figma os resolveu para a proporção de
   cada card (259px e 174px de altura). */
.aprender-workshops__destaque--prework {
  background-image: linear-gradient(224deg,
    var(--aprender-workshops-teal) 0%,
    var(--color-navy-deep) 17.28%);
}

.aprender-workshops__destaque--gemba {
  background-image: linear-gradient(213deg,
    var(--aprender-workshops-teal) 0%,
    var(--color-navy-deep) 17.28%);
}

/* `block` + `fit-content`, não `inline-block`: como inline-block a tag
   entraria numa caixa de linha anônima do artigo (strut de 24px) e ganharia
   ~1.5px de folga por baixo, empurrando título, texto e a base do card. */
.aprender-workshops__tag {
  display: block;
  width: fit-content;
  margin: 0;
  padding: 4.5px 12px 4.86px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.15);
  font-size: 0.6625rem;                  /* 10.6px */
  font-weight: var(--font-weight-regular);
  line-height: 16.37px;
  letter-spacing: 1.056px;
  text-transform: uppercase;
  color: var(--aprender-workshops-white);
}

/* Tag termina em 51.73 do topo do card; o título começa em 64.36 → 13px */
.aprender-workshops__destaque-title {
  margin: 13px 0 0;
  font-size: 1.05rem;                    /* 16.8px */
  font-weight: var(--font-weight-extrabold);
  line-height: 26px;
  color: var(--aprender-workshops-white);
}

/* Título termina em 90.36; o texto começa em 97.66 → 7px */
.aprender-workshops__destaque-texto {
  margin: 7px 0 0;
}

.aprender-workshops__destaque-texto p {
  margin: 0;
  font-size: 0.8625rem;                  /* 13.8px */
  font-weight: var(--font-weight-regular);
  line-height: 21.33px;
  color: rgba(255, 255, 255, 0.85);
}

/* No Figma os parágrafos são separados por uma linha em branco (21.33px) */
.aprender-workshops__destaque-texto p + p {
  margin-top: 21.33px;
}

.aprender-workshops__destaque-title em {
  font-style: italic;
}

.aprender-workshops__destaque-texto strong {
  font-weight: var(--font-weight-bold);
  color: var(--aprender-workshops-white);
}


/* ============================================================ */
/* RESPONSIVO                                                  */
/* ============================================================ */
@media (max-width: 991.98px) {
  .aprender-workshops {
    padding: 35px 24px 72px;
  }
}

@media (max-width: 767.98px) {
  .aprender-workshops {
    padding: 32px 16px 56px;
  }

  .aprender-workshops__container {
    padding-inline: 0;
  }

  .aprender-workshops__title {
    font-size: 1.75rem;                  /* 28px */
    line-height: 34px;
  }

  .aprender-workshops__lead {
    font-size: 1rem;
    line-height: 24px;
  }

  .aprender-workshops__rule {
    margin-top: 20px;
  }

  .aprender-workshops__trilho {
    --aprender-workshops-rail-w: 44px;
    --aprender-workshops-rail-x: 15px;
    --aprender-workshops-selo: 32px;
    margin-top: 40px;
  }

  .aprender-workshops__selo {
    font-size: 0.75rem;                  /* 12px */
  }

  /* padding de 20 + meia tag (12.85) − meio selo (16) */
  .aprender-workshops__selo--estrela {
    top: 17px;
  }

  .aprender-workshops__cabeca {
    padding: 14px 18px;
  }

  .aprender-workshops__topicos {
    padding: 0 18px 16px;
  }

  .aprender-workshops__destaque {
    padding: 20px 20px 40px;
  }
}

@media (max-width: 575.98px) {
  .aprender-workshops__trilho {
    --aprender-workshops-rail-w: 40px;
    --aprender-workshops-rail-x: 14px;
    --aprender-workshops-selo: 30px;
  }

  .aprender-workshops__selo--estrela {
    top: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aprender-workshops {
    --aprender-workshops-dur: 1ms;
    --aprender-workshops-dur-curta: 1ms;
  }

  .aprender-workshops__selo,
  .aprender-workshops__box,
  .aprender-workshops__box::details-content,
  .aprender-workshops__chevron {
    transition-duration: 1ms;
  }
}


/* ============================================================ */
/* 8/13 — COM QUEM VOCÊ IRÁ APRENDER — sec-especialistas 2750:790 (3) · 2717:348 (2) · 2750:742 (1)*/
/* origem: sections/1-especialistas.css                        */
/* ============================================================ */
/* ============================================================ */
/* SECTION: ESPECIALISTAS                                      */
/* ============================================================ */
.experts-ws {
  position: relative;  /* âncora dos arcos das fotos (o alternador de apresentação saiu no porte) */
  padding: 90px 24px;
  background-color: var(--color-bg-fog);
  font-family: var(--font-primary);
}

.experts-ws__container {
  max-width: var(--experts-ws-duo);  /* o mais largo dos três desenhos */
  margin: 0 auto;
}


/* --- Cabeçalho: título + filete laranja ---------------------- */
.experts-ws__header {
  text-align: center;
}

.experts-ws__title {
  margin: 0;
  font-size: 38.4px;
  line-height: 48px;
  font-weight: var(--font-weight-black);
  color: var(--color-navy-deep);
}

.experts-ws__rule {
  display: block;
  width: 96px;
  height: 4px;
  margin: var(--experts-ws-rule-gap) auto 0;
  background-color: var(--color-orange);
}


/* --- A linha de cartões, nos três desenhos -------------------- */
/* Cada variação trava a própria largura e se centra. Colunas em 1fr, não em
   px fixo: na largura de lona dão as medidas exatas do Figma e, abaixo dela,
   os cartões cedem largura em vez de estourar a página. */
.experts-ws__grid {
  display: grid;
  justify-content: center;
  margin: var(--experts-ws-rule-gap) auto 0;
  padding: 0;
  list-style: none;
}

/* O `[hidden]` do navegador perde para `.experts-ws__grid { display: grid }` —
   sem esta linha as três variações apareceriam empilhadas */
.experts-ws__grid[hidden] {
  display: none;
}

.experts-ws__grid--trio {
  max-width: var(--experts-ws-container);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--experts-ws-gap);
}

.experts-ws__grid--duo {
  max-width: var(--experts-ws-duo);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--experts-ws-duo-gap);
}

.experts-ws__grid--solo {
  max-width: var(--experts-ws-solo-card);
  grid-template-columns: minmax(0, 1fr);
}


/* --- Cartão em pé (3 especialistas) --------------------------- */
/* min-height, não height: o cartão cresce se um nome quebrar linha,
   e o grid estica os três juntos */
.experts-ws__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: var(--experts-ws-card-h);
  padding: 29px 13px 45px;
  overflow: hidden;
  border-radius: var(--experts-ws-radius);
  background-image: linear-gradient(96.78deg, var(--color-navy-deep) 0%, var(--color-navy-lit) 100%);
  box-shadow: 0 30px 70px rgba(41, 35, 92, 0.2);
}


/* --- Cartão deitado (2 e 1 especialista) ---------------------- */
/* O mesmo cartão, deitado: retrato · nome/cargo · botão numa fileira. O
   ângulo do gradiente muda com a proporção do quadro — são os três valores
   que o Figma reporta, um por desenho. */
.experts-ws__card--row {
  flex-direction: row;
  min-height: var(--experts-ws-row-h);
  padding: 52px 39px 52px 52px;
  gap: var(--experts-ws-row-gap);
  background-image: linear-gradient(111.84deg, var(--color-navy-deep) 0%, var(--color-navy-lit) 100%);
}

.experts-ws__grid--solo .experts-ws__card--row {
  background-image: linear-gradient(115.54deg, var(--color-navy-deep) 0%, var(--color-navy-lit) 100%);
}

/* O nome/cargo é quem absorve a largura que sobra: em 738 dá os 294 do
   desenho de dois, e em 880 os 436 do desenho de um */
.experts-ws__card--row .experts-ws__caption {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  margin: 0;
  text-align: left;
}

.experts-ws__card--row .experts-ws__cta {
  flex: none;
  margin-top: 0;
}


/* --- Anel decorativo ------------------------------------------ */
/* No cartão em pé é ancorado pelo FUNDO (Figma: topo 251 num cartão de 342 →
   141px abaixo da base), para que a curva continue no canto quando o cartão
   crescer. Nos deitados a altura é fixa e vale o topo do Figma. */
.experts-ws__arc {
  position: absolute;
  right: -96px;
  bottom: -141px;
  width: 232px;
  height: 232px;
  border: 46px solid rgba(255, 255, 255, 0.06);
  border-radius: 50%;
}

.experts-ws__arc--duo {
  top: 9px;
  right: -147px;
  bottom: auto;
}

.experts-ws__arc--solo {
  top: -120px;
  right: -100px;
  bottom: auto;
  width: 412px;
  height: 412px;
}

/* O anel é posicionado; sem position nos irmãos ele pintaria por cima
   do retrato e do botão */
.experts-ws__portrait,
.experts-ws__caption,
.experts-ws__cta {
  position: relative;
}


/* --- Retrato -------------------------------------------------- */
/* border-radius + overflow no CONTÊINER, nunca no <img> */
.experts-ws__portrait {
  display: block;
  flex: none;
  width: var(--experts-ws-photo);
  height: var(--experts-ws-photo);
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
}

.experts-ws__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* --- Nome e cargo --------------------------------------------- */
.experts-ws__caption {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
  margin-bottom: 27px;  /* piso do vão até o botão */
  text-align: center;
}

.experts-ws__name {
  margin: 0;
  font-size: 26px;
  line-height: normal;
  font-weight: var(--font-weight-extrabold);
  color: var(--color-white);
}

.experts-ws__role {
  margin: 0;
  font-size: 16px;
  line-height: normal;
  font-weight: var(--font-weight-regular);
  color: var(--color-lilac-soft);
}


/* --- Botão "Mini-currículo" ----------------------------------- */
/* margin-top:auto cola o botão na base do cartão EM PÉ. Na régua do Figma a
   sobra é zero e ele cai nos 251px do frame; quando um nome quebra linha e o
   grid estica os cartões, é isso que mantém os botões na mesma altura. */
.experts-ws__cta {
  margin-top: auto;
  padding: 14px 26px;
  border: 1px solid var(--experts-ws-glass-edge);
  border-radius: 10px;
  background-color: var(--experts-ws-glass);
  font-size: 14px;
  line-height: normal;
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.experts-ws__cta:hover,
.experts-ws__cta:focus-visible {
  border-color: var(--experts-ws-glass-edge-h);
  background-color: var(--experts-ws-glass-hover);
  color: var(--color-white);
}


@media (prefers-reduced-motion: reduce) {
  .experts-ws__cta {
    transition: none;
  }
}


/* ============================================================ */
/* RESPONSIVO                                                  */
/* ============================================================ */

/* O cartão deitado aperta MUITO antes do trio: a fileira de dois só cabe
   inteira até 1555px (1507 + 48 de padding), e daí para baixo o recuo de 52
   e os vãos de 40 comem a coluna de texto. Em 1248 sem esta folga a coluna
   caía para 141px e o cartão crescia 6px para caber o nome quebrado. */
@media (max-width: 1399.98px) {
  .experts-ws__card--row {
    padding: 36px;
    gap: 24px;
  }
}

/* Mais estreito ainda: o nome cede corpo em vez de quebrar em três linhas */
@media (max-width: 1247.98px) {
  .experts-ws__card--row .experts-ws__name {
    font-size: 22px;
  }

  .experts-ws__card--row .experts-ws__role {
    font-size: 15px;
  }
}

/* Até ~1138px o trio ainda cabe na régua do Figma (1090 + 48 de padding):
   nada muda, os cartões saem com os 320px do desenho. Daqui para baixo, não. */
@media (max-width: 991.98px) {
  .experts-ws__grid--trio {
    gap: 24px;
  }

  .experts-ws__grid--trio .experts-ws__card {
    min-height: 0;
    padding: 24px 12px 36px;
  }

  .experts-ws__grid--trio .experts-ws__portrait {
    width: 112px;
    height: 112px;
  }

  .experts-ws__grid--trio .experts-ws__name {
    font-size: 22px;
  }

  .experts-ws__grid--trio .experts-ws__role {
    font-size: 15px;
  }

  .experts-ws__grid--trio .experts-ws__caption {
    margin-bottom: 22px;
  }

  .experts-ws__grid--trio .experts-ws__cta {
    padding: 12px 20px;
  }

  /* dois cartões deitados lado a lado não cabem mais */
  .experts-ws__grid--duo {
    grid-template-columns: minmax(0, var(--experts-ws-duo-card));
    gap: 32px;
  }

}

/* Coluna única: sobra largura, então o cartão em pé volta à régua do Figma */
@media (max-width: 767.98px) {
  .experts-ws {
    padding: 64px 24px;
  }

  .experts-ws__title {
    font-size: 30px;
    line-height: 38px;
  }

  .experts-ws__rule {
    margin-top: 28px;
  }

  .experts-ws__grid {
    margin-top: 28px;
  }

  .experts-ws__grid--trio {
    grid-template-columns: minmax(0, 320px);
    gap: 32px;
  }

  .experts-ws__grid--trio .experts-ws__card {
    min-height: var(--experts-ws-card-h);
    padding: 29px 13px 45px;
  }

  .experts-ws__grid--trio .experts-ws__portrait {
    width: var(--experts-ws-photo);
    height: var(--experts-ws-photo);
  }

  .experts-ws__grid--trio .experts-ws__name {
    font-size: 26px;
  }

  .experts-ws__grid--trio .experts-ws__role {
    font-size: 16px;
  }

  .experts-ws__grid--trio .experts-ws__caption {
    margin-bottom: 27px;
  }

  .experts-ws__grid--trio .experts-ws__cta {
    padding: 14px 26px;
  }

  /* o cartão deitado vira o mesmo cartão em pé — daqui para baixo a fileira
     retrato + texto + botão não cabe mais */
  .experts-ws__grid--duo,
  .experts-ws__grid--solo {
    grid-template-columns: minmax(0, 320px);
    gap: 32px;
  }

  .experts-ws__card--row {
    flex-direction: column;
    min-height: var(--experts-ws-card-h);
    padding: 29px 13px 45px;
    gap: 0;
  }

  .experts-ws__card--row .experts-ws__caption {
    flex: none;
    width: 100%;
    margin: 8px 0 27px;
    text-align: center;
  }

  /* em pé o cartão tem os mesmos 294px de coluna do trio: o nome
     volta ao corpo do desenho */
  .experts-ws__card--row .experts-ws__name {
    font-size: 26px;
  }

  .experts-ws__card--row .experts-ws__role {
    font-size: 16px;
  }

  .experts-ws__card--row .experts-ws__cta {
    margin-top: auto;
  }

  /* o anel dos deitados é ancorado pelo topo e nasce grande: num cartão
     em pé de 320 × 342 ele iria parar no meio da borda direita. Volta a
     ser o anel do cartão em pé, colado no canto de baixo. */
  .experts-ws__card--row .experts-ws__arc {
    top: auto;
    right: -96px;
    bottom: -141px;
    width: 232px;
    height: 232px;
  }
}

@media (max-width: 575.98px) {
  .experts-ws {
    padding: 48px 20px;
  }

  .experts-ws__title {
    font-size: 26px;
    line-height: 32px;
  }
}


/* ============================================================ */
/* 9/13 — MATERIAL DIDÁTICO DE APOIO — sec-formacao 2742:368   */
/* origem: sections/1-material.css                             */
/* ============================================================ */
/* ============================================================ */
/* SECTION: MATERIAL DIDÁTICO                                  */
/* Alturas do Figma: 90 topo · 212 cartões · 301 refs · 62 base */
/* ============================================================ */
.material-ws {
  position: relative;
  padding: 90px 0 62px;
  font-family: var(--font-primary);
  background-image: linear-gradient(180deg,
                      var(--mat-bg-top) 3.583%,
                      var(--mat-bg-bottom) 100%);
}

.material-ws__container {
  max-width: 1188px;              /* 1140 de conteúdo + 2 × 24 de folga */
  margin: 0 auto;
  padding: 0 24px;
}


/* ============================================================ */
/* COMPONENT: CABEÇALHO                                        */
/* ============================================================ */
.material-ws__header {
  text-align: center;
}

.material-ws__title {
  margin: 0;
  font-size: 2.4rem;              /* 38.4px */
  font-weight: 900;
  line-height: 3rem;              /* 48px */
  color: var(--mat-color-heading);
}

.material-ws__subtitle {
  max-width: 798px;
  margin: 15.28px auto 0;
  font-size: 1.0375rem;           /* 16.6px */
  font-weight: 400;
  line-height: 25.79px;
  color: var(--mat-color-text);
}

/* Faixa laranja de 96 × 4 px sob o cabeçalho */
.material-ws__rule {
  display: block;
  width: 96px;
  height: 4px;
  margin: 28.14px auto 0;
  background-color: var(--mat-color-accent);
}


/* ============================================================ */
/* COMPONENT: CARTÕES DE MATERIAL INCLUSO                      */
/* Dois cartões de 557 px com 26 px de intervalo (soma 1140)   */
/* ============================================================ */
.material-ws__inclusos {
  display: flex;
  margin-top: 71px;
}

.mat-card {
  position: relative;
  flex: 0 0 48.8596%;             /* 557 / 1140 */
  height: 212px;
  background-color: var(--mat-card-bg);
  border: 1px solid var(--mat-card-border);
  border-radius: var(--mat-radius-card);
  box-shadow: var(--mat-card-shadow);
}

.mat-card + .mat-card {
  margin-left: 2.2807%;           /* 26 / 1140 */
}

/* Ladrilho colorido atrás da capa — a capa em si é PNG com alfa */
.mat-card__cover {
  --mat-cover-scale: 1;
  position: absolute;
  top: 50%;
  width: calc(141px * var(--mat-cover-scale));
  height: calc(187px * var(--mat-cover-scale));
  border-radius: var(--mat-radius-cover);
  box-shadow: var(--mat-cover-shadow);
}

.mat-card--apostila .mat-card__cover {
  left: 12px;
  transform: translateY(calc(-50% - 1.5px));
  background-image: var(--mat-cover-apostila);
}

.mat-card--kaizen .mat-card__cover {
  left: 11px;
  transform: translateY(calc(-50% + 0.5px));
  background-image: var(--mat-cover-kaizen);
}

/* A capa transborda o ladrilho — o alfa do PNG é que dá o recorte */
.mat-card__book {
  position: absolute;
  display: block;
  max-width: none;
  object-fit: cover;
}

.mat-card--apostila .mat-card__book {
  left: calc(-16px * var(--mat-cover-scale));
  top: calc(10px * var(--mat-cover-scale));
  width: calc(165px * var(--mat-cover-scale));
  height: calc(165px * var(--mat-cover-scale));
}

.mat-card--kaizen .mat-card__book {
  left: calc(5px * var(--mat-cover-scale));
  top: calc(-35px * var(--mat-cover-scale));
  width: calc(132px * var(--mat-cover-scale));
  height: calc(240px * var(--mat-cover-scale));
}

.mat-card__body {
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.mat-card--apostila .mat-card__body { left: 168px; padding-bottom: 14px; }
.mat-card--kaizen   .mat-card__body { left: 183px; padding-bottom: 1px; }

.mat-card__tag {
  font-size: 0.6875rem;           /* 11px */
  font-weight: 800;
  line-height: normal;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  color: var(--mat-color-tag);
}

.mat-card__title {
  margin: 0;
  padding-top: 2px;
  font-size: 1.1875rem;           /* 19px */
  font-weight: 700;
  line-height: normal;
  color: var(--mat-color-heading);
}

.mat-card__desc {
  margin: 0;
  font-size: 0.84375rem;          /* 13.5px */
  font-weight: 400;
  line-height: normal;
  color: var(--mat-color-card-text);
}

.mat-card--kaizen .mat-card__desc { padding-bottom: 10px; }

.mat-card__link {
  font-size: 0.84375rem;          /* 13.5px */
  font-weight: 800;
  line-height: normal;
  color: var(--mat-color-link);
  text-decoration: none;
  transition: color 0.2s;
}

.mat-card__link:hover {
  color: var(--mat-color-heading);
  text-decoration: underline;
}


/* ============================================================ */
/* COMPONENT: CHAMADA DE REFERÊNCIAS                           */
/* ============================================================ */
.material-ws__eyebrow {
  margin: 53.28px 0 0;
  font-size: 1.0375rem;           /* 16.6px */
  font-weight: 700;
  line-height: 25.79px;
  text-align: center;
  text-transform: uppercase;
  color: var(--mat-color-accent);
}

.material-ws__lead {
  max-width: 1040px;
  margin: 7.21px auto 0;
  font-size: 1.0375rem;           /* 16.6px */
  font-weight: 400;
  line-height: 25.79px;
  text-align: center;
  color: var(--mat-color-text);
}


/* ============================================================ */
/* COMPONENT: CARTÕES DE REFERÊNCIA (sanfona)                  */
/* 320 + 3 + 493 + 4 + 320 = 1140 px                           */
/* ============================================================ */
/* Mesma sanfona do `1-continue` desta página (e do `11-continue`
   da PPFL Serviços): a expansão é só `flex-grow`, o card aberto
   fica aberto ao sair o mouse, e o CTA só existe no card aberto.
   Aqui os DOIS estados vêm prontos do Figma — ele congelou a
   fileira com o "Publicação" aberto (493 contra 320, título 36
   contra 24, texto 16 contra 12, e só ele com botão). Os números
   abaixo são esses dois estados, não uma interpolação.

   Quatro camadas de fundo, na ordem em que o Figma empilha:
   cor sólida · gradiente de base (::before) · foto rebaixada
   (__media) · véu (::after). `isolation` prende o z-index. */
.material-ws__refs {
  display: flex;
  margin-top: 37.35px;
}

/* base 0 + razão 493/320 do Figma: os grow somam 1133, e com as
   duas margens (3 + 4) fecham os 1140 exatos da régua */
.ref-card {
  --ref-gap: 9.2px;
  position: relative;
  isolation: isolate;
  flex: var(--ref-grow-closed) 1 0;
  min-width: 0;
  height: 301px;
  border-radius: var(--mat-radius-ref);
  overflow: hidden;
  transition: flex-grow var(--ref-dur) var(--ref-ease);
}

.ref-card.is-open {
  --ref-gap: 7.525px;
  flex-grow: var(--ref-grow-open);
}

.ref-card::before,
.ref-card::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ref-card::before { z-index: 1; }   /* gradiente de base */
.ref-card::after  { z-index: 3; }   /* véu sobre a foto */

.ref-card__media {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.ref-card__photo {
  position: absolute;
  display: block;
  max-width: none;
  object-fit: cover;
}

/* O conteúdo cobre o card inteiro e ancora na base: é o que deixa o
   ::before do gatilho alcançar a área da foto. O recuo de baixo é 34
   fechado e 58 aberto — as duas medidas do Figma. */
.ref-card__content {
  position: absolute;
  inset: 0;
  z-index: 4;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 34px;
  gap: var(--ref-gap);
  transition:
    padding-bottom var(--ref-dur) var(--ref-ease),
    gap            var(--ref-dur) var(--ref-ease);
}

.ref-card.is-open .ref-card__content { padding-bottom: 58px; }

.ref-card__title {
  margin: 0;
  padding-top: 8.8px;
}

/* O título é o gatilho do disclosure; o ::before estende o clique ao
   card inteiro. `display: block` porque um <button> inline dentro do
   <h3> herda o strut de 16px do corpo e engorda a caixa. */
.ref-card__trigger {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #ffffff;
  font-family: inherit;
  font-size: 1.5rem;                  /* 24px — fechado */
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.32px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: font-size var(--ref-dur) var(--ref-ease);
}

.ref-card__trigger::before {
  content: "";
  position: absolute;
  inset: 0;
}

.ref-card.is-open .ref-card__trigger { font-size: 2.25rem; }   /* 36px */

.ref-card__trigger:focus-visible {
  outline: 2px solid #ffa626;
  outline-offset: 4px;
}

.ref-card__desc {
  margin: 0;
  padding-bottom: 0.705px;
  font-size: 0.75rem;                 /* 12px */
  font-weight: 400;
  line-height: 16px;
  color: rgba(255, 255, 255, 0.88);
  transition:
    font-size   var(--ref-dur) var(--ref-ease),
    line-height var(--ref-dur) var(--ref-ease),
    max-width   var(--ref-dur) var(--ref-ease);
}

.ref-card.is-open .ref-card__desc {
  max-width: 340px;
  padding-bottom: 0;
  font-size: 1rem;                    /* 16px */
  line-height: 22.48px;
}

/* --- Painel do CTA: sai do fluxo quando fechado -------------- */
/* height 0 (e não só opacity) — senão o texto do card fechado subiria
   a altura do botão. O margin-top negativo devolve o `gap` que um
   painel de altura zero ainda cobra do flex. `visibility` tira o link
   da árvore de acessibilidade enquanto o card está recolhido. */
.ref-card__panel {
  height: 0;
  margin-top: calc(var(--ref-gap) * -1);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    height     var(--ref-dur) var(--ref-ease),
    margin-top var(--ref-dur) var(--ref-ease),
    opacity    var(--ref-dur) var(--ref-ease),
    transform  var(--ref-dur) var(--ref-ease),
    visibility 0s linear var(--ref-dur);
}

.ref-card.is-open .ref-card__panel {
  height: 36px;
  margin-top: 0;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    height     var(--ref-dur) var(--ref-ease),
    margin-top var(--ref-dur) var(--ref-ease),
    opacity    var(--ref-dur) var(--ref-ease),
    transform  var(--ref-dur) var(--ref-ease),
    visibility 0s;
}

/* z-index acima do ::before do gatilho, senão o link não recebe o clique */
.ref-card__btn {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 36px;
  padding: 0 11px;                    /* 11 + 162 + 11 = os 184 do Figma */
  border-radius: var(--mat-radius-btn);
  background-color: #ffffff;
  font-size: 0.6875rem;               /* 11px */
  font-weight: 700;
  line-height: 20.83px;
  color: var(--mat-color-heading);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}

.ref-card__btn:hover {
  background-color: var(--mat-color-heading);
  color: #ffffff;
}

/* --- Artigos ------------------------------------------------ */
.ref-card--artigos { background-color: var(--ref-artigos-bg); }

/* enquadramento neutro nos dois estados: a foto já é 100% `cover` */
.ref-card--artigos .ref-card__photo {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.54;
}

.ref-card--artigos::after {
  background-image:
    linear-gradient(45.6031deg, rgba(0, 0, 0, 0.59) 18.25%, rgba(172, 58, 212, 0.59) 97.37%),
    linear-gradient(229.3375deg, rgba(0, 0, 0, 0) 4.4149%, rgba(0, 0, 0, 0.83) 80.273%);
}

.ref-card--artigos .ref-card__desc { max-width: 231px; }

/* --- Publicação --------------------------------------------- */
.ref-card--publicacao {
  margin-left: 3px;
  background-color: var(--ref-publicacao-bg);
}

.ref-card--publicacao::before {
  background-image: linear-gradient(59.3621deg, #000000 26.36%, #169194 100.05%);
}

.ref-card--publicacao .ref-card__media { opacity: 0.18; }

/* O Figma só mostra este card ABERTO: o enquadramento de 120.69% ×
   131.71% é dessa largura. Fechado ele cai no neutro — foto do
   tamanho do card, `cover`, sem recorte inventado. */
.ref-card--publicacao .ref-card__photo {
  inset: 0;
  width: 100%;
  height: 100%;
}

.ref-card--publicacao.is-open .ref-card__photo {
  inset: auto;
  left: -9.06%;
  top: -27.95%;
  width: 120.69%;
  height: 131.71%;
}

.ref-card--publicacao::after {
  background-image: linear-gradient(154.9834deg, rgba(0, 0, 0, 0) 21.652%, rgba(0, 0, 0, 0.2) 84.157%);
}

.ref-card--publicacao .ref-card__desc { max-width: 252px; }

/* --- Vídeos ------------------------------------------------- */
.ref-card--videos {
  margin-left: 4px;
  background-color: var(--ref-videos-bg);
}

.ref-card--videos::before {
  background-image:
    linear-gradient(233.9437deg, #94161c 1.1101%, #000000 72.726%),
    linear-gradient(90deg, #000000 0%, #000000 100%);
}

.ref-card--videos .ref-card__media { opacity: 0.22; }

/* Espelho do Publicação: o Figma só mostra este FECHADO, então é o
   estado fechado que guarda o enquadramento do design. */
.ref-card--videos .ref-card__photo {
  left: -9.85%;
  top: -24.99%;
  width: 116.37%;
  height: 185.43%;
}

.ref-card--videos.is-open .ref-card__photo {
  inset: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.ref-card--videos::after {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.27) 100%);
}

.ref-card--videos .ref-card__desc { max-width: 240px; }


/* ============================================================ */
/* RESPONSIVO                                                  */
/* ============================================================ */
@media (max-width: 1247.98px) {
  /* O corpo do cartão encosta na capa antes de a fonte encolher */
  .mat-card--kaizen .mat-card__body { left: 168px; }
}

@media (max-width: 991.98px) {
  .material-ws { padding: 64px 0 48px; }

  .material-ws__inclusos { flex-direction: column; }

  .mat-card { flex: 0 0 auto; }
  .mat-card + .mat-card { margin-left: 0; margin-top: 20px; }

  /* Empilhados, a sanfona troca de eixo: quem cresce é a ALTURA.
     `min-height` (e não `height`) porque aberto o texto de 16px pode
     precisar de mais de duas linhas na largura da tira. */
  .material-ws__refs { flex-direction: column; }

  .ref-card {
    flex: 0 0 auto;
    height: auto;
    min-height: 240px;
    transition: min-height var(--ref-dur) var(--ref-ease);
  }

  .ref-card.is-open { min-height: 320px; }

  .ref-card + .ref-card { margin-left: 0; margin-top: 12px; }

  .ref-card__desc,
  .ref-card--artigos .ref-card__desc,
  .ref-card--publicacao .ref-card__desc,
  .ref-card--videos .ref-card__desc { max-width: 46ch; }

  /* Sem a régua de largura do Figma, os dois enquadramentos especiais
     caem no neutro nos dois estados. */
  .ref-card--publicacao .ref-card__photo,
  .ref-card--publicacao.is-open .ref-card__photo,
  .ref-card--videos .ref-card__photo,
  .ref-card--videos.is-open .ref-card__photo {
    inset: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}

@media (max-width: 767.98px) {
  .material-ws__title { font-size: 1.875rem; line-height: 2.375rem; }   /* 30 / 38 */
  .material-ws__subtitle { margin-top: 12px; }
  .material-ws__rule { margin-top: 22px; }
  .material-ws__inclusos { margin-top: 44px; }
  .material-ws__eyebrow { margin-top: 40px; }
  .material-ws__refs { margin-top: 28px; }

  /* Cartão de material passa a fluir: capa e corpo lado a lado */
  .mat-card {
    display: flex;
    align-items: center;
    gap: 18px;
    height: auto;
    padding: 20px;
  }

  /* `relative` e não `static`: a capa precisa continuar sendo o bloco */
  /* de contenção do PNG do livro, que é absoluto e transborda o ladrilho */
  .mat-card__cover {
    --mat-cover-scale: 0.78;
    position: relative;
    top: auto;
    flex: 0 0 calc(141px * var(--mat-cover-scale));
  }

  .mat-card--apostila .mat-card__cover,
  .mat-card--kaizen   .mat-card__cover { left: auto; transform: none; }

  .mat-card__body,
  .mat-card--apostila .mat-card__body,
  .mat-card--kaizen   .mat-card__body {
    position: static;
    left: auto;
    right: auto;
    transform: none;
    padding-bottom: 0;
  }

  .ref-card__content { padding: 24px; }
  .ref-card.is-open .ref-card__content { padding-bottom: 24px; }
  .ref-card.is-open .ref-card__trigger { font-size: 1.75rem; }          /* 28px */
  .ref-card.is-open .ref-card__desc { font-size: 0.9375rem; line-height: 20px; }
}

@media (max-width: 575.98px) {
  .material-ws__container { padding: 0 16px; }

  .mat-card { gap: 14px; padding: 16px; }
  .mat-card__cover { --mat-cover-scale: 0.62; }

  .mat-card__title { font-size: 1.0625rem; }                            /* 17px */
  .mat-card__desc  { font-size: 0.8125rem; }                            /* 13px */

  .ref-card { min-height: 200px; }
  .ref-card.is-open { min-height: 280px; }
  .ref-card__content { padding: 20px; }
  .ref-card.is-open .ref-card__content { padding-bottom: 20px; }
  .ref-card__trigger { font-size: 1.25rem; }                            /* 20px */
  .ref-card.is-open .ref-card__trigger { font-size: 1.5rem; }           /* 24px */
}


/* ============================================================ */
/* MOVIMENTO REDUZIDO                                          */
/* ============================================================ */
/* A sanfona continua funcionando — só troca de estado sem animar. */
@media (prefers-reduced-motion: reduce) {
  .ref-card,
  .ref-card__content,
  .ref-card__trigger,
  .ref-card__desc,
  .ref-card__panel,
  .ref-card.is-open .ref-card__panel,
  .ref-card__btn {
    transition-duration: 1ms;
  }
}


/* ============================================================ */
/* 10/13 — ESCOLHA SUA TURMA E GARANTA SUA VAGA — investimento-servicos 2717:648*/
/* origem: sections/3-escolha-turma.css                        */
/* ============================================================ */
/* ============================================================ */
/* SECTION: ESCOLHA SUA TURMA E GARANTA SUA VAGA               */
/* ============================================================ */
.turma-ws {
  padding: 87px 24px 123px;
  font-family: var(--font-primary);
  background-image: linear-gradient(
    to bottom,
    var(--turma-ws-bg-top) 0%,
    var(--color-bg-fog) 100%
  );
}

.turma-ws__container {
  max-width: var(--turma-ws-container);
  margin: 0 auto;
}


/* --- Cabeçalho: título + régua laranja --- */
.turma-ws__header {
  text-align: center;
}

.turma-ws__title {
  max-width: 680px;   /* largura do Container do Figma; o título mede 655 */
  margin: 0 auto;
  font-size: 2.4rem;  /* 38.4px */
  font-weight: var(--font-weight-black);
  line-height: 48px;
  color: var(--color-navy-deep);
}

.turma-ws__rule {
  display: block;
  width: 96px;
  height: 4px;
  margin: 29px auto 0;   /* base do título em y 135, régua em y 164 */
  background-color: var(--color-orange);
}


/* --- Card: lado claro (dados) + lado escuro (investimento) --- */
.turma-ws__card {
  display: flex;
  align-items: stretch;
  min-height: var(--turma-ws-card-h);
  margin-top: 42px;      /* base da régua em y 168, topo do card em y 210 */
  overflow: hidden;      /* o Figma recorta os dois lados em 267 */
  border-radius: var(--turma-ws-radius);
  box-shadow: 0 34px 80px rgba(41, 35, 92, 0.12);
}


/* ------------------------------------------------------------ */
/* Lado claro: pílula, dados da turma e botões                   */
/* ------------------------------------------------------------ */
.turma-ws__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* recuos do Figma menos a borda de 1px: conteúdo em x 22, base em y 221 */
  padding: 22px 60px 45px 21px;
  background-color: var(--color-white);
  border: 1px solid var(--turma-ws-border);
  border-right: 0;
}

.turma-ws__badge {
  align-self: flex-start;
  display: flex;
  align-items: center;
  height: 26px;
  margin: 0;
  padding: 0 16px;       /* o texto mede 79 numa pílula de 111 */
  border-radius: 100px;
  background-image: linear-gradient(to right, var(--color-teal), var(--color-indigo));
  font-size: 0.6375rem;  /* 10.2px */
  font-weight: var(--font-weight-bold);
  line-height: 15.87px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-white);
}

/* Tracejado 2 on / 2 off — o Figma entrega a linha como SVG dasharray "2 2" */
.turma-ws__divider {
  display: block;
  height: 1px;
  background-image: repeating-linear-gradient(
    to right,
    var(--turma-ws-border) 0 2px,
    transparent 2px 4px
  );
}

.turma-ws__divider--top    { margin-top: 14px; }  /* pílula em y 49 → fio em y 63 */
.turma-ws__divider--bottom { margin-top: 22px; }  /* dados em y 128 → fio em y 150 */


/* --- Linha de dados: data · horário · empresa anfitriã --- */
.turma-ws__info {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  margin-top: 20px;   /* fio em y 64 → ícones em y 84 */
}

.turma-ws__fact {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.turma-ws__fact-icon {
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background-color: var(--turma-ws-icon-bg);
}

.turma-ws__fact-icon img {
  display: block;
  width: 20px;
  height: 20px;
}

.turma-ws__fact-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.turma-ws__fact-label {
  font-size: 0.71875rem;   /* 11.5px */
  font-weight: var(--font-weight-regular);
  line-height: 13px;
  letter-spacing: 0.575px;
  text-transform: uppercase;
  color: var(--turma-ws-label);
}

.turma-ws__fact-value {
  font-size: 1rem;         /* 16px */
  font-weight: var(--font-weight-extrabold);
  line-height: 19px;
  color: var(--color-navy-deep);
}

.turma-ws__host {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  width: 237px;
  height: 44px;
  margin-top: -3px;    /* no frame a caixa fica em y 81, os ícones em y 84,25 */
  margin-left: auto;   /* encosta na coluna de conteúdo, como no frame */
  padding-left: 20px;
  border: 1px solid var(--turma-ws-border);
  border-radius: 10px;
  background-color: var(--turma-ws-host-bg);
}

.turma-ws__host-logo {
  display: block;
  width: 65px;
  height: 27px;
  object-fit: contain;
}

.turma-ws__host-sep {
  width: 1px;
  height: 28px;
  margin: 0 16px 0 18px;   /* logo termina em x 85, fio em x 103, texto em x 120 */
  background-color: var(--turma-ws-border);
}

.turma-ws__host-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.turma-ws__host-label {
  font-size: 0.78125rem;   /* 12.5px */
  font-weight: var(--font-weight-regular);
  line-height: 17.5px;
  color: var(--color-text-muted);
}

.turma-ws__host-city {
  font-size: 0.84375rem;   /* 13.5px */
  font-weight: var(--font-weight-bold);
  line-height: 18.9px;
  color: var(--color-navy-deep);
}


/* --- Botões --- */
.turma-ws__actions {
  display: flex;
  align-items: center;
  gap: var(--turma-ws-btn-gap);
  margin-top: 21px;    /* fio em y 151 → botões em y 172 */
}

.turma-ws__cta,
.turma-ws__ghost {
  flex: 1 1 0;
  max-width: var(--turma-ws-btn-w);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  font-size: 0.90625rem;   /* 14.5px */
  font-weight: var(--font-weight-extrabold);
  text-align: center;
  text-decoration: none;
  transition: transform 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}

.turma-ws__cta {
  height: 47px;
  background-color: var(--color-orange);
  color: var(--color-white);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.61);
}

.turma-ws__ghost {
  height: 49px;
  border: 1px solid var(--color-navy-deep);
  background-color: transparent;
  color: var(--color-navy-deep);
}

/* Acabamento da conversão — não está no Figma */
.turma-ws__cta:hover,
.turma-ws__cta:focus-visible {
  background-color: #e67300;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -10px rgba(0, 0, 0, 0.55);
  color: var(--color-white);
}

.turma-ws__ghost:hover,
.turma-ws__ghost:focus-visible {
  background-color: var(--color-navy-deep);
  color: var(--color-white);
}


/* ------------------------------------------------------------ */
/* Lado escuro: investimento                                     */
/* ------------------------------------------------------------ */
.turma-ws__price {
  flex: 0 0 var(--turma-ws-aside-w);
  min-width: 0;   /* sem isto o nowrap da faixa de desconto alarga o painel */
  display: flex;
  flex-direction: column;
  padding: 33px 54px 43px;
  background-image: linear-gradient(163.197deg, var(--color-navy-deep) 0%, var(--color-indigo) 100%);
  color: var(--color-white);
}

.turma-ws__price-value {
  margin: 0;
  font-size: 2.125rem;   /* 34px */
  font-weight: var(--font-weight-black);
  line-height: 40px;
  text-align: center;
}

/* Alinha pela linha de base do preço, como no frame (64,5 × 64,9).
   O espaço antes do "x6" mora DENTRO do span: fora dele sairia com os 34px
   do preço e abriria 12px de vão, contra os 7px do frame. */
.turma-ws__price-mult {
  font-size: 0.9375rem;  /* 15px */
  font-weight: var(--font-weight-semibold);
  line-height: 18px;     /* sem isto o "x6" herda os 40px e estica a linha em 7px */
  color: var(--color-lilac-soft);
}

.turma-ws__price-cash {
  margin: 6px 0 0;
  font-size: 0.90625rem; /* 14.5px */
  font-weight: var(--font-weight-regular);
  line-height: 17px;
  text-align: center;
  color: var(--color-lilac-soft);
}

/* Fio de 0,1px branco do Figma — renderiza como 1px a ~10% */
.turma-ws__price-line {
  display: block;
  height: 1px;
  margin-top: 9px;
  background-color: rgba(255, 255, 255, 0.10);
}

/* Bloco, não flex: como item de flex os nós de texto perdem os espaços
   das bordas e o "* " e o "% a" da faixa colariam no trecho em negrito.
   1 + 7 + 20 + 7 + 1 = os 36 de altura do Figma. */
.turma-ws__price-note {
  margin: 15px 0 0;
  padding: 7px 4px;   /* o Figma recua 5, mas aí o texto de uma linha não fecha nos 292 */
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.08);
  font-size: 0.625rem;   /* 10px */
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  text-align: center;
  white-space: nowrap;   /* a faixa é de uma linha só nos 292 do frame */
  color: var(--turma-ws-note-text);
}

.turma-ws__price-note strong {
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
}

/* Formas de pagamento: duas colunas de 170,667 recuadas 19 à esquerda
   do padding do painel; a terceira linha atravessa as duas colunas */
.turma-ws__pay {
  display: grid;
  grid-template-columns: 170.667px auto;
  margin: 15px -54px 0 -19px;
  padding: 0;
  list-style: none;
}

.turma-ws__pay-item {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 26px;
  padding-left: 24px;
  font-size: 0.75rem;   /* 12px */
  font-weight: var(--font-weight-regular);
  line-height: 14px;
  white-space: nowrap;
  color: var(--color-white);
}

.turma-ws__pay-item::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.875rem;  /* 14px */
  font-weight: var(--font-weight-black);
  line-height: 16px;
  color: var(--color-teal);
}

.turma-ws__pay-item--wide {
  grid-column: 1 / -1;
}


/* ============================================================ */
/* RESPONSIVO                                                  */
/* ============================================================ */

/* O card de 1140 é a largura máxima; abaixo dela a linha de dados
   deixa de caber em uma linha só e a caixa da anfitriã desce. */
@media (max-width: 1247.98px) {
  .turma-ws__info {
    flex-wrap: wrap;
    row-gap: 20px;
  }

  .turma-ws__host {
    margin-left: 0;
  }

  .turma-ws__main {
    padding-bottom: 30px;
  }
}

/* Tablet: o card vira uma coluna — dados em cima, investimento embaixo. */
@media (max-width: 991.98px) {
  .turma-ws {
    padding: 64px 24px 80px;
  }

  .turma-ws__card {
    flex-direction: column;
    min-height: 0;
  }

  .turma-ws__main {
    border-right: 1px solid var(--turma-ws-border);
    border-bottom: 0;
    padding: 26px 26px 30px 25px;
  }

  .turma-ws__price {
    flex: 1 1 auto;
    padding: 30px 26px 34px;
  }

  .turma-ws__pay {
    margin-right: 0;
    margin-left: 0;
  }
}

@media (max-width: 767.98px) {
  .turma-ws__title {
    font-size: 1.875rem;   /* 30px */
    line-height: 38px;
  }

  .turma-ws__rule {
    margin-top: 22px;
  }

  .turma-ws__card {
    margin-top: 32px;
  }

  .turma-ws__info {
    flex-direction: column;
    row-gap: 18px;
  }

  .turma-ws__host {
    width: 100%;
  }

  .turma-ws__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .turma-ws__cta,
  .turma-ws__ghost {
    /* empilhados a coluna vira o eixo principal: sem trocar o flex,
       o flex-basis 0 mandaria na altura e engoliria os 48px */
    flex: 0 0 auto;
    max-width: none;
    height: 48px;
  }

  .turma-ws__pay {
    grid-template-columns: 1fr;
  }

  .turma-ws__price-note,
  .turma-ws__pay-item {
    white-space: normal;
  }

  .turma-ws__pay-item--wide {
    grid-column: auto;
  }
}

@media (max-width: 575.98px) {
  .turma-ws {
    padding: 48px 16px 64px;
  }

  .turma-ws__title {
    font-size: 1.625rem;   /* 26px */
    line-height: 33px;
  }

  .turma-ws__card {
    border-radius: 20px;
  }

  .turma-ws__price-value {
    font-size: 1.75rem;    /* 28px */
    line-height: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .turma-ws__cta,
  .turma-ws__ghost {
    transition-duration: 1ms;
  }

  .turma-ws__cta:hover,
  .turma-ws__cta:focus-visible {
    transform: none;
  }
}


/* ============================================================ */
/* 11/13 — ESTE TEMA FAZ SENTIDO PARA TODO O SEU TIME? — Frame 332 2723:397*/
/* origem: sections/1-sentido.css                              */
/* ============================================================ */
/* ============================================================ */
/* SECTION: ESTE TEMA FAZ SENTIDO PARA TODO O SEU TIME?        */
/* ============================================================ */
/* 124 de topo + 215,191 do card + 124,809 de base = os 464 do frame.
   O padding lateral de 24 só entra em cena abaixo de ~1397px: acima disso
   o card já para nos seus 1349,333 centrados. */
.sentido-ws {
  position: relative;
  overflow: hidden;
  padding: 124px 24px 124.809px;
  background-image: linear-gradient(90deg, var(--color-navy-deep) 0%, var(--color-teal) 100%);
  font-family: var(--font-primary);
}

/* A arte sangra nos quatro lados; o recorte é a própria faixa, 3px abaixo
   do topo — que é onde a máscara do Figma começa.
   O `container-type` mora AQUI, e não na seção: esta caixa é a única que tem
   a largura cheia da faixa. Na seção, o padding lateral entra na conta do
   `cqi` e a arte sai 3% menor e deslocada. */
.sentido-ws__lines {
  position: absolute;
  inset: var(--sentido-ws-lines-clip) 0 0;
  container-type: size;
  overflow: hidden;
  pointer-events: none;
}

.sentido-ws__lines img {
  position: absolute;
  top: calc(var(--sentido-ws-lines-w) * var(--sentido-ws-lines-y));
  left: calc(var(--sentido-ws-lines-w) * var(--sentido-ws-lines-x));
  width: var(--sentido-ws-lines-w);
  height: auto;
  max-width: none;
}


/* ============================================================ */
/* CARD — texto à esquerda, CTA à direita                      */
/* ============================================================ */
/* Os 133px de vão entre a coluna de texto (677) e o botão (352) são o que
   sobra da largura interna (1162): por isso `space-between` e não um gap
   fixo — assim o vão cede primeiro quando a tela encolhe. */
.sentido-ws__card {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  max-width: var(--sentido-ws-card-w);
  min-height: var(--sentido-ws-card-h);
  margin: 0 auto;
  padding: var(--sentido-ws-pad-top) var(--sentido-ws-pad-right)
           var(--sentido-ws-pad-bottom) var(--sentido-ws-pad-left);
  border-top: var(--sentido-ws-rule) solid var(--color-orange);
  border-radius: var(--sentido-ws-radius);
  background-color: var(--sentido-ws-card-bg);
  box-shadow: var(--sentido-ws-card-shadow);
}

/* 677px é a caixa do título no Figma; o parágrafo tem a sua própria (661) */
.sentido-ws__text {
  flex: 0 1 677px;
  min-width: 0;
}

.sentido-ws__title {
  margin: 0;
  font-size: 2rem;                  /* 32px */
  font-weight: var(--font-weight-extrabold);
  line-height: 36px;
  color: var(--color-navy-deep);
}

/* 661px reproduz as quebras do Figma (linhas de 598, 564 e 274px medidas no
   screenshot). Os 12px são a distância entre as caixas de texto do Figma
   (82,191 → 94,191): a caixa do Figma tem 80px para 83,77 de texto, mas o
   meio-espaço do Chrome cai no mesmo lugar — as três linhas do render batem
   com as do screenshot em 222, 250 e 278. */
.sentido-ws__lead {
  max-width: 661px;
  margin: 12px 0 0;
  font-size: 1.25rem;               /* 20px */
  font-weight: var(--font-weight-regular);
  line-height: 27.92px;             /* 1,396 do Figma; passo de 28px medido */
  color: var(--color-navy-deep);
}

.sentido-ws__cta {
  box-sizing: border-box;
  flex: 0 0 var(--sentido-ws-cta-w);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--sentido-ws-cta-h);
  margin-top: var(--sentido-ws-cta-top);
  padding: 0 16px;
  border-radius: var(--sentido-ws-cta-radius);
  background-color: var(--color-orange);
  box-shadow: var(--sentido-ws-cta-shadow);
  font-size: 0.90625rem;            /* 14,5px */
  font-weight: var(--font-weight-bold);
  line-height: 23.93px;
  color: var(--color-white);
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.sentido-ws__cta:hover,
.sentido-ws__cta:focus-visible {
  background-color: var(--color-orange-dark);
  color: var(--color-white);
}

.sentido-ws__cta:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}


/* ============================================================ */
/* RESPONSIVO                                                  */
/* ============================================================ */
/* Os recuos de 79,667/107,663 são proporção de um card de 1349: abaixo de
   1248 viram um par simétrico e o vão entre texto e botão vira o gap. */
@media (max-width: 1247.98px) {
  .sentido-ws__card {
    padding-right: 48px;
    padding-left: 48px;
  }
}

/* Uma coluna: o botão desce para debaixo do texto e ocupa a largura do card */
@media (max-width: 991.98px) {
  .sentido-ws {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .sentido-ws__card {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 36px 40px 40px;
  }

  .sentido-ws__text {
    flex: 0 1 auto;
  }

  .sentido-ws__title {
    font-size: 1.75rem;             /* 28px */
    line-height: 34px;
  }

  .sentido-ws__cta {
    flex: 0 0 auto;
    margin-top: 28px;
  }
}

@media (max-width: 767.98px) {
  .sentido-ws {
    padding: 56px 16px;
  }

  .sentido-ws__card {
    padding: 28px 24px 32px;
  }

  .sentido-ws__title {
    font-size: 1.5rem;              /* 24px */
    line-height: 30px;
  }

  .sentido-ws__lead {
    font-size: 1.0625rem;           /* 17px */
    line-height: 24px;
  }
}

/* Abaixo de 576 o rótulo do botão passa de uma linha — daí a altura solta */
@media (max-width: 575.98px) {
  .sentido-ws__title {
    font-size: 1.375rem;            /* 22px */
    line-height: 28px;
  }

  .sentido-ws__lead {
    font-size: 1rem;                /* 16px */
    line-height: 22.5px;
  }

  .sentido-ws__cta {
    height: auto;
    min-height: 52px;
    padding: 12px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sentido-ws__cta {
    transition-duration: 1ms;
  }
}


/* ============================================================ */
/* 12/13 — CONTINUE EXPLORANDO O ECOSSISTEMA — sec-continue 2717:914*/
/* origem: sections/1-continue.css                             */
/* ============================================================ */
/* ============================================================ */
/* SECTION: CONTINUE                                           */
/* ============================================================ */
.continue-workshops {
  position: relative;
  padding: 51px 24px 63px;
  background-image: linear-gradient(
    to bottom,
    var(--continue-workshops-bg-top) 0%,
    var(--continue-workshops-bg-bottom) 100%
  );
  font-family: var(--font-primary);
}

.continue-workshops__container {
  box-sizing: border-box;
  max-width: var(--continue-workshops-container);
  margin: 0 auto;
  padding-inline: var(--continue-workshops-gutter);
}


/* --- Cabeçalho: título e régua laranja --- */
.continue-workshops__header {
  text-align: center;
}

/* 630px é a largura da caixa de texto no Figma (2717:918) e é o que
   produz a quebra depois de "ecossistema": no Chrome a linha mede
   620,2px sozinha e 672,2px com o "de" junto. */
.continue-workshops__title {
  max-width: 630px;
  margin: 0 auto;
  font-size: 2.4rem;                     /* 38.4px */
  font-weight: var(--font-weight-black);
  line-height: 48px;
  color: var(--color-navy-deep);
}

/* 36px = régua em y:132 menos os 96 da caixa de duas linhas do título */
.continue-workshops__rule {
  display: block;
  width: 96px;
  height: 4px;
  margin: 36px auto 0;
  background-color: var(--color-accent);
}


/* ============================================================ */
/* CARDS                                                       */
/* ============================================================ */
/* A fileira ocupa exatamente o conteúdo do contêiner do título
   (1080 − 2×32 = 1016), que é onde ela começa no frame (x:452 medido
   no screenshot). No Figma os dois cards somam 999 e sobram 17px à
   direita do frame de 1016 — sobra sem lógica de design, herdada do
   estado em que a sanfona foi congelada. Aqui os flex-grow fecham a
   fileira, como acontece nas páginas irmãs. */
.continue-workshops__cards {
  display: flex;
  gap: var(--continue-workshops-card-gap);
  height: var(--continue-workshops-card-height);
  max-width: var(--continue-workshops-cards);
  margin: 68px auto 0;
  padding: 0;
}

/* A expansão é só o flex-grow: base 0 + razão 682/314 do Figma. */
.continue-workshops__card {
  position: relative;
  flex: var(--continue-workshops-grow-closed) 1 0;
  min-width: 0;
  min-height: 0;
  border-radius: var(--continue-workshops-radius);
  overflow: hidden;
  transition: flex-grow var(--continue-workshops-dur) var(--continue-workshops-ease);
}

.continue-workshops__card.is-open {
  flex-grow: var(--continue-workshops-grow-open);
}


/* --- Camadas de arte ---------------------------------------- */
/* isolation confina o mix-blend-mode da foto ao próprio card */
.continue-workshops__art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
}

.continue-workshops__art::before {
  content: '';
  position: absolute;
  inset: 0;
}

/* Cada card tem o enquadramento do Figma no estado em que o Figma o
   mostra (Agenda aberto, Formação fechado). No OUTRO estado não há
   frame de referência: os dois caem no enquadramento neutro — foto do
   tamanho do card, `cover`, sem deformação. É o que evita que a caixa
   de 229% do Formação vire um esticão de 1591px quando ele abre. */
.continue-workshops__photo {
  position: absolute;
  inset: 0;
  max-width: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Card 1 — Agenda: o contêiner 2727:580 tem preenchimento BRANCO sob o
   degradê de 84%, ou seja, é opaco — o navy → índigo do 2727:578 e o
   escurecedor preto do 2727:579 ficam embaixo dele e nunca aparecem.
   Medido: com as três camadas empilhadas o card sai ~23/255 mais escuro
   que a referência em toda a arte (RMSE 34,5); com a base branca, 23,3. */
.continue-workshops__card--agenda .continue-workshops__art::before {
  background-color: var(--color-white);
  background-image:
    linear-gradient(237.12deg, rgba(103, 83, 96, .84) 3.93%, rgba(1, 0, 7, .84) 98.44%);
}

/* No Figma a foto mede 682 × 511,7 num card de 681,8 × 480 — ou seja,
   largura cheia e 106,6% de altura ancorada em −26,63%, que é o que
   faz o calendário terminar na faixa escura da base. A proporção dessa
   caixa (1,333) é a mesma do arquivo (1500 × 1125), então aqui `cover`
   e o esticão do Figma dão exatamente o mesmo recorte. */
.continue-workshops__card--agenda .continue-workshops__photo {
  opacity: .61;
  mix-blend-mode: soft-light;
}

.continue-workshops__card--agenda.is-open .continue-workshops__photo {
  top: -26.63%;
  bottom: auto;
  height: 106.6%;
}

/* Fechado não há frame: recorte central, um pouco acima do meio, que é
   onde fica o calendário na foto. */
.continue-workshops__card--agenda:not(.is-open) .continue-workshops__photo {
  object-position: 50% 30%;
}

/* Card 2 — Formação de Especialistas: mesma história do card 1, só que
   aqui o degradê do contêiner 2727:520 já é opaco por si — o fundo
   teal → violeta (2727:510), o desenho vetorial dentro dele (2727:511)
   e o escurecedor preto (2727:519) são camadas mortas. */
.continue-workshops__card--especialistas .continue-workshops__art::before {
  background-image:
    linear-gradient(144.63deg,
      var(--continue-workshops-esp-from) 1.85%,
      var(--continue-workshops-esp-to) 53.48%);
}

/* No Figma a foto está numa caixa de 229,24% da largura do card com
   proporção 1,5, e o arquivo tem 1,978 — ou seja, o Figma a ESTICA
   24% na horizontal. Aqui ela não deforma: `cover` (altura do card,
   largura livre) com o `object-position` que mais se aproxima do
   enquadramento do frame. Varrido de 0% a 40% contra a referência,
   10% é o mínimo (RMSE 7,65, correlação de bordas 0,914; 0% dá 9,79 e
   20% dá 10,04). Uma posição só para os dois estados: aberto, o
   homem de óculos fica a ~36% da largura e a foto não desliza
   durante a animação. */
.continue-workshops__card--especialistas .continue-workshops__photo {
  object-position: 10% center;
  opacity: .27;
}


/* --- Logo: cada card guarda o recuo do seu frame ------------- */
/* 38px no Agenda e 25px no Formação — medido nos dois no screenshot
   (x:490 e x:1162). É divergência do Figma, não do corpo do card, que
   em ambos recua 34; reverter = igualar os dois ao recuo do corpo. */
.continue-workshops__logo {
  position: absolute;
  display: block;
  top: 35px;
  width: 52.46px;
  height: 39.16px;
}

.continue-workshops__card--agenda .continue-workshops__logo {
  left: 38px;
}

.continue-workshops__card--especialistas .continue-workshops__logo {
  left: 25px;
}


/* --- Corpo: ancorado na base, cresce para cima --------------- */
/* Por isso a altura de 480px não muda quando o card abre. */
.continue-workshops__body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  box-sizing: border-box;
  padding: var(--continue-workshops-pad);
  gap: 12px;
  transition: gap var(--continue-workshops-dur) var(--continue-workshops-ease);
}

/* 13px no card aberto: é a distância entre a base do título (298,0) e
   o topo do apoio (311,3) medida no card da Agenda. */
.continue-workshops__card.is-open .continue-workshops__body {
  gap: 13px;
}

/* Fechado o título segura a quebra em três linhas do Figma (266px);
   aberto ele se estende até a borda do card, como na irmã. */
.continue-workshops__card-title {
  margin: 0;
  max-width: 266px;
  transition: max-width var(--continue-workshops-dur) var(--continue-workshops-ease);
}

.continue-workshops__card.is-open .continue-workshops__card-title {
  margin-right: calc(var(--continue-workshops-pad) * -1);
  align-self: stretch;
  max-width: none;
}

/* O título é o gatilho do disclosure; o ::before estende o clique ao
   card inteiro, inclusive à área da foto. */
/* display: block porque um <button> inline dentro do <h3> herda o strut de
   16px do corpo: o h3 mede ~3px a mais que a caixa de linha do título e
   empurra a pilha inteira para cima do lugar medido no Figma. */
.continue-workshops__trigger {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-white);
  font-family: inherit;
  font-size: 1.5rem;                     /* 24px — fechado */
  font-weight: var(--font-weight-black);
  line-height: 26px;
  text-align: left;
  cursor: pointer;
  transition:
    font-size   var(--continue-workshops-dur) var(--continue-workshops-ease),
    line-height var(--continue-workshops-dur) var(--continue-workshops-ease);
}

.continue-workshops__trigger::before {
  content: '';
  position: absolute;
  inset: 0;
}

.continue-workshops__card.is-open .continue-workshops__trigger {
  font-size: 2.25rem;                    /* 36px — aberto */
  line-height: 32.24px;
}

.continue-workshops__trigger:focus-visible {
  outline: 2px solid var(--color-amber);
  outline-offset: 4px;
}

/* As larguras das caixas de texto são o que reproduz as quebras do
   design: 226px fechado (Formação) e 309px aberto (Agenda). */
.continue-workshops__desc {
  margin: 0;
  max-width: 226px;
  color: var(--color-white);
  font-size: .75rem;                     /* 12px */
  font-weight: var(--font-weight-regular);
  line-height: 14px;
  transition:
    font-size   var(--continue-workshops-dur) var(--continue-workshops-ease),
    line-height var(--continue-workshops-dur) var(--continue-workshops-ease),
    max-width   var(--continue-workshops-dur) var(--continue-workshops-ease);
}

.continue-workshops__card.is-open .continue-workshops__desc {
  max-width: 309px;
  font-size: 1rem;                       /* 16px */
  line-height: 21.82px;
}


/* --- Painel do CTA: sai do fluxo quando fechado -------------- */
/* height: 0 (e não só opacity) — senão o texto do card fechado subiria
   a altura do botão. visibility tira o link da árvore de
   acessibilidade enquanto o card está recolhido. */
/* margin-top negativo = o `gap` de 12px que o painel de altura zero
   ainda cobra do flex fechado. */
.continue-workshops__panel {
  height: 0;
  margin-top: -12px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    height     var(--continue-workshops-dur) var(--continue-workshops-ease),
    margin-top var(--continue-workshops-dur) var(--continue-workshops-ease),
    opacity    var(--continue-workshops-dur) var(--continue-workshops-ease),
    transform  var(--continue-workshops-dur) var(--continue-workshops-ease),
    visibility 0s linear var(--continue-workshops-dur);
}

/* 45px = 12 + 20,83 + 12 (a caixa do botão no Figma).
   margin-top 12 fecha os 25,3px entre a base do apoio e o topo do
   botão medidos no card da Agenda (13 do gap + 12). */
.continue-workshops__card.is-open .continue-workshops__panel {
  height: 45px;
  margin-top: 12px;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    height     var(--continue-workshops-dur) var(--continue-workshops-ease),
    margin-top var(--continue-workshops-dur) var(--continue-workshops-ease),
    opacity    var(--continue-workshops-dur) var(--continue-workshops-ease),
    transform  var(--continue-workshops-dur) var(--continue-workshops-ease),
    visibility 0s;
}

/* z-index acima do ::before do gatilho, senão o link não recebe o clique */
.continue-workshops__cta {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;                              /* no Figma a seta está no mesmo texto:
                                            o vão é um espaço, não um gap de 6 */
  box-sizing: border-box;
  padding: 12px 22px;
  border-radius: 10px;
  background-color: var(--color-white);
  color: var(--color-navy-deep);
  font-size: .8375rem;                   /* 13.4px */
  font-weight: var(--font-weight-bold);
  line-height: 20.83px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease;
}

.continue-workshops__cta:hover,
.continue-workshops__cta:focus-visible {
  background-color: #f2f1fa;
  color: var(--color-navy-deep);
}

.continue-workshops__cta:focus-visible {
  outline: 2px solid var(--color-amber);
  outline-offset: 3px;
}

.continue-workshops__cta-arrow {
  display: inline-block;
}


/* ============================================================ */
/* RESPONSIVO                                                  */
/* ============================================================ */

/* Entre 1016+48 e 992 não há regra: `max-width` já deixa a fileira
   encolher sozinha com a largura disponível, e os flex-grow mantêm a
   proporção 682/314 dos cards. */

/* Empilha. Aqui a razão 682/314 NÃO serve para repartir a altura: o
   card fechado sairia com 154px e o conteúdo dele mede 200 (34 + 78 do
   título em três linhas + 12 + 42 do apoio + 34). Cada estado passa a
   ter a sua altura mínima, e é ela que anima. */
@media (max-width: 991.98px) {
  .continue-workshops__cards {
    flex-direction: column;
    height: auto;
    max-width: 560px;
  }

  .continue-workshops__card {
    flex: 0 0 auto;
    min-height: 220px;
    transition: min-height var(--continue-workshops-dur) var(--continue-workshops-ease);
  }

  .continue-workshops__card.is-open {
    min-height: 355px;
  }

  .continue-workshops__desc,
  .continue-workshops__card.is-open .continue-workshops__desc {
    max-width: 46ch;
  }

  .continue-workshops__card-title,
  .continue-workshops__card.is-open .continue-workshops__card-title {
    max-width: none;
  }

  /* Empilhado o card da Agenda perde o deslocamento vertical do Figma
     (o card é baixo demais para os −26%) e fica no recorte neutro. */
  .continue-workshops__card--agenda .continue-workshops__photo,
  .continue-workshops__card--agenda.is-open .continue-workshops__photo {
    inset: 0;
    height: 100%;
    object-position: 50% 30%;
  }
}

@media (max-width: 767.98px) {
  .continue-workshops {
    padding: 40px 16px 48px;
  }

  .continue-workshops__container {
    padding-inline: 0;
  }

  .continue-workshops__title {
    font-size: 1.75rem;                  /* 28px */
    line-height: 34px;
  }

  .continue-workshops__rule {
    margin-top: 28px;
  }

  .continue-workshops__cards {
    margin-top: 40px;
  }

  .continue-workshops__body {
    padding: 24px;
  }

  .continue-workshops__trigger {
    font-size: 1.25rem;                  /* 20px */
    line-height: 24px;
  }

  .continue-workshops__card.is-open .continue-workshops__trigger {
    font-size: 1.625rem;                 /* 26px */
    line-height: 30px;
  }

  .continue-workshops__card.is-open .continue-workshops__desc {
    font-size: .9375rem;                 /* 15px */
    line-height: 20px;
  }

  .continue-workshops__card--agenda .continue-workshops__logo,
  .continue-workshops__card--especialistas .continue-workshops__logo {
    top: 24px;
    left: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .continue-workshops__card,
  .continue-workshops__body,
  .continue-workshops__card-title,
  .continue-workshops__trigger,
  .continue-workshops__desc,
  .continue-workshops__panel,
  .continue-workshops__cta {
    transition-duration: 1ms;
  }
}


/* ============================================================ */
/* 13/13 — ASIDE DE INSCRIÇÃO — Aside 2750:105                 */
/* origem: sections/4-aside.css                                */
/* ============================================================ */
/* ============================================================ */
/* SECTION: ASIDE DE INSCRIÇÃO                                 */
/* ============================================================ */
/* `fixed` + `top: 50%` com `translateY(-50%)`: como a altura entra na
   conta a cada quadro, o card continua centrado na tela enquanto abre —
   ele cresce para os dois lados, e não só para baixo. */
.aside-ws {
  position: fixed;
  top: 50%;
  right: var(--aside-ws-inset);
  z-index: var(--aside-ws-z);
  width: var(--aside-ws-width);
  font-family: var(--font-primary);

  /* estado de partida: fora da tela, à direita. Sem JS ele fica assim —
     o mesmo conteúdo já está no hero e na seção de investimento. */
  opacity: 0;
  visibility: hidden;
  transform: translate(calc(var(--aside-ws-width) + var(--aside-ws-inset)), -50%);
  transition: transform 0.4s ease, opacity 0.3s ease, visibility 0s linear 0.4s;
}

/* Entra quando o hero termina de sair da tela (`4-aside.js`) */
.aside-ws.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
  transition: transform 0.4s ease, opacity 0.3s ease, visibility 0s linear 0s;
}

/* A borda existe nos dois estados e só troca de cor: fechada ela é laranja
   e emenda com o cabeçalho (291 × 46 de laranja cheio, como no export);
   aberta vira `#e3e5ee` e reproduz o 1px que o Figma desenha em volta do
   cabeçalho de 289 × 44. `overflow: hidden` faz o laranja respeitar o raio
   e recorta o corpo enquanto ele abre. */
.aside-ws__card {
  overflow: hidden;
  border: 1px solid var(--color-orange);
  border-radius: var(--aside-ws-radius);
  background-color: var(--color-white);
  box-shadow: 0 24px 48px -32px rgba(41, 35, 92, 0.25);
  transition: border-radius 0.32s ease, border-color 0.32s ease;
}

.aside-ws.is-open .aside-ws__card {
  border-color: var(--color-border-soft);
  border-radius: var(--aside-ws-radius-open);
}


/* --- Cabeçalho (é a faixa inteira quando fechado) --- */
.aside-ws__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: var(--aside-ws-head-height);
  padding: 0 26px;                        /* texto em x=27, chevron a 27 da direita */
  border: 0;
  background-color: var(--color-orange);
  font-family: inherit;
  font-size: 0.9rem;                      /* 14.4px */
  line-height: 22.32px;
  color: var(--color-white);
  text-align: left;
  cursor: pointer;
}

.aside-ws__toggle-texto strong {
  font-weight: var(--font-weight-bold);
}

.aside-ws__toggle-turma {
  font-weight: var(--font-weight-light);
}

/* export do Figma: 10.707 × 6.061, branco, apontando para cima */
.aside-ws__chevron {
  flex-shrink: 0;
  width: 10.71px;
  height: 6.06px;
  transition: transform 0.32s ease;
}

.aside-ws.is-open .aside-ws__chevron {
  transform: rotate(180deg);
}


/* --- Corpo: "Resumo técnico" ---
   `grid-template-rows: 0fr → 1fr` anima a altura sem precisar saber o
   valor final; onde não houver suporte, vira um liga-desliga seco. */
.aside-ws__corpo {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s ease;
}

.aside-ws.is-open .aside-ws__corpo {
  grid-template-rows: 1fr;
}

.aside-ws__corpo-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 26px;
}

.aside-ws.is-open .aside-ws__corpo-inner {
  padding-bottom: 9px;                    /* fecha os 418 do card aberto */
}

.aside-ws__title {
  margin: 18px 0 9px;                     /* caixa do título em y=63; 1ª linha em 89.36 */
  font-size: 0.7rem;                      /* 11.2px */
  font-weight: var(--font-weight-bold);
  line-height: 17.36px;
  text-transform: uppercase;
  color: var(--color-indigo);
}

.aside-ws__specs {
  margin: 0;
  padding: 0;
}

.aside-ws__spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;                        /* 12 + 21.82 + 12 + 1 = 46.82, o passo do Figma */
  border-bottom: 1px dashed var(--color-border-soft);
}

.aside-ws__spec dt {
  font-size: 0.881rem;                    /* 14.1px */
  font-weight: var(--font-weight-regular);
  line-height: 21.82px;
  color: var(--color-navy-soft);
}

.aside-ws__spec dd {
  margin: 0;
  font-size: 0.881rem;                    /* 14.1px */
  font-weight: var(--font-weight-bold);
  line-height: 21.82px;
  text-align: right;
  color: var(--color-navy-deep);
}

.aside-ws__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;                       /* 4ª linha termina em 276.61, CTA em 296.61 */
  padding: 13px 26px 15px;                /* 50.33 no Figma */
  border-radius: 10px;
  background-color: var(--color-orange);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.65);
  font-size: 0.9rem;                      /* 14.4px */
  font-weight: var(--font-weight-bold);
  line-height: 22.32px;
  color: var(--color-white);
  text-decoration: none;
  transition: background-color 0.2s;
}

.aside-ws__cta:hover {
  background-color: var(--color-orange-dark);
  color: var(--color-white);
}

.aside-ws__share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;                       /* CTA termina em 346.94, botão em 358.94 */
  padding: 12px;                          /* 49 = 12 + 23 + 12 + as duas bordas */
  border: 1px solid var(--color-border-soft);
  border-radius: 10px;
  background-color: var(--color-white);
  font-family: inherit;
  font-size: 0.863rem;                    /* 13.8px */
  font-weight: var(--font-weight-bold);
  line-height: normal;
  color: var(--color-navy-deep);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.aside-ws__share:hover {
  border-color: var(--color-navy-soft);
  background-color: rgba(41, 35, 92, 0.04);
}

.aside-ws__share img {
  width: 24px;
  height: 23px;
}


/* ============================================================ */
/* RESPONSIVO                                                  */
/* ============================================================ */
/* Abaixo de 768 o card de 291px cobriria quase a tela inteira, e a seção
   de investimento já traz os mesmos CTAs. */
@media (max-width: 767.98px) {
  .aside-ws {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aside-ws,
  .aside-ws__card,
  .aside-ws__corpo,
  .aside-ws__chevron {
    transition: none;
  }
}


/* ============================================================ */
/* REVEAL — preload da 1ª dobra                                */
/* ============================================================ */
/* Não vem do Figma: é o contrato de reveal do site (reveal-animations.css
   + workshopDetalhes.anim.js). O hero é a 1ª dobra, então ele começa
   oculto por CSS para não "piscar" no load antes de o JS marcar `.reveal`;
   o anim.js tira `--preload` no frame seguinte. Sem JS o <noscript> da view
   reexibe tudo — a 1ª dobra nunca pode depender de script para aparecer. */
.workshop-detalhes-page--preload .hero-workshop__tags,
.workshop-detalhes-page--preload .hero-workshop__title,
.workshop-detalhes-page--preload .hero-workshop__subtitle,
.workshop-detalhes-page--preload .hero-workshop__actions,
.workshop-detalhes-page--preload .hero-workshop__resumo {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .workshop-detalhes-page--preload .hero-workshop__tags,
  .workshop-detalhes-page--preload .hero-workshop__title,
  .workshop-detalhes-page--preload .hero-workshop__subtitle,
  .workshop-detalhes-page--preload .hero-workshop__actions,
  .workshop-detalhes-page--preload .hero-workshop__resumo {
    opacity: 1;
  }
}


/* ============================================================ */
/* SUBMENU — COMPARTILHAR (hero-workshop__share / aside-ws__share) */
/* ============================================================ */
/* Porte do submenu da PPFL Serviços (§3 da skill ppfl-page-conventions),
   reskinado nos tokens desta página. Injetado por JS em `.ws-share-portal`
   (ver a view) com `position: fixed`, e por isso não depende de nenhum
   ancestral `position: relative` — nem poderia: `.hero-workshop` tem
   `overflow: hidden` e `.aside-ws` tem `transform`, que vira containing
   block de `fixed`. Um menu filho de qualquer um dos dois seria cortado
   ou deslocado.

   Dois tokens não vieram da PPFL: o realce de hover (lá é
   `--color-page-bg`, que AQUI é branco e sumiria sobre o cartão branco) e
   o anel de foco (lá é o magenta da trilha, que esta página não tem). */
.workshop-detalhes-page {
  --ws-share-hover-bg: #f1f0fa;   /* mesma lavanda clara das pílulas e dos quadrados de ícone */
}

.workshop-detalhes-page .ws-share-menu {
  position: fixed;
  z-index: 200;                   /* acima do aside (30) e do menu de âncoras (20) */
  display: flex;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--color-border-soft);
  border-radius: 12px;
  background-color: var(--color-white);
  box-shadow: 0 16px 40px -12px rgba(41, 35, 92, 0.35);
}

.workshop-detalhes-page .ws-share-menu[hidden] {
  display: none;
}

.workshop-detalhes-page .ws-share-menu__item {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-navy-deep);  /* o ícone de "copiar link" usa currentColor */
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.workshop-detalhes-page .ws-share-menu__item:hover,
.workshop-detalhes-page .ws-share-menu__item:focus-visible {
  background-color: var(--ws-share-hover-bg);
  transform: translateY(-2px);
}

/* Índigo, e não o laranja de acento: sobre branco o laranja dá 2,3:1 e
   reprova o mínimo de 3:1 que a WCAG 2.2 pede para indicador de foco.
   O índigo dá 8,9:1 e é o token que a seção de público-alvo já usa. */
.workshop-detalhes-page .ws-share-menu__item:focus-visible {
  outline: 2px solid var(--color-indigo);
  outline-offset: 2px;
}

.workshop-detalhes-page .ws-share-menu__item svg {
  width: 24px;
  height: 24px;
}

@media (max-width: 575.98px) {
  .workshop-detalhes-page .ws-share-menu {
    gap: 6px;
    padding: 8px;
  }

  .workshop-detalhes-page .ws-share-menu__item {
    width: 32px;
    height: 32px;
  }

  .workshop-detalhes-page .ws-share-menu__item svg {
    width: 20px;
    height: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .workshop-detalhes-page .ws-share-menu__item {
    transition: none;
  }

  .workshop-detalhes-page .ws-share-menu__item:hover,
  .workshop-detalhes-page .ws-share-menu__item:focus-visible {
    transform: none;
  }
}


/* ============================================================ */
/* SLIDE-UP (mg-btn) — contrato portado da Academia            */
/* O texto sobe no hover/focus revelando uma 2ª cópia. O upgrade*/
/* do markup é feito por initMgButtons (mgButtons.js).          */
/* Escopado à página para não vazar (a Academia usa global).    */
/* Cópia do contrato de agenda-treinamento.css, só trocando o   */
/* wrapper — mesma velocidade e mesmas curvas.                  */
/* ============================================================ */
.workshop-detalhes-page {
  --mg-btn-swap-duration: 0.9s;          /* mesma velocidade da Academia */
}

/* Anti-FOUC: esconder conteudo cru enquanto JS nao upgrade o botao. */
.workshop-detalhes-page .mg-btn-auto:not(.mg-btn) { color: transparent !important; }
.workshop-detalhes-page .mg-btn-auto:not(.mg-btn) > svg,
.workshop-detalhes-page .mg-btn-auto:not(.mg-btn) > img,
.workshop-detalhes-page .mg-btn-auto:not(.mg-btn) > span:not(.mg-btn__inner):not(.mg-btn__swap):not(.mg-btn__swap-text):not(.mg-btn__icon-wrap):not(.mg-btn__icon) { opacity: 0 !important; visibility: hidden !important; }

.workshop-detalhes-page .mg-btn { position: relative; }
.workshop-detalhes-page .mg-btn__inner { display: inline-flex; align-items: center; gap: 10px; }
.workshop-detalhes-page .mg-btn__swap { position: relative; display: inline-grid; overflow: hidden; }
.workshop-detalhes-page .mg-btn__swap-text {
  grid-area: 1 / 1;
  transition: transform var(--mg-btn-swap-duration, .42s) cubic-bezier(.2, .7, .2, 1);
}
.workshop-detalhes-page .mg-btn__swap-text.is-absolute { position: absolute; inset: 0; transform: translate3d(0, 130%, 0); }
.workshop-detalhes-page .mg-btn:hover .mg-btn__swap-text.is-absolute,
.workshop-detalhes-page .mg-btn:focus-visible .mg-btn__swap-text.is-absolute { transform: translate3d(0, 0, 0); }
.workshop-detalhes-page .mg-btn:hover .mg-btn__swap-text.is-relative,
.workshop-detalhes-page .mg-btn:focus-visible .mg-btn__swap-text.is-relative { transform: translate3d(0, -130%, 0); }
.workshop-detalhes-page .mg-btn__icon { grid-area: 1 / 1; display: grid; place-items: center; transition: transform var(--mg-btn-swap-duration, .42s) cubic-bezier(.2, .7, .2, 1); }
.workshop-detalhes-page .mg-btn__icon.is-absolute { position: absolute; inset: 0; transform: translate3d(0, 130%, 0); }
.workshop-detalhes-page .mg-btn:hover .mg-btn__icon.is-absolute,
.workshop-detalhes-page .mg-btn:focus-visible .mg-btn__icon.is-absolute { transform: translate3d(0, 0, 0); }
.workshop-detalhes-page .mg-btn:hover .mg-btn__icon.is-relative,
.workshop-detalhes-page .mg-btn:focus-visible .mg-btn__icon.is-relative { transform: translate3d(0, -130%, 0); }
.workshop-detalhes-page .mg-btn__icon-wrap { width: var(--mg-icon-size, 16px); height: var(--mg-icon-size, 16px); }
.workshop-detalhes-page .mg-btn__icon svg { width: 100%; height: 100%; display: block; }

/* Sem animação de swap em reduced-motion: trava no estado de repouso. */
@media (prefers-reduced-motion: reduce) {
  .workshop-detalhes-page .mg-btn__swap-text,
  .workshop-detalhes-page .mg-btn__icon { transition: none; }
  .workshop-detalhes-page .mg-btn:hover .mg-btn__swap-text.is-absolute,
  .workshop-detalhes-page .mg-btn:focus-visible .mg-btn__swap-text.is-absolute,
  .workshop-detalhes-page .mg-btn:hover .mg-btn__icon.is-absolute,
  .workshop-detalhes-page .mg-btn:focus-visible .mg-btn__icon.is-absolute { transform: translate3d(0, 130%, 0); }
  .workshop-detalhes-page .mg-btn:hover .mg-btn__swap-text.is-relative,
  .workshop-detalhes-page .mg-btn:focus-visible .mg-btn__swap-text.is-relative,
  .workshop-detalhes-page .mg-btn:hover .mg-btn__icon.is-relative,
  .workshop-detalhes-page .mg-btn:focus-visible .mg-btn__icon.is-relative { transform: translate3d(0, 0, 0); }
}


/* ============================================================ */
/* PÁGINA DINÂMICA (Admin) — complementos às seções do mockup  */
/* Figma: Detalhe WS 2873:6 (com turma) e Detalhe WS_In-company 2802:2 */
/* ============================================================ */

/* --- Hero in-company (2802:114): sem resumo técnico; título, subtítulo, régua e CTAs centrados --- */
.hero-workshop--incompany .hero-workshop__grid {
  justify-content: center;
}

.hero-workshop--incompany .hero-workshop__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 780px;
  text-align: center;
}

.hero-workshop--incompany .hero-workshop__tags {
  justify-content: center;
}

.hero-workshop--incompany .hero-workshop__title {
  margin-top: 41px;                       /* tags em y 62 → H1 em y 103 */
  text-align: center;
}

.hero-workshop--incompany .hero-workshop__subtitle {
  max-width: 600px;
  text-align: center;
}

.hero-workshop--incompany .hero-workshop__actions {
  justify-content: center;
  margin-left: 0;
}

/* --- Para quem é este workshop? (2873:464): os crachás do mockup, fora das abas --- */
.paraquem-ws {
  padding: 79px 24px 97px;
  font-family: var(--font-primary);
  background-image: linear-gradient(179.72deg, #f6f5f6 0.84%, #e2e3f0 99.34%);
}

.paraquem-ws__container {
  box-sizing: border-box;
  max-width: var(--publico-ws-container);
  margin: 0 auto;
}

.paraquem-ws__header {
  text-align: center;
}

.paraquem-ws__title {
  margin: 0;
  font-size: 2.4rem;                     /* 38.4px */
  font-weight: var(--font-weight-black);
  line-height: 44.55px;
  color: var(--color-navy-deep);
}

.paraquem-ws__rule {
  display: block;
  width: 96px;
  height: 4px;
  margin: 42.45px auto 0;
  background-color: var(--color-orange);
}

.paraquem-ws__cards {
  max-width: 1096px;
  margin: 67px auto 0;                   /* régua em y 87–91 → cards em y 158 */
}

/* Os ícones dos perfis vêm do Admin: a largura do texto não é mais por card */
.paraquem-ws__cards .publico-ws__text {
  max-width: 200px;
}

/* --- O que você e sua organização ganham? (2873:519): cards numerados + nota --- */
.ganhos-ws {
  padding: 79px 24px 97px;
  font-family: var(--font-primary);
  background-image: linear-gradient(180deg, #e1e2ef 0%, #f6f5f6 100%);
}

.ganhos-ws__container {
  box-sizing: border-box;
  max-width: 1090px;
  margin: 0 auto;
}

.ganhos-ws__header {
  text-align: center;
}

.ganhos-ws__title {
  margin: 0;
  font-size: 2.4rem;                     /* 38.4px */
  font-weight: var(--font-weight-black);
  line-height: 44.55px;
  color: var(--color-navy-deep);
}

.ganhos-ws__rule {
  display: block;
  width: 96px;
  height: 4px;
  margin: 42.45px auto 0;
  background-color: var(--color-orange);
}

.ganhos-ws__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 62px 0 0;                      /* régua (91) → grid (212 + 21 de padding do Figma) */
  padding: 0;
}

.ganhos-ws__card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 22px;
  border: 2px solid #ece9f7;
  border-radius: 16px;
  background-color: var(--color-white);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ganhos-ws__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -28px rgba(41, 35, 92, 0.3);
}

.ganhos-ws__num {
  font-size: 1.625rem;                   /* 26px */
  font-weight: var(--font-weight-black);
  line-height: 42.9px;
  color: var(--color-orange);
}

.ganhos-ws__card-title {
  margin: 2px 0 0;
  font-size: 0.9375rem;                  /* 15px */
  font-weight: var(--font-weight-black);
  line-height: 23.93px;
  color: var(--color-navy-deep);
}

.ganhos-ws__card-text {
  margin: 0;
  font-size: 0.9375rem;                  /* 15px */
  font-weight: var(--font-weight-regular);
  line-height: 20.63px;
  color: #5c5a7e;
}

.ganhos-ws__nota {
  box-sizing: border-box;
  margin: 15px 0 0;                      /* grid termina em 678, nota em 693 */
  padding: 26px;
  border-radius: 16px;
  background-color: var(--color-navy-deep);
  font-size: 0.9375rem;                  /* 15px */
  font-weight: var(--font-weight-regular);
  line-height: 23.8px;
  color: var(--color-white);
}

/* --- Faixa "Quer explorar outros temas?" (2802:586): fundo claro, card com a mesma régua laranja --- */
.sentido-ws--explorar .sentido-ws__card {
  background-color: #e9e9e9;
}

/* --- Material para aprofundamento: cada card abre a lista de itens do Admin --- */
.ref-card__tag {
  position: absolute;
  top: 19px;
  left: 34px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  height: 27px;
  padding: 0 12px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.15);
  font-size: 0.6625rem;                  /* 10.6px */
  font-weight: var(--font-weight-regular);
  letter-spacing: 1.056px;
  line-height: 16.37px;
  text-transform: uppercase;
  color: var(--color-white);
}

/* Títulos nos tamanhos do Figma 2802:3 (fechado 18px, aberto 24px) e com quebra de linha: com título longo
   o nowrap do mockup cortava "Obras e manuais de referên…" */
.ref-card__trigger {
  font-size: 1.125rem;                   /* 18px — fechado */
  white-space: normal;
}

.ref-card.is-open .ref-card__trigger {
  font-size: 1.5rem;                     /* 24px — aberto */
}

/* O botão do card é um <button> (abre o modal), não mais um <a>: mesma pílula branca */
button.ref-card__btn {
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

/* --- Modal com os itens da categoria (anatomia do .ccl-livraria-modal; tokens próprios, fora do wrapper) --- */
.ws-material-modal .modal-dialog {
  max-width: 760px;
}

.ws-material-modal .modal-body {
  align-items: start;
}

.ws-material-modal__foto {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  background-size: cover;
  background-position: center;
}

.ws-material-modal__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(200deg, rgba(41, 35, 92, 0.35) 0%, rgba(41, 35, 92, 0.85) 100%);
}

.ws-material-modal--artigos .ws-material-modal__foto::after { background-image: linear-gradient(200deg, rgba(172, 58, 212, 0.45) 0%, rgba(41, 35, 92, 0.9) 100%); }
.ws-material-modal--publicacao .ws-material-modal__foto::after { background-image: linear-gradient(200deg, rgba(22, 145, 148, 0.45) 0%, rgba(0, 0, 0, 0.85) 100%); }
.ws-material-modal--videos .ws-material-modal__foto::after { background-image: linear-gradient(200deg, rgba(148, 22, 28, 0.5) 0%, rgba(0, 0, 0, 0.85) 100%); }

.ws-material-modal__tag {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 27px;
  padding: 0 12px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.18);
  font-size: 0.6625rem;                  /* 10.6px */
  letter-spacing: 1.056px;
  text-transform: uppercase;
  color: #ffffff;
}

.ws-material-modal .ccl-livraria__desc {
  margin-bottom: 18px;
}

/* overflow-x hidden + sem deslocamento no hover: o translateX do item fazia a lista (overflow: auto)
   ganhar barra de rolagem horizontal. */
.ws-material-modal__lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 0 2px 2px 0;
  scrollbar-width: thin;
}

.ws-material-modal__link {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "titulo seta" "meta seta";
  align-items: center;
  column-gap: 12px;
  padding: 12px 14px;
  border: 1px solid #e3e5ee;
  border-radius: 10px;
  background-color: #f5f6fa;
  color: #29235c;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

a.ws-material-modal__link:hover,
a.ws-material-modal__link:focus-visible {
  border-color: #29235c;
  background-color: #ffffff;
  color: #29235c;
  box-shadow: 0 6px 16px -10px rgba(41, 35, 92, 0.45);
}

a.ws-material-modal__link:hover .ws-material-modal__seta {
  transform: translateX(3px);
}

.ws-material-modal__seta {
  transition: transform 0.2s ease;
}

a.ws-material-modal__link:focus-visible {
  outline: 2px solid #ff8000;
  outline-offset: 2px;
}

.ws-material-modal__link--texto {
  cursor: default;
}

.ws-material-modal__item-titulo {
  grid-area: titulo;
  font-size: 0.9375rem;                  /* 15px */
  font-weight: 700;
  line-height: 1.35;
}

.ws-material-modal__item-meta {
  grid-area: meta;
  font-size: 0.8125rem;                  /* 13px */
  line-height: 1.4;
  color: #5b5880;
}

.ws-material-modal__seta {
  grid-area: seta;
  width: 18px;
  height: 18px;
  color: #ff8000;
}

@media (max-width: 575.98px) {
  .ws-material-modal__foto {
    min-height: 120px;
  }

  .ws-material-modal__lista {
    max-height: none;
  }
}

/* Com 1 ou 2 categorias a fileira divide o espaço igualmente */
.material-ws__refs--1 .ref-card,
.material-ws__refs--2 .ref-card {
  flex: 1 1 0;
}

.material-ws__inclusos {
  flex-wrap: wrap;
  row-gap: 26px;
}

.mat-card__cover:empty {
  background-image: linear-gradient(160deg, #169194 0%, #0d5e60 100%);
  border-radius: 10px;
}

/* --- Turma: várias turmas abertas empilham; indisponível, prazo e lote --- */
.turma-ws__card + .turma-ws__card {
  margin-top: 26px;
}

.turma-ws__cta--indisponivel {
  cursor: default;
  background-color: #9a97b3;
  box-shadow: none;
}

.turma-ws__prazo {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 14px 0 0;
  font-size: 0.8125rem;                  /* 13px */
  line-height: 18px;
  color: var(--color-text-muted);
}

.turma-ws__vagas {
  font-weight: var(--font-weight-bold);
  color: var(--color-orange);
}

.turma-ws__price-lote {
  margin: 8px 0 0;
  font-size: 0.75rem;                    /* 12px */
  line-height: 16px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-lilac-soft);
}

.turma-ws__price-value--consulte {
  font-size: 1.5rem;
  line-height: 32px;
}

.turma-ws__price-note {
  white-space: normal;
}

/* Experts: 1 ou 2 consultores ocupam o centro da fileira */
.experts-ws__grid[data-variante="2"] {
  max-width: 740px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.experts-ws__grid[data-variante="1"] {
  max-width: 360px;
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 991.98px) {
  .paraquem-ws,
  .ganhos-ws {
    padding: 56px 24px 64px;
  }

  .paraquem-ws__cards {
    margin-top: 40px;
  }

  .ganhos-ws__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 40px;
  }

  .experts-ws__grid[data-variante="2"] {
    max-width: var(--experts-ws-container);
  }
}

@media (max-width: 767.98px) {
  .paraquem-ws,
  .ganhos-ws {
    padding: 56px 16px;
  }

  .paraquem-ws__title,
  .ganhos-ws__title {
    font-size: 2rem;
    line-height: 1.2;
  }

  .paraquem-ws__rule,
  .ganhos-ws__rule {
    margin-top: 28px;
  }

  .hero-workshop--incompany .hero-workshop__title {
    margin-top: 24px;
  }

  .material-ws__inclusos .mat-card {
    flex-basis: 100%;
  }

  .material-ws__inclusos .mat-card + .mat-card {
    margin-left: 0;
  }
}

@media (max-width: 575.98px) {
  .paraquem-ws__title,
  .ganhos-ws__title {
    font-size: 1.75rem;
  }

  .ganhos-ws__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ganhos-ws__nota {
    padding: 20px 16px;
  }
}


/* ============================================================ */
/* WORKSHOP IN COMPANY — Figma 2969 (mockup figma-to-bootstrap  */
/* outputs/workshop-in-company, G3 aprovado). Só as diferenças  */
/* em relação ao merge da Workshops Detalhes acima; a fonte     */
/* continua sendo outputs/workshop-in-company/sections/*.css.   */
/* `:not(.ws-legado)`: a view legada (/legado) usa este arquivo  */
/* e fica como era.                                             */
/* ============================================================ */

/* --- Hero (sections/hero.css) --- */
.workshop-detalhes-page:not(.ws-legado) .hero-workshop--incompany .hero-workshop__tags { gap: 15px; }
.workshop-detalhes-page:not(.ws-legado) .hero-workshop--incompany .hero-workshop__subtitle { max-width: 503px; }   /* "desperdícios" cai para a 2ª linha */

@media (min-width: 768px) {
  /* tags terminam em y=157, H1 começa em 179.98 */
  .workshop-detalhes-page:not(.ws-legado) .hero-workshop--incompany .hero-workshop__title { margin-top: 23px; }
}

/* --- Público-alvo e valor gerado (sections/publico-alvo.css): degradê branco → #e1e2ef --- */
.workshop-detalhes-page[data-variante="incompany"]:not(.ws-legado) .publico-ws {
  --publico-ws-bg: #e1e2ef;
  background-color: var(--publico-ws-bg);
  background-image: linear-gradient(180deg, #fff 22px, var(--publico-ws-bg) 771px);
  background-repeat: no-repeat;
  background-size: 100% 980px;
}

/* --- Material (sections/material.css): cards de referência com mais respiro --- */
.workshop-detalhes-page[data-variante="incompany"]:not(.ws-legado) .ref-card.is-open { --ref-gap: 12.5px; }

@media (min-width: 768px) {
  .workshop-detalhes-page[data-variante="incompany"]:not(.ws-legado) .ref-card.is-open .ref-card__content { padding-bottom: 55px; }
}

@media (min-width: 992px) {
  .workshop-detalhes-page[data-variante="incompany"]:not(.ws-legado) .ref-card.is-open .ref-card__desc,
  .workshop-detalhes-page[data-variante="incompany"]:not(.ws-legado) .ref-card--publicacao .ref-card__desc { max-width: 425px; }
  .workshop-detalhes-page[data-variante="incompany"]:not(.ws-legado) .ref-card--videos .ref-card__desc { max-width: 252px; }

  /* --- Quer explorar outros temas (sections/explorar.css): título numa linha --- */
  .workshop-detalhes-page:not(.ws-legado) .sentido-ws--explorar .sentido-ws__text { flex-basis: 760px; }
}

.workshop-detalhes-page:not(.ws-legado) .sentido-ws--explorar .sentido-ws__lead { max-width: 634px; }

/* Links nunca sublinhados (pedido do autor): o mockup sublinhava o link do material no hover — feedback só pela cor */
.workshop-detalhes-page .mat-card__link:hover,
.workshop-detalhes-page .mat-card__link:focus { text-decoration: none; }


/* ============================================================ */
/* PERGUNTAS FREQUENTES — sections/faq.css (Figma sec-faq 2970:2) */
/* As duas variantes usam este desenho (o frame com turma não   */
/* tinha FAQ construída). Fora do mockup, de propósito: os      */
/* ajustes por posição (card 2 com min-height, card 3 com -2px) */
/* — aqui a lista vem do Admin.                                 */
/* ============================================================ */
.workshop-detalhes-page .ws-faq {
  --wsf-color-navy:         #29235c;
  --wsf-color-ink:          #191c1e;
  --wsf-color-text:         #666666;
  --wsf-color-accent:       #ff8000;
  --wsf-color-bg-top:       #f5f6fa;
  --wsf-color-bg-bottom:    #e8e8e8;
  --wsf-color-card:         #ffffff;
  --wsf-color-card-border:  #ebebf0;
  --wsf-color-sign-off:     #dedede;
  --wsf-container:          1000px;
  --wsf-pad-top:            91px;
  --wsf-title-width:        885px;
  --wsf-gap-title-rule:     46px;
  --wsf-gap-rule-list:      63px;
  --wsf-gap-cards:          23px;
  --wsf-pad-bottom:         117px;
  --wsf-card-radius:        4px;
  --wsf-sign:               36px;

  box-sizing: border-box;
  padding: var(--wsf-pad-top) 24px var(--wsf-pad-bottom);
  font-family: var(--font-primary);
  background: linear-gradient(180deg, var(--wsf-color-bg-top) 0%, var(--wsf-color-bg-bottom) 100%);
}

.ws-faq__container {
  max-width: var(--wsf-container);
  margin: 0 auto;
}

.ws-faq__title {
  max-width: var(--wsf-title-width);
  margin: 0 auto;
  font-size: 38px;
  font-weight: 800;
  line-height: 45px;
  text-align: center;
  color: var(--wsf-color-navy);
}

.ws-faq__rule {
  display: block;
  width: 96px;
  height: 4px;
  margin: var(--wsf-gap-title-rule) auto 0;
  position: relative;
  left: 2px;
  background-color: var(--wsf-color-accent);
}

.ws-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--wsf-gap-cards);
  margin-top: var(--wsf-gap-rule-list);
}

/* Especificidade acima de faq-module.css (carregado pela view) */
.ws-faq .ws-faq__item {
  position: relative;
  margin: 0;
  background: var(--wsf-color-card);
  border: 1px solid var(--wsf-color-card-border);
  border-radius: var(--wsf-card-radius) !important;
  box-shadow: 0 1px 3px rgba(41, 35, 92, 0.05);
  overflow: hidden;
}

.ws-faq .ws-faq__item:hover {
  border-color: var(--wsf-color-card-border);
  box-shadow: 0 1px 3px rgba(41, 35, 92, 0.05);
}

.ws-faq .ws-faq__item .accordion-button,
.ws-faq .ws-faq__item .accordion-button:not(.collapsed) {
  display: block;
  padding: 28px 90px 0 30px;
  font-size: 24px;
  font-weight: 800;
  line-height: 28px;
  color: var(--wsf-color-ink);
  background: transparent;
  box-shadow: none;
}

.ws-faq .ws-faq__item .accordion-button.collapsed {
  padding: 25px 90px 18px 30px;
}

.ws-faq .ws-faq__item .accordion-button:focus-visible {
  outline: 2px solid var(--wsf-color-accent);
  outline-offset: -4px;
}

.ws-faq .ws-faq__item .accordion-button::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 14px;
  width: var(--wsf-sign);
  height: var(--wsf-sign);
  margin: 0;
  border-radius: 50%;
  transform: none;
  background-color: var(--wsf-color-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Crect x='13' y='17' width='10' height='2' rx='1' fill='%23fff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 36px;
  transition: background-color 0.3s ease;
}

.ws-faq .ws-faq__item .accordion-button.collapsed::after {
  top: 17px;
  background-color: var(--wsf-color-sign-off);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Crect x='13' y='17' width='10' height='2' rx='1' fill='%23666'/%3E%3Crect x='17' y='13' width='2' height='10' rx='1' fill='%23666'/%3E%3C/svg%3E");
}

.ws-faq .ws-faq__item .accordion-button:not(.collapsed)::after {
  transform: none;
  background-color: var(--wsf-color-accent);
}

.ws-faq .ws-faq__item .accordion-body {
  box-sizing: border-box;
  padding: 14px 59px 18px 30px;
  font-size: 16px;
  line-height: 20px;
  color: var(--wsf-color-text);
}

.ws-faq .ws-faq__item .accordion-body p {
  margin: 0;
}

/* faq-module.css sublinha links nas respostas: aqui nunca (feedback por cor) */
.ws-faq .ws-faq__item .accordion-body a,
.ws-faq .ws-faq__item .accordion-body a:hover,
.ws-faq .ws-faq__item .accordion-body a:focus {
  text-decoration: none;
  color: var(--wsf-color-navy);
  font-weight: 700;
}

.ws-faq .ws-faq__item .accordion-body a:hover { color: var(--wsf-color-accent); }

@media (max-width: 991.98px) {
  .workshop-detalhes-page .ws-faq { --wsf-pad-top: 72px; --wsf-pad-bottom: 80px; --wsf-gap-rule-list: 48px; }
  .ws-faq__title { font-size: 32px; line-height: 39px; }
}

@media (max-width: 767.98px) {
  .workshop-detalhes-page .ws-faq { --wsf-pad-top: 56px; --wsf-pad-bottom: 64px; --wsf-gap-rule-list: 36px; --wsf-gap-cards: 16px; padding-inline: 16px; }
  .ws-faq__title { font-size: 26px; line-height: 32px; }
  .ws-faq__rule { margin-top: 28px; }
  .ws-faq .ws-faq__item .accordion-button,
  .ws-faq .ws-faq__item .accordion-button:not(.collapsed),   /* o aberto também (a regra base dele é mais específica) */
  .ws-faq .ws-faq__item .accordion-button.collapsed { font-size: 19px; line-height: 24px; padding: 20px 64px 18px 18px; }
  .ws-faq .ws-faq__item .accordion-button::after { top: 14px; }
  .ws-faq .ws-faq__item .accordion-button.collapsed::after { top: 14px; }
  .ws-faq .ws-faq__item .accordion-body { padding: 10px 18px 18px; }
}

@media (max-width: 575.98px) {
  .ws-faq__title { font-size: 23px; line-height: 29px; }
}

@media (prefers-reduced-motion: reduce) {
  .ws-faq .ws-faq__item .accordion-button::after { transition: none; }
}