/*
 * avg-cursos-front 0.2.4 (Fase 12) — visual novo do card de curso, aprovado pelo Guilherme em 2026-10-11 (prévia
 * fase12/previa, seções 1 e 2). Só vale com a chave ligada (Card_Visual; option avgc_card_visual = 'v1' desliga).
 * Escopo próprio (nada aqui pega fora destas classes):
 *   .avgc-card-v2  card de curso (vitrine, filtros, busca, categorias, tags, Sugestões, professor, "Carregar mais")
 *   .avgc-prof-v2  título "Meus cursos" da página do professor
 *   .avgc-mais     botão "Carregar mais" da página do professor
 *   .avgc-home-v2  carrossel "Confira os últimos cursos" da home
 * Entra DEPOIS do CSS do tema (wp_enqueue_scripts 1000 × 999 do tema). Os seletores têm especificidade maior que as
 * regras do tema/Flatsome/Personalizar que pegam no card hoje (fase12/entender/cards/regras-card-hoje.css); !important
 * só contra regras do tema que já usam !important (ou a especificidade 0,9,0 do product.css nas Sugestões).
 * Não depende de first/last nem do lazyload do WP Rocket (data-lazy-src): os cards do AJAX chegam sem os dois.
 */

.avgc-card-v2, .avgc-prof-v2, .avgc-mais, .avgc-home-v2 {
  --avgc-verde: #04251E;
  --avgc-verde-txt: #03251E;
  --avgc-bege: #E5DBC5;
  --avgc-fundo: #F1F3F6;
  --avgc-borda: #DDE2E7;
  --avgc-borda-forte: #CBD2D9;
  --avgc-linha: #EDF0F2;
  --avgc-cinza: #6D6D6D;
  --avgc-titulo: #0E1714;
  --avgc-hover: #00504F;
}

/* =====================================================================================================================
   1) CARD DE CURSO
   ===================================================================================================================== */

.product-small.avgc-card-v2 > .col-inner { height: 100%; }

.product-small.avgc-card-v2 .product-small.box {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  margin: 0 !important; /* celular: .shop-container .product-small {margin-bottom:2.5em !important} do tema pega também nesta div (sobravam 40 px no card) */
  border: 1px solid var(--avgc-borda);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(3, 37, 30, .04), 10px 10px 15px rgba(0, 0, 0, .02);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, border-color .35s ease;
}
.product-small.avgc-card-v2 .product-small.box:hover,
.product-small.avgc-card-v2 .product-small.box:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 18px 32px -16px rgba(0, 0, 0, .2); /* sombra preta e clara (Guilherme, 2026-10-11) */
  border-color: #C9D1D8;
}

/* imagem 16:10 (aspect-ratio no lugar do padding-top 56% do tema/Personalizar), zoom leve e véu no hover */
.product-small.avgc-card-v2 .product-small.box .box-image {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  padding: 0;
  margin: 0 !important;
  overflow: hidden;
  border-radius: 0;
  background: #E9EDF0;
}
@supports not (aspect-ratio: 1 / 1) {
  .product-small.avgc-card-v2 .product-small.box .box-image { height: 0; padding-top: 62.5%; }
}
.product-small.avgc-card-v2 .product-small.box .box-image > div:first-child,
.product-small.avgc-card-v2 .product-small.box .box-image > div:first-child > a {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: block;
  margin: 0;
}
.product-small.avgc-card-v2 .product-small.box .box-image .woocommerce-product-gallery__image--placeholder {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}
.product-small.avgc-card-v2 .product-small.box .box-image img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(1.001);
  transition: transform .8s cubic-bezier(.2, .7, .2, 1), opacity .6s, filter .6s;
}
.product-small.avgc-card-v2 .product-small.box:hover .box-image img { transform: scale(1.07); }

