/* ================================
   PÁGINA CURSOS – LIGHT + MARCA PFA
   Aislado bajo .c-page (no pisa style.css)
   Con: Banner azul→morado + Botón CTA coral
=================================== */
:root { color-scheme: light; }
html, body { background:#ffffff; color:#111111; }

.c-page{
  /* Base y tipografía (desde tu theme) */
  --c-bg:       var(--neutral-0, #ffffff);
  --c-surface:  var(--neutral-1, #F9F9F9);
  --c-border:   #E6E8EC;
  --c-text:     var(--text-1, #0B0B0C);
  --c-text-dim: var(--text-2, #3B3B40);
  --c-radius:   var(--radius, 14px);
  --shadow-sm:  0 2px 8px rgba(16,24,40,.06);
  --shadow-md:  var(--shadow-1, 0 10px 30px rgba(0,0,0,.08));

  /* Marca conectada a tus tokens */
  --c-primary:  var(--brand-blue,   #132D48);
  --c-accent:   var(--brand-gold,   #F7D348);
  --c-coral:    var(--brand-coral,  #FF6B5C);
  --c-jade:     var(--brand-jade,   #00BFA6);
  --c-purple:   var(--brand-purple, #6A4C93);

  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.55;
  padding: 24px 0 64px;
}

/* Container */
.c-container{ width:min(1200px,92vw); margin:0 auto; }
.c-page *{ box-sizing:border-box; }
.c-page img{ max-width:100%; display:block; }

/* ---------- Banner Promoción (azul → morado) ---------- */
.c-promo{
  display:flex; align-items:center; gap:.8rem; margin:0 0 1.25rem;
  padding:.95rem 1.15rem; border-radius:14px;
  background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-purple) 100%);
  color:#fff; font-weight:600; box-shadow: var(--shadow-md);
}
.c-emoji{ font-size:1.05rem; }
.c-promo-text strong{ text-decoration: underline; text-decoration-color: rgba(255,255,255,.55); }
.c-badge{
  margin-left:auto; white-space:nowrap;
  font-weight:800; font-size:.86rem; letter-spacing:.2px;
  padding:.4rem .72rem; border-radius:999px;
  background:#fff; color:var(--c-primary); border:1px solid #E6E8EC;
}
@media (max-width:560px){ .c-promo{ flex-wrap:wrap; gap:.5rem } .c-badge{ margin-left:0 } }

/* ---------- Títulos ---------- */
.c-title{
  font-size:clamp(28px,4vw,40px); margin:26px 0 6px; letter-spacing:-.02em;
  background: linear-gradient(90deg, var(--c-primary), var(--c-purple));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.c-lead{ color: var(--c-text-dim); margin: 0 0 18px; }

/* ---------- Filtros (chips) ---------- */
.c-filters{ display:flex; flex-wrap:wrap; gap:.55rem; margin:12px 0 10px; }
.c-chip{
  background:#fff; color: var(--c-text-dim);
  border:1px solid var(--c-border);
  padding:.38rem .78rem; border-radius:999px; font-size:.86rem;
  cursor:pointer; transition:.15s ease; box-shadow: var(--shadow-sm);
}
.c-chip:hover{ border-color: var(--c-primary); color: var(--c-primary); }
.c-chip--active{ background: var(--c-primary); color:#fff; border-color: var(--c-primary); }

/* ---------- Grid tarjetas ---------- */
.c-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:22px; margin-top:8px; }
.c-card{
  grid-column: span 12;
  background:#fff;
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius);
  padding:14px;
  display:flex; flex-direction:column; gap:.75rem;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.c-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); border-color:#CBD3DD; }
@media (min-width:640px){ .c-card{ grid-column: span 6; } }
@media (min-width:980px){ .c-card{ grid-column: span 4; } }

/* Imagen: nunca se sale del cajón */
.c-thumb{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border-radius:12px; background: var(--c-surface);
  border:1px solid var(--c-border);
}
.c-thumb img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}

/* ---------- Chip/Tag “En vivo + …” ---------- */
/* Fallback: que nunca quede transparente (si una regla no matchea) */
.c-tag{
  display:inline-flex; align-items:center;
  font-size:.75rem; font-weight:700;
  padding:.28rem .6rem; border-radius:999px;
  color:#fff;
  background: var(--c-primary); /* respaldo por defecto */
}

/* Colores por categoría (match por token, case-insensitive y con/sin tilde) */
.c-card[data-cat~="ia" i]               .c-tag{ background: var(--c-purple); }

.c-card[data-cat~="fotografia" i]       .c-tag{ background: var(--c-jade); }
.c-card[data-cat~="fotografía" i]       .c-tag{ background: var(--c-jade); }

.c-card[data-cat~="maquillaje" i]       .c-tag{ background: var(--c-coral); }
.c-card[data-cat~="belleza" i]          .c-tag{ background: var(--c-coral); }

.c-card[data-cat~="diseño" i]           .c-tag{ background: var(--c-purple); }
.c-card[data-cat~="diseno" i]           .c-tag{ background: var(--c-purple); }

.c-card[data-cat~="ofimática" i]        .c-tag{ background: #16a34a; }
.c-card[data-cat~="ofimatica" i]        .c-tag{ background: #16a34a; }

.c-card[data-cat~="negocios" i]         .c-tag{ background: #F06292; }







/* Textos dentro de la tarjeta */
.c-card-title{ margin:0; font-size:1.14rem; color: var(--c-text); }
.c-meta{ color: var(--c-text-dim); font-size:.93rem; }
.c-desc{ margin:0; color: var(--c-text); }
.c-price{ font-weight:800; font-size:1.02rem; color: var(--c-primary); }

/* ---------- Botones ---------- */
.c-row{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.2rem; }
.c-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem .9rem; border-radius:999px; font-weight:700; text-decoration:none;
  transition:.15s ease; border:1px solid transparent;
}

/* Botón primario en coral (CTA) */
.c-btn--primary{
  background: var(--c-coral);
  color:#fff;
  border-color: var(--c-coral);
  box-shadow: 0 6px 16px rgba(255,107,92,.25);
}
.c-btn--primary:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* Botón secundario */
.c-btn--secondary{ background:#fff; color: var(--c-primary); border-color: var(--c-border); }
.c-btn--secondary:hover{ border-color: var(--c-primary); }

/* Chip: ancho sólo del texto y pegado a la izquierda */
.c-card .c-tag{
  align-self: flex-start;   /* evita el stretch horizontal */
  display: inline-flex;     /* shrink-to-fit del contenido */
  width: auto;              /* asegura que no herede 100% */
  max-width: 100%;
  align-items: center;
  white-space: nowrap;      /* opcional: evita salto de línea */
}