/* Vocabulário · detalhe do termo (/conceitos/{id}/{slug}) — layout do Figma (pipeline figma-to-bootstrap,
   outputs/vocabulario-detalhe). GERADO do merged/styles.css (+ assets/css/mg-btn.css escopado): tokens que eram
   :root e o body{} do mockup ficam no wrapper .vocabulario-detalhe-page, para não vazar no header/rodapé.
   Corrigir no mockup (sections/) e regerar; só o bloco "LEANWEB" no fim é exclusivo daqui. */
/* ============================================================ */
/* VOCABULARIO-DETALHE — PÁGINA COMPLETA                       */
/* Merge de sections/*, na ordem do merge.json:                */
/* HERO DO TERMO · CORPO DO TERMO + ASIDE · CONTINUE SUA EVOLUÇÃO*/
/*                                                             */
/* Gerado a partir de sections/*.css — a fonte da verdade      */
/* continua sendo cada seção; ao editá-las, refazer o merge.   */
/* ============================================================ */

.vocabulario-detalhe-page {
  /* --- 1/3 · HERO DO TERMO — sec-hero 2965:266  (hero.css) --- */

  --font-primary:   'Roboto', sans-serif;
  --color-page-bg:  #ffffff;

  --vh-height:          445px;                       /* altura do frame */
  --vh-navy:            rgb(41, 35, 92);             /* 0–23.5% do véu */
  --vh-veil: linear-gradient(
    108.3deg,
    rgb(41, 35, 92) 23.534%,
    rgba(57, 65, 149, 0.92) 66.494%,
    rgba(22, 145, 148, 0.79) 108.16%
  );
  --vh-accent:          #ff8000;
  --vh-white:           #ffffff;
  --vh-summary-color:   rgba(255, 255, 255, 0.88);
  --vh-label-color:     rgba(255, 255, 255, 0.7);
  --vh-btn-border:      rgba(255, 255, 255, 0.35);
  --vh-btn-size:        40px;
  --vh-btn-radius:      10px;
  /* --- 2/3 · CORPO DO TERMO + ASIDE — sec-corpo 2966:2  (corpo.css) --- */


  /* Cores */
  --vc-navy:          #29235c;   /* títulos H2/H4, borda do card 3 */
  --vc-navy-cta:      #2a2566;   /* fundo do card LEIA TAMBÉM */
  --vc-accent:        #ff8000;   /* régua 56×4, pill, card 2, botão */
  --vc-teal:          #169194;   /* borda do card 1 */
  --vc-text:          #5b5b6b;   /* parágrafos e textos de card */
  --vc-text-strong:   #2b2b38;   /* itens da lista de aprendizados */
  --vc-grey:          #666666;   /* hashtags */
  --vc-faint:         #888780;   /* rótulos do aside, valores */
  --vc-dot:           #ef9f27;   /* marcador 6px do "Sobre o termo" */
  --vc-box-bg:        #f7f6f2;   /* caixas do aside */
  --vc-card-border:   #e6e0f2;   /* borda 1px dos cards (medida no print: 230,224,242) */
  --vc-btn-ink:       #412402;   /* texto do botão laranja */

  /* Estrutura (frame 1920) */
  --vc-main-w:        999px;     /* coluna principal: x 296 → 1295 */
  --vc-aside-w:       288px;     /* aside: x 1320 → 1608 */
  --vc-col-gap:       25px;      /* 1320 − 1295 */
  --vc-text-max:      920px;     /* max-w dos parágrafos (2965:134/139) */
  --vc-block-gap:     61.5px;    /* fim do parágrafo → próximo bloco (15.5 + pt 46) */
  --vc-card-gap:      15.5px;    /* entre cards e entre blocos do dump */
  --vc-radius:        14px;
  /* --- 3/3 · CONTINUE SUA EVOLUÇÃO — sec-continue 2965:228  (continue.css) --- */


  --vct-bg: linear-gradient(139.7deg, #29235c 0%, #394195 100%); /* fundo da faixa */
  --vct-accent: #ff8000;                       /* régua e links */
  --vct-text-sub: rgba(255, 255, 255, 0.78);   /* subtítulo e resumo do card 1 */
  --vct-text-card: rgba(255, 255, 255, 0.82);  /* resumo dos cards 2 e 3 */
  --vct-badge-bg: rgba(255, 255, 255, 0.16);
  --vct-ink: 20, 17, 50;                       /* #141132, base dos véus dos cards */
  --vct-card-w: 410px;
  --vct-card-h: 352px;
  --vct-card-gap: 43px;
  --vct-card-radius: 18px;
  --vct-content-w: 1316px;                     /* 3 x 410 + 2 x 43 */
}


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


/* ============================================================ */
/* 1/3 — HERO DO TERMO — sec-hero 2965:266                     */
/* origem: sections/hero.css                                   */
/* ============================================================ */
/* ============================================================ */
/* SECTION: HERO DO TERMO                                       */
/* ============================================================ */
.voc-hero {
  position: relative;
  isolation: isolate;
  min-height: var(--vh-height);
  overflow: hidden;
  background-color: var(--vh-navy);
  color: var(--vh-white);
  font-family: var(--font-primary);
}

/* Fundo. A foto é ESTICADA (fill) na janela 1920x445 — o Figma a entrega
   assim (lupa achatada de propósito). Largura e altura em % da seção: a arte
   escala junto com a seção e não é ampliada só na vertical em ultrawide
   além do que a altura permite; `fill` mantém o enquadramento idêntico. */
.voc-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.voc-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
}

