/* ======= LAYOUT PRINCIPAL (porcentajes) ======= */
.curso-layout {
  display: block; /* mobile stacked por defecto */
  gap: 30px;
}

/* Desktop: dos columnas con porcentajes */
@media (min-width: 992px) {
  .curso-layout {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    width: 100%;
    box-sizing: border-box;
  }

  /* columna izquierda: 70% del ancho disponible */
  .curso-layout .columna-izquierda {
    flex: 0 0 70%;
    max-width: 70%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
  }

  /* columna derecha: 30% (sidebar) */
  .curso-layout .columna-derecha {
    flex: 0 0 30%;
    max-width: 30%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
  }
}

/* ======= FILA SUPERIOR (imagen + info) ======= */
.fila-superior {
  display: flex;
  gap: 20px;
  align-items: stretch; /* para que ambos cuadros tengan la misma altura */
  width: 100%;
  box-sizing: border-box;
  margin-top: 2%;
  margin-bottom: 2%;
}

/* cuadros del mismo ancho: proporción 50% / 50% */
.fila-superior .thumb {
  flex: 0 0 50%;
  max-width: 50%;
  display: block;
  overflow: hidden;
  border-radius: 12px;
  box-sizing: border-box;
}

/* info-superior ocupará la otra mitad */
.fila-superior .info-superior {
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
}

/* imagen que rellena el cuadro */
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Altura relativa en escritorio en vez de px (se adapta mejor) */
@media (min-width: 992px) {
  .fila-superior { min-height: 35vh; } /* ajustá si querés más o menos altura */
}

/* ======= BLOQUES ARRIBA: 2x2 (grid) ======= */
.bloques-arriba {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columnas */
  grid-auto-rows: minmax(40px, 1fr);
  gap: 10px;
  box-sizing: border-box;
}

/* estilo de cada celda (days, schedule, etc.) */
.bloques-arriba > div {
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  box-sizing: border-box;
}

/* ======= REQUIREMENTS: mitad inferior del cuadro derecho ======= */
.info-superior .requirements {
  flex: 1 1 auto;
  border-top: #9e9e9e 2px solid;
  padding: 12px;
  overflow: auto;
  
}

/* Forzar que bloques-arriba y requirements ocupen cada uno 50% del contenedor (desktop) */
@media (min-width: 992px) {
  .col.tercer-bloque {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    width: 100%;
    box-sizing: border-box;
  }

  .col.tercer-bloque .columna-izquierda {
    flex: 0 0 70%;
    max-width: 70%;
  }

  .col.tercer-bloque .columna-derecha {
    flex: 0 0 30%;
    max-width: 30%;
  }
}

/* Si preferís que en pantallas intermedias no usen min-width, comentá la línea anterior */
@media (max-width: 1200px) {
  .fila-inferior > div { min-width: 220px; }
}

/* ======= COLUMNA DERECHA (tarjetas) ======= */
.tarjeta-info, .tarjeta-form {

  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  box-sizing: border-box;
  margin-top: 4%;
 
}
.tarjeta-form{
  background-color: #101828;
  text-align: center;

}

/* Items dentro de la tarjeta info */
.tarjeta-info > div {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 1.1rem;
}

/* boton formulario */
.btn-formulario {
  display: inline-block;
  text-align: center;
  color: white;
  padding: 10px 14px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.2s;
}

.btn-formulario:hover { background: #ececec; }

/* ======= RESPONSIVE (mobile) ======= */
@media (max-width: 991px) {
  .curso-layout {
    padding: 0 8px;
  }
  .fila-superior {
    flex-direction: column;
  }
  /* En mobile, cada bloque de la fila superior ocupa 100% */
  .fila-superior .thumb, .fila-superior .info-superior {
    flex: 0 0 100%;
    max-width: 100%;
    height: auto;
  }
  /* grid 2x2 se mantiene si hay espacio; en pantallas muy pequeñas quedará 2 columnas que se ajustan */
  .bloques-arriba { grid-template-columns: repeat(2, 1fr); }
  /* fila inferior pasa a 100% por columna */
  .fila-inferior > div { flex: 0 0 100%; max-width: 100%; min-width: 0; }
  /* la columna derecha baja al final (stacked) por diseño móvil */
  .curso-layout .columna-derecha { flex: 0 0 100%; max-width: 100%; }
  .curso-layout .columna-izquierda { flex: 0 0 100%; max-width: 100%; }
}
/* ======= LAYOUT PRINCIPAL ======= */
.col.tercer-bloque {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 30px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Columna izquierda: contenido principal */
.col.tercer-bloque .columna-izquierda {
  flex: 0 0 68% !important;
  max-width: 68% !important;
  box-sizing: border-box !important;
}

/* Columna derecha: info lateral */
.col.tercer-bloque .columna-derecha {
  flex: 0 0 32% !important;
  max-width: 32% !important;
  box-sizing: border-box !important;
}

/* Versión mobile: apilar */
@media (max-width: 991px) {
  .col.tercer-bloque {
    flex-direction: column !important;
  }

  .col.tercer-bloque .columna-izquierda,
  .col.tercer-bloque .columna-derecha {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}
/* ======= ESTILO DE TEXTOS SOLO EN LA SECCIÓN DEL CURSO ======= */
.playlist {
  font-family: "Panton Regular", sans-serif;
  color: #6e6e6e;
  font-size: 15px;
  line-height: 1.5;
}

/* Títulos dentro del curso */
.playlist h1,
.playlist h2,
.playlist h3,
.playlist h4,
.playlist h5,
.playlist h6 {
  font-family: "Panton", sans-serif;
  color: #9E9E9E;
  font-weight: 300; /* más fino */
  font-size: 15px;
}
/* Íconos FontAwesome dentro del curso */
.playlist i,
.playlist .fa,
.playlist .fas {
  color: #777777;
}

/* Evitar que los botones se vean grises (mantener contraste) */
.playlist .btn-formulario {
  color: #3d3d3d;
  background: #fff;
  
}
.playlist .btn-formulario:hover {
  background: #ececec;
}

/* Si algunos textos van sobre fondo blanco, 
   podés oscurecer solo esos para legibilidad */
.playlist .bloques-arriba > div,
.playlist .tarjeta-info,
.playlist .tarjeta-form {
  color: #555; /* opcional */
}

.tarjeta-form h1{
  color:#ffffff;
  text-align: left;
  font-size: 18px;
}

.tarjeta-form p{
  color:#bebebe;
  text-align: left;
  margin-bottom: 20px;
}

/* ======= FILA INFERIOR (Descripción y Para quién) ======= */
.fila-inferior {
  display: flex;
  flex-wrap: wrap; /* por si en pantallas pequeñas necesitás que bajen */
  gap: 20px;
  justify-content: space-between;
  margin-top: 20px;
}

/* Cada bloque ocupa la mitad del ancho en escritorio */
.fila-inferior .descripcion,
.fila-inferior .para-quien {
  flex: 0 0 48%; /* dos columnas con pequeño margen */
  max-width: 48%;
  box-sizing: border-box;
}

/* En móviles, se apilan una debajo de la otra */
@media (max-width: 768px) {
  .fila-inferior {
    flex-direction: column;
  }

  .fila-inferior .descripcion,
  .fila-inferior .para-quien {
    flex: 0 0 100%;
    max-width: 100%;
  }
}