/* Grid de tarjetas */
  .grid{
    display:grid;
    grid-template-columns: repeat(12, 1fr);
    gap:1rem;
    padding: 50px;
  }
  @media (max-width: 1140px){
    .grid{ grid-template-columns: repeat(8, 1fr); }
  }
  @media (max-width: 780px){
    .grid{ grid-template-columns: repeat(4, 1fr); }
  }
  @media (max-width: 460px){
    .grid{ grid-template-columns: repeat(2, 1fr); }
  }

  .card{
    grid-column: span 4; /* 3 por fila en desktop (12/4) */
    display:flex; flex-direction:column;
    background:
      linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)) padding-box,
      linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)) border-box;
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--radius);
    overflow:hidden;
    min-height: 100%;
    box-shadow: var(--shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .card:hover{
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0,0,0,.45);
    border-color: rgba(255,255,255,.18);
  }

  .thumb{
    aspect-ratio: 16/9;
    background:
      linear-gradient(120deg, rgba(246,183,60,.25), transparent 40%),
      radial-gradient(300px 140px at 75% -10%, rgba(124,92,255,.32), transparent 60%),
      linear-gradient(180deg, #191a21, #0f1015);
    display:flex;
    align-items:flex-end;
    padding:14px;
    position:relative;
  }
  .thumb img{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
  }
  .thumb .label{
    font-weight:800; font-size:1.05rem; letter-spacing:.3px;
    background: linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.2));
    padding:.4rem .6rem; border-radius:.6rem; border:1px solid rgba(255,255,255,.1);
    backdrop-filter:saturate(140%) blur(6px);
  }

  .meta{
    display:flex; gap:.4rem; position:absolute; top:10px; left:10px; right:10px; justify-content:space-between;
  }
  .tag{
    font-size:.75rem; padding:.35rem .6rem; border-radius:999px;
    border:1px solid rgba(255,255,255,.15);
    background:linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.25));
    color:#e9e9ee;
  }
  .price{
    margin-left:auto;
    font-weight:900; letter-spacing:.3px;
    background: linear-gradient(180deg, #ffd271, #f6b73c);
    color:#1b1202; border-radius:.5rem; padding:.35rem .55rem; border:1px solid rgba(0,0,0,.25);
  }

  .content{
    padding:16px;
    display:flex; flex-direction:column; gap:.6rem;
  }
  .course-title{
    margin:0; font-size:1.1rem; line-height:1.2;
  }
  .desc{ color:var(--muted); font-size:.95rem; }

  .facts{
    display:flex; gap:.6rem; flex-wrap:wrap; color:#cfd2dd; font-size:.85rem;
  }
  .facts span{
    border:1px solid #272833; padding:.3rem .45rem; border-radius:.5rem;
    background:linear-gradient(180deg, #141620, #10121a);
  }

  /* Estrellas puro CSS */
  .stars{
    --s: 18px;
    display:inline-grid; grid-auto-flow:column; gap:2px; align-items:center;
  }
  .star{
    width:var(--s); height:var(--s); display:inline-block;
    -webkit-mask: radial-gradient(5.5px at 50% 7px,#000 98%,#0000), 
                  radial-gradient(5.5px at 19px 13px,#000 98%,#0000), 
                  radial-gradient(5.5px at 31px 13px,#000 98%,#0000), 
                  radial-gradient(5.5px at 12px 29px,#000 98%,#0000), 
                  radial-gradient(5.5px at 24px 29px,#000 98%,#0000);
    mask: radial-gradient(5.5px at 50% 7px,#000 98%,#0000), 
          radial-gradient(5.5px at 19px 13px,#000 98%,#0000), 
          radial-gradient(5.5px at 31px 13px,#000 98%,#0000), 
          radial-gradient(5.5px at 12px 29px,#000 98%,#0000), 
          radial-gradient(5.5px at 24px 29px,#000 98%,#0000);
    background: linear-gradient(180deg,#ffe58f, #f6b73c);
  }
  .stars .star.is-off{ filter:grayscale(1) brightness(.45); opacity:.55; }

  .cta{
    display:flex; gap:.6rem; margin-top:.5rem;
  }
  .btn{
    appearance:none; border:1px solid transparent; cursor:pointer;
    padding:.65rem .9rem; border-radius:.75rem; font-weight:700;
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  }
  .btn:hover{ transform: translateY(-1px) }
  .btn:active{ transform: translateY(0) scale(.98) }

  .btn-primary{
    background: linear-gradient(180deg, #2dd684, #1fb56c);
    color:#0b120d; border-color:#118e52;
    box-shadow: 0 8px 20px rgba(31,181,108,.25);
  }
  .btn-ghost{
    background: linear-gradient(180deg, #151720, #0f1118);
    color:#e9e9ee; border-color:#2a2a32;
  }
  .btn-ghost:hover{ border-color:#3b3c47 }

  /* Corazón favorito sin JS */
  .fav{
    --size: 40px;
    margin-left:auto;
    position:relative;
    width:var(--size); height:var(--size);
  }
  .fav input{ position:absolute; inset:0; opacity:0; cursor:pointer }
  .fav .heart{
    position:absolute; inset:8px;
    -webkit-mask: radial-gradient(12px at 50% 35%,#000 98%,#0000) 
                 , radial-gradient(12px at 35% 55%,#000 98%,#0000)
                 , linear-gradient(135deg, #000 0 20%, #0000 0) 0 0/100% 100% content-box;
    mask: radial-gradient(12px at 50% 35%,#000 98%,#0000) 
        , radial-gradient(12px at 35% 55%,#000 98%,#0000)
        , linear-gradient(135deg, #000 0 20%, #0000 0) 0 0/100% 100% content-box;
    background:#8a8f9f;
    transition: transform .2s ease, background .2s ease;
  }
  .fav input:checked ~ .heart{
    background: linear-gradient(180deg, #ff6a6a, #ff3b3b);
    transform: scale(1.08);
  }
  .fav input:focus-visible + label{ outline:2px solid #7c5cff; outline-offset:3px; border-radius:8px }

  /* Modo reducción de movimiento */
  @media (prefers-reduced-motion: reduce){
    .card, .chip, .btn, .fav .heart{ transition: none !important; }
  }