/* selos sobre a imagem: chip branco com bolinha na cor do termo (--cor) */
.product-small.avgc-card-v2 .product-small.box .box-image .badges-container {
  position: absolute;
  top: 12px; left: 12px; right: 12px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
.product-small.avgc-card-v2 .product-small.box .badges-container .modality,
.product-small.avgc-card-v2 .product-small.box .badges-container .event-type,
.product-small.avgc-card-v2 .product-small.box .badges-container .free-term {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 6px 11px 6px 9px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .95) !important; /* .free-term do tema tem !important */
  color: var(--avgc-verde-txt);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .16);
}
.product-small.avgc-card-v2 .product-small.box .badges-container span::before {
  content: "";
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cor, var(--avgc-verde-txt));
}
.product-small.avgc-card-v2 .product-small.box .badges-container .free-term::before { background: #053B30; }

/* "Fora de estoque" (curso indisponível) sobre o véu */
.product-small.avgc-card-v2 .product-small.box .box-image .out-of-stock-label {
  z-index: 2;
  font-size: 12px;
  letter-spacing: .06em;
}

/* corpo */
.product-small.avgc-card-v2 .product-small.box .box-text.box-text-products {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 12px;
  padding: 16px;
  border: 0;
  background: transparent;
  font-size: 14px;
  text-align: left;
}
.product-small.avgc-card-v2 .product-small.box .title-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding: 0;
}
.product-small.avgc-card-v2 .product-small.box .title-wrapper .category {
  max-width: 100%;
  margin: 0;
  padding: 3px 10px;
  overflow: hidden;
  border: 1px solid var(--avgc-borda);
  border-radius: 99px;
  background: var(--avgc-fundo);
  color: var(--avgc-verde-txt);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
  opacity: 1;
}
.product-small.avgc-card-v2 .product-small.box .title-wrapper .product-title {
  margin: 0;
  padding: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -.005em;
}
.product-small.avgc-card-v2 .product-small.box .title-wrapper .product-title a {
  display: inline;
  margin: 0;
  color: var(--avgc-titulo);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.32;
  text-decoration: none;
  transition: color .25s;
}
.product-small.avgc-card-v2 .product-small.box:hover .title-wrapper .product-title a { color: var(--avgc-hover); }

/* professor: foto redonda + nome (uma linha) */
.product-small.avgc-card-v2 .product-small.box .badge-speaker {
  display: flex;
  align-items: center;
  gap: 9px;
  width: auto;
  min-height: 26px;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: #2F2F2F;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
}
.product-small.avgc-card-v2 .product-small.box .badge-speaker img {
  display: block;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  max-width: none;
  margin: 0;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--avgc-borda);
}
.product-small.avgc-card-v2 .product-small.box .badge-speaker .avgc-card-prof {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "Carga horária / Tempo de acesso" em 2 colunas, sem ícones; "Data" (próxima turma) numa linha abaixo.
   Colunas iguais quando cabem (divisória no meio, como a prévia). Card estreito (celular deitado, tablet, notebook
   pequeno): a 2ª coluna desce para baixo da 1ª sozinha (flex-wrap; largura mínima de cada coluna = o RÓTULO, o valor
   não conta: width 0 + min-width 100%), sem cortar nem colar texto (revisão da 0.2.4, achado 1). Como só o rótulo
   decide a quebra, cards da mesma largura quebram igual (altura igual nas Sugestões). A divisória é um ::before no
   vão entre as colunas; no começo de uma linha ela cai fora da caixa e o overflow a esconde. */
.product-small.avgc-card-v2 .product-small.box .info-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 29px;
  margin: 0;
  padding: 12px 0 0;
  overflow: hidden;
  border-top: 1px solid var(--avgc-linha);
}
.product-small.avgc-card-v2 .product-small.box .info-wrapper > div {
  position: relative;
  flex: 1 1 0;
  min-width: -webkit-max-content;
  min-width: max-content;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--avgc-cinza);
  font-size: 11.5px;
  line-height: 1.3;
  white-space: nowrap;
}
.product-small.avgc-card-v2 .product-small.box .info-wrapper > div::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -15px;
  width: 1px;
  background: var(--avgc-linha);
}
.product-small.avgc-card-v2 .product-small.box .info-wrapper > .product-event-date {
  flex: 1 1 100%;
  min-width: 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--avgc-linha);
}
.product-small.avgc-card-v2 .product-small.box .info-wrapper .workload {
  display: block;
  width: 0;
  min-width: 100%;
  margin-top: 3px;
  overflow: hidden;
  color: var(--avgc-verde-txt);
  font-size: 15px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* linha reservada (só nas Sugestões: ver Card::imprimir_lista): mesma altura da linha que falta, invisível; sem
   divisória ao lado de uma coluna reservada */
.product-small.avgc-card-v2 .product-small.box .avgc-reserva { visibility: hidden; }
.product-small.avgc-card-v2 .product-small.box .info-wrapper > .avgc-reserva + div::before { visibility: hidden; }
.product-small.avgc-card-v2 .product-small.box .info-wrapper svg,
.product-small.avgc-card-v2 .product-small.box .info-wrapper i { display: none; }

/* botão "Saiba Mais": contorno que preenche no hover, com seta */
.product-small.avgc-card-v2 .product-small.box .box-text.box-text-products a.button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  min-height: 0;
  margin-top: auto;
  border: 1px solid var(--avgc-verde);
  border-radius: 9px;
  background: #fff;
  color: var(--avgc-verde);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
  transition: background .3s, color .3s, border-color .3s;
}
.product-small.avgc-card-v2 .product-small.box .box-text.box-text-products a.button span {
  font-size: inherit;
  font-weight: inherit;
}
.product-small.avgc-card-v2 .product-small.box .box-text.box-text-products a.button .avgc-seta {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  transition: transform .3s;
}
.product-small.avgc-card-v2 .product-small.box:hover .box-text.box-text-products a.button,
.product-small.avgc-card-v2 .product-small.box .box-text.box-text-products a.button:focus-visible {
  background: var(--avgc-verde);
  color: #fff;
}
.product-small.avgc-card-v2 .product-small.box:hover .box-text.box-text-products a.button .avgc-seta { transform: translateX(3px); }

