/* Reset simples */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

/* Âncoras suaves — desconta a altura do header fixo/inicial ao navegar
   para uma seção, e respeita prefers-reduced-motion. */
html {
  scroll-behavior: smooth;
}

#sobre, #cursos, #inscricao, #faq, #contato {
  scroll-margin-top: 5rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--cor-texto);
  background-color: var(--cor-fundo);
  line-height: 1.5;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--cor-primaria);
}

.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  border: none;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.btn-primario {
  background-color: var(--cor-primaria);
  color: #fff;
}

.btn-primario:hover {
  background-color: var(--cor-primaria-media);
}

.btn-whatsapp {
  background-color: var(--cor-whatsapp);
  color: #fff;
}

.btn-whatsapp:hover {
  filter: brightness(0.92);
}

section {
  padding: 3rem 0;
}

h1, h2, h3 {
  line-height: 1.2;
}

/* Header */
.site-header {
  position: relative;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
}

.site-header__toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.5rem;
  margin: -0.5rem 0 -0.5rem auto;
  color: var(--cor-texto);
  cursor: pointer;
}

.site-header__menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  gap: 1.5rem;
  margin-left: 2rem;
}

.site-header__nav ul {
  display: flex;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.site-header__nav a {
  text-decoration: none;
  color: var(--cor-texto);
  font-weight: 600;
}

.site-header__redes {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.site-header__redes a {
  display: inline-flex;
  color: var(--cor-texto);
  transition: color 0.15s ease;
}

.site-header__redes a:hover,
.site-header__redes a:focus-visible {
  color: var(--cor-primaria);
}

/* Menu hambúrguer mobile (< 820px) — ver public/js/nav.js */
@media (max-width: 820px) {
  .site-header__toggle {
    display: flex;
  }

  .site-header__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    margin-left: 0;
    background: #fff;
    padding: 1.25rem;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    z-index: 30;
  }

  .site-header__menu.is-aberto {
    display: flex;
  }

  .site-header__nav ul {
    flex-direction: column;
    gap: 0.85rem;
  }
}

/* Hero — base azul-escura (fallback estático caso não haja WebGL2/JS);
   o canvas Aurora, quando ativo, brilha por cima desta base. */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0B2A5E 0%, #07203F 100%);
  color: #fff;
}

.hero a:not(.btn) {
  color: #fff;
}

.hero__aurora {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* aurora.js adiciona esta classe ao <section class="hero"> (parentNode do
   canvas) quando WebGL2 não está disponível — remove o canvas inerte para
   que o gradiente base do .hero fique 100% limpo, sem depender apenas de
   transparência. */
.hero.aurora-fallback .hero__aurora {
  display: none;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right, rgba(3, 12, 26, 0.65) 0%, rgba(3, 12, 26, 0.55) 45%, rgba(3, 12, 26, 0.1) 80%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: 1.2fr 1fr;
    align-items: start;
  }
}

.hero__kicker {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--cor-primaria-suave);
}

.hero__bullets {
  padding-left: 1.25rem;
}

.hero__form-card {
  background: #fff;
  color: var(--cor-texto);
  border-radius: 0.75rem;
  padding: 1.5rem;
}

.hero__form-card a:not(.btn) {
  color: var(--cor-primaria);
}

.hero__form-card button[type="submit"] {
  width: 100%;
}

/* Cabeçalho de seção — mesmo espaçamento curto título→subtítulo do card
   de form do hero, mas alinhado à esquerda (compartilhado entre seções). */
.secao-cabecalho {
  margin-bottom: 0.75rem;
}

.secao-cabecalho h2 {
  margin-bottom: 0.15rem;
}

.secao-cabecalho p {
  margin-top: 0;
}

.secao-cabecalho--centralizado {
  text-align: center;
}

/* Diferenciais */
.diferenciais__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

