/* Paleta */
:root{
  --vino:#a31b41;
  --dorado:#af895e;
  --blanco:#fff;
  --borde:#e6e6e6;
  --txt:#3f4750;
  --txt-sec:#5a6672;
}

/* Fondo sección */
.stat-bg-1{
  padding:24px 0;
  background: linear-gradient(to bottom,#ffffff 0%,#f7f7f7 40%,#ededed 100%);
}

/* Margen interno de la celda bootstrap */
#contenedor-tarjetas-cursos-cat .cat-col{ padding:12px 16px; }

/* --- CÁPSULA --- */
#contenedor-tarjetas-cursos-cat .curso-pill{
  position:relative;
  display:block;
  min-height:180px;
  border-radius:14px;
  border:1px solid var(--borde);
  background: linear-gradient(180deg,#fff 0%,#f7f7f7 100%);
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  overflow:hidden;
  isolation:isolate;
  /*border: 1px solid #d1d1d1;
     box-shadow: 0 8px 16px rgba(0, 0, 0, .1); 
    background: linear-gradient(to bottom, #ffffff 0%, #f7f7f7 40%, #e6e6e6 100%);*/
}

/* Franja izquierda + número */
#contenedor-tarjetas-cursos-cat .pill-left{
  position:absolute; inset:0 auto 0 0;
  width:140px;
  background:var(--dorado);
  display:flex; align-items:center; justify-content:center;
}
#contenedor-tarjetas-cursos-cat .pill-num{
  color:var(--blanco); font-weight:700; font-size:32px; margin:0;
}

/* Icono vino */
#contenedor-tarjetas-cursos-cat .pill-icon{
  position:absolute;
  left:112px; top:50%; transform:translateY(-50%);
  width:68px; height:68px; border-radius:12px; background:var(--vino);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(0,0,0,.15), 0 0 0 4px var(--blanco);
  z-index:1;
}
#contenedor-tarjetas-cursos-cat .pill-icon img{
  width:100%; height:100%; object-fit:contain;
}

/* Texto */
#contenedor-tarjetas-cursos-cat .pill-right{
  position:relative;
  min-height:150px;
  padding:20px 24px 20px 220px; /* 140 franja + 68 icono + margen */
  display:flex; flex-direction:column; justify-content:center;
}
#contenedor-tarjetas-cursos-cat .pill-title{
  margin:0 0 6px; color:#54565a; font-weight:800; font-size:18px; line-height:1.25;
  text-transform:uppercase; overflow-wrap:anywhere; 
  /* hyphens:auto; */
  font-family:"Encode Sans",sans-serif;
}
#contenedor-tarjetas-cursos-cat .pill-sub{
  margin:0; color:var(--txt-sec); font-size:15px; line-height:1.45; text-align:justify;
  overflow-wrap:anywhere; 
  /* hyphens:auto;  */
  font-family:"Encode Sans",sans-serif;
}

/* Hover */
#contenedor-tarjetas-cursos-cat .curso-pill:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition:box-shadow .15s ease, transform .15s ease;
}

/* --- Responsive --- */
@media (max-width:991.98px){
  #contenedor-tarjetas-cursos-cat .pill-left{ width:120px; }
  #contenedor-tarjetas-cursos-cat .pill-icon{ left:95px; width:58px; height:58px; }
  #contenedor-tarjetas-cursos-cat .pill-right{ padding-left:180px; }
  #contenedor-tarjetas-cursos-cat .pill-title{ font-size:18px; }
  /* Si quieres limitar líneas en móvil, descomenta: */
  /* 
  #contenedor-tarjetas-cursos-cat .pill-title{
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  }
  #contenedor-tarjetas-cursos-cat .pill-sub{
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden;
  } 
  */
}
@media (max-width: 911px) {
  /* Aquí pones los estilos que se aplicarán a 911px o menos */

  #contenedor-tarjetas-cursos-cat .cat-col {
    flex: 1 1 100%;      /* Ocupa todo el ancho → una sola columna */
    max-width: 100%;
  }

  /* Si usas Bootstrap: fuerza una sola columna */
  #contenedor-tarjetas-cursos-cat .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Ajusta el padding si quieres más aire entre tarjetas */
  #contenedor-tarjetas-cursos-cat .cat-col {
    padding: 12px 0;
  }
}
/* ===============================================
   🔹 RESPONSIVO: UNA COLUMNA HASTA 911px DE ANCHO
   =============================================== */
@media (max-width: 911px) {
  /* Cada tarjeta ocupará todo el ancho disponible */
  #contenedor-tarjetas-cursos-cat .cat-col {
    flex: 1 1 100%;
    max-width: 100%;
    padding: 12px 0;
  }

  /* Si usas Bootstrap, forzamos col-md-6 a comportarse como col-12 */
  #contenedor-tarjetas-cursos-cat .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Ajustamos el padding interno del cuerpo de texto */
  #contenedor-tarjetas-cursos-cat .pill-right {
    padding: 18px 20px 18px 170px; /* Menor padding lateral */
    min-height: 140px;
  }

  /* Reducimos la franja y el icono vino */
  #contenedor-tarjetas-cursos-cat .pill-left { width: 115px; }
  #contenedor-tarjetas-cursos-cat .pill-icon {
    left: 90px;
    width: 58px;
    height: 58px;
  }

  /* Título y texto ligeramente más pequeños */
  #contenedor-tarjetas-cursos-cat .pill-title {
    font-size: 18px;
    line-height: 1.3;
  }
  #contenedor-tarjetas-cursos-cat .pill-sub {
    font-size: 14px;
    line-height: 1.4;
  }
}