/* curso indisponível: imagem e selos em cinza (regra do tema), botão "Indisponível" cinza, sem preencher */
.product-small.avgc-card-v2.out-of-stock .product-small.box .box-text.box-text-products a.button,
.product-small.avgc-card-v2.out-of-stock .product-small.box:hover .box-text.box-text-products a.button {
  border-color: var(--avgc-borda);
  background: #EEF0F2;
  color: var(--avgc-cinza);
  cursor: default;
}
.product-small.avgc-card-v2.out-of-stock .product-small.box:hover .title-wrapper .product-title a { color: var(--avgc-titulo); }

/* selo de promoção do Flatsome (nenhum curso hoje): canto superior DIREITO, para não cobrir a modalidade */
.product-small.avgc-card-v2 > .col-inner > .badge-container {
  top: 12px;
  right: 12px;
  left: auto;
  margin: 0;
}

/* Sugestões da página do curso (carrossel Flickity do tema): altura igual DETERMINÍSTICA. O tema põe min-height 550px
   nos cards (product.css, especificidade 0,9,0) e height 100%; aqui: título com no máximo 3 linhas reservando as 3, os
   demais itens em 1 linha, e a linha opcional (professor, carga, acesso, data) que um card não tem mas outro da lista
   tem sai reservada e invisível (.avgc-reserva); altura natural (nada de height 100% dentro do carrossel). 6px no topo
   para o card subir no hover sem ser cortado pela janela do Flickity. */
.woocommerce.columns-4 .products .product-small.avgc-card-v2 { padding-top: 6px; }
.woocommerce.columns-4 .products .product-small.avgc-card-v2 > .col-inner,
.woocommerce.columns-4 .products .product-small.avgc-card-v2 .product-small.box {
  height: auto;
  min-height: 0 !important;
}
.woocommerce.columns-4 .products .product-small.avgc-card-v2 .product-small.box .title-wrapper .product-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  min-height: calc(17px * 1.32 * 3);
  overflow: hidden;
}

/* celular: o tema dá 2,5em (vitrine) e 1,5em (professor) entre os cards, além do espaço da coluna */
@media (max-width: 48em) {
  .shop-container .products .product-small.avgc-card-v2,
  .products.row .product-small.avgc-card-v2.product { margin-bottom: 0 !important; }
}

/* =====================================================================================================================
   2) PÁGINA DO PROFESSOR: "Meus cursos" + número em etiqueta + linha; "Carregar mais" centralizado
   ===================================================================================================================== */

.row.avgc-prof-v2 { margin-bottom: 22px; }
.avgc-prof-v2 h2.my-products {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--avgc-verde-txt);
  font-size: 28px;
  font-weight: 600 !important; /* fonts.css do tema: h1–h6 300 !important */
  line-height: 1.2;
  letter-spacing: -.01em;
}
.avgc-prof-v2 h2.my-products .golden-highlight {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 36px;
  height: 30px;
  padding: 0 11px;
  border-radius: 99px;
  background: var(--avgc-bege);
  color: var(--avgc-verde-txt);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}
.avgc-prof-v2 h2.my-products::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  margin-left: 6px;
  background: var(--avgc-borda-forte);
}
@media (max-width: 48em) {
  .avgc-prof-v2 h2.my-products { font-size: 23px; }
  .row.avgc-prof-v2 { margin-bottom: 16px; }
}