.voc-hero__veil {
  position: absolute;
  inset: 0;
  background-image: var(--vh-veil);
}

/* Conteúdo: texto começa em x=299 aos 1920 → container 1370 (1322 úteis,
   centrados) com 24px de padding. */
.voc-hero__container {
  position: relative;
  z-index: 1;
  max-width: 1370px;
  padding: 120.5px 24px 85.5px;  /* medido contra o print: glifo do H1 5.5px abaixo da caixa do dump; base completa os 445 */
}

/* H1 2965:269: ExtraBold 64px, line-height 80.4% = 51.46px */
.voc-hero__title {
  margin: 0;
  font-size: 4rem;               /* 64px */
  font-weight: 800;
  line-height: 51.46px;
  color: var(--vh-white);
}

.voc-hero__title-accent {
  color: var(--vh-accent);
}

/* Resumo 2965:271: 24px normal (28.1px), 766px → quebra em "— a" / "base" */
.voc-hero__summary {
  max-width: 766px;
  margin: 43.9px 0 0;            /* mantém o resumo em y=216 */
  font-size: 1.5rem;             /* 24px */
  font-weight: 400;
  line-height: normal;
  color: var(--vh-summary-color);
}

/* Compartilhar: linha em y=314, 40px de altura; botões em x=424 */
.voc-hero__share {
  display: flex;
  align-items: center;
  margin-top: 41px;              /* 314 − (216 + 57) */
}

.voc-hero__share-label {
  flex: 0 0 auto;
  min-width: 125px;              /* botões começam em x=424 (299 + 125) */
  padding-right: 14px;           /* "Compartilhar termo:" (briefing) passa dos 125 */
  font-size: 0.8125rem;          /* 13px */
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--vh-label-color);
  white-space: nowrap;
}

.voc-hero__share-list {
  position: relative;              /* âncora do aviso "Link copiado!" (corpo.js) */
  display: flex;
  align-items: center;
  gap: 14px;
}

.voc-hero__share-btn {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--vh-btn-size);
  height: var(--vh-btn-size);
  box-sizing: border-box;
  border: 1px solid var(--vh-btn-border);
  border-radius: var(--vh-btn-radius);
  transition: background-color .2s ease, border-color .2s ease;
}

/* Facebook e X: o Figma exporta o botão inteiro (borda inclusa) como arte */
.voc-hero__share-btn--art {
  border: 0;
}

.voc-hero__share-btn img {
  display: block;
}

.voc-hero__share-btn:hover,
.voc-hero__share-btn:focus-visible {
  background-color: rgba(255, 255, 255, 0.12);
}

