/* ============================================================
   Página da microcredencial — seções do plugin.

   A tipografia é herdada do kit do Elementor de propósito: o Figma
   mostra "Aptos", que é fonte de rascunho, e o site tem a família
   própria já definida no kit global. Só tamanho e peso são fixados
   aqui, nunca a família.
   ============================================================ */

/* Os tokens ficam na raiz de propósito. Quando estavam presos a uma lista
   de seções, bastava criar uma seção nova e esquecer de acrescentá-la ali
   para var(--pmc-azul) virar valor inválido: o botão saía com fundo
   transparente, sem nenhum erro. Aconteceu com o buscador. */
:root {
  --pmc-azul: #3b44b5;
  --pmc-lima: #b7db6e;
  --pmc-tinta: #12143a;
  --pmc-cinza: #5b6080;
  --pmc-papel: #ffffff;
  --pmc-largura: 1200px;
  --pmc-raio: 16px;
}

/* ---------------------------------------------------------------- botões
   O tema do site sobrescreve cor e forma de qualquer botão ou link com
   classe de ação — o "Add to basket" saía azul sobre azul, invisível.
   Por isso as declarações que definem a identidade do botão vão com
   !important e sob um seletor de seção. */
.pmc-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 24px;
  border-radius: 999px;          /* pílula, como no desenho */
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.pmc-btn__seta { display: inline-flex; flex: none; }

/* Dois seletores de classe elevam a especificidade sem precisar listar cada
   seção; o !important cobre o que o tema ainda tenta sobrescrever. */
.pmc-btn.pmc-btn--primary {
  background: var(--pmc-azul) !important;
  color: #fff !important;
  border-color: var(--pmc-azul) !important;
  text-decoration: none !important;
}
.pmc-btn.pmc-btn--primary:hover,
.pmc-btn.pmc-btn--primary:focus-visible {
  background: #2f379a !important;
  color: #fff !important;
}

.pmc-btn.pmc-btn--secundario {
  background: #fff !important;
  color: var(--pmc-tinta) !important;
  border-color: #fff !important;
  text-decoration: none !important;
}
.pmc-btn.pmc-btn--secundario:hover,
.pmc-btn.pmc-btn--secundario:focus-visible {
  background: #f1f2fa !important;
  color: var(--pmc-tinta) !important;
}

.pmc-btn:focus-visible { outline: 3px solid var(--pmc-lima); outline-offset: 2px; }

/* ---------------------------------------------------------------- listras */
.pmc-listras { display: flex; height: 12px; width: 100%; gap: 0; line-height: 0; font-size: 0; }
.pmc-listras i { flex: 1 1 0; min-width: 0; height: 100%; display: block; margin: 0; }

/* ================================================================== herói
   Duas colunas (Figma 3821:16734): 640 de conteúdo, vão de 71, cartão de 489.
   As medidas são as do desenho a 1440; daí para baixo as colunas viram uma só.
   ================================================================== */
/* A folga vive no wrap: a faixa de listras e filha da seccao e, com a folga
   na seccao, ficavam 85px de branco por baixo dela. */
.pmc-hero {
  position: relative;
  background: #fff;
  padding: 0;
}

.pmc-hero__wrap {
  max-width: var(--pmc-largura);
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 640px) minmax(0, 489px);
  justify-content: space-between;
  gap: 71px;
  align-items: start;
}

/* ---------------------------------------------------------- coluna da foto */

.pmc-hero__col { min-width: 0; }

.pmc-hero__figura {
  position: relative;
  margin: 0 0 24px;
  border-radius: 15px;
  overflow: hidden;
  aspect-ratio: 640 / 301;
}