.avgc-mais {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 2px auto 10px;
  padding: 0 15px;
  box-sizing: border-box;
}
.avgc-mais.hidden { display: none !important; }
.avgc-mais .button.btn-load-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 230px;
  height: 50px;
  min-height: 0;
  margin: 0;
  padding: 0 30px;
  border: 1px solid var(--avgc-verde);
  border-radius: 9px;
  background: #fff;
  color: var(--avgc-verde);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  user-select: none;
  box-shadow: none;
  transition: background .3s, color .3s, box-shadow .3s;
}
.avgc-mais .button.btn-load-more:hover,
.avgc-mais .button.btn-load-more:focus-visible {
  background: var(--avgc-verde);
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(3, 37, 30, .6);
}
.avgc-mais .button.btn-load-more .avgc-seta {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  transition: transform .3s;
}
.avgc-mais .button.btn-load-more:hover .avgc-seta { transform: translateY(2px); }
/* carregando (o speaker.js do tema põe o atributo disabled no botão durante o pedido) */
.avgc-mais .button.btn-load-more[disabled] { pointer-events: none; opacity: .75; }
.avgc-mais .button.btn-load-more[disabled] .avgc-seta { display: none; }
.avgc-mais .button.btn-load-more[disabled]::before {
  content: "";
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: avgc-gira .7s linear infinite;
}
.avgc-mais .button.btn-load-more.hidden { display: none !important; }
@keyframes avgc-gira { to { transform: rotate(360deg); } }
@media (max-width: 549px) {
  .avgc-mais { padding: 0 34px; }
  .avgc-mais .button.btn-load-more { width: 100%; min-width: 0; }
}

/* =====================================================================================================================
   3) HOME, "Confira os últimos cursos": mesmo visual, imagem ao lado (em cima no celular)
   ===================================================================================================================== */

/* espaço para o card subir e para a sombra do hover dentro da janela do Flickity (o tema tem pb-0 !important) */
.course-slider.avgc-home-v2 .col { padding-top: 6px; padding-bottom: 24px !important; }
.course-slider.avgc-home-v2 .col > .col-inner { height: auto; }

.course-slider.avgc-home-v2 .avgc-hc {
  display: flex !important; /* .box-vertical do Flatsome = display:table a partir de 550px */
  flex-direction: row;
  width: 100%;
  min-height: 210px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--avgc-borda);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(3, 37, 30, .04), 10px 10px 15px rgba(0, 0, 0, .02);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, border-color .35s ease;
}
.course-slider.avgc-home-v2 .avgc-hc:hover,
.course-slider.avgc-home-v2 .avgc-hc:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 18px 32px -16px rgba(0, 0, 0, .2); /* sombra preta e clara (Guilherme, 2026-10-11) */
  border-color: #C9D1D8;
}
.course-slider.avgc-home-v2 .avgc-hc .avgc-hc-img {
  position: relative;
  display: block;
  flex: 0 0 43%;
  width: 43% !important;
  height: auto;
  min-height: 208px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  background: #E9EDF0;
}
.course-slider.avgc-home-v2 .avgc-hc .avgc-hc-img img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.course-slider.avgc-home-v2 .avgc-hc:hover .avgc-hc-img img { transform: scale(1.07); }
.course-slider.avgc-home-v2 .avgc-hc .avgc-hc-img .course-badge {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px 6px 9px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .95) !important;
  color: var(--avgc-verde-txt);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .16);
}
.course-slider.avgc-home-v2 .avgc-hc .avgc-hc-img .course-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cor, var(--avgc-verde-txt));
}
.course-slider.avgc-home-v2 .avgc-hc .box-text {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  padding: 18px 18px 18px 20px !important; /* tema: 30px !important */
  border: 0 !important;
  border-radius: 0;
  background: #fff;
  vertical-align: top;
  text-align: left;
}
.course-slider.avgc-home-v2 .avgc-hc .box-text-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}
.course-slider.avgc-home-v2 .avgc-hc .box-text .course-category {
  display: inline-block;
  max-width: 100%;
  padding: 3px 10px;
  overflow: hidden;
  border: 1px solid var(--avgc-borda);
  border-radius: 99px;
  background: var(--avgc-fundo);
  color: var(--avgc-verde-txt);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}