.voc-hero__share-btn:focus-visible {
  outline: 2px solid var(--vh-accent);
  outline-offset: 2px;
}


/* ============================================================ */
/* RESPONSIVO                                                   */
/* ============================================================ */
@media (max-width: 1399.98px) {
  .voc-hero__container { max-width: 1140px; }
}

@media (max-width: 991.98px) {
  /* abaixo de 992 a altura vem do conteúdo (os 445 do Figma sobravam embaixo)
     e a foto passa a cover: o `fill` achatava a lupa ao estreitar */
  .voc-hero { min-height: 0; }
  .voc-hero__photo { object-fit: cover; object-position: 75% 50%; }
  .voc-hero__container { padding-top: 88px; padding-bottom: 72px; }
  .voc-hero__title { font-size: 3.25rem; line-height: 56px; }
  .voc-hero__summary { margin-top: 24px; font-size: 1.25rem; }
  .voc-hero__share { margin-top: 32px; }
}

@media (max-width: 767.98px) {
  .voc-hero__container { padding-top: 64px; padding-bottom: 56px; }
  .voc-hero__title { font-size: 2.5rem; line-height: 46px; }
  .voc-hero__summary { font-size: 1.125rem; }
}

@media (max-width: 575.98px) {
  .voc-hero__container { padding-left: 16px; padding-right: 16px; }
  .voc-hero__title { font-size: 2.125rem; line-height: 40px; }
  .voc-hero__summary { font-size: 1rem; }
  .voc-hero__share { flex-wrap: wrap; row-gap: 12px; }
  .voc-hero__share-list { gap: 10px; }
}


/* ============================================================ */
/* 2/3 — CORPO DO TERMO + ASIDE — sec-corpo 2966:2             */
/* origem: sections/corpo.css                                  */
/* ============================================================ */
/* ============================================================ */
/* SECTION: CORPO DO TERMO + ASIDE                              */
/* ============================================================ */
.voc-corpo {
  background-color: var(--color-page-bg);
  font-family: var(--font-primary);
  padding: 38px 0 111px;           /* pill em y=38.1; card 3 termina em y=1339 de 1450 */
}

/* 1312 de conteúdo (999 + 25 + 288) em x=296 no frame 1920:
   o Figma está 8px à esquerda do centro → padding assimétrico (24 / 40) */
.voc-corpo__container {
  box-sizing: border-box;
  max-width: 1376px;
  margin: 0 auto;
  padding: 0 40px 0 24px;
}

/* --- Linha de tags (2965:122) --- */
.voc-corpo__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 62.9px;           /* base do pill (68.2) → H2 em y=131 */
}

.voc-corpo__categoria {
  display: inline-block;
  padding: 7px 16px;
  border: 1px solid var(--vc-accent);
  border-radius: 6px;
  background-color: #fff0e0;
  color: var(--vc-accent);
  font-size: 0.75rem;              /* 12px */
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: normal;
  text-transform: uppercase;
}

.voc-corpo__tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.voc-corpo__tag {
  padding: 6px 14px;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  background-color: #f0f0f0;
  color: var(--vc-grey);
  font-size: 0.781rem;             /* 12.5px */
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
}

/* --- Duas colunas: principal + aside sticky --- */
.voc-corpo__layout {
  display: flex;
  align-items: flex-start;         /* sem isso o sticky não tem para onde correr */
  gap: var(--vc-col-gap);
}

.voc-corpo__main {
  flex: 0 1 var(--vc-main-w);
  min-width: 0;
}

/* --- Blocos de texto (H2 + régua + parágrafo) --- */
.voc-corpo__bloco + .voc-corpo__bloco {
  margin-top: var(--vc-block-gap);
}

.voc-corpo__titulo {
  margin: 0;
  color: var(--vc-navy);
  font-size: 1.875rem;             /* 30px */
  font-weight: 900;
  line-height: normal;             /* 35.16px */
}

.voc-corpo__regua {
  display: block;
  width: 56px;
  height: 4px;
  margin-top: 15px;                /* H2 131 + 35.16 → régua em y=181 */
  border-radius: 2px;
  background-color: var(--vc-accent);
}