@media (min-width: 700px) {
  .diferenciais__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .diferenciais__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.diferenciais__icone {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: rgba(81, 142, 203, 0.14);
  color: var(--cor-primaria);
  margin-bottom: 1rem;
}

.diferenciais__icone svg {
  width: 24px;
  height: 24px;
}

/* Vídeo institucional */
.video-institucional {
  background: var(--cor-primaria);
  color: #fff;
}

.video-institucional__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
}

@media (min-width: 900px) {
  .video-institucional__inner {
    grid-template-columns: 1fr 1fr;
  }
}

/* Depoimentos — seção clara (ritmo claro → cursos escuro → faq claro) */
.depoimentos {
  background: var(--cor-fundo);
  color: var(--cor-texto);
}

/* Carrossel — vanilla, um slide por depoimento (ver public/js/carrossel.js) */
.carrossel {
  position: relative;
  margin-top: 1.5rem;
}

.carrossel__viewport {
  overflow: hidden;
}

.carrossel__trilho {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform 0.4s ease;
}

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

.carrossel__slide {
  flex: 0 0 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0 0.25rem;
  display: flex;
  justify-content: center;
}

.depoimentos__item {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1.5rem;
}

/* Faixa de vídeos — estática, miniaturas quadradas lado a lado, separada
   do carrossel de texto por um respiro + divisória sutil (item 3). */
.depoimentos__faixa-video {
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid #e5e7eb;
}

.depoimentos__rotulo {
  margin: 0 0 1.25rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--cor-primaria);
}

.depoimentos__grid-video {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 560px) {
  .depoimentos__grid-video {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .depoimentos__grid-video {
    grid-template-columns: repeat(3, 1fr);
  }
}

.depoimentos__video-item {
  text-align: center;
}

/* Capa quadrada + botão play — cantos 12px, mesma linguagem visual dos
   cards (card-glow também usa --border-radius:12px). Clicar abre o
   lightbox existente; nunca renderiza o <video> inline. */
.depoimentos__capa {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: none;
  padding: 0;
  border-radius: 0.75rem;
  overflow: hidden;
  cursor: pointer;
  background: #000;
}

.depoimentos__capa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.depoimentos__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  transition: background 0.15s ease;
}

.depoimentos__capa:hover .depoimentos__play,
.depoimentos__capa:focus-visible .depoimentos__play {
  background: rgba(0, 0, 0, 0.4);
}

.depoimentos__play svg {
  color: #fff;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

/* Lightbox de vídeo */
.video-lightbox {
  position: relative;
  border: none;
  border-radius: 0.75rem;
  padding: 0;
  background: #000;
  max-width: 90vw;
  max-height: 85vh;
}

.video-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.75);
}

.video-lightbox__video {
  display: block;
  max-width: 90vw;
  max-height: 85vh;
  width: auto;
  height: auto;
}

.video-lightbox__fechar {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.depoimentos__avatar {
  width: 5rem;
  height: 5rem;
  border-radius: 999px;
  object-fit: cover;
  margin-bottom: 0.75rem;
}

.depoimentos__avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cor-primaria-suave);
  color: var(--cor-primaria);
  font-weight: 700;
  font-size: 1.5rem;
}

.depoimentos__item blockquote {
  align-self: stretch;
  margin: 0 0 0.75rem;
  text-align: left;
  font-style: normal;
}

.depoimentos__nome {
  font-weight: 600;
  margin: 0.5rem 0 0;
}

.depoimentos__cargo {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0.15rem 0 0;
}

/* Setas prev/next */
.carrossel__seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: var(--cor-texto);
  cursor: pointer;
  z-index: 2;
}

.carrossel__seta:hover {
  background: var(--cor-primaria-suave);
}

.carrossel__seta--prev {
  left: -0.5rem;
}

.carrossel__seta--next {
  right: -0.5rem;
}

@media (min-width: 700px) {
  .carrossel__seta--prev {
    left: -1.25rem;
  }

  .carrossel__seta--next {
    right: -1.25rem;
  }
}

