:root{
  --card-radius: 18px;
  --card-border: rgba(0,0,0,.08);
  --card-bg: color-mix(in oklab, var(--bs-body-bg) 82%, transparent);
  --card-grad: linear-gradient(180deg, color-mix(in oklab, #ff2d2d 10%, transparent), transparent 60%);
  --card-shadow: 0 6px 24px -8px rgba(0,0,0,.25);
  --accent: #ff2d2d; /* cor principal fixa */
}
[data-bs-theme="dark"]{
  --card-border: rgba(255,255,255,.15);
  --card-bg: color-mix(in oklab, var(--bs-body-bg) 70%, transparent);
  --card-grad: linear-gradient(180deg, color-mix(in oklab, #ff2d2d 14%, transparent), transparent 60%);
  --card-shadow: 0 10px 30px -12px rgba(0,0,0,.6);
}

.course-card{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.25rem 1.25rem 1rem;
  border-radius: var(--card-radius);
  background:
    var(--card-grad),
    radial-gradient(120% 160% at 100% 0%, color-mix(in oklab, var(--accent) 6%, transparent), transparent 60%),
    var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: hidden;
  width: 100%;
  min-height: 260px;
}
.course-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  pointer-events:none;
  background: radial-gradient(80% 60% at 10% -10%, color-mix(in oklab, #fff 25%, transparent), transparent 60%);
  opacity:.45;
}
.course-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 40px -14px rgba(0,0,0,.35);
  border-color: color-mix(in oklab, var(--accent) 26%, var(--card-border));
}

.course-card .top{
  display: flex; align-items: flex-start; gap:.75rem;
}
.course-card .icon-badge{
  flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--accent) 16%, var(--bs-body-bg));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent);
}
.course-card h4{
  font-size: 1.05rem;
  margin: .15rem 0 0;
  line-height: 1.25;
}
.course-card .hours{
  margin-left: auto;
  padding: .375rem .5rem;
  border-radius: 999px;
  font-size: .78rem;
  line-height: 1;
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  white-space: nowrap;
}

.course-card .desc{
  margin:.5rem 0 .75rem;
  color: var(--bs-body-color);
  opacity:.92;
  font-size:.95rem;
  display:-webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

.course-card .actions{
  margin-top: auto;
  display:flex; gap:.5rem; align-items:center;
}
.course-card .btn-cta{
  padding:.55rem .9rem;
  border-radius: 12px;
  font-weight: 600;
  font-size:.92rem;
  text-decoration:none;
  color:#fff;
  background: linear-gradient(180deg, #ff4c4c, var(--accent));
  border:1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  box-shadow: 0 6px 14px -6px color-mix(in oklab, var(--accent) 70%, transparent);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.course-card .btn-cta:hover{
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 12px 22px -10px color-mix(in oklab, var(--accent) 75%, transparent);
}
.course-card .more{
  font-size:.92rem;
  text-decoration:none;
  opacity:.8;
}


/*btn final*/
.botao-final {
    width: 100%;
    margin-top: 2rem;
    margin-bottom: 2rem;
    color: red;
    outline: none;
    border: none;
    font-size: 27px;
    padding: 0.6em 1em;
    position: relative;
    background: none;
    cursor: pointer;
    font-size:2rem;
    font-weight: 600;
}

.info{
  text-align: center;
}

.botao-final:active {
  transform: scale(.98);
  box-shadow: .1px .1px 2px red;
}

.botao-final span {
  position: absolute;
  background: red;
  transition: .5s;
  box-shadow: 1px 1px 20px red;
}

.botao-final span:nth-child(1) {
  top: 0;
  left: 0;
  width: 3px;
  height: 30%;
}

.botao-final:hover span:nth-child(1) {
  height: 100%;
}

.botao-final span:nth-child(2) {
  top: 0;
  left: 0;
  width: 15%;
  height: 3px;
}

.botao-final:hover span:nth-child(2) {
  width: 100%;
}

.botao-final span:nth-child(3) {
  bottom: 0;
  right: 0;
  width: 3px;
  height: 30%;
}

.botao-final:hover span:nth-child(3) {
  height: 100%;
}

.botao-final span:nth-child(4) {
  bottom: 0;
  right: 0;
  width: 15%;
  height: 3px;
}

.botao-final:hover span:nth-child(4) {
  width: 100%;
}


@media (min-width: 992px){ .course-card{ min-height: 280px; } }
@media (max-width: 575.98px){
  .course-card{ padding:1rem; }
  .course-card .desc{ -webkit-line-clamp: 5; }
}