.pmc-hero__foto {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pmc-hero__tag {
  position: absolute;
  top: 24px;
  left: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 500px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.pmc-hero__tag-ico {
  width: 18px;
  height: 18px;
  flex: none;
}

/* A etiqueta nunca quebra em duas linhas (pedido do Pedro, 23/09/2026): o
   nome da strand mais comprido cabe em todas as larguras a partir de ~375px;
   abaixo disso termina em reticencias. E o icone acompanha a cor do texto —
   o SVG vem com fill="white", que sumia no verde e no laranja. */
.pmc-hero__tag {
  max-width: calc(100% - 48px);
  white-space: nowrap;
}

.pmc-hero__tag-nome {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pmc-hero__tag-ico path { fill: currentColor; }

/* Dois seletores e !important: o tema zera a margem de `figure` e forca
   `height: auto` em `img`. Sem isto a foto encostava no texto. */
.pmc-hero .pmc-hero__figura { margin: 0 0 24px !important; }
.pmc-hero .pmc-hero__foto { height: 100% !important; }

.pmc-hero__eyebrow {
  margin: 0 0 24px;
  font-size: 18px;
  font-weight: 600;
  line-height: 25px;
}

.pmc-hero__titulo {
  margin: 0 0 24px;
  font-size: 54px;
  font-weight: 600;
  line-height: 59px;
  letter-spacing: -1.62px;
  color: #000;
}

.pmc-hero__resumo {
  margin: 0 0 24px;
  font-size: 24px;
  font-weight: 600;
  line-height: 34px;
  color: #000;
}

.pmc-hero__intro {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  color: #4c4d4e;
}

/* ------------------------------------------------------- cartão de compra */

.pmc-hero__cartao {
  min-width: 0;
  padding: 32px;
  border-radius: 20px;
  background: #f5f5f7;
}

.pmc-hero__preco-rotulo {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4c4c4c;
}

.pmc-hero__preco {
  margin: 4px 0 4px;
  font-size: 32px;
  font-weight: 600;
  line-height: 35px;
  color: #000;
}

/* O preço do WooCommerce vem embrulhado; o símbolo faz parte do número. */
.pmc-hero__preco .woocommerce-Price-amount,
.pmc-hero__preco bdi { font: inherit; color: inherit; }
.pmc-hero__preco del { display: none; }

/* "incl. UK VAT" ao lado do preço (MC-116): pequeno, na linha de base. */
.pmc-hero__preco-nota {
  margin-left: 6px;
  font-family: var(--pmc-font-body, inherit);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--pmc-cinza-texto, #4a4b5e);
  white-space: nowrap;
}

.pmc-hero__imposto {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  color: #4c4c4c;
}

.pmc-hero__acoes {
  margin-top: 24px;
  display: grid;
  gap: 10px;
}

/* Os dois botões ocupam a largura do cartão, como no desenho. */
/* O segundo botao e vazado no desenho: so borda, sem fundo. */
.pmc-hero .pmc-hero__acoes .pmc-btn--secundario,
.pmc-hero .pmc-hero__acoes .pmc-btn--secundario:focus-visible {
  background: transparent !important;
  border-color: #4c4d4e !important;
  color: #000 !important;
}

.pmc-hero .pmc-hero__acoes .pmc-btn--secundario:hover {
  background: #eceef6 !important;
  border-color: #4c4d4e !important;
  color: #000 !important;
}

.pmc-hero__acoes .pmc-btn {
  width: 100%;
  justify-content: center;
  min-height: 43px;
  padding: 9px 24px;
  font-size: 16px;
}

.pmc-hero__ficha {
  margin: 24px 0 0;
  padding-top: 25px;
  border-top: 1px solid #ddd;
  display: grid;
  gap: 16px;
}

.pmc-hero__linha {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.pmc-hero__rotulo {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4c4c4c;
  white-space: nowrap;
}

.pmc-hero__valor {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #000;
  text-align: right;
}

/* ------------------------------------------------------------ responsivo */

@media (max-width: 1100px) {
  .pmc-hero__wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .pmc-hero__cartao { max-width: none; }

  /* A nota do preco a 12px do tablet para baixo; no desktop fica nos 14. */
  .pmc-hero__imposto { font-size: 12px; line-height: 18px; }
}

@media (max-width: 767px) {
  .pmc-hero { padding: 0; }

  .pmc-hero__wrap { gap: 32px; }

  .pmc-hero__titulo { font-size: 34px; line-height: 40px; letter-spacing: -1px; }
  .pmc-hero__resumo { font-size: 20px; line-height: 28px; }

  .pmc-hero__cartao { padding: 24px; }
  .pmc-hero__preco { font-size: 28px; line-height: 32px; }

  /* Rótulo em cima e valor em baixo: lado a lado, "Course structure" e o seu
     valor de duas linhas ficavam a disputar 300px. */
  .pmc-hero__linha { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pmc-hero__valor { text-align: left; }
}

/* ---------------------------------------------------------------- glance */
.pmc-glance { background: var(--pmc-azul); padding: 88px 0; }

.pmc-glance__wrap {
  max-width: var(--pmc-largura);
  margin: 0 auto;
  padding: 0 24px;
}
.pmc-glance__titulo {
  margin: 0 0 40px;
  color: #fff;
  font-size: clamp(26px, 2.6vw, 32px);
  font-weight: 600;
  text-align: center;
}
.pmc-glance__grade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
.pmc-glance__card {
  background: var(--pmc-papel);
  border-radius: var(--pmc-raio);
  padding: 26px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pmc-glance__icone { display: block; line-height: 0; margin-bottom: 8px; }
.pmc-glance__rotulo {
  margin: 0;
  color: var(--pmc-tinta);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}
.pmc-glance__valor,
.pmc-glance__valor p {
  margin: 0;
  color: var(--pmc-cinza);
  font-size: 16px;
  line-height: 1.55;
}
/* O preço do WooCommerce vem com marcação própria. */
.pmc-glance__valor .woocommerce-Price-amount { color: var(--pmc-tinta); font-weight: 600; }
.pmc-glance__valor del { opacity: .55; margin-right: 6px; }

/* ---------------------------------------------------------------- editor */
.pmc-aviso {
  padding: 24px;
  border: 1px dashed #c8ccE4;
  border-radius: 12px;
  background: #f6f7fb;
  color: #5b6080;
  font-size: 14px;
  text-align: center;
}

/* ---------------------------------------------------------------- responsivo
   O Elementor trabalha em max-width, então descemos do desktop. */
@media (max-width: 1024px) {
  .pmc-glance__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .pmc-btn { width: 100%; justify-content: center; }

  .pmc-glance { padding: 56px 0; }
  .pmc-glance__grade { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pmc-glance__titulo { margin-bottom: 28px; }
}

/* ---------------------------------------------------------------- depoimentos */
.pmc-dep {
  --pmc-verde: #28ae62;
  position: relative;
  overflow: hidden;
  background: var(--pmc-verde);
  padding: 76px 0 84px;
}
.pmc-dep__wrap {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.pmc-dep__titulo {
  margin: 0 0 44px;
  color: #12143a;
  font-size: clamp(26px, 2.6vw, 32px);
  font-weight: 600;
  text-align: center;
}
.pmc-dep__grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
}
.pmc-dep__card {
  margin: 0;
  background: #fff;
  padding: 30px 32px 34px;
  /* O canto superior direito é chanfrado, como no desenho. */
  border-radius: 20px 0 20px 20px;
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pmc-dep__pessoa { display: flex; align-items: center; gap: 14px; }
.pmc-dep__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.pmc-dep__avatar--padrao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #3b44b5;
  color: #fff;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.02em;
}
.pmc-dep__id { display: flex; flex-direction: column; gap: 2px; }
.pmc-dep__nome { color: #12143a; font-size: 18px; font-weight: 600; line-height: 1.2; }
.pmc-dep__papel { color: #5b6080; font-size: 15px; line-height: 1.3; }
.pmc-dep__texto {
  margin: 0;
  color: #5b6080;
  font-size: 17px;
  line-height: 1.6;
  quotes: none;
}

/* Enfeites da identidade, decorativos e sem conteúdo semântico. */
.pmc-dep__enfeite { position: absolute; z-index: 0; line-height: 0; }
.pmc-dep__enfeite--quadrado {
  top: 128px;
  left: 88px;
  width: 52px;
  height: 38px;
  border-radius: 6px;
  background: #f4ab63;
}
.pmc-dep__enfeite--estrela { right: 96px; bottom: 96px; }

@media (max-width: 900px) {
  .pmc-dep__grade { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pmc-dep__enfeite { display: none; }
}
@media (max-width: 767px) {
  .pmc-dep { padding: 52px 0 56px; }
  .pmc-dep__titulo { margin-bottom: 26px; }
  .pmc-dep__card { padding: 24px 22px 26px; }
}

/* ---------------------------------------------------------------- o que vai aprender */
/* ------------------------------------------------- what you'll learn
   Figma 3887:729: secção #f5f5f7 de 617, conteúdo 1200 com 100 de folga em
   cima e em baixo. Cinco cartões brancos de 310x310, raio 20, folga 24 — não
   cabem nos 1200, e é por isso que a fila rola.
   ------------------------------------------------------------------ */
.pmc-learn { padding: 0; }   /* folga e fundo vivem no contentor pai */

.pmc-learn__wrap {
  max-width: var(--pmc-largura);
  margin: 0 auto;
}

.pmc-learn__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 42px;
}

.pmc-learn__titulo {
  margin: 0 0 22px;
  font-size: 32px;
  font-weight: 600;
  line-height: 35px;
  color: #000;
}

.pmc-learn__sub {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  color: #000;
}

.pmc-learn__setas {
  display: flex;
  gap: 16px;
  flex: none;
}

.pmc-learn__setas[hidden] { display: none; }

/* Dois seletores e o reset todo: o tema pinta `button` com a cor da marca e
   arredonda-o. Sem isto as setas saíam como duas pílulas azuis. */
.pmc-learn .pmc-learn__seta,
.pmc-learn .pmc-learn__seta:hover,
.pmc-learn .pmc-learn__seta:focus,
.pmc-learn .pmc-learn__seta:active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  background-image: none;
  box-shadow: none;
  color: #923472;
  cursor: pointer;
  transition: color .2s ease, opacity .2s ease;
}

.pmc-learn .pmc-learn__seta:hover { color: #6f2757; }

.pmc-learn .pmc-learn__seta[disabled] {
  opacity: .35;
  cursor: default;
}

.pmc-learn__seta-svg { display: block; width: 33px; height: 33px; }

/* ---------------------------------------------------------------- pista */

.pmc-learn__pista {
  /* Sangra ate a borda direita do ecra: 50% e metade da largura do
     conteudo, 50vw e metade do ecra — a diferenca e a folga que sobra
     a direita, em qualquer largura. */
  margin: 0 calc(50% - 50vw) 0 0;
  padding: 0 0 4px;
  list-style: none;
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.pmc-learn__pista::-webkit-scrollbar { display: none; }

.pmc-learn__card {
  flex: 0 0 310px;
  min-height: 310px;
  scroll-snap-align: start;
  padding: 30px;
  border-radius: 20px;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.pmc-learn__ico {
  display: block;
  width: 32px;
  height: 32px;
  margin-bottom: 22px;
}

.pmc-learn__ico-svg { display: block; width: 32px; height: 32px; }

.pmc-learn__card-titulo {
  margin: 0 0 22px;
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
  color: #000;
}

.pmc-learn__card-texto {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: #000;
}

@media (max-width: 767px) {
  .pmc-learn__topo { margin-bottom: 28px; }
  .pmc-learn__titulo { font-size: 26px; line-height: 32px; margin-bottom: 14px; }
  .pmc-learn__card { flex-basis: 268px; min-height: 0; padding: 24px; }
  .pmc-learn__card-titulo { font-size: 20px; line-height: 26px; }
}

/* Seis colunas com cards de duas: é o que permite centralizar a última
   linha quando ela tem menos cards que a de cima, como no desenho. */
.pmc-learn__grade {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 28px;
}
.pmc-learn__card { grid-column: span 2; }
.pmc-learn__card {
  border-radius: 18px;
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Dois cards sobrando: começam na segunda coluna. Um só: na terceira. */
.pmc-learn__card:nth-last-child(2):nth-child(3n + 1) { grid-column: 2 / span 2; }
.pmc-learn__card:last-child:nth-child(3n + 1) { grid-column: 3 / span 2; }
.pmc-learn__card-titulo {
  margin: 0;
  color: inherit;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
}
.pmc-learn__card-texto {
  margin: 0;
  color: inherit;
  opacity: .92;
  font-size: 16px;
  line-height: 1.6;
}

/* ---------------------------------------------------------------- texto corrido */
.pmc-prose { padding: 0; }   /* folga no contentor pai */
/* O fundo vive no contentor pai; aqui fica so o que muda com ele. */
.pmc-prose--azul .pmc-prose__titulo,
.pmc-prose--azul .pmc-prose__texto,
.pmc-prose--azul .pmc-prose__texto strong { color: #fff; }
.pmc-prose--azul .pmc-prose__texto li::marker { color: #fff; }

/* Sobre o azul o botao e branco com texto preto, como no desenho. */
.pmc-prose--azul .pmc-prose__botao .pmc-btn,
.pmc-prose--azul .pmc-prose__botao .pmc-btn:hover,
.pmc-prose--azul .pmc-prose__botao .pmc-btn:focus-visible {
  background: #fff !important;
  border-color: #fff !important;
  color: #000 !important;
}
.pmc-prose--azul .pmc-prose__botao .pmc-btn:hover {
  background: #f1f2fa !important;
  border-color: #f1f2fa !important;
}
.pmc-prose__wrap { max-width: 860px; margin: 0 auto; }
.pmc-prose__wrap--centro { text-align: center; }
.pmc-prose__wrap--centro .pmc-prose__texto { text-align: left; }
.pmc-prose__titulo {
  margin: 0 0 26px;
  color: #12143a;
  font-size: clamp(26px, 2.6vw, 32px);
  font-weight: 600;
}
.pmc-prose__texto { color: #5b6080; font-size: 17px; line-height: 1.7; }
.pmc-prose__texto p { margin: 0 0 16px; }
.pmc-prose__texto p:last-child { margin-bottom: 0; }
.pmc-prose__texto ul { margin: 0; padding-left: 22px; display: grid; gap: 10px; }
.pmc-prose__texto li::marker { color: #3b44b5; }
.pmc-prose__texto strong { color: #12143a; }

/* ---------------------------------------------- prose em duas colunas
   Figma: 04 Course Overview (3688:8286) — foto 391x391, raio 20, coluna de
   texto 738, folga 71. 07 Who Is This Course For (3688:8391) — foto 580x360,
   raio 25, coluna 520, folga 99.

   As duas larguras de foto sao diferentes de proposito no desenho: a da visao
   geral e quadrada e a do "para quem e" e paisagem. Por isso a medida vive no
   modificador, e nao numa regra so. */
.pmc-prose--imagem_esquerda .pmc-prose__wrap,
.pmc-prose--imagem_direita .pmc-prose__wrap {
  max-width: var(--pmc-largura);
  display: grid;
  align-items: center;
  text-align: left;
}

.pmc-prose--imagem_esquerda .pmc-prose__wrap {
  grid-template-columns: 391px minmax(0, 1fr);
  gap: 71px;
}

.pmc-prose--imagem_direita .pmc-prose__wrap {
  grid-template-columns: minmax(0, 520px) 580px;
  gap: 99px;
}

/* A foto e o segundo item no HTML quando fica a direita: a ordem do DOM
   segue a leitura (titulo, texto, foto), e so a apresentacao troca. */
.pmc-prose--imagem_direita .pmc-prose__foto { order: 2; }

.pmc-prose__foto { margin: 0; }

.pmc-prose__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

/* Dois seletores de classe e !important: o tema traz `.elementor img
   { border-radius: 0 }`, que ganhava da regra generica acima e deixava a foto
   da visao geral com canto vivo enquanto a do "para quem e" — que redeclarava
   o raio — ficava certa. Sintoma classico, e esta no manual do stack. */
.pmc-prose__foto img.pmc-prose__img { border-radius: 20px !important; }

.pmc-prose--imagem_esquerda .pmc-prose__foto img.pmc-prose__img {
  aspect-ratio: 1 / 1;
  border-radius: 20px !important;
}

.pmc-prose--imagem_direita .pmc-prose__foto img.pmc-prose__img {
  aspect-ratio: 580 / 360;
  border-radius: 25px !important;
}

.pmc-prose--imagem_esquerda .pmc-prose__titulo,
.pmc-prose--imagem_direita .pmc-prose__titulo { text-align: left; }

.pmc-prose__botao { margin-top: 34px; }

/* ---------------------------------------------------------------- faixa de chamada */
.pmc-cta { padding: 0; text-align: center; }   /* folga no contentor pai */
.pmc-cta--escuro { background: #12143a; }
.pmc-cta--azul { background: var(--pmc-azul); }
.pmc-cta__wrap { max-width: 900px; margin: 0 auto; }
.pmc-cta__eyebrow { margin: 0 0 12px; color: var(--pmc-lima); font-size: 18px; font-weight: 700; line-height: 25px; }
.pmc-cta__titulo {
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 600;
  line-height: 1.15;
}
.pmc-cta__resumo { margin: 0; color: rgba(255, 255, 255, .82); font-size: 18px; line-height: 27px; }
.pmc-cta__botoes {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 30px;
}

@media (max-width: 1024px) {
}
@media (max-width: 767px) {
  .pmc-learn__sub { margin-bottom: 26px; }

  /* Duas colunas viram uma, com a foto sempre por cima do texto — inclusive
     no "para quem e", onde ela e a segunda no HTML. */
  .pmc-prose--imagem_esquerda .pmc-prose__wrap,
  .pmc-prose--imagem_direita .pmc-prose__wrap {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .pmc-prose--imagem_direita .pmc-prose__foto { order: 0; }
}

/* ---------------------------------------------------------------- faq */
/* 100 em cima e 90 em baixo, como no desenho (3821:17065). Na listagem a
   folga vem do contentor do Elementor, e por isso a variante --livre zera. */
.pmc-faq { padding: 0; }   /* folga e fundo vivem no contentor pai */
.pmc-faq--livre { padding: 0; }
.pmc-faq__wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.pmc-faq__titulo {
  margin: 0 0 22px;
  color: #12143a;
  font-size: clamp(26px, 2.6vw, 32px);
  font-weight: 600;
  line-height: 1.2;
}
.pmc-faq__regua { display: flex; height: 9px; width: 100%; max-width: 300px; border-radius: 2px; overflow: hidden; }
.pmc-faq__regua i { flex: 1 1 0; min-width: 0; display: block; }

.pmc-faq__lista { display: grid; }
.pmc-faq__item { border-bottom: 1px solid #e4e6f2; }
.pmc-faq__lista { border-bottom: 0; }
.pmc-faq__pergunta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  cursor: pointer;
  color: #12143a;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  list-style: none;
}
/* Some com a setinha padrão do <details> nos dois motores. */
.pmc-faq__pergunta::-webkit-details-marker { display: none; }
.pmc-faq__pergunta::marker { content: ''; }
.pmc-faq__pergunta:focus-visible { outline: 3px solid var(--pmc-lima); outline-offset: 4px; }

/* O sinal é desenhado em CSS: dois traços, e o vertical some quando abre. */
.pmc-faq__sinal {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 4px;
}
.pmc-faq__sinal::before,
.pmc-faq__sinal::after {
  content: '';
  position: absolute;
  background: #3b44b5;
  border-radius: 2px;
  transition: opacity .18s ease;
}
.pmc-faq__sinal::before { top: 7px; left: 0; width: 16px; height: 2px; }
.pmc-faq__sinal::after { top: 0; left: 7px; width: 2px; height: 16px; }
.pmc-faq__item[open] .pmc-faq__sinal::after { opacity: 0; }

.pmc-faq__resposta { padding: 0 48px 24px 0; color: #5b6080; font-size: 16.5px; line-height: 1.65; }
.pmc-faq__resposta p { margin: 0 0 12px; }
.pmc-faq__resposta p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .pmc-faq__wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pmc-faq__resposta { padding-right: 0; }
}
@media (max-width: 767px) {
  /* a folga do telemovel tambem vem do contentor pai */
  .pmc-faq__pergunta { font-size: 17px; padding: 18px 0; }
}

/* ---------------------------------------------------------------- áreas temáticas */
/* --------------------------------------------------------- strands
   Figma 3821:16925: secção branca de 1096, conteúdo 1200 com 100 de folga.
   Cartões de 373x504, raio 20, folga 40 — a cor vem da strand do curso, por
   estilo em linha, e não daqui.
   ------------------------------------------------------------------ */
.pmc-strands { padding: 0; }   /* folga e fundo vivem no contentor pai */

.pmc-strands__wrap {
  max-width: var(--pmc-largura);
  margin: 0 auto;
}

.pmc-strands__intro { text-align: center; }

.pmc-strands__titulo {
  margin: 0 0 36px;
  font-size: 32px;
  font-weight: 600;
  line-height: 35px;
  color: #000;
}

.pmc-strands__texto {
  margin: 0 auto 36px;
  max-width: 1200px;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  color: #000;
}

/* A chamada da strand é o azul da marca no desenho, e não a cor da strand:
   sobre branco as strands claras não se leem. */
.pmc-strands__chamada {
  margin: 0 0 36px;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: var(--pmc-azul);
}

.pmc-strands__acao { display: flex; justify-content: center; }

.pmc-strands__outros { position: relative; margin-top: 82px; }

.pmc-strands__titulo--outros { margin-bottom: 45px; text-align: center; }

.pmc-strands__setas {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.pmc-strands__setas[hidden] { display: none; }

.pmc-strands .pmc-strands__seta,
.pmc-strands .pmc-strands__seta:hover,
.pmc-strands .pmc-strands__seta:focus,
.pmc-strands .pmc-strands__seta:active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  background-image: none;
  box-shadow: none;
  color: #923472;
  cursor: pointer;
}

.pmc-strands .pmc-strands__seta[disabled] { opacity: .35; cursor: default; }

.pmc-strands__seta-svg { display: block; width: 33px; height: 33px; }

/* --------------------------------------------------------------- pista */

.pmc-strands__pista {
  margin: 0;
  padding: 0 0 4px;
  list-style: none;
  display: flex;
  gap: 40px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.pmc-strands__pista::-webkit-scrollbar { display: none; }

.pmc-strands__card {
  flex: 0 0 373px;
  scroll-snap-align: start;
  padding: 32px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  text-align: left;
}

/* Dois seletores e !important: o tema define altura de `img` com peso
   próprio e a foto do cartão saía esticada. */
.pmc-strands .pmc-strands__foto {
  display: block !important;
  width: 100% !important;
  height: 199px !important;
  object-fit: cover;
  border-radius: 15px;
  margin-bottom: 24px;
}

.pmc-strands__card-strand {
  margin: 0 0 24px;
  font-size: 18px;
  font-weight: 600;
  line-height: 25px;
  color: inherit;
}

.pmc-strands__card-titulo {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 700;
  line-height: 34px;
  color: inherit;
}

.pmc-strands__card-texto {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 25px;
  color: inherit;
}

.pmc-strands__card-acao { margin-top: auto; padding-top: 24px; }

/* Sobre a cor da strand o botão é branco com texto preto, como no desenho. */
.pmc-strands .pmc-strands__card-acao .pmc-btn,
.pmc-strands .pmc-strands__card-acao .pmc-btn:hover,
.pmc-strands .pmc-strands__card-acao .pmc-btn:focus-visible {
  width: 100%;
  justify-content: center;
  min-height: 50px;
  background: #fff !important;
  border-color: #fff !important;
  color: #000 !important;
}

.pmc-strands .pmc-strands__card-acao .pmc-btn:hover {
  background: #f1f2fa !important;
  border-color: #f1f2fa !important;
}

@media (max-width: 767px) {
  .pmc-strands__titulo { font-size: 26px; line-height: 32px; margin-bottom: 24px; }
  .pmc-strands__texto,
  .pmc-strands__chamada { margin-bottom: 24px; }
  .pmc-strands__outros { margin-top: 48px; }
  .pmc-strands__titulo--outros { margin-bottom: 24px; }
  .pmc-strands__pista { gap: 20px; margin-right: calc(50% - 50vw); }
  .pmc-strands__card { flex-basis: 300px; padding: 24px; }
}

/* ---------------------------------------------------------------- para onde ir depois */
.pmc-next {
  position: relative;
  background-color: #12143a;
  background-size: cover;
  background-position: center;
  padding: 72px 0;
}
.pmc-next--sem-imagem { background-color: #1e2461; }
.pmc-next__wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: flex-end;
}
.pmc-next__cartao {
  background: #b7db6e;
  border-radius: 22px;
  padding: 36px 40px 40px;
  max-width: 620px;
  width: 100%;
}
.pmc-next__titulo { margin: 0 0 8px; color: #12143a; font-size: clamp(24px, 2.4vw, 30px); font-weight: 600; }
.pmc-next__sub { margin: 0 0 22px; color: #21301a; font-size: 16.5px; line-height: 1.55; }
.pmc-next__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

@media (max-width: 767px) {
  .pmc-strands { padding: 52px 0 56px; }
  .pmc-strands__item { flex-direction: column; padding: 22px; }
  .pmc-strands__seta { align-self: flex-end; }
  .pmc-next { padding: 48px 0; }
  .pmc-next__wrap { justify-content: center; }
  .pmc-next__cartao { padding: 26px 22px 30px; }
  .pmc-next__links .pmc-btn { width: auto; }
}

/* ---------------------------------------------------------------- buscador */
.pmc-finder { background: #f5f5f7; padding: 56px 0 72px; }
.pmc-finder__wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.pmc-finder__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.pmc-finder__busca { flex: 1 1 320px; min-width: 0; }
.pmc-finder__busca input {
  width: 100%;
  padding: 11px 20px;
  border: 1px solid #d7dae8;
  border-radius: 999px;
  background: #fff;
  font-size: 15.5px;
  color: #12143a;
}
.pmc-finder__busca input:focus-visible { outline: 3px solid var(--pmc-lima); outline-offset: 2px; }

.pmc-finder__campo { display: inline-flex; align-items: center; gap: 8px; }
.pmc-finder__rotulo {
  font-family: inherit;
  font-size: 13px;
  color: #5b6080;
}
.pmc-finder__campo select {
  padding: 10px 16px;
  border: 1px solid #d7dae8;
  border-radius: 999px;
  background: #fff;
  font-size: 15px;
  color: #12143a;
  max-width: 220px;
}

.pmc-finder__contagem { margin: 0 0 18px; color: #5b6080; font-size: 15.5px; }
.pmc-finder__contagem b { color: #12143a; }

.pmc-finder__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.pmc-finder__card {
  background: #fff;
  border-radius: 16px;
  padding: 26px 28px 24px;
  display: grid;
  gap: 18px;
}
.pmc-finder__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.pmc-finder__nome { margin: 0 0 4px; font-size: 21px; font-weight: 600; line-height: 1.25; }
.pmc-finder__nome a { color: #12143a; text-decoration: none; }
.pmc-finder__nome a:hover { text-decoration: underline; }
.pmc-finder__strand { margin: 0; color: #5b6080; font-size: 15px; }
.pmc-finder__selo {
  flex: none;
  padding: 7px 14px;
  border-radius: 999px;
  background: #f5f5f7;
  color: #5b6080;
  font-size: 13.5px;
  font-weight: 600;
}

.pmc-finder__fatos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
}
.pmc-finder__fatos li {
  background: #f6f7fb;
  border-radius: 10px;
  padding: 12px 16px;
  color: #12143a;
  font-size: 15px;
  line-height: 1.45;
}

.pmc-finder__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border-top: 1px solid #eceef6;
  padding-top: 18px;
}
.pmc-finder__preco { margin: 0; color: #12143a; font-size: 22px; font-weight: 600; }
.pmc-finder__preco span {
  display: inline-block;
  margin-right: 8px;
  color: #8a8fae;
  font-size: 13px;
  font-weight: 400;
}

.pmc-finder__vazio {
  background: #fff;
  border-radius: 16px;
  padding: 44px 28px;
  text-align: center;
  color: #5b6080;
  display: grid;
  gap: 18px;
  justify-items: center;
}
.pmc-finder__vazio p { margin: 0; font-size: 16.5px; }

.pmc-finder__paginas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
}
.pmc-finder__pagina-atual { color: #5b6080; font-size: 15px; }

@media (max-width: 767px) {
  .pmc-finder { padding: 36px 0 52px; }
  .pmc-finder__card { padding: 22px; }
  .pmc-finder__fatos { grid-template-columns: minmax(0, 1fr); }
  .pmc-finder__topo { flex-direction: column; }
  .pmc-finder__campo { width: 100%; }
  .pmc-finder__campo select { max-width: none; flex: 1 1 auto; }
  .pmc-finder__rodape { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------------- cesta no header */
.pmc-cesta-wrap { display: inline-flex; }
.pmc-cesta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--pmc-tinta);
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.pmc-cesta:hover,
.pmc-cesta:focus-visible { background: #f1f2fa; color: var(--pmc-azul); }
.pmc-cesta:focus-visible { outline: 3px solid var(--pmc-lima); outline-offset: 2px; }
.pmc-cesta__icone { display: inline-flex; line-height: 0; }
.pmc-cesta__conta {
  position: absolute;
  top: 1px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--pmc-azul);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* A cesta ocupa 40px na barra de ações do header, e isso foi o suficiente
   para os rótulos dos dois botões quebrarem em duas linhas. Não falta espaço
   na linha (sobram mais de 100px): o grupo é que encolhia junto com o texto
   quebrado. Impedir a quebra resolve, e o grupo volta a crescer o necessário. */
.elementor-location-header .elementor-button-text,
.elementor-location-header .elementor-button-content-wrapper { white-space: nowrap; }

/* --------------------------------------------------------------------------
   MC-040 — o painel lateral da cesta.

   Vive no rodapé de todas as páginas, então o desenho não depende da folha do
   checkout: são poucas dezenas de linhas próprias, e o site não carrega o
   CSS inteiro do checkout em toda página só por causa deste painel.
   -------------------------------------------------------------------------- */
.pmc-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000000; /* acima do header, do chat (999999) e da busca */
}

.pmc-drawer__fundo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .25s ease;
}

.pmc-drawer--aberto .pmc-drawer__fundo { opacity: 1; }

.pmc-drawer__painel {
  position: absolute;
  top: 24px;
  right: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  width: min(425px, calc(100% - 48px));
  padding: 24px;
  gap: 20px;
  border-radius: 20px;
  background: var(--pmc-papel);
  box-shadow: 0 24px 60px rgba(18, 20, 58, .22);
  transform: translateX(calc(100% + 24px));
  transition: transform .25s ease;
  overflow-y: auto;
}

.pmc-drawer--aberto .pmc-drawer__painel { transform: translateX(0); }

.pmc-drawer__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pmc-drawer__cabecalho {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--pmc-tinta);
}

.pmc-drawer__fechar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: none !important;
  color: var(--pmc-tinta) !important;
  cursor: pointer;
}

.pmc-drawer__fechar:hover { background: #f2f3f9 !important; }

.pmc-drawer__conteudo { flex: 1 1 auto; }

.pmc-drawer__itens { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }

.pmc-drawer__item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid #e4e6f2;
}

.pmc-drawer__media img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }

.pmc-drawer__titulo { margin: 0; font-weight: 600; color: var(--pmc-tinta); line-height: 1.35; }
.pmc-drawer__duracao { margin: 2px 0 0; font-size: 13px; color: var(--pmc-cinza); }
.pmc-drawer__preco { font-weight: 700; color: var(--pmc-tinta); white-space: nowrap; }

.pmc-drawer__subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 20px;
  font-size: 18px;
  color: var(--pmc-tinta);
}

.pmc-drawer__nota { margin: 6px 0 0; font-size: 13px; color: var(--pmc-cinza); }
.pmc-drawer__vazio { margin: 0; color: var(--pmc-cinza); }

.pmc-drawer__acoes { display: grid; gap: 12px; }
.pmc-drawer__acoes .pmc-btn { width: 100%; justify-content: center; }

/* Trava a rolagem da página atrás do painel. */
body.pmc-drawer-aberto { overflow: hidden; }

/* O painel nasce como filho direto do <body>, fora de qualquer container do
   tema, e ali o tema aplica um corpo de 32px que vaza para tudo o que estiver
   dentro. Daí o !important em cada tamanho: sem ele o painel sai com o texto
   do tamanho de um título. Mesma história da borda rosa no botão de fechar,
   que vem da regra genérica de <button>. */
.pmc-drawer .pmc-drawer__painel { font-size: 15px !important; line-height: 1.5 !important; }
.pmc-drawer .pmc-drawer__cabecalho { font-size: 20px !important; line-height: 1.3 !important; }
.pmc-drawer .pmc-drawer__titulo { font-size: 16px !important; line-height: 1.35 !important; }
.pmc-drawer .pmc-drawer__duracao,
.pmc-drawer .pmc-drawer__nota { font-size: 13px !important; }
.pmc-drawer .pmc-drawer__preco { font-size: 16px !important; }
.pmc-drawer .pmc-drawer__subtotal { font-size: 17px !important; }

.pmc-drawer .pmc-drawer__fechar {
  border: 0 !important;
  border-radius: 50% !important;
  padding: 0 !important;
}

/* O WooCommerce pendura um link "View cart" ao lado do botão depois da
   adição. Com o painel abrindo na mesma hora, ele é ruído — e ainda por cima
   nasce dentro do hero, quebrando o alinhamento dos dois botões. */
.added_to_cart { display: none !important; }

/* O botao secundario foi desenhado para fundo escuro: branco sobre branco no
   painel some. Aqui ele ganha contorno. */
.pmc-drawer .pmc-btn.pmc-btn--secundario {
  border-color: #d8dbeb !important;
}

/* MC-044 — a nota de imposto ao lado do preço, nas vitrines. */
.pmc-preco__nota {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.62em;
  font-weight: 500;
  color: var(--pmc-cinza);
  white-space: nowrap;
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   MC-033 e MC-034 — a faixa de microcredenciais.

   No Figma: seção de 1440x486 com foto de fundo, e um card azul de 647x306
   encostado na coluna do conteúdo, com 90px de respiro acima e abaixo.
   -------------------------------------------------------------------------- */
.pmc-promo {
  position: relative;
  background-color: var(--pmc-tinta);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-block: 90px;
}

.pmc-promo__interno {
  max-width: var(--pmc-largura);
  margin-inline: auto;
  padding-inline: 24px;
}

.pmc-promo__card {
  box-sizing: border-box;
  max-width: 647px;
  padding: 48px 56px;
  border-radius: 25px;
  background: var(--pmc-azul);
  color: #fff;
}

.pmc-promo__titulo {
  margin: 0 0 20px;
  font-size: 36px;
  line-height: 1.1;
  font-weight: 600;
  color: #fff;
}

.pmc-promo__texto {
  margin: 0 0 32px;
  max-width: 539px;
  font-size: 18px;
  line-height: 1.5;
  color: #fff;
}

/* O tema pinta e sublinha todo <a>: o botão branco sobre o card azul ficava
   com o rótulo azul, ilegível. */
.pmc-promo .pmc-btn.pmc-btn--secundario,
.pmc-promo .pmc-btn.pmc-btn--secundario:hover,
.pmc-promo .pmc-btn.pmc-btn--secundario:focus {
  color: var(--pmc-tinta) !important;
  text-decoration: none !important;
}

@media (max-width: 900px) {
  .pmc-promo { padding-block: 56px; }
  .pmc-promo__card { max-width: 100%; padding: 36px 28px; }
  .pmc-promo__titulo { font-size: 28px; }
  .pmc-promo__texto { font-size: 16px; }
}

/* --------------------------------------------------------------------------
   MC-034 — a lista de microcredenciais da pillar page.

   Do Figma: faixa roxa, container de 1196, grade de dois cards de 586 com 24
   de gap, card branco r20 com 30 de recheio, pílula da área temática colorida
   e botão azul.
   -------------------------------------------------------------------------- */
.pmc-lista {
  background: #923472;
  padding-block: 80px;
  color: #fff;
}

.pmc-lista__interno {
  max-width: var(--pmc-largura);
  margin-inline: auto;
  padding-inline: 24px;
}

/* Título à esquerda e texto de apoio à direita, como no desenho. */
.pmc-lista__topo {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 24px 60px;
  align-items: start;
  margin-bottom: 36px;
}

.pmc-lista__titulo {
  margin: 0;
  font-size: 32px;
  line-height: 1.1;
  font-weight: 600;
  color: #fff;
}

.pmc-lista__intro {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  color: #fff;
}

.pmc-lista__grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pmc-lista__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 30px;
  border-radius: 20px;
  background: var(--pmc-papel);
}

.pmc-lista__pilula {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 30px;
  color: var(--pmc-tinta);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

.pmc-lista__nome { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 600; }
.pmc-lista__nome a { color: var(--pmc-tinta); text-decoration: none; }
.pmc-lista__nome a:hover { text-decoration: underline; }

.pmc-lista__resumo {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--pmc-tinta);
}

/* O botão empurrado para baixo mantém a base alinhada entre cards de alturas
   diferentes, que é o que acontece assim que as descrições forem reais. */
.pmc-lista__acao { margin-top: auto; }

.pmc-lista__rodape { margin-top: 40px; text-align: center; }
.pmc-lista__rodape .pmc-btn { justify-content: center; }

@media (max-width: 900px) {
  .pmc-lista { padding-block: 56px; }
  .pmc-lista__topo { grid-template-columns: minmax(0, 1fr); margin-bottom: 28px; }
  .pmc-lista__titulo { font-size: 26px; }
  .pmc-lista__intro { font-size: 16px; }
  .pmc-lista__grade { grid-template-columns: minmax(0, 1fr); }
  .pmc-lista__card { padding: 24px; }
  .pmc-lista__nome { font-size: 21px; }
}

/* O tema entra por cima do tamanho e do peso de qualquer texto que não esteja
   dentro de um widget dele, e pinta todo <a> de azul. Nas duas seções novas
   isso saía como parágrafo em negrito, título menor do que o desenho e nome
   de curso azul dentro do card branco. Os valores abaixo são os do Figma. */
.pmc-promo .pmc-promo__titulo { font-size: 36px !important; font-weight: 600 !important; line-height: 1.1 !important; }
.pmc-promo .pmc-promo__texto  { font-size: 18px !important; font-weight: 400 !important; line-height: 1.5 !important; }

.pmc-lista .pmc-lista__titulo { font-size: 32px !important; font-weight: 600 !important; line-height: 1.1 !important; }
.pmc-lista .pmc-lista__intro  { font-size: 18px !important; font-weight: 400 !important; line-height: 1.5 !important; }
.pmc-lista .pmc-lista__nome   { font-size: 24px !important; font-weight: 600 !important; line-height: 1.2 !important; }
.pmc-lista .pmc-lista__resumo { font-size: 16px !important; font-weight: 400 !important; line-height: 1.6 !important; }
.pmc-lista .pmc-lista__pilula { font-size: 16px !important; font-weight: 600 !important; }

.pmc-lista .pmc-lista__nome a,
.pmc-lista .pmc-lista__nome a:hover,
.pmc-lista .pmc-lista__nome a:focus { color: var(--pmc-tinta) !important; }

.pmc-lista .pmc-btn.pmc-btn--secundario,
.pmc-lista .pmc-btn.pmc-btn--secundario:hover { color: var(--pmc-tinta) !important; text-decoration: none !important; }

@media (max-width: 900px) {
  .pmc-promo .pmc-promo__titulo { font-size: 28px !important; }
  .pmc-promo .pmc-promo__texto  { font-size: 16px !important; }
  .pmc-lista .pmc-lista__titulo { font-size: 26px !important; }
  .pmc-lista .pmc-lista__intro  { font-size: 16px !important; }
  .pmc-lista .pmc-lista__nome   { font-size: 21px !important; }
}

/* O painel abre por dois caminhos e só um deles adicionou alguma coisa. */
.pmc-drawer__titulo-ver { display: none; }
.pmc-drawer--so-ver .pmc-drawer__titulo-add { display: none; }
.pmc-drawer--so-ver .pmc-drawer__titulo-ver { display: inline; }

/* ------------------------------------------------ CTA com foto sangrada
   Figma 08 Mid-page CTA Banner (3688:8407): a foto ocupa os 1440, e o cartao
   azul de 647x223, raio 24, fica na metade direita. O texto NAO vai sobre a
   foto: vai dentro do cartao, que e o que garante contraste sem escurecer a
   imagem inteira. */
.pmc-cta--foto {
  background-color: var(--pmc-tinta);
  background-size: cover;
  background-position: center;
  padding: 0;
}

.pmc-cta--foto .pmc-cta__wrap {
  max-width: var(--pmc-largura);
  margin: 0 auto;
  padding: 130px 24px;
  display: flex;
  justify-content: flex-end;
}

.pmc-cta--foto .pmc-cta__cartao {
  background: var(--pmc-azul);
  border-radius: 24px;
  padding: 52px 56px;
  width: 647px;
  max-width: 100%;
  text-align: left;
}

.pmc-cta--foto .pmc-cta__botoes { justify-content: flex-start; }

/* -------------------------------------------- CTA final: texto e decoracao
   Figma 13 (3688:9136): a coluna de texto tem 575 e comeca em x=120; o
   agrupamento de circulos comeca em x=850. Com o texto centrado e ocupando
   900, a linha do resumo passava POR BAIXO dos circulos. */
.pmc-cta--azul { position: relative; overflow: hidden; }

.pmc-cta--azul {
  /* 100 em cima e em baixo: a seccao tem 398 no desenho novo (3888:794). */
  padding: 0;   /* a folga vive no contentor pai */
}

.pmc-cta--azul .pmc-cta__wrap {
  /* 1200 + os 24 de folga de cada lado: assim o texto comeca em 120 da borda
     da secao, como no desenho, e nao em 144. */
  max-width: calc(var(--pmc-largura) + 48px);
  text-align: left;
}

.pmc-cta--azul .pmc-cta__eyebrow,
.pmc-cta--azul .pmc-cta__titulo,
.pmc-cta--azul .pmc-cta__resumo { max-width: 575px; }

.pmc-cta--azul .pmc-cta__botoes { justify-content: flex-start; }

.pmc-cta__decoracao {
  position: absolute;
  right: 232px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  line-height: 0;
}

.pmc-cta__decoracao img { display: block; width: 329px; height: auto; }

/* ------------------------------------- botao primario sobre fundo escuro
   O "Add to basket" e azul sobre azul dentro do cartao e da faixa: some.
   No desenho os dois botoes sao pilulas BRANCAS. Vale para o cartao da foto
   e para a faixa azul; a faixa escura ja tinha contraste. */
.pmc-cta--azul .pmc-cta__botoes .pmc-btn.pmc-btn--primary,
.pmc-cta--foto .pmc-cta__botoes .pmc-btn.pmc-btn--primary {
  background-color: #fff !important;
  border-color: #fff !important;
  color: var(--pmc-tinta) !important;
}

.pmc-cta--azul .pmc-cta__botoes .pmc-btn.pmc-btn--primary:hover,
.pmc-cta--foto .pmc-cta__botoes .pmc-btn.pmc-btn--primary:hover {
  background-color: var(--pmc-lima) !important;
  border-color: var(--pmc-lima) !important;
  color: var(--pmc-tinta) !important;
}

@media (max-width: 1100px) {
  /* Abaixo disto a decoracao encostaria no texto. Sumir e melhor do que
     empurrar o titulo para tres linhas. */
  .pmc-cta__decoracao { display: none; }
}

@media (max-width: 900px) {
  .pmc-cta--foto .pmc-cta__wrap { padding: 56px 20px; justify-content: center; }
  .pmc-cta--foto .pmc-cta__cartao { padding: 32px 24px; }
}

/* Cards de strand: 1200x209 no desenho (Figma 3688:8439), folga 24. A altura
   e minima, e nao fixa: um resumo mais longo cresce em vez de vazar. */
.pmc-strands__item {
  min-height: 209px;
  border-radius: 20px;
}

/* ---------------------------------------------------------- barra fixa
   Figma 15 Sticky Mini-bar (3688:9240): 1440x80, fundo #f4cf80, botao preto
   de 169x43 com raio 21.5. */
.pmc-minibar {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 100; /* acima do sticky do cabecalho, que esta em 99 */
  background: #f4cf80;
  transform: translateY(-100%);
  transition: transform .25s ease;
}

/* No desenho ela esta no TOPO da pagina. Aqui ela entra por BAIXO: o site tem
   header fixo, e uma barra no topo cobriria o menu — que e por onde a pessoa
   sai da pagina. Embaixo ela nao disputa espaco com nada. */
.pmc-minibar--visivel { transform: translateY(0); }

.pmc-minibar__wrap {
  max-width: var(--pmc-largura);
  margin: 0 auto;
  min-height: 80px;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
}

.pmc-minibar__texto {
  margin: 0;
  color: #12143a;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}

.pmc-minibar__botao {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 11px 24px;
  border-radius: 999px;
  background: #12143a !important;
  color: #fff !important;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none !important;
  border: 1px solid #12143a !important;
  transition: background-color .2s ease, color .2s ease;
}

.pmc-minibar__botao:hover,
.pmc-minibar__botao:focus-visible {
  background: var(--pmc-azul) !important;
  border-color: var(--pmc-azul) !important;
  color: #fff !important;
}

.pmc-minibar__seta { line-height: 0; }

/* A gaveta abre por cima da barra; sem isto elas brigam pelo mesmo canto. */
body.pmc-drawer-aberto .pmc-minibar { transform: translateY(-100%); }

/* O texto e uma faixa: numa linha so, a andar em ciclo. A copia existe para
   o ciclo fechar sem salto — a -50% a segunda esta exactamente onde a
   primeira comecou. */
.pmc-minibar__faixa {
  display: flex;
  margin: 0;
  color: #12143a;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}

.pmc-minibar__frase { white-space: nowrap; }
.pmc-minibar__frase + .pmc-minibar__frase { display: none; }

@keyframes pmc-minibar-anda {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* O texto a correr vale também em tablet: o titulo do curso nao cabe numa
   linha antes dos 1025. */
@media (max-width: 1024px) {
  .pmc-minibar__wrap { min-height: 0; padding: 10px 16px 10px 0; gap: 12px; }
  .pmc-minibar__botao { padding: 10px 16px; font-size: 14px; }

  .pmc-minibar__texto {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  }

  .pmc-minibar__faixa {
    font-size: 14px;
    animation: pmc-minibar-anda 13s linear infinite;
    will-change: transform;
  }

  .pmc-minibar__frase { padding-right: 40px; }
  .pmc-minibar__frase + .pmc-minibar__frase { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .pmc-minibar__faixa { animation: none; }
}

/* -------------------------------------------------- a caixa da cesta
   No Figma a lupa e a cesta ficam numa caixa de 43x43 — mesma altura dos dois
   botoes ao lado, e area de clique de verdade em vez de um icone solto.

   O espacamento do grupo NAO esta aqui: e a caixa do container do Elementor
   que estava apertada, e quem conserta isso e o mc-032-header.php. CSS por
   cima so esconderia o problema. */
.pmc-cesta { width: 43px; height: 43px; }

/* ================================================================
   O buscador, conferido contra o Figma (3691:9353).

   O que estava no ar era funcional e generico: rotulo "Strand:" ao lado de
   um select do sistema, quatro pilulas cinza soltas dentro do card, o titulo
   como link azul sublinhado. O desenho pede outra coisa — e a diferenca nao
   e enfeite: e o que faz a lista parecer um catalogo de cursos em vez de um
   resultado de busca de painel administrativo.
   ================================================================ */

/* -- a barra: tudo pilula de 47px, folga de 10 (Figma) */
.pmc-finder__barra {
  gap: 10px !important;
  align-items: center;
}

.pmc-finder__busca input {
  height: 47px;
  border-radius: 30px !important;
  padding: 0 24px !important;
  border: 1px solid #e2e6e2 !important;
  background: #fff !important;
  font-size: 16px;
}

/* O rotulo saiu da tela (continua no HTML para leitor de tela), e o select
   virou pilula com o valor atual dentro. */
.pmc-finder__campo { gap: 0 !important; }

.pmc-finder__campo select {
  height: 47px;
  border-radius: 30px !important;
  border: 1px solid #e2e6e2 !important;
  background-color: #fff !important;
  padding: 0 44px 0 24px !important;
  color: #4c4c4c !important;
  font-size: 16px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234c4c4c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
}

.pmc-finder__barra .pmc-btn { height: 47px; }

/* -- a linha dos resultados: contagem a esquerda, ordenacao a direita */
.pmc-finder__resultados {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin: 24px 0 18px;
}

.pmc-finder__contagem { margin: 0 !important; }

.pmc-finder__ordenar {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.pmc-finder__ordenar-rotulo { color: #656565; font-size: 15.5px; }

/* -- o card */
.pmc-finder__lista { gap: 24px !important; }

.pmc-finder__card {
  position: relative;
  border-radius: 20px !important;
  padding: 24px 36px 36px !important;
}

.pmc-finder__identidade { min-width: 0; }

/* O tema pinta todo link de azul. No desenho o titulo do card e texto
   preto — azul sublinhado ali parecia conteudo sem estilo. */
.pmc-finder__nome a {
  color: #12143a !important;
  text-decoration: none !important;
}

.pmc-finder__card:hover .pmc-finder__nome a { color: var(--pmc-azul) !important; }

/* O link cobre o card inteiro. Assim o alvo de clique e o card, como se
   espera de um card, sem transformar tudo num <a> gigante que o leitor de
   tela leria de uma vez so. */
.pmc-finder__nome a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.pmc-finder__card:hover { box-shadow: 0 8px 28px rgba(18, 20, 58, .10); }

.pmc-finder__selo {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 55px;
  padding: 0 22px !important;
  border-radius: 27.5px !important;
  background: #f5f5f7 !important;
  color: #12143a !important;
  font-size: 15.5px;
  font-weight: 500;
}

/* -- os dois paineis, no lugar das quatro pilulas soltas */
.pmc-finder__paineis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 21px;
  margin: 20px 0 0;
}

.pmc-finder__painel {
  list-style: none;
  margin: 0;
  padding: 26px 28px;
  min-height: 126px;
  border-radius: 15px;
  background: #f5f5f7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.pmc-finder__painel li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #12143a;
  font-size: 16px;
  line-height: 1.35;
}

.pmc-finder__icone { flex: 0 0 auto; color: var(--pmc-azul); margin-top: 1px; }

/* -- o rodape do card */
.pmc-finder__rodape {
  margin-top: 26px !important;
  padding-top: 22px;
  border-top: 1px solid #e2e6e2;
}

/* "Fee £37": o rotulo pequeno e cinza, o numero grande. No desenho e o preco
   que salta, nao a palavra. */
.pmc-finder__preco { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

.pmc-finder__preco-rotulo {
  color: #9aa0b8;
  font-size: 14px;
  font-weight: 400;
}

.pmc-finder__preco .woocommerce-Price-amount { font-size: 26px; font-weight: 600; }

.pmc-finder__preco small,
.pmc-finder__preco .pmc-preco__nota { font-size: 13px; color: #9aa0b8; font-weight: 400; }

/* O botao e um <span>: o card inteiro ja e o link. Dois links para o mesmo
   lugar no mesmo card so atrapalham quem navega por teclado. */
.pmc-finder__acao { pointer-events: none; }

/* -- "View more N courses" */
.pmc-finder__mais {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}

@media (max-width: 900px) {
  .pmc-finder__paineis { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pmc-finder__painel { min-height: 0; padding: 18px 20px; }
  .pmc-finder__card { padding: 20px !important; }
  .pmc-finder__topo { flex-wrap: wrap; }
}

/* ------------------------------------------------- hero da listagem
   Figma 3691:9353, "03 Hero": 1440x522, foto sangrada, conteudo de 640 a
   x=120, e a faixa de listras fechando embaixo. O veu escurece a esquerda,
   como no hero do curso — a foto do desenho tem gente do lado direito. */
.pmc-lista-hero {
  position: relative;
  isolation: isolate;
  background-color: var(--pmc-tinta);
  background-size: cover;
  background-position: center right;
  min-height: 522px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pmc-lista-hero__veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(6, 8, 30, .88) 0%,
    rgba(6, 8, 30, .74) 34%,
    rgba(6, 8, 30, .28) 66%,
    rgba(6, 8, 30, 0) 90%
  );
}

.pmc-lista-hero__wrap {
  width: 100%;
  max-width: var(--pmc-largura);
  margin: 0 auto;
  padding: 96px 24px;
}

.pmc-lista-hero__conteudo { max-width: 640px; color: #fff; }

.pmc-lista-hero__titulo {
  margin: 0 0 18px;
  color: #fff;
  font-size: 54px;
  font-weight: 600;
  line-height: 1.08;
}

.pmc-lista-hero__texto {
  margin: 0 0 28px;
  color: rgba(255, 255, 255, .88);
  font-size: 18px;
  line-height: 1.6;
}

.pmc-lista-hero .pmc-listras { position: absolute; left: 0; right: 0; bottom: 0; }

/* A pagina da listagem usa o template de largura total do Elementor, entao a
   sangria vem do proprio template — sem truque de 100vw, que acrescentava uma
   rolagem horizontal de ~15px por causa da barra de rolagem.

   O titulo do tema tambem nao existe la: o template de largura total nao o
   imprime, e o <h1> passa a ser o do hero. */

/* ------------------------------------------------------ faixa com cartao
   Figma 3691:9353: foto sangrada de 1440x559 com um cartao de 647x308, raio
   24, na metade direita. Mesma forma do "Where to go next" da pagina do
   curso, mas com o texto vindo do editor em vez de um produto. */
.pmc-faixa {
  position: relative;
  background-color: var(--pmc-tinta);
  background-size: cover;
  background-position: center;
}

.pmc-faixa__wrap {
  max-width: var(--pmc-largura);
  margin: 0 auto;
  padding: 125px 24px;
  display: flex;
  justify-content: flex-end;
}

.pmc-faixa__cartao {
  width: 647px;
  max-width: 100%;
  padding: 62px 56px;
  border-radius: 24px;
  background: var(--pmc-lima);
  color: var(--pmc-tinta);
}

.pmc-faixa--azul .pmc-faixa__cartao { background: var(--pmc-azul); color: #fff; }
.pmc-faixa--magenta .pmc-faixa__cartao { background: #923472; color: #fff; }

.pmc-faixa__titulo {
  margin: 0 0 12px;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.15;
  color: inherit;
}

.pmc-faixa__texto { margin: 0; font-size: 18px; line-height: 1.55; color: inherit; }

.pmc-faixa__acao { margin-top: 52px; display: flex; flex-wrap: wrap; gap: 12px; }

/* Sobre o cartao lima, o botao branco e o que o desenho traz. */
.pmc-faixa .pmc-btn.pmc-btn--secundario {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--pmc-tinta) !important;
}

/* O branco acima tapava o hover; os estados voltam no tom do secundario. */
.pmc-faixa .pmc-btn.pmc-btn--secundario:hover,
.pmc-faixa .pmc-btn.pmc-btn--secundario:focus-visible {
  background: #f1f2fa !important;
  border-color: #f1f2fa !important;
  color: var(--pmc-tinta) !important;
}

@media (max-width: 900px) {
  .pmc-faixa__wrap { padding: 56px 20px; justify-content: center; }
  .pmc-faixa__cartao { padding: 32px 24px; }
  .pmc-faixa__titulo { font-size: 28px; }
}

@media (max-width: 767px) {
  .pmc-lista-hero { min-height: 0; }
  .pmc-lista-hero__wrap { padding: 56px 20px; }
  .pmc-lista-hero__titulo { font-size: 34px; }
  .pmc-lista-hero__veu { background: rgba(6, 8, 30, .8); }
}

/* --------------------------------------------------- icones do desenho
   Todos vem do Figma, exportados para assets/img/icones/ e embutidos pelo
   PMC_Imagens::icone(). Cada arquivo ja traz a cor que o desenho lhe deu, e
   por isso aqui so se define TAMANHO — pintar por cima desfaria a paleta. */
.pmc-icone { display: block; }

.pmc-glance__icone { display: inline-flex; line-height: 0; }
.pmc-glance__svg { width: 26px; height: 26px; }

.pmc-finder__icone { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; }
.pmc-finder__selo .pmc-finder__icone { margin-top: 0; }

/* --------------------------------------------- titulos longos em telas estreitas
   "Microcredential Courses" a 34px nao cabe numa coluna de 280px, e uma
   palavra que nao cabe empurra a pagina inteira: medido, 78px de rolagem
   horizontal em 320. O <h1> nunca reclama — quem reclama e o
   `scrollWidth - clientWidth`, e so se alguem for medir.

   `break-word` em vez de `anywhere`: quebra a palavra so quando nao ha
   alternativa, em vez de quebrar sempre que sobra pouco espaco. */
.pmc-hero__titulo,
.pmc-lista-hero__titulo,
.pmc-faixa__titulo,
.pmc-cta__titulo {
  overflow-wrap: break-word;
  word-break: normal;
}

@media (max-width: 400px) {
  .pmc-lista-hero__titulo { font-size: 28px; }
  .pmc-hero__titulo { font-size: 30px; }
}

/* --------------------------------------------- enfeites dos depoimentos
   Figma 3688:8531: as aspas em x=104/y=157 (16 a esquerda e 17 acima do
   canto do primeiro cartao, que comeca em 120/174) e a estrela em
   x=1271/y=360, por cima do canto inferior direito do segundo. Estavam
   soltas nas laterais da secao, sem encostar em nada. */
.pmc-dep__enfeite--aspas {
  left: calc(50% - 600px - 16px);
  top: 140px;
  width: 45px;
}

.pmc-dep__enfeite--estrela {
  right: auto;
  bottom: auto;
  left: calc(50% + 600px - 49px);
  top: 343px;
  width: 61px;
}

.pmc-dep__enfeite .pmc-icone { width: 100%; height: auto; }

/* --------------------------------------------------- sinais da FAQ
   O "+" e azul e o "-" e coral, dois desenhos diferentes, e ficam ANTES da
   pergunta — 40px a esquerda do texto. */
.pmc-faq__pergunta {
  display: flex;
  align-items: flex-start;
  gap: 23px;
}

.pmc-faq__sinal {
  order: -1;
  flex: 0 0 17px;
  width: 17px;
  margin-top: 8px;
  display: block;
  position: static;
}

.pmc-faq__sinal::before,
.pmc-faq__sinal::after { content: none; }

.pmc-faq__menos { display: none; }
.pmc-faq__item[open] .pmc-faq__mais { display: none; }
.pmc-faq__item[open] .pmc-faq__menos { display: block; }

/* O `justify-content: space-between` da regra original empurrava o sinal para
   a ponta da linha — era o que o desenho antigo pedia. Agora ele fica colado
   na pergunta, a 23px, e quem manda no alinhamento e a ordem, nao o espaco. */
.pmc-faq__pergunta { justify-content: flex-start; }

.pmc-faq__pergunta > span:last-child { flex: 1 1 auto; }

/* As colunas da FAQ e dos depoimentos comecam a 120 da borda, como o resto da
   pagina — 1200 + 24 de folga de cada lado. Com 1200 puros elas comecavam a
   144, e os enfeites, que sao posicionados pela medida do desenho, deixavam de
   encostar nos cantos dos cartoes. */
.pmc-dep__wrap,
.pmc-faq__wrap { max-width: var(--pmc-largura); }

/* As colunas da FAQ sao as do desenho (Figma 3688:8571): titulo com 436,
   folga de 137, perguntas com 594. Estavam em 340 + 64, o que empurrava as
   perguntas 170px para a esquerda do lugar delas. */
.pmc-faq__wrap {
  grid-template-columns: minmax(0, 436px) minmax(0, 594px);
  gap: 137px;
}

@media (max-width: 1100px) {
  .pmc-faq__wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* O enfeite azul das faixas com foto: 525x541 sangrando por -311/-262 no
   desenho (Figma 3688:8436), ou seja, so um pedaco dele aparece. */
.pmc-cta--foto,
.pmc-next,
.pmc-faixa { position: relative; overflow: hidden; }

.pmc-folha {
  position: absolute;
  left: -311px;
  top: -262px;
  width: 525px;
  line-height: 0;
  pointer-events: none;
  z-index: 0;
}

.pmc-folha .pmc-icone { width: 100%; height: auto; }

.pmc-cta--foto .pmc-cta__wrap,
.pmc-next__wrap,
.pmc-faixa__wrap { position: relative; z-index: 1; }

@media (max-width: 900px) {
  /* Numa tela estreita ele cobriria o texto do cartao em vez de decorar. */
  .pmc-folha { display: none; }
}

/* ==========================================================================
   O painel lateral da cesta — Figma "Course Page — Basket" (3714:9686)

   Ele é a ÚNICA cesta do projeto: a página /cart/ foi aposentada. Todo número
   abaixo saiu do nó, e não de arredondamento.

     painel        425 de largura, branco, raio 20
     cabeçalho     pad 24/24/20/24, seta 18 + "Continue shopping" 18/600/22
     item          142 de altura, pad 16/24, gap 16, traço #DDDDDD embaixo
       foto        88x108, raio 12
       texto       gap 4 — área 14/600/20 #3B44B5, nome 16/600/21,
                   formato 14/400/21 #4C4C4C
       lixo        20x20 em #F06C6A, no topo à direita
       preço       18/600/23
     rodapé        traço em cima, pad 20/24/24/24, gap 16
       subtotal    "Subtotal" 20/600/30 + contagem 16/400/24 #8C8C94,
                   valor 24/600/36
       ações       gap 12 — ghost 48 e primário 46, ambos raio 500 e 18/600/22
   ========================================================================== */

.pmc-drawer__painel {
  width: 425px;
  max-width: 100%;
  padding: 0;
  border-radius: 20px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}

/* -- cabeçalho: a seta E o texto são o botão de fechar */
/* O tema pinta TODO <button> com a cor da marca e arredonda: o cabecalho saia
   como uma pilula magenta. Ja registrado no projeto — a saida e peso de id
   mais !important, e nao mais uma classe.
   Ver feedback_theme_css_and_sticky_header. */
.pmc-drawer .pmc-drawer__painel button.pmc-drawer__voltar,
.pmc-drawer .pmc-drawer__voltar {
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #000000 !important;
  min-height: 0 !important;
}

.pmc-drawer .pmc-drawer__painel button.pmc-drawer__voltar:hover,
.pmc-drawer .pmc-drawer__voltar:hover {
  background: none !important;
  color: #3b44b5 !important;
}

.pmc-drawer .pmc-drawer__voltar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 24px 24px 20px;
  border: 0;
  background: none;
  color: #000000;
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  text-align: left;
  cursor: pointer;
}

.pmc-drawer .pmc-drawer__voltar svg { width: 18px; height: 18px; flex: none; }

.pmc-drawer .pmc-drawer__voltar:hover { color: #3b44b5; }

/* -- o miolo rola; o rodapé fica preso embaixo */
.pmc-drawer__miolo {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.pmc-drawer__conteudo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.pmc-drawer__itens {
  margin: 0;
  padding: 0;
  list-style: none;
  display: block;
}

/* Risco em cima de cada item e em baixo do último: entre dois itens fica um
   risco só, e o primeiro e o último ficam fechados, como no desenho
   (3843:18856, contorno #DDDDDD). */
.pmc-drawer .pmc-drawer__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
  padding: 17px 24px;
  border: 0;
  border-top: 1px solid #dddddd;
  background: none;
  transition: opacity .18s ease;
}

.pmc-drawer .pmc-drawer__item:last-child {
  border-bottom: 1px solid #dddddd;
}

/* Enquanto a remoção vai e volta do servidor, o item apaga. Se a rede falhar
   ele volta ao normal, em vez de ficar meio apagado para sempre. */
.pmc-drawer .pmc-drawer__item--saindo { opacity: .4; pointer-events: none; }

.pmc-drawer .pmc-drawer__media { flex: 0 0 88px; width: 88px; }

/* O tema traz `.elementor img { border-radius: 0 }` e ganha da regra genérica. */
.pmc-drawer .pmc-drawer__media img {
  display: block;
  width: 88px;
  height: 108px;
  object-fit: cover;
  border-radius: 12px !important;
}

.pmc-drawer .pmc-drawer__corpo {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pmc-drawer .pmc-drawer__topo-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.pmc-drawer .pmc-drawer__texto {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* A cor vem da strand, num custom property posto no próprio elemento; o azul
   fica só para um curso sem strand definida. */
.pmc-drawer .pmc-drawer__area {
  margin: 0;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 20px !important;
  color: var(--pmc-drawer-area, #3b44b5);
}

.pmc-drawer .pmc-drawer__titulo {
  margin: 0;
  font-size: 16px !important;
  font-weight: 600;
  line-height: 21px !important;
  color: #000000;
}

.pmc-drawer .pmc-drawer__formato {
  margin: 0;
  font-size: 14px !important;
  font-weight: 400;
  line-height: 21px !important;
  color: #4c4c4c;
}

/* Quantidade à esquerda, preço à direita, na mesma linha (3843:18865). */
.pmc-drawer .pmc-drawer__linha-qtd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pmc-drawer .pmc-drawer__qtd,
.pcs .pmc-checkout-qtd .pmc-drawer__qtd {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Todos os estados juntos: o kit do Elementor pinta `button` com fundo e
   moldura próprios, e uma regra só perdia no primeiro hover. */
.pmc-drawer .pmc-drawer__qtd-btn,
.pcs .pmc-checkout-qtd .pmc-drawer__qtd-btn,
.pmc-drawer .pmc-drawer__qtd-btn:hover,
.pcs .pmc-checkout-qtd .pmc-drawer__qtd-btn:hover,
.pmc-drawer .pmc-drawer__qtd-btn:focus,
.pcs .pmc-checkout-qtd .pmc-drawer__qtd-btn:focus,
.pmc-drawer .pmc-drawer__qtd-btn:focus-visible,
.pcs .pmc-checkout-qtd .pmc-drawer__qtd-btn:focus-visible,
.pmc-drawer .pmc-drawer__qtd-btn:active,
.pcs .pmc-checkout-qtd .pmc-drawer__qtd-btn:active {
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  color: #3b44b5;
  cursor: pointer;
  transition: color .15s ease, opacity .15s ease;
}

.pmc-drawer .pmc-drawer__qtd-btn:hover:not([disabled]),
.pcs .pmc-checkout-qtd .pmc-drawer__qtd-btn:hover:not([disabled]),
.pmc-drawer .pmc-drawer__qtd-btn:focus-visible:not([disabled]),
.pcs .pmc-checkout-qtd .pmc-drawer__qtd-btn:focus-visible:not([disabled]) {
  color: #2b338f;
}

/* Desligado quando o servidor não aceita mais: a microcredencial é uma por
   pessoa (`sold_individually` em PMC_Cart). Continua visível, para a linha não
   saltar, mas não se finge que dá. */
.pmc-drawer .pmc-drawer__qtd-btn[disabled],
.pcs .pmc-checkout-qtd .pmc-drawer__qtd-btn[disabled] {
  opacity: .32;
  cursor: default;
}

.pmc-drawer .pmc-drawer__qtd-valor,
.pcs .pmc-checkout-qtd .pmc-drawer__qtd-valor {
  min-width: 20px;
  font-size: 18px;
  font-weight: 600;
  line-height: 23px;
  color: #000000;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.pmc-drawer .pmc-drawer__preco {
  margin: 0;
  font-size: 18px !important;
  font-weight: 600;
  line-height: 23px !important;
  color: #000000;
  white-space: nowrap;
}

/* Enquanto o servidor responde, a linha esmorece — e não aceita outro clique
   antes de saber em quanto ficou. */
.pmc-drawer .pmc-drawer__linha-qtd[data-pmc-ocupado],
.pcs .pmc-checkout-qtd[data-pmc-ocupado] {
  opacity: .5;
  pointer-events: none;
}

/* -- remover: o lixo do desenho, em coral */
.pmc-drawer .pmc-drawer__remover {
  flex: 0 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: #f06c6a;
  text-decoration: none;
  cursor: pointer;
}

.pmc-drawer .pmc-drawer__remover svg { width: 20px; height: 20px; }

.pmc-drawer .pmc-drawer__remover:hover { color: #d94b49; }

/* -- cesta vazia */
.pmc-drawer .pmc-drawer__vazio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 24px;
}

.pmc-drawer .pmc-drawer__vazio-texto {
  margin: 0;
  font-size: 16px !important;
  line-height: 24px !important;
  color: #4c4c4c;
}

/* -- rodapé */
.pmc-drawer .pmc-drawer__rodape {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px 24px;
  border-top: 1px solid #dddddd;
  background: #ffffff;
}

.pmc-drawer .pmc-drawer__rodape[hidden] { display: none; }

.pmc-drawer .pmc-drawer__subtotal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
}

.pmc-drawer .pmc-drawer__subtotal-rotulo {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 20px !important;
  font-weight: 600;
  line-height: 30px !important;
  color: #000000;
}

.pmc-drawer .pmc-drawer__contagem {
  font-size: 16px !important;
  font-weight: 400;
  line-height: 24px !important;
  color: #8c8c94;
}

.pmc-drawer .pmc-drawer__subtotal-valor {
  font-size: 24px !important;
  font-weight: 600;
  line-height: 36px !important;
  color: #000000;
}

.pmc-drawer .pmc-drawer__nota {
  margin: 0;
  font-size: 14px !important;
  line-height: 21px !important;
  color: #4c4c4c;
}

.pmc-drawer .pmc-drawer__acoes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pmc-drawer .pmc-drawer__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 12px 28px;
  border-radius: 500px;
  font-size: 18px !important;
  font-weight: 600;
  line-height: 22px !important;
  text-decoration: none;
  cursor: pointer;
}

.pmc-drawer .pmc-drawer__btn--ghost {
  height: 48px;
  border: 1px solid #dddddd;
  background: #ffffff;
  color: #000000;
}

.pmc-drawer .pmc-drawer__btn--ghost:hover { background: #f5f5f7; }

.pmc-drawer .pmc-drawer__btn--primario {
  height: 46px;
  border: 0;
  background: #3b44b5;
  color: #ffffff;
}

.pmc-drawer .pmc-drawer__btn--primario:hover { background: #2f3792; }

/* O texto dos dois botoes ficava magenta ao passar o rato: o kit do Elementor
   pinta `a:hover` com a cor secundaria (.elementor-kit-1081 a:hover, peso
   0,2,1), e aqui so havia regra de cor para o estado parado. Tres classes
   ganham dele em todos os estados. */
.pmc-drawer .pmc-drawer__btn--primario:hover,
.pmc-drawer .pmc-drawer__btn--primario:focus,
.pmc-drawer .pmc-drawer__btn--primario:focus-visible,
.pmc-drawer .pmc-drawer__btn--primario:active { color: #ffffff; }

.pmc-drawer .pmc-drawer__btn--ghost:hover,
.pmc-drawer .pmc-drawer__btn--ghost:focus,
.pmc-drawer .pmc-drawer__btn--ghost:focus-visible,
.pmc-drawer .pmc-drawer__btn--ghost:active { color: #000000; }

.pmc-drawer .pmc-drawer__btn--primario svg { width: 18px; height: 18px; flex: none; }

@media ( max-width: 480px ) {
  .pmc-drawer__painel { width: 100%; border-radius: 0; }

  .pmc-drawer .pmc-drawer__media { flex: 0 0 72px; width: 72px; }
  .pmc-drawer .pmc-drawer__media img { width: 72px; height: 90px; }
}

/* ==========================================================================
   Revisão de telefone — o que a medição e três revisores de UI acharam

   Cada regra aqui saiu de um número medido em 402 ou 320, não de impressão.
   O que NÃO está aqui, porque foi verificado e era falso: o campo do cartão
   do Stripe funciona em 320 (medido: 228x228, e o preenchimento passa), e o
   cabeçalho não cobre o stepper do checkout (ele rola junto).
   ========================================================================== */

/* -- 1. A nota de imposto saía em 9,92px.

   `font-size: 0.62em` sobre um pai de 16px dá 9,9 — e é informação de preço,
   que é justamente o que não pode ficar ilegível. Passa a ter piso absoluto. */
.pmc-preco__nota {
  font-size: 14px;
  color: #4c4c4c;
}

/* -- 2. O preço do card da listagem estava em #8A8FAE: 3,17:1 sobre branco.

   Ele lia como texto desabilitado, com a MESMA cor do rótulo "Fee" ao lado.
   O dado comercial mais importante da vitrine tem de ser o mais legível. */
.pmc-finder__preco .woocommerce-Price-amount { color: #000000; }

.pmc-finder__preco small,
.pmc-finder__preco .pmc-preco__nota { font-size: 14px; color: #4c4c4c; }

/* -- 3. O título do hero quebrava no meio da palavra: "Microcredenti|al".

   Medido: 54px de fonte numa coluna de 280 em 320 — "Microcredential" mede
   ~400px sozinha, então o `break-word` fazia o que devia, e o defeito era o
   tamanho nunca ter diminuído. A media query antiga era `max-width: 400px`,
   e o telefone mais comum tem 402.

   `clamp` em vez de degraus: a palavra passa a caber em qualquer largura, e
   some a razão para quebrar. */
/* Com a classe da secao junto, e !important: medido, a regra de uma classe so
   perdia e o titulo continuava em 54px num telefone de 320. O tema deste site
   ja tem historico de ganhar de regra generica. */
.pmc-hero .pmc-hero__titulo,
.pmc-lista-hero .pmc-lista-hero__titulo {
  font-size: clamp( 30px, 8.2vw, 54px ) !important;
  hyphens: auto;
}

.pmc-cta .pmc-cta__titulo { font-size: clamp( 26px, 4.6vw, 36px ) !important; line-height: 1.3 !important; }
.pmc-faixa .pmc-faixa__titulo { font-size: clamp( 26px, 6.4vw, 42px ) !important; }
.pmc-faixa--lima .pmc-faixa__titulo { color: #000; }

/* -- 4. Alvos de toque abaixo de 44px.

   As duas plataformas pedem 44. Onde o desenho fixa um tamanho menor (o lixo
   de 20 da gaveta, por exemplo), o DESENHO fica e o alvo cresce por padding —
   é a área que precisa de 44, não o glifo. */
.pmc-btn { min-height: 44px; }

.pmc-drawer .pmc-drawer__remover {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: -12px -12px 0 0;   /* o alvo cresce para fora, sem mexer no layout */
}

.pmc-drawer .pmc-drawer__remover svg { width: 20px; height: 20px; }

/* O ícone da cesta e a lupa do cabeçalho: o desenho mobile (3729:5238) põe os
   dois em 43x43, e o nosso saía com o glifo de 17. */
.pmc-cesta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

@media ( max-width: 900px ) {
  /* -- 5. A barra fixa de compra cobria o rodapé no fim da rolagem.

     `body` não tinha folga nenhuma embaixo (medido: padding-bottom 0), e a
     barra tem 77px em 402 e 133px em 320. A folga é posta pelo JS, que sabe a
     altura real; aqui fica só o mínimo, para o caso de o JS não rodar. */
  /* A barra passou para o topo: a folga e em cima, e o chat volta ao lugar. */
  body.pmc-minibar-ativa { padding-bottom: 0; }
}

/* -- o botao da barra fixa tinha 147x40: e o CTA mais usado da pagina do
   curso em telefone, e era o unico alvo abaixo de 44 que sobrou nela. */
.pmc-minibar__botao { min-height: 44px; }

/* A barra fica no topo; o body abre-lhe espaco e o cabecalho pegajoso, que
   o Elementor prende em top:0 por estilo em linha, passa a prender-se
   abaixo dela. */
body.pmc-minibar-ativa { padding-top: var( --pmc-minibar-h, 80px ); }

body.pmc-minibar-ativa .elementor-location-header .elementor-sticky--active {
  position: relative !important;
  top: auto !important;
  width: auto !important;
}

body.pmc-minibar-ativa .elementor-location-header .elementor-sticky__spacer {
  display: none !important;
}

/* -- o preco da vitrine lia como tres pecas soltas: "Fee" 13px, "£" 13px e
   "37.00" em 26px. O simbolo faz parte do numero. */
.pmc-finder__preco .woocommerce-Price-currencySymbol {
  font-size: inherit;
  color: inherit;
}

/* Com a classe do bloco junto: medido, a regra de uma classe so perdia e o
   rotulo continuava em 13px. */
.pmc-finder__preco .pmc-finder__preco-rotulo { font-size: 14px; }

/* ---------------------------------------------- faixa em tablet

   O cartao fica na metade direita da seccao, e o titulo cede tamanho para
   nao virar cinco linhas dentro de meia largura. Fica no fim do ficheiro
   porque o tamanho vem de um clamp com !important mais acima. */
@media (min-width: 768px) and (max-width: 1024px) {
  .pmc-faixa__wrap { justify-content: flex-end; padding: 72px 24px; }
  .pmc-faixa__cartao { width: 52%; min-width: 320px; padding: 40px 32px; }
  .pmc-faixa .pmc-faixa__titulo { font-size: 28px !important; }
  .pmc-faixa__acao { margin-top: 32px; }
}

/* ------------------------------------------ carrinho em ecra pequeno

   A mesma folga, mas menor: a 24 px de cada lado sobrava pouca largura
   util num telefone. */
@media (max-width: 600px) {
  .pmc-drawer__painel {
    top: 12px;
    right: 12px;
    bottom: 12px;
    width: calc(100% - 24px);
    padding: 20px;
    border-radius: 16px;
    transform: translateX(calc(100% + 12px));
  }

  .pmc-drawer--aberto .pmc-drawer__painel { transform: translateX(0); }

  /* O painel ja tem os 20px de folga: cabecalho, itens e rodape nao somam
     mais 24 de cada lado, e o conteudo fica na largura das linhas (pedido do
     Pedro, 23/09/2026). */
  .pmc-drawer .pmc-drawer__voltar,
  .pmc-drawer .pmc-drawer__item,
  .pmc-drawer .pmc-drawer__rodape {
    padding-left: 0;
    padding-right: 0;
  }

  /* "Continue shopping" sem folga propria: por cima ficam os 20px do painel
     e por baixo os 20 do vao do painel ate a linha, em vez de 44 e 40. A
     folga de 11px com margem negativa igual so devolve ao dedo os 44px de
     alvo, sem mexer no que se ve. */
  .pmc-drawer .pmc-drawer__voltar {
    margin: -11px 0;
    padding-top: 11px;
    padding-bottom: 11px;
  }
}

/* -------------------------------- botoes do carrinho em ecra pequeno

   A 18 px o "Proceed to checkout" partia em duas linhas dentro do painel. */
@media (max-width: 600px) {
  .pmc-drawer .pmc-drawer__btn {
    padding: 12px 20px;
    gap: 8px;
    font-size: 15px !important;
    line-height: 20px !important;
  }
}

/* ------------------------------------------------ prose em ecra medio

   As larguras do desenho (391+71+738 e 520+99+580) sao de 1440. Entre
   768 e 1100 elas nao cabem e a coluna de texto do "para quem e" ficava
   com 78px. Uma coluna so, foto por cima. */
@media (max-width: 1100px) {
  .pmc-prose--imagem_esquerda .pmc-prose__wrap,
  .pmc-prose--imagem_direita .pmc-prose__wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .pmc-prose--imagem_direita .pmc-prose__foto { order: 0; }

  .pmc-prose__foto img.pmc-prose__img {
    width: 100% !important;
    max-height: 360px !important;
  }
}

/* O titulo da FAQ quebra em duas linhas no desenho: a caixa tem 234. */
.pmc-faq .pmc-faq__titulo { max-width: 240px; }

@media (max-width: 1100px) {
  .pmc-faq .pmc-faq__titulo { max-width: none; }
}

/* A faixa final em telemovel: o --azul ganhava da regra geral e ficava com
   os 100 do desktop. */
@media (max-width: 767px) {
  .pmc-cta--azul { padding: 0; }
}

@media (max-width: 767px) {
  .pmc-faq--livre { padding: 0; }
}

/* ------------------------------------------------ faixa de cores

   Oito cores de 90px que se repetem (Figma 3821:16737). Vive num
   contentor proprio, como na pagina de listagem: dentro do widget ela
   apanharia a folga da seccao por baixo. */
.pmc-faixa-cores {
  min-height: 12px;
  background-image: linear-gradient(to right,
    #f06c6a 0 12.5%, #e070a2 12.5% 25%, #923472 25% 37.5%, #3b44b5 37.5% 50%,
    #28ae62 50% 62.5%, #b7db6e 62.5% 75%, #f4ab63 75% 87.5%, #f4cf80 87.5% 100%);
  background-size: 720px 100%;
  background-repeat: repeat-x;
}

/* ---------------------------------------- faixa final em duas colunas

   Agora a foto e uma coluna do contentor, nao um `absolute` dentro do
   widget: sem recorte, e sem maneira de passar da largura do conteudo. */
.pmc-cta--azul { overflow: visible; }

.pmc-cta--azul .pmc-cta__wrap {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* O widget e a primeira coluna e cresce; a imagem fica com a sua largura. */
.elementor-widget-pmc_cta { flex: 1 1 auto; min-width: 0; }

/* ================================================ o dialogo de "ja esta na cesta"

   Substitui a tarja cinzenta do WooCommerce, que so aparecia depois de
   recarregar a pagina no endereco do produto. Aqui nada recarrega: o clique e
   apanhado antes de sair (pmc-drawer.js) e isto abre por cima.

   Mesma linguagem da gaveta: cartao branco de cantos redondos, fundo escuro
   com desfoque, e os dois botoes do rodape da cesta. */
.pmc-modal {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.pmc-modal[hidden] { display: none; }

.pmc-modal__fundo {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 32, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .22s ease;
}

.pmc-modal--aberto .pmc-modal__fundo { opacity: 1; }

.pmc-modal__caixa {
  position: relative;
  width: 100%;
  max-width: 460px;
  padding: 32px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
  opacity: 0;
  transform: translateY(12px) scale(.98);
  transition: opacity .22s ease, transform .22s ease;
}

.pmc-modal--aberto .pmc-modal__caixa {
  opacity: 1;
  transform: none;
}

/* Todos os estados juntos: o kit do Elementor pinta `button`. */
.pmc-modal .pmc-modal__fechar,
.pmc-modal .pmc-modal__fechar:hover,
.pmc-modal .pmc-modal__fechar:focus,
.pmc-modal .pmc-modal__fechar:focus-visible,
.pmc-modal .pmc-modal__fechar:active {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  color: #4c4c4c;
  cursor: pointer;
}

.pmc-modal .pmc-modal__fechar:hover,
.pmc-modal .pmc-modal__fechar:focus-visible {
  background: #f5f5f7;
  color: #000;
}

/* Dois niveis: o kit do Elementor dita o tamanho de `h2` e ganhava de uma
   classe sozinha — o titulo saia a 32px. */
.pmc-modal .pmc-modal__titulo {
  margin: 0 40px 12px 0;
  font-family: "Aptos", "Segoe UI", Arial, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 30px;
  color: #000;
}

.pmc-modal .pmc-modal__texto {
  margin: 0 0 28px;
  font-family: "Aptos", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #4c4c4c;
}

.pmc-modal__acoes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Os mesmos botoes do rodape da cesta, mas com regras proprias: as da gaveta
   estao presas a `.pmc-drawer`, e aqui sao <button> e nao <a> — sem isto o kit
   do Elementor devolvia-os a `display: block`, com a seta a cair para a
   esquerda do texto. Todos os estados juntos, pelo mesmo motivo de sempre. */
.pmc-modal .pmc-modal__btn,
.pmc-modal .pmc-modal__btn:hover,
.pmc-modal .pmc-modal__btn:focus,
.pmc-modal .pmc-modal__btn:focus-visible,
.pmc-modal .pmc-modal__btn:active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 12px 28px;
  border-radius: 500px;
  box-shadow: none;
  font-family: "Aptos", "Segoe UI", Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
}

.pmc-modal .pmc-modal__btn--ghost,
.pmc-modal .pmc-modal__btn--ghost:focus,
.pmc-modal .pmc-modal__btn--ghost:active {
  height: 48px;
  border: 1px solid #dddddd;
  background: #ffffff;
  color: #000000;
}

.pmc-modal .pmc-modal__btn--ghost:hover,
.pmc-modal .pmc-modal__btn--ghost:focus-visible {
  border-color: #dddddd;
  background: #f5f5f7;
  color: #000000;
}

.pmc-modal .pmc-modal__btn--primario,
.pmc-modal .pmc-modal__btn--primario:focus,
.pmc-modal .pmc-modal__btn--primario:active {
  height: 46px;
  border: 0;
  background: #3b44b5;
  color: #ffffff;
}

.pmc-modal .pmc-modal__btn--primario:hover,
.pmc-modal .pmc-modal__btn--primario:focus-visible {
  background: #2f3792;
  color: #ffffff;
}

.pmc-modal .pmc-modal__btn svg { width: 18px; height: 18px; flex: none; }

/* O fundo nao rola por baixo do dialogo. */
body.pmc-modal-aberto { overflow: hidden; }

@media (max-width: 480px) {
  .pmc-modal { padding: 16px; }

  .pmc-modal__caixa { padding: 24px 20px; }

  .pmc-modal .pmc-modal__titulo { font-size: 20px; line-height: 27px; }

  .pmc-modal .pmc-modal__texto { font-size: 15px; line-height: 23px; margin-bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .pmc-modal__fundo,
  .pmc-modal__caixa { transition: none; }
}

/* ================================================ telemovel-carrossel-strands

   -- 1. A etiqueta saia em cima do rosto.

   Mudar de canto nao servia: a foto muda de curso para curso, e o rosto tanto
   pode estar a esquerda como a direita. Quem ganha espaco e a foto — de 640/301
   passa a 16/10, que no telemovel sao 54px a mais de altura. `cover` recorta
   menos pelo topo, e a faixa de fundo que ficava de fora volta a aparecer: e
   nela que a etiqueta assenta.

   E a etiqueta encolhe, porque a esta largura ela ocupava mais de um terco da
   foto. */
@media (max-width: 680px) {
  .pmc-hero__figura {
    aspect-ratio: 16 / 10;
  }

  .pmc-hero__tag {
    top: 16px;
    left: 16px;
    gap: 6px;
    max-width: calc(100% - 32px);
    padding: 5px 12px;
    font-size: 12px;
    line-height: 18px;
  }

  .pmc-hero__tag-ico {
    width: 16px;
    height: 16px;
  }
}

/* -- 2. Um cartao de strand de cada vez.

   A um e meio por ecra, o segundo aparecia cortado a meio de uma frase e a
   seta nao tinha relacao nenhuma com o que se via. Ocupando a largura toda, um
   clique e um cartao — e o passo do carrossel passa a bater certo sozinho,
   porque ele mede a largura do cartao. */
@media (max-width: 680px) {
  /* Sem sangria: ela existia para deixar espreitar o cartao seguinte, e com um
     cartao de cada vez so servia para comer a goteira da direita. */
  .pmc-strands__pista {
    margin-right: 0;
  }

  .pmc-strands__card {
    flex: 0 0 100%;
  }
}