/* Dots */
.carrossel__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.carrossel__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  border: none;
  background: #d1d5db;
  padding: 0;
  cursor: pointer;
}

.carrossel__dot[aria-selected="true"] {
  background: var(--cor-primaria);
}

/* Cursos — seção escura (o card-glow claro usaria texto escuro sobre
   fundo escuro; os cards de curso usam a variante --escuro do card-glow). */
.cursos {
  background: #07203F;
  color: #fff;
}

.cursos__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

@media (min-width: 700px) {
  .cursos__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.cursos__imagem {
  width: 100%;
  border-radius: 0.5rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: 1rem;
}

.cursos__data {
  color: rgba(255, 255, 255, 0.75);
}

.cursos__acoes {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

/* Variante clara de botão, para uso sobre fundo escuro (ex.: "Ver
   Cronograma" nos cards de curso — um .btn-primario sólido ali ficaria
   escuro sobre escuro). */
.btn-contorno-claro {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
}

.btn-contorno-claro:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

/* FAQ — accordion em cards (mesmo acabamento visual dos cards claros:
   fundo branco, borda sutil, cantos 12px). Altura suave via CSS
   grid-template-rows (sem medição em JS); chevron rotaciona ao abrir. */
.faq__lista {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq__item {
  background: #fff;
  border: 0.5px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}

.faq__pergunta-titulo {
  margin: 0;
}

.faq__pergunta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: none;
  border: none;
  padding: 1rem 1.25rem;
  font: inherit;
  font-weight: 600;
  text-align: left;
  color: var(--cor-texto);
  cursor: pointer;
}

.faq__chevron {
  flex: 0 0 auto;
  transition: transform 0.25s ease;
}

.faq__item.is-aberto .faq__chevron {
  transform: rotate(180deg);
}

.faq__resposta {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}

.faq__item.is-aberto .faq__resposta {
  grid-template-rows: 1fr;
}

.faq__resposta-inner {
  overflow: hidden;
}

.faq__resposta-inner p {
  margin: 0 1.25rem 1.25rem;
  text-align: left;
}

@media (prefers-reduced-motion: reduce) {
  .faq__chevron,
  .faq__resposta {
    transition: none;
  }
}

.faq__cta {
  margin-top: 2rem;
  text-align: center;
}

/* Footer — bloco centralizado com respiro, hierarquia de texto (nome do
   instituto em destaque, demais detalhes menores/discretos). */
.site-footer {
  background: #16161a;
  color: #fff;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 3rem 1.25rem;
  text-align: center;
}

.site-footer__inner a {
  color: #fff;
}

.site-footer__logo {
  max-width: 190px;
  width: 100%;
  height: auto;
  margin-bottom: 0.75rem;
}

.site-footer__nome {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
}

.site-footer__detalhe {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

.site-footer__detalhe a {
  color: rgba(255, 255, 255, 0.65);
}

.site-footer__redes {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.site-footer__redes a {
  display: inline-flex;
  transition: color 0.15s ease;
}

.site-footer__redes a:hover,
.site-footer__redes a:focus-visible {
  color: var(--cor-primaria-suave);
}

/* Formulário de lead */
.lead-form__cabecalho {
  text-align: center;
  margin-bottom: 0.75rem;
}

.lead-form__cabecalho h2 {
  margin-bottom: 0.15rem;
}

.lead-form__cabecalho p {
  margin-top: 0;
}

/* Campo com floating label — label começa sobre o input (como um
   placeholder) e sobe para cima quando o campo ganha foco ou é
   preenchido. Continua associado via label[for]/input[id] (FR-022). */
.campo-flutuante {
  position: relative;
  margin-bottom: 0.85rem;
}

.campo-flutuante input,
.campo-flutuante select {
  width: 100%;
  padding: 1.1rem 0.75rem 0.4rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.375rem;
  font-size: 1rem;
  background: #fff;
}

.campo-flutuante select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 1.1rem;
}

.campo-flutuante label {
  position: absolute;
  left: 0.7rem;
  top: 0.75rem;
  font-size: 1rem;
  color: #6b7280;
  pointer-events: none;
  transition: top 0.15s ease, font-size 0.15s ease, color 0.15s ease;
  background: #fff;
  padding: 0 0.2rem;
  max-width: calc(100% - 1.4rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campo-flutuante input:focus + label,
.campo-flutuante input:not(:placeholder-shown) + label,
.campo-flutuante select:focus + label,
.campo-flutuante select:valid + label {
  top: -0.55rem;
  left: 0.55rem;
  font-size: 0.75rem;
  color: var(--cor-primaria);
}

/* Aviso de LGPD abaixo do botão de envio (sem checkbox — o consentimento
   é registrado pelo servidor em todo envio válido). */
.lead-form__aviso-lgpd {
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  color: #6b7280;
  text-align: center;
}

.lead-form__erro {
  color: #b91c1c;
  font-size: 0.875rem;
  margin: 0.25rem 0 0;
}

.lead-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.lead-sucesso {
  font-weight: 600;
  color: #15803d;
}

/* Modais de pré-inscrição / pop-up */
dialog.lead-modal,
dialog.popup {
  border: none;
  border-radius: 0.75rem;
  padding: 1.5rem;
  max-width: 480px;
  width: 90vw;
}

dialog.lead-modal::backdrop,
dialog.popup::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.lead-modal__fechar,
.popup__fechar {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  float: right;
}

.popup {
  text-align: center;
}

.popup img {
  border-radius: 0.5rem;
  margin: 0 auto 1rem;
}

/* Ajustes finos de mobile (FR-004 / SC-007) */
@media (max-width: 480px) {
  /* Reforço defensivo: garante padding horizontal em .container mesmo se
     algum elemento filho reintroduzir um `padding: Xrem 0` que colidiria
     (mesma especificidade, ordem no arquivo) — foi exatamente o bug do
     .hero__inner corrigido nesta rodada. */
  .container {
    padding-inline: 20px;
  }

  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  section {
    padding: 2rem 0;
  }

  .cursos__acoes {
    flex-direction: column;
    align-items: stretch;
  }

  .cursos__acoes .btn {
    text-align: center;
  }

  dialog.lead-modal,
  dialog.popup {
    width: 92vw;
    padding: 1rem;
    max-height: 85vh;
    overflow-y: auto;
  }

  .whatsapp-flutuante {
    bottom: 0.75rem;
    right: 0.75rem;
    width: 2.75rem;
    height: 2.75rem;
  }

  .whatsapp-flutuante svg {
    width: 1.5rem;
    height: 1.5rem;
  }
}

/* Botão flutuante de WhatsApp */
.whatsapp-flutuante {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 40;
}

.whatsapp-flutuante svg {
  width: 1.75rem;
  height: 1.75rem;
}

.card-glow{
  --edge-proximity:0; --cursor-angle:45deg; --edge-sensitivity:26;
  --color-sensitivity:calc(var(--edge-sensitivity) + 20);
  --border-radius:12px; --glow-padding:34px; --cone-spread:25;
  --card-bg:#ffffff; color:#16161a;
  --glow-color:hsl(211deg 78% 62% / 100%); --glow-color-60:hsl(211deg 78% 62% / 60%);
  --glow-color-50:hsl(211deg 78% 62% / 50%); --glow-color-40:hsl(211deg 78% 62% / 40%);
  --glow-color-30:hsl(211deg 78% 62% / 30%); --glow-color-20:hsl(211deg 78% 62% / 20%);
  --glow-color-10:hsl(211deg 78% 62% / 10%);
  --g1:radial-gradient(at 80% 55%,#144496 0px,transparent 50%);
  --g2:radial-gradient(at 69% 34%,#518ECB 0px,transparent 50%);
  --g3:radial-gradient(at 8% 6%,#B1DCF7 0px,transparent 50%);
  --g4:radial-gradient(at 41% 38%,#144496 0px,transparent 50%);
  --g5:radial-gradient(at 86% 85%,#518ECB 0px,transparent 50%);
  --g6:radial-gradient(at 82% 18%,#B1DCF7 0px,transparent 50%);
  --g7:radial-gradient(at 51% 4%,#518ECB 0px,transparent 50%);
  position:relative; border-radius:var(--border-radius); isolation:isolate; display:grid;
  border:1px solid rgba(20,68,150,.12); background:var(--card-bg); overflow:visible;
  transform:translate3d(0,0,.01px);
}
.card-glow--escuro{ --card-bg:#0B2A5E; color:#fff; border-color:rgba(255,255,255,.15); }

.card-glow::before,.card-glow>.card-glow__edge{
  content:""; position:absolute; inset:0; border-radius:inherit;
  transition:opacity .25s ease-out; z-index:-1;
}
.card-glow:not(:hover)::before,.card-glow:not(:hover)>.card-glow__edge{
  opacity:0; transition:opacity .7s ease-in-out;
}
.card-glow::before{
  border:1px solid transparent;
  background:
    linear-gradient(var(--card-bg) 0 100%) padding-box,
    var(--g1) border-box,var(--g2) border-box,var(--g3) border-box,var(--g4) border-box,
    var(--g5) border-box,var(--g6) border-box,var(--g7) border-box,
    linear-gradient(#144496 0 100%) border-box;
  opacity:calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mask-image:conic-gradient(from var(--cursor-angle) at center,
    black calc(var(--cone-spread) * 1%),
    transparent calc((var(--cone-spread) + 15) * 1%),
    transparent calc((100 - var(--cone-spread) - 15) * 1%),
    black calc((100 - var(--cone-spread)) * 1%));
}
.card-glow>.card-glow__edge{
  inset:calc(var(--glow-padding) * -1); pointer-events:none; z-index:1;
  mask-image:conic-gradient(from var(--cursor-angle) at center,black 2.5%,transparent 10%,transparent 90%,black 97.5%);
  opacity:calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode:plus-lighter;
}
.card-glow>.card-glow__edge::before{
  content:""; position:absolute; inset:var(--glow-padding); border-radius:inherit;
  box-shadow:
    inset 0 0 0 1px var(--glow-color),inset 0 0 1px 0 var(--glow-color-60),
    inset 0 0 3px 0 var(--glow-color-50),inset 0 0 6px 0 var(--glow-color-40),
    inset 0 0 15px 0 var(--glow-color-30),inset 0 0 25px 2px var(--glow-color-20),
    inset 0 0 50px 2px var(--glow-color-10),
    0 0 1px 0 var(--glow-color-60),0 0 3px 0 var(--glow-color-50),0 0 6px 0 var(--glow-color-40),
    0 0 15px 0 var(--glow-color-30),0 0 25px 2px var(--glow-color-20),0 0 50px 2px var(--glow-color-10);
}
.card-glow__inner{ position:relative; z-index:2; }

/* Padding do conteúdo — não vem no bloco original, adicionado aqui pois
   toda aplicação do macro (diferenciais, cursos) precisa dele. */
.card-glow__inner {
  padding: 1.5rem;
}

/* Mobile / touch: sem hover, glow estático sutil na borda */
@media (hover:none){
  .card-glow>.card-glow__edge{ opacity:.5; mask-image:none; }
  .card-glow::before{ opacity:0; }
}
/* Respeita movimento reduzido (o efeito é de interação, não autoplay — só garante calma) */
@media (prefers-reduced-motion:reduce){
  .card-glow::before,.card-glow>.card-glow__edge{ transition:none; }
}