.course-slider.avgc-home-v2 .avgc-hc .box-text .course-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  min-height: calc(17px * 1.32 * 2);
  margin: 0;
  overflow: hidden;
  color: var(--avgc-titulo);
  font-size: 17px;
  font-weight: 600 !important;
  line-height: 1.32;
  letter-spacing: -.005em;
}
.course-slider.avgc-home-v2 .avgc-hc .box-text p.course-speaker {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  min-height: 26px;
  margin: 0;
  color: #2F2F2F;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
}
.course-slider.avgc-home-v2 .avgc-hc .box-text p.course-speaker img {
  display: block;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  max-width: none;
  margin: 0;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--avgc-borda);
}
.course-slider.avgc-home-v2 .avgc-hc .avgc-hc-prof {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.course-slider.avgc-home-v2 .avgc-hc .box-text a.btn-know-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  min-height: 0;
  margin: auto 0 0;
  padding: 0 18px;
  border: 1px solid var(--avgc-verde) !important; /* tema: 1px #000 !important */
  border-radius: 9px;
  background: #fff;
  color: var(--avgc-verde);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
  transition: background .3s, color .3s;
}
.course-slider.avgc-home-v2 .avgc-hc .box-text a.btn-know-more > span { font-weight: 600; }
.course-slider.avgc-home-v2 .avgc-hc .box-text a.btn-know-more .avgc-seta {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  transition: transform .3s;
}
.course-slider.avgc-home-v2 .avgc-hc:hover .box-text a.btn-know-more,
.course-slider.avgc-home-v2 .avgc-hc .box-text a.btn-know-more:focus-visible {
  background: var(--avgc-verde);
  color: #fff;
}
.course-slider.avgc-home-v2 .avgc-hc:hover .box-text a.btn-know-more .avgc-seta { transform: translateX(3px); }

/* celular e tablet (até 849px, fim da faixa "medium" do Flatsome): imagem em cima, 16:10. Entre 550 e 849px o card
   tem ~260 a 400px: com a imagem ao lado, o texto ficava com ~130px e o "Saiba mais" quebrava (revisão, achado 7).
   Navegador sem aspect-ratio (iOS 14 ou anterior, WebView antigo): a altura vem do padding 62,5% (= 16:10), senão a
   capa (img absoluta) ficaria com 0px (revisão, achado 3). */
@media (max-width: 849px) {
  .course-slider.avgc-home-v2 .avgc-hc { flex-direction: column; min-height: 0; }
  .course-slider.avgc-home-v2 .avgc-hc .avgc-hc-img {
    flex: none;
    width: 100% !important;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
  .course-slider.avgc-home-v2 .avgc-hc .box-text { padding: 16px !important; }
}
@supports not (aspect-ratio: 1 / 1) {
  @media (max-width: 849px) {
    .course-slider.avgc-home-v2 .avgc-hc .avgc-hc-img { height: 0; padding-top: 62.5%; }
  }
}

/* =====================================================================================================================
   Movimento reduzido: sem zoom, sem o card subir, sem deslizar a seta (cores do hover ficam)
   ===================================================================================================================== */
@media (prefers-reduced-motion: reduce) {
  .product-small.avgc-card-v2 .product-small.box,
  .product-small.avgc-card-v2 .product-small.box .box-image img,
  .product-small.avgc-card-v2 .product-small.box .avgc-seta,
  .course-slider.avgc-home-v2 .avgc-hc,
  .course-slider.avgc-home-v2 .avgc-hc .avgc-hc-img img,
  .course-slider.avgc-home-v2 .avgc-hc .avgc-seta,
  .avgc-mais .button.btn-load-more,
  .avgc-mais .button.btn-load-more .avgc-seta { transition: none; }
  .product-small.avgc-card-v2 .product-small.box:hover,
  .product-small.avgc-card-v2 .product-small.box:focus-within,
  .course-slider.avgc-home-v2 .avgc-hc:hover,
  .course-slider.avgc-home-v2 .avgc-hc:focus-within { transform: none; }
  .product-small.avgc-card-v2 .product-small.box:hover .box-image img,
  .course-slider.avgc-home-v2 .avgc-hc:hover .avgc-hc-img img { transform: scale(1.001); }
  .product-small.avgc-card-v2 .product-small.box:hover .avgc-seta,
  .course-slider.avgc-home-v2 .avgc-hc:hover .avgc-seta,
  .avgc-mais .button.btn-load-more:hover .avgc-seta { transform: none; }
  .avgc-mais .button.btn-load-more[disabled]::before { animation-duration: 1.6s; }
}

/* =====================================================================================================================
   Listagens de cursos (/cursos/, página 2, filtros, busca, categorias, tags): 140 px mais largas que o resto do site
   (1050 → 1190 px) no topo (migalhas + título), nos filtros e nos cards. Pedido do Guilherme, 2026-10-11.
   A classe do body só existe nas telas de listagem (Card_Visual::ligar('listagem')).
   ===================================================================================================================== */
body.avgc-listagem-larga .header-loja .section-content > .row,
body.avgc-listagem-larga .row.category-page-row { max-width: 1190px; }