.voc-corpo__texto {
  max-width: var(--vc-text-max);
  margin: 26.375px 0 0;            /* régua termina em 185 → 1ª linha em 211.375 (15 + pt 11.375) */
  color: var(--vc-text);
  font-size: 1.031rem;             /* 16.5px */
  font-weight: 400;
  line-height: 29.7px;
}

/* --- Cards com borda lateral --- */
.voc-corpo__cards {
  display: flex;
  flex-direction: column;
  gap: var(--vc-card-gap);
  margin-top: var(--vc-block-gap);
}

.voc-corpo__card {
  padding: 30px 32px;
  border: 1px solid var(--vc-card-border);
  border-left: 5px solid var(--vc-card-accent, var(--vc-teal));
  border-radius: var(--vc-radius);
  background-color: #ffffff;
  box-shadow: 0 4px 9px rgba(41, 35, 92, 0.05);
}

.voc-corpo__card--aplicar      { --vc-card-accent: var(--vc-teal);   --vc-card-tint: #e3f2f2; }
.voc-corpo__card--erro         { --vc-card-accent: var(--vc-accent); --vc-card-tint: #fff0e0; }
.voc-corpo__card--aprendizados { --vc-card-accent: var(--vc-navy);   --vc-card-tint: #e5e5eb; }

.voc-corpo__card-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.voc-corpo__card-icon {
  display: flex;
  flex: 0 0 38px;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background-color: var(--vc-card-tint);
}

.voc-corpo__card-icon img {
  display: block;
  width: 20px;
  height: 20px;
}

.voc-corpo__card-title {
  margin: 0;
  color: var(--vc-navy);
  font-size: 1.188rem;             /* 19px */
  font-weight: 700;
  line-height: normal;
}

.voc-corpo__card-text {
  margin: 11.125px 0 0;
  color: var(--vc-text);
  font-size: 0.969rem;             /* 15.5px */
  font-weight: 400;
  line-height: 27.13px;
}

/* Lista de aprendizados (2965:172) */
.voc-corpo__checks {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.voc-corpo__check {
  display: flex;
  align-items: flex-start;
  gap: 12px;                       /* texto em x=32 (ícone 20 + 12) */
  color: var(--vc-text-strong);
  font-size: 0.969rem;             /* 15.5px */
  font-weight: 400;
  line-height: 24.8px;
}

.voc-corpo__check img {
  display: block;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 1px;                 /* top-px do dump */
}

/* --- Aside sticky (2965:185) --- */
.voc-corpo__aside {
  position: sticky;
  top: 24px;
  display: flex;
  flex: 0 0 var(--vc-aside-w);
  flex-direction: column;
  gap: 16px;
  width: var(--vc-aside-w);
}

.voc-corpo__box {
  padding: 18px 20px;
  border-radius: var(--vc-radius);
  background-color: var(--vc-box-bg);
}

.voc-corpo__box-label {
  margin: 0;
  color: var(--vc-faint);
  font-size: 0.625rem;             /* 10px */
  font-weight: 500;
  letter-spacing: 2px;
  line-height: 16px;
  text-transform: uppercase;
}

/* Sobre o termo: caixa de 132px no Figma — 18 + 16 + 10 + 29.3 + 11.7 + 29.3 + pb;
   posições medidas no print (marcadores em y=186 e 228) */
.voc-corpo__sobre {
  display: flex;
  flex-direction: column;
  gap: 11.7px;
  margin: 10px 0 0;
  padding: 0 0 0 15px;             /* marcador 6px + gap 9px */
  list-style: none;
}

.voc-corpo__box--sobre {
  padding-bottom: 16.7px;
}

.voc-corpo__sobre-item {
  position: relative;
  font-size: 0.781rem;             /* 12.5px */
  line-height: normal;             /* 14.65px por linha */
}

/* marcador centrado no bloco de duas linhas, como o items-center do dump */
.voc-corpo__sobre-item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -15px;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 3px;
  background-color: var(--vc-dot);
}

.voc-corpo__sobre-nome {
  display: block;
  color: var(--vc-navy);
  font-weight: 700;
}

.voc-corpo__sobre-valor {
  display: block;
  color: var(--vc-faint);
  font-weight: 400;
}

/* Compartilhar: botões 42×34 (SVG do botão inteiro, borda inclusa) */
.voc-corpo__share {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.voc-corpo__share-btn {
  text-decoration: none;
  display: block;
  width: 42px;
  height: 34px;
  border-radius: 7px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.voc-corpo__share-btn img {
  display: block;
  width: 42px;
  height: 34px;
}

/* não está no Figma — acabamento da conversão */
.voc-corpo__share-btn:hover,
.voc-corpo__share-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(41, 35, 92, 0.12);
}

.voc-corpo__share-feedback {
  position: absolute;
  right: 0;
  top: -28px;
  padding: 4px 9px;
  border-radius: 4px;
  background: #e1f5ee;
  color: #0f6e56;
  font-size: 0.75rem;              /* 12px */
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
}

/* CTA LEIA TAMBÉM (2965:219) */
.voc-corpo__cta {
  display: flex;
  flex-direction: column;
  gap: 6.1px;
  padding: 19px 20px 20px;
  border-radius: var(--vc-radius);
  background-color: var(--vc-navy-cta);
}

.voc-corpo__cta-eyebrow {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.813rem;             /* 13px */
  font-weight: 500;
  letter-spacing: 1.5px;
  line-height: 20.15px;
}

.voc-corpo__cta-title {
  max-width: 224px;                /* quebra após "conhecimentos" (linha medida: 213px) */
  margin: 0;
  padding-top: 7.9px;
  color: #ffffff;
  font-size: 0.938rem;             /* 15px */
  font-weight: 500;
  line-height: 20.25px;
}

.voc-corpo__cta-text {
  margin: 0;
  padding-bottom: 7.9px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.813rem;             /* 13px */
  font-weight: 400;
  line-height: 20.15px;
}

.voc-corpo__cta-btn {
  display: block;
  padding: 10px 16px;
  border-radius: 6px;
  background-color: var(--vc-accent);
  color: var(--vc-btn-ink);
  font-size: 0.813rem;             /* 13px */
  font-weight: 500;
  line-height: normal;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

/* não está no Figma — acabamento da conversão */
.voc-corpo__cta-btn:hover,
.voc-corpo__cta-btn:focus-visible {
  background-color: #ff9126;
  color: var(--vc-btn-ink);
}


/* ============================================================ */
/* RESPONSIVO                                                   */
/* ============================================================ */
@media (max-width: 1399.98px) {
  .voc-corpo__container { padding: 0 24px; }
  .voc-corpo__main { flex: 1 1 auto; }
}

/* Aside desce para baixo da coluna principal */
@media (max-width: 991.98px) {
  .voc-corpo { padding-bottom: 80px; }
  .voc-corpo__tags { margin-bottom: 48px; }
  .voc-corpo__layout {
    flex-direction: column;
    align-items: stretch;
    gap: 48px;
  }
  .voc-corpo__main { flex: 0 0 auto; }
  .voc-corpo__aside {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex: 0 0 auto;
    width: auto;
  }
  .voc-corpo__cta { grid-column: 1 / -1; }
  .voc-corpo__cta-title { max-width: none; }
}

@media (max-width: 767.98px) {
  .voc-corpo__titulo { font-size: 1.625rem; }      /* 26px */
  .voc-corpo__bloco + .voc-corpo__bloco,
  .voc-corpo__cards { margin-top: 48px; }
  .voc-corpo__card { padding: 26px 24px; }
}

@media (max-width: 575.98px) {
  .voc-corpo { padding: 32px 0 64px; }
  .voc-corpo__container { padding: 0 16px; }
  .voc-corpo__tags { margin-bottom: 40px; }
  .voc-corpo__titulo { font-size: 1.5rem; }        /* 24px */
  .voc-corpo__texto { margin-top: 22px; font-size: 1rem; line-height: 28px; }
  .voc-corpo__card { padding: 22px 18px 24px; }
  .voc-corpo__card-head { align-items: flex-start; gap: 12px; }
  .voc-corpo__card-title { align-self: center; font-size: 1.063rem; }  /* 17px */
  .voc-corpo__card-text { font-size: 0.938rem; line-height: 26px; }
  .voc-corpo__check { font-size: 0.938rem; }
  .voc-corpo__aside { grid-template-columns: 1fr; gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .voc-corpo__share-btn,
  .voc-corpo__cta-btn { transition-duration: 1ms; }
}


/* ============================================================ */
/* 3/3 — CONTINUE SUA EVOLUÇÃO — sec-continue 2965:228         */
/* origem: sections/continue.css                               */
/* ============================================================ */
/* ============================================================ */
/* SECTION                                                      */
/* ============================================================ */
.voc-continue {
  background: var(--vct-bg);
  font-family: var(--font-primary);
  padding: 96px 24px 79px;   /* 96 topo; 701 - (270 + 352) = 79 base */
  overflow: hidden;
}

.voc-continue__container {
  max-width: var(--vct-content-w);
  margin: 0 auto;
}

/* --- Cabeçalho --- */
.voc-continue__header {
  margin-left: -1px;
  min-height: 143px;         /* título + régua + subtítulo; cards começam em y=270 */
  margin-bottom: 31px;
}

.voc-continue__title {
  margin: 0;
  font-size: 34px;
  font-weight: 900;
  line-height: 42px;         /* 2px de respiro + 40px de linha */
  color: #fff;
}

.voc-continue__rule {
  display: block;
  width: 56px;
  height: 4px;
  margin: 15px 0 15px;       /* régua em y=57, subtítulo em y=76 */
  border-radius: 2px;
  background: var(--vct-accent);
}

.voc-continue__subtitle {
  margin: 0;
  padding-top: 9.445px;
  max-width: 951px;
  font-size: 20px;
  font-weight: 400;
  line-height: 28.9px;
  color: var(--vct-text-sub);
}

/* --- Lista de cards --- */
.voc-continue__list {
  display: flex;
  justify-content: center;
  gap: var(--vct-card-gap);
  margin: 0 3px 0 -3px;      /* Figma: cards em x=299 (1316 centrados), título em x=301 */
}

.voc-continue__card {
  position: relative;
  flex: 0 0 var(--vct-card-w);
  width: var(--vct-card-w);
  height: var(--vct-card-h);
  border-radius: var(--vct-card-radius);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: #fff;
  isolation: isolate;
}

/* Contêiner da foto: recorte + raio aqui, nunca no <img> */
.voc-continue__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  border-radius: var(--vct-card-radius);
}

.voc-continue__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

/* Véu escuro */
.voc-continue__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(178.4deg, rgba(var(--vct-ink), 0.05) 6.56%, rgba(var(--vct-ink), 0.55) 25.9%, rgba(var(--vct-ink), 0.94) 81.8%);
}

.voc-continue__card:hover .voc-continue__media img {
  transform: scale(1.06);
}

.voc-continue__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 30px 28px;
}

.voc-continue__badge {
  display: inline-block;
  padding: 6px 13px;
  border-radius: 6px;
  background: var(--vct-badge-bg);
  backdrop-filter: blur(1px);
  font-size: 11px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

.voc-continue__card-title {
  margin: 0;
  padding-top: 4px;
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
  color: #fff;
}

.voc-continue__text {
  margin: 0;
  padding-bottom: 6px;
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px;
  color: var(--vct-text-card);
}

.voc-continue__link {
  font-size: 14.5px;
  font-weight: 700;
  line-height: normal;
  color: var(--vct-accent);
  text-decoration: none;
  /* área de toque ≥ 34px sem mudar o desenho (o padding é compensado pela margem) */
  display: inline-block;
  padding-block: 8px;
  margin-block: -8px;
}

/* sem sublinhado (pedido do autor): feedback pela cor */
.voc-continue__link:hover,
.voc-continue__link:focus-visible {
  color: #ffa04a;
  text-decoration: none;
}

/* Card 1 (termo): no Figma tem outra tipografia e foto recortada à direita */
.voc-continue__card--termo .voc-continue__media img {
  inset: auto;
  left: -85.11%;
  top: -0.78%;
  width: 186.28%;
  height: 101.62%;
}
.voc-continue__card--termo::before {
  background: linear-gradient(170.8deg, rgba(var(--vct-ink), 0) 7.57%, rgba(var(--vct-ink), 0.5) 28.74%, rgba(var(--vct-ink), 0.75) 38.68%, rgb(var(--vct-ink)) 80.45%);
}
.voc-continue__card--termo .voc-continue__card-title {
  padding-top: 18px;         /* badge→título 28px no Figma (título em y=194) */
  padding-bottom: 10px;
  font-size: 21px;
  line-height: 28px;
}
.voc-continue__card--termo .voc-continue__text {
  max-width: 315px;
  font-size: 14.5px;
  line-height: 23.2px;
  color: var(--vct-text-sub);
}

/* ============================================================ */
/* RESPONSIVO                                                   */
/* ============================================================ */
@media (max-width: 1399.98px) {
  .voc-continue__list { gap: 24px; }
  .voc-continue__card { flex: 1 1 0; width: auto; min-width: 0; }
}

@media (max-width: 991.98px) {
  .voc-continue { padding: 64px 24px 64px; }
  .voc-continue__header { min-height: 0; margin-bottom: 36px; }
  .voc-continue__title { font-size: 30px; line-height: 38px; }
  /* os três cards sempre visíveis, empilhados (sem carrossel) */
  .voc-continue__list { flex-direction: column; gap: 20px; margin: 0; }
  .voc-continue__card { flex: 0 0 auto; width: 100%; height: auto; min-height: 300px; }
  .voc-continue__card--termo .voc-continue__media img { inset: 0; width: 100%; height: 100%; object-position: right center; }
}

@media (max-width: 767.98px) {
  .voc-continue { padding: 56px 16px; }
  .voc-continue__title { font-size: 26px; line-height: 34px; }
  .voc-continue__subtitle { font-size: 17px; line-height: 25px; }
}

@media (max-width: 575.98px) {
  .voc-continue__title { font-size: 24px; line-height: 31px; }
  .voc-continue__body { padding: 24px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .voc-continue__media img { transition: none; }
  .voc-continue__card:hover .voc-continue__media img { transform: none; }
}


/* ============================================================ */
/* SLIDE-UP DOS BOTÕES (mg-btn) — contrato do mgButtons.js,     */
/* escopado na página (initMgButtons em vocabulario-detalhe.anim.js) */
/* ============================================================ */
.vocabulario-detalhe-page { --mg-btn-swap-duration: 0.9s; }   /* mesma velocidade da Academia/AgendaTreinamento */

/* Anti-FOUC: esconde o conteúdo cru enquanto o JS não faz o upgrade. */
.vocabulario-detalhe-page .mg-btn-auto:not(.mg-btn) { color: transparent !important; }
.vocabulario-detalhe-page .mg-btn-auto:not(.mg-btn) > svg,
.vocabulario-detalhe-page .mg-btn-auto:not(.mg-btn) > img,
.vocabulario-detalhe-page .mg-btn-auto:not(.mg-btn) > span { opacity: 0 !important; visibility: hidden !important; }

.vocabulario-detalhe-page .mg-btn { position: relative; }
.vocabulario-detalhe-page .mg-btn__inner { display: inline-flex; align-items: center; gap: 10px; }
.vocabulario-detalhe-page .mg-btn__swap { position: relative; display: inline-grid; overflow: hidden; }
.vocabulario-detalhe-page .mg-btn__swap-text {
  grid-area: 1 / 1;
  transition: transform var(--mg-btn-swap-duration, .42s) cubic-bezier(.2, .7, .2, 1);
}
.vocabulario-detalhe-page .mg-btn__swap-text.is-absolute { position: absolute; inset: 0; transform: translate3d(0, 130%, 0); }
.vocabulario-detalhe-page .mg-btn:hover .mg-btn__swap-text.is-absolute,
.vocabulario-detalhe-page .mg-btn:focus-visible .mg-btn__swap-text.is-absolute { transform: translate3d(0, 0, 0); }
.vocabulario-detalhe-page .mg-btn:hover .mg-btn__swap-text.is-relative,
.vocabulario-detalhe-page .mg-btn:focus-visible .mg-btn__swap-text.is-relative { transform: translate3d(0, -130%, 0); }
.vocabulario-detalhe-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); }
.vocabulario-detalhe-page .mg-btn__icon.is-absolute { position: absolute; inset: 0; transform: translate3d(0, 130%, 0); }
.vocabulario-detalhe-page .mg-btn:hover .mg-btn__icon.is-absolute,
.vocabulario-detalhe-page .mg-btn:focus-visible .mg-btn__icon.is-absolute { transform: translate3d(0, 0, 0); }
.vocabulario-detalhe-page .mg-btn:hover .mg-btn__icon.is-relative,
.vocabulario-detalhe-page .mg-btn:focus-visible .mg-btn__icon.is-relative { transform: translate3d(0, -130%, 0); }
.vocabulario-detalhe-page .mg-btn__icon-wrap { flex: none; width: var(--mg-icon-size, 16px); height: var(--mg-icon-size, 16px); }  /* flex:none: não encolhe quando o texto quebra */
.vocabulario-detalhe-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) {
  .vocabulario-detalhe-page .mg-btn__swap-text,
  .vocabulario-detalhe-page .mg-btn__icon { transition: none; }
  .vocabulario-detalhe-page .mg-btn:hover .mg-btn__swap-text.is-absolute,
  .vocabulario-detalhe-page .mg-btn:focus-visible .mg-btn__swap-text.is-absolute,
  .vocabulario-detalhe-page .mg-btn:hover .mg-btn__icon.is-absolute,
  .vocabulario-detalhe-page .mg-btn:focus-visible .mg-btn__icon.is-absolute { transform: translate3d(0, 130%, 0); }
  .vocabulario-detalhe-page .mg-btn:hover .mg-btn__swap-text.is-relative,
  .vocabulario-detalhe-page .mg-btn:focus-visible .mg-btn__swap-text.is-relative,
  .vocabulario-detalhe-page .mg-btn:hover .mg-btn__icon.is-relative,
  .vocabulario-detalhe-page .mg-btn:focus-visible .mg-btn__icon.is-relative { transform: translate3d(0, 0, 0); }
}


/* ============================================================ */
/* LEANWEB — 1ª dobra sem piscar (ver js/vocabulario/vocabulario-detalhe.anim.js) */
/* ============================================================ */
.vocabulario-detalhe-page--preload .voc-hero [data-reveal] {
  opacity: 0;
}

/* Aviso "conteúdo no idioma original" (cultura sem tradução publicada) */
.voc-corpo__aviso { margin-bottom: 24px; }

/* Temas do conceito viram links para o filtro do /vocabulario (no mockup eram rótulos) */
.vocabulario-detalhe-page a.voc-corpo__tag {
  display: inline-block;
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease;
}
.vocabulario-detalhe-page a.voc-corpo__tag:hover,
.vocabulario-detalhe-page a.voc-corpo__tag:focus-visible {
  border-color: #c9c3dd;
  color: var(--vc-navy, #29235c);
  text-decoration: none;
}

/* Conteúdo do conceito (ConteudoHtml do Admin): parágrafos e figuras com a régua do texto do mockup */
.voc-corpo__rich > :first-child { margin-top: 0; }
.voc-corpo__rich p { margin: 0 0 1em; }
.voc-corpo__rich > :last-child { margin-bottom: 0; }
.voc-corpo__rich img { max-width: 100%; height: auto; }
.voc-corpo__rich a { color: var(--vc-navy, #29235c); font-weight: 500; text-decoration: none; }
.voc-corpo__rich a:hover,
.voc-corpo__rich a:focus-visible { color: #ff8000; text-decoration: none; }